@import "variables.less"; .ts-inner { max-width: 100em; padding: 0 3em; margin: auto; } #p-logo-text, #mw-site-navigation { width: 12em; float: left; } #p-search, #mw-content, #mw-header-container .color-middle { margin-left: 12em; margin-right: 15em; } #mw-related-navigation, #user-tools { width: 15em; float: right; } /* Header */ #mw-header-container { position: fixed; z-index: 100; top: 0; width: 100%; background: @background; color: @text; padding: 0.5em 0 0; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.5); } @color-height: 4px; .color-left { float:left; height: @color-height; background: @red; width: 50%; } .color-right { display: inline-block; height: @color-height; background: @green; width: 50%; float:right; } .color-middle { height: @color-height; background: @blue; margin-top: .25em; margin-bottom: -@color-height; position: relative; } .dropdown { display: none; } #p-personal { display: inline-block; position: relative; padding-left: 1.5em; padding-right: 2em; line-height: 1; } #p-personal h3 { margin: 0; padding: .7em 0 .55em 25px; font-family: @fonts-secondary; font-weight: normal; font-size: 1.1em; .background-image-svg('images/user-grey.svg', 'images/user-grey.png'); background-position: 0 7px; background-repeat: no-repeat; &:after { display: inline-block; content: ''; width: 22px; height: 12px; .background-image-svg('images/arrow-down-grey.svg', 'images/arrow-down-grey.png'); background-position: center center; background-repeat: no-repeat; } &:hover { cursor: pointer; } } #p-logo-text { width: 11em; text-align: center; line-height: 1; a { padding: .2em 0; color: @text; font-family: @fonts-secondary; font-variant: small-caps; font-size: 1.75em; display: block; } } /* Search */ #simpleSearch { box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05); background: @background; position: relative; border: solid 1px @grey; } #searchInput { border: none; margin: 0; height: 2.1em; padding: .4em 4.5em .2em 2em; box-shadow: none; background: transparent; width: 100%; min-height: 0; } #searchButton, #mw-searchButton { position: absolute; top: 0; right: 1.5em; width: 2.5em; height: 2.5em; .icon; .background-image-svg('images/search-ltr.svg', 'images/search-ltr.png'); background-position: 50% 40%; box-shadow: none; } /* Dropdowns */ #p-personal:hover .dropdown { display: block; } .dropdown { .box; background: #fff; box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.05); position: absolute; padding: 20px 2em 0; min-width: 6em; top: 2.45em; right: 0; overflow: visible; line-height: 1.1; z-index: 1; ul, li { list-style: none; margin: 0; padding: 0; } ul { margin-bottom: 2em; } li { margin: 0 0 .35em; } } .pokey, .pokey::after { border-bottom: 10px solid #E6E6E6; border-left: 10px solid transparent; border-right: 10px solid transparent; content: ""; height: 0px; position: absolute; transform: rotate(360deg); // to force some smoothing width: 0px; } .pokey { right: 28px; top: -10px; } .pokey::after { border-bottom-color: #FFFFFF; right: -10px; top: 2px; } /* Content */ #mw-content-container { margin-top: 3em; padding-bottom: .5em; border-bottom: solid 4px @green; } #mw-content { .box; background: @background; padding: 1em 2em 3em; overflow: hidden; } #page-header-links { div, ul, li { list-style: none; display: inline-block; margin: 0; padding: 0; } li { margin: .25em 0 1.5em; &:hover { border-bottom: solid 3px @grey; } &.selected { border-bottom: solid 3px @blue; a { color: @text; } } } #p-namespaces { float: left; li { margin-right: 1em; } } #p-pagetools { float: right; li { margin-left: 1em; } } } #ca-watch a, #ca-unwatch a { .icon; display: inline-block; width: 1.4em; height: 1.4em; box-sizing: border-box; } #ca-watch a { .background-image-svg('images/star.svg', 'images/star.png'); } #ca-unwatch a { .background-image-svg('images/star-filled.svg', 'images/star-filled.png'); } /* Sidebars */ #mw-site-navigation .sidebar-chunk, #mw-related-navigation .sidebar-chunk { .box; padding: 1.5em 1.5em 0; margin: 1em; line-height: 1.1; ul, li { list-style: none; margin: 0; padding: 0; } h3 { font-weight: normal; font-size: 1em; margin: .25em 0 .75em 0; padding-bottom: .15em; border-bottom: solid 2px @grey; } ul { margin-bottom: 2em; } li { margin: 0 0 .35em; } } #mw-site-navigation .sidebar-chunk { margin-left: 0; } #mw-related-navigation .sidebar-chunk { margin-right: 0; } /* Footer */ #mw-footer { padding-top: .5em; padding-bottom: 1em; ul, li { margin: 1em 0; list-style: none; padding: 0; } } #footer-places li { display: inline; padding-right: 1em; } #footer-icons { float: right; margin: 0 0 0 1em; li { margin: 0 0 1em 0; } }