mirror of
https://github.com/Karaka-Management/cssOMS.git
synced 2026-01-11 19:18:40 +00:00
2650 lines
62 KiB
CSS
Executable File
2650 lines
62 KiB
CSS
Executable File
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, nav, section, iframe, label {
|
|
margin: 0;
|
|
padding: 0; }
|
|
|
|
a, img, button {
|
|
outline: none; }
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none; }
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-weight: 300; }
|
|
|
|
ul {
|
|
list-style: none; }
|
|
|
|
th {
|
|
font-weight: 300; }
|
|
|
|
input, select, textarea, .textarea, button {
|
|
box-sizing: border-box;
|
|
box-shadow: none;
|
|
appearance: none;
|
|
border-radius: 0; }
|
|
input:focus, select:focus, textarea:focus, .textarea:focus, button:focus {
|
|
outline: none; }
|
|
|
|
input[type=checkbox] {
|
|
margin-right: 5px; }
|
|
|
|
button::-moz-focus-inner {
|
|
border: 0; }
|
|
|
|
table {
|
|
border-collapse: separate;
|
|
border-spacing: 0; }
|
|
|
|
i {
|
|
font-style: normal; }
|
|
|
|
.clear {
|
|
clear: both; }
|
|
|
|
p {
|
|
margin: 0 0 10px 0;
|
|
line-height: 1.4em; }
|
|
p span {
|
|
margin: 0;
|
|
padding: 0; }
|
|
p + p {
|
|
margin-top: 5px; }
|
|
|
|
blockquote {
|
|
color: var(--bq-c);
|
|
background: var(--bq-bg);
|
|
border: 1px solid var(--bq-border);
|
|
padding: 1rem;
|
|
border-radius: 5px;
|
|
margin: 1.5rem; }
|
|
blockquote p:last-child {
|
|
margin-bottom: 0; }
|
|
blockquote code {
|
|
color: inherit;
|
|
background: inherit; }
|
|
blockquote a {
|
|
color: inherit; }
|
|
|
|
pre, code {
|
|
font-family: var(--ff);
|
|
font-size: .8rem;
|
|
background: var(--code-bg);
|
|
color: var(--code-c); }
|
|
|
|
code {
|
|
border-radius: 3px;
|
|
padding: .2rem .4rem .2rem .4rem; }
|
|
|
|
pre {
|
|
line-height: 1.2rem;
|
|
border: 1px solid var(--bborder);
|
|
padding: 1rem;
|
|
overflow-x: auto;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
white-space: pre-wrap;
|
|
border-left: 3px solid var(--bq-bg); }
|
|
pre code {
|
|
padding: 0; }
|
|
pre > span {
|
|
display: block; }
|
|
pre > span:before {
|
|
display: inline-block;
|
|
border-right: 1px solid var(--bborder);
|
|
padding: 0 .5em;
|
|
margin-right: .5em;
|
|
color: #888;
|
|
width: 30px; }
|
|
|
|
strong {
|
|
font-weight: 500;
|
|
font-weight: bold; }
|
|
|
|
iframe {
|
|
padding: 0;
|
|
margin: 0;
|
|
border: none;
|
|
width: 100%; }
|
|
|
|
.clean {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
outline: 0;
|
|
vertical-align: top; }
|
|
|
|
.clean:focus {
|
|
outline: 0; }
|
|
|
|
.p,
|
|
.max, .min, .close, .cancel, .filter, .ok, .search, .abort, .sort {
|
|
cursor: pointer; }
|
|
|
|
.nobreak, .nowrap {
|
|
white-space: nowrap; }
|
|
|
|
.center {
|
|
margin: 0 auto; }
|
|
|
|
.pAlignTable {
|
|
display: table;
|
|
width: 100%; }
|
|
|
|
.vCenterTable {
|
|
display: table-cell;
|
|
vertical-align: middle; }
|
|
|
|
.overflowfix {
|
|
overflow: auto; }
|
|
|
|
.rp {
|
|
position: relative; }
|
|
|
|
.ap {
|
|
position: absolute; }
|
|
|
|
.lf {
|
|
float: left; }
|
|
|
|
.rf {
|
|
float: right; }
|
|
|
|
.op {
|
|
margin: 0 auto; }
|
|
|
|
.rT {
|
|
text-align: right; }
|
|
|
|
.lT {
|
|
text-align: left; }
|
|
|
|
.cT {
|
|
text-align: center; }
|
|
|
|
.f-w {
|
|
width: 100%;
|
|
max-width: none; }
|
|
|
|
.f-h {
|
|
height: 100%;
|
|
max-height: none; }
|
|
|
|
.vT {
|
|
vertical-align: top; }
|
|
|
|
.vB {
|
|
vertical-align: bottom; }
|
|
|
|
.vM {
|
|
vertical-align: middle; }
|
|
|
|
.vC {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
white-space: nowrap; }
|
|
|
|
.vh {
|
|
display: none !important; }
|
|
|
|
.x-overflow {
|
|
overflow-x: auto; }
|
|
|
|
.container-fluid,
|
|
.container {
|
|
box-sizing: border-box; }
|
|
|
|
.row {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex: 0 1 auto;
|
|
flex-direction: row;
|
|
flex-wrap: wrap; }
|
|
|
|
.col-simple {
|
|
flex-direction: column; }
|
|
|
|
.row-simple {
|
|
flex-direction: row; }
|
|
|
|
.col-simple, .row-simple {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-grow: 1; }
|
|
.col-simple .row, .row-simple .row {
|
|
flex: 1 1 auto;
|
|
flex-direction: column; }
|
|
.col-simple .col-xs-12, .row-simple .col-xs-12 {
|
|
flex-basis: 0; }
|
|
|
|
.fill-all {
|
|
flex: 1 1 auto; }
|
|
|
|
.col {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex: 1 0 auto;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
margin-bottom: var(--gutter-compensation, -0.5rem);
|
|
margin-left: var(--gutter-compensation, -0.5rem); }
|
|
|
|
.xs-col-table,
|
|
.md-col-table,
|
|
.lg-col-table {
|
|
display: none; }
|
|
|
|
.xs-hidden,
|
|
.sm-hidden,
|
|
.md-hidden,
|
|
.lg-hidden {
|
|
display: none; }
|
|
|
|
.col-xs-0 {
|
|
box-sizing: border-box;
|
|
flex-grow: 0;
|
|
padding-right: 1rem; }
|
|
|
|
.plain-grid {
|
|
padding: 0 !important; }
|
|
|
|
.row.reverse {
|
|
flex-direction: row-reverse; }
|
|
|
|
.col.reverse {
|
|
flex-direction: column-reverse; }
|
|
|
|
.col-xs,
|
|
.col-xs-1,
|
|
.col-xs-2,
|
|
.col-xs-3,
|
|
.col-xs-4,
|
|
.col-xs-5,
|
|
.col-xs-6,
|
|
.col-xs-7,
|
|
.col-xs-8,
|
|
.col-xs-9,
|
|
.col-xs-10,
|
|
.col-xs-11,
|
|
.col-xs-12 {
|
|
box-sizing: border-box;
|
|
padding-right: 1rem; }
|
|
|
|
.col-xs {
|
|
flex-grow: 1;
|
|
flex-basis: 0;
|
|
max-width: 100%; }
|
|
|
|
.col-xs-1 {
|
|
flex-basis: 8.333%;
|
|
max-width: 8.333%; }
|
|
|
|
.col-xs-2 {
|
|
flex-basis: 16.667%;
|
|
max-width: 16.667%; }
|
|
|
|
.col-xs-3 {
|
|
flex-basis: 25%;
|
|
max-width: 25%; }
|
|
|
|
.col-xs-4 {
|
|
flex-basis: 33.333%;
|
|
max-width: 33.333%; }
|
|
|
|
.col-xs-5 {
|
|
flex-basis: 41.667%;
|
|
max-width: 41.667%; }
|
|
|
|
.col-xs-6 {
|
|
flex-basis: 50%;
|
|
max-width: 50%; }
|
|
|
|
.col-xs-7 {
|
|
flex-basis: 58.333%;
|
|
max-width: 58.333%; }
|
|
|
|
.col-xs-8 {
|
|
flex-basis: 66.667%;
|
|
max-width: 66.667%; }
|
|
|
|
.col-xs-9 {
|
|
flex-basis: 75%;
|
|
max-width: 75%; }
|
|
|
|
.col-xs-10 {
|
|
flex-basis: 83.333%;
|
|
max-width: 83.333%; }
|
|
|
|
.col-xs-11 {
|
|
flex-basis: 91.667%;
|
|
max-width: 91.667%; }
|
|
|
|
.col-xs-12 {
|
|
flex-basis: 100%;
|
|
max-width: 100%; }
|
|
|
|
.col-xs-offset-1 {
|
|
margin-left: 8.333%; }
|
|
|
|
.col-xs-offset-2 {
|
|
margin-left: 16.667%; }
|
|
|
|
.col-xs-offset-3 {
|
|
margin-left: 25%; }
|
|
|
|
.col-xs-offset-4 {
|
|
margin-left: 33.333%; }
|
|
|
|
.col-xs-offset-5 {
|
|
margin-left: 41.667%; }
|
|
|
|
.col-xs-offset-6 {
|
|
margin-left: 50%; }
|
|
|
|
.col-xs-offset-7 {
|
|
margin-left: 58.333%; }
|
|
|
|
.col-xs-offset-8 {
|
|
margin-left: 66.667%; }
|
|
|
|
.col-xs-offset-9 {
|
|
margin-left: 75%; }
|
|
|
|
.col-xs-offset-10 {
|
|
margin-left: 83.333%; }
|
|
|
|
.col-xs-offset-11 {
|
|
margin-left: 91.667%; }
|
|
|
|
.start-xs {
|
|
justify-content: flex-start;
|
|
text-align: start; }
|
|
|
|
.center-xs {
|
|
justify-content: center;
|
|
text-align: center; }
|
|
|
|
.right-xs {
|
|
margin-left: auto !important; }
|
|
|
|
.end-xs {
|
|
justify-content: flex-end;
|
|
margin-left: auto; }
|
|
|
|
.top-xs {
|
|
align-items: flex-start; }
|
|
|
|
.middle-xs {
|
|
align-items: center; }
|
|
|
|
.bottom-xs {
|
|
align-items: flex-end; }
|
|
|
|
.around-xs {
|
|
justify-content: space-around; }
|
|
|
|
.between-xs {
|
|
justify-content: space-between; }
|
|
|
|
.first-xs {
|
|
order: -1; }
|
|
|
|
.last-xs {
|
|
order: 1; }
|
|
|
|
@media only screen and (min-width: 48em) {
|
|
.sm-hidden {
|
|
display: revert; }
|
|
.container {
|
|
width: 46rem; }
|
|
.xs-col-table {
|
|
display: inherit; }
|
|
.col-sm,
|
|
.col-sm-1,
|
|
.col-sm-2,
|
|
.col-sm-3,
|
|
.col-sm-4,
|
|
.col-sm-5,
|
|
.col-sm-6,
|
|
.col-sm-7,
|
|
.col-sm-8,
|
|
.col-sm-9,
|
|
.col-sm-10,
|
|
.col-sm-11,
|
|
.col-sm-12 {
|
|
box-sizing: border-box;
|
|
flex: 0 0 auto;
|
|
padding-right: 1rem; }
|
|
.col-sm {
|
|
flex-grow: 1;
|
|
flex-basis: 0;
|
|
max-width: 100%; }
|
|
.col-sm-1 {
|
|
flex-basis: 8.333%;
|
|
max-width: 8.333%; }
|
|
.col-sm-2 {
|
|
flex-basis: 16.667%;
|
|
max-width: 16.667%; }
|
|
.col-sm-3 {
|
|
flex-basis: 25%;
|
|
max-width: 25%; }
|
|
.col-sm-4 {
|
|
flex-basis: 33.333%;
|
|
max-width: 33.333%; }
|
|
.col-sm-5 {
|
|
flex-basis: 41.667%;
|
|
max-width: 41.667%; }
|
|
.col-sm-6 {
|
|
flex-basis: 50%;
|
|
max-width: 50%; }
|
|
.col-sm-7 {
|
|
flex-basis: 58.333%;
|
|
max-width: 58.333%; }
|
|
.col-sm-8 {
|
|
flex-basis: 66.667%;
|
|
max-width: 66.667%; }
|
|
.col-sm-9 {
|
|
flex-basis: 75%;
|
|
max-width: 75%; }
|
|
.col-sm-10 {
|
|
flex-basis: 83.333%;
|
|
max-width: 83.333%; }
|
|
.col-sm-11 {
|
|
flex-basis: 91.667%;
|
|
max-width: 91.667%; }
|
|
.col-sm-12 {
|
|
flex-basis: 100%;
|
|
max-width: 100%; }
|
|
.col-sm-offset-1 {
|
|
margin-left: 8.333%; }
|
|
.col-sm-offset-2 {
|
|
margin-left: 16.667%; }
|
|
.col-sm-offset-3 {
|
|
margin-left: 25%; }
|
|
.col-sm-offset-4 {
|
|
margin-left: 33.333%; }
|
|
.col-sm-offset-5 {
|
|
margin-left: 41.667%; }
|
|
.col-sm-offset-6 {
|
|
margin-left: 50%; }
|
|
.col-sm-offset-7 {
|
|
margin-left: 58.333%; }
|
|
.col-sm-offset-8 {
|
|
margin-left: 66.667%; }
|
|
.col-sm-offset-9 {
|
|
margin-left: 75%; }
|
|
.col-sm-offset-10 {
|
|
margin-left: 83.333%; }
|
|
.col-sm-offset-11 {
|
|
margin-left: 91.667%; }
|
|
.start-sm {
|
|
justify-content: flex-start;
|
|
text-align: start; }
|
|
.center-sm {
|
|
justify-content: center;
|
|
text-align: center; }
|
|
.end-sm {
|
|
justify-content: flex-end;
|
|
text-align: end; }
|
|
.top-sm {
|
|
align-items: flex-start; }
|
|
.middle-sm {
|
|
align-items: center; }
|
|
.bottom-sm {
|
|
align-items: flex-end; }
|
|
.around-sm {
|
|
justify-content: space-around; }
|
|
.between-sm {
|
|
justify-content: space-between; }
|
|
.first-sm {
|
|
order: -1; }
|
|
.last-sm {
|
|
order: 1; } }
|
|
|
|
@media only screen and (min-width: 62em) {
|
|
.col-simple .row {
|
|
flex-direction: row; }
|
|
.col-simple .col-xs-12 {
|
|
flex-basis: 100%; }
|
|
.md-hidden {
|
|
display: revert; }
|
|
.container {
|
|
width: 61rem; }
|
|
.md-col-table {
|
|
display: inherit; }
|
|
.col-md,
|
|
.col-md-1,
|
|
.col-md-2,
|
|
.col-md-3,
|
|
.col-md-4,
|
|
.col-md-5,
|
|
.col-md-6,
|
|
.col-md-7,
|
|
.col-md-8,
|
|
.col-md-9,
|
|
.col-md-10,
|
|
.col-md-11,
|
|
.col-md-12 {
|
|
box-sizing: border-box;
|
|
flex: 0 0 auto;
|
|
padding-right: 1rem; }
|
|
.col-md {
|
|
flex-grow: 1;
|
|
flex-basis: 0;
|
|
max-width: 100%; }
|
|
.col-md-1 {
|
|
flex-basis: 8.333%;
|
|
max-width: 8.333%; }
|
|
.col-md-2 {
|
|
flex-basis: 16.667%;
|
|
max-width: 16.667%; }
|
|
.col-md-3 {
|
|
flex-basis: 25%;
|
|
max-width: 25%; }
|
|
.col-md-4 {
|
|
flex-basis: 33.333%;
|
|
max-width: 33.333%; }
|
|
.col-md-5 {
|
|
flex-basis: 41.667%;
|
|
max-width: 41.667%; }
|
|
.col-md-6 {
|
|
flex-basis: 50%;
|
|
max-width: 50%; }
|
|
.col-md-7 {
|
|
flex-basis: 58.333%;
|
|
max-width: 58.333%; }
|
|
.col-md-8 {
|
|
flex-basis: 66.667%;
|
|
max-width: 66.667%; }
|
|
.col-md-9 {
|
|
flex-basis: 75%;
|
|
max-width: 75%; }
|
|
.col-md-10 {
|
|
flex-basis: 83.333%;
|
|
max-width: 83.333%; }
|
|
.col-md-11 {
|
|
flex-basis: 91.667%;
|
|
max-width: 91.667%; }
|
|
.col-md-12 {
|
|
flex-basis: 100%;
|
|
max-width: 100%; }
|
|
.col-md-offset-1 {
|
|
margin-left: 8.333%; }
|
|
.col-md-offset-2 {
|
|
margin-left: 16.667%; }
|
|
.col-md-offset-3 {
|
|
margin-left: 25%; }
|
|
.col-md-offset-4 {
|
|
margin-left: 33.333%; }
|
|
.col-md-offset-5 {
|
|
margin-left: 41.667%; }
|
|
.col-md-offset-6 {
|
|
margin-left: 50%; }
|
|
.col-md-offset-7 {
|
|
margin-left: 58.333%; }
|
|
.col-md-offset-8 {
|
|
margin-left: 66.667%; }
|
|
.col-md-offset-9 {
|
|
margin-left: 75%; }
|
|
.col-md-offset-10 {
|
|
margin-left: 83.333%; }
|
|
.col-md-offset-11 {
|
|
margin-left: 91.667%; }
|
|
.start-md {
|
|
justify-content: flex-start;
|
|
text-align: start; }
|
|
.center-md {
|
|
justify-content: center;
|
|
text-align: center; }
|
|
.end-md {
|
|
justify-content: flex-end;
|
|
text-align: end; }
|
|
.top-md {
|
|
align-items: flex-start; }
|
|
.middle-md {
|
|
align-items: center; }
|
|
.bottom-md {
|
|
align-items: flex-end; }
|
|
.around-md {
|
|
justify-content: space-around; }
|
|
.between-md {
|
|
justify-content: space-between; }
|
|
.first-md {
|
|
order: -1; }
|
|
.last-md {
|
|
order: 1; } }
|
|
|
|
@media only screen and (min-width: 75em) {
|
|
.lg-hidden {
|
|
display: revert; }
|
|
.container {
|
|
width: 71rem; }
|
|
.lg-col-table {
|
|
display: inherit; }
|
|
.col-lg,
|
|
.col-lg-1,
|
|
.col-lg-2,
|
|
.col-lg-3,
|
|
.col-lg-4,
|
|
.col-lg-5,
|
|
.col-lg-6,
|
|
.col-lg-7,
|
|
.col-lg-8,
|
|
.col-lg-9,
|
|
.col-lg-10,
|
|
.col-lg-11,
|
|
.col-lg-12 {
|
|
box-sizing: border-box;
|
|
flex: 0 0 auto;
|
|
padding-right: 1rem; }
|
|
.col-lg {
|
|
flex-grow: 1;
|
|
flex-basis: 0;
|
|
max-width: 100%; }
|
|
.col-lg-1 {
|
|
flex-basis: 8.333%;
|
|
max-width: 8.333%; }
|
|
.col-lg-2 {
|
|
flex-basis: 16.667%;
|
|
max-width: 16.667%; }
|
|
.col-lg-3 {
|
|
flex-basis: 25%;
|
|
max-width: 25%; }
|
|
.col-lg-4 {
|
|
flex-basis: 33.333%;
|
|
max-width: 33.333%; }
|
|
.col-lg-5 {
|
|
flex-basis: 41.667%;
|
|
max-width: 41.667%; }
|
|
.col-lg-6 {
|
|
flex-basis: 50%;
|
|
max-width: 50%; }
|
|
.col-lg-7 {
|
|
flex-basis: 58.333%;
|
|
max-width: 58.333%; }
|
|
.col-lg-8 {
|
|
flex-basis: 66.667%;
|
|
max-width: 66.667%; }
|
|
.col-lg-9 {
|
|
flex-basis: 75%;
|
|
max-width: 75%; }
|
|
.col-lg-10 {
|
|
flex-basis: 83.333%;
|
|
max-width: 83.333%; }
|
|
.col-lg-11 {
|
|
flex-basis: 91.667%;
|
|
max-width: 91.667%; }
|
|
.col-lg-12 {
|
|
flex-basis: 100%;
|
|
max-width: 100%; }
|
|
.col-lg-offset-1 {
|
|
margin-left: 8.333%; }
|
|
.col-lg-offset-2 {
|
|
margin-left: 16.667%; }
|
|
.col-lg-offset-3 {
|
|
margin-left: 25%; }
|
|
.col-lg-offset-4 {
|
|
margin-left: 33.333%; }
|
|
.col-lg-offset-5 {
|
|
margin-left: 41.667%; }
|
|
.col-lg-offset-6 {
|
|
margin-left: 50%; }
|
|
.col-lg-offset-7 {
|
|
margin-left: 58.333%; }
|
|
.col-lg-offset-8 {
|
|
margin-left: 66.667%; }
|
|
.col-lg-offset-9 {
|
|
margin-left: 75%; }
|
|
.col-lg-offset-10 {
|
|
margin-left: 83.333%; }
|
|
.col-lg-offset-11 {
|
|
margin-left: 91.667%; }
|
|
.start-lg {
|
|
justify-content: flex-start;
|
|
text-align: start; }
|
|
.center-lg {
|
|
justify-content: center;
|
|
text-align: center; }
|
|
.end-lg {
|
|
justify-content: flex-end;
|
|
text-align: end; }
|
|
.top-lg {
|
|
align-items: flex-start; }
|
|
.middle-lg {
|
|
align-items: center; }
|
|
.bottom-lg {
|
|
align-items: flex-end; }
|
|
.around-lg {
|
|
justify-content: space-around; }
|
|
.between-lg {
|
|
justify-content: space-between; }
|
|
.first-lg {
|
|
order: -1; }
|
|
.last-lg {
|
|
order: 1; } }
|
|
|
|
.hl-1 {
|
|
background: var(--red-c) !important;
|
|
color: #fff; }
|
|
|
|
.hl-2 {
|
|
background: var(--green-c) !important;
|
|
color: #fff; }
|
|
|
|
.hl-3 {
|
|
background: var(--blue-c) !important;
|
|
color: #fff; }
|
|
|
|
.hl-4 {
|
|
background: var(--yellow-c) !important;
|
|
color: #000; }
|
|
|
|
.hl-5 {
|
|
background: var(--purple-c) !important;
|
|
color: #fff; }
|
|
|
|
.hl-6 {
|
|
background: var(--pink-c) !important;
|
|
color: #fff; }
|
|
|
|
.hl-7 {
|
|
background: var(--orange-c) !important;
|
|
color: #fff; }
|
|
|
|
.portlet-body > article {
|
|
padding: 0; }
|
|
|
|
article {
|
|
background: var(--article-bg);
|
|
padding: 10px;
|
|
margin: 0;
|
|
font-size: .9rem;
|
|
color: var(--article-c);
|
|
line-height: 2rem;
|
|
white-space: normal; }
|
|
article .mermaid {
|
|
text-align: center; }
|
|
article del, article ins, article mark {
|
|
padding: 3px;
|
|
text-decoration: none; }
|
|
article pre {
|
|
margin: 1rem 0 1rem 0; }
|
|
article .tag {
|
|
margin: 0.1rem; }
|
|
article del {
|
|
background: var(--red1-c); }
|
|
article ins {
|
|
background: var(--green1-c); }
|
|
article mark {
|
|
background: var(--yellow1-c); }
|
|
article h1, article h2, article h3, article h4, article h5, article h6 {
|
|
font-weight: 300; }
|
|
article h1 {
|
|
font-size: 1.4rem; }
|
|
article h2 {
|
|
font-size: 1.3rem; }
|
|
article h3 {
|
|
font-size: 1.1rem; }
|
|
article h4, article h5, article h6 {
|
|
font-size: 1rem; }
|
|
article a {
|
|
color: var(--link-c);
|
|
border-bottom: 1px dotted var(--link-c); }
|
|
article a:hover {
|
|
border-bottom: none; }
|
|
article p {
|
|
line-height: 1.5em; }
|
|
article ol, article ul {
|
|
list-style-position: outside;
|
|
margin: 0.5rem 0 0.5rem 3rem;
|
|
line-height: 1rem; }
|
|
article ul {
|
|
list-style: disc; }
|
|
article li {
|
|
margin: 0.3rem 0 0.3rem 0;
|
|
line-height: 1.5em; }
|
|
article img {
|
|
display: block;
|
|
margin: 0 auto;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
display: inline-block; }
|
|
article img:focus {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
left: 0;
|
|
right: 0;
|
|
text-align: center;
|
|
width: auto;
|
|
height: auto; }
|
|
article img[tabindex="0"] {
|
|
cursor: pointer; }
|
|
article table {
|
|
border-collapse: collapse;
|
|
border: 1px solid var(--bborder);
|
|
margin: 0 auto;
|
|
margin-bottom: 1rem;
|
|
min-width: 90%; }
|
|
article table th, article table td {
|
|
padding: 5px;
|
|
border: 1px solid var(--bborder); }
|
|
article table th {
|
|
background: var(--thead-bg);
|
|
color: var(--thead-c); }
|
|
article table tr:nth-child(2n) td {
|
|
background: var(--trow-bg); }
|
|
|
|
.ipt-wrap {
|
|
display: table;
|
|
vertical-align: top;
|
|
box-sizing: border-box; }
|
|
.ipt-wrap .ipt-start, .ipt-wrap .ipt-second, .ipt-wrap .ipt-first {
|
|
display: table-cell;
|
|
vertical-align: inherit; }
|
|
.ipt-wrap .ipt-first {
|
|
width: 100%; }
|
|
.ipt-wrap .ipt-second {
|
|
padding-left: .75rem; }
|
|
|
|
.simple-flex {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-content: center;
|
|
align-items: center; }
|
|
|
|
.flex-line {
|
|
display: flex;
|
|
flex-direction: row; }
|
|
.flex-line + * {
|
|
margin-top: .75rem; }
|
|
.flex-line > div {
|
|
flex: 1; }
|
|
.flex-line > div:nth-child(n+2) {
|
|
padding-left: .75rem; }
|
|
.flex-line > div.fixed {
|
|
flex: 0;
|
|
flex-basis: auto; }
|
|
|
|
div.sticky, section.sticky {
|
|
position: sticky;
|
|
top: 1rem; }
|
|
|
|
.inline {
|
|
display: inline; }
|
|
|
|
.form-group {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap; }
|
|
.form-group > *:not(label) {
|
|
flex: 0 1 auto; }
|
|
.form-group + * {
|
|
margin-top: .75rem; }
|
|
.form-group label {
|
|
font-size: .9rem;
|
|
flex: 0 0 100%;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding-bottom: 5px; }
|
|
.form-group label > i {
|
|
margin-right: .5rem; }
|
|
.form-group span.checkbox + span.checkbox {
|
|
margin-left: 1.5rem; }
|
|
.form-group .input-control {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap; }
|
|
.form-group .input-control + .input-control {
|
|
margin-left: 1rem; }
|
|
.form-group textarea, .form-group .contenteditable {
|
|
height: 8rem; }
|
|
|
|
@media (max-width: 768px) {
|
|
.form-group, .flex-line {
|
|
flex-direction: column; }
|
|
.form-group .input-control + .input-control {
|
|
margin-top: 1rem;
|
|
margin-left: 0; } }
|
|
|
|
.wf-100 {
|
|
width: 100%; }
|
|
|
|
.wf-80 {
|
|
width: 80%; }
|
|
|
|
.wf-20 {
|
|
width: 20%; }
|
|
|
|
.wf-66 {
|
|
width: 66.66%; }
|
|
|
|
.wf-50 {
|
|
width: 50%; }
|
|
|
|
.wf-33 {
|
|
width: 33.33%; }
|
|
|
|
.wf-25 {
|
|
width: 25%; }
|
|
|
|
.wf-75 {
|
|
width: 75%; }
|
|
|
|
.spacer {
|
|
padding: 5px; }
|
|
|
|
.resizable {
|
|
resize: both;
|
|
overflow: auto; }
|
|
|
|
*[draggable] {
|
|
cursor: move; }
|
|
|
|
.oms-drag-placeholder, .oms-drag-placeholder td {
|
|
border: 2px dashed rgba(0, 0, 0, 0.5) !important; }
|
|
|
|
.blurry-text {
|
|
text-shadow: 0 0 0.9rem var(--default-c);
|
|
color: transparent; }
|
|
|
|
.tooltip {
|
|
cursor: pointer;
|
|
color: var(--box-hl);
|
|
font-size: .9rem;
|
|
display: inline-flex; }
|
|
.tooltip:hover, .tooltip:active, .tooltip:focus {
|
|
position: relative; }
|
|
.tooltip:hover:after, .tooltip:hover:before, .tooltip:active:after, .tooltip:active:before, .tooltip:focus:after, .tooltip:focus:before {
|
|
font-size: .9rem;
|
|
display: block;
|
|
position: absolute;
|
|
white-space: nowrap;
|
|
bottom: 100%;
|
|
margin-bottom: 5px;
|
|
padding: 7px;
|
|
border-radius: 3px;
|
|
background: var(--btn-bg);
|
|
color: #fff;
|
|
content: attr(data-tooltip);
|
|
text-align: center;
|
|
transform: translate(-45%, 0); }
|
|
|
|
.spinner-1 {
|
|
width: 40px;
|
|
height: 40px;
|
|
background-color: var(--default-c);
|
|
margin: 50px auto;
|
|
animation: sk-rotateplane 1.2s infinite ease-in-out; }
|
|
|
|
@keyframes sk-rotateplane {
|
|
0% {
|
|
transform: perspective(120px); }
|
|
50% {
|
|
transform: perspective(120px) rotateY(180deg); }
|
|
100% {
|
|
transform: perspective(120px) rotateY(180deg) rotateX(180deg); } }
|
|
|
|
@keyframes sk-rotateplane {
|
|
0% {
|
|
transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
|
|
50% {
|
|
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
|
|
100% {
|
|
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }
|
|
|
|
.spinner-2 {
|
|
text-align: center; }
|
|
.spinner-2 > div {
|
|
width: 18px;
|
|
height: 18px;
|
|
background-color: var(--default-c);
|
|
border-radius: 100%;
|
|
display: inline-block;
|
|
animation: sk-bouncedelay 1.4s infinite ease-in-out both; }
|
|
.spinner-2 .bounce1 {
|
|
animation-delay: -0.32s; }
|
|
.spinner-2 .bounce2 {
|
|
animation-delay: -0.16s; }
|
|
|
|
@keyframes sk-bouncedelay {
|
|
0%, 80%, 100% {
|
|
transform: scale(0); }
|
|
40% {
|
|
transform: scale(1); } }
|
|
|
|
@keyframes sk-bouncedelay {
|
|
0%, 80%, 100% {
|
|
transform: scale(0); }
|
|
40% {
|
|
transform: scale(1); } }
|
|
|
|
.spinner-3 {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin: 50px auto;
|
|
background-color: var(--default-c);
|
|
border-radius: 100%;
|
|
animation: sk-scaleout 1.0s infinite ease-in-out; }
|
|
|
|
@keyframes sk-scaleout {
|
|
0% {
|
|
transform: scale(0); }
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 0; } }
|
|
|
|
@keyframes sk-scaleout {
|
|
0% {
|
|
transform: scale(0); }
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 0; } }
|
|
|
|
canvas {
|
|
background: var(--box-bg);
|
|
user-select: none; }
|
|
canvas.chart {
|
|
width: 100%; }
|
|
|
|
form li {
|
|
margin: 5px 0 5px 0; }
|
|
|
|
form td {
|
|
white-space: nowrap;
|
|
padding-bottom: 5px; }
|
|
form td textarea + i {
|
|
vertical-align: top; }
|
|
|
|
form label {
|
|
font-size: .9rem;
|
|
color: var(--default-c); }
|
|
|
|
form i + i {
|
|
margin-left: 3px; }
|
|
|
|
form .layout td + td {
|
|
padding-left: 5px; }
|
|
|
|
form .list {
|
|
font-size: 1rem; }
|
|
form .list td {
|
|
white-space: nowrap;
|
|
padding: 3px 5px 3px 5px; }
|
|
|
|
img.frame-1 {
|
|
padding: 1rem;
|
|
background: var(--box-bg);
|
|
border: 1px solid var(--bborder);
|
|
box-sizing: border-box;
|
|
width: 100%; }
|
|
|
|
img.frame-2 {
|
|
border: 1px solid var(--bborder);
|
|
background: var(--box-bg);
|
|
box-sizing: border-box;
|
|
width: 100%; }
|
|
|
|
img.rounded {
|
|
border-radius: 50%;
|
|
background: var(--box-bg); }
|
|
|
|
img.bordered {
|
|
border: 1px solid var(--bborder); }
|
|
|
|
.img-comp {
|
|
margin-left: 3rem;
|
|
position: relative;
|
|
display: inline-block;
|
|
line-height: 0;
|
|
overflow: auto; }
|
|
.img-comp img {
|
|
user-select: none; }
|
|
.img-comp > div {
|
|
position: absolute;
|
|
width: 50%;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
resize: horizontal;
|
|
border-right: 1px solid #000; }
|
|
.img-comp > div:before {
|
|
content: '';
|
|
display: block;
|
|
width: 13px;
|
|
height: 13px;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
resize: horizontal;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-clip: content-box;
|
|
background: linear-gradient(-45deg, red 50%, transparent 0); }
|
|
|
|
.gallery {
|
|
max-width: 80%;
|
|
margin: 0 auto;
|
|
position: relative; }
|
|
.gallery input + .enlarged {
|
|
display: none; }
|
|
.gallery input:checked + .enlarged {
|
|
display: block; }
|
|
.gallery .enlarged {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0; }
|
|
.gallery .enlarged img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain; }
|
|
.gallery input {
|
|
display: none; }
|
|
.gallery input + img {
|
|
display: none; }
|
|
.gallery input:checked + img {
|
|
display: block;
|
|
margin: 0 auto;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
width: auto;
|
|
height: auto; }
|
|
.gallery .thumbs img {
|
|
width: 100px;
|
|
height: 100px;
|
|
margin: .3rem;
|
|
border: 1px solid var(--bborder); }
|
|
.gallery label {
|
|
cursor: pointer; }
|
|
|
|
.map-small .map, .olMapViewport {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 250px;
|
|
position: relative; }
|
|
.map-small .map .olControlAttribution, .olMapViewport .olControlAttribution {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: var(--box-bg);
|
|
padding: 2px;
|
|
font-size: .8rem; }
|
|
.map-small .map .olButton, .olMapViewport .olButton {
|
|
color: #fff; }
|
|
|
|
input, select, textarea, .textarea, option {
|
|
font-family: var(--ff);
|
|
font-weight: 300; }
|
|
|
|
input[type=checkbox] ~ .checked-visibility,
|
|
input[type=checkbox]:checked ~ .checked-visibility-alt {
|
|
display: none; }
|
|
|
|
input[type=checkbox]:checked ~ .checked-visibility,
|
|
input[type=checkbox] ~ .checked-visibility-alt {
|
|
display: inline-block; }
|
|
|
|
input, select, textarea, .textarea {
|
|
border: 1px solid var(--iborder); }
|
|
input.undecorated, select.undecorated, textarea.undecorated, .textarea.undecorated {
|
|
padding: 0;
|
|
border: none;
|
|
background: transparent;
|
|
resize: none; }
|
|
input:active.undecorated, input:focus.undecorated, select:active.undecorated, select:focus.undecorated, textarea:active.undecorated, textarea:focus.undecorated, .textarea:active.undecorated, .textarea:focus.undecorated {
|
|
appearance: none;
|
|
outline: none;
|
|
border-style: none; }
|
|
|
|
progress {
|
|
height: 20px;
|
|
width: 100%;
|
|
min-width: 150px; }
|
|
|
|
.textarea,
|
|
.tag-input,
|
|
textarea,
|
|
select,
|
|
input[type="password"],
|
|
input[type="text"],
|
|
input[type="datetime"],
|
|
input[type="email"],
|
|
input[type="date"],
|
|
input[type="number"],
|
|
input[type="datetime-local"] {
|
|
box-sizing: border-box;
|
|
color: var(--ipt-c);
|
|
background: var(--ipt-bg);
|
|
width: 100%;
|
|
max-width: 100%;
|
|
font-size: .9rem;
|
|
border: 1px solid var(--iborder);
|
|
transition: background 0.3s, border 0.3s; }
|
|
.textarea:focus, .textarea.active, .textarea:active,
|
|
.tag-input:focus,
|
|
.tag-input.active,
|
|
.tag-input:active,
|
|
textarea:focus,
|
|
textarea.active,
|
|
textarea:active,
|
|
select:focus,
|
|
select.active,
|
|
select:active,
|
|
input[type="password"]:focus,
|
|
input[type="password"].active,
|
|
input[type="password"]:active,
|
|
input[type="text"]:focus,
|
|
input[type="text"].active,
|
|
input[type="text"]:active,
|
|
input[type="datetime"]:focus,
|
|
input[type="datetime"].active,
|
|
input[type="datetime"]:active,
|
|
input[type="email"]:focus,
|
|
input[type="email"].active,
|
|
input[type="email"]:active,
|
|
input[type="date"]:focus,
|
|
input[type="date"].active,
|
|
input[type="date"]:active,
|
|
input[type="number"]:focus,
|
|
input[type="number"].active,
|
|
input[type="number"]:active,
|
|
input[type="datetime-local"]:focus,
|
|
input[type="datetime-local"].active,
|
|
input[type="datetime-local"]:active {
|
|
border-color: var(--ipt-bg-active);
|
|
border: 1px solid var(--iborder-active);
|
|
color: var(--ipt-c-active); }
|
|
.textarea:disabled,
|
|
.tag-input:disabled,
|
|
textarea:disabled,
|
|
select:disabled,
|
|
input[type="password"]:disabled,
|
|
input[type="text"]:disabled,
|
|
input[type="datetime"]:disabled,
|
|
input[type="email"]:disabled,
|
|
input[type="date"]:disabled,
|
|
input[type="number"]:disabled,
|
|
input[type="datetime-local"]:disabled {
|
|
cursor: not-allowed;
|
|
background: var(--disabled-bg); }
|
|
|
|
.textarea,
|
|
.tag-input,
|
|
textarea,
|
|
select:not([multiple]),
|
|
input[type="password"],
|
|
input[type="text"],
|
|
input[type="datetime"],
|
|
input[type="email"],
|
|
input[type="date"],
|
|
input[type="number"],
|
|
input[type="datetime-local"] {
|
|
height: 30px;
|
|
padding-left: .5rem; }
|
|
|
|
.inputWithIcon {
|
|
position: relative; }
|
|
.inputWithIcon .frontIco, .inputWithIcon .endIco {
|
|
color: var(--ipt-ico-c);
|
|
font-size: 1rem;
|
|
position: absolute;
|
|
padding: .5rem;
|
|
font-weight: 200; }
|
|
.inputWithIcon .frontIco {
|
|
left: 0;
|
|
top: 0; }
|
|
.inputWithIcon .endIco {
|
|
right: 0;
|
|
top: 0; }
|
|
.inputWithIcon .frontIco + input[type="text"], .inputWithIcon .frontIco + input[type="password"] {
|
|
padding-left: 2.5rem; }
|
|
.inputWithIcon input[type=text]:active, .inputWithIcon input[type=text]:focus,
|
|
.inputWithIcon input[type=password]:active, .inputWithIcon input[type=password]:focus {
|
|
border: 1px solid var(--iborder-active);
|
|
color: var(--txt-on-bg-c); }
|
|
.inputWithIcon input[type=text]:active ~ .frontIco, .inputWithIcon input[type=text]:focus ~ .frontIco,
|
|
.inputWithIcon input[type=password]:active ~ .frontIco, .inputWithIcon input[type=password]:focus ~ .frontIco,
|
|
.inputWithIcon input[type=text]:active ~ .endIco, .inputWithIcon input[type=text]:focus ~ .endIco,
|
|
.inputWithIcon input[type=password]:active ~ .endIco, .inputWithIcon input[type=password]:focus ~ .endIco {
|
|
color: var(--ipt-ico-c-active); }
|
|
.inputWithIcon input[type=text] ~ .endIco, .inputWithIcon input[type=text] ~ .endIco,
|
|
.inputWithIcon input[type=password] ~ .endIco, .inputWithIcon input[type=password] ~ .endIco {
|
|
cursor: pointer; }
|
|
|
|
.inputWrapper {
|
|
display: inline-flex;
|
|
flex-direction: row; }
|
|
.inputWrapper .txtWrap + input[type=submit], .inputWrapper .txtWrap + input[type=button], .inputWrapper .txtWrap + button {
|
|
margin: 0;
|
|
padding: 0;
|
|
flex: 0;
|
|
box-shadow: none; }
|
|
.inputWrapper .frontIco, .inputWrapper .endIco {
|
|
color: var(--ipt-ico-c);
|
|
font-size: 1.1rem;
|
|
font-weight: 200;
|
|
position: absolute;
|
|
top: 0;
|
|
padding: .25rem .6rem .6rem .4rem; }
|
|
.inputWrapper .frontIco {
|
|
left: 0;
|
|
font-size: 1.5rem; }
|
|
.inputWrapper .endIco {
|
|
right: 0;
|
|
font-size: 1.5rem; }
|
|
.inputWrapper .txtWrap {
|
|
flex: 1;
|
|
position: relative; }
|
|
.inputWrapper .txtWrap i + input {
|
|
padding-left: 2rem; }
|
|
.inputWrapper .txtWrap input[type=text]:active, .inputWrapper .txtWrap input[type=text]:focus,
|
|
.inputWrapper .txtWrap input[type=password]:active, .inputWrapper .txtWrap input[type=password]:focus {
|
|
border: 1px solid var(--iborder-active); }
|
|
.inputWrapper .txtWrap input[type=text]:active ~ .frontIco, .inputWrapper .txtWrap input[type=text]:focus ~ .frontIco,
|
|
.inputWrapper .txtWrap input[type=password]:active ~ .frontIco, .inputWrapper .txtWrap input[type=password]:focus ~ .frontIco,
|
|
.inputWrapper .txtWrap input[type=text]:active ~ .endIco, .inputWrapper .txtWrap input[type=text]:focus ~ .endIco,
|
|
.inputWrapper .txtWrap input[type=password]:active ~ .endIco, .inputWrapper .txtWrap input[type=password]:focus ~ .endIco {
|
|
color: var(--ipt-ico-c-active); }
|
|
.inputWrapper .txtWrap input[type=text] ~ .endIco, .inputWrapper .txtWrap input[type=text] ~ .endIco,
|
|
.inputWrapper .txtWrap input[type=password] ~ .endIco, .inputWrapper .txtWrap input[type=password] ~ .endIco {
|
|
cursor: pointer; }
|
|
|
|
.advIpt, .clickPopup {
|
|
/* position: relative; uncomment! otherwise the drop down inside would not be able to overflow and add a scroll bar to the container which is not desired in this case! */ }
|
|
|
|
.clickPopup > input {
|
|
display: none; }
|
|
|
|
.clickPopup label + input, .clickPopup input[type="checkbox"] {
|
|
display: none; }
|
|
|
|
.clickPopup .more-functions {
|
|
padding: 0 1rem 0 1rem; }
|
|
|
|
.clickPopup .popup {
|
|
box-sizing: border-box;
|
|
padding: .5rem 1rem .5rem 1rem;
|
|
background: #fff;
|
|
box-shadow: 0 0 3px 1px rgba(72, 71, 114, 0.3);
|
|
right: 0; }
|
|
.clickPopup .popup ul {
|
|
width: 100%; }
|
|
.clickPopup .popup > ul {
|
|
display: flex;
|
|
flex-direction: column; }
|
|
.clickPopup .popup > ul > li {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: .5rem 0 .5rem 0;
|
|
white-space: nowrap; }
|
|
.clickPopup .popup .button {
|
|
margin-right: 1rem; }
|
|
.clickPopup .popup span {
|
|
flex-grow: 1; }
|
|
.clickPopup .popup input[type="checkbox"]:checked + ul .expand {
|
|
transition: all .3s ease;
|
|
display: inherit;
|
|
transform: rotateZ(90deg); }
|
|
.clickPopup .popup input[type="checkbox"]:checked + ul > li:nth-child(n+2) {
|
|
display: inherit; }
|
|
.clickPopup .popup input + ul .expand {
|
|
font-size: .9rem;
|
|
transition: all .3s ease;
|
|
transform: rotateZ(0deg); }
|
|
.clickPopup .popup input + ul > li:nth-child(n+2) {
|
|
display: none; }
|
|
.clickPopup .popup label {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer; }
|
|
.clickPopup .popup > li {
|
|
display: block; }
|
|
.clickPopup .popup > li a {
|
|
display: block;
|
|
/*
|
|
&:hover, &:focus {
|
|
}
|
|
*/ }
|
|
.clickPopup .popup i {
|
|
flex-grow: 0; }
|
|
|
|
input ~ .popup {
|
|
position: absolute;
|
|
/* All other options e.g. static, relative resize the container which is bad */
|
|
display: none;
|
|
z-index: 3; }
|
|
|
|
/* In the past we also used input:focus ~ .popup this is a problem because clicking on something e.g. close button will not close the popup since it is still focused. */
|
|
input:checked ~ .popup, input ~ .popup.active {
|
|
display: inline-block; }
|
|
|
|
select {
|
|
cursor: pointer;
|
|
padding: 0 7px 0 7px;
|
|
/* overwrites input padding: 7px. don't know why i have to do this! */ }
|
|
|
|
option {
|
|
line-height: 1rem; }
|
|
|
|
input[type="file"] {
|
|
border: 1px solid var(--iborder-active);
|
|
width: 100%;
|
|
max-width: 100%;
|
|
color: var(--ipt-c);
|
|
padding: 10px;
|
|
box-sizing: border-box; }
|
|
|
|
input::placeholder {
|
|
font-family: 'FontAwesome', serif;
|
|
color: var(--ipt-ico-c);
|
|
opacity: 0.5; }
|
|
|
|
textarea:invalid, input:invalid {
|
|
transition: all 0.5s !important;
|
|
border-color: #f00 !important; }
|
|
textarea:invalid ~ i.ok, input:invalid ~ i.ok {
|
|
display: none !important; }
|
|
textarea:invalid ~ i.error, input:invalid ~ i.error {
|
|
display: inline-block !important; }
|
|
|
|
input:valid ~ i.ok {
|
|
display: inline-block !important; }
|
|
|
|
input:valid ~ i.error {
|
|
display: none !important; }
|
|
|
|
textarea, .textarea {
|
|
overflow: auto;
|
|
resize: both;
|
|
box-sizing: border-box;
|
|
padding: .3rem .3rem .3rem .5rem; }
|
|
|
|
label.radio, label.checkbox {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
user-select: none;
|
|
cursor: pointer; }
|
|
label.radio input, label.checkbox input {
|
|
margin: 0;
|
|
opacity: 0;
|
|
cursor: pointer; }
|
|
label.radio input:checked ~ .checkmark, label.checkbox input:checked ~ .checkmark {
|
|
background: var(--btn-bg); }
|
|
label.radio input:required ~ .checkmark, label.radio input:disabled ~ .checkmark, label.checkbox input:required ~ .checkmark, label.checkbox input:disabled ~ .checkmark {
|
|
background: #adadad; }
|
|
label.radio input:checked ~ .checkmark:after, label.checkbox input:checked ~ .checkmark:after {
|
|
display: block; }
|
|
label.radio .checkmark, label.checkbox .checkmark {
|
|
position: relative;
|
|
height: 15px;
|
|
width: 15px;
|
|
margin-right: 5px;
|
|
background: var(--ipt-bg);
|
|
border: 1px solid var(--iborder-active); }
|
|
label.radio .checkmark:after, label.checkbox .checkmark:after {
|
|
content: "";
|
|
position: absolute;
|
|
display: none; }
|
|
label.radio:hover input ~ .checkmark, label.checkbox:hover input ~ .checkmark {
|
|
cursor: pointer; }
|
|
|
|
label.radio .checkmark {
|
|
border-radius: 50%; }
|
|
label.radio .checkmark:after {
|
|
top: 5px;
|
|
left: 5px;
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
background: #fff; }
|
|
|
|
label.checkbox .checkmark:after {
|
|
top: 2px;
|
|
left: 4px;
|
|
width: 4px;
|
|
height: 6px;
|
|
border: solid white;
|
|
border-width: 0 3px 3px 0;
|
|
transform: rotate(45deg); }
|
|
|
|
input[type="range"] {
|
|
border: none;
|
|
width: 100%;
|
|
min-width: 150px;
|
|
height: 5px;
|
|
background: var(--btn-bg);
|
|
cursor: pointer; }
|
|
|
|
.input {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap; }
|
|
.input button {
|
|
box-sizing: border-box;
|
|
background: var(--btn-bg);
|
|
height: 30px;
|
|
font-size: 1rem;
|
|
min-width: 40px;
|
|
border-left: solid 1px var(--iborder);
|
|
border-top: solid 1px var(--iborder);
|
|
border-bottom: solid 1px var(--iborder);
|
|
border-right: none;
|
|
padding: 0;
|
|
position: relative;
|
|
vertical-align: middle;
|
|
flex-grow: 0;
|
|
flex-shrink: 0; }
|
|
.input button:hover, .input button:focus {
|
|
background: var(--btn-bg-hover); }
|
|
.input button.inactive {
|
|
background: #ccc;
|
|
cursor: default; }
|
|
.input button.inactive:hover, .input button.inactive:focus {
|
|
background: #ccc; }
|
|
.input input {
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
vertical-align: middle;
|
|
flex-grow: 1;
|
|
flex-shrink: 1; }
|
|
|
|
select.plain {
|
|
width: auto;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
outline: none;
|
|
display: inline-block;
|
|
appearance: none;
|
|
cursor: pointer;
|
|
box-shadow: none; }
|
|
|
|
.dropdown {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
width: 100%;
|
|
border: 1px solid #000;
|
|
position: relative;
|
|
box-shadow: none;
|
|
outline: 0;
|
|
margin: 0;
|
|
font-family: inherit;
|
|
font-size: .9rem;
|
|
user-select: none; }
|
|
.dropdown:hover {
|
|
background: #f00; }
|
|
.dropdown label {
|
|
cursor: pointer;
|
|
user-select: none; }
|
|
.dropdown > input {
|
|
display: none; }
|
|
.dropdown > input:checked + .dropdown-container {
|
|
display: block;
|
|
background: #fff;
|
|
border: 1px solid #000;
|
|
position: absolute; }
|
|
.dropdown > input:checked + .dropdown-container label {
|
|
display: flex;
|
|
align-items: center; }
|
|
.dropdown > input:checked + .dropdown-container label:hover {
|
|
background: #f00; }
|
|
|
|
.dropdown-closed {
|
|
display: flex;
|
|
height: 100%;
|
|
align-items: center; }
|
|
.dropdown-closed label {
|
|
display: none; }
|
|
.dropdown-closed input {
|
|
display: none; }
|
|
.dropdown-closed input:checked + label {
|
|
display: flex;
|
|
align-items: center; }
|
|
|
|
.dropdown-container {
|
|
display: none;
|
|
z-index: 2; }
|
|
.dropdown-container label {
|
|
padding: .5rem; }
|
|
|
|
.ac-container {
|
|
text-align: left;
|
|
border: 1px solid var(--bborder); }
|
|
.ac-container > input {
|
|
display: none; }
|
|
.ac-container > input:checked + label {
|
|
background: var(--btn-bg);
|
|
color: var(--txt-on-bg-c-2); }
|
|
.ac-container > input:checked + label + section {
|
|
display: inherit; }
|
|
.ac-container > input:checked + label:hover {
|
|
background: var(--btn-bg-hover); }
|
|
.ac-container > input + label + section {
|
|
display: none; }
|
|
.ac-container label {
|
|
display: block;
|
|
padding: 1rem 1rem;
|
|
position: relative;
|
|
z-index: 20;
|
|
margin-top: -1px;
|
|
cursor: pointer;
|
|
color: var(--default-c);
|
|
font-size: 1rem;
|
|
background: var(--bborder); }
|
|
.ac-container label:hover {
|
|
color: var(--txt-on-bg-c-2);
|
|
background: var(--btn-bg-hover); }
|
|
.ac-container > section {
|
|
background: var(--box-bg);
|
|
overflow: hidden;
|
|
height: auto;
|
|
position: relative;
|
|
z-index: 10;
|
|
padding: 1rem; }
|
|
|
|
.more-container > label {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
border-bottom: 1px solid var(--bborder);
|
|
cursor: pointer;
|
|
color: var(--link-c);
|
|
user-select: none; }
|
|
.more-container > label .expand {
|
|
transition: all .3s ease;
|
|
transform: rotateZ(0deg); }
|
|
.more-container > label span {
|
|
flex-grow: 1; }
|
|
.more-container > label i {
|
|
flex-grow: 0; }
|
|
|
|
.more-container > input {
|
|
display: none; }
|
|
|
|
.more-container > input:checked + label {
|
|
border-bottom: none;
|
|
margin-bottom: 1rem; }
|
|
.more-container > input:checked + label .expand {
|
|
transition: all .3s ease;
|
|
transform: rotateZ(90deg); }
|
|
|
|
.more-container > input:checked ~ div {
|
|
display: flex; }
|
|
|
|
.more-container > div {
|
|
display: none; }
|
|
|
|
.log-lvl-ok {
|
|
background: var(--green1-c);
|
|
border: 1px solid var(--green2-c);
|
|
color: var(--green3-c); }
|
|
|
|
.log-lvl-warning {
|
|
background: var(--yellow1-c);
|
|
border: 1px solid var(--yellow2-c);
|
|
color: var(--yellow3-c); }
|
|
|
|
.log-lvl-error {
|
|
background: var(--red1-c);
|
|
border: 1px solid var(--red2-c);
|
|
color: var(--red3-c); }
|
|
|
|
.log-lvl-info {
|
|
background: var(--blue1-c);
|
|
border: 1px solid var(--blue2-c);
|
|
color: var(--blue3-c); }
|
|
|
|
#dim {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #000;
|
|
opacity: 0.5;
|
|
z-index: 5; }
|
|
|
|
#app-message-container {
|
|
position: absolute;
|
|
margin: 0 auto;
|
|
right: 10px;
|
|
top: 85px;
|
|
padding: 0; }
|
|
#app-message-container .log-msg {
|
|
z-index: 11;
|
|
margin: 0 auto;
|
|
right: 0;
|
|
top: 0;
|
|
margin-bottom: 10px; }
|
|
|
|
.log-msg {
|
|
position: relative;
|
|
max-width: 250px;
|
|
padding: 1rem;
|
|
margin: 1rem; }
|
|
.log-msg .close {
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 5px; }
|
|
|
|
.slider {
|
|
overflow-x: auto;
|
|
white-space: nowrap; }
|
|
.slider ul {
|
|
display: inline; }
|
|
|
|
@keyframes slidy {
|
|
0% {
|
|
left: 0%; }
|
|
20% {
|
|
left: 0%; }
|
|
25% {
|
|
left: -100%; }
|
|
45% {
|
|
left: -100%; }
|
|
50% {
|
|
left: -200%; }
|
|
70% {
|
|
left: -200%; }
|
|
75% {
|
|
left: -300%; }
|
|
95% {
|
|
left: -300%; }
|
|
100% {
|
|
left: -400%; } }
|
|
|
|
.slider-1 {
|
|
overflow: hidden; }
|
|
.slider-1 figure {
|
|
position: relative;
|
|
width: 500%;
|
|
margin: 0;
|
|
left: 0;
|
|
text-align: left;
|
|
font-size: 0;
|
|
animation: 30s slidy infinite; }
|
|
.slider-1 figure img {
|
|
width: 20%;
|
|
float: left; }
|
|
|
|
.slider-2 {
|
|
width: 100%;
|
|
position: relative;
|
|
text-align: center; }
|
|
.slider-2 > img {
|
|
width: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
transition: all 0.5s; }
|
|
.slider-2 input {
|
|
display: none; }
|
|
.slider-2 input:checked + label {
|
|
border-color: var(--bborder);
|
|
opacity: 1; }
|
|
.slider-2 input:checked + label + img {
|
|
opacity: 1;
|
|
transform: scale(1); }
|
|
.slider-2 input ~ img {
|
|
opacity: 0;
|
|
transform: scale(0.9); }
|
|
.slider-2 label {
|
|
display: inline-block;
|
|
margin-top: calc(50% + 15px);
|
|
margin-left: 15px;
|
|
border: 3px solid var(--bborder);
|
|
cursor: pointer;
|
|
opacity: 0.6; }
|
|
.slider-2 label img {
|
|
display: block; }
|
|
|
|
.slider-3 {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column; }
|
|
.slider-3 .icon-cards {
|
|
position: relative;
|
|
width: 60vw;
|
|
height: 40vw;
|
|
max-width: 380px;
|
|
max-height: 250px;
|
|
margin: 0;
|
|
perspective: 1000px; }
|
|
.slider-3 .icon-cards-content {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
transform-style: preserve-3d;
|
|
transform: translateZ(-30vw) rotateY(0);
|
|
animation: carousel 30s infinite cubic-bezier(0.77, 0, 0.175, 1) forwards; }
|
|
.slider-3 .icon-cards-item {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
max-width: 380px;
|
|
max-height: 250px; }
|
|
.slider-3 .icon-cards-item:nth-child(1) {
|
|
transform: rotateY(0) translateZ(35vw); }
|
|
.slider-3 .icon-cards-item:nth-child(2) {
|
|
transform: rotateY(120deg) translateZ(35vw); }
|
|
.slider-3 .icon-cards-item:nth-child(3) {
|
|
transform: rotateY(240deg) translateZ(35vw); }
|
|
.slider-3 .icon-cards img {
|
|
width: 100%; }
|
|
|
|
@keyframes carousel {
|
|
0%, 17.5% {
|
|
transform: translateZ(-35vw) rotateY(0); }
|
|
27.5%, 45% {
|
|
transform: translateZ(-35vw) rotateY(-120deg); }
|
|
55%, 72.5% {
|
|
transform: translateZ(-35vw) rotateY(-240deg); }
|
|
82.5%, 100% {
|
|
transform: translateZ(-35vw) rotateY(-360deg); } }
|
|
|
|
.crumbs-1, .crumbs-2 {
|
|
list-style: none;
|
|
overflow: hidden;
|
|
font-size: 1rem;
|
|
user-select: none;
|
|
display: flex; }
|
|
.crumbs-1 li, .crumbs-2 li {
|
|
background: var(--box-bg);
|
|
border-left: 1px solid var(--bborder);
|
|
border-top: 1px solid var(--bborder);
|
|
border-bottom: 1px solid var(--bborder);
|
|
padding: 0 10px 0 20px;
|
|
height: 2.5rem;
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
cursor: pointer; }
|
|
.crumbs-1 li:after, .crumbs-1 li:before, .crumbs-2 li:after, .crumbs-2 li:before {
|
|
content: " ";
|
|
display: block;
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 20px solid transparent;
|
|
border-bottom: 20px solid transparent;
|
|
border-left: 14px solid var(--box-bg);
|
|
position: absolute;
|
|
top: 50%;
|
|
margin-top: -20px;
|
|
left: 100%; }
|
|
.crumbs-1 li:after, .crumbs-2 li:after {
|
|
z-index: 1; }
|
|
.crumbs-1 li:before, .crumbs-2 li:before {
|
|
border-left-color: var(--bborder);
|
|
margin-left: 1px;
|
|
z-index: 1; }
|
|
.crumbs-1 li.active:after, .crumbs-1 li:hover:after, .crumbs-2 li.active:after, .crumbs-2 li:hover:after {
|
|
color: var(--txt-on-bg-c-2); }
|
|
.crumbs-1 li.active:after, .crumbs-2 li.active:after {
|
|
border-left: 14px solid var(--btn-bg); }
|
|
.crumbs-1 li:hover:after, .crumbs-2 li:hover:after {
|
|
border-left: 14px solid var(--btn-bg-hover); }
|
|
.crumbs-1 .active, .crumbs-2 .active {
|
|
cursor: default;
|
|
background: var(--btn-bg); }
|
|
.crumbs-1 .active, .crumbs-1 li:hover, .crumbs-2 .active, .crumbs-2 li:hover {
|
|
color: var(--txt-on-bg-c-2); }
|
|
.crumbs-1 li:hover, .crumbs-2 li:hover {
|
|
background: var(--btn-bg-hover); }
|
|
|
|
.crumbs-1 li:not(:last-child):after, .crumbs-1 li:before {
|
|
content: " ";
|
|
display: block;
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 20px solid transparent;
|
|
border-bottom: 20px solid transparent;
|
|
border-left: 14px solid var(--box-bg);
|
|
position: absolute;
|
|
top: 50%;
|
|
margin-top: -20px;
|
|
left: 100%; }
|
|
|
|
.crumbs-1 li.active:not(:last-child):after, .crumbs-1 li:hover:not(:last-child):after {
|
|
color: var(--txt-on-bg-c-2); }
|
|
|
|
.crumbs-1 li.active:not(:last-child):after {
|
|
border-left: 14px solid var(--btn-bg); }
|
|
|
|
.crumbs-1 li:hover:not(:last-child):after {
|
|
border-left: 14px solid var(--btn-bg-hover); }
|
|
|
|
.crumbs-1 :last-child:before {
|
|
border: none; }
|
|
|
|
.btn, .link, [data-href] {
|
|
cursor: pointer; }
|
|
|
|
button, input[type="submit"], input[type="reset"], input[type="button"], label.button, a.button {
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
min-width: 70px;
|
|
background: var(--btn-bg);
|
|
color: var(--txt-on-bg-c-2);
|
|
padding: 0 1rem 0 1rem;
|
|
flex-grow: 0;
|
|
height: 30px;
|
|
border: 1px solid var(--bborder);
|
|
box-shadow: none;
|
|
justify-content: center;
|
|
align-items: center;
|
|
outline: 0;
|
|
font-family: inherit;
|
|
font-size: .9rem;
|
|
user-select: none;
|
|
font-weight: 100;
|
|
box-sizing: border-box; }
|
|
button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, label.button::-moz-focus-inner, a.button::-moz-focus-inner {
|
|
border: 0; }
|
|
button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, label.button:hover, a.button:hover {
|
|
background: var(--btn-bg-hover);
|
|
color: var(--txt-on-bg-c-2); }
|
|
|
|
button.save, .button.save, input[type="submit"].save {
|
|
color: var(--save-c);
|
|
background: var(--save-bg); }
|
|
button.save:hover, button.save:focus, .button.save:hover, .button.save:focus, input[type="submit"].save:hover, input[type="submit"].save:focus {
|
|
background: var(--save-bg-hover); }
|
|
|
|
button.cancel, .button.cancel, input[type="submit"].cancel {
|
|
color: var(--cancel-c);
|
|
background: var(--cancel-bg); }
|
|
button.cancel:hover, button.cancel:focus, .button.cancel:hover, .button.cancel:focus, input[type="submit"].cancel:hover, input[type="submit"].cancel:focus {
|
|
background: var(--cancel-bg-hover); }
|
|
|
|
button.close, .button.close, input[type="submit"].close, input[type="reset"].close {
|
|
color: var(--close-c);
|
|
background: var(--close-bg); }
|
|
button.close:hover, button.close:focus, .button.close:hover, .button.close:focus, input[type="submit"].close:hover, input[type="submit"].close:focus, input[type="reset"].close:hover, input[type="reset"].close:focus {
|
|
background: var(--close-bg-hover); }
|
|
|
|
button.disabled, .button.disabled, input[type="submit"].disabled {
|
|
color: var(--disabled-c);
|
|
background: var(--disabled-bg);
|
|
cursor: not-allowed; }
|
|
button.disabled:hover, button.disabled:focus, .button.disabled:hover, .button.disabled:focus, input[type="submit"].disabled:hover, input[type="submit"].disabled:focus {
|
|
background: var(--disabled-bg-hover); }
|
|
|
|
.link.default {
|
|
color: var(--btn-bg); }
|
|
|
|
.link.save {
|
|
color: var(--save-bg); }
|
|
|
|
.link.cancel {
|
|
color: var(--cancel-bg); }
|
|
|
|
.link.close {
|
|
color: var(--close-bg); }
|
|
|
|
.link.disabled {
|
|
color: var(--disabled-bg); }
|
|
|
|
i.favorite {
|
|
color: var(--fav-c);
|
|
text-shadow: 0 0 1px var(--text-shadow); }
|
|
|
|
.unseen {
|
|
font-weight: bold; }
|
|
|
|
.portlet-body a:not(.button), a.content, a .content {
|
|
color: var(--link-c);
|
|
border-bottom: 1px dotted var(--link-c); }
|
|
.portlet-body a:not(.button):hover, a.content:hover, a .content:hover {
|
|
border-bottom: 1px dotted transparent; }
|
|
|
|
ul.boxed {
|
|
background: var(--box-bg);
|
|
padding: 5px;
|
|
border: 1px solid var(--bborder); }
|
|
ul.boxed li {
|
|
margin: 5px 0 5px 0; }
|
|
ul.boxed li:first-child {
|
|
margin-top: 0; }
|
|
ul.boxed li:last-child {
|
|
margin-bottom: 0; }
|
|
|
|
ul.h-list li {
|
|
display: inline-block;
|
|
margin: 5px 10px 5px 10px; }
|
|
|
|
ul.foldable {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0; }
|
|
ul.foldable ul {
|
|
margin-left: 1rem; }
|
|
ul.foldable input[type="checkbox"], ul.foldable .nested {
|
|
display: none; }
|
|
ul.foldable .caret {
|
|
cursor: pointer;
|
|
user-select: none; }
|
|
ul.foldable .caret::before {
|
|
content: "\25B6";
|
|
color: black;
|
|
display: inline-block;
|
|
margin-right: 6px; }
|
|
ul.foldable input[type="checkbox"]:checked ~ .nested {
|
|
display: block; }
|
|
ul.foldable input[type="checkbox"]:checked ~ .caret::before {
|
|
transform: rotate(90deg); }
|
|
ul.foldable ul {
|
|
list-style-type: none; }
|
|
|
|
.nav-top {
|
|
user-select: none;
|
|
margin-top: 1rem;
|
|
display: block; }
|
|
.nav-top > li > a {
|
|
border: 1px solid var(--bborder);
|
|
margin-right: .5rem;
|
|
display: inline-block;
|
|
padding: 10px 10px; }
|
|
.nav-top li {
|
|
display: inline-block; }
|
|
.nav-top li a {
|
|
background: var(--box-bg);
|
|
position: relative;
|
|
cursor: pointer; }
|
|
.nav-top li a:hover, .nav-top li a.active, .nav-top li a:focus {
|
|
background: var(--nav-content-hover);
|
|
color: var(--txt-on-bg-c-2); }
|
|
.nav-top li a:hover > ul, .nav-top li a.active > ul, .nav-top li a:focus > ul {
|
|
display: block;
|
|
opacity: 1;
|
|
visibility: visible; }
|
|
.nav-top li a > ul {
|
|
padding: 0;
|
|
z-index: 5;
|
|
position: absolute;
|
|
top: 36px;
|
|
left: 0;
|
|
width: 150px;
|
|
display: none;
|
|
opacity: 0;
|
|
visibility: hidden; }
|
|
.nav-top li a > ul li {
|
|
display: block;
|
|
color: #000;
|
|
padding: 7px; }
|
|
.nav-top li a > ul li:hover, .nav-top li a > ul li:focus {
|
|
color: #252525;
|
|
background: var(--nav-content-hover); }
|
|
|
|
.nav-trigger {
|
|
position: absolute;
|
|
display: none; }
|
|
.nav-trigger:checked + nav {
|
|
width: 0%; }
|
|
|
|
@media only screen and (max-width: 62em) {
|
|
.nav-trigger:not(:checked) + nav {
|
|
width: 0%; }
|
|
.nav-trigger:checked + nav {
|
|
width: auto;
|
|
min-width: 250px; } }
|
|
|
|
@media only screen and (max-width: 48em) {
|
|
.nav-trigger:checked + nav {
|
|
width: 100% !important; }
|
|
.nav-trigger:checked ~ main {
|
|
display: none !important; } }
|
|
|
|
.content-side-nav h1, .content-side-nav h2, .content-side-nav a {
|
|
font-size: .9rem; }
|
|
|
|
.content-side-nav h1, .content-side-nav h2 {
|
|
padding: .5rem 1rem .5rem 1rem;
|
|
background: var(--thead-bg);
|
|
color: var(--thead-c); }
|
|
|
|
.content-side-nav a {
|
|
padding: .5rem 1rem .5rem 2rem;
|
|
display: block; }
|
|
.content-side-nav a:hover {
|
|
color: var(--link-c); }
|
|
|
|
.pagination li, .pagination a {
|
|
display: inline-block; }
|
|
|
|
.pagination li + li {
|
|
margin-left: .5rem; }
|
|
|
|
.pagination a {
|
|
border-radius: 3px;
|
|
background: #ccc;
|
|
padding: 5px 10px 5px 10px; }
|
|
|
|
.pagination .active, .pagination a:hover, .pagination a:active {
|
|
color: #000;
|
|
background: #fff; }
|
|
|
|
.meter {
|
|
height: 15px;
|
|
/* Can be anything */
|
|
position: relative;
|
|
background: none !important; }
|
|
.meter > span {
|
|
display: block;
|
|
height: 100%;
|
|
border-radius: 3px;
|
|
background-color: var(--green3-c);
|
|
background-image: linear-gradient(to left top, color-stop(0, var(--green3-c)), color-stop(1, var(--green2-c)));
|
|
position: relative;
|
|
overflow: hidden; }
|
|
.meter.orange > span {
|
|
background-color: #f1a165;
|
|
background-image: linear-gradient(#f1a165, #f36d0a); }
|
|
.meter.blue > span {
|
|
background-color: var(--blue1-c);
|
|
background-image: linear-gradient(var(--blue1-c), var(--blue3-c)); }
|
|
.meter.red > span {
|
|
background-color: var(--red1-c);
|
|
background-image: linear-gradient(var(--red1-c), var(--red3-c)); }
|
|
.meter > span:after, .meter .animate > span > span {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background-image: linear-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));
|
|
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
|
|
z-index: 1;
|
|
overflow: hidden; }
|
|
|
|
.animate > span:after {
|
|
display: none; }
|
|
|
|
@keyframes move {
|
|
0% {
|
|
background-position: 0 0; }
|
|
100% {
|
|
background-position: 50px 50px; } }
|
|
|
|
.noanimation > span > span, .noanimation > span:after {
|
|
animation: none; }
|
|
|
|
.nostripes > span > span, .nostripes > span:after {
|
|
animation: none;
|
|
background-image: none; }
|
|
|
|
.emptyPage {
|
|
width: 80%;
|
|
font-size: 15rem;
|
|
margin: 0 auto;
|
|
margin-top: 3rem;
|
|
text-align: center;
|
|
border: 5px solid var(--bborder); }
|
|
.emptyPage:before {
|
|
font-family: 'Material Symbols Outlined', serif;
|
|
content: 'question_mark';
|
|
color: rgba(0, 0, 0, 0.1); }
|
|
|
|
.box {
|
|
box-sizing: border-box;
|
|
margin-top: 1rem;
|
|
overflow-x: auto; }
|
|
.box .inner {
|
|
box-sizing: border-box;
|
|
padding: 10px; }
|
|
|
|
.box-container {
|
|
display: inline-block; }
|
|
|
|
section header > h1 {
|
|
margin: 10px 10px 0 10px;
|
|
padding-bottom: 5px;
|
|
font-size: 1.1em;
|
|
border-bottom: 1px solid var(--bborder2); }
|
|
|
|
section > h2 {
|
|
box-sizing: border-box;
|
|
font-size: 1.2em;
|
|
margin-bottom: 5px; }
|
|
|
|
section.box {
|
|
background: var(--box-bg);
|
|
border: 1px solid var(--bborder); }
|
|
|
|
.pagebreak {
|
|
display: none; }
|
|
|
|
.tabview.right > .box {
|
|
order: 2; }
|
|
|
|
.tab-links {
|
|
color: var(--default-c);
|
|
padding: 5px 0 0 0; }
|
|
.tab-links label {
|
|
font-size: 0.9em;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
border: 1px solid var(--btn-bg);
|
|
white-space: nowrap; }
|
|
.tab-links label:hover, .tab-links label:focus {
|
|
color: var(--txt-on-bg-c-2);
|
|
background: var(--btn-bg-hover);
|
|
border: 1px solid var(--btn-bg-hover);
|
|
outline: none; }
|
|
.tab-links .active label:hover, .tab-links .active label:focus {
|
|
color: var(--txt-on-bg-c-2);
|
|
background: var(--btn-bg-hover);
|
|
border: 1px solid var(--btn-bg-hover);
|
|
outline: none; }
|
|
.tab-links .active label {
|
|
cursor: default; }
|
|
.tab-links li {
|
|
display: inline-block; }
|
|
|
|
.tab-content {
|
|
display: flex;
|
|
flex: 1; }
|
|
.tab-content > input, .tab-content > input + div {
|
|
display: none; }
|
|
.tab-content > input:checked + div {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column; }
|
|
|
|
.tab {
|
|
max-width: 100%; }
|
|
|
|
.tab-1 .tab-links {
|
|
margin: 0 0 10px 1px; }
|
|
.tab-1 .tab-links label {
|
|
padding: 5px;
|
|
background: none;
|
|
overflow: auto;
|
|
background: var(--box-bg); }
|
|
.tab-1 .tab-links .active, .tab-1 .tab-links .active label {
|
|
color: var(--txt-on-bg-c-2);
|
|
background: var(--btn-bg); }
|
|
.tab-1 .tab-links li {
|
|
margin: 0 5px 0 0; }
|
|
|
|
.tab-1 .tab {
|
|
max-width: 100%; }
|
|
|
|
.tab-1 .tab-content {
|
|
box-sizing: border-box;
|
|
border: 1px solid var(--btn-bg);
|
|
background: var(--box-bg);
|
|
padding: 10px; }
|
|
|
|
.tab-1.left, .tab-1.right {
|
|
display: flex; }
|
|
.tab-1.left .tab-links, .tab-1.right .tab-links {
|
|
margin: 0;
|
|
border: none; }
|
|
.tab-1.left .tab-links li, .tab-1.right .tab-links li {
|
|
display: block;
|
|
margin-bottom: 20px; }
|
|
.tab-1.left .tab-links .active label, .tab-1.right .tab-links .active label {
|
|
border: 1px solid var(--bborder); }
|
|
.tab-1.left .tab-content, .tab-1.right .tab-content {
|
|
width: 100%; }
|
|
|
|
.tab-2 {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column; }
|
|
.tab-2 .tab {
|
|
max-width: 100%; }
|
|
.tab-2 .tab-links label {
|
|
padding: 5px 10px 5px 10px; }
|
|
.tab-2 .tab-links li {
|
|
margin: 0 5px 15px 0; }
|
|
.tab-2 .tab-links .active a, .tab-2 .tab-links .active label {
|
|
color: var(--txt-on-bg-c-2);
|
|
background: var(--btn-bg); }
|
|
.tab-2.left, .tab-2.right {
|
|
flex-direction: row; }
|
|
.tab-2.left .tab-links, .tab-2.right .tab-links {
|
|
margin: 0;
|
|
border: none; }
|
|
.tab-2.left .tab-links li, .tab-2.right .tab-links li {
|
|
display: block;
|
|
margin-bottom: 20px; }
|
|
.tab-2.left .tab-links .active label, .tab-2.right .tab-links .active label {
|
|
border: 1px solid var(--bborder); }
|
|
.tab-2.left .tab-content, .tab-2.right .tab-content {
|
|
width: 100%; }
|
|
|
|
.btn.order-up, .btn.order-down,
|
|
.btn.cancel-form, .btn.remove-form, .btn.update-form, .btn.save-form, .btn.form-action {
|
|
color: var(--btn-bg); }
|
|
|
|
thead input[type=radio] {
|
|
padding: 0;
|
|
margin: 0;
|
|
display: none; }
|
|
|
|
thead label, thead span {
|
|
display: inline-flex;
|
|
align-items: center; }
|
|
thead label > a, thead span > a {
|
|
display: inline-flex;
|
|
align-items: center; }
|
|
|
|
table.fixed {
|
|
table-layout: fixed; }
|
|
|
|
table input[type=radio]:checked + i,
|
|
table input[type=checkbox]:checked + label i {
|
|
color: var(--btn-bg); }
|
|
|
|
table .order-up, table .order-down {
|
|
cursor: pointer; }
|
|
|
|
table .sort-asc, table .sort-desc, table .filter {
|
|
padding: 0;
|
|
cursor: pointer; }
|
|
|
|
table:not([id]) > thead .sort-asc, table:not([id]) > thead .sort-desc {
|
|
display: none; }
|
|
|
|
table.default {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
font-size: 0.9em;
|
|
box-sizing: border-box; }
|
|
table.default .disabled, table.default .empty {
|
|
color: var(--disabled-bg); }
|
|
table.default .empty {
|
|
text-align: center; }
|
|
table.default caption {
|
|
font-size: 1.5rem;
|
|
font-weight: 400;
|
|
border-bottom: 1px solid var(--bborder);
|
|
background: var(--tcaption-bg);
|
|
padding: .5rem;
|
|
text-align: left; }
|
|
table.default caption i {
|
|
font-size: .8rem; }
|
|
table.default tr, table.default caption {
|
|
height: 2.5rem; }
|
|
table.default td, table.default th {
|
|
padding: 3px 5px 3px 5px;
|
|
white-space: nowrap; }
|
|
table.default td:first-child, table.default th:first-child {
|
|
padding-left: 10px; }
|
|
table.default td:last-child, table.default th:last-child {
|
|
padding-right: 10px; }
|
|
table.default tbody th, table.default tfoot th {
|
|
text-align: left; }
|
|
table.default tbody th[colspan]:not([colspan="1"]), table.default tfoot th[colspan]:not([colspan="1"]) {
|
|
text-align: center; }
|
|
table.default tbody a, table.default tfoot a {
|
|
display: inline-flex;
|
|
align-items: center; }
|
|
table.default tbody a i, table.default tfoot a i {
|
|
margin-right: .5rem; }
|
|
table.default tbody td, table.default tbody th {
|
|
border-bottom: 1px solid var(--bborder2); }
|
|
table.default tbody tr:last-child td, table.default tbody tr:last-child th {
|
|
border: none; }
|
|
table.default tbody tr:nth-of-type(2n) {
|
|
background: var(--trow-bg); }
|
|
table.default tbody tr:nth-of-type(2n+1) {
|
|
background: var(--trow-bg-alt); }
|
|
table.default tbody tr:hover td, table.default tbody tr:focus td {
|
|
background: var(--trow-bg-hover);
|
|
color: var(--default-c); }
|
|
table.default tbody tr:focus, table.default tbody tr:hover {
|
|
outline: none;
|
|
transform: scale(1);
|
|
box-shadow: 0 0 5px var(--bborder);
|
|
color: var(--default-c); }
|
|
table.default thead {
|
|
background: var(--thead-bg);
|
|
color: var(--thead-c); }
|
|
table.default thead td {
|
|
border-bottom: 1px solid var(--bborder2); }
|
|
table.default thead input[type=radio] {
|
|
display: none; }
|
|
table.default thead input[type=radio]:checked + label {
|
|
color: var(--box-hl); }
|
|
|
|
table.sticky thead th, table.sticky thead td {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 2;
|
|
background: var(--thead-bg); }
|
|
table.sticky thead th > *, table.sticky thead td > * {
|
|
vertical-align: middle; }
|
|
|
|
table.list th {
|
|
text-align: left;
|
|
padding: 2px 0 2px 0; }
|
|
|
|
table.list td {
|
|
padding: 2px 5px 2px 5px; }
|
|
|
|
.fixed-1 td:nth-child(1) {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis; }
|
|
|
|
.fixed-2 td:nth-child(2) {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis; }
|
|
|
|
.fixed-3 td:nth-child(3) {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis; }
|
|
|
|
.fixed-4 td:nth-child(4) {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis; }
|
|
|
|
.fixed-5 td:nth-child(5) {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis; }
|
|
|
|
.fixed-6 td:nth-child(6) {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis; }
|
|
|
|
.fixed-7 td:nth-child(7) {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis; }
|
|
|
|
.fixed-8 td:nth-child(8) {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis; }
|
|
|
|
.fixed-9 td:nth-child(9) {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis; }
|
|
|
|
.fixed-10 td:nth-child(10) {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis; }
|
|
|
|
@media screen and (max-width: 600px) {
|
|
table.popupTable {
|
|
display: table;
|
|
width: 100%; }
|
|
table.popupTable thead {
|
|
display: none; }
|
|
table.popupTable tbody tr {
|
|
height: auto;
|
|
display: block;
|
|
margin-bottom: .625em; }
|
|
table.popupTable tbody td {
|
|
display: flex;
|
|
font-size: .8rem;
|
|
height: 2rem;
|
|
line-height: 2rem;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
max-width: 100%; }
|
|
table.popupTable tbody td:before {
|
|
content: attr(data-label);
|
|
margin-right: 10px;
|
|
font-weight: bold; }
|
|
table.popupTable tfoot {
|
|
display: none; } }
|
|
|
|
span.tag {
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
padding: 0 6px 0 6px;
|
|
height: 24px;
|
|
font-size: .8rem;
|
|
color: var(--txt-on-bg-c-2);
|
|
background: var(--btn-bg);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
user-select: none; }
|
|
span.tag i {
|
|
color: var(--txt-on-bg-c-2);
|
|
margin-right: .5rem; }
|
|
|
|
.tag-list {
|
|
display: flex;
|
|
gap: 5px; }
|
|
|
|
.infoIcon {
|
|
width: 1rem;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
position: relative;
|
|
cursor: pointer; }
|
|
.infoIcon span {
|
|
font-size: .55rem;
|
|
display: block;
|
|
position: absolute;
|
|
right: -.55rem;
|
|
top: -.35rem;
|
|
width: 1rem;
|
|
height: .8rem;
|
|
line-height: .8rem;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
padding: .1rem .15rem .15rem .15rem;
|
|
color: var(--badge-c);
|
|
background: var(--badge-bg); }
|
|
|
|
.portlet {
|
|
border: 1px solid var(--bborder);
|
|
box-sizing: border-box;
|
|
margin-top: 1rem;
|
|
background: var(--box-bg); }
|
|
|
|
.portlet-head, .portlet-foot {
|
|
padding: .7rem 1rem .7rem 1rem;
|
|
display: flex; }
|
|
|
|
.hl-1 .portlet-body, .hl-1 .portlet-head, .hl-2 .portlet-body, .hl-2 .portlet-head, .hl-3 .portlet-body, .hl-3 .portlet-head, .hl-4 .portlet-body, .hl-4 .portlet-head, .hl-5 .portlet-body, .hl-5 .portlet-head, .hl-6 .portlet-body, .hl-6 .portlet-head, .hl-7 .portlet-body, .hl-7 .portlet-head {
|
|
border: 0; }
|
|
|
|
.portlet-head {
|
|
font-weight: 300; }
|
|
.portlet-head > span {
|
|
display: inline-flex;
|
|
align-items: center; }
|
|
.portlet-head > span > a {
|
|
display: inherit; }
|
|
.portlet-head form {
|
|
margin-left: 1rem; }
|
|
|
|
.portlet-body {
|
|
padding: 1rem; }
|
|
|
|
.portlet-body > h2, .portlet-separator, .portlet-head {
|
|
border-bottom: 1px solid var(--bborder2); }
|
|
|
|
.portlet-foot {
|
|
border-top: 1px solid var(--bborder2);
|
|
box-sizing: border-box;
|
|
flex-wrap: wrap;
|
|
column-gap: .5rem; }
|
|
|
|
.plain-portlet {
|
|
box-sizing: border-box;
|
|
margin-top: 1rem;
|
|
overflow-x: auto; }
|
|
|
|
.ctx-menu {
|
|
position: absolute;
|
|
background: var(--box-bg);
|
|
border: 1px solid var(--bborder);
|
|
z-index: 1000; }
|
|
.ctx-menu label {
|
|
padding: .5rem;
|
|
width: 100%;
|
|
box-sizing: border-box; }
|
|
.ctx-menu label:hover {
|
|
background: var(--trow-bg-hover); }
|
|
|
|
code[contenteditable], .contenteditable {
|
|
display: block;
|
|
outline: none;
|
|
white-space: pre-wrap; }
|
|
|
|
#cookie_cc {
|
|
display: none; }
|
|
#cookie_cc:checked #cookieCF {
|
|
display: none; }
|
|
#cookie_cc:not(:checked) + #cookieCF {
|
|
display: flex; }
|
|
|
|
#cookieCF {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
font-weight: 100; }
|
|
#cookieCF input[type=radio] {
|
|
display: none; }
|
|
#cookieCF #cookieCF_simple label, #cookieCF .button, #cookieCF input[type=submit],
|
|
#cookieCF #cookieCF_c label, #cookieCF .button, #cookieCF input[type=submit] {
|
|
margin: 0; }
|
|
#cookieCF .secondary {
|
|
background: none;
|
|
border: 2px solid var(--btn-bg);
|
|
color: var(--btn-bg) !important; }
|
|
#cookieCF .consent_element {
|
|
margin-top: 1rem; }
|
|
#cookieCF form {
|
|
background: #fff;
|
|
border: 1px solid var(--bborder);
|
|
display: inline-block;
|
|
padding: 1rem;
|
|
border-radius: 3px; }
|
|
|
|
#cookieCF_db,
|
|
#cookieCF_cb {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 10px;
|
|
margin-top: 1rem; }
|
|
|
|
#cookieCF_simple + div, #cookieCF_c + div {
|
|
display: none; }
|
|
|
|
#cookieCF_simple:checked + div, #cookieCF_c:checked + div {
|
|
display: block; }
|
|
|
|
thead td label, .portlet-head .inputWrapper, .portlet-head .g-icon {
|
|
display: none; }
|