Optimised CSS + indenting consistency
This commit is contained in:
Mountain/\Ash
parent
9ced975e86
commit
03b2ceb029
@ -19,21 +19,13 @@
|
||||
--c-r: #c32;
|
||||
--c-g: #2c1;
|
||||
--c-l: #48a;
|
||||
--c-y: #a90;
|
||||
--t-b: 0.5;
|
||||
--c-o: rgba(34, 34, 34, 0.9);
|
||||
--c-tb : rgba(34, 34, 34, var(--t-b));
|
||||
--c-tba: rgba(102, 102, 102, var(--t-b));
|
||||
--c-tbh: rgba(51, 51, 51, var(--t-b));
|
||||
/*following are internal*/
|
||||
--c-o: rgba(34, 34, 34, .9);
|
||||
--c-tb : rgba(34, 34, 34, .5);
|
||||
--c-tba: rgba(102, 102, 102, .5);
|
||||
--c-tbh: rgba(51, 51, 51, .5);
|
||||
--th: 70px;
|
||||
--tp: 70px;
|
||||
--bh: 63px;
|
||||
--tbp: 14px 14px 10px 14px;
|
||||
--bbp: 9px 0 7px 0;
|
||||
--bhd: none;
|
||||
--sgp: "block";
|
||||
--bmt: 0px;
|
||||
}
|
||||
|
||||
html {
|
||||
@ -88,7 +80,7 @@ a, a:visited {
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -104,7 +96,6 @@ button {
|
||||
color: var(--c-8); /* set bright (--c-d) with dark text shadow (see below) to be legible on gray background (in image) */
|
||||
cursor: pointer;
|
||||
writing-mode: vertical-rl;
|
||||
/* transform: rotate(180deg); */
|
||||
}
|
||||
|
||||
.bri {
|
||||
@ -134,7 +125,6 @@ button {
|
||||
|
||||
.off {
|
||||
color: var(--c-6) !important;
|
||||
/* cursor: default !important; */
|
||||
}
|
||||
|
||||
.top .icons, .bot .icons {
|
||||
@ -153,7 +143,6 @@ button {
|
||||
.segt TD {
|
||||
padding: 2px 0 !important;
|
||||
text-align: center;
|
||||
/*text-transform: uppercase;*/
|
||||
}
|
||||
.segt TD, .plentry TD {
|
||||
font-size: 13px;
|
||||
@ -219,7 +208,7 @@ button {
|
||||
.pop-c span {
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
@ -238,7 +227,7 @@ button {
|
||||
.flr {
|
||||
color: var(--c-f);
|
||||
transform: rotate(0deg);
|
||||
transition: transform 0.3s;
|
||||
transition: transform .3s;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
@ -258,13 +247,13 @@ button {
|
||||
#liveview {
|
||||
height: 4px;
|
||||
width: 100%;
|
||||
border: 0px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#liveview2D {
|
||||
height: 90%;
|
||||
width: 90%;
|
||||
border: 0px;
|
||||
border: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@ -287,21 +276,21 @@ button {
|
||||
.tab button {
|
||||
background-color: transparent;
|
||||
float: left;
|
||||
border: none;
|
||||
transition: color 0.3s, background-color 0.3s;
|
||||
border: 0;
|
||||
transition: color .3s, background-color .3s;
|
||||
font-size: 17px;
|
||||
color: var(--c-c);
|
||||
min-width: 44px;
|
||||
}
|
||||
|
||||
.top button {
|
||||
padding: var(--tbp);
|
||||
padding: 14px 14px 10px 14px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.bot button {
|
||||
padding: var(--bbp);
|
||||
width:25%;
|
||||
padding: 9px 0 7px 0;
|
||||
width: 25%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -336,7 +325,7 @@ button {
|
||||
width: 100%;
|
||||
width: calc(100%/var(--n));
|
||||
box-sizing: border-box;
|
||||
border: 0px;
|
||||
border: 0;
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
overscroll-behavior: none;
|
||||
@ -373,7 +362,7 @@ button {
|
||||
.tab-label {
|
||||
margin: 0 0 -5px 0;
|
||||
padding-bottom: 4px;
|
||||
display: var(--bhd);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
@ -388,8 +377,8 @@ button {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 11;
|
||||
opacity: 0.95;
|
||||
transition: 0.7s;
|
||||
opacity: .95;
|
||||
transition: .7s;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -399,7 +388,7 @@ button {
|
||||
position: sticky !important;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
margin: 0 auto auto;
|
||||
margin: 0 auto auto;
|
||||
}
|
||||
|
||||
.staybot {
|
||||
@ -419,8 +408,6 @@ button {
|
||||
}
|
||||
|
||||
.slider {
|
||||
/*max-width: 300px;*/
|
||||
/* margin: 5px auto; add 5px; if you want some vertical space but looks ugly */
|
||||
border-radius: 24px;
|
||||
position: relative;
|
||||
padding-bottom: 2px;
|
||||
@ -452,11 +439,10 @@ button {
|
||||
border-radius: 26px;
|
||||
height: 26px;
|
||||
max-width: 300px;
|
||||
/* margin: 0 auto 4px; add 4-8px if you want space at the bottom */
|
||||
padding: 4px 2px;
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
transition: opacity 0.5s linear, height 0.5s, transform 0.5s;
|
||||
transition: opacity .5s linear, height .5s, transform .5s;
|
||||
}
|
||||
|
||||
.filter {
|
||||
@ -468,7 +454,6 @@ button {
|
||||
.slider .tooltiptext, .option .tooltiptext {
|
||||
visibility: hidden;
|
||||
background-color: var(--c-5);
|
||||
/*border: 2px solid var(--c-2);*/
|
||||
box-shadow: 4px 4px 10px 4px var(--c-1);
|
||||
color: var(--c-f);
|
||||
text-align: center;
|
||||
@ -488,7 +473,7 @@ button {
|
||||
|
||||
/* Fade in tooltip */
|
||||
opacity: 0;
|
||||
transition: opacity 0.75s;
|
||||
transition: opacity .75s;
|
||||
}
|
||||
.option .tooltiptext {
|
||||
bottom: 120%;
|
||||
@ -514,7 +499,7 @@ button {
|
||||
visibility: hidden; /* hide it */
|
||||
opacity: 0; /* make it transparent */
|
||||
transform: scaleY(0); /* shrink content */
|
||||
height: 0px; /* force other elements to move */
|
||||
height: 0; /* force other elements to move */
|
||||
padding: 0; /* remove empty space */
|
||||
}
|
||||
|
||||
@ -542,24 +527,24 @@ button {
|
||||
|
||||
#toast.show {
|
||||
opacity: 1;
|
||||
animation: fadein 0.5s, fadein 0.5s 2.5s reverse;
|
||||
animation: fadein .5s, fadein .5s 2.5s reverse;
|
||||
}
|
||||
|
||||
#toast.error {
|
||||
opacity: 1;
|
||||
background-color: #b21;
|
||||
animation: fadein 0.5s;
|
||||
animation: fadein .5s;
|
||||
}
|
||||
|
||||
.modal {
|
||||
position:fixed;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
top: calc(var(--th) - 1px);
|
||||
background-color: var(--c-o);
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.4s;
|
||||
transition: transform .4s;
|
||||
padding: 8px;
|
||||
font-size: 20px;
|
||||
overflow: auto;
|
||||
@ -617,7 +602,7 @@ button {
|
||||
}
|
||||
|
||||
#info td, #nodes td {
|
||||
padding-bottom: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
#info .btn {
|
||||
@ -641,7 +626,7 @@ button {
|
||||
}
|
||||
|
||||
#heart {
|
||||
transition: color 0.9s;
|
||||
transition: color .9s;
|
||||
font-size: 16px;
|
||||
color: #f00;
|
||||
}
|
||||
@ -665,7 +650,9 @@ img {
|
||||
.sliderdisplay {
|
||||
content:'';
|
||||
position: absolute;
|
||||
top: 12px; left: 8px; right: 8px;
|
||||
top: 12px;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
height: 5px;
|
||||
background: var(--c-4);
|
||||
border-radius: 16px;
|
||||
@ -701,7 +688,6 @@ img {
|
||||
transition: visibility .25s ease,opacity .25s ease;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
/* left: 8px; */
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
@ -720,7 +706,7 @@ input[type=range] {
|
||||
}
|
||||
|
||||
input[type=range]:focus {
|
||||
outline: none;
|
||||
outline: 0;
|
||||
}
|
||||
input[type=range]::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
@ -743,7 +729,7 @@ input[type=range]::-moz-range-track {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
input[type=range]::-moz-range-thumb {
|
||||
border: 0px solid rgba(0, 0, 0, 0);
|
||||
border: 0;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border-radius: 50%;
|
||||
@ -766,13 +752,13 @@ input[type=range]::-moz-range-thumb {
|
||||
|
||||
/* Dynamically hide brightness slider label */
|
||||
.hd {
|
||||
display: var(--bhd);
|
||||
display: none;
|
||||
}
|
||||
|
||||
#briwrap {
|
||||
min-width: 267px;
|
||||
float: right;
|
||||
margin-top: var(--bmt);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#picker {
|
||||
@ -789,11 +775,11 @@ input[type=range]::-moz-range-thumb {
|
||||
color: var(--c-d);
|
||||
cursor: pointer;
|
||||
border-radius: 25px;
|
||||
transition-duration: 0.3s;
|
||||
transition-duration: .3s;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-webkit-transform:translate3d(0,0,0);
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
backface-visibility: hidden;
|
||||
transform:translate3d(0,0,0);
|
||||
transform: translate3d(0,0,0);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
border: 1px solid var(--c-3);
|
||||
@ -893,13 +879,13 @@ select {
|
||||
cursor: pointer;
|
||||
border: 0 solid var(--c-2);
|
||||
border-radius: 20px;
|
||||
transition-duration: 0.5s;
|
||||
transition-duration: .5s;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-webkit-transform:translate3d(0,0,0);
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
backface-visibility: hidden;
|
||||
transform:translate3d(0,0,0);
|
||||
transform: translate3d(0,0,0);
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
#tt {
|
||||
@ -917,15 +903,15 @@ div.sel-p {
|
||||
position: relative;
|
||||
}
|
||||
div.sel-p:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 22px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 8px solid transparent;
|
||||
border-right: 8px solid transparent;
|
||||
border-top: 8px solid var(--c-f);
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 22px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 8px solid transparent;
|
||||
border-right: 8px solid transparent;
|
||||
border-top: 8px solid var(--c-f);
|
||||
}
|
||||
select.sel-ple {
|
||||
text-align: center;
|
||||
@ -942,13 +928,12 @@ input[type=number],
|
||||
input[type=text] {
|
||||
background: var(--c-3);
|
||||
color: var(--c-f);
|
||||
border: 0px solid var(--c-2);
|
||||
border: 0 solid var(--c-2);
|
||||
border-radius: 10px;
|
||||
padding: 8px;
|
||||
/*margin: 6px 6px 6px 0;*/
|
||||
font-size: 19px;
|
||||
transition: background-color 0.2s;
|
||||
outline: none;
|
||||
transition: background-color .2s;
|
||||
outline: 0;
|
||||
-webkit-appearance: textfield;
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
@ -988,7 +973,7 @@ textarea {
|
||||
height: 90px;
|
||||
border-radius: 5px;
|
||||
border: 2px solid var(--c-5);
|
||||
outline: none;
|
||||
outline: 0;
|
||||
resize: none;
|
||||
font-size: 19px;
|
||||
padding: 5px;
|
||||
@ -1003,7 +988,7 @@ textarea {
|
||||
}
|
||||
|
||||
.ptxt {
|
||||
margin: -1px 4px 8px !important;
|
||||
margin: -1px 4px 8px !important;
|
||||
}
|
||||
|
||||
.stxt {
|
||||
@ -1031,8 +1016,7 @@ textarea {
|
||||
|
||||
/* segment power wrapper */
|
||||
.sbs {
|
||||
/*padding: 1px 0 1px 20px;*/
|
||||
display: var(--sgp);
|
||||
display: block;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
@ -1041,7 +1025,7 @@ textarea {
|
||||
top: 1px;
|
||||
}
|
||||
.plname {
|
||||
top:0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* preset id number */
|
||||
@ -1121,8 +1105,8 @@ textarea {
|
||||
}
|
||||
|
||||
.revchkl {
|
||||
padding: 4px 0px 0px 35px;
|
||||
margin-bottom: 0px;
|
||||
padding: 4px 0 0 35px;
|
||||
margin-bottom: 0;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
@ -1217,10 +1201,9 @@ TD .checkmark, TD .radiomark {
|
||||
/* segment & preset wrapper */
|
||||
.seg, .pres {
|
||||
background-color: var(--c-2);
|
||||
/*color: var(--c-f);*/ /* seems to affect only the Add segment button, which should be same color as reset segments */
|
||||
border: 0px solid var(--c-f);
|
||||
border: 0 solid var(--c-f);
|
||||
text-align: left;
|
||||
transition: background-color 0.5s;
|
||||
transition: background-color .5s;
|
||||
border-radius: 21px;
|
||||
}
|
||||
|
||||
@ -1237,7 +1220,7 @@ TD .checkmark, TD .radiomark {
|
||||
/* checkmark labels */
|
||||
.filter .fchkl, .option .ochkl {
|
||||
display: inline-block;
|
||||
min-width: 0.7em;
|
||||
min-width: .7em;
|
||||
padding: 1px 4px 4px 32px;
|
||||
text-align: left;
|
||||
line-height: 24px;
|
||||
@ -1263,15 +1246,15 @@ TD .checkmark, TD .radiomark {
|
||||
/* list wrapper */
|
||||
.list {
|
||||
position: relative;
|
||||
transition: background-color 0.5s;
|
||||
margin: auto auto 10px;
|
||||
transition: background-color .5s;
|
||||
margin: auto auto 10px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
/* list item */
|
||||
.lstI {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
background-color: var(--c-2);
|
||||
overflow: hidden;
|
||||
position: -webkit-sticky;
|
||||
@ -1293,7 +1276,7 @@ TD .checkmark, TD .radiomark {
|
||||
|
||||
#segcont .seg:hover:not([class*="expanded"]),
|
||||
.lstI:hover:not([class*="expanded"]) {
|
||||
background: var(--c-5);
|
||||
background: var(--c-5);
|
||||
}
|
||||
|
||||
.selected .checkmark,
|
||||
@ -1313,7 +1296,7 @@ TD .checkmark, TD .radiomark {
|
||||
.lstI.sticky,
|
||||
.lstI.selected {
|
||||
z-index: 1;
|
||||
box-shadow: 0px 0px 10px 4px var(--c-1);
|
||||
box-shadow: 0 0 10px 4px var(--c-1);
|
||||
}
|
||||
|
||||
#pcont .selected:not([class*="expanded"]) {
|
||||
@ -1370,8 +1353,8 @@ TD .checkmark, TD .radiomark {
|
||||
display: block;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 8px 40px 8px 44px;
|
||||
margin: 5px auto 0;
|
||||
padding: 8px 40px 8px 44px;
|
||||
margin: 5px auto 0;
|
||||
text-align: left;
|
||||
border-radius: 21px;
|
||||
background: var(--c-2);
|
||||
@ -1457,7 +1440,7 @@ TD .checkmark, TD .radiomark {
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--c-sb);
|
||||
opacity: 0.2;
|
||||
opacity: .2;
|
||||
border-radius: 5px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
@ -1483,8 +1466,8 @@ TD .checkmark, TD .radiomark {
|
||||
|
||||
@media all and (max-width: 335px) {
|
||||
.sliderbubble {
|
||||
display: none;
|
||||
}
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 550px) and (min-width: 374px) {
|
||||
|
||||
@ -80,7 +80,7 @@ a, a:visited {
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
@ -91,7 +91,7 @@ button {
|
||||
min-height: 40px;
|
||||
}
|
||||
button:hover {
|
||||
background: var(--c-4);
|
||||
background: var(--c-4);
|
||||
}
|
||||
|
||||
.label {
|
||||
@ -293,7 +293,7 @@ button:hover {
|
||||
}
|
||||
|
||||
#ndlt {
|
||||
margin: 12px 0;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
#roverstar {
|
||||
@ -320,7 +320,6 @@ button:hover {
|
||||
}
|
||||
|
||||
#kv, #kn {
|
||||
/*max-width: 490px;*/
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@ -330,7 +329,7 @@ button:hover {
|
||||
}
|
||||
|
||||
#info td, #nodes td {
|
||||
padding-bottom: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
#info .btn {
|
||||
@ -346,7 +345,7 @@ button:hover {
|
||||
}
|
||||
|
||||
#kn td {
|
||||
padding-bottom: 12px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
#heart {
|
||||
@ -385,7 +384,9 @@ img {
|
||||
.sliderdisplay {
|
||||
content:'';
|
||||
position: absolute;
|
||||
top: 10px; left: 8px; right: 8px;
|
||||
top: 10px;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
height: 8px;
|
||||
background: var(--c-4);
|
||||
border-radius: 16px;
|
||||
@ -394,9 +395,10 @@ img {
|
||||
}
|
||||
#Colors .sliderdisplay {
|
||||
height: 28px;
|
||||
top: 0; bottom: 0;
|
||||
left: 0; right: 0;
|
||||
/*border: 1px solid var(--c-b);*/
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
#rwrap .sliderdisplay { background: linear-gradient(90deg, #000 0%, #f00); }
|
||||
#gwrap .sliderdisplay { background: linear-gradient(90deg, #000 0%, #0f0); }
|
||||
@ -482,8 +484,8 @@ input[type=range]::-moz-range-thumb {
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
width: 280px;
|
||||
margin: 0 0 0 20px;
|
||||
-ms-overflow-style: none;
|
||||
margin: 0 0 0 20px;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
@ -579,7 +581,7 @@ input[type=number], input[type=text] {
|
||||
margin: 6px 6px 6px 0;
|
||||
font-size: 19px;
|
||||
transition: background-color .2s;
|
||||
outline: none;
|
||||
outline: 0;
|
||||
width: 50px;
|
||||
-webkit-appearance: textfield;
|
||||
-moz-appearance: textfield;
|
||||
@ -734,13 +736,13 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
position: relative;
|
||||
width: 280px;
|
||||
transition: background-color .5s;
|
||||
margin: auto auto 20px;
|
||||
margin: auto auto 20px;
|
||||
font-size: 19px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.lstI {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
background-color: var(--c-2);
|
||||
overflow: hidden;
|
||||
border-radius: 20px;
|
||||
@ -757,13 +759,13 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
}
|
||||
|
||||
.lstI:hover {
|
||||
background: var(--c-4);
|
||||
background: var(--c-4);
|
||||
}
|
||||
/*
|
||||
.lstI:last-child {
|
||||
border: 0;
|
||||
border-radius: 0 0 20px 20px;
|
||||
padding-bottom: 10px;
|
||||
border-radius: 0 0 20px 20px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
*/
|
||||
.lstIcontent {
|
||||
@ -784,7 +786,7 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dropdown Content (Hidden by Default) */
|
||||
.dd-content {
|
||||
@ -838,12 +840,12 @@ input[type=text].fnd {
|
||||
display: block;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 8px 48px 8px 48px;
|
||||
margin: 5px auto 0;
|
||||
padding: 8px 48px 8px 48px;
|
||||
margin: 5px auto 0;
|
||||
text-align: left;
|
||||
border-radius: 25px;
|
||||
background-color: var(--c-2);
|
||||
border: 1px solid var(--c-4);
|
||||
border: 1px solid var(--c-4);
|
||||
}
|
||||
|
||||
input[type=text].fnd:focus {
|
||||
@ -882,8 +884,8 @@ input[type=text].fnd:not(:placeholder-shown), input[type=text].fnd:hover {
|
||||
|
||||
@media all and (max-width: 335px) {
|
||||
.sliderbubble {
|
||||
display: none;
|
||||
}
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 550px) and (min-width: 374px) {
|
||||
|
||||
@ -2,147 +2,147 @@ html {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
body {
|
||||
font-family: Verdana, sans-serif;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
background: #222;
|
||||
color: #fff;
|
||||
line-height: 200%;
|
||||
margin: 0;
|
||||
font-family: Verdana, sans-serif;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
background: #222;
|
||||
color: #fff;
|
||||
line-height: 200%;
|
||||
margin: 0;
|
||||
}
|
||||
hr {
|
||||
border-color: #666;
|
||||
border-color: #666;
|
||||
}
|
||||
hr.sml {
|
||||
width: 260px;
|
||||
width: 260px;
|
||||
}
|
||||
a, a:hover {
|
||||
color: #28f;
|
||||
text-decoration: none;
|
||||
color: #28f;
|
||||
text-decoration: none;
|
||||
}
|
||||
button, .btn {
|
||||
background: #333;
|
||||
color: #fff;
|
||||
font-family: Verdana, sans-serif;
|
||||
border: 0.3ch solid #333;
|
||||
background: #333;
|
||||
color: #fff;
|
||||
font-family: Verdana, sans-serif;
|
||||
border: .3ch solid #333;
|
||||
border-radius: 24px;
|
||||
display: inline-block;
|
||||
font-size: 20px;
|
||||
margin: 12px 8px 8px;
|
||||
padding: 8px 12px;
|
||||
min-width: 48px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 20px;
|
||||
margin: 12px 8px 8px;
|
||||
padding: 8px 12px;
|
||||
min-width: 48px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
button.sml {
|
||||
padding: 8px;
|
||||
border-radius: 20px;
|
||||
font-size: 15px;
|
||||
min-width: 40px;
|
||||
margin: 0 0 0 10px;
|
||||
padding: 8px;
|
||||
border-radius: 20px;
|
||||
font-size: 15px;
|
||||
min-width: 40px;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
#scan {
|
||||
margin-top: -10px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
.toprow {
|
||||
top: 0;
|
||||
position: sticky;
|
||||
background-color:#222;
|
||||
z-index:1;
|
||||
top: 0;
|
||||
position: sticky;
|
||||
background-color:#222;
|
||||
z-index: 1;
|
||||
}
|
||||
.lnk {
|
||||
border: 0;
|
||||
border: 0;
|
||||
}
|
||||
.helpB {
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
}
|
||||
.hide {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
.err {
|
||||
color: #f00;
|
||||
color: #f00;
|
||||
}
|
||||
.warn {
|
||||
color: #fa0;
|
||||
color: #fa0;
|
||||
}
|
||||
input {
|
||||
background: #333;
|
||||
color: #fff;
|
||||
font-family: Verdana, sans-serif;
|
||||
border: 0.5ch solid #333;
|
||||
background: #333;
|
||||
color: #fff;
|
||||
font-family: Verdana, sans-serif;
|
||||
border: .5ch solid #333;
|
||||
}
|
||||
input:disabled {
|
||||
color: #888;
|
||||
color: #888;
|
||||
}
|
||||
input[type="text"],
|
||||
input[type="number"],
|
||||
select {
|
||||
font-size: medium;
|
||||
margin: 2px;
|
||||
}
|
||||
font-size: medium;
|
||||
margin: 2px;
|
||||
}
|
||||
input[type="number"] {
|
||||
width: 4em;
|
||||
width: 4em;
|
||||
}
|
||||
input[type="number"].xxl {
|
||||
width: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
input[type="number"].xl {
|
||||
width: 85px;
|
||||
width: 85px;
|
||||
}
|
||||
input[type="number"].l {
|
||||
width: 64px;
|
||||
width: 64px;
|
||||
}
|
||||
input[type="number"].m {
|
||||
width: 56px;
|
||||
width: 56px;
|
||||
}
|
||||
input[type="number"].s {
|
||||
width: 48px;
|
||||
width: 48px;
|
||||
}
|
||||
input[type="number"].xs {
|
||||
width: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
input[type="checkbox"] {
|
||||
transform: scale(1.5);
|
||||
margin-right: 10px;
|
||||
transform: scale(1.5);
|
||||
margin-right: 10px;
|
||||
}
|
||||
td input[type="checkbox"] {
|
||||
margin-right: revert;
|
||||
margin-right: revert;
|
||||
}
|
||||
input[type=file] {
|
||||
font-size: 16px
|
||||
font-size: 16px
|
||||
}
|
||||
select {
|
||||
margin: 2px;
|
||||
background: #333;
|
||||
color: #fff;
|
||||
font-family: Verdana, sans-serif;
|
||||
border: 0.5ch solid #333;
|
||||
margin: 2px;
|
||||
background: #333;
|
||||
color: #fff;
|
||||
font-family: Verdana, sans-serif;
|
||||
border: .5ch solid #333;
|
||||
}
|
||||
select.pin {
|
||||
max-width: 120px;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 120px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
tr {
|
||||
line-height: 100%;
|
||||
line-height: 100%;
|
||||
}
|
||||
td {
|
||||
padding: 2px;
|
||||
padding: 2px;
|
||||
}
|
||||
.d5 {
|
||||
width: 4rem !important;
|
||||
width: 4rem !important;
|
||||
}
|
||||
.cal {
|
||||
font-size:1.5rem;
|
||||
cursor:pointer
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer
|
||||
}
|
||||
#TMT table {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#msg {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#toast {
|
||||
@ -158,44 +158,44 @@ td {
|
||||
text-align: center;
|
||||
z-index: 5;
|
||||
transform: translateX(-50%);
|
||||
max-width: 90%;
|
||||
max-width: 90%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
#toast.show {
|
||||
opacity: 1;
|
||||
background-color: #264;
|
||||
animation: fadein 0.5s, fadein 0.5s 2.5s reverse;
|
||||
animation: fadein .5s, fadein .5s 2.5s reverse;
|
||||
}
|
||||
|
||||
#toast.error {
|
||||
opacity: 1;
|
||||
background-color: #b21;
|
||||
animation: fadein 0.5s;
|
||||
animation: fadein .5s;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
input[type="text"],
|
||||
input[type="file"],
|
||||
input[type="number"],
|
||||
input[type="email"],
|
||||
input[type="tel"],
|
||||
input[type="password"] {
|
||||
font-size: 16px;
|
||||
}
|
||||
input[type="text"],
|
||||
input[type="file"],
|
||||
input[type="number"],
|
||||
input[type="email"],
|
||||
input[type="tel"],
|
||||
input[type="password"] {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
input[type="number"].s {
|
||||
width: 40px;
|
||||
}
|
||||
input[type="number"].xs {
|
||||
width: 32px;
|
||||
}
|
||||
input[type="file"] {
|
||||
width: 224px;
|
||||
}
|
||||
#btns select {
|
||||
width: 144px;
|
||||
}
|
||||
input[type="number"].s {
|
||||
width: 40px;
|
||||
}
|
||||
input[type="number"].xs {
|
||||
width: 32px;
|
||||
}
|
||||
input[type="file"] {
|
||||
width: 224px;
|
||||
}
|
||||
#btns select {
|
||||
width: 144px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user