mirror/webgui
1
0
Fork 0
mirror of https://github.com/unraid/webgui.git synced 2026-04-24 19:29:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

refactor: theme specific colors var usage

Browse Source
This commit is contained in:
Zack Spear
2024-07-02 14:58:30 -07:00
parent fde4895e54
commit 6f426242ad
4 changed files with 68 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
emhttp/plugins/dynamix/styles/default-azure.css
+41 -27
View File
@@ -1,21 +1,35 @@
:root {
--gray-400: #9794a0;
--gray-400: #9794a0; /* Overwrites value in default-color */
--text-color: #606e7f;
--blockquote-text-color: var(--gray-800);
/* Theme specific vars */
--theme-azure--cyan-400: #606e7f;
--theme-azure--cyan-700: #004e86;
--theme-azure--gray-100: #f3f0f4;
--theme-azure--gray-150: #edeaef;
--theme-azure--gray-200: #d7dbdd;
--theme-azure--gray-300: #cacfd2;
--theme-azure--gray-800: #4f4f4f;
--theme-azure-grayish-orange: #9f9180;
/* /Theme specific vars */
/* Begin setting vars used in default-base */
--text-color: var(--theme-azure--cyan-400);
--blockquote-text-color: var(--gray-800);
--alt-text-color: var(--gray-400);
--disabled-text-color: var(--gray-500);
--inverse-text-color: var(--gray-900);
--link-text-color: var(--blue-800);
--disabled-text-color: var(--gray-500);
--inverse-text-color: var(--gray-900);
--link-text-color: var(--blue-800);
--background-color: var(--gray-150); /* Originally #e4e2e4 */
--alt-background-color: var(--gray-700); /* Originally #383a34 */
--opac-background-color: var(--gray-895);
--mild-background-color: #edeaef;
--usage-bar-background-color: #606e7f;
--usage-disk-background-color: #eceaec;
--mild-background-color: var(--theme-azure--gray-150);
--usage-bar-background-color: var(--theme-azure--cyan-400);
--usage-disk-background-color: var(--theme-azure--gray-150);
--inverse-background-color: var(--gray-100);
--radio-background-color: var(--gray-700);
--radio-background-color: var(--gray-700);
--disabled-input-background-color: var(--gray-300);
--table-background-color: transparent;
--table-header-background-color: var(--gray-150);
@@ -23,27 +37,27 @@
--usage-bar-used-background-color: var(--gray-400);
--hover-table-row-background-color: var(--black-opacity-05);
--dashboard-background-color: #d7dbdd;
--dashboard-background-color: var(--theme-azure--gray-200);
--dashboard-title-action-color: var(--black-opacity-30);
--dashboard-icon-color: var(--mild-background-color);
--border-color: #606e7f;
--alt-border-color: #004e86;
--disabled-border-color: var(--gray-500);
--input-border-color: var(--gray-200);
--disabled-input-border-color: var(--gray-500);
--border-color: var(--theme-azure--cyan-400);
--alt-border-color: var(--theme-azure--cyan-700);
--disabled-border-color: var(--gray-500);
--input-border-color: var(--gray-200);
--disabled-input-border-color: var(--gray-500);
--inverse-border-color: var(--gray-600); /* Originally #42453e */
--table-border-color: #606e7f;
--table-alt-border-color: #f3f0f4;
--dashboard-border-color: #cacfd2;
--table-border-color: var(--theme-azure--cyan-400);
--table-alt-border-color: var(--theme-azure--gray-100);
--dashboard-border-color: var(--theme-azure--gray-300);
--footer-text: var(--gray-500);
--small-shadow: 0 0 0 0 transparent;
--hr-color: #606e7f;
--hr-color: var(--theme-azure--cyan-400);
--checkbox-color: var(--gray-800);
--checkbox-hover-color: var(--gray-600);
--checkbox-color: var(--gray-800);
--checkbox-hover-color: var(--gray-600);
--brand-orange: var(--orange-500);
--brand-red: var(--red-800);
@@ -58,15 +72,15 @@
--bg-opacity-10: var(--black-opacity-10);
--bg-opacity-30: var(--black-opacity-30);
--button-border: #9f9180;
--button-text-color: #9f9180;
--button-border: var(--theme-azure-grayish-orange);
--button-text-color: var(--theme-azure-grayish-orange);
--button-background: var(--mild-background-color);
--button-background-size: cover;
--hover-button-border: #0072c6;
--hover-button-text-color: #4f4f4f;
--hover-button-border: var(--blue-800); /* Condensed from: #0072c6 */
--hover-button-text-color: var(--theme-azure--gray-800);
--hover-button-background: var(--mild-background-color);
--input-border-color: #0072c6;
--input-border-color: var(--blue-800); /* Condensed from: #0072c6 */
--input-bg-color: var(--mild-background-color);
}
emhttp/plugins/dynamix/styles/default-black.css
+6 -1
View File
@@ -1,4 +1,9 @@
:root {
/* Theme specific vars */
--theme-black--mild-gray-700: #262626;
/* /Theme specific vars */
/* Begin setting vars used in default-base */
--text-color: var(--gray-100);
--blockquote-text-color: var(--gray-800);
--alt-text-color: var(--gray-500);
@@ -8,7 +13,7 @@
--background-color: var(--gray-900);
--opac-background-color: var(--gray-895);
--mild-background-color: #262626; /* var(--gray-700); */
--mild-background-color: var(--theme-black--mild-gray-700);
--usage-bar-background-color: var(--gray-600);
--usage-bar-used-background-color: var(--gray-500);
--usage-disk-background-color: var(--gray-700);
emhttp/plugins/dynamix/styles/default-gray.css
+13 -9
View File
@@ -1,16 +1,20 @@
:root {
/* Theme specific vars */
--theme-gray--black-alt: #121510;
--theme-gray--cyan-400: #606e7f;
--theme-gray--cyan-300: #606e7f;
--theme-gray--cyan-400: #566573;
--theme-gray--cyan-500: #42453e;
--theme-gray--cyan-600: #004e86;
--theme-gray--cyan-700: #39587f;
--theme-gray--cyan-900: #212f3d;
--theme-gray--green-900: #232523;
/* /Theme specific vars */
--text-color: var(--theme-gray--cyan-400);
/* Begin setting vars used in default-base */
--text-color: var(--theme-gray--cyan-300);
--blockquote-text-color: var(--gray-800);
--alt-text-color: var(--theme-gray--cyan-400);
--alt-text-color: var(--theme-gray--cyan-300);
--disabled-text-color: var(--gray-500);
--inverse-text-color: var(--gray-900);
--link-text-color: var(--blue-800);
@@ -31,20 +35,20 @@
--dashboard-title-action-color: var(--white-opacity-30);
--dashboard-icon-color: var(--mild-background-color);
--border-color: var(--theme-gray--cyan-400);
--border-color: var(--theme-gray--cyan-300);
--alt-border-color: var(--theme-gray--cyan-600);
--disabled-border-color: var(--gray-500);
--input-border-color: var(--theme-gray--cyan-400);
--input-border-color: var(--theme-gray--cyan-300);
--disabled-input-border-color: var(--gray-500);
--inverse-border-color: var(--theme-gray--cyan-500);
--table-border-color: var(--gray-700);
--table-alt-border-color: var(--theme-gray--black-alt);
--dashboard-border-color: #566573;
--dashboard-border-color: var(--theme-gray--cyan-400);
--footer-text: var(--gray-500);
--small-shadow: 0 0 0 0 transparent;
--hr-color: var(--theme-gray--cyan-400);
--hr-color: var(--theme-gray--cyan-300);
--checkbox-color: var(--gray-800);
--checkbox-hover-color: var(--gray-600);
@@ -62,8 +66,8 @@
--bg-opacity-10: var(--black-opacity-10);
--bg-opacity-30: var(--black-opacity-30);
--button-border: var(--theme-gray--cyan-400);
--button-text-color: var(--theme-gray--cyan-400);
--button-border: var(--theme-gray--cyan-300);
--button-text-color: var(--theme-gray--cyan-300);
--button-background: var(--theme-gray--black-alt);
--button-background-size: cover;
emhttp/plugins/dynamix/styles/default-white.css
+8 -3
View File
@@ -1,4 +1,9 @@
:root {
/* Theme specific vars */
--theme-white--mild-gray-100: #f7f9f9;
/* /Theme specific vars */
/* Begin setting vars used in default-base */
--text-color: var(--gray-900);
--blockquote-text-color: var(--gray-800);
--alt-text-color: var(--gray-400);
@@ -8,7 +13,7 @@
--background-color: var(--gray-100);
--opac-background-color: var(--gray-895);
--mild-background-color: #f7f9f9;
--mild-background-color: var(--theme-white--mild-gray-100);
--usage-bar-background-color: var(--gray-500);
--usage-bar-used-background-color: var(--gray-400);
--usage-disk-background-color: var(--gray-200);
@@ -56,10 +61,10 @@
linear-gradient(0deg, var(--brand-orange) 0, var(--brand-orange)) 100% 100% no-repeat;
--button-background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%;
--hover-button-border: #0072c6;
--hover-button-border: var(--blue-700);
--hover-button-text-color: var(--white);
--hover-button-background: linear-gradient(90deg,var(--brand-red) 0,var(--brand-orange));
--input-border-color: #1c1b1b;
--input-border-color: var(--black);
--input-bg-color: transparent;
}