kuba/fm-dx-webserver
1
0
Fork 0
mirror of https://github.com/KubaPro010/fm-dx-webserver.git synced 2026-07-30 00:39:16 +02:00
Code Issues Activity

UI changes

Browse Source
This commit is contained in:
NoobishSVK
2024-02-23 14:05:23 +01:00
parent 5c4e669efd
commit c2bb770f82
14 changed files with 168 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/css/breadcrumbs.css
+10 -2
View File
@@ -78,7 +78,7 @@ label {
#settings, #back-btn, #users-online-container {
background: transparent;
border: 0;
color: white;
color: var(--color-text);
position: absolute;
top: 15px;
right: 15px;
@@ -189,7 +189,7 @@ label {
#data-pi {
font-size: 24px;
margin-top: 50px;
color: #aaa;
color: var(--color-text-2)
}
h2.show-phone {
display: inline;
@@ -272,4 +272,12 @@ label {
margin-bottom: 10px;
font-size: 18px;
}
h2.mb-0 {
margin-bottom: 0;
margin-top: 2px !important;
}
#af-list ul {
max-height: 330px;
}
}
web/css/buttons.css
+8 -6
View File
@@ -25,7 +25,7 @@ input[type="text"], textarea, input[type="password"] {
box-sizing: border-box;
border: 2px solid transparent;
outline: 0;
color: white;
color: var(--color-text);
background-color: var(--color-1);
font-family: 'Titillium Web', sans-serif;
}
@@ -38,7 +38,7 @@ input[type="text"], textarea, input[type="password"] {
box-sizing: border-box;
border: 2px solid transparent;
outline: 0;
color: white;
color: var(--color-text);
background-color: var(--color-1);
font-family: 'Titillium Web', sans-serif;
}
@@ -112,10 +112,12 @@ input[type="range"]::-moz-range-thumb {
box-sizing: border-box;
height: 48px;
width: 48px;
background-color: var(--color-4);
border-radius: 0px 30px 30px 0px;
border: 0;
outline: none;
background: url('../images/speaker.svg') center no-repeat, var(--color-5);
background-position: center;
background-size: 20px;
border-radius: 30px;
outline: 4px solid var(--color-5);
outline-offset: -3px;
/* slider progress trick */
box-shadow: -420px 0 0 400px var(--color-4);
}
web/css/helpers.css
+5 -1
View File
@@ -99,10 +99,14 @@
font-weight: 300;
}
.text-color-default {
color: var(--color-text);
}
.text-medium {
font-size: 24px;
color: #aaa;
font-weight: 300;
opacity: 0.6;
}
.text-medium-big {
web/css/main.css
+16 -9
View File
@@ -1,13 +1,16 @@
:root {
--color-main: #111;
--color-main-bright: #aaa;
--color-main: #000;
--color-main-bright: #ccc;
--color-text: white;
--color-1: color-mix(in srgb, var(--color-main) 95%, var(--color-main-bright));
--color-2: color-mix(in srgb, var(--color-main) 75%, var(--color-main-bright));
--color-3: color-mix(in srgb, var(--color-main) 50%, var(--color-main-bright));
--color-4: color-mix(in srgb, var(--color-main) 20%, var(--color-main-bright));
--color-5: color-mix(in srgb, var(--color-main) 0%, var(--color-main-bright));
--color-1: color-mix(in srgb, var(--color-main) 95%, var(--color-main-bright)); /* 5% Brightness */
--color-2: color-mix(in srgb, var(--color-main) 75%, var(--color-main-bright)); /* 25% Brightness */
--color-3: color-mix(in srgb, var(--color-main) 50%, var(--color-main-bright)); /* 50% Brightness */
--color-4: color-mix(in srgb, var(--color-main) 20%, var(--color-main-bright)); /* 80% Brightness */
--color-5: color-mix(in srgb, var(--color-main) 5%, var(--color-main-bright)); /* 95% Brightness */
--color-text-2: #ccc;
}
* {
@@ -41,7 +44,7 @@
body {
font-family: 'Titillium Web', sans-serif;
color: white;
color: var(--color-text);
background-color: var(--color-main);
transition: 0.3s ease-in-out background-color;
margin: 0 auto;
@@ -72,5 +75,9 @@ body {
a {
text-decoration: none;
color: white;
color: var(--color-text-2);
}
a:hover {
border-bottom: 1px solid var(--color-4);
}
web/css/modal.css
+1 -1
View File
@@ -47,7 +47,7 @@
}
.close:hover {
color: white;
color: var(--color-text);
}
.modal-content .button-close {