Structorica Wiki

MediaWiki:Vector.css: Difference between revisions

Browse history interactively
← Older edit
Ivan (talk | contribs)
Bureaucrats, Interface administrators, Suppressors, Administrators
796 edits
No edit summary
No edit summary
 
(91 intermediate revisions by the same user not shown)
Line 4: Line 4:
     /* Width control */
     /* Width control */
     --fixed-width: 1200px; /* Dynamicly changed by Hook */
     --fixed-width: 1200px; /* Dynamicly changed by Hook */
       
    --vector-tabs: none;
    --vector-tabs-first: none;
}
}


.mw-parser-output a.external {
    padding-right: 0em;
    background-size: 0.0em;
}
.mw-parser-output a.external::after {
    content: '';
    display: inline-block;
    width: 0.857em;
    height: 0.857em;
    background-color: var(--link-color);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M6%201h5v5L8.86%203.85%204.7%208%204%207.3l4.15-4.16L6%201Z%20M2%203h2v1H2v6h6V8h1v2a1%201%200%200%201-1%201H2a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M6%201h5v5L8.86%203.85%204.7%208%204%207.3l4.15-4.16L6%201Z%20M2%203h2v1H2v6h6V8h1v2a1%201%200%200%201-1%201H2a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1Z%22/%3E%3C/svg%3E");
    -webkit-mask-size: cover;
    mask-size: cover;
    vertical-align: text-top;
    margin-top: 3px;
    margin-left: 0.143em;
}


/* Main page elements */
/* Main page elements */
body {
body {
     background-color: var(--background-color-base);
     background-color: var(--site-background-color);
     color: var(--color-base);
     color: var(--color-base);
   
    background-image: var(--header-background);
    background-repeat: repeat-x, repeat;
    background-position: top left, top left;
    background-size: auto 320px;
}
body.rootpage-Structorica_Wiki #firstHeading,
body.rootpage-Main_Page #firstHeading,
body.page-Main_Page #firstHeading {
display: none;
}
body.rootpage-Structorica_Wiki #bodyContent,
body.rootpage-Main_Page #bodyContent,
body.page-Main_Page #bodyContent {
clear: both;
}
body.rootpage-Structorica_Wiki .mw-indicators,
body.rootpage-Main_Page .mw-indicators,
body.page-Main_Page .mw-indicators{
margin-top: -15px;
}
}




Line 28: Line 75:
#p-logo a {
#p-logo a {
margin: auto;
margin: auto;
height: 8.75em; /* 140px */
    background-size: contain;
/*height: 140px; */
}
#p-logo {
    margin-top: 2px;
    margin-bottom: 4px;
height: 115px;
}
 
/* Hide 'Read' in Toolbar*/
#ca-view {
    display: none !important;
}
 
 
 
#mw-panel h3 {
text-decoration: none !important;
cursor: pointer;
}
 
 
/* Set the tab link colours to black and bold */
#p-namespaces a,
#p-views a,
#p-cactions-label span,
div#mw-head div.vectorMenu h4,
div#p-variants.vectorMenu #mw-vector-current-variant {
font-weight: 600;
text-decoration: none;
}
 
 
#p-namespaces .new a,
#p-views .new a {
color: #e1e6cc;
}
}


#right-navigation,
#right-navigation,
Line 36: Line 127:
}
}
#footer {
#footer {
    margin-top: 10px;
margin-right: 0px;
margin-right: 0px;
    padding: 8px 16px 8px 16px;
}
}


Line 42: Line 135:
#left-navigation,
#left-navigation,
#right-navigation {
#right-navigation {
margin-top: 54px;
margin-top: 60px;
    height: 30px;
}
}


Line 60: Line 154:
     background: none;
     background: none;
     padding: 0;
     padding: 0;
     height: 36px;
     height: 30px;
}
}


Line 75: Line 169:
     background: none;
     background: none;
}
}
 
.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading{
 
    background-size: 100% 0px;
}
#mw-head .vector-menu-dropdown .vector-menu-heading {
    margin: -2px -1px 0px 0px;
}
#mw-head .vector-menu-dropdown .vector-menu-heading {
    color: var(--color-topbar-text);
}




Line 86: Line 187:
nav.vector-menu-dropdown:hover,
nav.vector-menu-dropdown:hover,
nav.vector-menu-dropdown:focus {
nav.vector-menu-dropdown:focus {
     background-color: #6BA41E;
     --ca-background-image: var(--vector-tabs);
    --ca-background-color: var(--content-border-top-color);
    background: var(--ca-background-color);
     position: relative;
     position: relative;
}
nav.vector-menu-tabs {
    background: var(--content-border-top-color);
}
nav.vector-menu-tabs ul li.selected{
    --ca-background-color: var(--content-background-color);
    background-position-y: bottom, 0px;
}
}


nav.vector-menu-tabs ul li.selected,
nav.vector-menu-tabs ul li:hover:not(.selected),
nav.vector-menu-tabs ul li:hover,
nav.vector-menu-tabs ul li:focus:not(.selected),
nav.vector-menu-tabs ul li:focus,
nav.vector-menu-dropdown:hover,
nav.vector-menu-dropdown:hover,
nav.vector-menu-dropdown:focus {
nav.vector-menu-dropdown:focus {
     /*--ca-background-color: var(--content-background-color);*/
     --ca-background-color: var(--content-border-top-color-hovered);
    background-position-y: bottom, 6px;
}
}


Line 104: Line 213:
     position: absolute;
     position: absolute;
     left: 0;
     left: 0;
    background: var(--ca-background-image) var(--content-border-top-color) no-repeat left top;
     width: 0px;
     width: 0px;
     height: 100%;
     height: 100%;
     pointer-events: none;
     pointer-events: none;
}
#left-navigation nav.vector-menu-tabs li:first-child:before {
    background: var(--vector-tabs-first) no-repeat left top;
    height: 93px
}
}




nav.vector-menu-dropdown .mw-list-item a {
    color: var(--link-color);
}




nav.vector-menu-tabs li a {
nav.vector-menu-tabs li a {
     padding: 15px 10px 0px 10px;
     padding: 9px 13px 0px 13px;
     height: 21px;
     height: 21px;
    line-height: 1.1em;
}
}


nav.vector-menu-dropdown label {
nav.vector-menu-dropdown label {
padding: 15px 10px 0px 10px !important;
padding: 9px 13px 0px 13px !important;
}
 
 
.vector-menu-tabs .mw-watchlink.icon {
/* Force font-size when using the icon */
    font-size: 16px !important;
}
 
.vector-menu-tabs .mw-watchlink.icon a {
    width: 45px;
    margin-right: 0px;
    margin-bottom: -10px;
}
 
.vector-menu-tabs .mw-watchlink.icon a:before {
left: 1.17em;
    top: 0.60em;
}
}


nav.vector-menu-dropdown .vector-menu-content {
nav.vector-menu-dropdown .vector-menu-content {
Line 135: Line 272:
#p-cactions {
#p-cactions {
padding-right: 8px;
padding-right: 8px;
    height: 30px;
    margin-right: -2px;
}
}


Line 142: Line 281:


nav.vector-menu h3 span {
nav.vector-menu h3 span {
     padding-left: 14px;
     padding-left: 0px;
     font-weight: bold;
     font-weight: bold;
}
}


nav.vector-menu h3 a {
nav.vector-menu h3 a {
     height: 36px;
     height: 30px;
     margin-right: 0px;
     margin-right: 0px;
}
}


nav.vector-menu div.vector-menu-content {
nav.vector-menu div.vector-menu-content {
     top: 35px;
     top: 30px;
}
 
 
/* Set the outer content link colours to light gray and white */
#mw-panel *:not(h3) > a:not(:hover):not(:focus),
#footer a:not(:hover):not(:focus),
.mw-notification a:not(:hover):not(:focus) {
color: var( --color-siderbar-links)  !important;
}
 
#mw-panel h3,
#mw-panel a,
#footer li,
#footer a,
.mw-notification a {
color: var(--color-siderbar-base) !important;
}
 
#footer {
    background-color: #252526;
    /*border: 2px #313233 solid;*/
}
#footer-icons a {
    padding: 0px;
    background-color: #ffffff00;
    border: 0px;
}
#footer-icons li {
    padding: 0px;
}
#footer-icons {
    margin-top: 2px;
    height: 31px;
}
}


nav.mw-portlet.emptyPortlet {
display: none;
}


nav.vector-menu-tabs ul li.selected,
#footer:after {
nav.vector-menu-tabs ul li:hover,
    content: '';
nav.vector-menu-tabs ul li:focus,
    clear: both;
nav.vector-menu-dropdown:hover,
    display: block;
nav.vector-menu-dropdown:focus {
  /* --ca-background-color: var(--content-background-color);*/
}
}
.mw-body, .parsoid-body,
.mw-body, .parsoid-body,
div#content {
div#content {
Line 177: Line 351:
background-color: var(--content-background-color);
background-color: var(--content-background-color);
}
}
/* Style the personal links */
#p-personal {
    right: 10px;
    top: 5px;
    margin-right: 0;
    margin-left: 10px;
}
#p-personal a {
    color: white;
}
.mw-echo-alert {
    background-color: #8e721c;
    border: 1px solid #fff;
    border-radius: 4px;
    font-weight: bold;
}
#p-personal .vector-menu-content-list {
padding: 1px 0.5em 1px 0;
}
.vector-user-menu-legacy li {
    padding-top: 0.3em;
    padding-bottom: 0.3em;
}
.oo-ui-icon-bell, .mw-ui-icon-bell::before,
.oo-ui-icon-tray, .mw-ui-icon-tray::before {
    filter: invert(1);
}
.vector-user-menu-legacy #pt-anonuserpage,
.vector-user-menu-legacy #pt-tmpuserpage,
.vector-user-menu-legacy #pt-userpage a {
    filter: invert(1);
    padding-top: 0;
    background-size: 14px;
    background-position: unset;
}
.vector-user-menu-legacy #pt-anonuserpage span,
.vector-user-menu-legacy #pt-tmpuserpage span,
.vector-user-menu-legacy #pt-userpage a span {
    color: white;
    filter: invert(1);
}
.skin-vector-legacy #p-personal #pt-notifications-notice,
.skin-vector-legacy #p-personal #pt-notifications-alert {
margin-right: 0;
}
.skin-vector-legacy #pt-notifications-notice .mw-echo-notifications-badge,
.skin-vector-legacy #pt-notifications-alert .mw-echo-notifications-badge {
    top: 0;
    width: 14px;
    height: 14px;
    background-size: 14px 14px;
    margin-right: 8px;
}
.skin-vector-legacy #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read,
.skin-vector-legacy #pt-notifications-alert .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read {
    margin-right: 2px;
}
.skin-vector-legacy #pt-notifications-notice .mw-echo-notifications-badge:after,
.skin-vector-legacy #pt-notifications-alert .mw-echo-notifications-badge:after {
    top: 4px;
    filter: invert(1);
border-color: var(--color-inverted-fixed);
color: var(--color-inverted-fixed);
}
/* Style the simple search */
#p-search {
margin-left: -2px;
}
#p-search form {
position: relative;
padding: 0 0px 0 1px;
height: 30px;
}
#simpleSearch {
border: 0;
background-color: #D0CFCF;
background-image: -webkit-linear-gradient(#C3C3C3, #DBDBDB);
background-image: linear-gradient(#C3C3C3, #DBDBDB);
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
}
.vector-search-box,
.vector-search-box form {
    margin: 0;
}
/* Remove border of search bar */
#simpleSearch .vector-search-box-input {
    border: none;
    border-radius: 0;
    outline: none;
    box-shadow: none;
    height: 30px;
    padding-left: 13px;
    background-color: var(--simplesearch-background-color);
}
.vector-search-box-input::placeholder {
color: var(--searchinput-placeholder-color);
}
/* Style the simple search */
#p-search {
width: unset;
min-width: unset;
}
#p-search #searchform {
position: relative;
padding: 0 0px 0 1px;
}
/* Unstyle codex search */
#p-search #searchform .cdx-text-input__input,
#p-search #searchform .cdx-search-input,
#p-search #searchform {
background: none;
display: block;
    border: none;
    border-radius: 0;
    outline: none;
    box-shadow: none;
    height: 30px;
}
/* Keep old vector default styles */
#p-search #searchform .cdx-search-input__input-wrapper {
    height: 100%;
    min-width: 6.5em;
    width: 20vw;
    max-width: 26em;
    margin: 0;
}
#p-search #searchform .cdx-search-input__input-wrapper {
position: relative;
border: 0;
background-color: #D0CFCF;
background-image: -webkit-linear-gradient(#C3C3C3, #DBDBDB);
background-image: linear-gradient(#C3C3C3, #DBDBDB);
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
}
#p-search #searchform .cdx-text-input__input {
    background-color: #3552e5;
    color: #fff;
    min-height: unset;
    padding: 5px 2.15384615em 5px 0.4em;
}
#p-search #searchform .cdx-text-input__input::placeholder {
color: var(--searchinput-placeholder-color);
}
#p-search #searchform .cdx-search-input__end-button {
display: block;
    position: absolute;
    top: 1px;
    bottom: 1px;
    right: 1px;
    min-width: 28px;
    width: 2.15384615em;
    border: 0;
    padding: 0;
    cursor: pointer;
    direction: ltr;
    text-indent: -99999px;
    white-space: nowrap;
    overflow: hidden;
    z-index: 1;
    background: no-repeat center / 1.23076923em url(/skins/Vector/resources/skins.vector.styles.legacy/images/search.svg?ac00d);
    opacity: 0.67;
    margin: 0;
    min-height: unset;
}
.cdx-button--size-large {
    min-height: unset;
}
#p-search #searchform > .cdx-search-input__end-button {
right: 5px;
}
#p-search #searchform .cdx-thumbnail__placeholder,
#p-search #searchform .cdx-thumbnail__image {
background-color: var(--background-color-base);
}
.searchButton[name='go'] {
    background: no-repeat center / 1.23076923em url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4zM3 8a5 5 0 1 0 10 0A5 5 0 0 0 3 8z'/%3E%3C/svg%3E");
    opacity: 0.9;
}
/* Fix placeholder text being too light in chrome */
::-webkit-input-placeholder {
color: inherit;
opacity: 0.8;
}
/* The suggestions shown under the search bar */
.suggestions.searchbar {
margin-right: -1px;
}
.suggestions.searchbar > .suggestions-results,
.suggestions.searchbar > .mw-searchSuggest-link {
display: block;
margin-left: 1px;
}
.suggestions.searchbar .suggestions-results,
.suggestions.searchbar .suggestions-special,
.suggestions .suggestions-results,
.suggestions .suggestions-special {
background-color: #DBDADA !important;
border-color: #3C3B3B !important;
}
.suggestions.searchbar .suggestions-result-current,
.suggestions .suggestions-result-current {
background-color: #0078D7 !important;
}




Line 207: Line 668:
         max-width: var(--fixed-width); /* Dynamicly changed by Hook */
         max-width: var(--fixed-width); /* Dynamicly changed by Hook */
         margin: auto;
         margin: auto;
    }
}
/* --------------------------- */
/* Discord Sidebar */
#n-Discord-\(En\) a,
#n-Дискорд-\(Ru\) a {
    display: block;
    position: relative;
    width: 120px;
    height: 20px;
    color: #ffffff00;
    left: -0.25em;
}
#n-Discord-\(En\) a::before {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    content: "";
    background: url('images/essentials/Discord_wiki_en.svg') no-repeat;
    background-size: contain;
}
#n-Дискорд-\(Ru\) a::before {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -0.25em;
    content: "";
    background: url('images/essentials/Discord_wiki_ru.svg') no-repeat;
    background-size: contain;
}
/** Адаптации для узких экранов **/
@media screen and (max-width: 720px) {
    #mw-head {
        top: 13px;
    }
    .mw-body {
        margin-top: -2px;
    }
    #p-logo {
        margin-bottom: 0;
        height: 160px;
    }
    #p-logo,
    #p-logo a {
        margin: 0;
    }
    div#p-search form {
        background: none;
        border: none;
        margin: 0;
    }
    div#p-search form::before,
    div#p-search form::after {
        border: none;
    }
    div#simpleSearch::before {
        border-left-color: transparent;
    }
    div#simpleSearch::after {
        border-top-color: transparent;
    }
    div#mw-navigation div#mw-panel {
        position: static !important; /* position: relative may be added to inline styles by built-in JS after page load; it needs an !important to override */
    }
    #left-navigation,#content {
        margin-left:10px
    }
    #footer {
        margin-left: 8px
    }
    #footer:before {
        content: none
    }
    #left-navigation,#right-navigation {
        margin-top: 40px
    }
    #p-personal {
        top: -8px
    }
    div#mw-navigation div#mw-panel {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        width: 100%
    }
    .vector-legacy-sidebar .vector-menu-portal {
        width: 142px;
        flex-shrink: 0;
        display: var(--sidebar-display,flex);
        flex-direction: column
    }
    .vector-legacy-sidebar .vector-menu-portal .vector-menu-content {
        flex-grow: 1;
        display: block !important
    }
    #mw-panel nav.vector-menu-portal.collapsed h3:before {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    #p-search {
        float: none;
        position: absolute;
        right: 0;
        left: 0;
        margin: 0;
        bottom: -31px;
        margin-bottom: -1em
    }
    #p-search #searchform {
        margin: 0;
        padding-top: 0px;
        padding-right: calc(10px);
        padding-bottom: 0px;
        padding-left: calc(20px);
    }
    #p-search #searchform .cdx-search-input__input-wrapper {
        margin: 0;
        padding: 0;
        width: 100%;
        max-width: 100%;
        border-bottom: 3px solid var(--simplesearch-left-border-color);
        border-right: 3px solid var(--simplesearch-top-border-color)
    }
    #p-search #searchform .cdx-search-input__end-button {
        right: -2px
    }
    #p-search #searchform > .cdx-search-input__end-button {
        right: calc(1em + 14px)
    }
    .mw-body,.parsoid-body,div#content {
        padding-top: calc(2em + 33px);
    }
    #p-cactions {
        margin-right: -8px
    }
    .vector-menu-dropdown .vector-menu-content {
        left: unset;
        right: 7px
    }
    #p-search #searchform .cdx-search-input__input-wrapper:before,#p-search #searchform .cdx-search-input__input-wrapper:after,#mw-page-base::after {
        content: none
    }
   
    div#mw-panel {
        padding-top: 2.5em;
        padding-bottom: 1.5em;
    }
   
    .vector-search-box-inner{
        width: auto;
        max-width: none;
    }
}
@media screen and (max-width: 500px) {
    /* TOC fix */
    #mw-content-text > .mw-parser-output > div[style*="float"] {
        float: none !important;
        margin: 0 !important;
     }
     }
}
}
Retrieved from "https://structorica.wiki/w/MediaWiki:Vector.css"