MediaWiki:Vector.css: Difference between revisions
Added styling for left sidebar |
Search bar adjustments to better match figma. |
||
| (6 intermediate revisions by the same user not shown) | |||
| Line 13: | Line 13: | ||
--head-personal-height:3em; | --head-personal-height:3em; | ||
--head-background-image:url("https://wiki.geministation.com/images/0/0f/Wiki_background.jpg"); /* [[File:Wiki_background.jpg]] */ | --head-background-image:url("https://wiki.geministation.com/images/0/0f/Wiki_background.jpg"); /* [[File:Wiki_background.jpg]] */ | ||
--head-height:calc( | --head-height:calc(5.5em + var(--head-personal-height) + var(--search-height) + var(--logo-height)); | ||
| Line 154: | Line 154: | ||
width:var(--logo-width); | width:var(--logo-width); | ||
height:var(--logo-height); | height:var(--logo-height); | ||
} | |||
@media screen and (max-width: 982px) { | |||
#p-logo { | |||
top:calc((var(--head-height) + var(--head-border-height) + 2.5em) * -1); | |||
} | |||
} | } | ||
| Line 215: | Line 221: | ||
#left-navigation, | #left-navigation, | ||
#right-navigation { | #right-navigation { | ||
margin-top: | margin-top:var(--head-height); | ||
} | } | ||
| Line 280: | Line 286: | ||
height:var(--search-height); | height:var(--search-height); | ||
border-radius:var(--search-height); | border-radius:var(--search-height); | ||
border: | border:3px solid #FAFAFA; | ||
background: | background:#212F3E; | ||
box-shadow:none; | box-shadow:none; | ||
color:#fff; | color:#fff; | ||
| Line 309: | Line 315: | ||
top:calc(var(--head-height) + var(--head-border-height) - 1px); | top:calc(var(--head-height) + var(--head-border-height) - 1px); | ||
width:var(--sidebar-width); | width:var(--sidebar-width); | ||
} | |||
@media screen and (max-width: 982px) { | |||
#mw-panel { | |||
top:calc(var(--head-height) + var(--head-border-height) + 2.5em - 1px) | |||
} | |||
} | } | ||
| Line 323: | Line 335: | ||
content:''; | content:''; | ||
top:0; | top:0; | ||
margin-left:calc(var(--sidebar-width) * -1 - 1.5em); | margin-left: calc(var(--sidebar-width) * -1 - 1em); | ||
} | |||
@media screen and (min-width:982px) { | |||
#content::after { | |||
margin-left: calc(var(--sidebar-width) * -1 - 1.5em); | |||
} | |||
} | } | ||
/**/ | /**/ | ||
| Line 335: | Line 353: | ||
**********/ | **********/ | ||
.mw-footer { | .mw-footer { | ||
margin-left:0; | margin-left:0; | ||
background-color:var(--footer-background-color); | background-color:var(--footer-background-color); | ||
| Line 349: | Line 366: | ||
} | } | ||
#footer- | #footer__content { | ||
display: grid; | |||
grid-column-gap: 20px; | |||
grid-template-columns: repeat(3, 1fr); | |||
margin:auto; | |||
padding-top:40px; | |||
max-width:64em; | |||
} | |||
#footer__logo { | |||
display:block; | |||
margin-bottom:1em; | |||
} | |||
#footer__logo img { | |||
width:15em; | |||
} | |||
#footer h2 { | |||
font-size:1em; | |||
color: var(--footer-text-color); | |||
border:0; | |||
margin-bottom:20px; | |||
} | } | ||
| Line 415: | Line 452: | ||
flex-flow:column-reverse; | flex-flow:column-reverse; | ||
align-items:center; | align-items:center; | ||
margin-top:1.5em; | margin-top:1.5em; | ||
color:#DFDCDC; | |||
text-transform: uppercase; | |||
font-family: Roboto, sans-serif; | |||
font-size:0.8125em; | |||
} | |||
#sidebar a:hover { | |||
text-decoration: none; | |||
color: #fff; | |||
} | } | ||
| Line 429: | Line 474: | ||
border-radius:100%; | border-radius:100%; | ||
background:gray; | background:gray; | ||
margin-bottom:5px; | |||
} | } | ||
/************************* | /************************* | ||
* End left extra sidebar * | * End left extra sidebar * | ||
**************************/ | **************************/ | ||