1058 lines
28 KiB
CSS
Executable File
1058 lines
28 KiB
CSS
Executable File
/*GENERAL*/
|
|
|
|
#interface-wrapper {
|
|
pointer-events: none;
|
|
width: 100%;
|
|
z-index: 2;
|
|
height: 100%;
|
|
background-color: rgba(255, 255, 255, 0);
|
|
-webkit-transition: background-color 1s ease;
|
|
-moz-transition: background-color 1s ease;
|
|
-o-transition: background-color 1s ease;
|
|
transition: background-color 1s ease;
|
|
}
|
|
#module-wrapper {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
visibility: hidden;
|
|
-webkit-box-flex: 1;
|
|
box-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
-webkit-box-pack: center;
|
|
box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
-webkit-box-align: center;
|
|
box-align: center;
|
|
-ms-flex-align: center;
|
|
height: 100%;
|
|
overflow: auto;
|
|
}
|
|
.cogwheel {
|
|
pointer-events: all !important;
|
|
}
|
|
.cogwheel:focus {
|
|
outline: none !important;
|
|
}
|
|
.interface-in {
|
|
pointer-events: all !important;
|
|
}
|
|
.module h2 {
|
|
font-family: "Oswald";
|
|
text-align: center;
|
|
font-size: 1.8em;
|
|
color: #2a2a2a;
|
|
font-weight: 400;
|
|
text-transform: uppercase;
|
|
}
|
|
.module * h4 {
|
|
margin: 0;
|
|
padding-bottom: 20px;
|
|
font-family: "Oswald";
|
|
user-select: none;
|
|
font-weight: 300;
|
|
text-align: center;
|
|
font-size: 1.5em;
|
|
}
|
|
*:focus {
|
|
outline: none;
|
|
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
}
|
|
|
|
/*LIGHT INTERFACE*/
|
|
.light {
|
|
display: inline-block;
|
|
}
|
|
.light.interface-in {
|
|
background-color: rgba(255, 255, 255, 0.9) !important;
|
|
}
|
|
.light .cogwheel {
|
|
position: absolute;
|
|
width: 70px;
|
|
cursor: pointer;
|
|
-webkit-transform: rotate(0deg);
|
|
-ms-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
z-index: 2;
|
|
-webkit-transition: -webkit-transform 1s ease;
|
|
transition: -webkit-transform 1s ease;
|
|
-moz-transition: transform 1s ease;
|
|
-o-transition: transform 1s ease;
|
|
transition: transform 1s ease;
|
|
transition: transform 1s ease, -webkit-transform 1s ease;
|
|
stroke: none !important;
|
|
}
|
|
|
|
.light .cogwheel #close {
|
|
stroke: #BE915F;
|
|
stroke-width: 2px;
|
|
}
|
|
|
|
.light .fullscreen {
|
|
pointer-events: all;
|
|
position: absolute;
|
|
right: 0;
|
|
width: 70px;
|
|
cursor: pointer;
|
|
fill: #BE915F;
|
|
-webkit-transform: rotate(0deg);
|
|
-ms-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
z-index: 2;
|
|
-webkit-transition: -webkit-transform 1s ease;
|
|
transition: -webkit-transform 1s ease;
|
|
-moz-transition: transform 1s ease;
|
|
-o-transition: transform 1s ease;
|
|
transition: transform 1s ease;
|
|
transition: transform 1s ease, -webkit-transform 1s ease;
|
|
}
|
|
.light .cogwheel-in {
|
|
-webkit-transform: rotate(180deg) !important;
|
|
-ms-transform: rotate(180deg) !important;
|
|
transform: rotate(180deg) !important;
|
|
}
|
|
.light .cogwheel #option {
|
|
-webkit-transition: stroke-width 0.4s ease, opacity 0.4s ease;
|
|
-moz-transition: stroke-width 0.4s ease, opacity 0.4s ease;
|
|
-o-transition: stroke-width 0.4s ease, opacity 0.4s ease;
|
|
transition: stroke-width 0.4s ease, opacity 0.4s ease;
|
|
fill: #BE915F;
|
|
opacity: 1;
|
|
}
|
|
.light .cogwheel-in #option {
|
|
opacity: 0 !important;
|
|
}
|
|
.light .cogwheel #close {
|
|
-webkit-transition: stroke-width 0.4s ease, opacity 0.4s ease;
|
|
-moz-transition: stroke-width 0.4s ease, opacity 0.4s ease;
|
|
-o-transition: stroke-width 0.4s ease, opacity 0.4s ease;
|
|
transition: stroke-width 0.4s ease, opacity 0.4s ease;
|
|
fill: #BE915F;
|
|
opacity: 0;
|
|
}
|
|
.light .cogwheel.cogwheel-in #close {
|
|
opacity: 1 !important;
|
|
}
|
|
.light * .toggle-wrapper {
|
|
width: 40%;
|
|
margin-left: 30%;
|
|
height: 40px;
|
|
padding: 0;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
border: solid 2px #2a2a2a;
|
|
}
|
|
.light * .toggle-wrapper .toggle-right {
|
|
width: 50%;
|
|
height: 100%;
|
|
outline: solid 2px #2a2a2a;
|
|
display: inline-block;
|
|
background-color: rgba(190, 145, 95, 0);
|
|
-webkit-transition: background-color 0.4s ease;
|
|
-moz-transition: background-color 0.4s ease;
|
|
-o-transition: background-color 0.4s ease;
|
|
transition: background-color 0.4s ease;
|
|
}
|
|
.light * .toggle-wrapper .toggle-left {
|
|
width: 50%;
|
|
height: 100%;
|
|
display: inline-block;
|
|
background-color: rgba(190, 145, 95, 0);
|
|
-webkit-transition: background-color 0.4s ease;
|
|
-moz-transition: background-color 0.4s ease;
|
|
-o-transition: background-color 0.4s ease;
|
|
transition: background-color 0.4s ease;
|
|
}
|
|
.light * .toggle-wrapper * p {
|
|
text-align: center;
|
|
width: 20%;
|
|
line-height: 10px;
|
|
position: absolute;
|
|
}
|
|
.light * .toggle-wrapper .toggle-active {
|
|
background-color: rgba(190, 145, 95, 1);
|
|
}
|
|
.light * .module-row {
|
|
margin-bottom: 2px;
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
}
|
|
.light * .button {
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
width: 40%;
|
|
margin-left: 30%;
|
|
margin-top: 40px;
|
|
-webkit-transition: background-color 0.4s ease;
|
|
-moz-transition: background-color 0.4s ease;
|
|
-o-transition: background-color 0.4s ease;
|
|
transition: background-color 0.4s ease;
|
|
background-color: rgba(190, 145, 95, 0);
|
|
}
|
|
.light #module-wrapper .module-out {
|
|
opacity: 0 !important;
|
|
-webkit-transform: translateX(-100px) !important;
|
|
-ms-transform: translateX(-100px) !important;
|
|
transform: translateX(-100px) !important;
|
|
}
|
|
.light #module-wrapper .module {
|
|
margin-right: 20px;
|
|
margin-left: 20px;
|
|
margin-top: 7.5vh;
|
|
margin-bottom: 7.5vh;
|
|
-webkit-transition: visibility 0s ease, opacity 0.4s ease, -webkit-transform 0.4s ease;
|
|
transition: visibility 0s ease, opacity 0.4s ease, -webkit-transform 0.4s ease;
|
|
-moz-transition: visibility 0s ease, opacity 0.4s ease, transform 0.4s ease;
|
|
-o-transition: visibility 0s ease, opacity 0.4s ease, transform 0.4s ease;
|
|
transition: visibility 0s ease, opacity 0.4s ease, transform 0.4s ease;
|
|
transition: visibility 0s ease, opacity 0.4s ease, transform 0.4s ease, -webkit-transform 0.4s ease;
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0px);
|
|
-ms-transform: translateX(0px);
|
|
transform: translateX(0px);
|
|
width: 40vw;
|
|
min-width: 360px;
|
|
max-width: 500px;
|
|
height: -webkit-fit-content;
|
|
height: -moz-fit-content;
|
|
height: fit-content;
|
|
padding-bottom: 30px;
|
|
}
|
|
.light #module-wrapper .module hr{
|
|
width: 90%;
|
|
}
|
|
|
|
/*LIGHT SWITCH*/
|
|
.light .switch-container {
|
|
position: relative;
|
|
margin-left: 50%;
|
|
transform: translateX(-50%);
|
|
display: inline-block;
|
|
width: 60px;
|
|
height: 34px;
|
|
}
|
|
.light .switch-container input {
|
|
display:none;
|
|
}
|
|
.light .slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border-radius: 40px;
|
|
background-color: #ccc;
|
|
-webkit-transition: .4s;
|
|
transition: .4s;
|
|
}
|
|
.slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 26px;
|
|
width: 26px;
|
|
left: 4px;
|
|
bottom: 4px;
|
|
border-radius: 50%;
|
|
background-color: #2a2a2a;
|
|
-webkit-transition: .4s;
|
|
transition: .4s;
|
|
}
|
|
.light input:checked + .slider {
|
|
background-color: #BE915F;
|
|
}
|
|
.light input:checked + .slider:before {
|
|
-webkit-transform: translateX(26px);
|
|
-ms-transform: translateX(26px);
|
|
transform: translateX(26px);
|
|
}
|
|
|
|
/*LIGHT RANGE SLIDER*/
|
|
.light * input[type=range] {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
-o-appearance: none;
|
|
appearance: none;
|
|
width: 80%;
|
|
margin: 8.05px 0;
|
|
margin-left: 10%;
|
|
}
|
|
.light * input[type=range]:focus {
|
|
outline: none;
|
|
}
|
|
.light * input[type=range]::-webkit-slider-runnable-track {
|
|
width: 100%;
|
|
height: 3px;
|
|
cursor: pointer;
|
|
background: #2a2a2a;
|
|
}
|
|
.light * input[type=range]::-webkit-slider-thumb {
|
|
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
|
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
|
height: 23px;
|
|
width: 23px;
|
|
border-radius: 23px;
|
|
background: #be915f;
|
|
cursor: pointer;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
-o-appearance: none;
|
|
appearance: none;
|
|
margin-top: -9.95px;
|
|
}
|
|
.light * input[type=range]::-moz-range-track {
|
|
width: 100%;
|
|
height: 6.9px;
|
|
cursor: pointer;
|
|
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
|
background: #be9163;
|
|
border-radius: 25px;
|
|
border: 1.9px solid #2a2a2a;
|
|
}
|
|
.light * input[type=range]::-moz-range-thumb {
|
|
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
|
border: 2px solid #2a2a2a;
|
|
height: 23px;
|
|
width: 23px;
|
|
border-radius: 23px;
|
|
background: #be915f;
|
|
cursor: pointer;
|
|
}
|
|
.light * input[type=range]::-ms-track {
|
|
width: 100%;
|
|
height: 6.9px;
|
|
cursor: pointer;
|
|
background: transparent;
|
|
border-color: transparent;
|
|
color: transparent;
|
|
}
|
|
.light * input[type=range]::-ms-fill-lower {
|
|
background: #be9163;
|
|
border: 1.9px solid #2a2a2a;
|
|
border-radius: 50px;
|
|
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
|
}
|
|
.light * input[type=range]::-ms-fill-upper {
|
|
background: #be9163;
|
|
border: 1.9px solid #2a2a2a;
|
|
border-radius: 50px;
|
|
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
|
}
|
|
.light * input[type=range]::-ms-thumb {
|
|
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
|
border: 2px solid #2a2a2a;
|
|
height: 23px;
|
|
width: 23px;
|
|
border-radius: 23px;
|
|
background: #be915f;
|
|
cursor: pointer;
|
|
height: 6.9px;
|
|
}
|
|
.light * input[type=range]:focus::-ms-fill-lower {
|
|
background: #be9163;
|
|
}
|
|
.light * input[type=range]:focus::-ms-fill-upper {
|
|
background: #be9163;
|
|
}
|
|
|
|
/*LIGHT DROPDOWN*/
|
|
.light * .select-wrapper{
|
|
position: relative;
|
|
width: 60%;
|
|
height: 34px;
|
|
margin-left: 20%;
|
|
}
|
|
.light * .select-wrapper:before{
|
|
content: "↓";
|
|
font-size: 20px;
|
|
position: absolute;
|
|
right: 15px;
|
|
pointer-events: none;
|
|
top: 10px;
|
|
color: #2a2a2a;
|
|
}
|
|
.light * select{
|
|
-moz-appearance: none;
|
|
-o-appearance: none;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
border: none;
|
|
outline: none;
|
|
color: #2a2a2a;
|
|
width: 100%;
|
|
font-family: "Oswald";
|
|
font-weight: 300;
|
|
font-size: 1.1em;
|
|
padding: 10px;
|
|
padding-left: 30px;
|
|
border-radius: 50px;
|
|
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEW+kV/7NBn+AAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg==');
|
|
}
|
|
.light * select::-ms-expand {
|
|
display: none;
|
|
}
|
|
.light * select option{
|
|
text-align: center;
|
|
}
|
|
|
|
/*MEDIUM INTERFACE*/
|
|
.medium {
|
|
display: inline-block;
|
|
}
|
|
.medium.interface-in {
|
|
background-color: rgba(255, 255, 255, 0.84) !important;
|
|
}
|
|
.medium .cogwheel {
|
|
position: absolute;
|
|
width: 70px;
|
|
cursor: pointer;
|
|
-webkit-transform: rotate(0deg);
|
|
-ms-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
z-index: 2;
|
|
-webkit-transition: -webkit-transform 1s ease;
|
|
transition: -webkit-transform 1s ease;
|
|
-moz-transition: transform 1s ease;
|
|
-o-transition: transform 1s ease;
|
|
transition: transform 1s ease;
|
|
transition: transform 1s ease, -webkit-transform 1s ease;
|
|
}
|
|
.medium .fullscreen {
|
|
pointer-events: all;
|
|
position: absolute;
|
|
right: 0;
|
|
width: 70px;
|
|
cursor: pointer;
|
|
fill: #BE915F;
|
|
-webkit-transform: rotate(0deg);
|
|
-ms-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
z-index: 2;
|
|
-webkit-transition: -webkit-transform 1s ease;
|
|
transition: -webkit-transform 1s ease;
|
|
-moz-transition: transform 1s ease;
|
|
-o-transition: transform 1s ease;
|
|
transition: transform 1s ease;
|
|
transition: transform 1s ease, -webkit-transform 1s ease;
|
|
}
|
|
.medium .cogwheel-in {
|
|
-webkit-transform: rotate(180deg) !important;
|
|
-ms-transform: rotate(180deg) !important;
|
|
transform: rotate(180deg) !important;
|
|
}
|
|
.medium .cogwheel #option {
|
|
-webkit-transition: stroke-width 0.4s ease, opacity 0.4s ease;
|
|
-moz-transition: stroke-width 0.4s ease, opacity 0.4s ease;
|
|
-o-transition: stroke-width 0.4s ease, opacity 0.4s ease;
|
|
transition: stroke-width 0.4s ease, opacity 0.4s ease;
|
|
fill: #BE915F;
|
|
opacity: 1;
|
|
}
|
|
.medium .cogwheel-in #option {
|
|
opacity: 0 !important;
|
|
}
|
|
.medium .cogwheel #close {
|
|
-webkit-transition: stroke-width 0.4s ease, opacity 0.4s ease;
|
|
-moz-transition: stroke-width 0.4s ease, opacity 0.4s ease;
|
|
-o-transition: stroke-width 0.4s ease, opacity 0.4s ease;
|
|
transition: stroke-width 0.4s ease, opacity 0.4s ease;
|
|
fill: #BE915F;
|
|
opacity: 0;
|
|
}
|
|
.medium .cogwheel.cogwheel-in #close {
|
|
opacity: 1 !important;
|
|
}
|
|
.medium .cogwheel #option,#close {
|
|
stroke: #2a2a2a;
|
|
stroke-width: 2px;
|
|
}
|
|
.medium * .toggle-wrapper {
|
|
width: 40%;
|
|
margin-left: 30%;
|
|
height: 40px;
|
|
padding: 0;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
border: solid 2px #2a2a2a;
|
|
}
|
|
.medium * .toggle-wrapper .toggle-right {
|
|
width: 50%;
|
|
height: 100%;
|
|
outline: solid 2px #2a2a2a;
|
|
display: inline-block;
|
|
background-color: rgba(190, 145, 95, 0);
|
|
-webkit-transition: background-color 0.4s ease;
|
|
-moz-transition: background-color 0.4s ease;
|
|
-o-transition: background-color 0.4s ease;
|
|
transition: background-color 0.4s ease;
|
|
}
|
|
.medium * .toggle-wrapper .toggle-left {
|
|
width: 50%;
|
|
height: 100%;
|
|
display: inline-block;
|
|
background-color: rgba(190, 145, 95, 0);
|
|
-webkit-transition: background-color 0.4s ease;
|
|
-moz-transition: background-color 0.4s ease;
|
|
-o-transition: background-color 0.4s ease;
|
|
transition: background-color 0.4s ease;
|
|
}
|
|
.medium * .toggle-wrapper * p {
|
|
text-align: center;
|
|
width: 20%;
|
|
line-height: 10px;
|
|
position: absolute;
|
|
}
|
|
.medium * .toggle-wrapper .toggle-active {
|
|
background-color: rgba(190, 145, 95, 1);
|
|
}
|
|
.medium * .module-row {
|
|
margin-bottom: 2px;
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
}
|
|
.medium * .button {
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
width: 40%;
|
|
margin-left: 30%;
|
|
margin-top: 40px;
|
|
-webkit-transition: background-color 0.4s ease;
|
|
-moz-transition: background-color 0.4s ease;
|
|
-o-transition: background-color 0.4s ease;
|
|
transition: background-color 0.4s ease;
|
|
background-color: rgba(190, 145, 95, 0);
|
|
}
|
|
.medium #module-wrapper .module-out {
|
|
opacity: 0 !important;
|
|
-webkit-transform: translateX(-100px) !important;
|
|
-ms-transform: translateX(-100px) !important;
|
|
transform: translateX(-100px) !important;
|
|
}
|
|
.medium #module-wrapper .module {
|
|
margin-right: 20px;
|
|
margin-left: 20px;
|
|
margin-top: 7.5vh;
|
|
margin-bottom: 7.5vh;
|
|
-webkit-transition: visibility 0s ease, opacity 0.4s ease, -webkit-transform 0.4s ease;
|
|
transition: visibility 0s ease, opacity 0.4s ease, -webkit-transform 0.4s ease;
|
|
-moz-transition: visibility 0s ease, opacity 0.4s ease, transform 0.4s ease;
|
|
-o-transition: visibility 0s ease, opacity 0.4s ease, transform 0.4s ease;
|
|
transition: visibility 0s ease, opacity 0.4s ease, transform 0.4s ease;
|
|
transition: visibility 0s ease, opacity 0.4s ease, transform 0.4s ease, -webkit-transform 0.4s ease;
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0px);
|
|
-ms-transform: translateX(0px);
|
|
transform: translateX(0px);
|
|
width: 40vw;
|
|
min-width: 360px;
|
|
max-width: 500px;
|
|
min-height: 80vh;
|
|
height: -webkit-fit-content;
|
|
height: -moz-fit-content;
|
|
height: fit-content;
|
|
padding-bottom: 30px;
|
|
background-color: white;
|
|
-webkit-box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.25);
|
|
box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.25);
|
|
}
|
|
.medium #module-wrapper .module hr{
|
|
width: 90%;
|
|
}
|
|
|
|
/*MEDIUM CHECKBOX*/
|
|
.medium * .checkbox-container {
|
|
display: block;
|
|
position: relative;
|
|
padding-left: 35px;
|
|
margin-bottom: 12px;
|
|
cursor: pointer;
|
|
font-size: 22px;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
width: 50%;
|
|
margin-left: 60%;
|
|
margin-top: 7px;
|
|
margin-bottom: 10%;
|
|
}
|
|
.medium * .checkbox-container input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
}
|
|
.medium * .checkmark {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 25px;
|
|
width: 25px;
|
|
background-color: #eee;
|
|
background-color: #BE915F;
|
|
}
|
|
.medium * .checkmark:after {
|
|
content: "✖";
|
|
position: absolute;
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
.medium * .checkbox-container input:checked~.checkmark:after {
|
|
opacity: 1;
|
|
}
|
|
.medium * .checkbox-container .checkmark:after {
|
|
left: 4px;
|
|
top: 2px;
|
|
width: 5px;
|
|
height: 10px;
|
|
}
|
|
|
|
/*MEDIUM RANGE SLIDER*/
|
|
.medium * input[type=range] {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
-o-appearance: none;
|
|
appearance: none;
|
|
width: 80%;
|
|
margin: 8.05px 0;
|
|
margin-left: 10%;
|
|
}
|
|
.medium * input[type=range]:focus {
|
|
outline: none;
|
|
}
|
|
.medium * input[type=range]::-webkit-slider-runnable-track {
|
|
width: 100%;
|
|
height: 3px;
|
|
cursor: pointer;
|
|
background: #2a2a2a;
|
|
}
|
|
.medium * input[type=range]::-webkit-slider-thumb {
|
|
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
|
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
|
height: 23px;
|
|
width: 23px;
|
|
border-radius: 23px;
|
|
background: #be915f;
|
|
cursor: pointer;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
-o-appearance: none;
|
|
appearance: none;
|
|
margin-top: -9.95px;
|
|
}
|
|
.medium * input[type=range]::-moz-range-track {
|
|
width: 100%;
|
|
height: 6.9px;
|
|
cursor: pointer;
|
|
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
|
background: #be9163;
|
|
border-radius: 25px;
|
|
border: 1.9px solid #2a2a2a;
|
|
}
|
|
.medium * input[type=range]::-moz-range-thumb {
|
|
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
|
border: 2px solid #2a2a2a;
|
|
height: 23px;
|
|
width: 23px;
|
|
border-radius: 23px;
|
|
background: #be915f;
|
|
cursor: pointer;
|
|
}
|
|
.medium * input[type=range]::-ms-track {
|
|
width: 100%;
|
|
height: 6.9px;
|
|
cursor: pointer;
|
|
background: transparent;
|
|
border-color: transparent;
|
|
color: transparent;
|
|
}
|
|
.medium * input[type=range]::-ms-fill-lower {
|
|
background: #be9163;
|
|
border: 1.9px solid #2a2a2a;
|
|
border-radius: 50px;
|
|
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
|
}
|
|
.medium * input[type=range]::-ms-fill-upper {
|
|
background: #be9163;
|
|
border: 1.9px solid #2a2a2a;
|
|
border-radius: 50px;
|
|
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
|
}
|
|
.medium * input[type=range]::-ms-thumb {
|
|
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
|
border: 2px solid #2a2a2a;
|
|
height: 23px;
|
|
width: 23px;
|
|
border-radius: 23px;
|
|
background: #be915f;
|
|
cursor: pointer;
|
|
height: 6.9px;
|
|
}
|
|
.medium * input[type=range]:focus::-ms-fill-lower {
|
|
background: #be9163;
|
|
}
|
|
.medium * input[type=range]:focus::-ms-fill-upper {
|
|
background: #be9163;
|
|
}
|
|
|
|
/*Medium DROPDOWN*/
|
|
.medium * .select-wrapper{
|
|
position: relative;
|
|
width: 60%;
|
|
height: 34px;
|
|
margin-left: 20%;
|
|
}
|
|
.medium * .select-wrapper:before{
|
|
content: "▼";
|
|
font-size: 18px;
|
|
padding-top: 4px;
|
|
position: absolute;
|
|
right: 15px;
|
|
pointer-events: none;
|
|
top: 10px;
|
|
color: #2a2a2a;
|
|
}
|
|
.medium * select{
|
|
-moz-appearance: none;
|
|
-o-appearance: none;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
border: none;
|
|
outline: none;
|
|
color: #2a2a2a;
|
|
width: 100%;
|
|
font-family: "Oswald";
|
|
font-weight: 300;
|
|
font-size: 1.1em;
|
|
padding: 10px;
|
|
padding-left: 30px;
|
|
border-radius: 0;
|
|
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEW+kV/7NBn+AAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg==');
|
|
}
|
|
.medium * select::-ms-expand {
|
|
display: none;
|
|
}
|
|
.medium * select option{
|
|
text-align: center;
|
|
}
|
|
|
|
/*HEAVY INTERFACE*/
|
|
|
|
.heavy {
|
|
display: inline-block;
|
|
}
|
|
.heavy.interface-in {
|
|
background-color: rgba(255, 255, 255, 0.84) !important;
|
|
}
|
|
.heavy .cogwheel {
|
|
position: absolute;
|
|
width: 70px;
|
|
cursor: pointer;
|
|
-webkit-transform: rotate(0deg);
|
|
-ms-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
z-index: 2;
|
|
-webkit-transition: -webkit-transform 1s ease;
|
|
transition: -webkit-transform 1s ease;
|
|
-moz-transition: transform 1s ease;
|
|
-o-transition: transform 1s ease;
|
|
transition: transform 1s ease;
|
|
transition: transform 1s ease, -webkit-transform 1s ease;
|
|
}
|
|
.heavy .fullscreen {
|
|
pointer-events: all;
|
|
position: absolute;
|
|
right: 0;
|
|
width: 70px;
|
|
cursor: pointer;
|
|
fill: #BE915F;
|
|
-webkit-transform: rotate(0deg);
|
|
-ms-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
z-index: 2;
|
|
-webkit-transition: -webkit-transform 1s ease;
|
|
transition: -webkit-transform 1s ease;
|
|
-moz-transition: transform 1s ease;
|
|
-o-transition: transform 1s ease;
|
|
transition: transform 1s ease;
|
|
transition: transform 1s ease, -webkit-transform 1s ease;
|
|
}
|
|
.heavy .cogwheel-in {
|
|
-webkit-transform: rotate(180deg) !important;
|
|
-ms-transform: rotate(180deg) !important;
|
|
transform: rotate(180deg) !important;
|
|
}
|
|
.heavy .cogwheel path {
|
|
-webkit-transition: stroke-width 0.4s ease, opacity 0.4s ease;
|
|
-moz-transition: stroke-width 0.4s ease, opacity 0.4s ease;
|
|
-o-transition: stroke-width 0.4s ease, opacity 0.4s ease;
|
|
transition: stroke-width 0.4s ease, opacity 0.4s ease;
|
|
fill: #BE915F;
|
|
opacity: 1;
|
|
}
|
|
.heavy .cogwheel-in path {
|
|
opacity: 0 !important;
|
|
}
|
|
.heavy .cogwheel polygon {
|
|
-webkit-transition: stroke-width 0.4s ease, opacity 0.4s ease;
|
|
-moz-transition: stroke-width 0.4s ease, opacity 0.4s ease;
|
|
-o-transition: stroke-width 0.4s ease, opacity 0.4s ease;
|
|
transition: stroke-width 0.4s ease, opacity 0.4s ease;
|
|
fill: #BE915F;
|
|
opacity: 0;
|
|
}
|
|
.heavy .cogwheel.cogwheel-in polygon {
|
|
opacity: 1 !important;
|
|
}
|
|
.heavy .cogwheel path,polygon {
|
|
stroke: #2a2a2a;
|
|
stroke-width: 2px;
|
|
}
|
|
.heavy * .toggle-wrapper {
|
|
width: 40%;
|
|
margin-left: 30%;
|
|
height: 40px;
|
|
padding: 0;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
border: solid 2px #2a2a2a;
|
|
}
|
|
.heavy * .toggle-wrapper .toggle-right {
|
|
width: 50%;
|
|
height: 100%;
|
|
outline: solid 2px #2a2a2a;
|
|
display: inline-block;
|
|
background-color: rgba(190, 145, 95, 0);
|
|
-webkit-transition: background-color 0.4s ease;
|
|
-moz-transition: background-color 0.4s ease;
|
|
-o-transition: background-color 0.4s ease;
|
|
transition: background-color 0.4s ease;
|
|
}
|
|
.heavy * .toggle-wrapper .toggle-left {
|
|
width: 50%;
|
|
height: 100%;
|
|
display: inline-block;
|
|
background-color: rgba(190, 145, 95, 0);
|
|
-webkit-transition: background-color 0.4s ease;
|
|
-moz-transition: background-color 0.4s ease;
|
|
-o-transition: background-color 0.4s ease;
|
|
transition: background-color 0.4s ease;
|
|
}
|
|
.heavy * .toggle-wrapper * p {
|
|
text-align: center;
|
|
width: 20%;
|
|
line-height: 10px;
|
|
position: absolute;
|
|
}
|
|
.heavy * .toggle-wrapper .toggle-active {
|
|
background-color: rgba(190, 145, 95, 1);
|
|
}
|
|
.heavy * .module-row {
|
|
outline: solid 2px #2a2a2a;
|
|
margin-bottom: 2px;
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
}
|
|
.heavy * .button {
|
|
cursor: pointer;
|
|
border-radius: 10px;
|
|
border: solid 2px #2a2a2a;
|
|
width: 40%;
|
|
margin-left: 30%;
|
|
margin-top: 40px;
|
|
-webkit-transition: background-color 0.4s ease;
|
|
-moz-transition: background-color 0.4s ease;
|
|
-o-transition: background-color 0.4s ease;
|
|
transition: background-color 0.4s ease;
|
|
background-color: rgba(190, 145, 95, 0);
|
|
}
|
|
.heavy * .button:hover {
|
|
background-color: rgba(190, 145, 95, 1);
|
|
}
|
|
.heavy #module-wrapper .module-out {
|
|
opacity: 0 !important;
|
|
-webkit-transform: translateY(500px) !important;
|
|
-ms-transform: translateY(500px) !important;
|
|
transform: translateY(500px) !important;
|
|
}
|
|
.heavy #module-wrapper .module {
|
|
margin-right: 20px;
|
|
margin-left: 20px;
|
|
margin-top: 7.5vh;
|
|
margin-bottom: 7.5vh;
|
|
-webkit-transition: visibility 0s ease, opacity 0.4s ease, -webkit-transform 0.4s ease;
|
|
transition: visibility 0s ease, opacity 0.4s ease, -webkit-transform 0.4s ease;
|
|
-moz-transition: visibility 0s ease, opacity 0.4s ease, transform 0.4s ease;
|
|
-o-transition: visibility 0s ease, opacity 0.4s ease, transform 0.4s ease;
|
|
transition: visibility 0s ease, opacity 0.4s ease, transform 0.4s ease;
|
|
transition: visibility 0s ease, opacity 0.4s ease, transform 0.4s ease, -webkit-transform 0.4s ease;
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0px);
|
|
-ms-transform: translateY(0px);
|
|
transform: translateY(0px);
|
|
width: 40vw;
|
|
min-width: 360px;
|
|
max-width: 500px;
|
|
min-height: 80vh;
|
|
height: -webkit-fit-content;
|
|
height: -moz-fit-content;
|
|
height: fit-content;
|
|
padding-bottom: 30px;
|
|
background-color: white;
|
|
border-radius: 10px;
|
|
border: solid 2px #2a2a2a;
|
|
-webkit-box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.25);
|
|
box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
/*HEAVY RANGE SLIDER*/
|
|
.heavy * input[type=range] {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
-o-appearance: none;
|
|
appearance: none;
|
|
width: 80%;
|
|
margin: 8.05px 0;
|
|
margin-left: 10%;
|
|
}
|
|
.heavy * input[type=range]:focus {
|
|
outline: none;
|
|
}
|
|
.heavy * input[type=range]::-webkit-slider-runnable-track {
|
|
width: 100%;
|
|
height: 6.9px;
|
|
cursor: pointer;
|
|
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
|
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
|
background: #be9163;
|
|
border-radius: 25px;
|
|
border: 1.9px solid #2a2a2a;
|
|
}
|
|
.heavy * input[type=range]::-webkit-slider-thumb {
|
|
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
|
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
|
border: 2px solid #2a2a2a;
|
|
height: 23px;
|
|
width: 23px;
|
|
border-radius: 23px;
|
|
background: #be915f;
|
|
cursor: pointer;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
-o-appearance: none;
|
|
appearance: none;
|
|
margin-top: -9.95px;
|
|
}
|
|
.heavy * input[type=range]:focus::-webkit-slider-runnable-track {
|
|
background: #be9163;
|
|
}
|
|
.heavy * input[type=range]::-moz-range-track {
|
|
width: 100%;
|
|
height: 6.9px;
|
|
cursor: pointer;
|
|
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
|
background: #be9163;
|
|
border-radius: 25px;
|
|
border: 1.9px solid #2a2a2a;
|
|
}
|
|
.heavy * input[type=range]::-moz-range-thumb {
|
|
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
|
border: 2px solid #2a2a2a;
|
|
height: 23px;
|
|
width: 23px;
|
|
border-radius: 23px;
|
|
background: #be915f;
|
|
cursor: pointer;
|
|
}
|
|
.heavy * input[type=range]::-ms-track {
|
|
width: 100%;
|
|
height: 6.9px;
|
|
cursor: pointer;
|
|
background: transparent;
|
|
border-color: transparent;
|
|
color: transparent;
|
|
}
|
|
.heavy * input[type=range]::-ms-fill-lower {
|
|
background: #be9163;
|
|
border: 1.9px solid #2a2a2a;
|
|
border-radius: 50px;
|
|
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
|
}
|
|
.heavy * input[type=range]::-ms-fill-upper {
|
|
background: #be9163;
|
|
border: 1.9px solid #2a2a2a;
|
|
border-radius: 50px;
|
|
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
|
}
|
|
.heavy * input[type=range]::-ms-thumb {
|
|
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
|
border: 2px solid #2a2a2a;
|
|
height: 23px;
|
|
width: 23px;
|
|
border-radius: 23px;
|
|
background: #be915f;
|
|
cursor: pointer;
|
|
height: 6.9px;
|
|
}
|
|
.heavy * input[type=range]:focus::-ms-fill-lower {
|
|
background: #be9163;
|
|
}
|
|
.heavy * input[type=range]:focus::-ms-fill-upper {
|
|
background: #be9163;
|
|
}
|
|
|
|
/*HEAVY DROPDOWN*/
|
|
.heavy * .select-wrapper{
|
|
position: relative;
|
|
width: 60%;
|
|
height: 34px;
|
|
margin-left: 20%;
|
|
}
|
|
.heavy * .select-wrapper:before{
|
|
content: "▼";
|
|
font-size: 18px;
|
|
padding-top: 4px;
|
|
position: absolute;
|
|
right: 15px;
|
|
pointer-events: none;
|
|
top: 10px;
|
|
color: #2a2a2a;
|
|
}
|
|
.heavy * select{
|
|
-moz-appearance: none;
|
|
-o-appearance: none;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
border: none;
|
|
border: solid 2px #2a2a2a;
|
|
color: #2a2a2a;
|
|
width: 100%;
|
|
font-family: "Oswald";
|
|
font-weight: 300;
|
|
font-size: 1.1em;
|
|
padding: 10px;
|
|
padding-left: 30px;
|
|
border-radius: 5px;
|
|
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEW+kV/7NBn+AAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg==');
|
|
}
|
|
.heavy * select::-ms-expand {
|
|
display: none;
|
|
}
|
|
.heavy * select option{
|
|
text-align: center;
|
|
}
|
|
|
|
@media screen and (max-width: 808px){
|
|
.module{
|
|
width: 90vw !important;
|
|
height: fit-content !important;
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
}; |