From 56741beb698869e5a407ad600dd06cbe6a9f4374 Mon Sep 17 00:00:00 2001 From: Ed Silkworth Date: Thu, 8 Jun 2023 00:35:57 -0700 Subject: [PATCH] rebase --- public/css/theme-arc-red.css | 240 ++++++++++++++---------- public/css/theme-auto-red.css | 342 +++++++++++++++++++--------------- public/css/theme-red.css | 36 ++-- 3 files changed, 341 insertions(+), 277 deletions(-) diff --git a/public/css/theme-arc-red.css b/public/css/theme-arc-red.css index 9e19b1e..ac438fb 100644 --- a/public/css/theme-arc-red.css +++ b/public/css/theme-arc-red.css @@ -1,23 +1,27 @@ -/* root and emoji source: https://github.com/go-gitea/gitea/blob/main/web_src/less/themes/theme-arc-green.less */ +/* root and emoji source: https://github.com/go-gitea/gitea/blob/main/web_src/css/themes/theme-arc-green.css */ /* some root colors and one alpha are customized */ /* custom colors are slightly brighter */ /* custom alpha is slightly more transparent */ +/* @import "../chroma/base.css"; */ +/* @import "../chroma/dark.css"; */ +/* @import "../codemirror/dark.css"; */ + :root { --is-dark-theme: true; - --color-primary: #e6051f !important; /* greater contributions heatmap, primary email address label, Regenerate Scratch Token, and more (below) */ + --color-primary: #e6051f !important; /* was #87ab63, greater contributions heatmap, primary email address label, Regenerate Scratch Token, and more (below) */ --color-primary-contrast: #ffffff; --color-primary-dark-1: #93b373; - --color-primary-dark-2: #c40319 !important; /* greater contributions heatmap and more (below) */ - --color-primary-dark-3: #b00317 !important; /* dropdown actions button */ - --color-primary-dark-4: #a10315 !important; /* red buttons and greater contributions heatmap */ + --color-primary-dark-2: #c40319 !important; /* was #9fbc82, greater contributions heatmap and more (below) */ + --color-primary-dark-3: #b00317 !important; /* was #abc492, dropdown actions button */ + --color-primary-dark-4: #a10315 !important; /* was #b7cda1, red buttons and greater contributions heatmap */ --color-primary-dark-5: #cfddc1; - --color-primary-dark-6: #780310 !important; /* red buttons hover */ + --color-primary-dark-6: #780310 !important; /* was #e7eee0, red buttons hover */ --color-primary-dark-7: #f8faf6; - --color-primary-light-1: #eb142d !important; /* selection color */ - --color-primary-light-2: #e82138 !important; /* greater contributions heatmap */ + --color-primary-light-1: #eb142d !important; /* was #7a9e55, selection color */ + --color-primary-light-2: #e82138 !important; /* was #6c8c4c, greater contributions heatmap */ --color-primary-light-3: #5f7b42; - --color-primary-light-4: #f04559 !important; /* greater contributions heatmap */ + --color-primary-light-4: #f04559 !important; /* was #516939, greater contributions heatmap */ --color-primary-light-5: #364626; --color-primary-light-6: #1b2313; --color-primary-light-7: #080b06; @@ -30,34 +34,47 @@ --color-primary-alpha-70: #87ab63b3; --color-primary-alpha-80: #87ab63cc; --color-primary-alpha-90: #87ab63e1; - --color-secondary: #454a57; - --color-secondary-dark-1: #505665; - --color-secondary-dark-2: #5b6273; - --color-secondary-dark-3: #71798e; - --color-secondary-dark-4: #7f8699; - --color-secondary-dark-5: #8c93a4; - --color-secondary-dark-6: #9aa0af; - --color-secondary-dark-7: #a8adba; - --color-secondary-dark-8: #b6bac5; - --color-secondary-dark-9: #c4c7d0; - --color-secondary-dark-10: #d2d4db; - --color-secondary-dark-11: #dfe1e6; - --color-secondary-dark-12: #edeef1; + --color-primary-hover: var(--color-primary-light-1); + --color-primary-active: var(--color-primary-light-2); + --color-secondary: #525767; + --color-secondary-dark-1: #5c6374; + --color-secondary-dark-2: #666e81; + --color-secondary-dark-3: #7c8497; + --color-secondary-dark-4: #8990a1; + --color-secondary-dark-5: #959cab; + --color-secondary-dark-6: #a2a8b5; + --color-secondary-dark-7: #afb4c0; + --color-secondary-dark-8: #bcc0ca; + --color-secondary-dark-9: #c9cbd4; + --color-secondary-dark-10: #d6d7de; + --color-secondary-dark-11: #e2e3e8; + --color-secondary-dark-12: #eeeff2; --color-secondary-dark-13: #fbfbfc; - --color-secondary-light-1: #373b46; - --color-secondary-light-2: #292c34; - --color-secondary-light-3: #1c1e23; - --color-secondary-light-4: #0e0f11; - --color-secondary-alpha-10: #454a5719; - --color-secondary-alpha-20: #454a5733; - --color-secondary-alpha-30: #454a574b; - --color-secondary-alpha-40: #454a5766; - --color-secondary-alpha-50: #454a5780; - --color-secondary-alpha-60: #454a5799; - --color-secondary-alpha-70: #f7dede1b !important; /* fewer contributions heatmap */ - --color-secondary-alpha-80: #454a57cc; - --color-secondary-alpha-90: #454a57e1; - /* colors */ + --color-secondary-light-1: #454a57; + --color-secondary-light-2: #383c47; + --color-secondary-light-3: #2c2f37; + --color-secondary-light-4: #1f2226; + --color-secondary-alpha-10: #52576719; + --color-secondary-alpha-20: #52576733; + --color-secondary-alpha-30: #5257674b; + --color-secondary-alpha-40: #52576766; + --color-secondary-alpha-50: #52576780; + --color-secondary-alpha-60: #52576799; + --color-secondary-alpha-70: #f7dede1b !important; /* was #525767b3, fewer contributions heatmap */ + --color-secondary-alpha-80: #525767cc; + --color-secondary-alpha-90: #525767e1; + --color-secondary-hover: var(--color-secondary-light-1); + --color-secondary-active: var(--color-secondary-light-2); + /* console colors - used for actions console and console files */ + --color-console-fg: #eeeff2; + --color-console-fg-subtle: #959cab; + --color-console-bg: #262936; + --color-console-border: #383c47; + --color-console-hover-bg: #ffffff16; + --color-console-active-bg: #454a57; + --color-console-menu-bg: #383c47; + --color-console-menu-border: #5c6374; + /* named colors */ --color-red: #cc4848; --color-orange: #cc580c; --color-yellow: #cc9903; @@ -69,23 +86,49 @@ --color-purple: #b259d0; --color-pink: #d22e8b; --color-brown: #a47252; - --color-grey: #9ea2aa; - --color-black: #1e222e; - /* light variants - produced via Sass scale-color(color, $lightness: -10%) */ - --color-red-light: #c23636; - --color-orange-light: #b84f0b; - --color-yellow-light: #b88a03; - --color-olive-light: #839311; - --color-green-light: #7a9e55; - --color-teal-light: #00837c; - --color-blue-light: #347cb3; - --color-violet-light: #7b4edb; - --color-purple-light: #a742c9; - --color-pink-light: #be297d; - --color-brown-light: #94674a; - --color-grey-light: #8d919b; - --color-black-light: #1b1f29; + --color-black: #2e323e; + /* light variants - produced via Sass scale-color(color, $lightness: +10%) */ + --color-red-light: #d15a5a; + --color-orange-light: #f6a066; + --color-yellow-light: #eaaf03; + --color-olive-light: #abc016; + --color-green-light: #93b373; + --color-teal-light: #00b6ad; + --color-blue-light: #4e96cc; + --color-violet-light: #9b79e4; + --color-purple-light: #ba6ad5; + --color-pink-light: #d74397; + --color-brown-light: #b08061; + --color-black-light: #3f4555; + /* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */ + --color-red-dark-1: #c23636; + --color-orange-dark-1: #f38236; + --color-yellow-dark-1: #b88a03; + --color-olive-dark-1: #839311; + --color-green-dark-1: #7a9e55; + --color-teal-dark-1: #00837c; + --color-blue-dark-1: #347cb3; + --color-violet-dark-1: #7b4edb; + --color-purple-dark-1: #a742c9; + --color-pink-dark-1: #be297d; + --color-brown-dark-1: #94674a; + --color-black-dark-1: #292d38; + /* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */ + --color-red-dark-2: #ad3030; + --color-orange-dark-2: #f16e17; + --color-yellow-dark-2: #a37a02; + --color-olive-dark-2: #74820f; + --color-green-dark-2: #6c8c4c; + --color-teal-dark-2: #00746e; + --color-blue-dark-2: #2e6e9f; + --color-violet-dark-2: #6733d6; + --color-purple-dark-2: #9834b9; + --color-pink-dark-2: #a9246f; + --color-brown-dark-2: #835b42; + --color-black-dark-2: #252832; /* other colors */ + --color-grey: #505665; + --color-grey-light: #a1a6b7; --color-gold: #b1983b; --color-white: #ffffff; --color-diff-removed-word-bg: #6f3333; @@ -125,19 +168,19 @@ --color-orange-badge-hover-bg: #f2711c4d; --color-git: #f05133; /* target-based colors */ - --color-body: #383c4a; + --color-body: #373b47; --color-box-header: #404652; --color-box-body: #2a2e3a; --color-box-body-highlight: #353945; --color-text-dark: #dbe0ea; - --color-text: #bbc0ca; - --color-text-light: #a6aab5; - --color-text-light-1: #979ba6; - --color-text-light-2: #8a8e99; - --color-text-light-3: #707687; + --color-text: #cbd0da; + --color-text-light: #bbbfca; + --color-text-light-1: #aaafb9; + --color-text-light-2: #9a9ea9; + --color-text-light-3: #8a8e99; --color-footer: #2e323e; --color-timeline: #4c525e; - --color-input-text: #d5dbe6; + --color-input-text: #dfe3ec; --color-input-background: #232933; --color-input-toggle-background: #454a57; --color-input-border: #454a57; @@ -147,12 +190,12 @@ --color-light: #00000028; --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); --color-light-border: #ffffff28; - --color-hover: #ffffff10; - --color-active: #ffffff16; + --color-hover: #ffffff19; + --color-active: #ffffff24; --color-menu: #2e323e; --color-card: #2e323e; --color-markup-table-row: #ffffff06; - --color-markup-code-block: #ffffff0d; + --color-markup-code-block: #ffffff16; --color-button: #353846; --color-code-bg: #2a2e3a; --color-code-sidebar-bg: #2e323e; @@ -160,24 +203,29 @@ --color-secondary-bg: #2a2e3a; --color-text-focus: #fff; --color-expand-button: #3c404d; - --color-placeholder-text: #6a737d; + --color-placeholder-text: #8a8e99; --color-editor-line-highlight: var(--color-primary-light-5); --color-project-board-bg: var(--color-secondary-light-2); --color-caret: var(--color-text); /* should ideally be --color-text-dark, see #15651 */ --color-reaction-bg: #ffffff12; - --color-reaction-active-bg: var(--color-primary-alpha-40); + --color-reaction-hover-bg: var(--color-primary-light-4); + --color-reaction-active-bg: var(--color-primary-light-5); + --color-tooltip-text: #ffffff; + --color-tooltip-bg: #000000f0; --color-header-bar: #2e323e; - --color-label-active-bg: #4c525e; + --color-label-text: #dfe3ec; + --color-label-bg: #7c84974b; + --color-label-hover-bg: #7c8497a0; + --color-label-active-bg: #7c8497ff; --color-accent: var(--color-primary-light-1); --color-small-accent: var(--color-primary-light-5); --color-active-line: #534d1b; - accent-color: var(--color-accent); color-scheme: dark; --fonts-monospace: ui-monospace, "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace, var(--fonts-emoji) !important; /* replaced "SFMono-Regular" */ } - + /* invert emojis that are hard to read otherwise */ .emoji[aria-label="check mark"], .emoji[aria-label="currency exchange"], @@ -199,7 +247,7 @@ .emoji[aria-label="paw prints"], .emoji[aria-label="musical note"], .emoji[aria-label="musical notes"] { -filter: invert(100%) hue-rotate(180deg); + filter: invert(100%) hue-rotate(180deg); } /* not needed: .full.height */ @@ -222,7 +270,7 @@ span.green .svg { .ui.red.button { background-color: var(--color-primary-dark-4) !important; /* red button color (e.g., Confirm Deletion, Remove) */ - color: var(--color-body) !important; /* text color overrides text color for some buttons (e.g., Transfer Ownership) */ + /* color: var(--color-body) !important; */ /* reconsidered: text color overrides text color for some buttons (e.g., Transfer Ownership) */ } .ui.green.button:hover, .ui.green.button:active { @@ -233,51 +281,48 @@ span.green .svg { background-color: var(--color-primary-dark-6) !important; /* red button hover color */ } -.ui.active.button:hover, .ui.active.button:active { - color: var(--color-body) !important; /* text color overrides text color for some other buttons (e.g., commit Actions) */ +.ui.basic.red.button { + background-color: unset !important; /* reset colors in danger zone */ } +/* reconsidered: .ui.active.button:hover, .ui.active.button:active */ /* not needed: .ui.tabular.stackable.menu.navbar .active.item */ - -.ui.secondary.pointing.tabular.top.attached.borderless.menu.stackable.new-menu.navbar .active.item { - background: unset !important; /* do not color secondary menu item, includes stackable ones */ -} +/* not needed: .ui.secondary.pointing.tabular.top.attached.borderless.menu.stackable.new-menu.navbar .active.item */ .ui.vertical.menu { background: unset !important; /* make issues, pull requests and milestones menus background match --color-background */ } -#repo-files-table tr:hover { - background-color: var(--color-secondary-alpha-70) !important; /* row highlight color */ -} - /* not needed: .ui.top.attached.pull.tabular.stackable.menu .active.item */ -/* not needed: .ui.top.tabular.menu .active.write.item */ - -.repository .diff-detail-box { - background: unset !important; /* make diff-detail-box background match --color-background */ +.ui.top.attached.pull.tabular.stackable.menu .active.item { + background-color: rgb(56, 59, 70) !important; /* make pull requests top tabular menu item background match --color-background, using rgb() to remove bottom border */ } +.ui.top.tabular.menu .active.write.item { + background-color: rgb(56, 59, 70) !important; /* make new releases (sub) tabular menu item background match --color-background, using rgb() to remove bottom border */ +} + +.ui.top.attached.tabular.menu .active.item { + background-color: var(--color-box-body) !important; /* make subscriptions tabular menu item background match --color-box-body */ +} + +/* reconsidered, re-ordered: #repo-files-table tr:hover */ +/* not needed: .repository .diff-detail-box */ + details { - background-color: var(--color-secondary-light-3); /* make collapsible elements easier to distinguish from main body */ + background-color: var(--color-secondary-light-4); /* make collapsible elements easier to distinguish from main body */ border-radius: 4px; /* same as code blocks */ padding: .2em .4em; /* same as code blocks */ } .js-clone-url { - border: 1px solid var(--color-light-border) !important; /* use same border color as surrounding buttons */ + /* border: 1px solid var(--color-light-border) !important; */ /* reconsidered: use same border color as surrounding buttons */ border-right: none !important; /* border already there */ } -.color-preview { - display: unset !important; /* remove little color preview square */ - margin-left: unset !important; /* remove subsequently redundant margin */ -} - -.markup table tr:nth-child(2n) { - background-color: unset !important; /* remove background color of alternating table rows, since distracting if such rows contain codes */ -} +/* not needed: .color-preview */ +/* not needed: .markup table tr:nth-child(2n) */ .added-code { background: unset !important; /* remove highlight behind some codes */ @@ -287,10 +332,5 @@ details { border-inline: 1px solid var(--color-box-header) !important; /* hide center border more between table header columns */ } -.ui.table>thead>tr:first-child>th:first-child { - border-radius: .22rem 0 0 !important; /* remove tiny empty space between table header corner and table border */ -} - -.ui.table>thead>tr:first-child>th:last-child { - border-radius: 0 .22rem 0 0 !important; /* remove tiny empty space between table header corner and table border */ -} \ No newline at end of file +/* not needed: .ui.table>thead>tr:first-child>th:first-child */ +/* not needed: .ui.table>thead>tr:first-child>th:last-child */ \ No newline at end of file diff --git a/public/css/theme-auto-red.css b/public/css/theme-auto-red.css index 8e0b566..b591d3c 100644 --- a/public/css/theme-auto-red.css +++ b/public/css/theme-auto-red.css @@ -14,118 +14,114 @@ --color-secondary-alpha-70: #dedede4d !important; /* fewer contributions heatmap */ --fonts-monospace: ui-monospace, "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace, var(--fonts-emoji) !important; /* replaced "SFMono-Regular" */ } - + .full.height { /* legacy code to fix issue with Dark Reader not displaying the entire page with the same color */ background-color: var(--color-background) !important; /* make some elements pop out more (e.g., Sign In box, Two-Factor Authentication boxes, Repositories list, Settings boxes, Search boxes) */ } - + .home a { color: var(--color-primary) !important; /* link and link hover color on home page, other links use --color-primary */ } - + .home .svg { color: var(--color-primary) !important; /* icons' color on home page */ } - + span.green .svg { color: var(--color-primary) !important; /* ssh/gpg key icon color */ } - + .ui.green.button { background-color: var(--color-primary) !important; /* "green" button color (e.g., Sign In, Verify), primary buttons use --color-primary */ } - + .ui.red.button { background-color: var(--color-primary-dark-4) !important; /* red button color (e.g., Confirm Deletion, Remove) */ - color: var(--color-body) !important; /* text color overrides text color for some buttons (e.g., Transfer Ownership) */ + /* color: var(--color-body) !important; */ /* reconsidered: text color overrides text color for some buttons (e.g., Transfer Ownership) */ } - + .ui.green.button:hover, .ui.green.button:active { background-color: var(--color-primary-dark-2) !important; /* "green" button hover color, only this one has active element, primary buttons use --color-primary-dark-2 */ } - + .ui.red.button:hover { background-color: var(--color-primary-dark-6) !important; /* red button hover color */ } - - .ui.active.button:hover, .ui.active.button:active { - color: var(--color-body) !important; /* text color overrides text color for some other buttons (e.g., commit Actions) */ + + .ui.basic.red.button { + background-color: unset !important; /* reset colors in danger zone */ } - + + /* reconsidered: .ui.active.button:hover, .ui.active.button:active */ + .ui.tabular.stackable.menu.navbar .active.item { background-color: var(--color-background) !important; /* make repo tabular menu item background match --color-background */ } - + .ui.secondary.pointing.tabular.top.attached.borderless.menu.stackable.new-menu.navbar .active.item { - background: unset !important; /* do not color secondary menu item, includes stackable ones */ + background: unset !important; /* do not color secondary menu item, includes stackable ones, related to --color-background */ } - + .ui.vertical.menu { background: unset !important; /* make issues, pull requests and milestones menus background match --color-background */ } - - #repo-files-table tr:hover { - background-color: var(--color-secondary-alpha-70) !important; /* row highlight color */ - } - + .ui.top.attached.pull.tabular.stackable.menu .active.item { - background-color: var(--color-background) !important; /* make pull requests top tabular menu item background match --color-background */ + background-color: var(--color-background) !important; /* make pull requests (sub) tabular menu item background match --color-background */ } - + .ui.top.tabular.menu .active.write.item { - background-color: var(--color-background) !important; /* make new release tabular menu item background match --color-background */ + background-color: var(--color-background) !important; /* make new releases (sub) tabular menu item background match --color-background */ } - - .repository .diff-detail-box { - background: unset !important; /* make diff-detail-box background match --color-background */ - } - + + /* not needed: .ui.top.attached.tabular.menu .active.item */ + /* reconsidered, re-ordered: #repo-files-table tr:hover */ + /* not needed: .repository .diff-detail-box */ + details { background-color: var(--color-secondary-light-3); /* make collapsible elements easier to distinguish from main body */ border-radius: 4px; /* same as code blocks */ padding: .2em .4em; /* same as code blocks */ } - + .js-clone-url { - border: 1px solid var(--color-light-border) !important; /* use same border color as surrounding buttons */ + /* border: 1px solid var(--color-light-border) !important; */ /* reconsidered: use same border color as surrounding buttons */ border-right: none !important; /* border already there */ } - - .color-preview { - display: unset !important; /* remove little color preview square */ - margin-left: unset !important; /* remove subsequently redundant margin */ - } - - .markup table tr:nth-child(2n) { - background-color: unset !important; /* remove background color of alternating table rows, since distracting if such rows contain codes */ - } - + + /* not needed: .color-preview */ + /* not needed: .markup table tr:nth-child(2n) */ + .added-code { background: unset !important; /* remove highlight behind some codes */ } } @media (prefers-color-scheme: dark) { - /* root and emoji source: https://github.com/go-gitea/gitea/blob/main/web_src/less/themes/theme-arc-green.less */ + /* root and emoji source: https://github.com/go-gitea/gitea/blob/main/web_src/css/themes/theme-arc-green.css */ /* some root colors and one alpha are customized */ /* custom colors are slightly brighter */ /* custom alpha is slightly more transparent */ + /* @import "../chroma/base.css"; */ + /* @import "../chroma/dark.css"; */ + /* @import "../codemirror/dark.css"; */ + :root { --is-dark-theme: true; - --color-primary: #e6051f !important; /* greater contributions heatmap, primary email address label, Regenerate Scratch Token, and more (below) */ + --color-primary: #e6051f !important; /* was #87ab63, greater contributions heatmap, primary email address label, Regenerate Scratch Token, and more (below) */ --color-primary-contrast: #ffffff; --color-primary-dark-1: #93b373; - --color-primary-dark-2: #c40319 !important; /* greater contributions heatmap and more (below) */ - --color-primary-dark-3: #b00317 !important; /* dropdown actions button */ - --color-primary-dark-4: #a10315 !important; /* red buttons and greater contributions heatmap */ + --color-primary-dark-2: #c40319 !important; /* was #9fbc82, greater contributions heatmap and more (below) */ + --color-primary-dark-3: #b00317 !important; /* was #abc492, dropdown actions button */ + --color-primary-dark-4: #a10315 !important; /* was #b7cda1, red buttons and greater contributions heatmap */ --color-primary-dark-5: #cfddc1; - --color-primary-dark-6: #780310 !important; /* red buttons hover */ + --color-primary-dark-6: #780310 !important; /* was #e7eee0, red buttons hover */ --color-primary-dark-7: #f8faf6; - --color-primary-light-1: #eb142d !important; /* selection color */ - --color-primary-light-2: #e82138 !important; /* greater contributions heatmap */ + --color-primary-light-1: #eb142d !important; /* was #7a9e55, selection color */ + --color-primary-light-2: #e82138 !important; /* was #6c8c4c, greater contributions heatmap */ --color-primary-light-3: #5f7b42; - --color-primary-light-4: #f04559 !important; /* greater contributions heatmap */ + --color-primary-light-4: #f04559 !important; /* was #516939, greater contributions heatmap */ --color-primary-light-5: #364626; --color-primary-light-6: #1b2313; --color-primary-light-7: #080b06; @@ -138,34 +134,47 @@ --color-primary-alpha-70: #87ab63b3; --color-primary-alpha-80: #87ab63cc; --color-primary-alpha-90: #87ab63e1; - --color-secondary: #454a57; - --color-secondary-dark-1: #505665; - --color-secondary-dark-2: #5b6273; - --color-secondary-dark-3: #71798e; - --color-secondary-dark-4: #7f8699; - --color-secondary-dark-5: #8c93a4; - --color-secondary-dark-6: #9aa0af; - --color-secondary-dark-7: #a8adba; - --color-secondary-dark-8: #b6bac5; - --color-secondary-dark-9: #c4c7d0; - --color-secondary-dark-10: #d2d4db; - --color-secondary-dark-11: #dfe1e6; - --color-secondary-dark-12: #edeef1; + --color-primary-hover: var(--color-primary-light-1); + --color-primary-active: var(--color-primary-light-2); + --color-secondary: #525767; + --color-secondary-dark-1: #5c6374; + --color-secondary-dark-2: #666e81; + --color-secondary-dark-3: #7c8497; + --color-secondary-dark-4: #8990a1; + --color-secondary-dark-5: #959cab; + --color-secondary-dark-6: #a2a8b5; + --color-secondary-dark-7: #afb4c0; + --color-secondary-dark-8: #bcc0ca; + --color-secondary-dark-9: #c9cbd4; + --color-secondary-dark-10: #d6d7de; + --color-secondary-dark-11: #e2e3e8; + --color-secondary-dark-12: #eeeff2; --color-secondary-dark-13: #fbfbfc; - --color-secondary-light-1: #373b46; - --color-secondary-light-2: #292c34; - --color-secondary-light-3: #1c1e23; - --color-secondary-light-4: #0e0f11; - --color-secondary-alpha-10: #454a5719; - --color-secondary-alpha-20: #454a5733; - --color-secondary-alpha-30: #454a574b; - --color-secondary-alpha-40: #454a5766; - --color-secondary-alpha-50: #454a5780; - --color-secondary-alpha-60: #454a5799; - --color-secondary-alpha-70: #f7dede1b !important; /* fewer contributions heatmap */ - --color-secondary-alpha-80: #454a57cc; - --color-secondary-alpha-90: #454a57e1; - /* colors */ + --color-secondary-light-1: #454a57; + --color-secondary-light-2: #383c47; + --color-secondary-light-3: #2c2f37; + --color-secondary-light-4: #1f2226; + --color-secondary-alpha-10: #52576719; + --color-secondary-alpha-20: #52576733; + --color-secondary-alpha-30: #5257674b; + --color-secondary-alpha-40: #52576766; + --color-secondary-alpha-50: #52576780; + --color-secondary-alpha-60: #52576799; + --color-secondary-alpha-70: #f7dede1b !important; /* was #525767b3, fewer contributions heatmap */ + --color-secondary-alpha-80: #525767cc; + --color-secondary-alpha-90: #525767e1; + --color-secondary-hover: var(--color-secondary-light-1); + --color-secondary-active: var(--color-secondary-light-2); + /* console colors - used for actions console and console files */ + --color-console-fg: #eeeff2; + --color-console-fg-subtle: #959cab; + --color-console-bg: #262936; + --color-console-border: #383c47; + --color-console-hover-bg: #ffffff16; + --color-console-active-bg: #454a57; + --color-console-menu-bg: #383c47; + --color-console-menu-border: #5c6374; + /* named colors */ --color-red: #cc4848; --color-orange: #cc580c; --color-yellow: #cc9903; @@ -177,23 +186,49 @@ --color-purple: #b259d0; --color-pink: #d22e8b; --color-brown: #a47252; - --color-grey: #9ea2aa; - --color-black: #1e222e; - /* light variants - produced via Sass scale-color(color, $lightness: -10%) */ - --color-red-light: #c23636; - --color-orange-light: #b84f0b; - --color-yellow-light: #b88a03; - --color-olive-light: #839311; - --color-green-light: #7a9e55; - --color-teal-light: #00837c; - --color-blue-light: #347cb3; - --color-violet-light: #7b4edb; - --color-purple-light: #a742c9; - --color-pink-light: #be297d; - --color-brown-light: #94674a; - --color-grey-light: #8d919b; - --color-black-light: #1b1f29; + --color-black: #2e323e; + /* light variants - produced via Sass scale-color(color, $lightness: +10%) */ + --color-red-light: #d15a5a; + --color-orange-light: #f6a066; + --color-yellow-light: #eaaf03; + --color-olive-light: #abc016; + --color-green-light: #93b373; + --color-teal-light: #00b6ad; + --color-blue-light: #4e96cc; + --color-violet-light: #9b79e4; + --color-purple-light: #ba6ad5; + --color-pink-light: #d74397; + --color-brown-light: #b08061; + --color-black-light: #3f4555; + /* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */ + --color-red-dark-1: #c23636; + --color-orange-dark-1: #f38236; + --color-yellow-dark-1: #b88a03; + --color-olive-dark-1: #839311; + --color-green-dark-1: #7a9e55; + --color-teal-dark-1: #00837c; + --color-blue-dark-1: #347cb3; + --color-violet-dark-1: #7b4edb; + --color-purple-dark-1: #a742c9; + --color-pink-dark-1: #be297d; + --color-brown-dark-1: #94674a; + --color-black-dark-1: #292d38; + /* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */ + --color-red-dark-2: #ad3030; + --color-orange-dark-2: #f16e17; + --color-yellow-dark-2: #a37a02; + --color-olive-dark-2: #74820f; + --color-green-dark-2: #6c8c4c; + --color-teal-dark-2: #00746e; + --color-blue-dark-2: #2e6e9f; + --color-violet-dark-2: #6733d6; + --color-purple-dark-2: #9834b9; + --color-pink-dark-2: #a9246f; + --color-brown-dark-2: #835b42; + --color-black-dark-2: #252832; /* other colors */ + --color-grey: #505665; + --color-grey-light: #a1a6b7; --color-gold: #b1983b; --color-white: #ffffff; --color-diff-removed-word-bg: #6f3333; @@ -233,19 +268,19 @@ --color-orange-badge-hover-bg: #f2711c4d; --color-git: #f05133; /* target-based colors */ - --color-body: #383c4a; + --color-body: #373b47; --color-box-header: #404652; --color-box-body: #2a2e3a; --color-box-body-highlight: #353945; --color-text-dark: #dbe0ea; - --color-text: #bbc0ca; - --color-text-light: #a6aab5; - --color-text-light-1: #979ba6; - --color-text-light-2: #8a8e99; - --color-text-light-3: #707687; + --color-text: #cbd0da; + --color-text-light: #bbbfca; + --color-text-light-1: #aaafb9; + --color-text-light-2: #9a9ea9; + --color-text-light-3: #8a8e99; --color-footer: #2e323e; --color-timeline: #4c525e; - --color-input-text: #d5dbe6; + --color-input-text: #dfe3ec; --color-input-background: #232933; --color-input-toggle-background: #454a57; --color-input-border: #454a57; @@ -255,12 +290,12 @@ --color-light: #00000028; --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); --color-light-border: #ffffff28; - --color-hover: #ffffff10; - --color-active: #ffffff16; + --color-hover: #ffffff19; + --color-active: #ffffff24; --color-menu: #2e323e; --color-card: #2e323e; --color-markup-table-row: #ffffff06; - --color-markup-code-block: #ffffff0d; + --color-markup-code-block: #ffffff16; --color-button: #353846; --color-code-bg: #2a2e3a; --color-code-sidebar-bg: #2e323e; @@ -268,24 +303,29 @@ --color-secondary-bg: #2a2e3a; --color-text-focus: #fff; --color-expand-button: #3c404d; - --color-placeholder-text: #6a737d; + --color-placeholder-text: #8a8e99; --color-editor-line-highlight: var(--color-primary-light-5); --color-project-board-bg: var(--color-secondary-light-2); --color-caret: var(--color-text); /* should ideally be --color-text-dark, see #15651 */ --color-reaction-bg: #ffffff12; - --color-reaction-active-bg: var(--color-primary-alpha-40); + --color-reaction-hover-bg: var(--color-primary-light-4); + --color-reaction-active-bg: var(--color-primary-light-5); + --color-tooltip-text: #ffffff; + --color-tooltip-bg: #000000f0; --color-header-bar: #2e323e; - --color-label-active-bg: #4c525e; + --color-label-text: #dfe3ec; + --color-label-bg: #7c84974b; + --color-label-hover-bg: #7c8497a0; + --color-label-active-bg: #7c8497ff; --color-accent: var(--color-primary-light-1); --color-small-accent: var(--color-primary-light-5); --color-active-line: #534d1b; - accent-color: var(--color-accent); color-scheme: dark; --fonts-monospace: ui-monospace, "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace, var(--fonts-emoji) !important; /* replaced "SFMono-Regular" */ } - + /* invert emojis that are hard to read otherwise */ .emoji[aria-label="check mark"], .emoji[aria-label="currency exchange"], @@ -307,85 +347,82 @@ .emoji[aria-label="paw prints"], .emoji[aria-label="musical note"], .emoji[aria-label="musical notes"] { - filter: invert(100%) hue-rotate(180deg); + filter: invert(100%) hue-rotate(180deg); } /* not needed: .full.height */ - + .home a { color: var(--color-primary) !important; /* link and link hover color on home page, other links use --color-primary */ } - + .home .svg { color: var(--color-primary) !important; /* icons' color on home page */ } - + span.green .svg { color: var(--color-primary) !important; /* ssh/gpg key icon color */ } - + .ui.green.button { background-color: var(--color-primary) !important; /* "green" button color (e.g., Sign In, Verify), primary buttons use --color-primary */ } - + .ui.red.button { background-color: var(--color-primary-dark-4) !important; /* red button color (e.g., Confirm Deletion, Remove) */ - color: var(--color-body) !important; /* text color overrides text color for some buttons (e.g., Transfer Ownership) */ + /* color: var(--color-body) !important; */ /* reconsidered: text color overrides text color for some buttons (e.g., Transfer Ownership) */ } - + .ui.green.button:hover, .ui.green.button:active { background-color: var(--color-primary-dark-2) !important; /* "green" button hover color, only this one has active element, primary buttons use --color-primary-dark-2 */ } - + .ui.red.button:hover { background-color: var(--color-primary-dark-6) !important; /* red button hover color */ } - - .ui.active.button:hover, .ui.active.button:active { - color: var(--color-body) !important; /* text color overrides text color for some other buttons (e.g., commit Actions) */ + + .ui.basic.red.button { + background-color: unset !important; /* reset colors in danger zone */ } + /* reconsidered: .ui.active.button:hover, .ui.active.button:active */ /* not needed: .ui.tabular.stackable.menu.navbar .active.item */ - - .ui.secondary.pointing.tabular.top.attached.borderless.menu.stackable.new-menu.navbar .active.item { - background: unset !important; /* do not color secondary menu item, includes stackable ones */ - } - + /* not needed: .ui.secondary.pointing.tabular.top.attached.borderless.menu.stackable.new-menu.navbar .active.item */ + .ui.vertical.menu { background: unset !important; /* make issues, pull requests and milestones menus background match --color-background */ } - - #repo-files-table tr:hover { - background-color: var(--color-secondary-alpha-70) !important; /* row highlight color */ - } - + /* not needed: .ui.top.attached.pull.tabular.stackable.menu .active.item */ - - /* not needed: .ui.top.tabular.menu .active.write.item */ - - .repository .diff-detail-box { - background: unset !important; /* make diff-detail-box background match --color-background */ + + .ui.top.attached.pull.tabular.stackable.menu .active.item { + background-color: rgb(56, 59, 70) !important; /* make pull requests top tabular menu item background match --color-background, using rgb() to remove bottom border */ } - + + .ui.top.tabular.menu .active.write.item { + background-color: rgb(56, 59, 70) !important; /* make new releases (sub) tabular menu item background match --color-background, using rgb() to remove bottom border */ + } + + .ui.top.attached.tabular.menu .active.item { + background-color: var(--color-box-body) !important; /* make subscriptions tabular menu item background match --color-box-body */ + } + + /* reconsidered, re-ordered: #repo-files-table tr:hover */ + /* not needed: .repository .diff-detail-box */ + details { - background-color: var(--color-secondary-light-3); /* make collapsible elements easier to distinguish from main body */ + background-color: var(--color-secondary-light-4); /* make collapsible elements easier to distinguish from main body */ border-radius: 4px; /* same as code blocks */ padding: .2em .4em; /* same as code blocks */ } - + .js-clone-url { - border: 1px solid var(--color-light-border) !important; /* use same border color as surrounding buttons */ + /* border: 1px solid var(--color-light-border) !important; */ /* reconsidered: use same border color as surrounding buttons */ border-right: none !important; /* border already there */ } - - .color-preview { - display: unset !important; /* remove little color preview square */ - margin-left: unset !important; /* remove subsequently redundant margin */ - } - - .markup table tr:nth-child(2n) { - background-color: unset !important; /* remove background color of alternating table rows, since distracting if such rows contain codes */ - } + + /* not needed: .color-preview */ + /* not needed: .markup table tr:nth-child(2n) */ .added-code { background: unset !important; /* remove highlight behind some codes */ @@ -395,11 +432,6 @@ border-inline: 1px solid var(--color-box-header) !important; /* hide center border more between table header columns */ } - .ui.table>thead>tr:first-child>th:first-child { - border-radius: .22rem 0 0 !important; /* remove tiny empty space between table header corner and table border */ - } - - .ui.table>thead>tr:first-child>th:last-child { - border-radius: 0 .22rem 0 0 !important; /* remove tiny empty space between table header corner and table border */ - } + /* not needed: .ui.table>thead>tr:first-child>th:first-child */ + /* not needed: .ui.table>thead>tr:first-child>th:last-child */ } \ No newline at end of file diff --git a/public/css/theme-red.css b/public/css/theme-red.css index eefb9d6..aca214c 100644 --- a/public/css/theme-red.css +++ b/public/css/theme-red.css @@ -34,7 +34,7 @@ span.green .svg { .ui.red.button { background-color: var(--color-primary-dark-4) !important; /* red button color (e.g., Confirm Deletion, Remove) */ - color: var(--color-body) !important; /* text color overrides text color for some buttons (e.g., Transfer Ownership) */ + /* color: var(--color-body) !important; */ /* reconsidered: text color overrides text color for some buttons (e.g., Transfer Ownership) */ } .ui.green.button:hover, .ui.green.button:active { @@ -45,37 +45,35 @@ span.green .svg { background-color: var(--color-primary-dark-6) !important; /* red button hover color */ } -.ui.active.button:hover, .ui.active.button:active { - color: var(--color-body) !important; /* text color overrides text color for some other buttons (e.g., commit Actions) */ +.ui.basic.red.button { + background-color: unset !important; /* reset colors in danger zone */ } +/* reconsidered: .ui.active.button:hover, .ui.active.button:active */ + .ui.tabular.stackable.menu.navbar .active.item { background-color: var(--color-background) !important; /* make repo tabular menu item background match --color-background */ } .ui.secondary.pointing.tabular.top.attached.borderless.menu.stackable.new-menu.navbar .active.item { - background: unset !important; /* do not color secondary menu item, includes stackable ones */ + background: unset !important; /* do not color secondary menu item, includes stackable ones, related to --color-background */ } .ui.vertical.menu { background: unset !important; /* make issues, pull requests and milestones menus background match --color-background */ } -#repo-files-table tr:hover { - background-color: var(--color-secondary-alpha-70) !important; /* row highlight color */ -} - .ui.top.attached.pull.tabular.stackable.menu .active.item { - background-color: var(--color-background) !important; /* make pull requests top tabular menu item background match --color-background */ + background-color: var(--color-background) !important; /* make pull requests (sub) tabular menu item background match --color-background */ } .ui.top.tabular.menu .active.write.item { - background-color: var(--color-background) !important; /* make new release tabular menu item background match --color-background */ + background-color: var(--color-background) !important; /* make new releases (sub) tabular menu item background match --color-background */ } -.repository .diff-detail-box { - background: unset !important; /* make diff-detail-box background match --color-background */ -} +/* not needed: .ui.top.attached.tabular.menu .active.item */ +/* reconsidered, re-ordered: #repo-files-table tr:hover */ +/* not needed: .repository .diff-detail-box */ details { background-color: var(--color-secondary-light-3); /* make collapsible elements easier to distinguish from main body */ @@ -84,18 +82,12 @@ details { } .js-clone-url { - border: 1px solid var(--color-light-border) !important; /* use same border color as surrounding buttons */ + /* border: 1px solid var(--color-light-border) !important; */ /* reconsidered: use same border color as surrounding buttons */ border-right: none !important; /* border already there */ } -.color-preview { - display: unset !important; /* remove little color preview square */ - margin-left: unset !important; /* remove subsequently redundant margin */ -} - -.markup table tr:nth-child(2n) { - background-color: unset !important; /* remove background color of alternating table rows, since distracting if such rows contain codes */ -} +/* not needed: .color-preview */ +/* not needed: .markup table tr:nth-child(2n) */ .added-code { background: unset !important; /* remove highlight behind some codes */