Skip to content

Commit

Permalink
Update default.css
Browse files Browse the repository at this point in the history 
Using the photon colors and reviewing material design - Put this together.
  • Loading branch information
@jeremyperkin
jeremyperkin authored May 19, 2020
1 parent d67cf0f commit 1059691
Showing 1 changed file with 60 additions and 37 deletions.
97 changes: 60 additions & 37 deletions src/css/themes/default.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,52 +191,75 @@
https://material.io/design/color/dark-theme.html
*/
:root.dark {
--font-size: 12px;
--default-ink: #888888 !important; /*default font color for most of the text in uBo*/
--default-ink-a4: #8888880a !important;
--default-ink-a50: #88888888 !important; /*icon fill color for saveRules, revertRules and refresh*/
--default-surface: #15141a !important; /*deals with most white full screen backgrounds like Logger Ui, settings, about*/ /*used for checkmark color stoke*/
--default-surface-hover: #32313c !important; /*highlight color for popup app and dashboard tabs*/
--bg-1: hsla(0, 0%, 0%, 1) !important; /* color of the ribbon across screen where the search bar is in My Filters*/
--bg-1-border: hsla(0, 0%, 0%, 1) !important;
--light-gray-10: #f9f9fb;
--light-gray-10-a4: #f9f9fb0a;
--light-gray-10-a12: #f9f9fb1f;
--light-gray-10-a16: #f9f9fb29;
--light-gray-20: #f0f0f4;
--light-gray-30: #e0e0e6;
--light-gray-30-a50: #e0e0e680;
--light-gray-40: #cfcfd8;
--light-gray-50: #bfbfc9;
--light-gray-60: #afafba;
--light-gray-70: #9f9fad;
--light-gray-90: #80808f;

--dark-gray-30: #42414d;
--dark-gray-50: #32313c;
--dark-gray-80: #1c1b22;
--dark-gray-90: #15141a;

--red-60: #e22850;
--violet-40: #ab71ff;
--violet-70: #592acb;
--violet-80: #45278d;


--default-ink: var(--light-gray-60) !important; /*default font color for most of the text in uBo*/
--default-ink-a4: var(--light-gray-10-a4) !important;
--default-ink-a50: var(--light-gray-30-a50) !important; /*icon fill color for saveRules, revertRules and refresh*/
--default-surface: var(--dark-gray-90) !important; /*deals with most white full screen backgrounds like Logger Ui, settings, about*/ /*used for checkmark color stoke*/
--default-surface-hover: var(--dark-gray-50) !important; /*highlight color for popup app and dashboard tabs*/
--bg-1: hsla(250, 13%, 9%, 1) !important; /* color of the ribbon across screen where the search bar is in My Filters*/ /*var(--dark-gray-80)*/
--bg-1-border: hsla(250, 13%, 16%, 1) !important; /*used dark-gray-80 but increased from 9% to 13%) HEX#25232e */
--bg-overlay-50: #0008 !important;
--bg-code: hsla(0, 2%, 0%, 0.8) !important;
--fg-0-80: hsla(0, 0%, 53%, 0.8) !important;
--fg-0-70: hsla(0, 0%, 53%, 0.7) !important; /*uBo popup logger version lines for domains and requests*/
--fg-0-60: #4C566A !important; /*used for the number of filters in use in Filter Lists section | My Rules filter icon */
--fg-0-60: hsla(0, 0%, 53%, 0.6) !important; /*used for the number of filters in use in Filter Lists section | My Rules filter icon */
--fg-0-50: hsla(0, 0%, 53%, 0.5) !important; /*uBo popup logger version refresh button*/
--fg-0-40: #888888 !important; /*Extra Tools bar in uBo popup logger version*/
--fg-0-40: hsla(0, 0%, 53%, 0.4) !important; /*Extra Tools bar in uBo popup logger version*/
--fg-0-30: hsla(0, 0%, 53%, 0.3) !important;
--fg-0-20: hsla(0, 0%, 53%, 0.2) !important;
--link-ink: #8ad !important; /*web link color*/
--link-ink: var(--light-gray-90) !important; /*web link color*/
--fieldset-header-surface: transparent;
--fieldset-header-ink: #4C566A !important; /*used in settings for Privacy Default behavior, used in My Rules for Perma and Temp Rules Headers*/
--hor-separator-color: #000 !important;
--button-surface: #4C566A !important; /*affects Firewall container rows on uBo main panel*/
--button-ink: #5E81AC !important; /*color of text and icon inside button*/ /*applied to My Filters tab*/
--button-surface-hover: #32313c !important;
--button-active-surface: #d8DEE9 !important;
--button-important-surface: #4a4f59 !important;
--button-important-surface-hover: #454e5e !important;
--fieldset-header-ink: var(--light-gray-10-a4) !important; /*used in settings for Privacy Default behavior, used in My Rules for Perma and Temp Rules Headers*/
--hor-separator-color: var(--dark-gray-90) !important;
--button-surface: var(--dark-gray-30) !important; /*affects Firewall container rows on uBo main panel*/
--button-ink: var(--dark-gray-80) !important; /*color of text and icon inside button*/ /*applied to My Filters tab*/
--button-surface-hover: var(--light-gray-60) !important;
--button-active-surface: var(--light-gray-70) !important;
--button-important-surface: var(--dark-gray-30) !important;
--button-important-surface-hover: var(--light-gray-60) !important;
--button-disabled-filter: opacity(38%);
--button-disabled-surface: #4C566A !important;
--button-disabled-ink: #999999a0 !important;
--button-preferred-surface: #999999a0 !important;
--button-preferred-ink: #4C566A !important;
--button-disabled-surface: var(--dark-gray-50) !important;
--button-disabled-ink: var(--light-gray-30-a50) !important;
--button-preferred-surface: var(--dark-gray-50) !important;
--button-preferred-ink: var(--light-gray-70) !important;
--checkbox-size: calc(var(--font-size) + 2px);
--checkbox-ink: #80808f; /*non-checked box border color*/
--checkbox-checked-ink: #999999 !important; /*used for the checkmark - uses background-color and border-color*/
--checkbox-ink: var(--light-gray-90) ; /*non-checked box border color*/
--checkbox-checked-ink: var(--dark-gray-30) !important; /*used for the checkmark - uses background-color and border-color*/
/*--select-surface: Appears that this is not used anywhere that I can locate - if you find a spot enter a color value here */
--bg-transient-notice: #434c5E !important; /*color for the buttons for saveRules, revertRules and refresh - popup container*/
--bg-transient-notice: var(--dark-gray-50) !important; /*color for the buttons for saveRules, revertRules and refresh - popup container*/
--dashboard-bar-shadow: 0px 0px 0px 1px var(--default-ink-a4), 0px 1px 2px 0px #2200330a, 0px 2px 1px -1px #0730721f, 0px 1px 6px 0px #0e0d1a1f; /*line across screen under tabs*/
--dashboard-tab-ink: var(--default-ink);
--dashboard-tab-active-ink: #1E90FF !important;
--dashboard-tab-active-ink: var(--violet-40) !important;
--dashboard-tab-surface-hover: var(--default-surface-hover);
/* small i icons found throughout the dashboard and logger*/
--fg-icon-info-lvl-0-dimmed: #888 !important; /*found in My Rules/Setting tabs*/
--fg-icon-info-lvl-0: inherit;
--fg-icon-info-lvl-1-dimmed: hsla(240, 100%, 40%, 0.5); /*found in Filter Lists tab - default view*/
--fg-icon-info-lvl-1: hsla(240, 100%, 40%, 1); /* found in Filter Lists tab - hovered over*/
--fg-icon-info-lvl-1-dimmed: hsla(258, 57%, 35%, 1); /*found in Filter Lists tab - default view*/
--fg-icon-info-lvl-1: hsla(258, 66%, 48%, 1); /* found in Filter Lists tab - hovered over*/
--info-lvl-2-ink: var(--yellow-50);
--info-lvl-2-ink-hover: var(--yellow-60);
--fg-icon-info-lvl-3-dimmed: hsla(16, 100%, 50%, 0.5);/*found in Advanced Settings - default view*/
Expand All @@ -245,15 +268,15 @@
--fg-icon-info-lvl-4: hsla(0, 100%, 35%, 1);
--large-icon-info-lvl-2: hsla(41, 100%, 47%, 1);
/**************************************************************/
--bg-tooltip: #15141a !important;
--fg-tooltip: #888888a0 !important;
--bg-popup-cell-1: #4C566A !important; /*uBo popup window accesible from logger*/
--popup-power-ink: #5E81AC !important; /*uBo power icon - on color */
--popup-power-disabled-ink: #4C566A!important; /*uBo power icon - off color */
--popup-power-ink-hover: #3B4253 !important;
--bg-popup-cell-2: #4C566A !important; /*firewall container row line horizontal and vertical colours*/
--bg-tooltip: var(--dark-gray-50) !important;
--fg-tooltip: var(--light-gray-30) !important;
--bg-popup-cell-1: var(--dark-gray-50) !important; /*uBo popup window accesible from logger*/
--popup-power-ink: var(--violet-70) !important; /*uBo power icon - on color */
--popup-power-disabled-ink: var(--light-gray-60) !important; /*NOTE**** Please make it a FILL not a background...*/
--popup-power-ink-hover: var(--dark-gray-30) !important;
--bg-popup-cell-2: var(--dark-gray-30) !important; /*firewall container row line horizontal and vertical colours*/
--bg-popup-cell-label-filter: opacity(40%);
--fg-popup-cell-cname: #EBCB8B !important;
--fg-popup-cell-cname: var(--violet-80) !important;
--bg-popup-cell-allow: hsla(120, 40%, 75%, 1);
--bg-popup-cell-allow-own: hsla(120, 100%, 30%, 1);
--bg-popup-cell-noop: hsla(0, 0%, 75%, 1);
Expand Down

1 comment on commit 1059691

@gorhill
Copy link

@gorhill gorhill commented on 1059691 May 20, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is no need to redefine in the :root.dark { ... } section the named colors which are already defined at the top of the file. Feel free to add those which are missing though, from https://protocol.mozilla.org/fundamentals/color.html.

Please sign in to comment.