ln.vue/css/ln.vue.css

509 lines
8.6 KiB
CSS

@charset 'UTF-8';
@font-face {
font-family: 'typicons';
src: url('../fonts/typicons.eot');
src: url('../fonts/typicons.eot?#iefix') format('embedded-opentype'),
url('../fonts/typicons.woff') format('woff'),
url('../fonts/typicons.ttf') format('truetype'),
url('../fonts/typicons.svg#typicons') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'fa-regular';
src: url('../fonts/fa-regular-400.eot');
src: url('../fonts/fa-regular-400.eot?#iefix') format('embedded-opentype'),
url('../fonts/fa-regular-400.woff') format('woff'),
url('../fonts/fa-regular-400.ttf') format('truetype'),
url('../fonts/fa-regular-400.svg#typicons') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'fa-solid';
src: url('../fonts/fa-solid-900.eot');
src: url('../fonts/fa-solid-900.eot?#iefix') format('embedded-opentype'),
url('../fonts/fa-solid-900.woff') format('woff'),
url('../fonts/fa-solid-900.ttf') format('truetype'),
url('../fonts/fa-solid-900.svg#typicons') format('svg');
font-weight: normal;
font-style: normal;
}
* {
flex-grow: 1;
}
div {
display: inline-block;
}
h1, h2, h3, h4, h5 {
display: block;
}
.h1, .h2, .h3, .h4, .h5 {
display: inline-block;
}
h1,.h1 {
font-size: 200%;
padding: 8px;
}
h2,.h2 {
font-size: 150%;
padding: 8px;
}
h3,.h3 {
font-size: 110%;
padding: 8px;
}
.flex {
display: flex;
flex-direction: row;
}
.flex.column {
flex-direction: column;
}
.popup {
position: absolute;
top: 100%;
right: 0%;
width: 100%;
border: 1px solid black;
background-color: white;
padding: 8px;
}
sym {
display: inline-block;
width: 24px;
height: 24px;
}
sym.trash::before {
content: '\f056';
font-family: 'fa-solid';
width: 16px;
height: 14px;
color: red;
}
.no-border {
border: none;
display: inline-block;
padding: 0px;
margin: 0px;
}
.fa-solid {
font-family: 'fa-solid';
font-size: 20px;
}
div.ln-tooltip {
position: absolute;
padding:5px;
background-color: white;
border-radius: 0px 6px 6px 6px;
border: 1px solid black;
opacity: 0.0;
transition: opacity 300ms linear;
pointer-events: none;
}
div.ln-tooltip[VISIBLE] {
opacity: 1.0;
transition: opacity 300ms linear;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.block {
display: block;
}
.ln-view {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
display: flex;
flex-direction: column;
}
section#header {
flex-grow: 0;
margin-bottom: 1em;
background-color: whitesmoke;
}
section#body {
flex-grow: 1;
overflow: auto;
}
section#footer {
flex-grow: 0;
background-color: whitesmoke;
}
.json {
white-space: pre;
font-family: 'Courier New', Courier, monospace;
font-size: 12px;
}
input, div.ln-select > select, div.ln-select, div.ln-upload, textarea {
display: inline-block;
position: relative;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
border: none;
border-radius: 5px;
}
input, div.ln-select, div.ln-upload {
width: 180px;
height: 24px;
padding: 4px;
padding-left: 8px;
background-color: rgb(231, 246, 255);
}
textarea {
width: 180px;
height: 48px;
padding: 4px;
padding-left: 8px;
background-color: rgb(231, 246, 255);
}
input.long, div.ln-select.long, div.ln-upload.long, textarea.long, div.ln-slider.long {
width: 360px;
}
div.ln-select > select {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
background-color: inherit;
padding: 0px;
margin: 0px;
}
div.ln-select::after {
position: absolute;
display: inline-block;
top: 4px;
right: 10px;
content: '\f107';
font-family: 'fa-solid';
font-size: 18px;
pointer-events: none;
}
.ln-identity {
position: relative;
display: inline-block;
flex-grow: 0;
flex-shrink: 0;
width: 200px;
text-align: center;
padding: 8px;
font-size: 150%;
}
.ln-navbar {
display: block;
width: 100%;
border-top: 1px solid black;
border-bottom: 1px solid black;
padding-top: 4px;
padding-bottom: 4px;
}
.ln-navitem {
position: relative;
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
margin-left: 12px;
margin-right: 12px;
}
.ln-navitem > a {
font-style: normal;
text-decoration: none;
color: black;
}
div.ln-navitem > div.ln-nav-children {
position: absolute;
white-space: pre;
left: 0px;
top: 100%;
opacity: 0.0;
transition: opacity 300ms;
border: 1px solid black;
border-top: none;
background-color: white;
padding: 8px;
pointer-events: none;
}
div.ln-navitem:hover > div.ln-nav-children {
opacity: 1.0;
transition: opacity 300ms;
pointer-events: visible;
}
div.ln-nav-children > .ln-navitem {
display: block;
margin-top: 4px;
padding-top: 4px;
border-top: 1px solid #C0C0C0;
}
div.ln-nav-children > .ln-navitem:first-of-type {
margin-top: 0px;
border-top: none;
}
div.ln-statusbar {
position: relative;
bottom: 0px;
left: 0px;
right: 0px;
border-top: 1px solid black;
padding: 8px;
display: flex;
flex-direction: row;
}
div.ln-statusbar > div {
flex-grow: 1;
text-align: center;
padding: 4px;
padding-left: 8px;
padding-right: 8px;
border-left: 1px solid #D0D0D0;
}
div.ln-statusbar > div:first-of-type {
text-align: left;
border-left: none;
}
div.ln-statusbar > div.ln-background-tasks {
flex-grow: 0;
}
.ln-background-tasks {
position: relative;
}
div.ln-background-tasks > div {
display: block;
position: absolute;
white-space: pre;
left: 4px;
bottom: 80%;
overflow-y: visible;
overflow-x: hidden;
background-color: blanchedalmond;
border: 1px solid black;
padding: 4px;
padding-right: 32px;
padding-left: 16px;
margin-right: 24px;
opacity: 0;
height: 10px;
transition: opacity 500ms 50ms, height 0ms 550ms;
}
div.ln-background-tasks:hover > div {
opacity: 1.0;
height: 8em;
transition: opacity 500ms 50ms, height 500ms 50ms;
}
div.ln-background-tasks > div > div[state="waiting"] {
color: silver;
}
div.ln-background-tasks > div > div[state="failed"] {
color: red;
}
div.ln-background-tasks > div > div[state="ready"] {
color: green;
}
div.ln-upload {
display: inline-block;
position: relative;
height: inherit;
padding-top: 1em;
min-height: 3em;
text-align: center;
}
div.ln-upload-file {
display: block;
background-color: white;
font-family: 'Courier New', Courier, monospace;
padding: 2px;
margin-left: 12px;
margin-right: 12px;
text-align: left;
border: 1px solid black;
border-radius: 4px;
margin: 2px;
}
div.ln-slider {
width: 180px;
text-align: center;
}
input.ln-slider {
display: block;
width: 100%;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid rgb(80, 188, 255);
border-radius: 6px;
height: 12px;
width: 12px;
cursor: pointer;
background-color: rgb(80, 188, 255);
}
input[type=range]::-moz-range-thumb {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid rgb(80, 188, 255);
border-radius: 6px;
height: 12px;
width: 12px;
cursor: pointer;
background-color: rgb(80, 188, 255);
}
input[type=range]::-ms-thumb {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid rgb(80, 188, 255);
border-radius: 6px;
height: 12px;
width: 12px;
cursor: pointer;
background-color: rgb(80, 188, 255);
}
table.ln-table {
position: relative;
border-collapse: collapse;
width: 90%;
margin-left: 5%;
}
table.ln-table td {
padding: 4px;
padding-left: 8px;
padding-right: 8px;
}
table.ln-table > thead {
position: relative;
border-bottom: 2px solid black;
}
table.ln-table > tbody > tr > td {
}
table.ln-table > tbody > tr:hover > td {
background-color: rgb(231, 246, 255)
}
table.ln-table > tbody > tr[selected] > td {
background-color: rgb(80, 188, 255)
}