summaryrefslogtreecommitdiff
path: root/public/css/index.css
diff options
context:
space:
mode:
Diffstat (limited to 'public/css/index.css')
-rw-r--r--public/css/index.css280
1 files changed, 11 insertions, 269 deletions
diff --git a/public/css/index.css b/public/css/index.css
index a304ed4..e50cd61 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -1,280 +1,22 @@
-* {
- --active: rgb(43, 43, 48);
- --active-inner: #f3f3f3;
- --focus: 2px rgba(39, 94, 254, .3);
- --border: #a3a3a3;
- --border-hover: #f3f3f3;
- --background: rgb(255, 255, 255);
- --background-secondary: rgb(230, 230, 230);
- --disabled: rgb(43, 43, 48);
- --disabled-inner: #rgb(43, 43, 48);
- --text: #000;
-}
-
-@media (prefers-color-scheme: dark) {
- * {
- --active: rgb(43, 43, 48);
- --active-inner: #f3f3f3;
- --focus: 2px rgba(39, 94, 254, .3);
- --border: #f3f3f3;
- --border-hover: #f3f3f3;
- --background: rgb(31, 32, 39);
- --background-secondary: rgb(43, 43, 48);
- --disabled: rgb(43, 43, 48);
- --disabled-inner: #rgb(43, 43, 48);
- --text: #f3f3f3;
+/* @media (prefers-color-scheme: dark) {
+ html, body>header, body>footer, .invert {
+ filter: invert(1) hue-rotate(180deg);
}
-}
-
-html, body {
- padding: 0;
- margin: 0;
- background-color: var(--background);
- color: var(--text);
- font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
- font-size: 16px;
-}
-
-.turbolinks-progress-bar {
- height: 5px;
- background-color: rgb(52, 52, 175);
-}
-
-a, a:hover, a:active, a:visited {
- color: var(--text);
-}
+ img:not([src*=".svg"]), .dropimage {
+ filter: invert(1) hue-rotate(180deg) saturate(30%);
+ }
+} */
-body {
+.content {
padding-top: 60px;
}
-header {
- position: fixed;
- top: 0;
- left: 0;
- height: 50px;
- width: 100%;
- border-bottom: 1px solid var(--border);
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- background-color: var(--background);
-}
-
-hr {
- width: auto;
- border-top: 0;
- border-bottom: 1px solid var(--border);
- margin: 16px 8px;
-}
-
-h1 {
- margin: 16px 8px;
- padding-bottom: 8px;
- border-bottom: 1px solid var(--border);
-}
-
-#header-logo {
- display: block;
- padding: 16px;
- text-decoration: none;
- font-family: 'Courier New', Courier, monospace;
- cursor: pointer;
-}
-
-.header-menu {
- list-style: none;
- display: flex;
- flex-direction: row;
-}
-
-.header-menu .header-menu--item {
- transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
- display: inline-block;
- padding: 16px;
- text-decoration: none;
-}
-
-.header-menu .header-menu--item:hover {
- background-color: var(--background-secondary);
-}
-
-.layout-center {
- display: flex;
- flex-direction: row;
- justify-content: space-around;
-}
-
-form {
- display: flex;
- flex-direction: column;
- /* max-width: 50vh; */
- width: 600px;
- border: 1px solid var(--border);
- border-radius: 8px;
- padding: 16px;
-}
-
-form .required {
- font-size: 14px;
- font-style: italic;
- color: rgb(255, 100, 100);
- align-self: flex-end;
-}
-
-form .optional {
- font-size: 14px;
- font-style: italic;
- align-self: flex-end;
+.required {
+ text-align: right;
}
-form label {
+label.row {
display: flex;
flex-direction: row;
justify-content: space-between;
- align-items: center;
-}
-
-.form-row {
- display: flex;
- flex-direction: row;
- align-items: center;
-}
-
-input, textarea, button {
- background-color: var(--background-secondary);
- color: var(--text);
- border: 1px solid var(--border);
- padding: 8px;
- margin: 8px;
- border-radius: 4px;
-}
-
-textarea {
- resize: vertical;
-}
-
-label {
- padding: 8px;
-}
-
-input:active, textarea:active, button:active {
- background-color: rgb(33, 33, 38);
-}
-
-@supports (-webkit-appearance: none) or (-moz-appearance: none) {
- input[type=checkbox], input[type=radio] {
- -webkit-appearance: none;
- -moz-appearance: none;
- height: 21px;
- outline: none;
- display: inline-block;
- vertical-align: top;
- position: relative;
- margin: 0 8px 0 0;
- cursor: pointer;
- border: 1px solid var(--bc, var(--border));
- background: var(--b, var(--background-secondary));
- transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
- }
- input[type=checkbox]:after, input[type=radio]:after {
- content: "";
- display: block;
- left: 0;
- top: 0;
- position: absolute;
- transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
- }
- input[type=checkbox]:checked, input[type=radio]:checked {
- --b: var(--active);
- --bc: var(--active);
- --d-o: .3s;
- --d-t: .6s;
- --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
- }
- input[type=checkbox]:disabled, input[type=radio]:disabled {
- --b: var(--disabled);
- cursor: not-allowed;
- opacity: 0.9;
- }
- input[type=checkbox]:disabled:checked, input[type=radio]:disabled:checked {
- --b: var(--disabled-inner);
- --bc: var(--border);
- }
- input[type=checkbox]:disabled+label, input[type=radio]:disabled+label {
- cursor: not-allowed;
- }
- input[type=checkbox]:hover:not(:checked):not(:disabled), input[type=radio]:hover:not(:checked):not(:disabled) {
- --bc: var(--border-hover);
- }
- input[type=checkbox]:focus, input[type=radio]:focus {
- box-shadow: 0 0 0 var(--focus);
- }
- input[type=checkbox]:not(.switch), input[type=radio]:not(.switch) {
- width: 21px;
- }
- input[type=checkbox]:not(.switch):after, input[type=radio]:not(.switch):after {
- opacity: var(--o, 0);
- }
- input[type=checkbox]:not(.switch):checked, input[type=radio]:not(.switch):checked {
- --o: 1;
- }
- input[type=checkbox]+label, input[type=radio]+label {
- font-size: 14px;
- line-height: 21px;
- display: inline-block;
- vertical-align: top;
- cursor: pointer;
- margin-left: 4px;
- }
- input[type=checkbox]:not(.switch) {
- border-radius: 7px;
- }
- input[type=checkbox]:not(.switch):after {
- width: 5px;
- height: 9px;
- border: 2px solid var(--active-inner);
- border-top: 0;
- border-left: 0;
- left: 7px;
- top: 4px;
- transform: rotate(var(--r, 20deg));
- }
- input[type=checkbox]:not(.switch):checked {
- --r: 43deg;
- }
- input[type=checkbox].switch {
- width: 38px;
- border-radius: 11px;
- }
- input[type=checkbox].switch:after {
- left: 2px;
- top: 2px;
- border-radius: 50%;
- width: 15px;
- height: 15px;
- background: var(--ab, var(--border));
- transform: translateX(var(--x, 0));
- }
- input[type=checkbox].switch:checked {
- --ab: var(--active-inner);
- --x: 17px;
- }
- input[type=checkbox].switch:disabled:not(:checked):after {
- opacity: 0.6;
- }
- input[type=radio] {
- border-radius: 50%;
- }
- input[type=radio]:after {
- width: 19px;
- height: 19px;
- border-radius: 50%;
- background: var(--active-inner);
- opacity: 0;
- transform: scale(var(--s, 0.7));
- }
- input[type=radio]:checked {
- --s: .5;
- }
}
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-18 11:04:26 +0300