no.tsl2.nano.h5.2.5.1.source-code.style.template Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of tsl2.nano.h5 Show documentation
Show all versions of tsl2.nano.h5 Show documentation
TSL2 Framework Html5 Extensions (WebServer, Html5Presentation, RuleCover, BeanConfigurator, LogicTable-Sheet, Expression-Descriptors for Actions, Rules, URLs, Queries)
:root {
--font-family: Lato, 'sans-serif';
--font-color: white;
--disabled-color: lightgray;
--text-shadow: 1px 2px 2px black;
--bg-color: radial-gradient(#9999FF, #000000);
--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;
--text-shadow: none;
--bg-color: radial-gradient(#FFFFFF, #BBBBBB);
--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;
--text-shadow: 1px 2px 2px black;
--bg-color: radial-gradient(#9999FF, #000000);
--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: lightgray;
--text-shadow: none;
--bg-color: white;
--button-bg-color: lightgray;
--button-bg-hover: lightgray;
--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);
--border: 1 px;
}
html[data-theme='dark-contrast'] {
--font-family: 'Comic Sans MS', 'serif';
--font-color: white;
--disabled-color: lightgray;
--text-shadow: none;
--bg-color: black;
--button-bg-color: #0055AA;
--button-bg-hover: gray;
--table-bg-color: rgba(247,247,247,.6);
--table-bg-even-color: rgba(255,255,255,.6);
--table-bg-odd-color: rgba(196,196,196,.6);
--border: 1 px;
}
/* will be assigned as tag style under the html header */
body {
font-family: var(--font-family);
transition: background-color .5s;
}
.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;
}
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);
}
.fade-out {
opacity:0;
}
.fade-in {
opacity:1;
}
.tooltip {
display: none;
position: relative;
top: 0
left: 0;
z-index: 99;
border: 1px solid #333;
background: #eee;
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;
}
#field§quicksearch {
padding-top: 3;
padding-bottom: 2;
}
#beancollectorliste§quicksearch {
padding-top: 0;
padding-bottom: 6;
}
/* 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;
border-radius: 3px;
border: var(--border);
font-size: 0.9rem;
padding: 0.4rem 0.8em;
opacity: 0.7;
background: var(--button-bg-color);
border-bottom: 1px 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;
}
dialog::backdrop{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
}
@-ms-viewport only screen and (max-width: 800px){
user-scalable: no;
}
@media only screen and (max-width: ${layout.tablewrap.width}px) {
tr, .tr {
display: flex; flex-wrap: wrap;
}
td, th, .td, .th {
display: table-cell;
padding: 3px 10px;
border: 1px;
}
.beancollectorsearchrow {
display: none;
}
}
#title,.title {
background: transparent;
color: var(--font-color);
text-shadow: var(--text-shadow);
font-size: 1.4em;
}
@media only screen and (max-width: 480px) {
thead, .thead {
display: none;
}
tr, .tr {
width: 100%;
}
td, th, .td, .th {
width: 100%;
}
button, input, #field§quicksearch, .actionpanel {
width: 100%;
}
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
.sidenav button {font-size: 18px; width: 100%}
}
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 {
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;
}
* the media types for theme switching in browser tools */
@media (prefers-color-scheme: dark) {
:root{
--font-color: white;
--disabled-color: lightgray;
--text-shadow: 1px 2px 2px black;
--bg-color: radial-gradient(#9999FF, #000000);
--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;
--text-shadow: none;
--bg-color: radial-gradient(#FFFFFF, #BBBBBB);
--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);
}
}