no.tsl2.nano.h5.2.5.3.source-code.style.template Maven / Gradle / Ivy
:root {
--font-family: Lato, 'sans-serif';
--font-color: white;
--disabled-color: lightgray;
--label-color: blue;
--text-shadow: 1px 2px 2px black;
--bg-color: radial-gradient(#9999FF, #000000);
--bg-input-panel: url('icons/spe.jpg');
--button-bg-color: #0055AA;
--button-bg-hover: black;
--table-bg-color: rgba(247,247,247,.5);
--table-bg-even-color: rgba(255,255,255,.3);
--table-bg-odd-color: rgba(196,196,196,.3);
--border: none;
}
/* theme switching through a button (see left header panel) */
html[data-theme='light'] {
--font-color: black;
--disabled-color: lightgray;
--label-color: blue;
--text-shadow: none;
--bg-color: radial-gradient(#FFFFFF, #BBBBBB);
--bg-input-panel: url('icons/spe.jpg');
--button-bg-color: lightgray;
--button-bg-hover: white;
--table-bg-color: rgba(247,247,247,.8);
--table-bg-even-color: rgba(255,255,255,.6);
--table-bg-odd-color: rgba(196,196,196,.6);
}
html[data-theme='dark'] {
--font-color: white;
--disabled-color: lightgray;
--label-color: darkblue;
--text-shadow: 1px 2px 2px black;
--bg-color: radial-gradient(#9999FF, #000000);
--bg-input-panel: url('icons/spe.jpg');
--button-bg-color: #0055AA;
--button-bg-hover: black;
--table-bg-color: rgba(247,247,247,.5);
--table-bg-even-color: rgba(255,255,255,.3);
--table-bg-odd-color: rgba(196,196,196,.3);
}
html[data-theme='light-contrast'] {
--font-color: black;
--disabled-color: gray;
--label-color: darkblue;
--text-shadow: none;
--bg-color: white;
--bg-input-panel: url('icons/spe.jpg');
--button-bg-color: lightgray;
--button-bg-hover: white;
--table-bg-color: transparent;
--table-bg-even-color: rgba(196,196,196,.6);
--table-bg-odd-color: transparent;
--border: 1 px;
}
html[data-theme='dark-contrast'] {
--font-family: 'Comic Sans MS', 'serif';
--font-color: white;
--disabled-color: lightgray;
--label-color: white;
--text-shadow: none;
--bg-color: black;
--bg-input-panel: url('icons/spe.jpg');
--button-bg-color: #0055AA;
--button-bg-hover: gray;
--table-bg-color: transparent;
--table-bg-even-color: rgba(96,96,96,.6);
--table-bg-odd-color: transparent;
--border: 1 px;
}
html[data-theme='dark-picture'] {
--font-family: 'Comic Sans MS', 'serif';
--font-color: white;
--disabled-color: lightgray;
--label-color: white;
--text-shadow: none;
--bg-color: url('icons/blue-planets.jpg');
--bg-input-panel: transparent;
--button-bg-color: #0055AA;
--button-bg-hover: gray;
--table-bg-color: transparent;
--table-bg-even-color: rgba(96,96,96,.6);
--table-bg-odd-color: transparent;
--border: 1 px;
}
::selection, ::-moz-selection { /* Code for Firefox */
color: var(--font-color);
background: var(--bg-color);
}
/* will be assigned as tag style under the html header */
body {
font-family: var(--font-family);
transition: background-color .5s;
color: var(--font-color);
background: var(--bg-color);
}
table, .table .fieldpanel {
display: table;
margin: 0 auto;
color: var(--font-color);
/* width: 100%; */
}
tbody, .tbody {
display: table-row-group;
}
thead, .thead {
display: table-header-group;
background-color: var(--table-bg-color);
font-weight: bold;
}
tfoot, .tfoot {
display: table-footer-group;
font-weight: bold;
background-color: var(--table-bg-color);
}
tr, .tr, .beancollectorsearchrow {
display: table-row;
}
td, th, .td, .th {
display: table-cell;
padding: 3px 10px;
border: 1px;
/*width: 100%;*/
}
tr:nth-child(even), .tr:nth-child(even) {
background-color: var(--table-bg-even-color);
}
tr:nth-child(odd), .tr:nth-child(odd) {
background-color: var(--table-bg-odd-color);
}
tr:hover, .tr:hover {
background-color: var(--table-bg-color);
}
#page\.header\.table h3, #title, .title {
margin-block-start: 8px;
margin-block-end: 0px;
}
#page\.header\.table td, #page\.header\.table td {
width: auto;
}
.beanfieldlabel {
color: var(--label-color);
width: fit-content;
min-width: 50px;
}
textarea {
width: 100%;
}
input {
min-width: 100px;
border-radius: 4px;
width: 100%;
border: var(--border);
border-bottom: 2px solid black;
padding-bottom: 2px;
}
span > input[type='search'] {
min-width: 30px;
width: 100%;
}
.fade-out {
opacity:0;
}
.fade-in {
opacity:1;
}
.tooltip {
display: none;
position: relative;
top: 0;
left: 0;
z-index: 99;
border: var(--border);
color: var(--font-color);
background: -var(--bg-color);
width: 300px;
text-align: left;
}
i:hover + p {
display: block;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a, .panelaction {
padding: 8px 8px 8px 32px;
text-decoration: none;
display: block;
transition: 0.3s;
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/*
.openbtn {
position: absolute;
top: 0;
left: 0;
font-size: 36px;
}
*/
.openbtn, .closebtn {
font-size: 36px;
cursor: pointer;
color: var(--font-color);
background: radial-gradient(#9999FF, #000000);
}
#glasspane {
transition: margin-left .5s;
padding: 16px;
}
#title,.title {
background: transparent;
color: var(--font-color);
text-shadow: var(--text-shadow);
font-size: 1.4em;
}
#field§quicksearch {
padding-top: 1;
padding-bottom: 1;
width: fit-content;
}
#beancollectorliste§quicksearch {
padding-top: 0;
padding-bottom: 6;
}
th > button {
width: 80%;
}
input[type='search'] {
width: auto;
}
input[type='checkbox'] {
min-width: auto;
width: auto;
}
/* tag dialog used by websockets */
dialog {
top: 28%;
width: 400px;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 15px;
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
border-top: 5px solid #0099ff;
}
button {
display: inline-block;
background-image: linear-gradient(#30A1DC, #0060C0);
border-radius: 8px;
border: var(--border);
font-size: 0.9rem;
padding: 0.4rem 0.8em;
opacity: 0.7;
background: var(--button-bg-color);
border-bottom: 2px solid #0099ff;
color: var(--font-color);
font-weight: bold;
margin: 0 0.1rem;
text-align: center;
}
a{
display: inline-block;
border-radius: 0px;
border: var(--border);
font-size: 0.9rem;
padding: 0.0rem 0.0em;
opacity: 0.7;
background: var(--button-bg-color);
color: var(--font-color);
font-weight: bold;
margin: 0 0.0rem;
text-align: center;
vertical-align: middle;
text-decoration: none;
}
button:disabled,button[disabled],ul:not(.menu)>li>a:not([href]){
background: #999999;
color: var(--disabled-color);
}
button:hover,a:hover, button:focus,a:focus {
color: var(--font-color);
background: var(--button-bg-hover);
cursor: pointer;
transform: scale(1.05);
}
dialog::backdrop{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
}
body{
margin: 0;
padding: 0;
}
nav {
background: transparent;
border: 1px solid #333;
color: var(--font-color);
text-shadow: var(--text-shadow);
display: block;
margin: 0;
overflow: hidden;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
margin: 0;
display: inline-block;
list-style-type: none;
transition: all 0.2s;
}
nav > ul > li > a {
color: var(--font-color);
text-shadow: var(--text-shadow);
display: block !important;
line-height: 2em;
padding: 0.5em 2em;
}
nav li > ul{
display : none;
margin-top:1px;
background-color: #bbb;
}
nav li > ul li{
display: block !important;
}
nav li > ul li button:not(.selector) {
color: var(--font-color);
text-shadow: var(--text-shadow);
display: block;
line-height: 2em;
padding: 0.5em 2em;
width: 13em;
}
nav li:hover {
background-color: #666 !important;
}
nav li:hover > ul, li:focus > ul, li:active > ul {
position:absolute !important;
z-index: 1000;
display : block !important;
}
@-ms-viewport only screen and (max-width: 800px){
user-scalable: no;
}
@media only screen and (max-width: ${layout.tablewrap.width}px) {
table, .table, .message {
border-radius: 8px;
}
tr, .tr {
display: flex; flex-wrap: wrap;
}
tr:nth-child(even), .tr:nth-child(even) {
border: var(--border);
padding-bottom: 10px;
}
tr:nth-child(odd), .tr:nth-child(odd) {
border: var(--border);
border-radius: 4px;
padding-bottom: 10px;
}
td, th, .td, .th {
display: table-cell;
padding: 3px 10px;
border: 1px;
width: 100%;
}
thead, .thead {
display: none;
}
.beancollectorsearchrow {
display: none;
}
#field§quicksearch {
width: fit-content;
}
.beanfieldlabel {
width: fit-content;
min-width: 50px;
color: var(--label-color);
padding: 0px 10px;
}
input {
min-width: 60px;
border-radius: 4px;
width: 80%;
font-size: 14px;
}
}
@media only screen and (max-width: 480px) {
thead, .thead {
display: none;
}
tr:not(#field\.panel *), .tr:not(#field\.panel *) {
width: 100%;
border-radius: 18px;
padding: 0px 6px;
}
td, th, .td, .th {
padding: 8px 8px;
width: 100%;
}
#field\.panel td, #field\.panel th, #field\.panel .td, #field\.panel .th {
padding: 0px 2px;
width: 100%;
}
button, input, #field§quicksearch, .actionpanel {
min-width: 50px;
width: 100%;
}
#field§quicksearch {
width: 100%;
}
input[type='search'] {
width: 100%;
}
input[type='checkbox'] {
width: 28px;
height: 28px;
float: right;
}
.actionpanel {
border-radius: 8px;
}
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
.sidenav button {font-size: 18px; width: 100%}
nav {
display: none;
}
}
/* the media types for theme switching in browser tools */
@media (prefers-color-scheme: dark) {
:root{
--font-color: white;
--disabled-color: lightgray;
--label-color: lightgray;
--text-shadow: 1px 2px 2px black;
--bg-color: radial-gradient(#9999FF, #000000);
--bg-input-panel: url('icons/spe.jpg');
--button-bg-color: #0055AA;
--button-bg-hover: black;
--table-bg-color: rgba(247,247,247,.5);
--table-bg-even-color: rgba(255,255,255,.3);
--table-bg-odd-color: rgba(196,196,196,.3);
}
}
@media (prefers-color-scheme: light) {
:root{
--font-color: black;
--disabled-color: lightgray;
--label-color: darkblue;
--text-shadow: none;
--bg-color: radial-gradient(#FFFFFF, #BBBBBB);
--bg-input-panel: url('icons/spe.jpg');
--button-bg-color: lightgray;
--button-bg-hover: white;
--table-bg-color: rgba(247,247,247,.8);
--table-bg-even-color: rgba(255,255,255,.6);
--table-bg-odd-color: rgba(196,196,196,.6);
}
}© 2015 - 2025 Weber Informatics LLC | Privacy Policy