nirvash/static/style.css

511 lines
10 KiB
CSS
Raw Normal View History

:root {
--bg_color: #000000cc;
--fg_color: #fff;
--main_color: #1f9b92;
--sub_color: #00000000;
--err_color: #DC143C;
2024-03-18 06:45:11 +00:00
--main_bg: '/static/bg2.png';
--login_bg: '/static/bg.png';
}
* { scrollbar-color:var(--main_color) var(--sub_color); }
*::-webkit-scrollbar { width:6px;height:6px; }
*::-webkit-scrollbar-track { background: var(--sub_color);}
*::-webkit-scrollbar-thumb { background:var(--main_color);border-radius:0;border:none; }
*::-webkit-scrollbar-corner { background:var(--sub_color); }
*::selection { background-color:var(--main_color);color:var(--bg_color);text-decoration:none;text-shadow:none; }
body {
padding: 0;
margin: 0;
2022-06-08 05:44:54 +00:00
font-family: sans-serif;
2022-06-07 06:59:41 +00:00
font-size: 16px;
background: var(--bg_color);
color: var(--fg_color);
2022-06-07 06:59:41 +00:00
background: url('/static/bg2.png');
2024-03-18 06:45:11 +00:00
background: url(var(--main_bg));
2022-06-07 06:59:41 +00:00
background-size: cover;
2024-03-18 19:17:31 +00:00
background-position: center center;
2022-06-07 06:59:41 +00:00
background-attachment: fixed;
}
.login-body {
background: url('/static/bg.png');
2024-03-18 06:45:11 +00:00
background: url(var(--login_bg));
background-size: cover;
background-position: center center;
height: 100vh;
}
.login {
text-align: center;
position: relative;
width: 100%;
box-sizing: border-box;
height: auto;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
background-color: var(--bg_color);
padding: 1em;
}
.login h1 {
font-size: 225%;
text-transform: uppercase;
color: var(--fg_color);
}
2022-06-08 05:44:54 +00:00
.login label {
padding: 0;
margin: 0;
height: 0;
width: 0;
font-size: 0;
display: inline;
position: absolute;
}
2022-06-10 06:59:34 +00:00
.login form input {
display: block;
2022-06-10 06:59:34 +00:00
margin-top: 0.25em;
margin-left: auto;
margin-right: auto;
background: var(--sub_color);
border: solid 2px var(--fg_color);
font-size: 200%;
color: var(--fg_color);
padding: 0.2em;
max-width: calc(100vw - 2em);
}
.login form input[type="text"], .login form input[type="password"] {
transition: border 1s;
outline: none;
}
.login form input:focus {
border: solid 2px var(--main_color);
outline: none;
}
.login form input[type="submit"] {
text-transform: uppercase;
transition: background 1s, color 1s;
}
.login form input[type="submit"]:hover {
background: var(--fg_color);
color: var(--bg_color);
}
.login .error {
position: relative;
text-align: center;
margin-left: auto;
margin-right: auto;
color: var(--fg_color);
border-bottom: 2px solid var(--err_color);
width: auto;
2022-06-07 06:59:41 +00:00
}
h1 {
text-align: center;
font-size: 225%;
text-transform: uppercase;
background: var(--bg_color);
2022-06-07 06:59:41 +00:00
margin: 0;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.login h1 {
background: var(--sub_color);
2022-06-07 06:59:41 +00:00
}
nav {
text-align: center;
background: var(--bg_color);
padding-top: 0.5em;
2022-06-07 06:59:41 +00:00
padding-bottom: 0.5em;
position: sticky;
top: 0px;
z-index: 3;
2022-06-07 06:59:41 +00:00
}
nav ul {
list-style: none;
padding: 0;
2022-06-07 06:59:41 +00:00
}
nav ul li {
display: inline;
margin-left: 0.5em;
margin-right: 0.5em;
}
a {
color: var(--fg_color);
2022-06-07 06:59:41 +00:00
font-weight: normal;
text-decoration: underline;
}
a:hover {
color: var(--main_color);
2022-06-07 06:59:41 +00:00
}
.new-page-button-wrapper {
display: block;
width: 80%;
max-width: 500px;
2022-06-07 06:59:41 +00:00
position: sticky;
top: 5em;
margin-left: auto;
margin-right: auto;
z-index: 2;
text-align: right;
height: 0;
overflow-y: visible;
}
.new-page-button {
position: relative;
top: 1em;
2022-06-07 06:59:41 +00:00
text-decoration: none;
background: var(--sub_color);
border: solid 2px var(--fg_color);
border-radius: 0;
2022-06-07 06:59:41 +00:00
font-size: 150%;
color: var(--fg_color);
2022-06-07 06:59:41 +00:00
padding: 0.2em;
text-transform: uppercase;
transition: background 1s, color 1s;
display: inline-block;
margin-bottom: 0.2em;
-webkit-appearance: none;
-moz-appearance: none;
2022-06-07 06:59:41 +00:00
}
.new-page-button:hover {
background: var(--fg_color);
color: var(--bg_color);
2022-06-07 06:59:41 +00:00
}
h2 {
margin: 1em;
font-size: 200%;
text-transform: uppercase;
background: var(--bg_color);
2022-06-07 06:59:41 +00:00
display: block;
border-left: 8px solid var(--main_color);
2022-06-07 06:59:41 +00:00
padding-left: 8px;
position: relative;
2022-06-07 06:59:41 +00:00
}
.page-list, form.editor, form.build, form.configurator, span.adapter-error, span.adapter-success, .file-move, .danger-zone, .uploader, .mkdir, details.ui_win {
2022-06-08 05:44:54 +00:00
display: block;
overflow-x: hidden;
2022-06-07 06:59:41 +00:00
width: 80%;
max-width: 500px;
background: var(--bg_color);
2022-06-07 06:59:41 +00:00
padding: 2em;
margin-left: auto;
margin-right: auto;
overflow-y: auto;
}
.page-list {
min-height: 5em;
}
2022-06-08 05:44:54 +00:00
span.adapter-error {
border-bottom: 2px solid var(--err_color);
2022-06-08 05:44:54 +00:00
}
form.editor label, form.build label, .danger-zone label, form.configurator label, form.file-move label, .mkdir label, .page-list label {
2022-06-07 06:59:41 +00:00
font-size: 80%;
color: var(--fg_color);
2022-06-07 06:59:41 +00:00
text-transform: uppercase;
}
form.editor input, form.build input, form.editor textarea, form.configurator input, form.configurator textarea, .danger-zone input[type="submit"], .file-move input[type="submit"], .uploader label, .uploader input[type="submit"], .mkdir input, .page-list input[type="text"], .uploader button {
2022-06-07 06:59:41 +00:00
display: block;
margin: 0;
margin-top: 0.2em;
margin-bottom: 0.2em;
background: var(--sub_color);
border: solid 2px var(--fg_color);
color: var(--fg_color);
2022-06-07 06:59:41 +00:00
padding: 0.2em;
transition: border 1s;
outline: none;
2022-06-10 06:59:34 +00:00
box-sizing: border-box;
2022-06-07 06:59:41 +00:00
}
2022-06-13 06:32:14 +00:00
.uploader label {
position:relative;
2022-06-13 06:32:14 +00:00
text-transform: uppercase;
display: inline-block;
transition: background 1s, color 1s;
z-index: 1;
2022-06-13 06:32:14 +00:00
}
#theme_cfg label.nohover, #theme_cfg label.nohover:hover {
border: none;
background: transparent;
color: var(--fg_color);
}
2022-06-13 06:32:14 +00:00
.upload-warning {
border-bottom: 2px solid var(--err_color);
2022-06-13 06:32:14 +00:00
}
form.editor input[type="text"], form.configurator input[type="text"], form.configurator input[type="number"], form.build input[type="text"], .mkdir input[type="text"] {
2022-06-07 06:59:41 +00:00
margin: 0;
width: 100%;
2022-06-08 05:44:54 +00:00
}
form.editor input.slug-input {
font-size: 100%;
}
2022-06-08 05:44:54 +00:00
form.editor input.title-input {
2022-06-07 06:59:41 +00:00
font-size: 150%;
}
2022-06-08 05:44:54 +00:00
form input:focus, form textarea:focus {
border: 2px solid var(--main_color);
2022-06-08 05:44:54 +00:00
}
2022-06-13 06:32:14 +00:00
form.editor, .wide {
max-width: 80em !important;
2022-06-07 06:59:41 +00:00
}
form.editor textarea {
margin: 0;
2022-06-08 05:44:54 +00:00
width: 100%;
2022-06-07 06:59:41 +00:00
font-size: 16px;
height: 25em;
}
2022-06-08 05:44:54 +00:00
form.configurator textarea {
margin: 0;
2022-06-08 05:44:54 +00:00
width: 100%;
height: 5em;
}
form.configurator input, form.configurator textarea {
font-size: 125%;
}
form.editor input[type="submit"], form.build input[type="submit"], .danger-zone input[type="submit"], form.configurator input[type="submit"], .file-move input[type="submit"], .uploader input[type="submit"], .mkdir input[type="submit"], .uploader button {
2022-06-07 06:59:41 +00:00
margin-left: auto;
margin-right: 0;
font-size: 150%;
text-transform: uppercase;
transition: background 1s, color 1s;
}
form.editor input[type="submit"]:hover,form.build input[type="submit"]:hover, .danger-zone input[type="submit"]:hover, form.configurator input[type="submit"]:hover, .file-move input[type="submit"]:hover, .uploader input[type="submit"]:hover, .upload-wrapper:hover label, .mkdir input[type="submit"]:hover, .uploader button:hover{
background: var(--fg_color);
color: var(--bg_color);
2022-06-07 06:59:41 +00:00
}
.edited-time {
font-size: 75%;
color: var(--fg_color);
2022-06-07 06:59:41 +00:00
float: right;
}
.page-list ul {
margin: 0;
padding: 0;
2022-06-07 06:59:41 +00:00
position: relative;
list-style: none;
z-index: 1;
}
.page-list ul li {
2022-06-07 06:59:41 +00:00
line-height: 2em;
}
.page-list ul li span.file-nolink {
color: var(--fg_color);
}
.left-pad-uplink {
padding-left: 20px;
}
2022-06-07 06:59:41 +00:00
form input[hidden] {
display: none;
2022-06-08 05:44:54 +00:00
}
form input[readonly] {
border: none;
}
.edit-error {
display: block;
border-bottom: solid 2px var(--err_color);
}
2022-06-13 06:32:14 +00:00
.file-list li a {
display: inline-block;
max-width: calc(100% - 32px);
}
.file-actions-icon {
display: inline-block;
opacity: 0;
max-height: 16px;
2022-06-13 06:32:14 +00:00
width: 16px;
}
.file-list li:hover > .file-actions-icon, .file-list li:focus-within > .file-actions-icon {
opacity: 1;
}
2022-06-13 06:32:14 +00:00
input[type="file"] {
opacity: 0;
position: absolute;
z-index: 2;
top: 5px;
height: 50px;
width: 110px;
}
#theme_cfg input[type="file"] {
2024-03-19 04:32:45 +00:00
height: 50px;
width: 100%;
}
#theme_cfg .upload-wrapper {
font-size:150%;
}
input[type="file"]:not(:valid) + .file-feedback::after {
content: "No file selected";
height: 1em;
display: block;
}
input[type="file"]:valid + .file-feedback::after {
content: "File selected";
height: 1em;
display: block;
}
.file-feedback {
z-index: 2;
}
.upload-wrapper {
position: relative;
}
.build label.bool input {
display: inline;
margin: 0.5em;
}
@media screen and (max-width: 512px) {
body {
font-size: 75%;
}
}
#theme_cfg {
display: grid;
2024-03-19 04:32:45 +00:00
grid-template-columns: 1fr 1fr;
}
input[type=range] {
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
width: 100%; /* Specific width is required for Firefox. */
background: transparent; /* Otherwise white in Chrome */
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]:focus {
outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}
input[type=range]::-ms-track {
width: 100%;
cursor: pointer;
/* Hides the slider so custom styles can be added */
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-webkit-slider-thumb {
height: 16px;
width: 16px;
border: none;
border-radius: 0px;
background: var(--main_color);
cursor: pointer;
}
/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
height: 16px;
width: 16px;
border-radius: 0px;
border: none;
background: var(--main_color);
cursor: pointer;
}
/* All the same stuff for IE */
input[type=range]::-ms-thumb {
height: 16px;
width: 16px;
border-radius: 0px;
border: none;
background: var(--main_color);
cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 16px;
cursor: pointer;
background: var(--sub_color);
border-radius: 0;
border: none;
border-top: solid 1px var(--fg_color);
}
input[type=range]::-moz-range-track {
background: var(--sub_color);
height: 16px;
border-top: solid 1px var(--fg_color);
2024-03-19 04:32:45 +00:00
}
input[type=range]:focus {
border: none;
}
input[type=range]:focus::-moz-range-track {
border-top: solid 1px var(--main_color);
}
input[type=range]:focus::-webkit-slider-runnable-track {
border-top: solid 1px var(--main_color);
}