diff options
Diffstat (limited to 'src/main/resources/static/style.css')
| -rw-r--r-- | src/main/resources/static/style.css | 284 |
1 files changed, 284 insertions, 0 deletions
diff --git a/src/main/resources/static/style.css b/src/main/resources/static/style.css new file mode 100644 index 0000000..bf37db2 --- /dev/null +++ b/src/main/resources/static/style.css @@ -0,0 +1,284 @@ +body { + margin: 0; + font-family: sans-serif; + font-size: .8rem; + color: #333; +} + +nav { + margin: 0 auto; + background: #d5dad5; + height: 3rem; + max-width: 1140px; +} + +nav a { + color: #004a8f; + text-transform: uppercase; + text-decoration: none; + line-height: 2rem; + font-weight: 700; +} + +nav a:hover { + text-decoration: underline; +} + +nav > ul { + margin: 0 3rem; + padding: 0; +} + +nav > ul > li { + background: #fbfbfb; + display: block; + float: left; + padding: 2px 1rem; + border-left: 1px solid #d5dad5; +} + +nav > ul > li:first-of-type { + border-left: none; +} + +.breadcrumps { + margin: 0 auto; + max-width: 1140px; +} + +.breadcrumps ul { + margin: 2px 0; + padding: .4rem 1rem; + list-style: none; + background: #eee; +} + +.breadcrumps ul li { + display: inline; +} + +.breadcrumps ul li+li:before { + padding: .4rem; + color: gray; + content: "/\00a0"; +} + +.breadcrumps ul li a { + color: #333333; + text-decoration: none; +} + +main { + margin: 0 auto; + max-width: 1140px; +} + +form { + margin: 1rem 0; + padding: 1rem; + + border: 1px solid lightgray; + border-radius: 3px; + background: #eee; + + text-align: center; +} + +form > h2 { + margin: 0; +} + +form.samplecode-input > div { + padding: 0.6rem; + display: inline-block; + + border: 1px solid lightgray; + border-radius: 3px; + + background: white; +} + +form.samplecode-input input { + padding: 0; + + border: none; + outline: none; + + text-align: left; + appearance: textfield; + font-size: 1.2rem; + font-weight: bold; +} + +form.samplecode-input input:focus-visible { + background: lightgreen; +} + +table { + border-top: 1px solid lightgray; + border-left: 1px solid lightgray; + border-spacing: 0; + border-radius: 3px; + + min-width: 100%; + font-family: sans-serif; +} + +#samples-table.max { + width: 100vw; + position: fixed; + padding: 1rem; + top: 0; + left: 0; + background: white; + min-height: 100vh; +} + +table.samples { + max-width: 100%; + overflow-x: scroll; + display: block; +} + +th { + background: #eee; +} + +td, th { + padding: .2rem; + + border-right: 1px solid lightgray; + border-bottom: 1px solid lightgray; + + text-align: left; + white-space: nowrap; + vertical-align: top; +} + +td { + font-family: monospace; +} + +td.bg-green, th.bg-green { + background: green; + color: white; +} + +td.bg-yellow, th.bg-yellow { + background: darkorange; + color: white; +} + +td.bg-red, th.bg-red { + background: red; + color: white; +} + +td.bg-gray, th.bg-gray { + background: slategray; + color: white; +} + +td.bg-shaded, th.bg-shaded { + background: repeating-linear-gradient(140deg, white, #e5e5f5 4px, white 8px); +} + +td.clipboard { + cursor: copy; +} + +td.clipboard.clipped { + box-shadow: 0 0 1rem lightgreen inset; +} + +.btn { + margin: 4px; + padding: 4px 8px; + + line-height: 1.2rem; + vertical-align: middle; + + border: 0 solid transparent; + border-radius: 3px; + + text-decoration: none; + font-size: 0.8rem; + font-weight: normal; + + cursor: pointer; +} + +.btn:hover { + filter: drop-shadow(1px 2px 2px gray); +} + +.btn:active { + filter: drop-shadow(1px 1px 2px gray); + translate: 0 1px; +} + +.btn.btn-red { + background: red; + color: white; +} + +.btn.btn-red:hover, .btn.btn-red:active { + background: darkred !important; +} + +.btn.btn-blue { + background: slategray; + color: white; +} + +.btn.btn-blue:hover, .btn.btn-blue:active { + background: darkslategray !important; +} + +.btn.btn-delete:before { + content: '\1F5D1'; + padding: .2rem; +} + +input.inline { + border: none; + font-size: 1.1rem; + outline: none; +} + +input.inline:focus-visible { + background: lightgreen; +} + +.monospace { + font-family: monospace; + color: #333333; + border-bottom: 1px dotted gray !important; +} + +.help { + padding: 1rem; + + border: 1px solid darkslategray; + border-radius: 3px; + background: slategray; + color: white; +} + +.help.error { + border: 3px dashed red; + background: darkorange; +} + +.help .help-header { + font-size: 1.2rem; + font-weight: bold; +} + +.chart { + padding: 1rem; + margin: .2rem; + + border: 1px solid lightgray; + border-radius: 3px; +}
\ No newline at end of file |