|
|
| (159 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| :root, .skin-continuum, .notheme {
| | .welcome { |
| /* Base Colors */
| | text-align: center; |
| --color-base: #001F3F; /* Navy */
| | font-size: 4em; |
| --color-base-fixed: #001F3F;
| | } |
| --color-base--hover: #002B5C; /* Slightly lighter navy */
| | .emoji-trigger-wrap { margin-bottom: .5rem; } |
| --color-emphasized: #001933;
| | #emoji-trigger { margin-right: .5rem; } |
| --color-subtle: #54595d;
| | /* --- VoteNY: render as 👍1 --- */ |
| --color-placeholder: #72777d;
| | .vote-box { |
| --color-disabled: #72777d;
| | background-color: transparent; /* remove green box */ |
| --color-inverted: #FFFFFF; /* White */
| | height: auto; |
| --color-inverted-fixed: #FFFFFF;
| | width: auto; |
| | padding: 0; |
| | display: inline-block !important; |
| | align-items: center; |
| | } |
|
| |
|
| /* Progressive Colors */
| | #PollVotes.vote-number { |
| --color-progressive: #FF851B; /* Bright Orange */
| | color: inherit; /* stop forcing white */ |
| --color-progressive--hover: #FFB84D; /* Soft Peach */
| | display: inline-block !important; |
| --color-progressive--active: #FF6300; /* Deep Orange */
| | background-color: transparent; |
| --color-progressive--focus: #FF851B;
| | font-size: var(--font-size-medium) !important; |
| | font-weight: 600; |
| | } |
| | .vote-box::before { |
| | content: "👍"; |
| | display: inline-block; |
| | font-size: var(--font-size-medium) !important; |
| | line-height: 1; |
| | } |
|
| |
|
| /* Destructive/Warning/Success */
| | #PollVotes.vote-number::before { |
| --color-destructive: #FF4500; /* Burnt Orange */
| | content: none !important; |
| --color-destructive--hover: #FF6347; /* Tomato */
| | } |
| --color-destructive--active: #9F3526; /* Deep Burnt Orange */
| |
| --color-destructive--focus: #FF851B;
| |
| --color-visited: #B86BFF; /* Lavender for visited links */
| |
| --color-destructive--visited: #FF6347;
| |
| --color-error: #FF4500;
| |
| --color-warning: #FFB84D; /* Soft Peach */
| |
| --color-success: #177860;
| |
| --color-notice: #001933;
| |
|
| |
|
| /* Content Changes */
| | /* Hide the Vote/unvote link (we’ll keep it functional via JS) */ |
| --color-content-added: #006400; /* Dark Green */
| | #Answer.vote-action { |
| --color-content-removed: #8B0000; /* Dark Red */
| | display: none; |
| | |
| /* Shadows & Filters */
| |
| --filter-invert-icon: 0;
| |
| --filter-invert-primary-button-icon: 1;
| |
| --box-shadow-color-base: #000;
| |
| --box-shadow-color-progressive--active: #FF6300;
| |
| --box-shadow-color-progressive--focus: #FF851B;
| |
| --box-shadow-color-progressive-selected: #FF851B;
| |
| --box-shadow-color-progressive-selected--hover: #FFB84D;
| |
| --box-shadow-color-progressive-selected--active: #FF6300;
| |
| --box-shadow-color-destructive--focus: #FF851B;
| |
| --box-shadow-color-inverted: #FFFFFF;
| |
| --box-shadow-color-transparent: transparent;
| |
| | |
| /* Background Colors */
| |
| --background-color-base: #001F3F; /* Navy */
| |
| --background-color-base-fixed: #001F3F;
| |
| --background-color-neutral: #002855;
| |
| --background-color-neutral-subtle: #001933;
| |
| --background-color-interactive: #002B5C;
| |
| --background-color-interactive-subtle: #001933;
| |
| --background-color-disabled: #54595d;
| |
| --background-color-disabled-subtle: #3A3D42;
| |
| --background-color-inverted: #101418;
| |
| | |
| /* Background - Progressive */
| |
| --background-color-progressive: #FF851B;
| |
| --background-color-progressive--hover: #FFB84D;
| |
| --background-color-progressive--active: #FF6300;
| |
| --background-color-progressive--focus: #FF851B;
| |
| --background-color-progressive-subtle: rgba(255, 133, 27, 0.1);
| |
| | |
| /* Background - Destructive */
| |
| --background-color-destructive: #FF4500;
| |
| --background-color-destructive--hover: #FF6347;
| |
| --background-color-destructive--active: #9F3526;
| |
| --background-color-destructive--focus: #FF851B;
| |
| --background-color-destructive-subtle: rgba(255, 69, 0, 0.1);
| |
| | |
| /* Background - Error/Warning/Success */
| |
| --background-color-error: #FF4500;
| |
| --background-color-error--hover: #FF6347;
| |
| --background-color-error--active: #9F3526;
| |
| --background-color-error-subtle: rgba(255, 69, 0, 0.1);
| |
| --background-color-warning-subtle: rgba(255, 184, 77, 0.2);
| |
| --background-color-success-subtle: #dff2eb;
| |
| --background-color-notice-subtle: #001933;
| |
| --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(255, 133, 27, 0.1);
| |
| --background-color-button-quiet--active: rgba(255, 133, 27, 0.2);
| |
| --background-color-input-binary--checked: #FF851B;
| |
| --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 */
| |
| --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;
| |
| | |
| /* Borders */
| |
| --border-color-base: #FF851B;
| |
| --border-color-subtle: #FFB84D;
| |
| --border-color-muted: #FFB84D;
| |
| --border-color-interactive: #FF851B;
| |
| --border-color-disabled: #54595d;
| |
| --border-color-inverted: #FFFFFF;
| |
| --border-color-progressive: #FF851B;
| |
| --border-color-progressive--hover: #FFB84D;
| |
| --border-color-progressive--active: #FF6300;
| |
| --border-color-progressive--focus: #FF851B;
| |
| --border-color-destructive: #FF4500;
| |
| --border-color-destructive--hover: #FF6347;
| |
| --border-color-destructive--active: #9F3526;
| |
| --border-color-destructive--focus: #FF851B;
| |
| --border-color-error: #FF4500;
| |
| --border-color-error--hover: #FF6347;
| |
| --border-color-warning: #FFB84D;
| |
| --border-color-success: #177860;
| |
| --border-color-notice: #001933;
| |
| --border-color-content-added: #a3d3ff;
| |
| --border-color-content-removed: #ffe49c;
| |
| --border-color-transparent: transparent;
| |
| --border-color-divider: #FF851B;
| |
| | |
| /* Outline */
| |
| --outline-color-progressive--focus: #FF851B;
| |
| | |
| /* Link Overrides */
| |
| --color-link-red: var(--color-destructive);
| |
| --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);
| |
| | |
| /* Input Borders */
| |
| --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);
| |
| | |
| /* Subtle Text */
| |
| --color-base--subtle: #54595d;
| |
| } | | } |
