Init WebCG
This commit is contained in:
Vendored
+6
File diff suppressed because one or more lines are too long
@@ -0,0 +1,65 @@
|
||||
|
||||
/* inspired by https://codepen.io/wildbeard/pen/eZZPZr */
|
||||
|
||||
|
||||
|
||||
input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
input[type="radio"]:checked + label span { transform: scale(1.25); }
|
||||
|
||||
input[type="radio"]:checked + label .gra { border: 2px solid #ffffff;}
|
||||
input[type="radio"]:checked + label .red { border: 2px solid #ffffff;}
|
||||
input[type="radio"]:checked + label .ora { border: 2px solid #ffffff;}
|
||||
input[type="radio"]:checked + label .gre { border: 2px solid #ffffff;}
|
||||
input[type="radio"]:checked + label .blu { border: 2px solid #ffffff;}
|
||||
input[type="radio"]:checked + label .pin { border: 2px solid #ffffff;}
|
||||
input[type="radio"]:checked + label .vio { border: 2px solid #ffffff;}
|
||||
input[type="radio"]:checked + label .bla { border: 2px solid #ffffff;}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
label:hover span {
|
||||
/* transform: scale(1.25); */
|
||||
}
|
||||
label span {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: transform .2s ease-in-out;
|
||||
}
|
||||
|
||||
/* grey, red, orange, green, blue, pink, violet, black */
|
||||
label span.gra { background: #7a7a7a;}
|
||||
label span.red { background: #DB2828;}
|
||||
label span.ora { background: #F2711C;}
|
||||
label span.gre { background: #21BA45;}
|
||||
label span.blu { background: #2185D0;}
|
||||
label span.pin { background: #E03997;}
|
||||
label span.vio { background: #8840FF;}
|
||||
label span.bla { background: #000000;}
|
||||
|
||||
.row_accent0 {border-left: 10px solid #696969; }
|
||||
.row_accent1 {border-left: 10px solid rgb(114, 38, 38); }
|
||||
.row_accent2 {border-left: 10px solid rgb(117, 70, 38); }
|
||||
.row_accent3 {border-left: 10px solid rgb(42, 107, 57); }
|
||||
.row_accent4 {border-left: 10px solid rgb(41, 87, 122); }
|
||||
.row_accent5 {border-left: 10px solid rgb(124, 57, 95); }
|
||||
.row_accent6 {border-left: 10px solid rgb(91, 67, 129); }
|
||||
.row_accent7 {border-left: 10px solid #181818; }
|
||||
.row_accentExtras {border-left: 10px solid #acacac; }
|
||||
|
||||
.accent_{
|
||||
background-color: rgba(255,255,255,0.05);
|
||||
border: 0px solid yellow;
|
||||
width:100%;
|
||||
padding:10px;
|
||||
margin-bottom:15px;
|
||||
border-left: 12px solid white;
|
||||
box-shadow: rgba(0, 0, 0, 0.7) 0px 0px 10px;
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
/*
|
||||
Copyright 2020 SPX Graphics
|
||||
CSS file for (bg)colors. Must be loaded after spx_layout.css
|
||||
*/
|
||||
|
||||
.disabled {
|
||||
opacity: 0.2;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.bg_body {
|
||||
background-color: #414C5A;
|
||||
}
|
||||
|
||||
|
||||
.darkBg {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.bg_green {
|
||||
background-color: #54af3c;
|
||||
}
|
||||
|
||||
.green {
|
||||
color: #5f9750;
|
||||
}
|
||||
|
||||
.bg_yellow {
|
||||
background-color: #e5c310;
|
||||
}
|
||||
|
||||
.bg_orange {
|
||||
background-color: #e57010;
|
||||
}
|
||||
|
||||
.bg_blue {
|
||||
background-color: #375ea3;
|
||||
}
|
||||
|
||||
.bg_red {
|
||||
background-color: #9c1a29;
|
||||
}
|
||||
|
||||
.bg_black {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.bg_white {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.bg_grey80 {
|
||||
background-color: #272833;
|
||||
}
|
||||
|
||||
.bg_grey {
|
||||
background-color: #485a6b;
|
||||
}
|
||||
|
||||
.bg_grey60 {
|
||||
background-color: #2f303e;
|
||||
}
|
||||
|
||||
.bg_grey40 {
|
||||
background-color: #343D48;
|
||||
}
|
||||
|
||||
.bg_grey15 {
|
||||
background-color: #656e7a;
|
||||
/* #706e83; */
|
||||
}
|
||||
|
||||
.bg_grey10 {
|
||||
background-color: #9aa4b1;
|
||||
/* #706e83; */
|
||||
}
|
||||
|
||||
.black{
|
||||
color: black;
|
||||
}
|
||||
|
||||
.bg_darken{
|
||||
background-color: rgba(0,0,0,0.07);
|
||||
}
|
||||
|
||||
.bg_lighten{
|
||||
background-color: rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.newVersionBubble {
|
||||
padding: 2px 10px;
|
||||
background-color: rgb(39, 95, 58);
|
||||
border-radius: 4px;
|
||||
/* margin-right: 10px; */
|
||||
font-size: 90%;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.fg_orange {
|
||||
color: #e57010;
|
||||
}
|
||||
@@ -0,0 +1,448 @@
|
||||
|
||||
*, *:before, *:after {
|
||||
box-sizing: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
/* user-select: none; */
|
||||
}
|
||||
|
||||
|
||||
html, body, .page {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 4vw; /* ============ font size =========== */
|
||||
}
|
||||
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.uitext {
|
||||
font-size: 0.8em;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.swname {
|
||||
font-size: 1.5em;
|
||||
color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.page-header {
|
||||
/* height: 130px; */
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.page-footer {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
padding: 1em;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.well {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding: 1em;
|
||||
height: 100%;
|
||||
flex-grow: 1;
|
||||
min-width: 48%;
|
||||
overflow-y: auto;
|
||||
border-radius: 0.5em;
|
||||
background-repeat: repeat-x;
|
||||
background-position: top, bottom;
|
||||
background-image: url('../img/shadatop.png'), url('../img/shadabot.png');
|
||||
}
|
||||
|
||||
|
||||
.well + .well {
|
||||
margin: 0% 0.5%;
|
||||
}
|
||||
|
||||
.darken {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.lighten {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.skroll::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.skroll::-webkit-scrollbar {
|
||||
width: 1em;
|
||||
background-color: rgba(245, 245, 245, 0);
|
||||
}
|
||||
|
||||
.skroll::-webkit-scrollbar-thumb {
|
||||
border-radius: 0.5em;
|
||||
background-color: rgba(255, 255, 255, 0.13);
|
||||
}
|
||||
|
||||
.skroll::-webkit-scrollbar-thumb:hover
|
||||
{
|
||||
background-color: rgba(255, 255, 255, 0.274);
|
||||
}
|
||||
|
||||
|
||||
.headitem1 {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
text-align: center;
|
||||
border: 0px solid rgb(0, 255, 55);
|
||||
}
|
||||
|
||||
.headitem3 {
|
||||
flex-grow: 3;
|
||||
flex-basis: 0;
|
||||
display: flex;
|
||||
padding: 0.5em;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
border: 0px solid rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
.footitem1 {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footitem2 {
|
||||
padding: 1em;
|
||||
flex-grow: 2;
|
||||
flex-basis: 0;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.footbox1 {
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footbox2 {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footbox3 {
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cursor {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 3em;
|
||||
margin: 0.5em;
|
||||
border-radius: 0.6em;
|
||||
box-shadow: 0 0 10px rgba(255, 166, 0, 0);
|
||||
/* transition-property: box-shadow, scale; */
|
||||
transition: transform 500ms ease-in-out;
|
||||
}
|
||||
|
||||
.icon:hover {
|
||||
box-shadow: 0 0 10px rgba(255, 255, 255, 0.507);
|
||||
transform: scale(0.98) rotate(5deg);
|
||||
/* transition-property: box-shadow, scale, rotate; */
|
||||
transition: transform 500ms ease-in-out;
|
||||
}
|
||||
|
||||
.folderItem {
|
||||
margin-bottom: 0.2em;
|
||||
list-style:circle;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.icon::before {
|
||||
font-family: "FontAwesomeSol900";
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
font-size: 1.2em;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.folder::before { content: "\f07b"; color: rgb(9, 119, 170);}
|
||||
.file::before { content: "\f15b"; color: rgb(241, 241, 237);}
|
||||
.back::before { content: "\f106"; }
|
||||
.home::before { content: "\f102"; }
|
||||
|
||||
|
||||
|
||||
/* ---------------- messageSlider styles -------------*/
|
||||
#messageSlider {
|
||||
top: 0px;
|
||||
left: 50%;
|
||||
opacity: 0; /* animated */
|
||||
display: flex;
|
||||
min-width: 10%;
|
||||
font-size: 1.7em !important;
|
||||
position: absolute;
|
||||
padding: 0.5em 2em;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 0 0 1em 1em;
|
||||
transform: translateX('-100%');
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.happyMsg {
|
||||
background-color: rgba(20, 116, 68, 0.76);
|
||||
box-shadow: rgba(0, 0, 0, 0.4) 0 2px 10px;
|
||||
}
|
||||
|
||||
.infoMsg {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
box-shadow: rgba(0, 0, 0, 0.4) 0 2px 10px;
|
||||
}
|
||||
|
||||
.warnMsg {
|
||||
background-color: rgba(143, 81, 0, 0.794);
|
||||
box-shadow: rgba(0, 0, 0, 0.4) 0 2px 10px;
|
||||
}
|
||||
|
||||
.errorMsg {
|
||||
background-color: rgba(170, 5, 5, 0.89);
|
||||
box-shadow: rgba(0, 0, 0, 0.4) 0 2px 10px;
|
||||
}
|
||||
|
||||
/* ---------------- /messageSlider -------------*/
|
||||
|
||||
#folderinbox {
|
||||
min-height: 30px;
|
||||
display: grid;
|
||||
border: 0px solid yellow;
|
||||
}
|
||||
|
||||
#fileinbox {
|
||||
min-height: 30px;
|
||||
display: grid;
|
||||
border: 0px solid yellow;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.fileitem {
|
||||
height: 40vw;
|
||||
align-items: center;
|
||||
flex-direction:column;
|
||||
border: 2px solid rgba(255, 255, 255, 0.137);
|
||||
justify-content: flex-end;
|
||||
background-color: rgba(0, 0, 0, 0.274);
|
||||
background-position: center 40%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
margin: 4px;
|
||||
position: relative;
|
||||
overflow-wrap: break-word;
|
||||
transition: all 200ms ease-in-out;
|
||||
box-shadow: 0 0 5px rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.fileitem:hover {
|
||||
background-color: rgba(255, 255, 255, 0.219);
|
||||
/* border: 2px solid white; */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.filename {
|
||||
bottom: 10px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 0.4em;
|
||||
font-size: 0.8em;
|
||||
color: rgba(255, 255, 255, 0.719);
|
||||
background-color: rgba(0, 0, 0, 0.452);
|
||||
}
|
||||
|
||||
.navicon {
|
||||
/* width: 3em; */
|
||||
margin: 0.5em;
|
||||
box-shadow: 0 0 10px rgba(255, 166, 0, 0);
|
||||
/* transition-property: box-shadow, scale; */
|
||||
transition: transform 500ms ease-in-out;
|
||||
}
|
||||
|
||||
.navicon::before {
|
||||
font-family: "FontAwesomeSol900";
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
font-size: 1.2em;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.folder::before { content: "\f07b"; color: rgb(9, 119, 170);}
|
||||
.file::before { content: "\f15b"; color: rgb(241, 241, 237);}
|
||||
.back::before { content: "\f106"; }
|
||||
.home::before { content: "\f102"; }
|
||||
|
||||
|
||||
.selectedImage {
|
||||
/* box-shadow: 0 0 5px white; */
|
||||
border: 2px solid white;
|
||||
border-radius: 10%;
|
||||
transform: scale(0.95);
|
||||
transition: all 200ms ease-in-out;
|
||||
}
|
||||
|
||||
image-item {
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.disable {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#navipath {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
font-size: 0.8em;
|
||||
padding: 0.5em 1.0em;
|
||||
color: rgba(255, 228, 155, 0.4);
|
||||
}
|
||||
|
||||
social-item {
|
||||
display: block;
|
||||
border-radius: 0.5em;
|
||||
background-color: rgba(255,255,255,0.1);
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
border: 2px solid transparent;
|
||||
box-shadow: 0 0 5px 2px rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
social-item:hover {
|
||||
/* box-shadow: 0 0 2px 2px rgba(250, 250, 250, 0.7); */
|
||||
cursor: pointer;
|
||||
/* border: 2px solid rgb(109, 108, 108); */
|
||||
background-color: rgba(0, 0, 0, 0.089);
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.dragIcon {
|
||||
border: 2px solid yellow;
|
||||
mask-image: unset;
|
||||
}
|
||||
|
||||
.social-item-content-table {
|
||||
border-spacing: 0px;
|
||||
border-collapse: separate;
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.social-item-content-table td {
|
||||
padding: 0;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.serviceicon {
|
||||
background-color: rgba(16, 104, 35, 0.575); /* default bg color */
|
||||
background-position: 50% 3px;
|
||||
background-repeat: no-repeat;
|
||||
width: 40px;
|
||||
padding: 0px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.facebook_post { background-color: rgb(17, 91, 209); }
|
||||
.instagram { background-color: rgb(106, 21, 218); }
|
||||
.tweet { background-color: rgb(15, 35, 151); }
|
||||
.rss { background-color: rgb(167, 81, 32); }
|
||||
.video { background-color: rgb(151, 15, 15); }
|
||||
|
||||
.brd {
|
||||
border: 2px solid orange;
|
||||
}
|
||||
|
||||
.uIcon {
|
||||
margin-left: 0.2em;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
border-radius: 25%;
|
||||
}
|
||||
|
||||
.uName {
|
||||
font-size: 0.9em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.uHndl {
|
||||
font-size: 0.9em;
|
||||
|
||||
}
|
||||
.uuid {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.postTimeTD {
|
||||
text-align: center;
|
||||
font-size: 0.9em;
|
||||
color: rgba(255,255,255,0.5)
|
||||
}
|
||||
|
||||
.userIconCell {
|
||||
width: 2vw;
|
||||
}
|
||||
|
||||
.thumb {
|
||||
width: 10vw !important;
|
||||
margin: 0.4vw;
|
||||
}
|
||||
|
||||
.thumbTD {
|
||||
width: 10vw !important;
|
||||
margin: 0.4vw;
|
||||
/* background-color: saddlebrown; */
|
||||
}
|
||||
|
||||
.postmessageTD {
|
||||
vertical-align: top;
|
||||
font-size: 1.0em;
|
||||
padding: 0.9em !important;
|
||||
}
|
||||
|
||||
|
||||
.pad {
|
||||
padding: 0.3em !important;
|
||||
}
|
||||
|
||||
.topbrd {
|
||||
border-top: 1px solid rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.focused {
|
||||
border: 2px solid rgb(255, 145, 0);
|
||||
box-shadow: 0 0 5px 2px rgba(230, 156, 20, 0.7);
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
html, body {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background-color: #414C5A;
|
||||
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
|
||||
*, *:before, *:after {
|
||||
box-sizing: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header{
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-left: 60%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.pM
|
||||
{
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
.item
|
||||
{
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
margin-bottom: 10px;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
|
||||
.itemlist
|
||||
{
|
||||
background-color: #2A3641;
|
||||
|
||||
}
|
||||
|
||||
td
|
||||
{
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* .statusbar
|
||||
{
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 70%;
|
||||
padding: 3px 12px;
|
||||
color: #aaaaaa;
|
||||
} */
|
||||
|
||||
|
||||
.scroller::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.0);
|
||||
border-radius: 0px;
|
||||
background-color: #414C5A;
|
||||
}
|
||||
|
||||
.scroller::-webkit-scrollbar
|
||||
{
|
||||
width: 14px;
|
||||
background-color: #414C5A;
|
||||
}
|
||||
|
||||
.scroller::-webkit-scrollbar-thumb
|
||||
{
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.0);
|
||||
background-color: #677180;
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
/* @font-face {
|
||||
font-family: "Yle-Black";
|
||||
src: url("/fonts/Yle-Black.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Yle-Medium";
|
||||
src: url("/fonts/Yle-Medium.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Yle-Regular";
|
||||
src: url("/fonts/Yle-Regular.ttf");
|
||||
} */
|
||||
|
||||
|
||||
@font-face { font-family: "UI-Light"; src: url("/fonts/EncodeSansSemiExpanded-Light.ttf"); }
|
||||
@font-face { font-family: "UI-Regular"; src: url("/fonts/EncodeSansSemiExpanded-Regular.ttf"); }
|
||||
@font-face { font-family: "UI-Bold"; src: url("/fonts/EncodeSansSemiExpanded-Bold.ttf"); }
|
||||
@font-face { font-family: "UI-Black"; src: url("/fonts/EncodeSansSemiExpanded-Black.ttf"); }
|
||||
|
||||
|
||||
@font-face { font-family: "FontAwesomeReg400"; src: url("/fonts/fa-regular-400.ttf"); }
|
||||
@font-face { font-family: "FontAwesomeSol900"; src: url("/fonts/fa-solid-900.ttf"); }
|
||||
@@ -0,0 +1,465 @@
|
||||
/*
|
||||
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;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,461 @@
|
||||
/*
|
||||
Copyright 2020 SPX Graphics
|
||||
*/
|
||||
|
||||
/* TABS in import template dialog */
|
||||
/* Style the tab */
|
||||
|
||||
:root {
|
||||
--tabButtonBorderColor: #afb5ba;
|
||||
--backgroundColor: #2d333b;
|
||||
}
|
||||
|
||||
|
||||
.promoBoxCols {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1.5em;
|
||||
}
|
||||
|
||||
.promoLeft {
|
||||
flex-basis: 60%;
|
||||
position: relative;
|
||||
font-family: 'UI-Light' !important;
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
.promoBoxHead {
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 0.7em;
|
||||
}
|
||||
|
||||
.promoLeft p {
|
||||
margin-top: 0.5em;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.promoLeft a {
|
||||
color: orange;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.promoLeft a:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.promoLeft h2 {
|
||||
font-size: 1.4em;
|
||||
margin-top: 2.0em;
|
||||
margin-bottom: 0.5em;
|
||||
text-transform: none;
|
||||
color: white;
|
||||
width: 100%;
|
||||
font-weight: normal;
|
||||
letter-spacing: normal;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.242);
|
||||
}
|
||||
|
||||
.promoLeft li {
|
||||
list-style: square;
|
||||
color: inherit;
|
||||
opacity: inherit;
|
||||
}
|
||||
|
||||
.promoRight {
|
||||
font-size: 0.8em;
|
||||
flex-basis: 40%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.promoRight img {
|
||||
width: 80%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
.tabButtonRow {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 0.6em;
|
||||
font-size: 0.8em;
|
||||
padding: 1.5em 0.3em 0 0.3em;
|
||||
flex-shrink: 0;
|
||||
border-bottom: 1px solid var(--tabButtonBorderColor);
|
||||
}
|
||||
|
||||
.tabButtonRow > div {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Style the buttons that are used to open the tab content */
|
||||
.tabButtonRow button {
|
||||
background-color: inherit;
|
||||
float: left;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
padding: 0.4em 1.0em;
|
||||
transition: 0.1s;
|
||||
font-family: inherit;
|
||||
border-radius: 0.3em 0.3em 0 0;
|
||||
position: relative;
|
||||
transform: translateY(1px);
|
||||
z-index: 10;
|
||||
margin-right: 0.4em;
|
||||
color: rgba(255, 255, 255, 0.385);
|
||||
border: 0px solid var(--tabButtonBorderColor);
|
||||
border-width: 1px 1px 0px 1px;
|
||||
}
|
||||
|
||||
/* Change background color of buttons on hover */
|
||||
.tabButtonRow button:hover {
|
||||
background-color: rgba(194, 194, 194, 0.426);
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* Create an active/current tablink class */
|
||||
.tabButtonRow button.active {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.tabSelected {
|
||||
background-color: #b1b6bc !important;
|
||||
color: rgb(32, 32, 32) !important;
|
||||
border-radius: 0.3em 0.3em 0 0;
|
||||
}
|
||||
|
||||
/* Style the tab content */
|
||||
.tabcontent {
|
||||
display: none;
|
||||
padding: 0.5em;
|
||||
border: 0px solid #ccc;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
#tab1,
|
||||
#tab2,
|
||||
#tab3,
|
||||
#tab4 {
|
||||
padding: 0.5em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 0px solid blue;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
/* background-color: var(--backgroundColor); */
|
||||
}
|
||||
|
||||
#tab2,
|
||||
#tab3,
|
||||
#tab4 {
|
||||
padding: 1.5em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.dialogHeaderBar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: 0.2em 0.5em;
|
||||
font-size: 0.8em;
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
color: white;
|
||||
border-bottom: 1px solid #3c3c3c;
|
||||
}
|
||||
|
||||
.dialogHeaderBarClose {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.dialogCloseButton {
|
||||
cursor: pointer;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.dialogCloseButton:hover {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.addTemplateItem{
|
||||
background-color: rgba(255,255,255,0.05);
|
||||
width:100%;
|
||||
padding:10px;
|
||||
margin-bottom:15px;
|
||||
box-shadow: rgba(0, 0, 0, 0.7) 0px 0px 10px;
|
||||
}
|
||||
|
||||
.addTemplateItem:hover{
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.templateName{
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.templateDesc{
|
||||
font-size: 75%;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.collapsible {
|
||||
box-sizing: border-box;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
padding: 12px;
|
||||
width: 100%;
|
||||
border-top: 0px;
|
||||
border-right: 0px;
|
||||
border-bottom: 1px solid black;
|
||||
text-align: left;
|
||||
outline: none;
|
||||
font-size: 1rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.collapsible::before{
|
||||
content: "\25B6";
|
||||
color: white;
|
||||
display: inline-block;
|
||||
margin-right: 12px;
|
||||
transform: rotate(0deg) scale(0.7);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
.globalCollapsible
|
||||
{
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.active, .collapsible:hover {
|
||||
background-color: #375ea3;
|
||||
}
|
||||
|
||||
|
||||
.active::before{
|
||||
content: "\25B6";
|
||||
color: white;
|
||||
display: inline-block;
|
||||
margin-right: 12px;
|
||||
transform: rotate(90deg) scale(1.0);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
.collapsiblecontent {
|
||||
box-sizing: border-box;
|
||||
padding: 0px 10px;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease-in-out;
|
||||
font-size: 1rem;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.configGeneralContent {
|
||||
box-sizing: border-box;
|
||||
padding: 0px 10px;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease-in-out;
|
||||
font-size: 1rem;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Remove default bullets */
|
||||
ul, #myUL {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
/* Remove margins and padding from the parent ul */
|
||||
#myUL {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Style the caret/arrow */
|
||||
.caret {
|
||||
cursor: pointer;
|
||||
user-select: none; /* Prevent text selection */
|
||||
}
|
||||
|
||||
/* Create the caret/arrow with a unicode, and style it */
|
||||
.caret::before {
|
||||
content: "\25B6";
|
||||
color: black;
|
||||
display: inline-block;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
|
||||
.caret-down::before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
/* Hide the nested list */
|
||||
.nested {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
|
||||
.opened {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(65, 76, 90, 0.9);
|
||||
z-index: 900;
|
||||
}
|
||||
|
||||
|
||||
.modal {
|
||||
width: 60%;
|
||||
height: 90%;
|
||||
position: absolute;
|
||||
left: 55%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 20;
|
||||
padding: 0.3em;
|
||||
background-color: #414C5A;
|
||||
color: white;
|
||||
box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 20px;
|
||||
}
|
||||
|
||||
.icon::before {
|
||||
font-family: "FontAwesomeSol900";
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
font-size: 1.2em;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.folder::before { content: "\f07b"; color: rgb(9, 119, 170);}
|
||||
.file::before { content: "\f15b"; color: rgb(241, 241, 237);}
|
||||
.back::before { content: "\f106"; }
|
||||
.home::before { content: "\f102"; }
|
||||
|
||||
.height1{
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.height2{
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
.height3{
|
||||
height: 3em;
|
||||
}
|
||||
|
||||
.height4{
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
|
||||
.modal_top{
|
||||
flex-shrink: 0;
|
||||
border: 0px solid pink;
|
||||
border-bottom: 1px dashed rgba(51, 150, 216, 0.445);
|
||||
}
|
||||
|
||||
.modal_top SPAN{
|
||||
transform: translateY(-50%);
|
||||
font-size: 0.8em;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.modal_bottom{
|
||||
gap: 0.5em;
|
||||
width: 100%;
|
||||
flex-grow: 0;
|
||||
display: flex;
|
||||
height: 2.5em;
|
||||
flex-shrink: 0;
|
||||
padding-top: 0.3em;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
border: 0px solid pink;
|
||||
}
|
||||
|
||||
.browserMessage {
|
||||
top: 0;
|
||||
position: relative;
|
||||
font-size: 0.6em;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
margin-left: 0.1em;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
border: 0px dotted pink;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.modal_bottom > div > button {
|
||||
border: 0px dotted white;
|
||||
padding: 0.3em 1em;
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
|
||||
.KBHelptable{
|
||||
border-collapse:collapse;
|
||||
}
|
||||
|
||||
.KBHelptable td{
|
||||
padding:10px;
|
||||
border:#4e95f4 0px solid;
|
||||
}
|
||||
|
||||
.KBHelptable th{
|
||||
background: rgba(0,0,0,0.5);
|
||||
text-align: left;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.KBHelptable tr:nth-child(odd){
|
||||
background: rgba(0,0,0,0.1);
|
||||
}
|
||||
/* Define the background color for all the EVEN background rows */
|
||||
.KBHelptable tr:nth-child(even){
|
||||
background: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.storeIcon {
|
||||
height: 100%;
|
||||
opacity: 0.6;
|
||||
min-width: 8%;
|
||||
background-size: contain;
|
||||
border: 0px solid white;
|
||||
background-position: 5% 50%;
|
||||
background-repeat: no-repeat;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
background-image: url('/img/storeicon.png');
|
||||
}
|
||||
|
||||
.storeIcon:hover {
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
font-family: 'UI-Regular';
|
||||
background-color: rgb(0,0,0);
|
||||
}
|
||||
|
||||
*, *:before, *:after {
|
||||
box-sizing: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.renderer {
|
||||
background-image: url('/img/checker60.png'); /* bgimage for local preview */
|
||||
background-size: 10vw;
|
||||
transform-origin: top left;
|
||||
border: 0px;
|
||||
outline: 0px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#toolbar {
|
||||
flex-grow: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: left;
|
||||
flex-direction: row;
|
||||
align-self: flex-start;
|
||||
border: 1px solid yellow;
|
||||
}
|
||||
|
||||
.watermark {
|
||||
top: 0;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
opacity: 1; /* WATERMARK if 1 = visible, 0 = invisible */
|
||||
width: 50vw;
|
||||
z-index:100;
|
||||
height: 50vw;
|
||||
position: absolute;
|
||||
background-size: contain;
|
||||
border: 0px solid yellow;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.prev {
|
||||
background-image: url("/img/spx_preview.png");
|
||||
}
|
||||
|
||||
.prog {
|
||||
background-image: url("/img/spx_program.png");
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
:root {
|
||||
/* Define a variable for the margin of the overlay, ~70px at 1080p */
|
||||
--margin: 3.65vmax;
|
||||
}
|
||||
|
||||
.main {
|
||||
position: absolute;
|
||||
top: calc(12 * var(--margin));
|
||||
left: var(--margin);
|
||||
width: calc(100vw - 2 * var(--margin) - 12vw);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.f1_bg {
|
||||
background: var(--main-color);
|
||||
display: table;
|
||||
position: relative;
|
||||
padding: 0.2em 0.4em;
|
||||
}
|
||||
|
||||
.f1_text {
|
||||
color: var(--white-color);
|
||||
font-family: 'UI-Black';
|
||||
font-size: 0.8rem;
|
||||
line-height: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.f2_bg {
|
||||
background: var(--white-color);
|
||||
display: table;
|
||||
position: relative;
|
||||
padding: 0.1em 0.4em 0em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.f2_text {
|
||||
color: var(--black-color);
|
||||
font-family: 'UI-Black';
|
||||
font-size: 1.45rem;
|
||||
line-height: 1.25;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
letter-spacing: -0.05rem;
|
||||
}
|
||||
|
||||
.f3_bg {
|
||||
z-index: 2;
|
||||
background: #252525;
|
||||
float: left;
|
||||
position: relative;
|
||||
padding: 0.1em 0.4em;
|
||||
}
|
||||
|
||||
.f3_text {
|
||||
color: var(--white-color);
|
||||
font-family: 'UI-Regular';
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.ticker_bg {
|
||||
z-index: -1;
|
||||
background: var(--dark-color);
|
||||
width: 100%;
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
|
||||
.ticker {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.webTicker {
|
||||
color: var(--white-color);
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.webTicker li {
|
||||
font-size: 1rem;
|
||||
line-height: 1.2;
|
||||
font-family: 'UI-Regular';
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
Rec toggle switch and
|
||||
volume sliders
|
||||
|
||||
*/
|
||||
|
||||
:root {
|
||||
--vc-off-color: #2A3641; /* linear-gradient(190deg, rgba(0, 0, 0, 0.39) 5%, rgba(0, 0, 0, 0.157) 50%); */
|
||||
--vc-on-color: #2A3641;
|
||||
--vc-animation-speed: 0.2s ease-out;
|
||||
--vc-font-family: "UI-Regular";
|
||||
--vc-font-size: 1.2em;
|
||||
--vc-font-weight: unset;
|
||||
--vc-on-font-color: rgba(255, 255, 255, 1.0);
|
||||
--vc-off-font-color: rgb(255, 255, 255);
|
||||
--vc-label-position-off: 14px;
|
||||
--vc-label-position-on: 14px;
|
||||
--vc-height: 1.3em; /* 2.0em*/
|
||||
--vc-width: 100%;
|
||||
--vc-handle-width: 60%;
|
||||
--vc-handle-height: 90%;
|
||||
--vc-box-border-radius: 0px;
|
||||
--vc-handle-border-radius: 0px;
|
||||
--vc-handle-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
|
||||
--vc-handle-color: #485a6b; /* rgb(61, 61, 61); */
|
||||
--vc-onclick-width: 80%;
|
||||
--vc-handle-top: 0.1em; /* 0.2 */
|
||||
--vc-handle-fontsize: 0.7em; /* 0.8 */
|
||||
--vc-handle-lineHeight: 1.7em; /* 2.2 */
|
||||
}
|
||||
|
||||
.toggle-container * {
|
||||
font-family: var(--vc-font-family);
|
||||
transition: var(--vc-animation-speed);
|
||||
cursor: pointer;
|
||||
/* background: darkgreen; */
|
||||
}
|
||||
|
||||
.vc-switch {
|
||||
width: var(--vc-width);
|
||||
height: var(--vc-height);
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.toggle-container label {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
border-radius: var(--vc-box-border-radius);
|
||||
/* cursor: pointer; */
|
||||
}
|
||||
|
||||
.vc-switch-input {
|
||||
position: absolute;
|
||||
transform: translate3d(5px, 5px, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.vc-switch-label {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: inherit;
|
||||
font-size: var(--vc-font-size);
|
||||
font-weight: var(--vc-font-weight);
|
||||
background: var(--vc-off-color);
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.vc-switch-label:before,
|
||||
.vc-switch-label:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -0.5em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.vc-switch-label:before {
|
||||
content: attr(data-off);
|
||||
color: var(--vc-on-font-color);
|
||||
}
|
||||
|
||||
.vc-switch-label:after {
|
||||
content: attr(data-on);
|
||||
color: var(--vc-off-font-color);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.vc-switch-label:before {
|
||||
right: var(--vc-label-position-off);
|
||||
top: 16px;
|
||||
}
|
||||
|
||||
.vc-switch-label:after {
|
||||
left: var(--vc-label-position-on);;
|
||||
}
|
||||
|
||||
.vc-switch-input:checked ~ .vc-switch-label {
|
||||
background: var(--vc-on-color);
|
||||
text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.vc-switch-input:checked ~ .vc-switch-label:before {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.vc-switch-input:checked ~ .vc-switch-label:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.vc-handle {
|
||||
left: 2px;
|
||||
font-size: var(--vc-handle-fontsize);
|
||||
position: absolute !important;
|
||||
top: var(--vc-handle-top);
|
||||
background: var(--vc-handle-color);
|
||||
border-radius: var(--vc-handle-border-radius);
|
||||
box-shadow: var(--vc-handle-shadow);
|
||||
width: var(--vc-handle-width);
|
||||
height: var(--vc-handle-height);
|
||||
line-height: var(--vc-handle-lineHeight);
|
||||
}
|
||||
|
||||
|
||||
.vc-handle:before {
|
||||
content: "";
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
position: absolute !important;
|
||||
margin: -6px 0 0 -6px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.vc-switch-label:active ~ .vc-handle, .vc-handle:active {
|
||||
width: var(--vc-onclick-width);
|
||||
}
|
||||
|
||||
.vc-switch-input:checked ~ .vc-handle {
|
||||
left: unset;
|
||||
right: 2px;
|
||||
color: var(--vc-on-font-color);
|
||||
text-shadow: 0 0 6px var(--vc-on-font-color),
|
||||
0 4px 8px green,
|
||||
0 0px 12px rgb(20, 209, 20);
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,123 @@
|
||||
.can-toggle {
|
||||
position: relative;
|
||||
border: 1px solid yellow;
|
||||
padding: 0;
|
||||
}
|
||||
.can-toggle *, .can-toggle *:before, .can-toggle *:after {
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.can-toggle input[type="checkbox"] {
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
}
|
||||
.can-toggle input[type="checkbox"][disabled] ~ label {
|
||||
pointer-events: none;
|
||||
}
|
||||
.can-toggle input[type="checkbox"][disabled] ~ label .can-toggle__switch {
|
||||
opacity: 0.4;
|
||||
}
|
||||
.can-toggle input[type="checkbox"]:checked ~ label .can-toggle__switch:before {
|
||||
left: 0;
|
||||
content: attr(data-unchecked);
|
||||
}
|
||||
.can-toggle input[type="checkbox"]:checked ~ label .can-toggle__switch:after {
|
||||
content: attr(data-checked);
|
||||
}
|
||||
.can-toggle label {
|
||||
display: flex;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
}
|
||||
.can-toggle label .can-toggle__label-text {
|
||||
/* not visible */
|
||||
flex: 1;
|
||||
padding-left: 32px;
|
||||
}
|
||||
|
||||
.can-toggle label .can-toggle__switch {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.can-toggle label .can-toggle__switch:before {
|
||||
top: 0px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
content: attr(data-checked);
|
||||
text-transform: uppercase;
|
||||
background-color: blue;
|
||||
}
|
||||
.can-toggle label .can-toggle__switch:after {
|
||||
z-index: 5;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
background: #485a6b;
|
||||
text-transform: uppercase;
|
||||
content: attr(data-unchecked);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.can-toggle label .can-toggle__label-text {
|
||||
flex: 1;
|
||||
}
|
||||
.can-toggle label .can-toggle__switch {
|
||||
transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1);
|
||||
background: rgba(0, 0, 0, 0.5); /* bg color */
|
||||
}
|
||||
.can-toggle label .can-toggle__switch:before {
|
||||
color: rgb(160, 160, 160); /* text color on the back */
|
||||
}
|
||||
.can-toggle label .can-toggle__switch:after {
|
||||
transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1);
|
||||
color: rgb(255, 255, 255); /* text color on the sliding button */
|
||||
}
|
||||
.can-toggle input[type="checkbox"]:focus ~ label .can-toggle__switch:after, .can-toggle input[type="checkbox"]:hover ~ label .can-toggle__switch:after {
|
||||
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.can-toggle input[type="checkbox"]:checked ~ label .can-toggle__switch:after {
|
||||
transform: translate3d(80px, 0, 0); /*65px*/
|
||||
/*margin-left: 80px; */
|
||||
}
|
||||
/*
|
||||
.can-toggle input[type="checkbox"]:checked:focus ~ label .can-toggle__switch:after, .can-toggle input[type="checkbox"]:checked:hover ~ label .can-toggle__switch:after {
|
||||
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
*/
|
||||
.can-toggle label {
|
||||
/* font-size: 14px; */
|
||||
}
|
||||
.can-toggle label .can-toggle__switch {
|
||||
flex: 1 0;
|
||||
/* background-color: hotpink; */
|
||||
/*height: 4em; 36px; */
|
||||
border-radius: 4px;
|
||||
}
|
||||
.can-toggle label .can-toggle__switch:before {
|
||||
/* non-active one */
|
||||
left: max(67px, 50%); /*67px*/
|
||||
font-size: 0.7em; /*12px;*/
|
||||
line-height: 1;
|
||||
width: max(67px, 50%); /* 67px; */
|
||||
/* background-color: red; */
|
||||
padding: 0 0.2em; /*12px*/
|
||||
}
|
||||
|
||||
.can-toggle label .can-toggle__switch:after {
|
||||
/* active one */
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
border-radius: 2px;
|
||||
width: max(67px, 50%); /* 67px; */
|
||||
line-height: 1;
|
||||
font-size: 0.7em; /*12px;*/
|
||||
/* background-color: greenyellow; */
|
||||
|
||||
}
|
||||
|
||||
.can-toggle label .can-toggle__switch:hover:after {
|
||||
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,111 @@
|
||||
/* simple tree */
|
||||
|
||||
body{
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.simple-tree {
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
.simple-tree>details>summary {
|
||||
display: none;
|
||||
}
|
||||
.simple-tree a,
|
||||
.simple-tree summary {
|
||||
display: block;
|
||||
width: fit-content;
|
||||
width: -moz-fit-content;
|
||||
border: solid 1px transparent;
|
||||
padding: 0 2px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.simple-tree a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
.simple-tree ::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
.simple-tree summary {
|
||||
list-style-type: none;
|
||||
background-color: #eee;
|
||||
outline: none;
|
||||
}
|
||||
.simple-tree.dark summary {
|
||||
background-color: #444;
|
||||
}
|
||||
.simple-tree details>:not(details),
|
||||
.simple-tree details {
|
||||
position: relative;
|
||||
}
|
||||
.simple-tree details :not(summary) {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.simple-tree.nodots details :not(summary) {
|
||||
margin-left: 12px;
|
||||
}
|
||||
.simple-tree details::before,
|
||||
.simple-tree details>:not(details)::before {
|
||||
content: '';
|
||||
width: 10px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
.simple-tree details::before,
|
||||
.simple-tree details>:not(details)::before {
|
||||
background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 2 2" xmlns="http://www.w3.org/2000/svg"><g><rect x="0" y="0" width="1" height="1"/></g></svg>') left top / 2px 2px;
|
||||
}
|
||||
.simple-tree.dark details::before,
|
||||
.simple-tree.dark details>:not(summary)::before {
|
||||
background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 2 2" xmlns="http://www.w3.org/2000/svg"><g><rect x="0" y="0" width="1" height="1" fill="white"/></g></svg>');
|
||||
}
|
||||
.simple-tree.nodots details::before,
|
||||
.simple-tree.nodots details>:not(summary)::before {
|
||||
background-image: none;
|
||||
}
|
||||
.simple-tree details::before {
|
||||
top: 0;
|
||||
height: 100%;
|
||||
background-repeat: repeat-y;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
.simple-tree details>:not(details)::before {
|
||||
top: 8px;
|
||||
height: calc(100% - 8px);
|
||||
background-repeat: repeat-x;
|
||||
left: -15px;
|
||||
}
|
||||
.simple-tree details>summary::before {
|
||||
background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><g><rect x="0" y="0" width="12" height="12" fill="white" stroke="gray" stroke-width="1"/><line x1="3" y1="6" x2="9" y2="6" stroke="black" stroke-width="2"/><line x1="6" y1="3" x2="6" y2="9" stroke="black" stroke-width="2"/></g></svg>') center center / 12px 12px no-repeat;
|
||||
left: -22px;
|
||||
top: 2px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.simple-tree details[open]>summary::before {
|
||||
background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><title/><g><rect x="0" y="0" width="12" height="12" fill="white" stroke="gray" stroke-width="1"/><line x1="3" y1="6" x2="9" y2="6" stroke="black" stroke-width="2"/></g></svg>');
|
||||
}
|
||||
/* async tree */
|
||||
.async-tree details[open][data-loaded=false] {
|
||||
pointer-events: none;
|
||||
}
|
||||
.async-tree details[open][data-loaded=false]>summary::before {
|
||||
background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g><animateTransform attributeName="transform" type="rotate" from="0 32 32" to="360 32 32" dur="1s" repeatCount="indefinite"/><circle cx="32" cy="32" r="32" fill="whitesmoke"/><path d="M 62 32 A 30 30 0 0 0 32 2" style="stroke: black; stroke-width:6; fill:none;"/></g></svg>');
|
||||
}
|
||||
.async-tree.black details[open][data-loaded=false]>summary::before {
|
||||
background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g><animateTransform attributeName="transform" type="rotate" from="0 32 32" to="360 32 32" dur="1s" repeatCount="indefinite"/><circle cx="32" cy="32" r="32" fill="whitesmoke"/><path d="M 62 32 A 30 30 0 0 0 32 2" style="stroke: white; stroke-width:6; fill:none;"/></g></svg>');
|
||||
}
|
||||
/* select tree */
|
||||
.select-tree .selected {
|
||||
background-color: #beebff;
|
||||
border-color: #99defd;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.select-tree.dark .selected {
|
||||
background-color: #3a484e;
|
||||
border-color: #99defd;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
|
||||
:root {
|
||||
--tooltipbg: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.b-tooltip {
|
||||
font-size: 0.6em;
|
||||
padding: 0.3em;
|
||||
border-radius: 0.2em;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
background: var(--tooltipbg);
|
||||
display: inline-block;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
.b-tooltip:after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
top: 4px;
|
||||
border-top: 10px solid transparent;
|
||||
border-right: 10px solid var(--tooltipbg);
|
||||
border-left: none;
|
||||
border-bottom: 10px solid transparent;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
.picker_wrapper.no_alpha .picker_alpha{display:none}.picker_wrapper.no_editor .picker_editor{position:absolute;z-index:-1;opacity:0}.picker_wrapper.no_cancel .picker_cancel{display:none}.layout_default.picker_wrapper{display:flex;flex-flow:row wrap;justify-content:space-between;align-items:stretch;font-size:10px;width:25em;padding:.5em}.layout_default.picker_wrapper input,.layout_default.picker_wrapper button{font-size:1rem}.layout_default.picker_wrapper>*{margin:.5em}.layout_default.picker_wrapper::before{content:"";display:block;width:100%;height:0;order:1}.layout_default .picker_slider,.layout_default .picker_selector{padding:1em}.layout_default .picker_hue{width:100%}.layout_default .picker_sl{flex:1 1 auto}.layout_default .picker_sl::before{content:"";display:block;padding-bottom:100%}.layout_default .picker_editor{order:1;width:6.5rem}.layout_default .picker_editor input{width:100%;height:100%}.layout_default .picker_sample{order:1;flex:1 1 auto}.layout_default .picker_done,.layout_default .picker_cancel{order:1}.picker_wrapper{box-sizing:border-box;background:#f2f2f2;box-shadow:0 0 0 1px silver;cursor:default;font-family:sans-serif;color:#444;pointer-events:auto}.picker_wrapper:focus{outline:none}.picker_wrapper button,.picker_wrapper input{box-sizing:border-box;border:none;box-shadow:0 0 0 1px silver;outline:none}.picker_wrapper button:focus,.picker_wrapper button:active,.picker_wrapper input:focus,.picker_wrapper input:active{box-shadow:0 0 2px 1px #1e90ff}.picker_wrapper button{padding:.4em .6em;cursor:pointer;background-color:#f5f5f5;background-image:linear-gradient(0deg, gainsboro, transparent)}.picker_wrapper button:active{background-image:linear-gradient(0deg, transparent, gainsboro)}.picker_wrapper button:hover{background-color:#fff}.picker_selector{position:absolute;z-index:1;display:block;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);border:2px solid #fff;border-radius:100%;box-shadow:0 0 3px 1px #67b9ff;background:currentColor;cursor:pointer}.picker_slider .picker_selector{border-radius:2px}.picker_hue{position:relative;background-image:linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red);box-shadow:0 0 0 1px silver}.picker_sl{position:relative;box-shadow:0 0 0 1px silver;background-image:linear-gradient(180deg, white, rgba(255, 255, 255, 0) 50%),linear-gradient(0deg, black, rgba(0, 0, 0, 0) 50%),linear-gradient(90deg, #808080, rgba(128, 128, 128, 0))}.picker_alpha,.picker_sample{position:relative;background:linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%) 0 0/2em 2em,linear-gradient(45deg, lightgrey 25%, white 25%, white 75%, lightgrey 75%) 1em 1em/2em 2em;box-shadow:0 0 0 1px silver}.picker_alpha .picker_selector,.picker_sample .picker_selector{background:none}.picker_editor input{font-family:monospace;padding:.2em .4em}.picker_sample::before{content:"";position:absolute;display:block;width:100%;height:100%;background:currentColor}.picker_arrow{position:absolute;z-index:-1}.picker_wrapper.popup{position:absolute;z-index:2;margin:1.5em}.picker_wrapper.popup,.picker_wrapper.popup .picker_arrow::before,.picker_wrapper.popup .picker_arrow::after{background:#f2f2f2;box-shadow:0 0 10px 1px rgba(0,0,0,.4)}.picker_wrapper.popup .picker_arrow{width:3em;height:3em;margin:0}.picker_wrapper.popup .picker_arrow::before,.picker_wrapper.popup .picker_arrow::after{content:"";display:block;position:absolute;top:0;left:0;z-index:-99}.picker_wrapper.popup .picker_arrow::before{width:100%;height:100%;-webkit-transform:skew(45deg);transform:skew(45deg);-webkit-transform-origin:0 100%;transform-origin:0 100%}.picker_wrapper.popup .picker_arrow::after{width:150%;height:150%;box-shadow:none}.popup.popup_top{bottom:100%;left:0}.popup.popup_top .picker_arrow{bottom:0;left:0;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.popup.popup_bottom{top:100%;left:0}.popup.popup_bottom .picker_arrow{top:0;left:0;-webkit-transform:rotate(90deg) scale(1, -1);transform:rotate(90deg) scale(1, -1)}.popup.popup_left{top:0;right:100%}.popup.popup_left .picker_arrow{top:0;right:0;-webkit-transform:scale(-1, 1);transform:scale(-1, 1)}.popup.popup_right{top:0;left:100%}.popup.popup_right .picker_arrow{top:0;left:0}
|
||||
Reference in New Issue
Block a user