kuba/fm-dx-webserver
1
0
Fork 0
mirror of https://github.com/KubaPro010/fm-dx-webserver.git synced 2026-02-27 06:23:53 +01:00
Code Issues Activity

design changes, accessibility stuff

Browse Source
This commit is contained in:
NoobishSVK
2024-07-18 14:57:43 +02:00
parent 3a6deecc02
commit 3d608ae8e8
17 changed files with 259 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
web/css/breadcrumbs.css
View File

@@ -47,7 +47,7 @@ h4 {
color: var(--color-text);
text-align: center;
font-size: 14px;
border-radius: 30px;
border-radius: 15px;
padding: 5px 25px;
z-index: 1000;
opacity: 0;
@@ -86,6 +86,7 @@ label {
#data-ps {
font-weight: 500;
margin-top: -5px;
}
#data-station-container {
@@ -254,28 +255,28 @@ label {
}
.admin-quick-dashboard {
position: absolute;
top: 0;
bottom: 0;
left: -96px;
width: 96px;
height: 286px;
width: 255px;
height: 72px;
background-color: var(--color-2);
margin: auto 0;
border-radius: 30px;
padding-top: 15px;
margin: 0 auto;
margin-bottom: 15px;
padding: 5px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
}
.admin-quick-dashboard .icon {
width: 72px;
height: 72px;
margin: 10px auto;
width: 52px;
height: 52px;
margin: auto;
color: var(--color-1);
background-color: var(--color-3);
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-size: 18px;
border-radius: 10px;
transition: 0.3s ease-in-out background-color;
cursor: pointer;
@@ -293,6 +294,30 @@ pre {
color: white;
}
.circle-container {
position: relative;
width: 25px;
height: 34px;
}
.circle {
position: absolute;
width: 16px;
height: 16px;
border: 2px solid var(--color-3);
border-radius: 50%;
}
.circle.circle1 {
left: 0px;
top: 10px;
}
.circle.circle2 {
left: 8px;
top: 10px;
}
@media (max-width: 768px) {
canvas, #flags-container {
display: none;
@@ -442,4 +467,10 @@ pre {
.chatbutton {
height: 88px !important;
}
}
@media only screen and (min-width: 769px) and (max-height: 610px) {
.canvas-container {
display: none;
}
}

18
web/css/buttons.css
View File

@@ -2,7 +2,7 @@ button, input[type="submit"] {
width: 100%;
height: 100%;
border: 0;
border-radius: 30px;
border-radius: 15px;
transition: 0.3s ease-in-out background-color;
background-color: var(--color-4);
cursor: pointer;
@@ -40,7 +40,7 @@ button:hover {
height: 64px;
background: var(--color-2);
color: var(--color-main);
border-radius: 30px;
border-radius: 15px;
margin-right: 10px;
margin-left: 10px;
display: flex;
@@ -112,11 +112,11 @@ input[type="text"], textarea, input[type="password"] {
}
#freq-down {
border-radius: 30px 0 0 30px;
border-radius: 15px 0 0 15px;
}
#freq-up {
border-radius: 0 30px 30px 0;
border-radius: 0 15px 15px 0;
}
input[type="range"] {
@@ -130,7 +130,7 @@ input[type="range"] {
outline: none;
/* slider progress trick */
overflow: hidden;
border-radius: 30px;
border-radius: 15px;
height: 100%;
background: transparent;
}
@@ -139,7 +139,7 @@ input[type="range"] {
input[type="range"]::-moz-range-track {
height: 48px;
background: var(--color-1);
border-radius: 30px;
border-radius: 15px;
border: 0;
}
@@ -153,7 +153,7 @@ input[type="range"]::-webkit-slider-thumb {
background: url('../images/speaker.svg') center no-repeat, var(--color-5);
background-position: center;
background-size: 20px;
border-radius: 30px;
border-radius: 15px;
outline: 4px solid var(--color-5);
outline-offset: -3px;
/* slider progress trick */
@@ -168,7 +168,7 @@ input[type="range"]::-moz-range-thumb {
background: url('../images/speaker.svg') center no-repeat, var(--color-5);
background-position: center;
background-size: 20px;
border-radius: 30px;
border-radius: 15px;
outline: 4px solid var(--color-5);
outline-offset: -3px;
/* slider progress trick */
@@ -279,7 +279,7 @@ input[type="range"]::-moz-range-thumb {
position: absolute;
left: 0;
top: -2px;
border-radius: 30px;
border-radius: 15px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;

2
web/css/helpers.css
View File

@@ -242,7 +242,7 @@
display: none;
}
.m-0 {
margin: auto;
margin: auto !important;
}
}

28
web/css/main.css
View File

@@ -46,19 +46,31 @@ body {
font-family: 'Titillium Web', sans-serif;
color: var(--color-text);
background: var(--color-main);
background-blend-mode: multiply;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
transition: 0.3s ease-in-out background-color;
margin: 0 auto;
min-height: 100%;
}
#wrapper-outer {
width: 100%;
height: auto;
background-color: var(--color-main);
display: flex;
align-items: center;
justify-content: center;
min-height:100vh;
}
.wrapper-outer-static {
display: block !important;
padding-top: 10px;
padding-bottom: 10px;
}
#wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 1180px;
max-width: 1180px;
}
@@ -82,7 +94,7 @@ hr {
}
.table-big {
border-radius: 30px;
border-radius: 15px;
background-color: var(--color-2);
padding: 20px;
margin: auto;
@@ -109,11 +121,11 @@ hr {
.table-big th:nth-child(1) {
border-radius: 30px 0px 0px 30px;
border-radius: 15px 0px 0px 15px;
}
.table-big th:nth-last-child(1){
border-radius: 0px 30px 30px 0px;
border-radius: 0px 15px 15px 0px;
}
@media (max-width: 1180px) {

8
web/css/modal.css
View File

@@ -22,7 +22,7 @@
transform: translate(-50%, -50%);
background-color: var(--color-main);
padding: 30px;
border-radius: 30px;
border-radius: 15px;
opacity: 1;
transition: opacity 0.3s ease-in-out; /* Fade-in/out transition */
z-index: 21; /* Ensure the modal content is above the modal background */
@@ -56,7 +56,7 @@
right: 35px;
width: 100px;
height: 48px;
border-radius: 30px;
border-radius: 15px;
background: var(--color-4);
font-weight: bold;
border: 0;
@@ -135,12 +135,12 @@
text-align: center;
display: none;
background-color: var(--color-main);
border-radius: 30px 30px 0px 0px;
border-radius: 15px 15px 0px 0px;
}
.modal-panel-chat .modal-panel-sidebar {
width: 100%;
border-radius: 30px 30px 0px 0px;
border-radius: 15px 15px 0px 0px;
}
@media only screen and (max-width: 768px) {

2
web/css/multiselect.css
View File

@@ -3,7 +3,7 @@
height: 320px;
background-color: var(--color-2);
padding: 8px 16px;
border-radius: 30px;
border-radius: 15px;
padding: 20px;
}

5
web/css/panels.css
View File

@@ -2,15 +2,14 @@
background-color: var(--color-1);
margin-left: 10px;
margin-right: 10px;
border-radius: 30px;
border-radius: 15px;
text-align: center;
margin-top: 30px;
margin-top: 20px;
transition: 0.3s ease-in-out background-color;
}
.panel-10 {
width: 10%;
margin-top: 30px;
}
.panel-33 {

4
web/css/setup.css
View File

@@ -30,7 +30,7 @@ ul.nav {
list-style-type: none;
padding: 15px 0;
background: var(--color-2);
border-radius: 30px;
border-radius: 15px;
}
ul.nav li {
@@ -98,7 +98,7 @@ li.active {
color: var(--color-main);
margin: 0px 10px;
padding: 15px 35px;
border-radius: 30px;
border-radius: 15px;
min-width: fit-content;
}
}