build: v1.2.0; style: changed dark theme palette; style: changed green and explicit colors
thanks to @BasCurtiz
This commit is contained in:
parent
f41c9c6a98
commit
2f42f965d2
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "deemix-webui",
|
"name": "deemix-webui",
|
||||||
"version": "1.0.0",
|
"version": "1.2.0",
|
||||||
"lockfileVersion": 1,
|
"lockfileVersion": 1,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "deemix-webui",
|
"name": "deemix-webui",
|
||||||
"version": "1.1.3",
|
"version": "1.2.0",
|
||||||
"homepage": "https://codeberg.org/RemixDev/deemix-webui/src/master/README.md",
|
"homepage": "https://codeberg.org/RemixDev/deemix-webui/src/master/README.md",
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
|
File diff suppressed because one or more lines are too long
@ -16,7 +16,7 @@
|
|||||||
<span
|
<span
|
||||||
v-if="link.name === 'about' && updateAvailable"
|
v-if="link.name === 'about' && updateAvailable"
|
||||||
id="update-notification"
|
id="update-notification"
|
||||||
class="bg-red-600 w-3 h-3 rounded-full"
|
class="w-3 h-3 bg-red-600 rounded-full"
|
||||||
></span>
|
></span>
|
||||||
</router-link>
|
</router-link>
|
||||||
|
|
||||||
@ -58,7 +58,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#network-status.online i.material-icons {
|
#network-status.online i.material-icons {
|
||||||
color: hsl(151, 100%, 31%);
|
color: hsl(150, 76%, 34%);
|
||||||
}
|
}
|
||||||
|
|
||||||
#network-status.offline i.material-icons svg {
|
#network-status.offline i.material-icons svg {
|
||||||
|
@ -230,7 +230,7 @@ export default {
|
|||||||
backgroundColor = 'hsl(33, 100%, 47%)'
|
backgroundColor = 'hsl(33, 100%, 47%)'
|
||||||
} else {
|
} else {
|
||||||
// Green
|
// Green
|
||||||
backgroundColor = 'hsl(120, 100%, 40%)'
|
backgroundColor = 'hsl(150, 76%, 34%)'
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.allFailed) {
|
if (this.allFailed) {
|
||||||
|
@ -3,8 +3,8 @@
|
|||||||
--panels-scroll: hsl(180, 2%, 17%);
|
--panels-scroll: hsl(180, 2%, 17%);
|
||||||
--tag-background: hsl(210, 100%, 38%);
|
--tag-background: hsl(210, 100%, 38%);
|
||||||
--tag-text: theme('colors.white');
|
--tag-text: theme('colors.white');
|
||||||
--toast-background: hsla(0, 0%, 0%, 0.85);
|
--toast-background: hsla(240, 12%, 16%, 0.85);
|
||||||
--toast-secondary: hsla(0, 0%, 100%, 0.15);
|
--toast-secondary: hsla(240, 12%, 16%, 0.15);
|
||||||
--toast-text: hsla(0, 0%, 100%, 0.85);
|
--toast-text: hsla(0, 0%, 100%, 0.85);
|
||||||
|
|
||||||
--primary-color: hsl(210, 100%, 52%); // will remove variable
|
--primary-color: hsl(210, 100%, 52%); // will remove variable
|
||||||
@ -31,21 +31,21 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
:root[data-theme='dark'] {
|
:root[data-theme='dark'] {
|
||||||
--main-background: theme('colors.grayscale.80');
|
--main-background: hsl(240, 10%, 8%);
|
||||||
--secondary-background: theme('colors.grayscale.140');
|
--secondary-background: hsl(240, 12%, 16%); // e.g. search bar bg
|
||||||
--foreground: theme('colors.grayscale.930');
|
--foreground: theme('colors.grayscale.930'); // primary text + icons in main + search
|
||||||
--foreground-inverted: theme('colors.grayscale.200');
|
--foreground-inverted: hsl(240, 12%, 16%); // copy link when inactive
|
||||||
--panels-background: theme('colors.grayscale.100');
|
--panels-background: hsl(240, 15%, 12%); // panel left + right bg
|
||||||
--panels-text: theme('colors.white');
|
--panels-text: theme('colors.white'); // icons + text colors in panels
|
||||||
|
|
||||||
--sidebar-link-bg: theme('colors.grayscale.240');
|
--sidebar-link-bg: hsl(240, 10%, 22%); // hover bg color icons left panel
|
||||||
--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2);
|
--sidebar-link-bg-20: hsla(240, 10%, 22%, 1); // same value but with opacity at 20% when tab selected bg
|
||||||
|
|
||||||
--icon-hover: var(--primary-color);
|
--icon-hover: hsl(210, 100%, 52%); // e.g. hover color on icons like download-button
|
||||||
|
|
||||||
--table-bg: theme('colors.grayscale.80');
|
--table-bg: hsl(240, 10%, 8%); // e.g. results table bg 1st row
|
||||||
--table-zebra: theme('colors.grayscale.140');
|
--table-zebra: hsl(240, 15%, 11%); // e.g. results table bg 2nd alternate
|
||||||
--table-highlight: theme('colors.grayscale.200');
|
--table-highlight: hsl(240, 10%, 22%); // e.g. hover bg color on table selection
|
||||||
}
|
}
|
||||||
|
|
||||||
:root[data-theme='purple'] {
|
:root[data-theme='purple'] {
|
||||||
|
@ -87,7 +87,7 @@ i {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.explicit_icon {
|
&.explicit_icon {
|
||||||
color: hsl(3, 100%, 59%);
|
color: hsl(240, 5%, 59%);
|
||||||
margin-right: $explicit-separator;
|
margin-right: $explicit-separator;
|
||||||
margin-left: -3px;
|
margin-left: -3px;
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user