From 21bd17c19ce408d8d460cd7a741364a663d37ccd Mon Sep 17 00:00:00 2001 From: Ed Silkworth Date: Tue, 8 Aug 2023 22:19:01 -0700 Subject: [PATCH] simplified and refined --- public/css/theme-arc-red.css | 62 ++++++----------- public/css/theme-auto-red.css | 125 +++++++++++----------------------- public/css/theme-red.css | 63 ++++++----------- 3 files changed, 82 insertions(+), 168 deletions(-) diff --git a/public/css/theme-arc-red.css b/public/css/theme-arc-red.css index 0b334ae..b90c51f 100644 --- a/public/css/theme-arc-red.css +++ b/public/css/theme-arc-red.css @@ -9,19 +9,19 @@ :root { --is-dark-theme: true; - --color-primary: #e6051f !important; /* was #87ab63, greater contributions heatmap, primary email address label, Regenerate Scratch Token, and more (below) */ + --color-primary: #e6051f !important; /* was #87ab63, moderate 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; /* 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-3: #abc492 !important; /* reconsidered */ + --color-primary-dark-4: #a10315 !important; /* was #b7cda1, red buttons and greatest contributions heatmap */ --color-primary-dark-5: #cfddc1; --color-primary-dark-6: #780310 !important; /* was #e7eee0, red buttons hover */ --color-primary-dark-7: #f8faf6; --color-primary-light-1: #eb142d !important; /* was #7a9e55, selection color */ - --color-primary-light-2: #e82138 !important; /* was #6c8c4c, greater contributions heatmap */ + --color-primary-light-2: #e82138 !important; /* was #6c8c4c, fewer contributions heatmap */ --color-primary-light-3: #5f7b42; - --color-primary-light-4: #f04559 !important; /* was #516939, greater contributions heatmap */ + --color-primary-light-4: #f04559 !important; /* was #516939, fewest contributions heatmap */ --color-primary-light-5: #364626; --color-primary-light-6: #1b2313; --color-primary-light-7: #080b06; @@ -59,8 +59,8 @@ --color-secondary-alpha-30: #5257674b; --color-secondary-alpha-40: #52576766; --color-secondary-alpha-50: #52576780; - --color-secondary-alpha-60: #52576799; /* new fewer contributions heatmap */ - --color-secondary-alpha-70: #525767b3; /* old fewer contributions heatmap */ + --color-secondary-alpha-60: #52576799; /* new no contributions heatmap */ + --color-secondary-alpha-70: #525767b3; /* old no contributions heatmap */ --color-secondary-alpha-80: #525767cc; --color-secondary-alpha-90: #525767e1; --color-secondary-button: var(--color-secondary-dark-4); @@ -261,7 +261,7 @@ color: var(--color-primary) !important; /* icons' color on home page */ } -span.green .svg { +.text.green { color: var(--color-primary) !important; /* ssh/gpg key icon color */ } @@ -269,15 +269,16 @@ span.green .svg { background-color: var(--color-primary) !important; /* "green" button color (e.g., Sign In, Verify), primary buttons use --color-primary */ } +.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 { background-color: var(--color-primary-dark-4) !important; /* red button color (e.g., Confirm Deletion, Remove) */ /* 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 */ } @@ -288,23 +289,11 @@ span.green .svg { /* 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.shadow-body .active.item { - background: unset !important; /* do not color secondary tabular menu item (Repository, Collaborators, Branches, etc.) */ -} - -/* not needed: .ui.secondary.pointing.tabular.top.attached.borderless.menu.stackable.new-menu.navbar .active.item */ - -.ui.top.attached.pull.tabular.stackable.menu .active.item { - background-color: rgb(55, 59, 70) !important; /* make pull requests (upper-sub) tabular menu item background match --color-background (Conversation, Commits, Files Changed), using rgb() to remove bottom border */ -} - +/* not needed: .ui.secondary.pointing.tabular.top.attached.borderless.menu.stackable.new-menu.navbar.shadow-body .active.item */ +/* reconsidered: .ui.secondary.pointing.tabular.top.attached.borderless.menu.stackable.new-menu.navbar .active.item */ +/* reconsidered: .ui.top.attached.pull.tabular.stackable.menu .active.item */ /* not needed: .ui.top.tabular.menu .active.write.item */ - -.ui.top.attached.tabular.menu .active.item { - background-color: var(--color-box-body) !important; /* make subscriptions tabular menu item background match --color-box-body (Subscriptions, Watching) */ -} - +/* reconsidered: .ui.top.attached.tabular.menu .active.item */ /* reconsidered, re-ordered: #repo-files-table tr:hover */ /* not needed: .repository .diff-detail-box */ @@ -314,21 +303,10 @@ details { padding: .2em .4em; /* same as code blocks */ } -.js-clone-url { - /* border: 1px solid var(--color-light-border) !important; */ /* reconsidered: use same border color as surrounding buttons */ - border-right: none !important; /* border already there */ -} - +/* reconsidered: .js-clone-url */ /* not needed: .color-preview */ /* not needed: .markup table tr:nth-child(2n) */ - -.added-code { - background: unset !important; /* remove highlight behind some codes */ -} - -.ui.table>thead>tr>th { - border-inline: 1px solid var(--color-box-header) !important; /* hide center border more between table header columns */ -} - +/* reconsidered: .added-code */ +/* not needed: .ui.table>thead>tr>th */ /* 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 cf821cb..1869362 100644 --- a/public/css/theme-auto-red.css +++ b/public/css/theme-auto-red.css @@ -2,22 +2,20 @@ @media (prefers-color-scheme: light) { :root { - --color-primary: #cd041c !important; /* greater contributions heatmap, primary email address label, Regenerate Scratch Token, and more (below) */ + --color-primary: #cd041c !important; /* moderate contributions heatmap, primary email address label, Regenerate Scratch Token, and more (below) */ --color-primary-dark-2: #ab0316 !important; /* greater contributions heatmap and more (below) */ - --color-primary-dark-3: #960314 !important; /* dropdown actions button */ - --color-primary-dark-4: #870312 !important; /* red buttons and greater contributions heatmap */ + /* reconsidered: --color-primary-dark-3 */ + --color-primary-dark-4: #870312 !important; /* red buttons and greatest contributions heatmap */ --color-primary-dark-6: #5f020d !important; /* red buttons hover */ --color-primary-light-1: #d1152b !important; /* selection color */ - --color-primary-light-2: #ce2236 !important; /* greater contributions heatmap */ - --color-primary-light-4: #d54455 !important; /* greater contributions heatmap */ - --color-background: #fcfcfc !important; /* make some elements pop out more (below) */ - /* fewer contributions heatmap is okay */ + --color-primary-light-2: #ce2236 !important; /* fewer contributions heatmap */ + --color-primary-light-4: #d54455 !important; /* fewest contributions heatmap */ + /* reconsidered: --color-background */ + /* no contributions heatmap is okay */ --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) */ - } + /* reconsidered: .full.height */ .home a { color: var(--color-primary) !important; /* link and link hover color on home page, other links use --color-primary */ @@ -27,7 +25,7 @@ color: var(--color-primary) !important; /* icons' color on home page */ } - span.green .svg { + .text.green { color: var(--color-primary) !important; /* ssh/gpg key icon color */ } @@ -35,15 +33,16 @@ background-color: var(--color-primary) !important; /* "green" button color (e.g., Sign In, Verify), primary buttons use --color-primary */ } + .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 { background-color: var(--color-primary-dark-4) !important; /* red button color (e.g., Confirm Deletion, Remove) */ /* 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 */ } @@ -52,26 +51,13 @@ background-color: unset !important; /* reset colors in danger zone */ } + /* not needed: .ui.basic.red.button:hover */ /* reconsidered: .ui.active.button:hover, .ui.active.button:active */ - - .ui.tabular.menu.navbar .active.item { - background-color: var(--color-background) !important; /* make repo tabular menu item background match --color-background (Code, Issues, Pull Requests, etc.) */ - } - + /* reconsidered: .ui.tabular.menu.navbar */ /* not needed: .ui.secondary.pointing.tabular.top.attached.borderless.menu.stackable.new-menu.navbar.shadow-body .active.item */ - - .ui.secondary.pointing.tabular.top.attached.borderless.menu.stackable.new-menu.navbar .active.item { - background: unset !important; /* do not color secondary tabular menu item, related to --color-background (Repositories, Users, Organizations; Profile, Account, Appearance, etc.) */ - } - - .ui.top.attached.pull.tabular.stackable.menu .active.item { - background-color: var(--color-background) !important; /* make pull requests (upper-sub) tabular menu item background match --color-background (Conversation, Commits, Files Changed) */ - } - - .ui.top.tabular.menu .active.write.item { - background-color: var(--color-background) !important; /* make issues, pull requests and new releases (lower-sub) tabular menu item background match --color-background (Write, Preview) */ - } - + /* not needed: .ui.secondary.pointing.tabular.top.attached.borderless.menu.stackable.new-menu.navbar .active.item */ + /* reconsidered: .ui.top.attached.pull.tabular.stackable.menu .active.item */ + /* reconsidered: .ui.top.tabular.menu .active.write.item */ /* not needed: .ui.top.attached.tabular.menu .active.item */ /* reconsidered, re-ordered: #repo-files-table tr:hover */ /* not needed: .repository .diff-detail-box */ @@ -82,17 +68,10 @@ padding: .2em .4em; /* same as code blocks */ } - .js-clone-url { - /* border: 1px solid var(--color-light-border) !important; */ /* reconsidered: use same border color as surrounding buttons */ - border-right: none !important; /* border already there */ - } - + /* reconsidered: .js-clone-url */ /* not needed: .color-preview */ /* not needed: .markup table tr:nth-child(2n) */ - - .added-code { - background: unset !important; /* remove highlight behind some codes */ - } + /* reconsidered: .added-code */ } @media (prefers-color-scheme: dark) { @@ -107,19 +86,19 @@ :root { --is-dark-theme: true; - --color-primary: #e6051f !important; /* was #87ab63, greater contributions heatmap, primary email address label, Regenerate Scratch Token, and more (below) */ + --color-primary: #e6051f !important; /* was #87ab63, moderate 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; /* 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-3: #abc492 !important; /* reconsidered */ + --color-primary-dark-4: #a10315 !important; /* was #b7cda1, red buttons and greatest contributions heatmap */ --color-primary-dark-5: #cfddc1; --color-primary-dark-6: #780310 !important; /* was #e7eee0, red buttons hover */ --color-primary-dark-7: #f8faf6; --color-primary-light-1: #eb142d !important; /* was #7a9e55, selection color */ - --color-primary-light-2: #e82138 !important; /* was #6c8c4c, greater contributions heatmap */ + --color-primary-light-2: #e82138 !important; /* was #6c8c4c, fewer contributions heatmap */ --color-primary-light-3: #5f7b42; - --color-primary-light-4: #f04559 !important; /* was #516939, greater contributions heatmap */ + --color-primary-light-4: #f04559 !important; /* was #516939, fewest contributions heatmap */ --color-primary-light-5: #364626; --color-primary-light-6: #1b2313; --color-primary-light-7: #080b06; @@ -157,8 +136,8 @@ --color-secondary-alpha-30: #5257674b; --color-secondary-alpha-40: #52576766; --color-secondary-alpha-50: #52576780; - --color-secondary-alpha-60: #52576799; /* new fewer contributions heatmap */ - --color-secondary-alpha-70: #525767b3; /* old fewer contributions heatmap */ + --color-secondary-alpha-60: #52576799; /* new no contributions heatmap */ + --color-secondary-alpha-70: #525767b3; /* old no contributions heatmap */ --color-secondary-alpha-80: #525767cc; --color-secondary-alpha-90: #525767e1; --color-secondary-button: var(--color-secondary-dark-4); @@ -359,7 +338,7 @@ color: var(--color-primary) !important; /* icons' color on home page */ } - span.green .svg { + .text.green { color: var(--color-primary) !important; /* ssh/gpg key icon color */ } @@ -367,15 +346,16 @@ background-color: var(--color-primary) !important; /* "green" button color (e.g., Sign In, Verify), primary buttons use --color-primary */ } + .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 { background-color: var(--color-primary-dark-4) !important; /* red button color (e.g., Confirm Deletion, Remove) */ /* 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 */ } @@ -386,23 +366,11 @@ /* 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.shadow-body .active.item { - background: unset !important; /* do not color secondary tabular menu item (Repository, Collaborators, Branches, etc.) */ - } - - /* not needed: .ui.secondary.pointing.tabular.top.attached.borderless.menu.stackable.new-menu.navbar .active.item */ - - .ui.top.attached.pull.tabular.stackable.menu .active.item { - background-color: rgb(55, 59, 70) !important; /* make pull requests (upper-sub) tabular menu item background match --color-background (Conversation, Commits, Files Changed), using rgb() to remove bottom border */ - } - + /* not needed: .ui.secondary.pointing.tabular.top.attached.borderless.menu.stackable.new-menu.navbar.shadow-body .active.item */ + /* reconsidered: .ui.secondary.pointing.tabular.top.attached.borderless.menu.stackable.new-menu.navbar .active.item */ + /* reconsidered: .ui.top.attached.pull.tabular.stackable.menu .active.item */ /* not needed: .ui.top.tabular.menu .active.write.item */ - - .ui.top.attached.tabular.menu .active.item { - background-color: var(--color-box-body) !important; /* make subscriptions tabular menu item background match --color-box-body (Subscriptions, Watching) */ - } - + /* reconsidered: .ui.top.attached.tabular.menu .active.item */ /* reconsidered, re-ordered: #repo-files-table tr:hover */ /* not needed: .repository .diff-detail-box */ @@ -412,22 +380,11 @@ padding: .2em .4em; /* same as code blocks */ } - .js-clone-url { - /* border: 1px solid var(--color-light-border) !important; */ /* reconsidered: use same border color as surrounding buttons */ - border-right: none !important; /* border already there */ - } - + /* reconsidered: .js-clone-url */ /* not needed: .color-preview */ /* not needed: .markup table tr:nth-child(2n) */ - - .added-code { - background: unset !important; /* remove highlight behind some codes */ - } - - .ui.table>thead>tr>th { - border-inline: 1px solid var(--color-box-header) !important; /* hide center border more between table header columns */ - } - + /* reconsidered: .added-code */ + /* not needed: .ui.table>thead>tr>th */ /* 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 685c920..033826b 100644 --- a/public/css/theme-red.css +++ b/public/css/theme-red.css @@ -1,20 +1,18 @@ :root { - --color-primary: #cd041c !important; /* greater contributions heatmap, primary email address label, Regenerate Scratch Token, and more (below) */ + --color-primary: #cd041c !important; /* moderate contributions heatmap, primary email address label, Regenerate Scratch Token, and more (below) */ --color-primary-dark-2: #ab0316 !important; /* greater contributions heatmap and more (below) */ - --color-primary-dark-3: #960314 !important; /* dropdown actions button */ - --color-primary-dark-4: #870312 !important; /* red buttons and greater contributions heatmap */ + /* reconsidered: --color-primary-dark-3 */ + --color-primary-dark-4: #870312 !important; /* red buttons and greatest contributions heatmap */ --color-primary-dark-6: #5f020d !important; /* red buttons hover */ --color-primary-light-1: #d1152b !important; /* selection color */ - --color-primary-light-2: #ce2236 !important; /* greater contributions heatmap */ - --color-primary-light-4: #d54455 !important; /* greater contributions heatmap */ - --color-background: #fcfcfc !important; /* make some elements pop out more (below) */ - /* fewer contributions heatmap is okay */ + --color-primary-light-2: #ce2236 !important; /* fewer contributions heatmap */ + --color-primary-light-4: #d54455 !important; /* fewest contributions heatmap */ + /* reconsidered: --color-background */ + /* no contributions heatmap is okay */ --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) */ -} +/* reconsidered: .full.height */ .home a { color: var(--color-primary) !important; /* link and link hover color on home page, other links use --color-primary */ @@ -24,7 +22,7 @@ color: var(--color-primary) !important; /* icons' color on home page */ } -span.green .svg { +.text.green { color: var(--color-primary) !important; /* ssh/gpg key icon color */ } @@ -32,15 +30,16 @@ span.green .svg { background-color: var(--color-primary) !important; /* "green" button color (e.g., Sign In, Verify), primary buttons use --color-primary */ } +.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 { background-color: var(--color-primary-dark-4) !important; /* red button color (e.g., Confirm Deletion, Remove) */ /* 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 */ } @@ -49,26 +48,13 @@ span.green .svg { background-color: unset !important; /* reset colors in danger zone */ } +/* not needed: .ui.basic.red.button:hover */ /* reconsidered: .ui.active.button:hover, .ui.active.button:active */ - -.ui.tabular.menu.navbar .active.item { - background-color: var(--color-background) !important; /* make repo tabular menu item background match --color-background (Code, Issues, Pull Requests, etc.) */ -} - +/* reconsidered: .ui.tabular.menu.navbar */ /* not needed: .ui.secondary.pointing.tabular.top.attached.borderless.menu.stackable.new-menu.navbar.shadow-body .active.item */ - -.ui.secondary.pointing.tabular.top.attached.borderless.menu.stackable.new-menu.navbar .active.item { - background: unset !important; /* do not color secondary tabular menu item, related to --color-background (Repositories, Users, Organizations; Profile, Account, Appearance, etc.) */ -} - -.ui.top.attached.pull.tabular.stackable.menu .active.item { - background-color: var(--color-background) !important; /* make pull requests (upper-sub) tabular menu item background match --color-background (Conversation, Commits, Files Changed) */ -} - -.ui.top.tabular.menu .active.write.item { - background-color: var(--color-background) !important; /* make issues, pull requests and new releases (lower-sub) tabular menu item background match --color-background (Write, Preview) */ -} - +/* not needed: .ui.secondary.pointing.tabular.top.attached.borderless.menu.stackable.new-menu.navbar .active.item */ +/* reconsidered: .ui.top.attached.pull.tabular.stackable.menu .active.item */ +/* reconsidered: .ui.top.tabular.menu .active.write.item */ /* not needed: .ui.top.attached.tabular.menu .active.item */ /* reconsidered, re-ordered: #repo-files-table tr:hover */ /* not needed: .repository .diff-detail-box */ @@ -79,14 +65,7 @@ details { padding: .2em .4em; /* same as code blocks */ } -.js-clone-url { - /* border: 1px solid var(--color-light-border) !important; */ /* reconsidered: use same border color as surrounding buttons */ - border-right: none !important; /* border already there */ -} - +/* reconsidered: .js-clone-url */ /* not needed: .color-preview */ /* not needed: .markup table tr:nth-child(2n) */ - -.added-code { - background: unset !important; /* remove highlight behind some codes */ -} \ No newline at end of file +/* reconsidered: .added-code */ \ No newline at end of file