mirror/webgui
1
0
Fork 0
mirror of https://github.com/unraid/webgui.git synced 2026-04-23 18:48:49 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: button and input css vars

Browse Source
This commit is contained in:
Zack Spear
2024-06-03 14:14:48 -07:00
parent 954f1f92cc
commit e69f318637
5 changed files with 68 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
emhttp/plugins/dynamix/styles/default-azure.css
+12
View File
@@ -49,4 +49,16 @@
--bg-opacity-10: var(--black-opacity-10);
--bg-opacity-30: var(--black-opacity-30);
--button-border: #9f9180;
--button-text-color: #9f9180;
--button-background: var(--mild-background-color);
--button-background-size: cover;
--hover-button-border: #0072c6;
--hover-button-text-color: #4f4f4f;
--hover-button-background: var(--mild-background-color);
--input-border-color: #0072c6;
--input-bg-color: var(--mild-background-color);
}
emhttp/plugins/dynamix/styles/default-base.css
+14 -18
View File
@@ -172,9 +172,9 @@ a.button,
cursor: pointer;
outline: none;
border-radius: 4px;
border: none;
color: var(--brand-orange);
background: -webkit-gradient(
border: var(--button-border);
color: var(--button-text-color);
/* background: -webkit-gradient(
linear,
left top,
right top,
@@ -202,12 +202,9 @@ a.button,
left top,
from(var(--brand-orange)),
to(var(--brand-orange))
) 100% 100% no-repeat;
background: linear-gradient(90deg, var(--brand-red) 0, var(--brand-orange)) 0 0 no-repeat,
linear-gradient(90deg, var(--brand-red) 0, var(--brand-orange)) 0 100% no-repeat,
linear-gradient(0deg, var(--brand-red) 0, var(--brand-red)) 0 100% no-repeat,
linear-gradient(0deg, var(--brand-orange) 0, var(--brand-orange)) 100% 100% no-repeat;
background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%;
) 100% 100% no-repeat; */
background: var(--button-background);
background-size: var(--button-background-size);
}
input[type="checkbox"] {
vertical-align: middle;
@@ -1605,11 +1602,10 @@ pre#swalbody p {
font-weight: normal;
text-transform: none;
letter-spacing: normal;
/* @todo css var */
border: 1px solid #9f9180;
color: #9f9180;
border: 1px solid var(--button-border);
color: var(--button-text-color);
background: none;
background-color: var(--mild-background-color);
background-color: var(--button-background);
}
input:focus[type="text"],
@@ -1622,7 +1618,7 @@ pre#swalbody p {
.sweet-alert button:focus {
background: none;
background-color: var(--mild-background-color);
border-color: #0072c6;
border-color: var(--input-border-color);
}
input:hover[type="button"],
@@ -1632,10 +1628,10 @@ pre#swalbody p {
button:hover[type="button"],
a.button:hover,
.sweet-alert button:hover {
border-color: #0072c6;
color: #4f4f4f;
border-color: var(--hover-button-border);
color: var(--hover-button-color);
background: none;
background-color: var(--mild-background-color) !important;
background-color: var(--hover-button-background) !important;
}
input:active[type="button"],
@@ -1645,7 +1641,7 @@ pre#swalbody p {
button:active[type="button"],
a.button:active,
.sweet-alert button:active {
border-color: #0072c6;
border-color: var(--hover-button-border);
box-shadow: none;
}
emhttp/plugins/dynamix/styles/default-black.css
+15
View File
@@ -40,4 +40,19 @@
--bg-opacity-10: var(--black-opacity-10);
--bg-opacity-30: var(--black-opacity-30);
--button-text-color: var(--brand-orange);
--button-border: none;
--button-background: linear-gradient(90deg, var(--brand-red) 0, var(--brand-orange)) 0 0 no-repeat,
linear-gradient(90deg, var(--brand-red) 0, var(--brand-orange)) 0 100% no-repeat,
linear-gradient(0deg, var(--brand-red) 0, var(--brand-red)) 0 100% no-repeat,
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-text-color: var(--white);
--hover-button-background: linear-gradient(90deg,var(--brand-red) 0,var(--brand-orange));
--input-border-color: #e5e5e5;
--input-bg-color: transparent;
}
emhttp/plugins/dynamix/styles/default-gray.css
+12
View File
@@ -49,4 +49,16 @@
--bg-opacity-10: var(--black-opacity-10);
--bg-opacity-30: var(--black-opacity-30);
--button-border: #606e7f;
--button-text-color: #606e7f;
--button-background: transparent; /* or #121510 ?? */
--button-background-size: cover;
--hover-button-border: #0072c6;
--hover-button-text-color: #b0b0b0;
--hover-button-background: #121510;
--input-border-color: #0072c6;
--input-bg-color: #121510;
}
emhttp/plugins/dynamix/styles/default-white.css
+15
View File
@@ -40,4 +40,19 @@
--bg-opacity-10: var(--white-opacity-10);
--bg-opacity-30: var(--white-opacity-30);
--button-text-color: var(--brand-orange);
--button-border: none;
--button-background: linear-gradient(90deg, var(--brand-red) 0, var(--brand-orange)) 0 0 no-repeat,
linear-gradient(90deg, var(--brand-red) 0, var(--brand-orange)) 0 100% no-repeat,
linear-gradient(0deg, var(--brand-red) 0, var(--brand-red)) 0 100% no-repeat,
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-text-color: var(--white);
--hover-button-background: linear-gradient(90deg,var(--brand-red) 0,var(--brand-orange));
--input-border-color: #1c1b1b;
--input-bg-color: transparent;
}