RASCSI/python/web/src/static/themes/classic/style.css
nucleogenic 3627b39af4
New theme for web UI (#957)
* Docker environment fixes

* New theme for web UI

* Apply breaking wrap to filenames only

* Reduce font sizes, whitespace and padding

* Right align action fields/buttons

* Improve mobile header, hide superfluous UI elements when logged out, drop placeholders from login labels, various other adjustments

* Force footer to bottom of screen

* Show manual link to logged out users

* Reduce header text size on desktop

* Fix incorrect selector ID

* Fix selector referencing old class name

* Fix right-aligned message when images table empty

* Add CSS linter/auto-formatter

* Run Stylelint + Prettier against modern theme CSS

* Select default theme based on browser’s user agent

* Style inputs on mobile/tablet devices

* Fixes for Safari 14 on iOS + iPad OS

* Explicitly define mobile browser support, switch to bare ua-parser without user-agent wrapper

* Add LICENSE file for modern theme icons

* Improve theme selection query string/field naming.

* Remove patch workaround from Docker build

* Update log level for UAs to info

* Move Bootstrap Reboot CSS to CDN

* Account for LUN column in attached devices table

* Prevent wrapping of config forms on small viewports

* Fix Stylelint issues

* Auto-format CSS with Prettier
2022-11-14 09:32:15 -08:00

172 lines
2.4 KiB
CSS

body {
color: black;
background-color: white;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
a {
text-decoration: none;
}
form {
display: inline;
}
table, tr, td {
border: 1px solid black;
border-collapse: collapse;
margin: none;
}
h1 {
color: white;
font-size: 20px;
}
h2 {
color: black;
font-size: large;
font-weight: bold;
margin: 3px;
}
summary.heading {
color: black;
font-size: large;
font-weight: bold;
margin: 3px;
}
div.header {
color: white;
background-color: black;
}
div.footer {
font-family: monospace;
}
div.footer div.theme-change-hint {
margin-bottom: 15px;
}
div.logged-in {
background-color: green;
}
div.logged-out {
background-color: red;
}
input.lun {
width: 36px;
}
div.flash {
margin-top: 5px;
margin-bottom: 5px;
}
div.flash div {
color: white;
padding: 2px 5px;
font-size: 18px;
}
div.flash div div {
white-space: pre-line;
}
div.flash div.success {
background-color: green;
}
div.flash div.warning {
background-color: orange;
color: black;
}
div.flash div.error {
background-color: red;
}
div.flash div.info {
background-color: #0d6efd;
}
td.inactive {
text-align: center;
background-color: tan;
}
ul.inline_list {
list-style: none;
}
.dropzone, .dropzone * {
box-sizing: border-box;
}
.dropzone {
position: relative;
}
.dropzone .dz-button {
position: relative;
background-color: white;
color: black;
border: 2px dashed blue;
padding: 12px 28px;
}
.dropzone .dz-preview {
position: relative;
display: inline-block;
width: 120px;
margin: .5em;
}
.dropzone .dz-preview .dz-progress {
display: block;
height: 15px;
border: 1px solid #aaa;
}
.dropzone .dz-preview .dz-progress .dz-upload {
display: block;
height: 100%;
width: 0;
background: green;
}
.dropzone .dz-preview .dz-error-message {
color: red;
display: none;
}
.dropzone .dz-preview.dz-error .dz-error-message {
display: block;
}
.dropzone .dz-preview.dz-error .dz-error-mark {
display: block;
filter: drop-shadow(0px 0px 2px red);
opacity: 0;
}
.dropzone .dz-preview.dz-success .dz-success-mark {
display: block;
filter: drop-shadow(0px 0px 2px green);
}
.dropzone .dz-preview .dz-error-mark, .dropzone .dz-preview .dz-success-mark {
position: absolute;
display: none;
top: 30px;
width: 54px;
height: 58px;
left: 50%;
margin-left: -27px;
}