ui: don't inline style
It's used in other custom pages too
This commit is contained in:
Mikaël Cluseau
42
html/ui/app.css
Normal file
42
html/ui/app.css
Normal file
@ -0,0 +1,42 @@
|
||||
|
||||
.view-links > span {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
margin-right: 1ex;
|
||||
margin-bottom: 1ex;
|
||||
padding: 0.5ex;
|
||||
border: 1pt solid;
|
||||
border-radius: 1ex;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.downloads, .download-links {
|
||||
& > * {
|
||||
display: inline-block;
|
||||
margin-right: 1ex;
|
||||
margin-bottom: 1ex;
|
||||
padding: 0.5ex;
|
||||
border: 1px solid;
|
||||
border-radius: 1ex;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.downloads, .view-links {
|
||||
& > .selected {
|
||||
color: var(--link);
|
||||
}
|
||||
}
|
||||
|
||||
.text-and-file {
|
||||
position:relative;
|
||||
|
||||
textarea {
|
||||
width: 64em;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
position:absolute;
|
||||
bottom:0;right:0;
|
||||
}
|
||||
}
|
||||
@ -6,245 +6,9 @@
|
||||
|
||||
<link rel="icon" href="favicon.ico" />
|
||||
|
||||
<style>:root {
|
||||
--bg: #eee;
|
||||
--color: black;
|
||||
--bevel-dark: darkgray;
|
||||
--bevel-light: lightgray;
|
||||
--link: blue;
|
||||
--input-bg: #ddd;
|
||||
--input-text: white;
|
||||
--btn-bg: #eee;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg: black;
|
||||
--color: orange;
|
||||
--bevel-dark: #402900;
|
||||
--bevel-light: #805300;
|
||||
--link: #31b0fa;
|
||||
--input-bg: #111;
|
||||
--input-text: #ddd;
|
||||
--btn-bg: #222;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
button[disabled] {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
a[href], a[href]:visited, button.link {
|
||||
border: none;
|
||||
color: var(--link);
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
th, td {
|
||||
border-left: dotted 1pt;
|
||||
border-right: dotted 1pt;
|
||||
border-bottom: dotted 1pt;
|
||||
padding: 2pt 4pt;
|
||||
}
|
||||
tr:first-child > th {
|
||||
border-top: dotted 1pt;
|
||||
}
|
||||
th, tr:last-child > td {
|
||||
border-bottom: solid 1pt;
|
||||
}
|
||||
|
||||
.flat > * { margin-left: 1ex; }
|
||||
.flat > *:first-child { margin-left: 0; }
|
||||
|
||||
.green { color: green; }
|
||||
.red { color: red; }
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.red { color: #c00; }
|
||||
}
|
||||
|
||||
textarea, select, input {
|
||||
background: var(--input-bg);
|
||||
color: var(--input-text);
|
||||
border: solid 1pt;
|
||||
border-color: var(--bevel-light);
|
||||
border-top-color: var(--bevel-dark);
|
||||
border-left-color: var(--bevel-dark);
|
||||
margin: 1pt;
|
||||
|
||||
&:focus {
|
||||
outline: solid 1pt var(--color);
|
||||
}
|
||||
}
|
||||
|
||||
button, input[type=button], input[type=submit], ::file-selector-button {
|
||||
background: var(--btn-bg);
|
||||
color: var(--color);
|
||||
border: solid 2pt;
|
||||
border-color: var(--bevel-dark);
|
||||
border-top-color: var(--bevel-light);
|
||||
border-left-color: var(--bevel-light);
|
||||
|
||||
&:hover {
|
||||
background: var(--bevel-dark);
|
||||
}
|
||||
&:active {
|
||||
background: var(--bevel-dark);
|
||||
border-color: var(--bevel-light);
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 2pt solid;
|
||||
margin: 0 0 1em 0;
|
||||
padding: 1ex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
#logo > img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
header .utils > * {
|
||||
margin-left: 1ex;
|
||||
}
|
||||
|
||||
.error {
|
||||
display: flex;
|
||||
position: relative;
|
||||
background: rgba(255,0,0,0.2);
|
||||
border: 1pt solid red;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.error .btn-close,
|
||||
.error .code {
|
||||
background: #600;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
align-self: stretch;
|
||||
padding: 1ex 1em;
|
||||
}
|
||||
.error .code {
|
||||
order: 1;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.error .message {
|
||||
order: 2;
|
||||
padding: 1ex 2em;
|
||||
}
|
||||
.error .btn-close {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.sheets {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
.sheets > div {
|
||||
margin: 0 1ex;
|
||||
border: 1pt solid;
|
||||
border-radius: 6pt;
|
||||
}
|
||||
.sheets .title {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: large;
|
||||
padding: 2pt 6pt;
|
||||
background: rgba(127,127,127,0.5);
|
||||
}
|
||||
.sheets .section {
|
||||
padding: 2pt 6pt 2pt 6pt;
|
||||
font-weight: bold;
|
||||
border-top: 1px dotted;
|
||||
}
|
||||
.sheets section {
|
||||
margin: 2pt 6pt 6pt 6pt;
|
||||
}
|
||||
.sheets > *:last-child > table:last-child > tr:last-child > td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.notif {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
.notif > div:first-child {
|
||||
position: absolute;
|
||||
min-width: 100%; height: 100%;
|
||||
background: white;
|
||||
opacity: 75%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.links > * { margin-left: 1ex; }
|
||||
.links > *:first-child { margin-left: 0; }
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.notif > div:first-child {
|
||||
background: black;
|
||||
}
|
||||
}
|
||||
|
||||
.copy { font-size: small; }
|
||||
</style>
|
||||
<style>
|
||||
.view-links > span {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
margin-right: 1ex;
|
||||
margin-bottom: 1ex;
|
||||
padding: 0.5ex;
|
||||
border: 1pt solid;
|
||||
border-radius: 1ex;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.downloads, .download-links {
|
||||
& > * {
|
||||
display: inline-block;
|
||||
margin-right: 1ex;
|
||||
margin-bottom: 1ex;
|
||||
padding: 0.5ex;
|
||||
border: 1px solid;
|
||||
border-radius: 1ex;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.downloads, .view-links {
|
||||
& > .selected {
|
||||
color: var(--link);
|
||||
}
|
||||
}
|
||||
|
||||
.text-and-file {
|
||||
position:relative;
|
||||
|
||||
textarea {
|
||||
width: 64em;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
position:absolute;
|
||||
bottom:0;right:0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>@import url('/ui/style.css');@import url('/ui/app.css');</style>
|
||||
<script src="/ui/jsonpatch.min-942279a1c4209cc2.js" integrity="sha384-GcPrkRS12jtrElEkbJcrZ8asvvb9s3mc+CUq9UW/8bL4L0bpkmh9M+oFnWN6qLq2"></script>
|
||||
<script src="/ui/app-7f4645e84eaae7ce.js" defer integrity="sha384-31uiQnXVSPLDq61o+chfyKRkSdkmzv023M7KafOo+0xRw5AM70BUFyYO6yo0kPiZ" type="module"></script>
|
||||
<script src="/ui/Downloads-c9374f19f52c46d.js" integrity="sha384-WQIkCSxlUkvu4jFIWwS3bESMaazGwwnBn9dyvB7nItz3L8BmusRMsJACzfJa7sC4"></script>
|
||||
|
||||
195
html/ui/style.css
Normal file
195
html/ui/style.css
Normal file
@ -0,0 +1,195 @@
|
||||
:root {
|
||||
--bg: #eee;
|
||||
--color: black;
|
||||
--bevel-dark: darkgray;
|
||||
--bevel-light: lightgray;
|
||||
--link: blue;
|
||||
--input-bg: #ddd;
|
||||
--input-text: white;
|
||||
--btn-bg: #eee;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg: black;
|
||||
--color: orange;
|
||||
--bevel-dark: #402900;
|
||||
--bevel-light: #805300;
|
||||
--link: #31b0fa;
|
||||
--input-bg: #111;
|
||||
--input-text: #ddd;
|
||||
--btn-bg: #222;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
button[disabled] {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
a[href], a[href]:visited, button.link {
|
||||
border: none;
|
||||
color: var(--link);
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
th, td {
|
||||
border-left: dotted 1pt;
|
||||
border-right: dotted 1pt;
|
||||
border-bottom: dotted 1pt;
|
||||
padding: 2pt 4pt;
|
||||
}
|
||||
tr:first-child > th {
|
||||
border-top: dotted 1pt;
|
||||
}
|
||||
th, tr:last-child > td {
|
||||
border-bottom: solid 1pt;
|
||||
}
|
||||
|
||||
.flat > * { margin-left: 1ex; }
|
||||
.flat > *:first-child { margin-left: 0; }
|
||||
|
||||
.green { color: green; }
|
||||
.red { color: red; }
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.red { color: #c00; }
|
||||
}
|
||||
|
||||
textarea, select, input {
|
||||
background: var(--input-bg);
|
||||
color: var(--input-text);
|
||||
border: solid 1pt;
|
||||
border-color: var(--bevel-light);
|
||||
border-top-color: var(--bevel-dark);
|
||||
border-left-color: var(--bevel-dark);
|
||||
margin: 1pt;
|
||||
|
||||
&:focus {
|
||||
outline: solid 1pt var(--color);
|
||||
}
|
||||
}
|
||||
|
||||
button, input[type=button], input[type=submit], ::file-selector-button {
|
||||
background: var(--btn-bg);
|
||||
color: var(--color);
|
||||
border: solid 2pt;
|
||||
border-color: var(--bevel-dark);
|
||||
border-top-color: var(--bevel-light);
|
||||
border-left-color: var(--bevel-light);
|
||||
|
||||
&:hover {
|
||||
background: var(--bevel-dark);
|
||||
}
|
||||
&:active {
|
||||
background: var(--bevel-dark);
|
||||
border-color: var(--bevel-light);
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 2pt solid;
|
||||
margin: 0 0 1em 0;
|
||||
padding: 1ex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
#logo > img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
header .utils > * {
|
||||
margin-left: 1ex;
|
||||
}
|
||||
|
||||
.error {
|
||||
display: flex;
|
||||
position: relative;
|
||||
background: rgba(255,0,0,0.2);
|
||||
border: 1pt solid red;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.error .btn-close,
|
||||
.error .code {
|
||||
background: #600;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
align-self: stretch;
|
||||
padding: 1ex 1em;
|
||||
}
|
||||
.error .code {
|
||||
order: 1;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.error .message {
|
||||
order: 2;
|
||||
padding: 1ex 2em;
|
||||
}
|
||||
.error .btn-close {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.sheets {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
.sheets > div {
|
||||
margin: 0 1ex;
|
||||
border: 1pt solid;
|
||||
border-radius: 6pt;
|
||||
}
|
||||
.sheets .title {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: large;
|
||||
padding: 2pt 6pt;
|
||||
background: rgba(127,127,127,0.5);
|
||||
}
|
||||
.sheets .section {
|
||||
padding: 2pt 6pt 2pt 6pt;
|
||||
font-weight: bold;
|
||||
border-top: 1px dotted;
|
||||
}
|
||||
.sheets section {
|
||||
margin: 2pt 6pt 6pt 6pt;
|
||||
}
|
||||
.sheets > *:last-child > table:last-child > tr:last-child > td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.notif {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
.notif > div:first-child {
|
||||
position: absolute;
|
||||
min-width: 100%; height: 100%;
|
||||
background: white;
|
||||
opacity: 75%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.links > * { margin-left: 1ex; }
|
||||
.links > *:first-child { margin-left: 0; }
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.notif > div:first-child {
|
||||
background: black;
|
||||
}
|
||||
}
|
||||
|
||||
.copy { font-size: small; }
|
||||
@ -6,8 +6,9 @@
|
||||
<link data-trunk rel="copy-file" href="favicon.ico" />
|
||||
<link rel="icon" href="favicon.ico" />
|
||||
<link data-trunk rel="copy-file" href="js/vue.esm-browser.js" />
|
||||
<link data-trunk rel="inline" href="style.css" />
|
||||
<link data-trunk rel="inline" href="app.css" />
|
||||
<link data-trunk rel="copy-file" href="style.css" />
|
||||
<link data-trunk rel="copy-file" href="app.css" />
|
||||
<style>@import url('/ui/style.css');@import url('/ui/app.css');</style>
|
||||
<script data-trunk src="js/jsonpatch.min.js"></script>
|
||||
<script data-trunk src="js/app.js" type="module" defer></script>
|
||||
<script data-trunk src="js/Downloads.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user