Structorica Wiki

MediaWiki:Common.css: Difference between revisions

Browse history interactively
← Older editNewer edit →
Ivan (talk | contribs)
Bureaucrats, Interface administrators, Suppressors, Administrators
796 edits
No edit summary
No edit summary
Tag: Reverted
Line 1: Line 1:
/* CSS placed here will apply to all skins */
/* Structorica Vector Theme */


/*** BASE STYLES AND SETTINGS ***/
:root {
    /* Width control */
    --fixed-width: 1200px; /* Dynamicly changed by Hook */
}


/** Color variables that could be changed by various skin themes */


/* LIGHT THEME - default */
/* Main page elements */
:root,
body {
.skin-invert,
     background-color: var(--background-color-base);
.notheme {
     color: var(--color-base);
     --background-color-base: #303031;
}
    --content-background-color: #ebeef2;
       
    /* Переменные системы дизайна Codex */
    --color-base: #202122;
    --color-base-fixed: #202122;
    --color-base--hover: #404244;
    --color-emphasized: #101418;
    --color-subtle: #54595d;
    --color-placeholder: #72777d;
    --color-disabled: #72777d;
    --color-inverted: #fff;
    --color-inverted-fixed: #fff; /* The same as color-inverted in light mode, but does not change in dark mode. Use this for things that should be white in both modes. */
    --color-progressive: #36c; /* 'Progressive' Color and states */
    --color-progressive--hover: #4b77d6;
    --color-progressive--active: #233566;
    --color-progressive--focus: #36c;
    --color-destructive: #d73333; /* 'Destructive' Color and states */
    --color-destructive--hover: #fc493b;
    --color-destructive--active: #9f3526;
    --color-destructive--focus: #36c;
    --color-visited: #6a60b0; /* 'Visited' color. In combination with progressive. Used for default links. */
    --color-destructive--visited: #9f5555; /* Red link 'Visited' color. Used for visited red links. */
    --color-error: #d73333;
    --color-warning: #eeb533; /* Note, this is only meant for warning icon for contrast reasons. */
    --color-success: #177860; /* Note, this needs to use a tone darker than Red and Yellow for contrast reasons with background White. */
    --color-notice: #202122;
    --color-content-added: #006400;
    --color-content-removed: #8b0000;
    --filter-invert-icon: 0;
    --filter-invert-primary-button-icon: 1;
    --box-shadow-color-base: #000;
    --box-shadow-color-progressive--active: #233566;
    --box-shadow-color-progressive--focus: #36c;
    --box-shadow-color-progressive-selected: #36c;
    --box-shadow-color-progressive-selected--hover: #4b77d6;
    --box-shadow-color-progressive-selected--active: #233566;
    --box-shadow-color-destructive--focus: #36c;
    --box-shadow-color-inverted: #fff;
    --box-shadow-color-transparent: transparent;
    --background-color-base: #fff; /* Background Colors for static elements (for page layout, sections, etc.) from here on. */
    --background-color-base-fixed: #fff; /* The same as background-color-base in light mode, but does not change in dark mode. Use this for things that should be white in both modes. */
    --background-color-neutral: #eaecf0;
    --background-color-neutral-subtle: #f8f9fa;
    --background-color-interactive: #eaecf0;
    --background-color-interactive-subtle: #f8f9fa;
    --background-color-disabled: #c8ccd1; /* Components like Buttons, Checkboxes, Radios, ProgressBars…. */
    --background-color-disabled-subtle: #eaecf0; /* Components like TextInputs, Selects…. */
    --background-color-inverted: #101418;
    --background-color-progressive: #36c;
    --background-color-progressive--hover: #4b77d6;
    --background-color-progressive--active: #233566;
    --background-color-progressive--focus: #36c;
    --background-color-progressive-subtle: #f1f4fd;
    --background-color-destructive: #d73333;
    --background-color-destructive--hover: #fc493b;
    --background-color-destructive--active: #9f3526;
    --background-color-destructive--focus: #36c;
    --background-color-destructive-subtle: #ffe9e5;
    --background-color-error: #d73333;
    --background-color-error--hover: #fc493b;
    --background-color-error--active: #9f3526;
    --background-color-error-subtle: #ffe9e5;
    --background-color-warning-subtle: #fdf2d5;
    --background-color-success-subtle: #dff2eb;
    --background-color-notice-subtle: #eaecf0;
    --background-color-content-added: #a3d3ff;
    --background-color-content-removed: #ffe49c;
    --background-color-transparent: transparent;
    --background-color-backdrop-light: rgba( 255, 255, 255, 0.65 ); /* Backdrop is the term used by CSS Fullscreen API and is used to dim the background when a modal Dialog is open. Also known as overlay mask. */
     --background-color-backdrop-dark: rgba( 0, 0, 0, 0.65 );
    --background-color-button-quiet--hover: rgba( 0, 24, 73, 0.027 );
    --background-color-button-quiet--active: rgba( 0, 24, 73, 0.082 );
    --background-color-input-binary--checked: #36c;
    --background-color-tab-list-item-framed--hover: rgba( 255, 255, 255, 0.3 );
    --background-color-tab-list-item-framed--active: rgba( 255, 255, 255, 0.65 );
    --opacity-icon-base: 0.87;
    --opacity-icon-base--hover: 0.74;
    --opacity-icon-base--selected: 1;
    --opacity-icon-base--disabled: 0.51;
    --opacity-icon-placeholder: 0.51;
    --opacity-icon-subtle: 0.67;
    --border-color-base: #a2a9b1;
    --border-color-subtle: #c8ccd1;
    --border-color-muted: #dadde3;
    --border-color-interactive: #72777d;
    --border-color-disabled: #c8ccd1;
    --border-color-inverted: #fff;
    --border-color-progressive: #36c;
    --border-color-progressive--hover: #4b77d6;
    --border-color-progressive--active: #233566;
    --border-color-progressive--focus: #36c;
    --border-color-destructive: #d73333;
    --border-color-destructive--hover: #fc493b;
    --border-color-destructive--active: #9f3526;
    --border-color-destructive--focus: #36c;
    --border-color-error: #9f3526;
    --border-color-error--hover: #fc493b;
    --border-color-warning: #987027;
    --border-color-success: #196551;
    --border-color-notice: #54595d;
    --border-color-content-added: #a3d3ff;
    --border-color-content-removed: #ffe49c;
    --border-color-transparent: transparent;
    --border-color-divider: #a2a9b1;
    --outline-color-progressive--focus: #36c; /* Use in places where no more customized focus styles are provided, for example on generic `:focus`. */
    --color-link-red: var( --color-destructive ); /* Red ('new') Link color and states */
    --color-link-red--hover: var( --color-destructive--hover );
    --color-link-red--active: var( --color-destructive--active );
    --color-link-red--focus: var( --color-destructive--focus );
    --color-link-red--visited: var( --color-destructive--visited );
    --border-color-input--hover: var( --border-color-interactive );
    --border-color-input-binary: var( --border-color-interactive );
    --border-color-input-binary--hover: var( --border-color-progressive--hover );
    --border-color-input-binary--active: var( --border-color-progressive--active );
    --border-color-input-binary--focus: var( --border-color-progressive--focus );
    --border-color-input-binary--checked: var( --border-color-progressive );


    /* Навигационные панели */
 
    --navbox-background-color: #FFF;
#mw-page-base {
    --navbox-border-color: #CCC;
background: none;
    --navbox-header-color: #CCC;
height: 85px;
    --navbox-secondary-header-color: #DDD;
    --navbox-tertiary-header-color: #EEE;
    --navbox-section-color: #EEE;
}
}


/* DARK THEME - Structorica Dark Theme */
/* Remove excess spacing between the sidebar and the logo */
:root .stw-theme-dark {
div#mw-panel {
    --background-color-base: #161618;
padding-top: 0;
    --content-background-color: #2b2f39;
padding-bottom: 10px;
   
    /* Переменные Codex */
    --color-base: #f8f5f4;
    --color-base--hover: #f8f9fa;
    --color-emphasized: #f8f9fa;
    --color-subtle: #a2a9b1;
    --color-inverted: #101418;
    --color-progressive: #88a3e8; /* 'Progressive' Color and states */
    --color-progressive--hover: #b0c1f0;
    --color-progressive--active: #cbd6f6;
    --color-destructive: #fd7865; /* 'Destructive' Color and states */
    --color-destructive--hover: #fea898;
    --color-destructive--active: #ffc8bd;
    --color-visited: #a799cd; /* 'Visited' color. In combination with progressive. Used for default links. */
    --color-destructive--visited: #c99391; /* Red link 'Visited' color. Used for visited red links. */
    --color-error: #fd7865;
    --color-warning: #fecc44; /* Note, this is only meant for warning icon for contrast reasons. */
    --color-success: #2cb491; /* Note, this needs to use a tone darker than Red and Yellow for contrast reasons with background White. */
    --color-notice: #f8f9fa;
    --color-content-added: #80cdb3;
    --color-content-removed: #fd7865;
    --color-base--subtle: #a2a9b1;
    --box-shadow-color-base: #fff;
    --box-shadow-color-progressive--focus: #6b8edf;
    --box-shadow-color-destructive--focus: #6b8edf;
    --box-shadow-color-inverted: #000;
    --background-color-base: #101418; /* Background Colors for static elements (for page layout, sections, etc.) from here on. */
    --background-color-neutral: #27292d;
    --background-color-neutral-subtle: #202122;
    --background-color-interactive: #27292d;
    --background-color-interactive-subtle: #202122;
    --background-color-disabled: #54595d; /* Components like Buttons, Checkboxes, Radios, ProgressBars…. */
    --background-color-disabled-subtle: #404244; /* Components like TextInputs, Selects…. */
    --background-color-inverted: #f8f9fa;
    --background-color-progressive--focus: #6b8edf;
    --background-color-progressive-subtle: #233566;
    --background-color-destructive--focus: #6b8edf;
    --background-color-destructive-subtle: #612419;
    --background-color-error: #fc493b;
    --background-color-error--hover: #fd7865;
    --background-color-error--active: #fea898;
    --background-color-error-subtle: #612419;
    --background-color-warning-subtle: #453217;
    --background-color-success-subtle: #153d31;
    --background-color-notice-subtle: #27292d;
    --background-color-content-added: #233566;
    --background-color-content-removed: #453217;
    --background-color-backdrop-light: rgba( 0, 0, 0, 0.65 ); /* Backdrop is the term used by CSS Fullscreen API and is used to dim the background when a modal Dialog is open. Also known as overlay mask. */
    --background-color-backdrop-dark: rgba( 255, 255, 255, 0.65 );
    --border-color-base: #72777d;
    --border-color-subtle: #54595d;
    --border-color-muted: #404244;
    --border-color-interactive: #a2a9b1;
    --border-color-disabled: #54595d;
    --border-color-inverted: #101418;
    --border-color-progressive--focus: #6b8edf;
    --border-color-destructive--focus: #6b8edf;
    --border-color-error: #fc493b;
    --border-color-error--hover: #fd7865;
    --border-color-warning: #fecc44;
    --border-color-success: #2cb491;
    --border-color-notice: #c8ccd1;
    --border-color-content-added: #233566;
    --border-color-content-removed: #987027;
   
        /* Навигационные панели */
        --navbox-background-color: #333;
        --navbox-border-color: #444;
        --navbox-header-color: #111;
        --navbox-secondary-header-color: #181818;
        --navbox-tertiary-header-color: #222;
        --navbox-section-color: #222;
}
}


/* Img */
#p-logo,
.img-responsive,
#p-logo a {
.img-responsive img {
margin: auto;
     max-width: 100%;
height: 8.75em; /* 140px */
    height: auto;
}
#p-logo {
     margin-bottom: 0;
}
}


/** Оформление всего текста
#right-navigation,
    Styles for all text    **/
#content {
body {
margin-right: 0px;
    /* Нормализация размеров табуляции */
}
    -moz-tab-size: 4;
#footer {
    -o-tab-size: 4;
margin-right: 0px;
    tab-size: 4;
}
}


/** Заглавие / Title **/
/* Position the tabs */
/* Отделяет название пространства имён от остального названия страницы
#left-navigation,
    Separate the namespace from the rest of the page’s name */
#right-navigation {
    .mw-page-title-separator::after {
margin-top: 60px;
    content: ' ';
}
}


/** Позволяет скрывать части оглавления
#mw-head-base {
    Hideable TOC elements              **/
height: 80px;
/* Уровни разделов */
margin-top: -80px;
.toc-hidelevel2 .toclevel-1 ul,
.toc-hidelevel3 .toclevel-2 ul,
.toc-hidelevel4 .toclevel-3 ul,
/* Нумерация */
.toc-nonumbers .tocnumber {
    display: none;
}
}


.mw-body {
margin-top: 5px;
}




/* Tabs styling */
nav.vector-menu-tabs,
nav.vector-menu-dropdown {
    background: none;
    padding: 0;
    height: 36px;
}


nav.vector-menu-tabs li a {
    box-sizing: unset;
}


nav.vector-menu-tabs,
nav.vector-menu-tabs a,
.vector-menu-portal .vector-menu-heading,
nav.vector-menu-tabs ul,
nav.vector-menu-tabs ul li.selected,
#mw-head .vector-menu-dropdown .vector-menu-heading {
    background: none;
}








nav.vector-menu-tabs ul li,
nav.vector-menu-tabs ul li.selected,
nav.vector-menu-tabs ul li:hover,
nav.vector-menu-tabs ul li:focus,
nav.vector-menu-dropdown,
nav.vector-menu-dropdown:hover,
nav.vector-menu-dropdown:focus {
    background-color: #6BA41E;
    position: relative;
}


/** Оформление WikiEditor **/
nav.vector-menu-tabs ul li.selected,
.wikiEditor-ui-top {
nav.vector-menu-tabs ul li:hover,
    border: 0 !important;
nav.vector-menu-tabs ul li:focus,
nav.vector-menu-dropdown:hover,
nav.vector-menu-dropdown:focus {
    /*--ca-background-color: var(--content-background-color);*/
    background-position-y: bottom, 6px;
}
}
.wikiEditor-ui-toolbar {
 
     border-bottom: 1px solid silver;
nav.vector-menu-tabs ul li:before,
nav.vector-menu-dropdown:before {
     content: "";
    position: absolute;
    left: 0;
    width: 0px;
    height: 100%;
    pointer-events: none;
}
}
.wikiEditor-ui-text {
 
     background-color: var(--background-color-base);
 
 
 
.vector-menu-tabs .mw-watchlink.icon {
/* Force font-size when using the icon */
     font-size: 16px !important;
}
}
.wikiEditor-ui-text textarea {
 
     background-color: transparent;
.vector-menu-tabs .mw-watchlink.icon a {
     width: 45px;
    margin-right: 3px;
    margin-bottom: -10px;
}
}


/* Fix wikiEditor spacing */
.vector-menu-tabs .mw-watchlink.icon a:before {
#upload_container {
left: 1.17em;
     margin-top: -1px;
     top: 0.72em;
}
}
#upload_div {
 
     margin: 0;
 
     width: auto;
 
    border-width: 1px 0;
nav.vector-menu-tabs li a {
     box-shadow: none;
     padding: 9px 10px 0px 10px;
     height: 21px;
     line-height: 1.125em;
}
}


/* Prevent page jump from the toolbar loading */
nav.vector-menu-dropdown label {
.client-js #editform {
padding: 9px 10px 0px 10px !important;
    /* To disable margin collapsing */
    overflow: hidden;
}
}
.client-js .mw-editform > #wpTextbox1 {
 
    margin-top: 73px;
nav.vector-menu-dropdown .vector-menu-content {
transition: none;
min-width: calc(100% - 14px); /* Subtract 14px from the minimum width so that it doesn't cross the grass border */
}
}


/** Стили для Панели быстрой вставки **/
nav.vector-menu {
#userButtons {
     margin: 0 8px 0 6px;
     background-color: transparent;
}
    border: 1px solid #76FF76;
#p-views,
    font-size: 95%;
#p-cactions {
    width: 100%;
margin: 0;
    border-collapse: collapse;
}
    color: black;
#p-cactions {
     margin: 1px 0px 1em;
padding-right: 8px;
    }
     height: 30px;
}


#userButtons tr th, table#userButtons * tr th {
#left-navigation nav.vector-menu {
    background-color: #BBFFBB;
margin-left: 0;
    border: 1px solid #76FF76;
}
    font-size: 95%;
    padding: 2px;
    text-align: center;
    }


#userButtons tr td, table#userButtons * tr td {
nav.vector-menu h3 span {
     border: 1px solid #76FF76;
     padding-left: 14px;
     padding: 5px;
     font-weight: bold;
    }
}


#userButtons tr td p, table#userButtons * tr td p {
nav.vector-menu h3 a {
     margin-top:0;
     height: 36px;
     margin-bottom:0;
     margin-right: 0px;
    }
}


#userButtons.collapsible tr th, table#userButtons.collapsible * tr th {
nav.vector-menu div.vector-menu-content {
     padding-left: 6.5em;
     top: 35px;
    }
}


/* Отступ перед ПБВ */
.editOptions {
        padding-bottom:0px;
        margin-bottom:0px;
        }


/* Стиль разделителей ПБВ */
nav.vector-menu-tabs ul li.selected,
#userButtons * hr {
nav.vector-menu-tabs ul li:hover,
    background-color: #76FF76;
nav.vector-menu-tabs ul li:focus,
    width: 100%;
nav.vector-menu-dropdown:hover,
    float: left; /* без этого разделители начинались примерно в центре страницы */
nav.vector-menu-dropdown:focus {
  /* --ca-background-color: var(--content-background-color);*/
}
}


.userButtonsAddons {
 
    border: 1px dotted #aaaaaa !important;
 
    padding: 2px;
/* Set the outer content link colours to light gray and white */
    font-size: 95%;
#mw-panel *:not(h3) > a:not(:hover):not(:focus),
    background-color: transparent !important;
#footer a:not(:hover):not(:focus),
    width: 49%;
.mw-notification a:not(:hover):not(:focus) {
    border-collapse: collapse;
color: var( --color-base)  !important;
    color: black;
    margin-bottom: 1em;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 1em;
}
}


.userButtonsAddons * th, .userButtonsAddons * td {
#mw-panel h3,
    border:1px dotted #aaaaaa !important;
#mw-panel a,
    padding:2px;
#footer li,
    background-color:transparent !important;
#footer a,
    padding: 0.2em;
.mw-notification a {
color: var(--color-emphasized) !important;
}
}


.userButtonsAddons * th {
 
    text-align:center;
 
.mw-body, .parsoid-body,
div#content {
background-color: var(--content-background-color);
border-top: 0px solid var(--content-background-color);
border-bottom: 0px solid var(--content-background-color);
border-left: 0px solid var(--content-background-color);
border-right: 0px solid var(--content-background-color);
}
.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame {
background-color: var(--content-background-color);
}
#preferences .mw-htmlform-submit-buttons {
background-color: var(--content-background-color);
}
}


/* Скрытие блоков в панели быстрой вставки. Блоки предназначенные для обсуждений не отображаются на обычных страницах, и наоборот. */
.ns-talk * .userButtons-subject {
    display: none;
}


.ns-subject * .userButtons-talk,
.ns-subject * #userButtonsSignature {
    display: none;
}
/** Конец стилей Панели быстрой вставки **/




Line 385: Line 235:




/*** СТАНДАРТНЫЕ КЛАССЫ
        STANDARD CLASSES  ***/


/** Пиксельное масштабирование изображений и иконок пользователей **/
/* Style the personal links */
.pixel-image,
#p-personal {
.sprite,
     right: 10px;
.sprite img,
     top: 5px;
.mw-userlink,
     margin-right: 0;
.invslot,
     margin-left: 10px;
.ns-special .gallerybox img,
.ns-14 .gallerybox img,
.filehistory a img,
.mcui,
.gui {
     image-rendering: optimizeSpeed;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
     image-rendering: -moz-crisp-edges;
     image-rendering: -o-crisp-edges;
     image-rendering: crisp-edges;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
}
}


/** Отключить разрыв строки на пробелах **/
#p-personal a {
.nowrap {
     color: white;
     white-space: nowrap;
}
}


/** Hide noscript only elements **/
.mw-echo-alert {
.noscript {
     background-color: #8e721c;
     display: none;
    border: 1px solid #fff;
    border-radius: 4px;
    font-weight: bold;
}
}


/** Скрытие от простых смертных ненужных элементов **/
#p-personal .vector-menu-content-list {
.admin_only,
padding: 1px 0.5em 1px 0;
.admin_only_inline,
.admin_only_block,
.admin_only_flex {
    display: none !important;
}
}


/** Только для средств чтения с экрана **/
.vector-user-menu-legacy li {
.sr-only:not(:focus):not(:active) {
     padding-top: 0.3em;
     clip: rect(0 0 0 0);  
     padding-bottom: 0.3em;
     clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}
}


 
.oo-ui-icon-bell, .mw-ui-icon-bell::before,
 
.oo-ui-icon-tray, .mw-ui-icon-tray::before {
 
     filter: invert(1);
 
 
/** Имитация стилей для ссылок, работающих только через JS **/
.jslink {
    color: #0645AD;
    -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
     outline: none;
}
}
body .jslink {  
.vector-user-menu-legacy #pt-anonuserpage,
     color: #90c0fe;
.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;
}
}
.jslink:hover {
 
     text-decoration: underline;
.vector-user-menu-legacy #pt-anonuserpage span,
     cursor: pointer;
.vector-user-menu-legacy #pt-tmpuserpage span,
.vector-user-menu-legacy #pt-userpage a span {
     color: white;
     filter: invert(1);
}
}
.jslink:active {
 
    color: #FAA700;
.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);
}








/* ------------------------------------------- */


 
/* Theme and Width toggle buttons styling */
/** Чередующиеся ячейки и строки таблиц
.theme-toggle-button,
     Alternating table cells and rows    **/
.width-toggle-button {
/*
    display: block;
     .alternatecells:nth-child(odd) {
    padding: 8px 12px;
         background-color: #F9F9F9;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
     margin: 4px 0;
}
body.stw-theme-dark .theme-toggle-button:hover,
body.stw-theme-dark .width-toggle-button:hover,
#p-personal .theme-toggle-button,
#p-personal .width-toggle-button {
    display: inline-block;
    margin: 0 0 0 10px;
     padding: 0.5em;
    font-size: 0.875em;
    line-height: 1;
}
/* Width control */
@media screen and (min-width: 1200px) {
    body {
         max-width: var(--fixed-width); /* Dynamicly changed by Hook */
        margin: auto;
     }
     }
    body.wgl-theme-dark .alternatecells:nth-child(odd) {
}
        background-color: #222;
    }
   
    .alternaterows tr:nth-child(even) {
        background-color: #F9F9F9;
    }
    body.wgl-theme-dark .alternaterows tr:nth-child(even) {
        background-color: #222;
    }
*/
Retrieved from "https://structorica.wiki/w/MediaWiki:Common.css"