User:David Smith/common.css: Difference between revisions

Revision as of 22:28, 8 February 2021

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');

:root {
    --primary: #3e7bfa;
    --regular: #555770;
    --shadow: 0 16px 24px rgba(96,97,112,0.16),0 2px 8px rgba(40,41,61,0.04);
    --dark: #1c1c28;
    --dark6: rgba(28,28,40,0.6);
    --light: #e4e4eb;
    --light8: rgba(228,228,235,0.8);
    --light6: rgba(228,228,235,0.6);
    --red: #ff3b3b;
    --red8: rgba(230,53,53,0.8);
    --blue: #004fc4;
    --dark-primary: #6093ff;
    --dark-line: hsla(0,0%,100%,0.23);
}

html, body  {
    color: var(--light8);
    font-family: 'Open Sans', sans-serif;
    text-rendering: optimizeLegibility;
    background-color: var(--dark);
}

h1, h2, h3, h4, h5, h6, strong {
    color: var(--light8);
    font-family: 'Open Sans', sans-serif !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    border-bottom: none !important;
}

h1 {
    font-size: 32px !important;
    margin-bottom: 1.15em !important;
}

#mw-page-base {
    color: var(--light8);
    background: var(--dark);
}

#mw-head {
    position: fixed !important;
    color: var(--light8);
    background: var(--dark);
    border-bottom: 2px solid var(--dark-line);
}

#mw-head-base {
    height: 7em !important;
}

.mw-wiki-logo {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='481.037' height='559.973' viewBox='239.474 0 481.037 559.973'%3E%3Cpath fill='%23FFF' d='M720.5 168.23a176.58 176.58 0 0 0-18.71-80.634 148.416 148.416 0 0 0-54.39-58.415 172.03 172.03 0 0 0-58.253-22.3 356.625 356.625 0 0 0-50.094-5.79C529.916.434 519.338 0 506.69 0H239.475v22.327h16.453c14.82 0 26.76 4.025 35.815 11.966 9.056 7.94 13.598 20.45 13.598 37.447v416.52c0 16.316-4.542 28.8-13.598 37.04-9.056 8.24-20.994 12.346-35.815 12.346h-16.453v22.327H547.73v-22.327h-16.453c-14.286 0-26.07-3.707-35.354-11.123-9.282-7.415-13.95-20.17-14.006-38.263V208.967c-2.23-3.264-4.678-5.194-10.715-5.194-10.47 0-8.294 10.878-23.74 10.878-16.67 0-15.42-10.877-24.993-10.877-12.456 0-9.845 10.878-22.3 10.878-12.456 0-9.52-10.877-19.663-10.877-11.123.19-8.376 9.98-16.97 10.606-1.333 0-2.72-2.72-2.72-2.72v-6.2c0-8.704 5.82-23.17 10.145-29.916 21.403-33.94 63.04-65.268 111.5-70.055 1.55-5.06 7.207-21.186 10.497-21.186s8.974 16.317 10.66 21.24c48.407 4.812 90.042 36.114 111.5 70.053 4.323 6.853 10.143 21.32 10.143 29.915v6.2c0 .3-1.332 2.53-2.72 2.72-8.593-.625-5.847-10.416-16.97-10.606-10.143 0-7.18 10.878-19.66 10.878s-9.846-10.878-22.328-10.878c-9.572 0-8.295 10.878-24.992 10.878-15.42 0-13.27-10.878-23.74-10.878-6.038 0-8.486 1.93-10.716 5.194v123.6h18.166c59.32-1.05 106.85-15.8 142.584-44.245 37.066-29.56 55.613-69.728 55.613-120.04.026-.297 0 1.144 0-.106z'/%3E%3C/svg%3E");
    background-size: 3.5em;
}

#left-navigation {
    margin-top: 4.95em !important;
}

#right-navigation {
    margin-top: 4.95em !important;
    height: 2.2em;
}

#p-logo a {
    height: 7em !important;
}

#mw-panel {
    position: fixed !important;
}

.portal .body li,
.vector-menu-portal .body li {
    padding: 0.75em 0;
}

.portal .body,
.vector-menu-portal .body {
    margin-left: 0 !important;
}

.portal .body li a,
.vector-menu-portal .body li a {
    padding: 0.75em 0;
    color: var(--light8) !important;
}

.portal .body li a:hover,
.vector-menu-portal .body li a:hover {
    color: var(--dark-primary) !important;
    text-decoration: none;
}

.portal h3, .vector-menu-portal h3 {
    margin: 1em 0 0 !important;
    text-transform: uppercase;
    background: none !important;
    border-bottom: 1px solid var(--dark-line) !important;
}

.mw-body {
    padding: 2em !important;
    color: var(--light8);
    background: transparent !important;
    border-color: var(--dark-line) !important;
}

#p-personal {
    top: 1em !important;
}

#p-personal a {
    padding: 5px 10px !important;
    color: var(--light) !important;
    font-size: 14px;
    font-weight: bold;
    background: none;
    border-radius: 4px;
}

#p-personal a:hover {
    text-decoration: none;
    color: var(--dark) !important;
    background: var(--light) !important;
}

#pt-anonuserpage, #pt-userpage a {
    padding: 5px 10px !important;
    color: var(--light) !important;
    background: var(--red8) !important;
    border-radius: 4px;
}

#p-personal li {
    margin-left: 1em !important;
}

footer a,
.mw-parser-output a,
.mw-parser-output .external {
    margin: 0;
    padding: 0;
    color: var(--light8) !important;
    border-bottom: 1px solid var(--dark-line);
    background: none;
}

footer a:hover,
.mw-parser-output a:hover,
.mw-parser-output .external:hover {
    color: var(--dark-primary) !important;
    text-decoration: none;
    border-bottom: 1px solid var(--dark-primary);
}

.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown h3 {
    background: none !important;
}

.vector-menu-tabs {
    height: 2.25em !important;
    overflow: hidden;
    background: none !important;
}

.vector-menu-tabs li {
    margin: 0 1px;
    background: none !important;
    border: 1px solid transparent;
    border-radius: 7px 7px 0 0;
}

.vector-menu-tabs li:hover {
    background: var(--light) !important;
    border: 1px solid transparent;
}

.vector-menu-tabs li a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.6em;
    padding: 0 10px !important;
    color: var(--light) !important;
    background: none !important;
}

.vector-menu-tabs li a:hover {
    color: var(--dark) !important;
    text-decoration: none;
}

.vector-menu-tabs .selected {
    background: var(--light) !important;
    border: 1px solid transparent;
}

.vector-menu-tabs .selected a {
    color: var(--dark) !important;
}

.vector-menu-tabs .mw-watchlink.icon {
    background: var(--dark) !important;
}

.vector-menu-tabs .mw-watchlink.icon a {
    height: 2.5em;
    text-indent: -9999em;
    color: var(--dark) !important;
}

.vector-menu-tabs .mw-watchlink.icon a:hover {
    color: var(--dark) !important;
    background: var(--dark) !important;
}

.vector-menu-tabs .mw-watchlink.icon a:before {
    top: 9px !important;
}

#mw-head .vector-menu-dropdown h3 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 14px;
    color: var(--light) !important;
    height: 2.6em;
}

.vector-menu-dropdown .vector-menu-content-list {
    top: 2.25em;
    background: var(--dark) !important;
    border: 1px solid var(--dark-line);
}

.vector-menu-dropdown .vector-menu-content-list a {
    font-size: 14px;
    color: var(--light) !important;
}

#p-search form {
    margin: 0;
}

#searchInput {
    padding: 10px !important;
    border-radius: 7px 7px 0 0 !important;
    background: white !important;
    border: none !important;
    outline: none;
}

#searchInput:focus, #simpleSearch:hover #searchInput:focus {
    box-shadow: none !important;
}

.suggestions-results {
    border: none;
}

.suggestions-result {
    padding: 0.5em 0.5em;
    font-size: 14px;
}

.suggestions-result-current {
    color: var(--dark) !important;
    background: var(--dark-primary) !important;
}

.suggestions-special {
    padding: 0.5em;
    border: 2px solid var(--dark);
    border-width: 2px 0 0;
}

.suggestions-special:hover {
    color: var(--dark) !important;
}

td {
    border-color: var(--dark-line) !important;
}

#footer-poweredbyico {
    display: none !important;
}

@media (max-width: 980px) {
    #mw-panel {
        display:  none !important;
    }
    #left-navigation {
        margin-left: 0 !important;
    }
    .mw-body {
        margin-left: 0 !important;
        border-left: none !important;
    }
    #p-personal ul {
        flex: 1;
        display: flex;
        overflow: auto;
        width: 100vw;
        padding-left: 0 !important;
    }
    #p-personal ul li {
        display: flex;
        flex-shrink: 0;
        padding-top: 0;
    }
    #left-navigation {
        margin-top: 6.95em !important;
    }
    #right-navigation {
        margin-top: 6.95em !important;
    }
    #p-search {
        position: absolute;
        top: 3.5em;
        left: 0;
        right: 0;
        margin: 0;
    }
    #simpleSearch {
        width: 100%;
        max-width: 100%;
    }
    #searchInput {
        border-radius: 35px !important;
    }
}