From 764d4049b6a4f4737babb0f80d7269a92442c911 Mon Sep 17 00:00:00 2001 From: Ed Silkworth Date: Thu, 17 Nov 2022 00:35:02 -0800 Subject: [PATCH] adopt colors and codes from fork, add/edit others --- public/css/theme-red.css | 408 +++++---------------------------------- 1 file changed, 46 insertions(+), 362 deletions(-) diff --git a/public/css/theme-red.css b/public/css/theme-red.css index eac22e9..8aeb7cd 100644 --- a/public/css/theme-red.css +++ b/public/css/theme-red.css @@ -1,391 +1,75 @@ -/* * { - scrollbar-width: thin; - scrollbar-color: #cb1b30 hsla(353, 77%, 45%, .1) -} - -::-webkit-scrollbar { - -webkit-appearance: none!important; - width: 10px!important; - height: 10px!important -} - -::-webkit-scrollbar-track { - border-radius: 0!important; - background: hsla(353, 77%, 45%, .1)!important -} - -::-webkit-scrollbar-thumb { - cursor: pointer!important; - border-radius: 1px!important; - -webkit-transition: color .2s ease!important; - transition: color .2s ease!important -} - -::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb:window-inactive { - background: #cb1b30!important -} - -::-webkit-scrollbar-thumb:hover { - background: #cb1b30!important -} */ +/* not changing scrollbar */ :root { - --color-primary: #cd041c; - /* --color-primary-dark-1: #ba0318; */ - --color-primary-dark-2: #ab0316; - --color-primary-dark-3: #960314; - --color-primary-dark-4: #870312; - /* --color-primary-dark-5: #75020f; */ - --color-primary-dark-6: #5f020d; - /* --color-primary-dark-7: #460109; */ - /* --color-primary-light-1: #d1152b; */ - --color-primary-light-2: #ce2236; - /* --color-primary-light-3: #d02f42; */ - --color-primary-light-4: #d54455; - /* --color-primary-light-5: #dd5565; */ - /* --color-primary-light-6: #e16674; */ - /* --color-primary-light-7: #ee7c89; */ - /* --color-primary-alpha-10: rgba(205,4,28,0.09803921568627451); */ - /* --color-primary-alpha-20: rgba(205,4,28,0.2); */ - /* --color-primary-alpha-30: rgba(205,4,28,0.29411764705882354); */ - /* --color-primary-alpha-40: rgba(205,4,28,0.4); */ - /* --color-primary-alpha-50: rgba(205,4,28,0.5019607843137255); */ - /* --color-primary-alpha-60: rgba(205,4,28,0.6); */ - /* --color-primary-alpha-70: rgba(205,4,28,0.7019607843137254); */ - /* --color-primary-alpha-80: rgba(205,4,28,0.8); */ - /* --color-primary-alpha-90: rgba(205,4,28,0.8823529411764706); */ - --color-background: #fcfcfc; - --color-secondary-alpha-70: #dedede4d; + --color-primary: #cd041c!important; /* greater 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 */ + --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) */ + --color-secondary-alpha-70: #dedede4d!important; /* fewer contributions heatmap */ } -/* body, footer { - background: #e2e2e2 +.full.height { + 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) */ } -footer { - border-top: 1px solid #e53449 -} - -.ui.container, .explore .navbar { - background: #e2e2e2 -} +/* not changing header or footer */ .home a { - color: #cb1b30 + color: var(--color-primary)!important; /* link and link hover color on home page, other links use --color-primary */ } -.home .hero .svg { - color: #cb1b30 +.home .svg { + color: var(--color-primary)!important; /* icons' color on home page */ } -a { - color: #cb1b30; - text-decoration: none +span.green .svg { + color: var(--color-primary)!important; /* ssh/gpg key icon color */ } -a:hover { - color: #b5172a; - text-decoration: none +/* not changing dividers */ + +.ui.green.button { + background-color: var(--color-primary)!important; /* "green" button color (e.g., Sign In, Verify), primary buttons use --color-primary */ } -.repository .header-wrapper, .header-wrapper { - background: #e2e2e2 +.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) */ } -.ui.tabular.menu .active.item { - border-color: #e53449; - background: #e2e2e2 +.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.compact.left.small.menu .active.item { - -webkit-box-shadow: inset 0 0 0 1px #e53449!important; - box-shadow: inset 0 0 0 1px #e53449!important; - background: #efefef +.ui.red.button:hover { + background-color: var(--color-primary-dark-6)!important; /* red button hover color */ } -.ui.compact.left.small.menu .item { - background: #efefef +.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.divider:not(.vertical):not(.horizontal) { - border-top: 1px solid #e53449 +/* not changing input elements */ +/* changing heatmap using :root */ +/* not changing activity bar graph */ +/* not changing labels */ + +.ui.tabular.stackable.menu.navbar .active.item { + background-color: var(--color-background)!important; /* make tabular menu item background match --color-background */ } -.ui.blue.button, .ui.blue.buttons .button, .ui.green.button, .ui.green.buttons .button { - background-color: #cb1b30; - color: #fff; - text-shadow: none; - background-image: none +.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 */ } -.ui.blue.button:hover, .ui.blue.buttons .button:hover, .ui.green.button:hover, .ui.green.buttons .button:hover { - background-color: #b5172a -} +/* file folders color use --color-primary */ +/* not changing breadcrumbs */ -.ui.basic.blue.button, .ui.basic.blue.buttons .button, .ui.blue.basic.button, .ui.blue.basic.buttons .button { - -webkit-box-shadow: inset 0 0 0 1px #e53449!important; - box-shadow: inset 0 0 0 1px #e53449!important; - color: #cb1b30!important; -} - -.following.bar.light { - border-bottom: 1px solid #cb1b30 -} - -.ui.form input:not([type]), .ui.form input[type=date], .ui.form input[type=datetime-local], .ui.form input[type=email], .ui.form input[type=file], .ui.form input[type=number], .ui.form input[type=password], .ui.form input[type=search], .ui.form input[type=tel], .ui.form input[type=text], .ui.form input[type=time], .ui.form input[type=url] { - font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif; - margin: 0; - outline: 0; - -webkit-appearance: none; - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); - line-height: 1.21428571em; - padding: .67857143em 1em; - font-size: 1em; - background: #efefef; - border: 1px solid rgba(119, 101, 227, .15); - color: rgb(0, 0, 0); - border-radius: .28571429rem; - -webkit-box-shadow: 0 0 0 0 transparent inset; - box-shadow: 0 0 0 0 transparent inset; - -webkit-transition: color .1s ease, border-color .1s ease; - transition: color .1s ease, border-color .1s ease -} - -.ui.form input:not([type]):focus, .ui.form input[type=date]:focus, .ui.form input[type=datetime-local]:focus, .ui.form input[type=email]:focus, .ui.form input[type=file]:focus, .ui.form input[type=number]:focus, .ui.form input[type=password]:focus, .ui.form input[type=search]:focus, .ui.form input[type=tel]:focus, .ui.form input[type=text]:focus, .ui.form input[type=time]:focus, .ui.form input[type=url]:focus { - color: rgba(0, 0, 0, .95); - border-color: #cb1b30; - border-radius: .28571429rem; - background: #efefef; - -webkit-box-shadow: 0 0 0 0 rgba(38, 34, 34, .35) inset; - box-shadow: 0 0 0 0 rgba(38, 34, 34, .35) inset -} - -.ui.input.focus>input, .ui.input>input:focus { - border-color: #cb1b30; - background: #efefef; - color: rgba(0, 0, 0, .8); - -webkit-box-shadow: none; - box-shadow: none -} */ - -/*.heatmap-color-0{ - background-color:#703838 -} -.heatmap-color-1{ - background-color:#8e3e3e -} -.heatmap-color-2{ - background-color:#a93d3d -} -.heatmap-color-3{ - background-color:#c63939 -} -.heatmap-color-4{ - background-color:#e33535 -} -.activity-bar-graph,.heatmap-color-5{ - background-color:#fd2b2b -}*/ - -/* .heatmap-color-0{ - background-color:#e6e0e0 -} - -.heatmap-color-1{ - background-color:#e3baba -} - -.heatmap-color-2{ - background-color:#dd8888 -} - -.heatmap-color-3{ - background-color:#df5d5d -} - -.heatmap-color-4{ - background-color:#e13737 -} - -.activity-bar-graph,.heatmap-color-5{ - background-color:#fd2b2b -} - -.ui.blue.small.label, .ui.blue.labels .label, .ui.ui.ui.blue.label { - background-color: #cb1b30; - border-color: #cb1b30 -} - -.ui.green.labels .label, .ui.ui.ui.green.label { - background-color: #b5172a; - border-color: #b5172a; - color: #fff; -} - -.explore .navbar, .ui.menu.new-menu { - background: #e2e2e2!important -} - -.ui.segment, .repo-files-table { - background: #efefef -} - -.ui.top.tabular.menu { - border-bottom: 1px solid #cb1b30 -} - -.ui.top.tabular.menu .active.item { - background: #efefef -} - -.ui.top.attached.pull.tabular.stackable.menu .active.item { - background: #e2e2e2 -} - -.ui.two.item.tabable.menu .item.active { - -webkit-box-shadow: inset 0 0 0 1px #e53449!important; - box-shadow: inset 0 0 0 1px #e53449!important -} - -.ui .warning.header { - background: #ff6a00!important -} - -.ui .warning.header, .ui .warning.segment { - border-color: #ff6a00 -} - -.ui.action.input:not([class*="left action"])>input:focus { - border-right-color: #cb1b30 -} - -.ui.icon.button, .ui.icon.buttons .button { - -webkit-box-shadow: 0 0 0 1px rgba(34,36,38,.15) inset; - box-shadow: 0 0 0 1px rgba(34,36,38,.15) inset -} - -.ui.secondary.pointing.menu .active.item { - background: #e2e2e2; - color: rgba(0,0,0,.95); - border-top-width: 1px; - border-bottom-width: 0; - border-color: #e53449; - font-weight: 700; - margin-bottom: -1px; - -webkit-box-shadow: inset 1px 1px #e53449, inset -1px 0 #e53449; - box-shadow: inset 1px 1px #e53449, inset -1px 0 #e53449; - border-radius: .28571429rem .28571429rem 0 0; - border-bottom: none!important; - transition: font .4s ease; - -webkit-transition: font .4s ease -} - -.feeds .list ul li.private { - background-color: #d4d4d4 -} - -.repository.file.list #repo-files-table tbody .svg.octicon-file-directory, .repository.file.list #repo-files-table tbody .svg.octicon-file-submodule, .repository.file.list #repo-files-table tbody .svg.octicon-file-symlink-directory { - color: #cb1b30 -} - -#issue_title { - background: #f7f7f7 -} - -.CodeMirror { - background: #f7f7f7 -} - -.ui.form .dropzone { - border: 3px dashed #cb1b30; - box-shadow: none!important; - padding: 0; - min-height: 5rem; - border-radius: 0; - background: #f7f7f7 -} - -.ui.form .dropzone:hover { - border: 3px dashed var(--color-primary-dark-2); - box-shadow: none!important; - padding: 0; - min-height: 5rem; - border-radius: 10px -} - -.ui.secondary.tiny.pointing.menu .active.item { - background: #e0e1e2; - color: rgba(0,0,0,.95); - border-top-width: 1px; - border-bottom-width: 0; - font-weight: 700; - margin-bottom: -2px; - -webkit-box-shadow: none; - box-shadow: none; - border-radius: .28571429rem .28571429rem 0 0; - border-bottom: none!important -} - -.commit-form .field input, .commit-form .field textarea { - background: #f7f7f7!important -} - -.ui.form textarea:focus, .ui.input textarea:focus { - color: rgba(0, 0, 0, .95); - border-color: #cb1b30; - border-radius: .28571429rem; - background: #f7f7f7; - -webkit-box-shadow: 0 0 0 0 rgba(38, 34, 34, .35) inset; - box-shadow: 0 0 0 0 rgba(38, 34, 34, .35) inset -} - -.ui.eleven.wide.column .ui.secondary.pointing.menu { - border-bottom: 2px solid #cb1b30 -} - -.ui.eleven.wide.column .ui.secondary.pointing.menu .active.item { - background: #e2e2e2; - color: rgba(0,0,0,.95); - border-top-width: 1px; - border-bottom-width: 0; - border-color: #e53449; - font-weight: 700; - margin-bottom: -2px; - -webkit-box-shadow: inset 1px 1px #cb1b30, inset -1px 0 #cb1b30; - box-shadow: inset 2px 2px #cb1b30, inset -2px 0 #cb1b30; - border-radius: .28571429rem .28571429rem 0 0; - border-bottom: none!important; - transition: font .4s ease; - -webkit-transition: font .4s ease -} - -.ui.breadcrumb a { - color: #c44040 -} - -.ui.breadcrumb a:hover { - color: #a43737 -} - -.ui.secondary.pointing.menu .active.item:hover { - background-color: #e2e2e2 -} - -.ui.secondary.pointing.menu .dropdown.item:hover, .ui.secondary.pointing.menu .link.item:hover, .ui.secondary.pointing.menu a.item:hover { - background-color: transparent; - color: rgba(0,0,0,.95); - font-weight: bold; - transition: font .4s ease; - -webkit-transition: font .4s ease -} - -.ui.tabular.menu .active.item, .ui.tabular.menu .active.item:hover { - background: #e2e2e2; - border-color: var(--color-primary); - color: var(--color-text); - margin-top: 1px -} - -.ui.segment .ui.tabular.menu .active.item, .ui.segment .ui.tabular.menu .active.item:hover { - background: #efefef -} */ \ No newline at end of file +.ui.vertical.menu { + background: unset!important; /* make issues, pull requests and milestones menus background match --color-background */ +} \ No newline at end of file