MediaWiki:Common.css: Difference between revisions

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


:root {
/*** BASE STYLES AND SETTINGS ***/
    /* Width control */
    --fixed-width: 1200px; /* Dynamicly changed by Hook */
       
    --vector-tabs: none;
    --vector-tabs-first: none;
   
--header-background: url('https://structorica.wiki/images/Header-background-dark.png');/*Header-background*/


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


/* LIGHT THEME - default */
:root,
.skin-invert,
.notheme {
    --font-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;


.mw-parser-output a.external {
    padding-right: 0em;
    background-size: 0.0em;
}


.mw-parser-output a.external::after {
    --site-background-color: #303031;
     content: '';
     --content-background-color: #ebeef2;  
    display: inline-block;
      
    width: 0.857em;
     --color-siderbar-base: #f8f9fa;
     height: 0.857em;
     --color-siderbar-links: #88a3e8;
     background-color: var(--link-color);
     --color-topbar-text: #f8f9fa;
    -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");
     --link-color: #0645ad;
     -webkit-mask-size: cover;
     --redlink-color: #BA0000;
    mask-size: cover;
     vertical-align: text-top;
    margin-top: 3px;
     margin-left: 0.143em;
}


/* Main page elements */
body {
    background-color: var(--site-background-color);
    color: var(--color-base);
      
      
     background-image: var(--header-background);
     --content-border-top-color: #678002;
     background-repeat: repeat-x, repeat;
     --content-border-top-color-hovered: #7b9904;
    background-position: top left, top left;
 
    background-size: auto 320px;
--simplesearch-top-border-color: #FFFFFF;
}
--simplesearch-left-border-color: #888888;
--simplesearch-topright-grass-color: #6BA41E;
--searchinput-placeholder-color: #e9efff;




#mw-page-base {
    /* Переменные системы дизайна Codex */
background: none;
    --color-base: #202122;
height: 85px;
    --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 );


/* Remove excess spacing between the sidebar and the logo */
    /* Навигационные панели */
div#mw-panel {
    --navbox-background-color: #FFF;
padding-top: 0;
    --navbox-border-color: #CCC;
padding-bottom: 10px;
    --navbox-header-color: #CCC;
    --navbox-secondary-header-color: #DDD;
    --navbox-tertiary-header-color: #EEE;
    --navbox-section-color: #EEE;
   
    /* Маркированные списки */
    --list-bullet: url('https://structorica.wiki/images/List_bullet.svg');
    --hlist-bullet-color: #000;
}
}


#p-logo,
/* DARK THEME - Structorica Dark Theme */
#p-logo a {
:root .stw-theme-dark {
margin: auto;
    --site-background-color: #161618;  
/*height: 140px; */
    --content-background-color: #2b2f39;
}
    --color-siderbar-base: #f8f9fa;
#p-logo {
    --color-siderbar-links: #88a3e8;
     margin-bottom: 0;
     --color-topbar-text: #f8f9fa;
}


    --link-color: #90c0fe;
    --redlink-color: #ba0000;
   
   
    --content-border-top-color: #678002;
    --content-border-top-color-hovered: #7b9904;
 
--simplesearch-top-border-color: #FFFFFF;
--simplesearch-left-border-color: #888888;
--simplesearch-topright-grass-color: #6BA41E;
--searchinput-placeholder-color: #e9efff;


/* Hide 'Read' in Toolbar*/
#ca-view {
    display: none !important;
}


 
    /* Переменные Codex */
 
    --color-base: #f8f5f4;
#mw-panel h3 {
    --color-base--hover: #f8f9fa;
text-decoration: none !important;
    --color-emphasized: #f8f9fa;
cursor: pointer;
    --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;
   
    /* Маркированные списки */
    --list-bullet: url('https://structorica.wiki/images/List_bullet_dark.svg');
    --hlist-bullet-color: #FFF;
}
}


/* Set the tab link colours to black and bold */
/* IBM Plex Sans - Regular (normal) */
#p-namespaces a,
@font-face {
#p-views a,
    font-family: "IBM Plex Sans";
#p-cactions-label span,
    font-style: normal;
div#mw-head div.vectorMenu h4,
    font-weight: 400;
div#p-variants.vectorMenu #mw-vector-current-variant {
    src: local("IBM Plex Sans"), local("IBMPlexSans"),
font-weight: 600;
        url("/images/ibm-plex-sans/fonts/complete/woff2/IBMPlexSans-Regular.woff2") format("woff2"),
text-decoration: none;
        url("/images/ibm-plex-sans/fonts/complete/woff/IBMPlexSans-Regular.woff") format("woff");
}
    font-display: swap;
  }
  @font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400;
    src: local("IBM Plex Sans"), local("IBMPlexSans"),
        url("/images/ibm-plex-sans/fonts/split/woff2/IBMPlexSans-Regular-Cyrillic.woff2") format("woff2");
    unicode-range: U+0400-045F, U+0472-0473, U+0490-049D, U+04A0-04A5, U+04AA-04AB, U+04AE-04B3, U+04B6-04BB, U+04C0-04C2, U+04CF-04D9, U+04DC-04DF, U+04E2-04E9, U+04EE-04F5, U+04F8-04F9;
    font-display: swap;
  }
  @font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400;
    src: local("IBM Plex Sans"), local("IBMPlexSans"),
        url("/images/ibm-plex-sans/fonts/split/woff2/IBMPlexSans-Regular-Latin1.woff2") format("woff2");
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
    font-display: swap;
  }
 
  /* IBM Plex Sans - Regular Italic */
  @font-face {
    font-family: "IBM Plex Sans";
    font-style: italic;
    font-weight: 400;
    src: local("IBM Plex Sans Italic"), local("IBMPlexSans-Italic"),
        url("/images/ibm-plex-sans/fonts/complete/woff2/IBMPlexSans-Italic.woff2") format("woff2"),
        url("/images/ibm-plex-sans/fonts/complete/woff/IBMPlexSans-Italic.woff") format("woff");
    font-display: swap;
  }
  @font-face {
    font-family: "IBM Plex Sans";
    font-style: italic;
    font-weight: 400;
    src: local("IBM Plex Sans Italic"), local("IBMPlexSans-Italic"),
        url("/images/ibm-plex-sans/fonts/split/woff2/IBMPlexSans-Italic-Cyrillic.woff2") format("woff2");
    unicode-range: U+0400-045F, U+0472-0473, U+0490-049D, U+04A0-04A5, U+04AA-04AB, U+04AE-04B3, U+04B6-04BB, U+04C0-04C2, U+04CF-04D9, U+04DC-04DF, U+04E2-04E9, U+04EE-04F5, U+04F8-04F9;
    font-display: swap;
  }
  @font-face {
    font-family: "IBM Plex Sans";
    font-style: italic;
    font-weight: 400;
    src: local("IBM Plex Sans Italic"), local("IBMPlexSans-Italic"),
        url("/images/ibm-plex-sans/fonts/split/woff2/IBMPlexSans-Italic-Latin1.woff2") format("woff2");
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
    font-display: swap;
  }
 
  /* IBM Plex Sans - SemiBold (для bold) */
  @font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 600;
    src: local("IBM Plex Sans SemiBold"), local("IBMPlexSans-SemiBold"),
        url("/images/ibm-plex-sans/fonts/complete/woff2/IBMPlexSans-SemiBold.woff2") format("woff2"),
        url("/images/ibm-plex-sans/fonts/complete/woff/IBMPlexSans-SemiBold.woff") format("woff");
    font-display: swap;
  }
  @font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 600;
    src: local("IBM Plex Sans SemiBold"), local("IBMPlexSans-SemiBold"),
        url("/images/ibm-plex-sans/fonts/split/woff2/IBMPlexSans-SemiBold-Cyrillic.woff2") format("woff2");
    unicode-range: U+0400-045F, U+0472-0473, U+0490-049D, U+04A0-04A5, U+04AA-04AB, U+04AE-04B3, U+04B6-04BB, U+04C0-04C2, U+04CF-04D9, U+04DC-04DF, U+04E2-04E9, U+04EE-04F5, U+04F8-04F9;
    font-display: swap;
  }
  @font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 600;
    src: local("IBM Plex Sans SemiBold"), local("IBMPlexSans-SemiBold"),
        url("/images/ibm-plex-sans/fonts/split/woff2/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2");
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
    font-display: swap;
  }
 
  /* IBM Plex Sans - SemiBold Italic (для bold italic) */
  @font-face {
    font-family: "IBM Plex Sans";
    font-style: italic;
    font-weight: 600;
    src: local("IBM Plex Sans SemiBold Italic"), local("IBMPlexSans-SemiBoldItalic"),  
        url("/images/ibm-plex-sans/fonts/complete/woff2/IBMPlexSans-SemiBoldItalic.woff2") format("woff2"),  
        url("/images/ibm-plex-sans/fonts/complete/woff/IBMPlexSans-SemiBoldItalic.woff") format("woff");
    font-display: swap;
  }
  @font-face {
    font-family: "IBM Plex Sans";
    font-style: italic;
    font-weight: 600;
    src: local("IBM Plex Sans SemiBold Italic"), local("IBMPlexSans-SemiBoldItalic"),  
        url("/images/ibm-plex-sans/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Cyrillic.woff2") format("woff2");
    unicode-range: U+0400-045F, U+0472-0473, U+0490-049D, U+04A0-04A5, U+04AA-04AB, U+04AE-04B3, U+04B6-04BB, U+04C0-04C2, U+04CF-04D9, U+04DC-04DF, U+04E2-04E9, U+04EE-04F5, U+04F8-04F9;
    font-display: swap;
  }
  @font-face {
    font-family: "IBM Plex Sans";
    font-style: italic;
    font-weight: 600;
    src: local("IBM Plex Sans SemiBold Italic"), local("IBMPlexSans-SemiBoldItalic"),
        url("/images/ibm-plex-sans/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Latin1.woff2") format("woff2");
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
    font-display: swap;
  }




#p-namespaces .new a,
html, body, #root,
#p-views .new a {
.mw-body h1,
color: #e1e6cc;
.mw-body-content h1,
.mw-body-content h2,
.mw-body-content h3,
.mw-body-content h4,
.mw-body-content h5,
.mw-body-content h6 {
    font-family: var(--font-sans);
}
}






 
/* Img */
 
.img-responsive,
 
.img-responsive img {
 
     max-width: 100%;
 
     height: auto;
 
 
#right-navigation,
#content {
margin-right: 0px;
}
#footer {
     margin-top: 10px;
margin-right: 0px;
     padding: 8px 16px 8px 16px;
}
}


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


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


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




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


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;
}
.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);
}




nav.vector-menu-tabs ul li,
a {
nav.vector-menu-tabs ul li.selected,
     color: var(--link-color);
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 {
     --ca-background-image: var(--vector-tabs);
    --ca-background-color: var(--content-border-top-color);
    background: var(--ca-background-color);
    position: relative;
}
nav.vector-menu-tabs {
    background: var(--content-border-top-color);
}
}


nav.vector-menu-tabs ul li.selected{
a:visited,
     --ca-background-color: var(--content-background-color);
a:active {
    background-position-y: bottom, 0px;
     color: var(--link-color);
}
}


nav.vector-menu-tabs ul li:hover:not(.selected),
a.new {
nav.vector-menu-tabs ul li:focus:not(.selected),
     color: var(--redlink-color);
nav.vector-menu-dropdown:hover,
nav.vector-menu-dropdown:focus {
     --ca-background-color: var(--content-border-top-color-hovered);
}
}


nav.vector-menu-tabs ul li:before,
a.new:visited {
nav.vector-menu-dropdown:before {
     color: var(--redlink-color);
     content: "";
    position: absolute;
    left: 0;
    background: var(--ca-background-image) var(--content-border-top-color) no-repeat left top;
    width: 0px;
    height: 100%;
    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 {
#p-cactions div.vector-menu-content li a,
#mw-panel .portal .vector-menu-content li a,
#p-cactions div.vector-menu-content li a:visited,
#p-cactions div.vector-menu-content li a:active,
#mw-panel .portal .vector-menu-content li a:visited {
     color: var(--link-color);
     color: var(--link-color);
}
}


 
nav.vector-menu-tabs li a,
nav.vector-menu-tabs li a {
nav.vector-menu-tabs li a:active,
    padding: 9px 13px 0px 13px;
nav.vector-menu-tabs li a:visited,
    height: 21px;
#mw-panel .portal .vector-menu-content li a:active {
     line-height: 1.1em;
     color: var(--color-topbar-text);
}
}


nav.vector-menu-dropdown label {
nav.vector-menu-tabs li.new a,
padding: 9px 13px 0px 13px !important;
nav.vector-menu-tabs li.new a:visited,
nav.vector-menu-tabs li.new a:active,
#p-cactions div.vector-menu-content li.new a,
#mw-panel .portal .vector-menu-content li.new a,
#p-cactions div.vector-menu-content li.new a:visited,
#mw-panel .portal .vector-menu-content li.new a:visited,
#p-cactions div.vector-menu-content li.new a:active,
#mw-panel .portal .vector-menu-content li.new a:active {
    color: var(--redlink-color);
}
}


 
.mw-parser-output a.extiw,
.vector-menu-tabs .mw-watchlink.icon {
.mw-parser-output a.external {
/* Force font-size when using the icon */
    color: var(--link-color);
    font-size: 16px !important;
}
}


.vector-menu-tabs .mw-watchlink.icon a {
.mw-parser-output a.extiw:visited,
    width: 45px;
.mw-parser-output a.external:visited,
    margin-right: 0px;
.mw-parser-output a.extiw:active,
     margin-bottom: -10px;
.mw-parser-output a.external:active {
     color: var(--link-color);
}
}


.vector-menu-tabs .mw-watchlink.icon a:before {
.mw-parser-output .tweet-name a.external {
left: 1.17em;
     color: var(--color-base);
     top: 0.60em;
}
}


 
.mw-parser-output .tweet-handle a.external,
 
.mw-parser-output .tweet-date a.external {
nav.vector-menu-dropdown .vector-menu-content {
    color: #4c4c4c;
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 {
.jsPurgeLink a.external {
     margin: 0 8px 0 6px;
     color: var(--link-color);
}
#p-views,
#p-cactions {
margin: 0;
}
#p-cactions {
padding-right: 8px;
    height: 30px;
}
}


#left-navigation nav.vector-menu {
margin-left: 0;
}


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


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


nav.vector-menu div.vector-menu-content {
    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;
}


#footer:after {
/** Оформление WikiEditor **/
     content: '';
.wikiEditor-ui-top {
    clear: both;
     border: 0 !important;
    display: block;
}
}
 
.wikiEditor-ui-toolbar {
.mw-body, .parsoid-body,
    border-bottom: 1px solid silver;
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 {
.wikiEditor-ui-text {
background-color: var(--content-background-color);
    background-color: var(--background-color-base);
}
}
#preferences .mw-htmlform-submit-buttons {
.wikiEditor-ui-text textarea {
background-color: var(--content-background-color);
    background-color: transparent;
}
}


Line 343: Line 529:




 
/* Fix wikiEditor spacing */
 
#upload_container {
 
     margin-top: -1px;
 
/* Style the personal links */
#p-personal {
    right: 10px;
    top: 5px;
     margin-right: 0;
    margin-left: 10px;
}
}
 
#upload_div {
#p-personal a {
    margin: 0;
     color: white;
    width: auto;
    border-width: 1px 0;
     box-shadow: none;
}
}


.mw-echo-alert {
/* Prevent page jump from the toolbar loading */
     background-color: #8e721c;
.client-js #editform {
     border: 1px solid #fff;
     /* To disable margin collapsing */
    border-radius: 4px;
     overflow: hidden;
    font-weight: bold;
}
}
 
.client-js .mw-editform > #wpTextbox1 {
#p-personal .vector-menu-content-list {
    margin-top: 73px;
padding: 1px 0.5em 1px 0;
}
}


.vector-user-menu-legacy li {
/** Стили для Панели быстрой вставки **/
     padding-top: 0.3em;
#userButtons {
     padding-bottom: 0.3em;
    background-color: transparent;
}
    border: 1px solid #76FF76;
    font-size: 95%;
    width: 100%;
    border-collapse: collapse;
     color: black;
     margin: 1px 0px 1em;
    }


.oo-ui-icon-bell, .mw-ui-icon-bell::before,
#userButtons tr th, table#userButtons * tr th {
.oo-ui-icon-tray, .mw-ui-icon-tray::before {
     background-color: #BBFFBB;
     filter: invert(1);
     border: 1px solid #76FF76;
}
     font-size: 95%;
.vector-user-menu-legacy #pt-anonuserpage,
     padding: 2px;
.vector-user-menu-legacy #pt-tmpuserpage,
     text-align: center;
.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,
#userButtons tr td, table#userButtons * tr td {
.vector-user-menu-legacy #pt-tmpuserpage span,
     border: 1px solid #76FF76;
.vector-user-menu-legacy #pt-userpage a span {
     padding: 5px;
     color: white;
    }
     filter: invert(1);
}


.skin-vector-legacy #p-personal #pt-notifications-notice,
#userButtons tr td p, table#userButtons * tr td p {
.skin-vector-legacy #p-personal #pt-notifications-alert {
    margin-top:0;
margin-right: 0;
    margin-bottom:0;
}
    }


.skin-vector-legacy #pt-notifications-notice .mw-echo-notifications-badge,
#userButtons.collapsible tr th, table#userButtons.collapsible * tr th {
.skin-vector-legacy #pt-notifications-alert .mw-echo-notifications-badge {
     padding-left: 6.5em;
     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 {
.editOptions {
    margin-right: 2px;
        padding-bottom:0px;
}
        margin-bottom:0px;
        }


.skin-vector-legacy #pt-notifications-notice .mw-echo-notifications-badge:after,
/* Стиль разделителей ПБВ */
.skin-vector-legacy #pt-notifications-alert .mw-echo-notifications-badge:after {
#userButtons * hr {  
     top: 4px;
     background-color: #76FF76;
     filter: invert(1);
     width: 100%;
border-color: var(--color-inverted-fixed);
    float: left; /* без этого разделители начинались примерно в центре страницы */
color: var(--color-inverted-fixed);
}
}


 
.userButtonsAddons {
 
    border: 1px dotted #aaaaaa !important;
 
    padding: 2px;
 
    font-size: 95%;
 
    background-color: transparent !important;
 
    width: 49%;
 
    border-collapse: collapse;
 
    color: black;
 
    margin-bottom: 1em;
 
    margin-left: 0px;
 
    margin-right: 0px;
 
    margin-top: 1em;
 
 
 
/* Style the simple search */
#p-search {
margin-left: 0;
}
}


#p-search form {
.userButtonsAddons * th, .userButtonsAddons * td {
position: relative;
    border:1px dotted #aaaaaa !important;
padding: 0 0px 0 1px;
    padding:2px;
height: 30px;
    background-color:transparent !important;
    padding: 0.2em;
}
}


#simpleSearch {
.userButtonsAddons * th {
border: 0;
    text-align:center;
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 {
.ns-talk * .userButtons-subject {
     margin: 0;
     display: none;
}
}


/* Remove border of search bar */
.ns-subject * .userButtons-talk,
#simpleSearch .vector-search-box-input {
.ns-subject * #userButtonsSignature {
     border: none;
     display: none;
    border-radius: 0;
    outline: none;
    box-shadow: none;
    height: 30px;
    padding-left: 13px;
    background-color: #3552e5;
}
}
/** Конец стилей Панели быстрой вставки **/


.vector-search-box-input::placeholder {
color: var(--searchinput-placeholder-color);
}


/* Style the simple search */
/** Прочее **/
#p-search {
/* Иконка маркированных списков */
margin-left: 0;
ul {
width: unset;
    list-style-image: var(--list-bullet);
min-width: unset;
}
}


#p-search #searchform {
/* Уменьшение интервала после мини-заголовка, созданного через апострофы */
position: relative;
.page-content p, .page-content section {
padding: 0 0px 0 1px;
    margin: 0px 0px 8px;
}
}


/* 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;
}


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


/* Fix placeholder text being too light in chrome */
/** Пиксельное масштабирование изображений и иконок пользователей **/
::-webkit-input-placeholder {
.pixel-image,
color: inherit;
.sprite,
opacity: 0.8;
.sprite img,
.mw-userlink,
.invslot,
.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;
}
}


/* The suggestions shown under the search bar */
/** Отключить разрыв строки на пробелах **/
.suggestions.searchbar {
.nowrap {
margin-right: -1px;
    white-space: nowrap;
}
}


.suggestions.searchbar > .suggestions-results,
/** Hide noscript only elements **/
.suggestions.searchbar > .mw-searchSuggest-link {
.noscript {
display: block;
    display: none;
margin-left: 1px;
}
}


.suggestions.searchbar .suggestions-results,
/** Скрытие от простых смертных ненужных элементов **/
.suggestions.searchbar .suggestions-special,
.admin_only,
.suggestions .suggestions-results,
.admin_only_inline,
.suggestions .suggestions-special {
.admin_only_block,
background-color: #DBDADA !important;
.admin_only_flex {
border-color: #3C3B3B !important;
    display: none !important;
}
}


.suggestions.searchbar .suggestions-result-current,
/** Только для средств чтения с экрана **/
.suggestions .suggestions-result-current {
.sr-only:not(:focus):not(:active) {
background-color: #0078D7 !important;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}
}


Line 615: Line 716:




 
/** Чередующиеся ячейки и строки таблиц
 
    Alternating table cells and rows    **/
 
/*
 
    .alternatecells:nth-child(odd) {
 
        background-color: #F9F9F9;
 
     }
 
     body.wgl-theme-dark .alternatecells:nth-child(odd) {
/* ------------------------------------------- */
        background-color: #222;
 
     }
/* Theme and Width toggle buttons styling */
      
.theme-toggle-button,
     .alternaterows tr:nth-child(even) {
.width-toggle-button {
        background-color: #F9F9F9;
    display: block;
     }
    padding: 8px 12px;
     body.wgl-theme-dark .alternaterows tr:nth-child(even) {
    text-decoration: none;
         background-color: #222;
     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;
     }
     }
}
*/

Revision as of 15:13, 7 January 2026

/* CSS placed here will apply to all skins */

/*** BASE STYLES AND SETTINGS ***/

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

/* LIGHT THEME - default */
:root,
.skin-invert,
.notheme {
    --font-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;


    --site-background-color: #303031; 
    --content-background-color: #ebeef2; 
    
    --color-siderbar-base: #f8f9fa;
    --color-siderbar-links: #88a3e8;
    --color-topbar-text: #f8f9fa;
        
    --link-color: #0645ad;
    --redlink-color: #BA0000;

    
    --content-border-top-color: #678002;
    --content-border-top-color-hovered: #7b9904;
   
	--simplesearch-top-border-color: #FFFFFF;
	--simplesearch-left-border-color: #888888;
	--simplesearch-topright-grass-color: #6BA41E;
	--searchinput-placeholder-color: #e9efff;


    /* Переменные системы дизайна 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;
    --navbox-border-color: #CCC;
    --navbox-header-color: #CCC;
    --navbox-secondary-header-color: #DDD;
    --navbox-tertiary-header-color: #EEE;
    --navbox-section-color: #EEE;
    
    /* Маркированные списки */
    --list-bullet: url('https://structorica.wiki/images/List_bullet.svg');
    --hlist-bullet-color: #000;
}

/* DARK THEME - Structorica Dark Theme */
:root .stw-theme-dark {
    --site-background-color: #161618; 
    --content-background-color: #2b2f39;
    --color-siderbar-base: #f8f9fa;
    --color-siderbar-links: #88a3e8;
    --color-topbar-text: #f8f9fa;

    --link-color: #90c0fe;
    --redlink-color: #ba0000;
    
    
    --content-border-top-color: #678002;
    --content-border-top-color-hovered: #7b9904;
   
	--simplesearch-top-border-color: #FFFFFF;
	--simplesearch-left-border-color: #888888;
	--simplesearch-topright-grass-color: #6BA41E;
	--searchinput-placeholder-color: #e9efff;


     /* Переменные 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;
    
    /* Маркированные списки */
    --list-bullet: url('https://structorica.wiki/images/List_bullet_dark.svg');
    --hlist-bullet-color: #FFF;
}

/* IBM Plex Sans - Regular (normal) */
@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400;
    src: local("IBM Plex Sans"), local("IBMPlexSans"), 
         url("/images/ibm-plex-sans/fonts/complete/woff2/IBMPlexSans-Regular.woff2") format("woff2"), 
         url("/images/ibm-plex-sans/fonts/complete/woff/IBMPlexSans-Regular.woff") format("woff");
    font-display: swap;
  }
  @font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400;
    src: local("IBM Plex Sans"), local("IBMPlexSans"), 
         url("/images/ibm-plex-sans/fonts/split/woff2/IBMPlexSans-Regular-Cyrillic.woff2") format("woff2");
    unicode-range: U+0400-045F, U+0472-0473, U+0490-049D, U+04A0-04A5, U+04AA-04AB, U+04AE-04B3, U+04B6-04BB, U+04C0-04C2, U+04CF-04D9, U+04DC-04DF, U+04E2-04E9, U+04EE-04F5, U+04F8-04F9;
    font-display: swap;
  }
  @font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400;
    src: local("IBM Plex Sans"), local("IBMPlexSans"), 
         url("/images/ibm-plex-sans/fonts/split/woff2/IBMPlexSans-Regular-Latin1.woff2") format("woff2");
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
    font-display: swap;
  }
  
  /* IBM Plex Sans - Regular Italic */
  @font-face {
    font-family: "IBM Plex Sans";
    font-style: italic;
    font-weight: 400;
    src: local("IBM Plex Sans Italic"), local("IBMPlexSans-Italic"), 
         url("/images/ibm-plex-sans/fonts/complete/woff2/IBMPlexSans-Italic.woff2") format("woff2"), 
         url("/images/ibm-plex-sans/fonts/complete/woff/IBMPlexSans-Italic.woff") format("woff");
    font-display: swap;
  }
  @font-face {
    font-family: "IBM Plex Sans";
    font-style: italic;
    font-weight: 400;
    src: local("IBM Plex Sans Italic"), local("IBMPlexSans-Italic"), 
         url("/images/ibm-plex-sans/fonts/split/woff2/IBMPlexSans-Italic-Cyrillic.woff2") format("woff2");
    unicode-range: U+0400-045F, U+0472-0473, U+0490-049D, U+04A0-04A5, U+04AA-04AB, U+04AE-04B3, U+04B6-04BB, U+04C0-04C2, U+04CF-04D9, U+04DC-04DF, U+04E2-04E9, U+04EE-04F5, U+04F8-04F9;
    font-display: swap;
  }
  @font-face {
    font-family: "IBM Plex Sans";
    font-style: italic;
    font-weight: 400;
    src: local("IBM Plex Sans Italic"), local("IBMPlexSans-Italic"), 
         url("/images/ibm-plex-sans/fonts/split/woff2/IBMPlexSans-Italic-Latin1.woff2") format("woff2");
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
    font-display: swap;
  }
  
  /* IBM Plex Sans - SemiBold (для bold) */
  @font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 600;
    src: local("IBM Plex Sans SemiBold"), local("IBMPlexSans-SemiBold"), 
         url("/images/ibm-plex-sans/fonts/complete/woff2/IBMPlexSans-SemiBold.woff2") format("woff2"), 
         url("/images/ibm-plex-sans/fonts/complete/woff/IBMPlexSans-SemiBold.woff") format("woff");
    font-display: swap;
  }
  @font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 600;
    src: local("IBM Plex Sans SemiBold"), local("IBMPlexSans-SemiBold"), 
         url("/images/ibm-plex-sans/fonts/split/woff2/IBMPlexSans-SemiBold-Cyrillic.woff2") format("woff2");
    unicode-range: U+0400-045F, U+0472-0473, U+0490-049D, U+04A0-04A5, U+04AA-04AB, U+04AE-04B3, U+04B6-04BB, U+04C0-04C2, U+04CF-04D9, U+04DC-04DF, U+04E2-04E9, U+04EE-04F5, U+04F8-04F9;
    font-display: swap;
  }
  @font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 600;
    src: local("IBM Plex Sans SemiBold"), local("IBMPlexSans-SemiBold"), 
         url("/images/ibm-plex-sans/fonts/split/woff2/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2");
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
    font-display: swap;
  }
  
  /* IBM Plex Sans - SemiBold Italic (для bold italic) */
  @font-face {
    font-family: "IBM Plex Sans";
    font-style: italic;
    font-weight: 600;
    src: local("IBM Plex Sans SemiBold Italic"), local("IBMPlexSans-SemiBoldItalic"), 
         url("/images/ibm-plex-sans/fonts/complete/woff2/IBMPlexSans-SemiBoldItalic.woff2") format("woff2"), 
         url("/images/ibm-plex-sans/fonts/complete/woff/IBMPlexSans-SemiBoldItalic.woff") format("woff");
    font-display: swap;
  }
  @font-face {
    font-family: "IBM Plex Sans";
    font-style: italic;
    font-weight: 600;
    src: local("IBM Plex Sans SemiBold Italic"), local("IBMPlexSans-SemiBoldItalic"), 
         url("/images/ibm-plex-sans/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Cyrillic.woff2") format("woff2");
    unicode-range: U+0400-045F, U+0472-0473, U+0490-049D, U+04A0-04A5, U+04AA-04AB, U+04AE-04B3, U+04B6-04BB, U+04C0-04C2, U+04CF-04D9, U+04DC-04DF, U+04E2-04E9, U+04EE-04F5, U+04F8-04F9;
    font-display: swap;
  }
  @font-face {
    font-family: "IBM Plex Sans";
    font-style: italic;
    font-weight: 600;
    src: local("IBM Plex Sans SemiBold Italic"), local("IBMPlexSans-SemiBoldItalic"), 
         url("/images/ibm-plex-sans/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Latin1.woff2") format("woff2");
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
    font-display: swap;
  }


html, body, #root,
.mw-body h1,
.mw-body-content h1,
.mw-body-content h2,
.mw-body-content h3,
.mw-body-content h4,
.mw-body-content h5,
.mw-body-content h6 {
    font-family: var(--font-sans);
}



/* Img */
.img-responsive,
.img-responsive img {
    max-width: 100%;
    height: auto;
}

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

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

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






a {
    color: var(--link-color);
}

a:visited,
a:active {
    color: var(--link-color);
}

a.new {
    color: var(--redlink-color);
}

a.new:visited {
    color: var(--redlink-color);
}


#p-cactions div.vector-menu-content li a,
#mw-panel .portal .vector-menu-content li a,
#p-cactions div.vector-menu-content li a:visited,
#p-cactions div.vector-menu-content li a:active,
#mw-panel .portal .vector-menu-content li a:visited {
    color: var(--link-color);
}

nav.vector-menu-tabs li a,
nav.vector-menu-tabs li a:active,
nav.vector-menu-tabs li a:visited,
#mw-panel .portal .vector-menu-content li a:active {
    color: var(--color-topbar-text);
}

nav.vector-menu-tabs li.new a,
nav.vector-menu-tabs li.new a:visited,
nav.vector-menu-tabs li.new a:active,
#p-cactions div.vector-menu-content li.new a,
#mw-panel .portal .vector-menu-content li.new a,
#p-cactions div.vector-menu-content li.new a:visited,
#mw-panel .portal .vector-menu-content li.new a:visited,
#p-cactions div.vector-menu-content li.new a:active,
#mw-panel .portal .vector-menu-content li.new a:active {
    color: var(--redlink-color);
}

.mw-parser-output a.extiw,
.mw-parser-output a.external {
    color: var(--link-color);
}

.mw-parser-output a.extiw:visited,
.mw-parser-output a.external:visited,
.mw-parser-output a.extiw:active,
.mw-parser-output a.external:active {
    color: var(--link-color);
}

.mw-parser-output .tweet-name a.external {
    color: var(--color-base);
}

.mw-parser-output .tweet-handle a.external,
.mw-parser-output .tweet-date a.external {
    color: #4c4c4c;
}

.jsPurgeLink a.external {
    color: var(--link-color);
}








/** Оформление WikiEditor **/
.wikiEditor-ui-top {
    border: 0 !important;
}
.wikiEditor-ui-toolbar {
    border-bottom: 1px solid silver;
}
.wikiEditor-ui-text {
    background-color: var(--background-color-base);
}
.wikiEditor-ui-text textarea {
    background-color: transparent;
}












/* Fix wikiEditor spacing */
#upload_container {
    margin-top: -1px;
}
#upload_div {
    margin: 0;
    width: auto;
    border-width: 1px 0;
    box-shadow: none;
}

/* Prevent page jump from the toolbar loading */
.client-js #editform {
    /* To disable margin collapsing */
    overflow: hidden;
}
.client-js .mw-editform > #wpTextbox1 {
    margin-top: 73px;
}

/** Стили для Панели быстрой вставки **/
#userButtons {
    background-color: transparent;
    border: 1px solid #76FF76;
    font-size: 95%;
    width: 100%;
    border-collapse: collapse;
    color: black;
    margin: 1px 0px 1em;
    }

#userButtons tr th, table#userButtons * tr th {
    background-color: #BBFFBB;
    border: 1px solid #76FF76;
    font-size: 95%;
    padding: 2px;
    text-align: center;
    }

#userButtons tr td, table#userButtons * tr td {
    border: 1px solid #76FF76;
    padding: 5px;
    }

#userButtons tr td p, table#userButtons * tr td p {
    margin-top:0;
    margin-bottom:0;
    }

#userButtons.collapsible tr th, table#userButtons.collapsible * tr th {
    padding-left: 6.5em;
    }

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

/* Стиль разделителей ПБВ */
#userButtons * hr { 
    background-color: #76FF76;
    width: 100%;
    float: left; /* без этого разделители начинались примерно в центре страницы */
}

.userButtonsAddons {
    border: 1px dotted #aaaaaa !important;
    padding: 2px;
    font-size: 95%;
    background-color: transparent !important;
    width: 49%;
    border-collapse: collapse;
    color: black;
    margin-bottom: 1em;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 1em;
}

.userButtonsAddons * th, .userButtonsAddons * td {
    border:1px dotted #aaaaaa !important;
    padding:2px;
    background-color:transparent !important;
    padding: 0.2em;
}

.userButtonsAddons * th {
    text-align:center;
}

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

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


/** Прочее **/
/* Иконка маркированных списков */
ul {
    list-style-image: var(--list-bullet);
}

/* Уменьшение интервала после мини-заголовка, созданного через апострофы */
.page-content p, .page-content section {
    margin: 0px 0px 8px;
}










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

/** Пиксельное масштабирование изображений и иконок пользователей **/
.pixel-image,
.sprite,
.sprite img,
.mw-userlink,
.invslot,
.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;
}

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

/** Hide noscript only elements **/
.noscript {
    display: none;
}

/** Скрытие от простых смертных ненужных элементов **/
.admin_only,
.admin_only_inline,
.admin_only_block,
.admin_only_flex {
    display: none !important;
}

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












/** Чередующиеся ячейки и строки таблиц
    Alternating table cells and rows    **/
/*
    .alternatecells:nth-child(odd) {
        background-color: #F9F9F9;
    }
    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/index.php?title=MediaWiki:Common.css&oldid=135"