465 lines
10 KiB
CSS
465 lines
10 KiB
CSS
/*
|
|
Copyright 2020 SPX Graphics
|
|
CSS file for form items. Loaded after spx_layout.css
|
|
*/
|
|
|
|
::placeholder {
|
|
color: #555;
|
|
opacity: 1;
|
|
}
|
|
|
|
.cfg::placeholder {
|
|
color: rgba(255, 255, 255, 0.6);
|
|
/* font-family: Arial, Helvetica, sans-serif; */
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.spxformtext {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 1em;
|
|
}
|
|
|
|
.disabled_btn {
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.cfg {
|
|
font-family: "UI-Light", Arial, Helvetica, sans-serif;
|
|
height: 2.4em;
|
|
font-size: 0.8em;
|
|
color: white;
|
|
border: 2px solid transparent;
|
|
margin-left: 0.1em;
|
|
margin-right: 0.1em;
|
|
text-shadow: rgb(0, 0, 0, 0.4) 0 0px 8px;
|
|
box-shadow: rgb(0, 0, 0, 0.4) 0 3px 8px;
|
|
padding-inline-start: 5px;
|
|
}
|
|
|
|
|
|
.addbtn {
|
|
font-size: 1.2em;
|
|
color: white;
|
|
border: 2px solid transparent;
|
|
text-transform: uppercase;
|
|
font-family: "UI-Bold", Arial, Helvetica, sans-serif;
|
|
text-shadow: rgb(0, 0, 0, 0.4) 0 0px 8px;
|
|
box-shadow: rgb(0, 0, 0, 0.4) 0 3px 8px;
|
|
padding-inline-start: 0.4em;
|
|
padding-inline-end: 0.4em;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.addbtn:hover {
|
|
border: 2px solid rgba(255, 255, 255, 0.4);
|
|
}
|
|
.btn {
|
|
height: 2.4em;
|
|
font-size: 0.8em;
|
|
color: white;
|
|
border: 2px solid transparent;
|
|
text-transform: uppercase;
|
|
font-family: "UI-Bold", Arial, Helvetica, sans-serif;
|
|
text-shadow: rgb(0, 0, 0, 0.4) 0 0px 8px;
|
|
box-shadow: rgb(0, 0, 0, 0.4) 0 3px 8px;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
padding: 0.4em 0;
|
|
margin-bottom: 0.1em;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.btn:hover {
|
|
border-bottom: 2px solid rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
.btn:focus{
|
|
outline: none;
|
|
}
|
|
|
|
|
|
.btnsmall {
|
|
font-size: 0.7em;
|
|
color: white;
|
|
border: 2px solid transparent;
|
|
margin-left: 1px;
|
|
margin-right: 1px;
|
|
font-family: "UI-Regular", Arial, Helvetica, sans-serif;
|
|
box-shadow: rgb(0, 0, 0, 0.4) 0 3px 8px;
|
|
text-transform: uppercase;
|
|
height: 150%;
|
|
padding: 0.3em 1em;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btnsmall:hover {
|
|
border-bottom: 2px solid rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
.btnsmall:focus{
|
|
outline: none;
|
|
}
|
|
|
|
.colorbtnsmall {
|
|
position: absolute;
|
|
border: 1px solid rgba(0, 0, 0, 1);
|
|
margin: 4px;
|
|
height: 80%;
|
|
width: 50%;
|
|
cursor: pointer;
|
|
border-radius: 0.5em;
|
|
font-size: 1.0em;
|
|
color: rgba(200,200,200,0.8);
|
|
text-shadow: 1px 1px 1px black;
|
|
|
|
}
|
|
|
|
.colorbtnsmall:hover {
|
|
/* border: 2px solid rgba(255, 255, 255, 0.1); */
|
|
|
|
}
|
|
|
|
.colorbtnsmall:focus{
|
|
outline: none;
|
|
}
|
|
|
|
.drop {
|
|
height: 2.4em;
|
|
font-size: 0.8em;
|
|
color: white;
|
|
border: 2px solid transparent;
|
|
margin-left: 0.1em;
|
|
margin-right: 0.1em;
|
|
font-family: "UI-Regular", Arial, Helvetica, sans-serif;
|
|
text-shadow: rgb(0, 0, 0, 0.4) 0 0px 8px;
|
|
box-shadow: rgb(0, 0, 0, 0.4) 0 3px 8px;
|
|
}
|
|
|
|
.drop option:disabled {
|
|
color: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.drop:hover {
|
|
border-bottom: 2px solid rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
|
|
|
|
|
|
.floinput {
|
|
padding: 0.1em;
|
|
background-color: #706e83;
|
|
border: 0;
|
|
font-family: inherit;
|
|
font-size: 1em;
|
|
margin: 0px;
|
|
color: white;
|
|
font-family: "UI-Regular", Arial, Helvetica, sans-serif;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.gccheckcontainer {
|
|
display: block;
|
|
position: relative;
|
|
padding-left: 35px;
|
|
margin-top: 8px;
|
|
margin-bottom: 6px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.gccheckboxdiv label{
|
|
font-size: 0.7em;
|
|
color: rgba(255, 255, 255, 0.7)
|
|
}
|
|
|
|
/* Hide the browser's default checkbox */
|
|
.gccheckcontainer input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
height: 0;
|
|
width: 0;
|
|
}
|
|
|
|
/* Create a custom checkbox */
|
|
.gccheckmark {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 23px;
|
|
width: 23px;
|
|
background-color: rgb(163, 163, 163);
|
|
transform: none !important;
|
|
}
|
|
|
|
/* On mouse-over, add a grey background color */
|
|
.gccheckcontainer:hover input ~ .gccheckmark {
|
|
background-color: rgb(241, 236, 236);
|
|
}
|
|
|
|
/* When the checkbox is checked, add a blue background */
|
|
.gccheckcontainer input:checked ~ .gccheckmark {
|
|
background-color: #008000;
|
|
}
|
|
|
|
/* Create the checkmark/indicator (hidden when not checked) */
|
|
.gccheckmark:after {
|
|
content: "";
|
|
position: absolute;
|
|
display: none;
|
|
}
|
|
|
|
/* Show the checkmark when checked */
|
|
.gccheckcontainer input:checked ~ .gccheckmark:after {
|
|
display: block;
|
|
}
|
|
|
|
/* Style the checkmark/indicator */
|
|
.gccheckcontainer .gccheckmark:after {
|
|
left: 9px;
|
|
top: 5px;
|
|
width: 5px;
|
|
height: 10px;
|
|
border: solid white;
|
|
border-width: 0 3px 3px 0;
|
|
-webkit-transform: rotate(45deg);
|
|
-ms-transform: rotate(45deg);
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.gcinput{
|
|
width: 100%;
|
|
font-family: "UI-Regular", Arial, Helvetica, sans-serif;
|
|
font-size:1em;
|
|
margin: 1px;
|
|
margin-top: 5px; /*5px */
|
|
line-height: 132%;
|
|
padding-left: 0.2em;
|
|
user-select: auto;
|
|
}
|
|
.gcinput::placeholder {
|
|
color: rgb(156, 156, 156);
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-style: italic;
|
|
font-size: 0.9em;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.gcinputFilter{
|
|
width: 100%;
|
|
font-family: "UI-Regular", Arial, Helvetica, sans-serif;
|
|
font-size:1em;
|
|
margin: 1px;
|
|
margin-top: 5px;
|
|
line-height: 132%;
|
|
padding-left: 0.2em;
|
|
user-select: auto;
|
|
}
|
|
.gcinputFilter:focus {
|
|
outline: none;
|
|
}
|
|
.gcinputFilter::placeholder {
|
|
color: rgba(255, 255, 255, 0.13);
|
|
font-family: "UI-Regular", Arial, Helvetica, sans-serif;
|
|
font-size: 0.8em;
|
|
letter-spacing: 0px;
|
|
transform: translateY(-10%);
|
|
}
|
|
|
|
/* .select {
|
|
border-radius: 0.10em;
|
|
padding: 0.1em 0.2em;
|
|
font-size: 1.0rem;
|
|
line-height: 1.1;
|
|
background-color: rgb(230, 230, 230);
|
|
} */
|
|
|
|
.select {
|
|
/* -webkit-appearance: none;
|
|
-moz-appearance: none; */
|
|
/* background: transparent; */
|
|
/* background-image: url("data:image/svg+xml,<svg width='36' height='18' xmlns='http://www.w3.org/2000/svg'><path d='m0,6l12,12l12,-12l-24,0z'/><path fill='none' d='m0,0l24,0l0,24l-24,0l0,-24z'/></svg>");
|
|
background-repeat: no-repeat;
|
|
background-position-x: 98%;
|
|
background-position-y: 50%; */
|
|
/* border: 1px solid #cdf1ff; */
|
|
background-color: #ececec;
|
|
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.7);
|
|
border-radius: 0.2rem;
|
|
margin-right: 2rem;
|
|
padding: 0.2rem;
|
|
padding-right: 2rem;
|
|
border-right: 10px solid #2768dab9;
|
|
}
|
|
|
|
|
|
.tablineinput {
|
|
font-family: "UI-Black", Arial, Helvetica, sans-serif;
|
|
margin: 0px;
|
|
border: 0;
|
|
font-size: 1.2em; /* <-------------------------- HEADLINE SIZE IN UI*/
|
|
background-color: brown;
|
|
color: white;
|
|
display: inline-block;
|
|
padding: 0.1em;
|
|
padding-left: 0.4em;
|
|
padding-right: 0.2em;
|
|
}
|
|
|
|
.headlineinput {
|
|
font-family: "UI-Black", Arial, Helvetica, sans-serif;
|
|
margin: 0px;
|
|
background-color: white;
|
|
color: black;
|
|
padding-left: 0.2em;
|
|
border: 0;
|
|
font-size: 2.4em; /* <-------------------------- HEADLINE SIZE IN UI*/
|
|
}
|
|
|
|
.tickerinput {
|
|
font-family: "UI-Regular", Arial, Helvetica, sans-serif;
|
|
padding-left: 0.2em;
|
|
background-color: #222;
|
|
margin: 0px;
|
|
border: 0;
|
|
color: white;
|
|
font-size: 1.35em; /* <-------------------------- HEADLINE SIZE IN UI*/
|
|
}
|
|
|
|
.imsinput {
|
|
flex: auto;
|
|
flex-basis: 290px;
|
|
padding: 0.1em;
|
|
background-color: #706e83;
|
|
border: 0;
|
|
font-family: inherit;
|
|
font-size: 0.9em; /* Changed 15.04.2020 - was 1.em */
|
|
margin: 0px;
|
|
color: white;
|
|
font-family: "UI-Regular", Arial, Helvetica, sans-serif;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
height: 1.83em; /* Added 15.04.2020 */
|
|
}
|
|
|
|
.inlineInput {
|
|
padding: 0.1em;
|
|
background-color: inherit;
|
|
border: 0;
|
|
font-family: inherit;
|
|
font-size: 1em;
|
|
margin: 0px;
|
|
color: white;
|
|
font-family: "UI-Regular", Arial, Helvetica, sans-serif;
|
|
height: 100%;
|
|
/* width: 100%; */
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.spxRoundedButton {
|
|
margin: 10px;
|
|
font-size: 60%;
|
|
padding: 0 2em;
|
|
border-radius: 1em;
|
|
}
|
|
|
|
/* Ripple effect */
|
|
.ripple {
|
|
background-position: center;
|
|
transition: background 0.2s;
|
|
}
|
|
.ripple:hover {
|
|
/* background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%; */
|
|
}
|
|
.ripple:active {
|
|
background-color: #ffffff;
|
|
background-size: 100%;
|
|
transition: background 0s;
|
|
}
|
|
|
|
|
|
.generalSettingDropdown:disabled {
|
|
color: rgba(255,255,255,0.6);
|
|
}
|
|
|
|
/* The radiocontainer */
|
|
.radiocontainer {
|
|
display: block;
|
|
position: relative;
|
|
padding-left: 1.8em;
|
|
margin-bottom: 0.5em;
|
|
cursor: pointer;
|
|
font-size: 1.2em;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
/* Hide the browser's default radio button */
|
|
.radiocontainer input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Create a custom radio button */
|
|
.checkmark {
|
|
position: absolute;
|
|
top: -0.2em;
|
|
left: 0;
|
|
height: 1.3em;
|
|
width: 1.3em;
|
|
background-color: #eee;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* On mouse-over, add a grey background color */
|
|
.radiocontainer:hover input ~ .checkmark {
|
|
background-color: rgb(146, 179, 155);
|
|
}
|
|
|
|
/* When the radio button is checked, add a blue background */
|
|
.radiocontainer input:checked ~ .checkmark {
|
|
background-color: #54af3c;
|
|
}
|
|
|
|
/* Create the indicator (the dot/circle - hidden when not checked) */
|
|
.checkmark:after {
|
|
content: "";
|
|
position: absolute;
|
|
display: none;
|
|
}
|
|
|
|
/* Show the indicator (dot/circle) when checked */
|
|
.radiocontainer input:checked ~ .checkmark:after {
|
|
display: block;
|
|
}
|
|
|
|
/* Style the indicator (dot/circle) */
|
|
.radiocontainer .checkmark:after {
|
|
top: 0.4em;
|
|
left: 0.4em;
|
|
width: 0.5em;
|
|
height: 0.5em;
|
|
border-radius: 50%;
|
|
background: rgb(255, 255, 255);
|
|
}
|
|
|
|
.toggleON {
|
|
/* used for buttons to mimic toggle functionality */
|
|
transform: translateY(1px);
|
|
text-shadow:0px 0px 10px rgba(128, 255, 0, 0.8);
|
|
box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5),
|
|
inset 0 -4px 10px rgba(0, 0, 0, 0.3);
|
|
|
|
}
|
|
|
|
.selectAll {
|
|
font-size: 2em;
|
|
} |