healing-soundscapes/ui-style.css
2025-04-10 16:14:22 +02:00

241 lines
4.3 KiB
CSS

:root {
--background: ivory;
--active: royalblue;
--nonactive: lightsteelblue;
--alert: red;
--textcolor: #737373;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
html {
background-color: var(--background);
}
body {
font-family: "Poppins", sans-serif;
}
p,
label,
input[type=text] {
font-size: 13px;
background-color: var(--background);
}
h1 {
font-size: 15px;
font-weight: 400;
color: var(--active);
position: relative;
width: fit-content;
margin: 0.3em auto;
}
/*navigation*/
#nav,
#navPlayers {
z-index: 99;
display: flex !important;
flex-flow: row nowrap;
justify-content: space-around;
position: relative;
width: 100vw;
max-width: 800px;
margin: 0 auto;
}
#navPlayers>button {
/*width: 24.9vw;*/
color: var(--nonactive);
}
#navPlayers>button:active {
color: var(--active);
}
/*centers navigations*/
/*
#forms, #expertDIV {
width: 100%;
margin: 0 auto;
}
*/
.menu {
background-color: var(--background);
border: 1px solid var(--active);
color: var(--active);
text-align: left;
display: inline-block;
font-size: 12px;
margin: 4px 2px;
height: 20px;
}
.menu option {
background-color: var(--background);
color: var(--active);
}
.but {
background-color: var(--background);
border: 1px solid + var(--active);
color: var(--active);
padding: 4px 4px;
text-align: center;
display: inline-block;
font-size: 11px;
margin: 4px 4px;
width: 20vw;
border: solid 1px var(--textcolor);
border-radius: 25px;
}
.but:hover,
.but:active {
background-color: var(--nonactive);
color: var(--active) !important;
}
.toggle {
background-color: var(--background);
border: 1px solid + var(--active);
color: var(--active);
padding: 4px 7.8px;
margin: 4px 0px;
}
.slider {
appearance: none;
-webkit-appearance: none;
height: 6px;
border-radius: 6px;
background-color: #9b9b9b;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
position: absolute;
left: 135px;
width: 170px;
overflow: hidden;
}
.slider:hover,
.slider:active {
opacity: 1;
}
/*slider knob*/
.slider::-webkit-slider-runnable-track {
-webkit-appearance: none;
color: var(--active);
margin-top: -1px;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--active);
box-shadow: -80px 0 0 80px var(--active);
}
.slider::-moz-range-progress {
background-color: var(--active);
}
label {
position: absolute;
color: var(--textcolor);
}
input[type=text] {
position: absolute;
color: var(--active);
border: 1px solid var(--active);
}
input[type=text]:hover:not([disabled]),
input[type=checkbox]:hover,
.menu:hover,
.menu:active,
.option:hover,
.option:active {
background-color: var(--nonactive);
color: var(--active) !important;
}
input[type=checkbox] {
position: absolute;
border: none;
background-color: var(--background);
text-align: center;
display: table-cell;
vertical-align: middle;
width: 20px !important;
height: 20px !important;
appearance: none;
border-radius: 10%;
box-shadow: none;
font-size: 1em;
border: 1px solid var(--active) !important;
}
input[type='checkbox']:checked {
background-color: var(--active);
}
input[type='checkbox']:checked:after {
content: '\2713';
color: var(--background);
}
#oph_-1 {
width: 174px !important;
}
/*System page*/
#proceedbutton {
background-color: var(--background) !important;
color: red !important;
border: 1px solid red;
}
#proceedbutton:hover,
#proceedbutton:active {
background-color: red !important;
color: white !important;
}
#versionbutton,
#cancelbutton {
background-color: var(--background) !important;
}
#updateheader,
#shutdownheader {
left: 10px;
font-family: Arial;
margin-left: 10px;
}
#update,
#shutdown {
left: 10px;
font-family: Arial;
font-size: 12;
margin-left: 10px;
}
iframe #manualdoc {
position: absolute;
top: 0px;
left: 0px;
}