Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.
- Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
- Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
- Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
- Opera: Нажмите Ctrl+F5.
/* 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 {
/* Codex design system variables - LIGHT THEME (by default) */
--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;
--color-progressive: #36c;
--color-progressive--hover: #4b77d6;
--color-progressive--active: #233566;
--color-progressive--focus: #36c;
--color-destructive: #d73333;
--color-destructive--hover: #fc493b;
--color-destructive--active: #9f3526;
--color-destructive--focus: #36c;
--color-visited: #6a60b0;
--color-destructive--visited: #9f5555;
--color-error: #d73333;
--color-warning: #eeb533;
--color-success: #177860;
--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-color-base-fixed: #fff;
--background-color-neutral: #eaecf0;
--background-color-neutral-subtle: #f8f9fa;
--background-color-interactive: #eaecf0;
--background-color-interactive-subtle: #f8f9fa;
--background-color-disabled: #c8ccd1;
--background-color-disabled-subtle: #eaecf0;
--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);
--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;
}
/* DARK THEME - Structorica Dark Theme */
:root body.stw-theme-dark {
/* Codex variables for dark theme with !important for overrides */
--color-base: #e0e0e0;
--color-base-fixed: #e0e0e0;
--color-base--hover: #f0f0f0;
--color-emphasized: #ffffff;
--color-subtle: #a0a0a0;
--color-placeholder: #808080;
--color-disabled: #606060;
--color-inverted: #0f0f0f;
--color-inverted-fixed: #0f0f0f;
--color-progressive: #4a9eff;
--color-progressive--hover: #6bb3ff;
--color-progressive--active: #1a6bcc;
--color-progressive--focus: #4a9eff;
--color-destructive: #ff6b6b;
--color-destructive--hover: #ff9999;
--color-destructive--active: #cc3333;
--color-destructive--focus: #4a9eff;
--color-visited: #8b7bc8;
--color-destructive--visited: #c97a7a;
--color-error: #ff6b6b;
--color-warning: #ffb347;
--color-success: #51cf66;
--color-notice: #ffffff;
--color-content-added: #69db7c;
--color-content-removed: #ff8787;
--filter-invert-icon: 0;
--filter-invert-primary-button-icon: 0;
--box-shadow-color-base: #000;
--box-shadow-color-progressive--active: #1a6bcc;
--box-shadow-color-progressive--focus: #4a9eff;
--box-shadow-color-progressive-selected: #4a9eff;
--box-shadow-color-progressive-selected--hover: #6bb3ff;
--box-shadow-color-progressive-selected--active: #1a6bcc;
--box-shadow-color-destructive--focus: #4a9eff;
--box-shadow-color-inverted: #0f0f0f;
--box-shadow-color-transparent: transparent;
/* Background colors */
--background-color-base: #0f0f0f;
--background-color-base-fixed: #0f0f0f;
--background-color-neutral: #1a1a1a;
--background-color-neutral-subtle: #141414;
--background-color-interactive: #1a1a1a;
--background-color-interactive-subtle: #141414;
--background-color-disabled: #2a2a2a;
--background-color-disabled-subtle: #1a1a1a;
--background-color-inverted: #ffffff;
--background-color-progressive: #4a9eff;
--background-color-progressive--hover: #6bb3ff;
--background-color-progressive--active: #1a6bcc;
--background-color-progressive--focus: #4a9eff;
--background-color-progressive-subtle: #0a2a4a;
--background-color-destructive: #ff6b6b;
--background-color-destructive--hover: #ff9999;
--background-color-destructive--active: #cc3333;
--background-color-destructive--focus: #4a9eff;
--background-color-destructive-subtle: #4a1a1a;
--background-color-error: #ff6b6b;
--background-color-error--hover: #ff9999;
--background-color-error--active: #cc3333;
--background-color-error-subtle: #4a1a1a;
--background-color-warning-subtle: #4a3a0a;
--background-color-success-subtle: #1a3a1a;
--background-color-notice-subtle: #1a1a1a;
--background-color-content-added: #1a3a1a;
--background-color-content-removed: #3a1a1a;
--background-color-transparent: transparent;
--background-color-backdrop-light: rgba(0, 0, 0, 0.65);
--background-color-backdrop-dark: rgba(255, 255, 255, 0.65);
--background-color-button-quiet--hover: rgba(74, 158, 255, 0.1);
--background-color-button-quiet--active: rgba(74, 158, 255, 0.2);
--background-color-input-binary--checked: #4a9eff;
--background-color-tab-list-item-framed--hover: rgba(255, 255, 255, 0.1);
--background-color-tab-list-item-framed--active: rgba(255, 255, 255, 0.2);
/* Icon opacity */
--opacity-icon-base: 0.9;
--opacity-icon-base--hover: 0.75;
--opacity-icon-base--selected: 1;
--opacity-icon-base--disabled: 0.4;
--opacity-icon-placeholder: 0.5;
--opacity-icon-subtle: 0.7;
/* Border colors */
--border-color-base: #404040;
--border-color-subtle: #303030;
--border-color-muted: #202020;
--border-color-interactive: #505050;
--border-color-disabled: #303030;
--border-color-inverted: #0f0f0f;
--border-color-progressive: #4a9eff;
--border-color-progressive--hover: #6bb3ff;
--border-color-progressive--active: #1a6bcc;
--border-color-progressive--focus: #4a9eff;
--border-color-destructive: #ff6b6b;
/* Additional variables for Structorica */
--navbox-background-color: #1a1a1a;
--navbox-border-color: #404040;
--navbox-header-color: #0f0f0f;
--navbox-secondary-header-color: #141414;
--navbox-tertiary-header-color: #1a1a1a;
--navbox-section-color: #1a1a1a;
}
/* You can add your custom styles here */
.img-responsive,
.img-responsive img {
max-width: 100%;
height: auto;
}
/* Light theme class for compatibility */
body.stw-theme-light {
/* Inherits all variables from :root (light theme by default) */
}