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, 280 insertions, 0 deletions
diff --git a/public/css/index.css b/public/css/index.css
new file mode 100644
index 0000000..db341af
--- /dev/null
+++ b/public/css/index.css
@@ -0,0 +1,280 @@
+* {
+ --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;
+ }
+}
+
+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);
+}
+
+body {
+ 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;
+}
+
+form label {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.form-row {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}
+
+input, textarea {
+ 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 {
+ 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 10:39:24 +0300