Initial Release

2026-05-24 21:58:23 -07:00
commit 0a782e0096
209 changed files with 11657 additions and 0 deletions
@@ -0,0 +1,139 @@
+/* Modal Layout */
+div.modal-wrapper {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(29, 30, 46, .5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0;
+    transition: var(--transition-time) ease-in opacity;
+    backdrop-filter: blur(4px);
+}
+
+div.modal-content {
+    min-width: 600px;
+    max-width: 600px;
+    border-radius: 16px;
+    padding: 24px 16px;
+    box-sizing: border-box;
+    border: 2px solid var(--background-layer-1);
+    background-color: var(--background-layer-5);
+    overflow: hidden;
+    display: flex;
+    gap: 24px;
+}
+
+div.modal-view {
+    height: fit-content;
+    min-width: 100%;
+}
+
+div.modal-elements {
+    display: grid;
+}
+
+div.modal-footer {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+div.modal-divider {
+    margin: 8px 0;
+    height: 2px;
+    width: 100%;
+    background-color: var(--background-layer-1);
+}
+
+div.modal-spacer {
+    height: 16px;
+}
+
+div.modal-flex {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+}
+
+/* Modal Elements */
+p.modal-alert {
+    color: var(--text-error-1);
+    text-overflow: ellipsis;
+    font-style: italic;
+    font-weight: bolder;
+    white-space: nowrap;
+    overflow: hidden;
+    flex-basis: 100%;
+}
+
+p.modal-headline {
+    font-weight: 600;
+    font-size: xx-large;
+    color: var(--background-layer-0);
+    line-height: 1;
+    padding-top: 0;
+}
+
+p.modal-header {
+    color: var(--background-layer-0);
+    font-size: large;
+    font-weight: 600;
+}
+
+p.modal-link-text {
+    font-size: small;
+}
+
+a.modal-link,
+p.modal-link {
+    font-size: small;
+    font-style: italic;
+    width: fit-content;
+}
+
+a.modal-link:hover,
+a.modal-link:focus-visible {
+    color: var(--background-layer-0);
+}
+
+
+label.modal-label {
+    font-size: small;
+}
+
+label.modal-label[error] {
+    font-style: italic;
+    color: var(--text-error-1);
+}
+
+input.modal-input[type=text],
+input.modal-input[type=password] {
+    border-radius: 4px;
+    padding: 4px 8px;
+    outline: none;
+    border: none;
+    cursor: pointer;
+    color: var(--text-layer-1);
+    background-color: var(--background-layer-3);
+    border: 2px solid var(--background-layer-1);
+    transition: var(--transition-time) ease-in-out all;
+}
+
+input.modal-input[type=text]:focus-visible,
+input.modal-input[type=password]:focus-visible {
+    border-color: var(--background-layer-0);
+}
+
+
+
+/* Mobile Styling */
+@media (max-width: 640px) {
+    div.modal-content {
+        min-width: 0;
+        max-width: 100%;
+        margin: 0 8px;
+    }
+}