weyne/DCSOlympus
1
0
Fork 0
mirror of https://github.com/Pax1601/DCSOlympus.git synced 2025-10-29 16:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Continue migration to node express typescript

Browse Source
This commit is contained in:
Pax1601
2023-01-15 17:48:55 +01:00
parent a75a491fe7
commit baf288c6a0
58 changed files with 4232 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
www/css/SelectionWheel.css
View File

@@ -14,11 +14,9 @@
#selection-wheel {
width: 100%;
border-radius: 50%;
/*background: conic-gradient(from var(--start_angle), var(--highlight) 0deg, var(--highlight) calc(var(--gradient_start) - 1deg), var(--normal) var(--gradient_start), var(--normal) var(--gradient_stop), var(--highlight) calc(var(--gradient_stop) + 1deg), var(--highlight) 360deg);*/
background: var(--normal);
-webkit-mask: radial-gradient(transparent 30%,#000 31%);
mask: radial-gradient(transparent 30%,#000 31%);
transition: background-color var(--color_transition);
}
#selection-wheel:before {
content: "";
@@ -32,7 +30,6 @@
z-index: 1000;
width: 0px;
height: 0px;
transition: width var(--animation_duration), height var(--animation_duration), left var(--animation_duration), top var(--animation_duration);
overflow: visible;
display: flex;
align-items: center;
@@ -45,7 +42,6 @@
width: 50px;
height: 50px;
opacity: 0;
transition: opacity var(--animation_duration), left var(--animation_duration), top var(--animation_duration);
cursor: pointer;
display: flex;
align-items: center;
@@ -57,9 +53,7 @@
width: 45px;
height: 45px;
/*filter: invert(100%);*/
transition: width var(--animation_duration), height var(--animation_duration);
filter: drop-shadow(1px 1px 0px var(--highlight)) drop-shadow(1px -1px 0px var(--highlight)) drop-shadow(-1px 1px 0px var(--highlight)) drop-shadow(-1px -1px 0px var(--highlight));
}
.selection-wheel-button:hover {
@@ -69,10 +63,8 @@
.selection-wheel-button:hover .selection-wheel-image {
width: 50px;
height: 50px;
/*filter: invert(21%) sepia(23%) saturate(775%) hue-rotate(170deg) brightness(92%) contrast(90%);*/
}
/* The switch - the box around the slider */
.switch {
opacity: 0;
position: absolute;
@@ -81,17 +73,14 @@
width: 60px;
height: 34px;
margin-top: -17px;
transition: opacity var(--animation_duration);
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
@@ -99,9 +88,9 @@
left: 0;
right: 0;
bottom: 0;
background-color: var(--blue);
-webkit-transition: var(--color_transition);
transition: var(--color_transition);
background-color: var(--blue-coalition-color);
-webkit-transition: 0.2s;
transition: 0.2s;
}
.slider:before {
@@ -112,16 +101,16 @@
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: var(--color_transition);
transition: var(--color_transition);
-webkit-transition: 0.2s;
transition: 0.2s;
}
input:checked + .slider {
background-color: var(--red);
background-color: var(--blue-coalition-color);
}
input:focus + .slider {
box-shadow: 0 0 1px var(--red);
box-shadow: 0 0 1px var(--blue-coalition-color);
}
input:checked + .slider:before {