diff --git a/internal/api/urls.go b/internal/api/links.go similarity index 89% rename from internal/api/urls.go rename to internal/api/links.go index bbd46c8..e264eb1 100644 --- a/internal/api/urls.go +++ b/internal/api/links.go @@ -1,6 +1,7 @@ package api import ( + "codeberg.org/lauralani/go-urlsh/internal/db" "codeberg.org/lauralani/go-urlsh/internal/misc" "codeberg.org/lauralani/go-urlsh/models" "context" @@ -31,7 +32,11 @@ func HandleLinkGet(c *fiber.Ctx) error { } func HandleLinkPost(c *fiber.Ctx) error { - // TODO: Add Auth + if !db.IsCookieValid(c.Cookies(misc.CookieName, "")) { + return fiber.NewError(fiber.StatusUnauthorized, "401 Unauthorized") + } + + // TODO: Add API-Key Auth var newlink models.Link err := json.Unmarshal(c.Body(), &newlink) @@ -55,7 +60,7 @@ func HandleLinkPost(c *fiber.Ctx) error { } c.Append("Location", c.BaseURL()+"/api/v1/links/"+newlink.ID) - c.Status(200) + c.Status(fiber.StatusCreated) c.JSON(newlink) return nil diff --git a/internal/app/fiber.go b/internal/app/fiber.go index ffc9768..7d76015 100644 --- a/internal/app/fiber.go +++ b/internal/app/fiber.go @@ -54,6 +54,8 @@ func SetupFiber() error { fiberapp.Get("/admin/login", web.HandleAdminLoginGet) fiberapp.Post("/admin/login", web.HandleAdminLoginPost) + fiberapp.Get("/admin/link/add", web.HandleAdminLinkAddGet) + fiberapp.Static("/admin/", "./web") v1 := fiberapp.Group("/api/v1") diff --git a/internal/db/cookie.go b/internal/db/cookie.go index 68f1ef1..0728e5f 100644 --- a/internal/db/cookie.go +++ b/internal/db/cookie.go @@ -10,6 +10,10 @@ import ( // // Returns true if it's valid, false if not. func IsCookieValid(val string) bool { + if val == "" { + return false + } + count, err := models.DB.NewSelect().Model((*models.Login)(nil)).Where("cookie = ?", val).Count(context.Background()) if err != nil { log.Printf("Error checking cookie validity for cookie %v\n", val) diff --git a/internal/misc/constants.go b/internal/misc/constants.go new file mode 100644 index 0000000..68b5caf --- /dev/null +++ b/internal/misc/constants.go @@ -0,0 +1,3 @@ +package misc + +var CookieName = "gourlsh_auth" diff --git a/internal/web/link.go b/internal/web/link.go new file mode 100644 index 0000000..4b9aad1 --- /dev/null +++ b/internal/web/link.go @@ -0,0 +1,7 @@ +package web + +import "github.com/gofiber/fiber/v2" + +func HandleAdminLinkAddGet(c *fiber.Ctx) error { + return c.Render("add_link", nil) +} diff --git a/internal/web/login.go b/internal/web/login.go index 7ad6148..cddd255 100644 --- a/internal/web/login.go +++ b/internal/web/login.go @@ -1,6 +1,7 @@ package web import ( + "codeberg.org/lauralani/go-urlsh/internal/misc" "codeberg.org/lauralani/go-urlsh/models" "context" "crypto/sha256" @@ -33,27 +34,27 @@ func HandleAdminLoginPost(c *fiber.Ctx) error { expires := time.Now().Add(30 * 24 * time.Hour) key := uuid.New().String() - login := new(models.Login) + dblogin := new(models.Login) cookie := new(fiber.Cookie) - cookie.Name = "gourlsh_auth" + cookie.Name = misc.CookieName cookie.Value = key cookie.Expires = expires - login.Expires = expires - login.Cookie = key - login.UserName = user.UserName + dblogin.Expires = expires + dblogin.Cookie = key + dblogin.UserName = user.UserName - _, err = models.DB.NewInsert().Model(login).Exec(context.Background()) + _, err = models.DB.NewInsert().Model(dblogin).Exec(context.Background()) if err != nil { - log.Printf("DB Error inserting login cookie information for user %v: %v\n", login.UserName, err.Error()) + log.Printf("DB Error inserting login cookie information for user %v: %v\n", dblogin.UserName, err.Error()) return fiber.NewError(fiber.StatusInternalServerError, "500 Internal Server Error") } user.LastLogin = time.Now() _, err = models.DB.NewUpdate().Model(&user).WherePK().Exec(context.Background()) if err != nil { - log.Printf("DB Error updating last login information for user %v: %v\n", login.UserName, err.Error()) + log.Printf("DB Error updating last login information for user %v: %v\n", dblogin.UserName, err.Error()) return fiber.NewError(fiber.StatusInternalServerError, "500 Internal Server Error") } c.Cookie(cookie) diff --git a/internal/web/root.go b/internal/web/root.go index 1d15afc..3afa4e2 100644 --- a/internal/web/root.go +++ b/internal/web/root.go @@ -2,11 +2,12 @@ package web import ( "codeberg.org/lauralani/go-urlsh/internal/db" + "codeberg.org/lauralani/go-urlsh/internal/misc" "github.com/gofiber/fiber/v2" ) func HandleAdminRootGet(c *fiber.Ctx) error { - cookie := c.Cookies("gourlsh_auth") + cookie := c.Cookies(misc.CookieName) if cookie == "" { c.Location("/admin/login") c.Status(fiber.StatusSeeOther) @@ -20,7 +21,7 @@ func HandleAdminRootGet(c *fiber.Ctx) error { "Plat": "almost", }) } else { - c.ClearCookie("gourlsh_auth") + c.ClearCookie(misc.CookieName) c.Location("/admin/login") c.Status(fiber.StatusSeeOther) return nil diff --git a/views/add_link.tmpl b/views/add_link.tmpl new file mode 100644 index 0000000..2b1e757 --- /dev/null +++ b/views/add_link.tmpl @@ -0,0 +1,49 @@ + + + + + + Add new Shortlink - go-urlsh + + + + + +
+
+ Add a new Shortlink +

* shows a required field

+ + + + + + + + + + +
+ + +

+

+ + + +
+ + + + + + + + + + \ No newline at end of file diff --git a/views/login.tmpl b/views/login.tmpl index 64df865..ecb26ad 100644 --- a/views/login.tmpl +++ b/views/login.tmpl @@ -1,11 +1,11 @@ - + Page Title - +

Form elements

@@ -14,7 +14,7 @@ - + diff --git a/web/add_link.html b/web/add_link.html new file mode 100644 index 0000000..e48d181 --- /dev/null +++ b/web/add_link.html @@ -0,0 +1,49 @@ + + + + + + Add new Shortlink - go-urlsh + + + + + +
+
+ Add a new Shortlink +

* shows a required field

+ + + + + + + + + + +
+ + +

+

+ + + +
+ + + + + + + + + + \ No newline at end of file diff --git a/web/index.html b/web/index.html index e69de29..56f4cb6 100644 --- a/web/index.html +++ b/web/index.html @@ -0,0 +1,22 @@ + + + + + + Page Title + + + + +

Form elements

+
+ + + + + + + +
+ + \ No newline at end of file diff --git a/web/links.js b/web/links.js new file mode 100644 index 0000000..bbe2b7c --- /dev/null +++ b/web/links.js @@ -0,0 +1,36 @@ +async function HandleSubmit() { + document.getElementById("submit").active = false + let slug = document.getElementById("linkname").value + let url = document.getElementById("link").value + let description = document.getElementById("description").value + let body = { + "id" : slug, + "url" : url, + "description" : description + } + + let response = await fetch("/api/v1/links", { + credentials: "include", + body: JSON.stringify(body), + mode: "same-origin", + method: "POST" + }); + + if (!response.ok) { + document.getElementById("dialog-heading").textContent = "Error" + document.getElementById("dialog-text").textContent = "The following error occured during the request: " + response.statusText + document.getElementById('dialog-info').showModal() + + document.getElementById("submit").active = true + } +} + +async function HandleChange() { + console.log("HandleChange") + let buttonactive = true + if (document.getElementById("link").value === "") + { + buttonactive = false + } + document.getElementById("submit").active = buttonactive +} \ No newline at end of file diff --git a/web/simple.min.css b/web/simple.min.css new file mode 100644 index 0000000..3f555ef --- /dev/null +++ b/web/simple.min.css @@ -0,0 +1 @@ +::backdrop,:root{--sans-font:-apple-system,BlinkMacSystemFont,"Avenir Next",Avenir,"Nimbus Sans L",Roboto,"Noto Sans","Segoe UI",Arial,Helvetica,"Helvetica Neue",sans-serif;--mono-font:Consolas,Menlo,Monaco,"Andale Mono","Ubuntu Mono",monospace;--standard-border-radius:5px;--bg:#fff;--accent-bg:#f5f7ff;--text:#212121;--text-light:#585858;--border:#898EA4;--accent:#0d47a1;--code:#d81b60;--preformatted:#444;--marked:#ffdd33;--disabled:#efefef}@media (prefers-color-scheme:dark){::backdrop,:root{color-scheme:dark;--bg:#212121;--accent-bg:#2b2b2b;--text:#dcdcdc;--text-light:#ababab;--accent:#ffb300;--code:#f06292;--preformatted:#ccc;--disabled:#111}img,video{opacity:.8}}*,::after,::before{box-sizing:border-box}input,progress,select,textarea{appearance:none;-webkit-appearance:none;-moz-appearance:none}html{font-family:var(--sans-font);scroll-behavior:smooth}body{color:var(--text);background-color:var(--bg);font-size:1.15rem;line-height:1.5;display:grid;grid-template-columns:1fr min(45rem,90%) 1fr;margin:0}body>*{grid-column:2}body>header{background-color:var(--accent-bg);border-bottom:1px solid var(--border);text-align:center;padding:0 .5rem 2rem .5rem;grid-column:1/-1}body>header h1{max-width:1200px;margin:1rem auto}body>header p{max-width:40rem;margin:1rem auto}main{padding-top:1.5rem}body>footer{margin-top:4rem;padding:2rem 1rem 1.5rem 1rem;color:var(--text-light);font-size:.9rem;text-align:center;border-top:1px solid var(--border)}h1{font-size:3rem}h2{font-size:2.6rem;margin-top:3rem}h3{font-size:2rem;margin-top:3rem}h4{font-size:1.44rem}h5{font-size:1.15rem}h6{font-size:.96rem}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}h1,h2,h3{line-height:1.1}@media only screen and (max-width:720px){h1{font-size:2.5rem}h2{font-size:2.1rem}h3{font-size:1.75rem}h4{font-size:1.25rem}}a,a:visited{color:var(--accent)}a:hover{text-decoration:none}[role=button],button,input[type=button],input[type=reset],input[type=submit],label[type=button]{border:none;border-radius:var(--standard-border-radius);background-color:var(--accent);font-size:1rem;color:var(--bg);padding:.7rem .9rem;margin:.5rem 0}[role=button][aria-disabled=true],button[disabled],input[type=button][disabled],input[type=checkbox][disabled],input[type=radio][disabled],input[type=reset][disabled],input[type=submit][disabled],select[disabled]{cursor:not-allowed}button[disabled],input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--disabled);color:var(--text-light)}input[type=range]{padding:0}abbr[title]{cursor:help;text-decoration-line:underline;text-decoration-style:dotted}[role=button]:not([aria-disabled=true]):hover,button:enabled:hover,input[type=button]:enabled:hover,input[type=reset]:enabled:hover,input[type=submit]:enabled:hover,label[type=button]:hover{filter:brightness(1.4);cursor:pointer}button:focus-visible:where(:enabled,[role=button]:not([aria-disabled=true])),input:enabled:focus-visible:where([type=submit],[type=reset],[type=button]){outline:2px solid var(--accent);outline-offset:1px}header>nav{font-size:1rem;line-height:2;padding:1rem 0 0 0}header>nav ol,header>nav ul{align-content:space-around;align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;list-style-type:none;margin:0;padding:0}header>nav ol li,header>nav ul li{display:inline-block}header>nav a,header>nav a:visited{margin:0 .5rem 1rem .5rem;border:1px solid var(--border);border-radius:var(--standard-border-radius);color:var(--text);display:inline-block;padding:.1rem 1rem;text-decoration:none}header>nav a:hover{border-color:var(--accent);color:var(--accent);cursor:pointer}@media only screen and (max-width:720px){header>nav a{border:none;padding:0;text-decoration:underline;line-height:1}}aside,details,pre,progress{background-color:var(--accent-bg);border:1px solid var(--border);border-radius:var(--standard-border-radius);margin-bottom:1rem}aside{font-size:1rem;width:30%;padding:0 15px;margin-left:15px;float:right}@media only screen and (max-width:720px){aside{width:100%;float:none;margin-left:0}}article,dialog,fieldset{border:1px solid var(--border);padding:1rem;border-radius:var(--standard-border-radius);margin-bottom:1rem}article h2:first-child,section h2:first-child{margin-top:1rem}section{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:2rem 1rem;margin:3rem 0}section+section,section:first-child{border-top:0;padding-top:0}section:last-child{border-bottom:0;padding-bottom:0}details{padding:.7rem 1rem}summary{cursor:pointer;font-weight:700;padding:.7rem 1rem;margin:-.7rem -1rem;word-break:break-all}details[open]>summary+*{margin-top:0}details[open]>summary{margin-bottom:.5rem}details[open]>:last-child{margin-bottom:0}table{border-collapse:collapse;margin:1.5rem 0}td,th{border:1px solid var(--border);text-align:left;padding:.5rem}th{background-color:var(--accent-bg);font-weight:700}tr:nth-child(even){background-color:var(--accent-bg)}table caption{font-weight:700;margin-bottom:.5rem}input,select,textarea{font-size:inherit;font-family:inherit;padding:.5rem;margin-bottom:.5rem;color:var(--text);background-color:var(--bg);border:1px solid var(--border);border-radius:var(--standard-border-radius);box-shadow:none;max-width:100%;display:inline-block}label{display:block}textarea:not([cols]){width:100%}select:not([multiple]){background-image:linear-gradient(45deg,transparent 49%,var(--text) 51%),linear-gradient(135deg,var(--text) 51%,transparent 49%);background-position:calc(100% - 15px),calc(100% - 10px);background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:25px}input[type=checkbox],input[type=radio]{vertical-align:middle;position:relative;width:min-content}input[type=checkbox]+label,input[type=radio]+label{display:inline-block}input[type=radio]{border-radius:100%}input[type=checkbox]:checked,input[type=radio]:checked{background-color:var(--accent)}input[type=checkbox]:checked::after{content:" ";width:.18em;height:.32em;border-radius:0;position:absolute;top:.05em;left:.17em;background-color:transparent;border-right:solid var(--bg) .08em;border-bottom:solid var(--bg) .08em;font-size:1.8em;transform:rotate(45deg)}input[type=radio]:checked::after{content:" ";width:.25em;height:.25em;border-radius:100%;position:absolute;top:.125em;background-color:var(--bg);left:.125em;font-size:32px}@media only screen and (max-width:720px){input,select,textarea{width:100%}}input[type=color]{height:2.5rem;padding:.2rem}input[type=file]{border:0}hr{border:none;height:1px;background:var(--border);margin:1rem auto}mark{padding:2px 5px;border-radius:var(--standard-border-radius);background-color:var(--marked);color:#000}img,video{max-width:100%;height:auto;border-radius:var(--standard-border-radius)}figure{margin:0;display:block;overflow-x:auto}figcaption{text-align:center;font-size:.9rem;color:var(--text-light);margin-bottom:1rem}blockquote{margin:2rem 0 2rem 2rem;padding:.4rem .8rem;border-left:.35rem solid var(--accent);color:var(--text-light);font-style:italic}cite{font-size:.9rem;color:var(--text-light);font-style:normal}dt{color:var(--text-light)}code,kbd,pre,pre span,samp{font-family:var(--mono-font);color:var(--code)}kbd{color:var(--preformatted);border:1px solid var(--preformatted);border-bottom:3px solid var(--preformatted);border-radius:var(--standard-border-radius);padding:.1rem .4rem}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto;color:var(--preformatted)}pre code{color:var(--preformatted);background:0 0;margin:0;padding:0}progress{width:100%}progress:indeterminate{background-color:var(--accent-bg)}progress::-webkit-progress-bar{border-radius:var(--standard-border-radius);background-color:var(--accent-bg)}progress::-webkit-progress-value{border-radius:var(--standard-border-radius);background-color:var(--accent)}progress::-moz-progress-bar{border-radius:var(--standard-border-radius);background-color:var(--accent);transition-property:width;transition-duration:.3s}progress:indeterminate::-moz-progress-bar{background-color:var(--accent-bg)}dialog{max-width:40rem;margin:auto}dialog::backdrop{background-color:var(--bg);opacity:.8}@media only screen and (max-width:720px){dialog{max-width:100%;margin:auto 1em}}.button,.button:visited{display:inline-block;text-decoration:none;border:none;border-radius:5px;background:var(--accent);font-size:1rem;color:var(--bg);padding:.7rem .9rem;margin:.5rem 0}.button:focus,.button:hover{filter:brightness(1.4);cursor:pointer}.notice{background:var(--accent-bg);border:2px solid var(--border);border-radius:5px;padding:1.5rem;margin:2rem 0} \ No newline at end of file diff --git a/web/water.css b/web/water.css deleted file mode 100644 index d5c741d..0000000 --- a/web/water.css +++ /dev/null @@ -1,1689 +0,0 @@ -/** - * Automatic version: - * Uses light theme by default but switches to dark theme - * if a system-wide theme preference is set on the user's device. - */ - -:root { - --background-body: #fff; - --background: #efefef; - --background-alt: #f7f7f7; - --selection: #9e9e9e; - --text-main: #363636; - --text-bright: #000; - --text-muted: #70777f; - --links: #0076d1; - --focus: #0096bfab; - --border: #dbdbdb; - --code: #000; - --animation-duration: 0.1s; - --button-base: #d0cfcf; - --button-hover: #9b9b9b; - --scrollbar-thumb: rgb(170, 170, 170); - --scrollbar-thumb-hover: var(--button-hover); - --form-placeholder: #949494; - --form-text: #1d1d1d; - --variable: #39a33c; - --highlight: #ff0; - --select-arrow: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23161f27'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E"); -} - -@media (prefers-color-scheme: dark) { -:root { - --background-body: #202b38; - --background: #161f27; - --background-alt: #1a242f; - --selection: #1c76c5; - --text-main: #dbdbdb; - --text-bright: #fff; - --text-muted: #a9b1ba; - --links: #41adff; - --focus: #0096bfab; - --border: #526980; - --code: #ffbe85; - --animation-duration: 0.1s; - --button-base: #0c151c; - --button-hover: #040a0f; - --scrollbar-thumb: var(--button-hover); - --scrollbar-thumb-hover: rgb(0, 0, 0); - --form-placeholder: #a9a9a9; - --form-text: #fff; - --variable: #d941e2; - --highlight: #efdb43; - --select-arrow: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23efefef'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E"); -} -} - -html { - scrollbar-color: rgb(170, 170, 170) #fff; - scrollbar-color: var(--scrollbar-thumb) var(--background-body); - scrollbar-width: thin; -} - -@media (prefers-color-scheme: dark) { - - html { - scrollbar-color: #040a0f #202b38; - scrollbar-color: var(--scrollbar-thumb) var(--background-body); - } -} - -@media (prefers-color-scheme: dark) { - - html { - scrollbar-color: #040a0f #202b38; - scrollbar-color: var(--scrollbar-thumb) var(--background-body); - } -} - -@media (prefers-color-scheme: dark) { - - html { - scrollbar-color: #040a0f #202b38; - scrollbar-color: var(--scrollbar-thumb) var(--background-body); - } -} - -@media (prefers-color-scheme: dark) { - - html { - scrollbar-color: #040a0f #202b38; - scrollbar-color: var(--scrollbar-thumb) var(--background-body); - } -} - -@media (prefers-color-scheme: dark) { - - html { - scrollbar-color: #040a0f #202b38; - scrollbar-color: var(--scrollbar-thumb) var(--background-body); - } -} - -@media (prefers-color-scheme: dark) { - - html { - scrollbar-color: #040a0f #202b38; - scrollbar-color: var(--scrollbar-thumb) var(--background-body); - } -} - -body { - font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; - line-height: 1.4; - max-width: 800px; - margin: 20px auto; - padding: 0 10px; - word-wrap: break-word; - color: #363636; - color: var(--text-main); - background: #fff; - background: var(--background-body); - text-rendering: optimizeLegibility; -} - -@media (prefers-color-scheme: dark) { - - body { - background: #202b38; - background: var(--background-body); - } -} - -@media (prefers-color-scheme: dark) { - - body { - color: #dbdbdb; - color: var(--text-main); - } -} - -button { - transition: - background-color 0.1s linear, - border-color 0.1s linear, - color 0.1s linear, - box-shadow 0.1s linear, - transform 0.1s ease; - transition: - background-color var(--animation-duration) linear, - border-color var(--animation-duration) linear, - color var(--animation-duration) linear, - box-shadow var(--animation-duration) linear, - transform var(--animation-duration) ease; -} - -@media (prefers-color-scheme: dark) { - - button { - transition: - background-color 0.1s linear, - border-color 0.1s linear, - color 0.1s linear, - box-shadow 0.1s linear, - transform 0.1s ease; - transition: - background-color var(--animation-duration) linear, - border-color var(--animation-duration) linear, - color var(--animation-duration) linear, - box-shadow var(--animation-duration) linear, - transform var(--animation-duration) ease; - } -} - -input { - transition: - background-color 0.1s linear, - border-color 0.1s linear, - color 0.1s linear, - box-shadow 0.1s linear, - transform 0.1s ease; - transition: - background-color var(--animation-duration) linear, - border-color var(--animation-duration) linear, - color var(--animation-duration) linear, - box-shadow var(--animation-duration) linear, - transform var(--animation-duration) ease; -} - -@media (prefers-color-scheme: dark) { - - input { - transition: - background-color 0.1s linear, - border-color 0.1s linear, - color 0.1s linear, - box-shadow 0.1s linear, - transform 0.1s ease; - transition: - background-color var(--animation-duration) linear, - border-color var(--animation-duration) linear, - color var(--animation-duration) linear, - box-shadow var(--animation-duration) linear, - transform var(--animation-duration) ease; - } -} - -textarea { - transition: - background-color 0.1s linear, - border-color 0.1s linear, - color 0.1s linear, - box-shadow 0.1s linear, - transform 0.1s ease; - transition: - background-color var(--animation-duration) linear, - border-color var(--animation-duration) linear, - color var(--animation-duration) linear, - box-shadow var(--animation-duration) linear, - transform var(--animation-duration) ease; -} - -@media (prefers-color-scheme: dark) { - - textarea { - transition: - background-color 0.1s linear, - border-color 0.1s linear, - color 0.1s linear, - box-shadow 0.1s linear, - transform 0.1s ease; - transition: - background-color var(--animation-duration) linear, - border-color var(--animation-duration) linear, - color var(--animation-duration) linear, - box-shadow var(--animation-duration) linear, - transform var(--animation-duration) ease; - } -} - -h1 { - font-size: 2.2em; - margin-top: 0; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - margin-bottom: 12px; - margin-top: 24px; -} - -h1 { - color: #000; - color: var(--text-bright); -} - -@media (prefers-color-scheme: dark) { - - h1 { - color: #fff; - color: var(--text-bright); - } -} - -h2 { - color: #000; - color: var(--text-bright); -} - -@media (prefers-color-scheme: dark) { - - h2 { - color: #fff; - color: var(--text-bright); - } -} - -h3 { - color: #000; - color: var(--text-bright); -} - -@media (prefers-color-scheme: dark) { - - h3 { - color: #fff; - color: var(--text-bright); - } -} - -h4 { - color: #000; - color: var(--text-bright); -} - -@media (prefers-color-scheme: dark) { - - h4 { - color: #fff; - color: var(--text-bright); - } -} - -h5 { - color: #000; - color: var(--text-bright); -} - -@media (prefers-color-scheme: dark) { - - h5 { - color: #fff; - color: var(--text-bright); - } -} - -h6 { - color: #000; - color: var(--text-bright); -} - -@media (prefers-color-scheme: dark) { - - h6 { - color: #fff; - color: var(--text-bright); - } -} - -strong { - color: #000; - color: var(--text-bright); -} - -@media (prefers-color-scheme: dark) { - - strong { - color: #fff; - color: var(--text-bright); - } -} - -h1, -h2, -h3, -h4, -h5, -h6, -b, -strong, -th { - font-weight: 600; -} - -q::before { - content: none; -} - -q::after { - content: none; -} - -blockquote { - border-left: 4px solid #0096bfab; - border-left: 4px solid var(--focus); - margin: 1.5em 0; - padding: 0.5em 1em; - font-style: italic; -} - -@media (prefers-color-scheme: dark) { - - blockquote { - border-left: 4px solid #0096bfab; - border-left: 4px solid var(--focus); - } -} - -q { - border-left: 4px solid #0096bfab; - border-left: 4px solid var(--focus); - margin: 1.5em 0; - padding: 0.5em 1em; - font-style: italic; -} - -@media (prefers-color-scheme: dark) { - - q { - border-left: 4px solid #0096bfab; - border-left: 4px solid var(--focus); - } -} - -blockquote > footer { - font-style: normal; - border: 0; -} - -blockquote cite { - font-style: normal; -} - -address { - font-style: normal; -} - -a[href^='mailto\:']::before { - content: '📧 '; -} - -a[href^='tel\:']::before { - content: '📞 '; -} - -a[href^='sms\:']::before { - content: '💬 '; -} - -mark { - background-color: #ff0; - background-color: var(--highlight); - border-radius: 2px; - padding: 0 2px 0 2px; - color: #000; -} - -@media (prefers-color-scheme: dark) { - - mark { - background-color: #efdb43; - background-color: var(--highlight); - } -} - -a > code, -a > strong { - color: inherit; -} - -button, -select, -input[type='submit'], -input[type='reset'], -input[type='button'], -input[type='checkbox'], -input[type='range'], -input[type='radio'] { - cursor: pointer; -} - -input, -select { - display: block; -} - -[type='checkbox'], -[type='radio'] { - display: initial; -} - -input { - color: #1d1d1d; - color: var(--form-text); - background-color: #efefef; - background-color: var(--background); - font-family: inherit; - font-size: inherit; - margin-right: 6px; - margin-bottom: 6px; - padding: 10px; - border: none; - border-radius: 6px; - outline: none; -} - -@media (prefers-color-scheme: dark) { - - input { - background-color: #161f27; - background-color: var(--background); - } -} - -@media (prefers-color-scheme: dark) { - - input { - color: #fff; - color: var(--form-text); - } -} - -button { - color: #1d1d1d; - color: var(--form-text); - background-color: #efefef; - background-color: var(--background); - font-family: inherit; - font-size: inherit; - margin-right: 6px; - margin-bottom: 6px; - padding: 10px; - border: none; - border-radius: 6px; - outline: none; -} - -@media (prefers-color-scheme: dark) { - - button { - background-color: #161f27; - background-color: var(--background); - } -} - -@media (prefers-color-scheme: dark) { - - button { - color: #fff; - color: var(--form-text); - } -} - -textarea { - color: #1d1d1d; - color: var(--form-text); - background-color: #efefef; - background-color: var(--background); - font-family: inherit; - font-size: inherit; - margin-right: 6px; - margin-bottom: 6px; - padding: 10px; - border: none; - border-radius: 6px; - outline: none; -} - -@media (prefers-color-scheme: dark) { - - textarea { - background-color: #161f27; - background-color: var(--background); - } -} - -@media (prefers-color-scheme: dark) { - - textarea { - color: #fff; - color: var(--form-text); - } -} - -select { - color: #1d1d1d; - color: var(--form-text); - background-color: #efefef; - background-color: var(--background); - font-family: inherit; - font-size: inherit; - margin-right: 6px; - margin-bottom: 6px; - padding: 10px; - border: none; - border-radius: 6px; - outline: none; -} - -@media (prefers-color-scheme: dark) { - - select { - background-color: #161f27; - background-color: var(--background); - } -} - -@media (prefers-color-scheme: dark) { - - select { - color: #fff; - color: var(--form-text); - } -} - -button { - background-color: #d0cfcf; - background-color: var(--button-base); - padding-right: 30px; - padding-left: 30px; -} - -@media (prefers-color-scheme: dark) { - - button { - background-color: #0c151c; - background-color: var(--button-base); - } -} - -input[type='submit'] { - background-color: #d0cfcf; - background-color: var(--button-base); - padding-right: 30px; - padding-left: 30px; -} - -@media (prefers-color-scheme: dark) { - - input[type='submit'] { - background-color: #0c151c; - background-color: var(--button-base); - } -} - -input[type='reset'] { - background-color: #d0cfcf; - background-color: var(--button-base); - padding-right: 30px; - padding-left: 30px; -} - -@media (prefers-color-scheme: dark) { - - input[type='reset'] { - background-color: #0c151c; - background-color: var(--button-base); - } -} - -input[type='button'] { - background-color: #d0cfcf; - background-color: var(--button-base); - padding-right: 30px; - padding-left: 30px; -} - -@media (prefers-color-scheme: dark) { - - input[type='button'] { - background-color: #0c151c; - background-color: var(--button-base); - } -} - -button:hover { - background: #9b9b9b; - background: var(--button-hover); -} - -@media (prefers-color-scheme: dark) { - - button:hover { - background: #040a0f; - background: var(--button-hover); - } -} - -input[type='submit']:hover { - background: #9b9b9b; - background: var(--button-hover); -} - -@media (prefers-color-scheme: dark) { - - input[type='submit']:hover { - background: #040a0f; - background: var(--button-hover); - } -} - -input[type='reset']:hover { - background: #9b9b9b; - background: var(--button-hover); -} - -@media (prefers-color-scheme: dark) { - - input[type='reset']:hover { - background: #040a0f; - background: var(--button-hover); - } -} - -input[type='button']:hover { - background: #9b9b9b; - background: var(--button-hover); -} - -@media (prefers-color-scheme: dark) { - - input[type='button']:hover { - background: #040a0f; - background: var(--button-hover); - } -} - -input[type='color'] { - min-height: 2rem; - padding: 8px; - cursor: pointer; -} - -input[type='checkbox'], -input[type='radio'] { - height: 1em; - width: 1em; -} - -input[type='radio'] { - border-radius: 100%; -} - -input { - vertical-align: top; -} - -label { - vertical-align: middle; - margin-bottom: 4px; - display: inline-block; -} - -input:not([type='checkbox']):not([type='radio']), -input[type='range'], -select, -button, -textarea { - -webkit-appearance: none; -} - -textarea { - display: block; - margin-right: 0; - box-sizing: border-box; - resize: vertical; -} - -textarea:not([cols]) { - width: 100%; -} - -textarea:not([rows]) { - min-height: 40px; - height: 140px; -} - -select { - background: #efefef url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23161f27'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E") calc(100% - 12px) 50% / 12px no-repeat; - background: var(--background) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat; - padding-right: 35px; -} - -@media (prefers-color-scheme: dark) { - - select { - background: #161f27 url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23efefef'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E") calc(100% - 12px) 50% / 12px no-repeat; - background: var(--background) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat; - } -} - -@media (prefers-color-scheme: dark) { - - select { - background: #161f27 url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23efefef'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E") calc(100% - 12px) 50% / 12px no-repeat; - background: var(--background) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat; - } -} - -@media (prefers-color-scheme: dark) { - - select { - background: #161f27 url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23efefef'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E") calc(100% - 12px) 50% / 12px no-repeat; - background: var(--background) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat; - } -} - -@media (prefers-color-scheme: dark) { - - select { - background: #161f27 url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23efefef'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E") calc(100% - 12px) 50% / 12px no-repeat; - background: var(--background) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat; - } -} - -select::-ms-expand { - display: none; -} - -select[multiple] { - padding-right: 10px; - background-image: none; - overflow-y: auto; -} - -input:focus { - box-shadow: 0 0 0 2px #0096bfab; - box-shadow: 0 0 0 2px var(--focus); -} - -@media (prefers-color-scheme: dark) { - - input:focus { - box-shadow: 0 0 0 2px #0096bfab; - box-shadow: 0 0 0 2px var(--focus); - } -} - -select:focus { - box-shadow: 0 0 0 2px #0096bfab; - box-shadow: 0 0 0 2px var(--focus); -} - -@media (prefers-color-scheme: dark) { - - select:focus { - box-shadow: 0 0 0 2px #0096bfab; - box-shadow: 0 0 0 2px var(--focus); - } -} - -button:focus { - box-shadow: 0 0 0 2px #0096bfab; - box-shadow: 0 0 0 2px var(--focus); -} - -@media (prefers-color-scheme: dark) { - - button:focus { - box-shadow: 0 0 0 2px #0096bfab; - box-shadow: 0 0 0 2px var(--focus); - } -} - -textarea:focus { - box-shadow: 0 0 0 2px #0096bfab; - box-shadow: 0 0 0 2px var(--focus); -} - -@media (prefers-color-scheme: dark) { - - textarea:focus { - box-shadow: 0 0 0 2px #0096bfab; - box-shadow: 0 0 0 2px var(--focus); - } -} - -input[type='checkbox']:active, -input[type='radio']:active, -input[type='submit']:active, -input[type='reset']:active, -input[type='button']:active, -input[type='range']:active, -button:active { - transform: translateY(2px); -} - -input:disabled, -select:disabled, -button:disabled, -textarea:disabled { - cursor: not-allowed; - opacity: 0.5; -} - -::-moz-placeholder { - color: #949494; - color: var(--form-placeholder); -} - -:-ms-input-placeholder { - color: #949494; - color: var(--form-placeholder); -} - -::-ms-input-placeholder { - color: #949494; - color: var(--form-placeholder); -} - -::placeholder { - color: #949494; - color: var(--form-placeholder); -} - -@media (prefers-color-scheme: dark) { - - ::-moz-placeholder { - color: #a9a9a9; - color: var(--form-placeholder); - } - - :-ms-input-placeholder { - color: #a9a9a9; - color: var(--form-placeholder); - } - - ::-ms-input-placeholder { - color: #a9a9a9; - color: var(--form-placeholder); - } - - ::placeholder { - color: #a9a9a9; - color: var(--form-placeholder); - } -} - -fieldset { - border: 1px #0096bfab solid; - border: 1px var(--focus) solid; - border-radius: 6px; - margin: 0; - margin-bottom: 12px; - padding: 10px; -} - -@media (prefers-color-scheme: dark) { - - fieldset { - border: 1px #0096bfab solid; - border: 1px var(--focus) solid; - } -} - -legend { - font-size: 0.9em; - font-weight: 600; -} - -input[type='range'] { - margin: 10px 0; - padding: 10px 0; - background: transparent; -} - -input[type='range']:focus { - outline: none; -} - -input[type='range']::-webkit-slider-runnable-track { - width: 100%; - height: 9.5px; - -webkit-transition: 0.2s; - transition: 0.2s; - background: #efefef; - background: var(--background); - border-radius: 3px; -} - -@media (prefers-color-scheme: dark) { - - input[type='range']::-webkit-slider-runnable-track { - background: #161f27; - background: var(--background); - } -} - -input[type='range']::-webkit-slider-thumb { - box-shadow: 0 1px 1px #000, 0 0 1px #0d0d0d; - height: 20px; - width: 20px; - border-radius: 50%; - background: #dbdbdb; - background: var(--border); - -webkit-appearance: none; - margin-top: -7px; -} - -@media (prefers-color-scheme: dark) { - - input[type='range']::-webkit-slider-thumb { - background: #526980; - background: var(--border); - } -} - -input[type='range']:focus::-webkit-slider-runnable-track { - background: #efefef; - background: var(--background); -} - -@media (prefers-color-scheme: dark) { - - input[type='range']:focus::-webkit-slider-runnable-track { - background: #161f27; - background: var(--background); - } -} - -input[type='range']::-moz-range-track { - width: 100%; - height: 9.5px; - -moz-transition: 0.2s; - transition: 0.2s; - background: #efefef; - background: var(--background); - border-radius: 3px; -} - -@media (prefers-color-scheme: dark) { - - input[type='range']::-moz-range-track { - background: #161f27; - background: var(--background); - } -} - -input[type='range']::-moz-range-thumb { - box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d; - height: 20px; - width: 20px; - border-radius: 50%; - background: #dbdbdb; - background: var(--border); -} - -@media (prefers-color-scheme: dark) { - - input[type='range']::-moz-range-thumb { - background: #526980; - background: var(--border); - } -} - -input[type='range']::-ms-track { - width: 100%; - height: 9.5px; - background: transparent; - border-color: transparent; - border-width: 16px 0; - color: transparent; -} - -input[type='range']::-ms-fill-lower { - background: #efefef; - background: var(--background); - border: 0.2px solid #010101; - border-radius: 3px; - box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d; -} - -@media (prefers-color-scheme: dark) { - - input[type='range']::-ms-fill-lower { - background: #161f27; - background: var(--background); - } -} - -input[type='range']::-ms-fill-upper { - background: #efefef; - background: var(--background); - border: 0.2px solid #010101; - border-radius: 3px; - box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d; -} - -@media (prefers-color-scheme: dark) { - - input[type='range']::-ms-fill-upper { - background: #161f27; - background: var(--background); - } -} - -input[type='range']::-ms-thumb { - box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d; - border: 1px solid #000; - height: 20px; - width: 20px; - border-radius: 50%; - background: #dbdbdb; - background: var(--border); -} - -@media (prefers-color-scheme: dark) { - - input[type='range']::-ms-thumb { - background: #526980; - background: var(--border); - } -} - -input[type='range']:focus::-ms-fill-lower { - background: #efefef; - background: var(--background); -} - -@media (prefers-color-scheme: dark) { - - input[type='range']:focus::-ms-fill-lower { - background: #161f27; - background: var(--background); - } -} - -input[type='range']:focus::-ms-fill-upper { - background: #efefef; - background: var(--background); -} - -@media (prefers-color-scheme: dark) { - - input[type='range']:focus::-ms-fill-upper { - background: #161f27; - background: var(--background); - } -} - -a { - text-decoration: none; - color: #0076d1; - color: var(--links); -} - -@media (prefers-color-scheme: dark) { - - a { - color: #41adff; - color: var(--links); - } -} - -a:hover { - text-decoration: underline; -} - -code { - background: #efefef; - background: var(--background); - color: #000; - color: var(--code); - padding: 2.5px 5px; - border-radius: 6px; - font-size: 1em; -} - -@media (prefers-color-scheme: dark) { - - code { - color: #ffbe85; - color: var(--code); - } -} - -@media (prefers-color-scheme: dark) { - - code { - background: #161f27; - background: var(--background); - } -} - -samp { - background: #efefef; - background: var(--background); - color: #000; - color: var(--code); - padding: 2.5px 5px; - border-radius: 6px; - font-size: 1em; -} - -@media (prefers-color-scheme: dark) { - - samp { - color: #ffbe85; - color: var(--code); - } -} - -@media (prefers-color-scheme: dark) { - - samp { - background: #161f27; - background: var(--background); - } -} - -time { - background: #efefef; - background: var(--background); - color: #000; - color: var(--code); - padding: 2.5px 5px; - border-radius: 6px; - font-size: 1em; -} - -@media (prefers-color-scheme: dark) { - - time { - color: #ffbe85; - color: var(--code); - } -} - -@media (prefers-color-scheme: dark) { - - time { - background: #161f27; - background: var(--background); - } -} - -pre > code { - padding: 10px; - display: block; - overflow-x: auto; -} - -var { - color: #39a33c; - color: var(--variable); - font-style: normal; - font-family: monospace; -} - -@media (prefers-color-scheme: dark) { - - var { - color: #d941e2; - color: var(--variable); - } -} - -kbd { - background: #efefef; - background: var(--background); - border: 1px solid #dbdbdb; - border: 1px solid var(--border); - border-radius: 2px; - color: #363636; - color: var(--text-main); - padding: 2px 4px 2px 4px; -} - -@media (prefers-color-scheme: dark) { - - kbd { - color: #dbdbdb; - color: var(--text-main); - } -} - -@media (prefers-color-scheme: dark) { - - kbd { - border: 1px solid #526980; - border: 1px solid var(--border); - } -} - -@media (prefers-color-scheme: dark) { - - kbd { - background: #161f27; - background: var(--background); - } -} - -img, -video { - max-width: 100%; - height: auto; -} - -hr { - border: none; - border-top: 1px solid #dbdbdb; - border-top: 1px solid var(--border); -} - -@media (prefers-color-scheme: dark) { - - hr { - border-top: 1px solid #526980; - border-top: 1px solid var(--border); - } -} - -table { - border-collapse: collapse; - margin-bottom: 10px; - width: 100%; - table-layout: fixed; -} - -table caption { - text-align: left; -} - -td, -th { - padding: 6px; - text-align: left; - vertical-align: top; - word-wrap: break-word; -} - -thead { - border-bottom: 1px solid #dbdbdb; - border-bottom: 1px solid var(--border); -} - -@media (prefers-color-scheme: dark) { - - thead { - border-bottom: 1px solid #526980; - border-bottom: 1px solid var(--border); - } -} - -tfoot { - border-top: 1px solid #dbdbdb; - border-top: 1px solid var(--border); -} - -@media (prefers-color-scheme: dark) { - - tfoot { - border-top: 1px solid #526980; - border-top: 1px solid var(--border); - } -} - -tbody tr:nth-child(even) { - background-color: #efefef; - background-color: var(--background); -} - -@media (prefers-color-scheme: dark) { - - tbody tr:nth-child(even) { - background-color: #161f27; - background-color: var(--background); - } -} - -tbody tr:nth-child(even) button { - background-color: #f7f7f7; - background-color: var(--background-alt); -} - -@media (prefers-color-scheme: dark) { - - tbody tr:nth-child(even) button { - background-color: #1a242f; - background-color: var(--background-alt); - } -} - -tbody tr:nth-child(even) button:hover { - background-color: #fff; - background-color: var(--background-body); -} - -@media (prefers-color-scheme: dark) { - - tbody tr:nth-child(even) button:hover { - background-color: #202b38; - background-color: var(--background-body); - } -} - -::-webkit-scrollbar { - height: 10px; - width: 10px; -} - -::-webkit-scrollbar-track { - background: #efefef; - background: var(--background); - border-radius: 6px; -} - -@media (prefers-color-scheme: dark) { - - ::-webkit-scrollbar-track { - background: #161f27; - background: var(--background); - } -} - -::-webkit-scrollbar-thumb { - background: rgb(170, 170, 170); - background: var(--scrollbar-thumb); - border-radius: 6px; -} - -@media (prefers-color-scheme: dark) { - - ::-webkit-scrollbar-thumb { - background: #040a0f; - background: var(--scrollbar-thumb); - } -} - -@media (prefers-color-scheme: dark) { - - ::-webkit-scrollbar-thumb { - background: #040a0f; - background: var(--scrollbar-thumb); - } -} - -::-webkit-scrollbar-thumb:hover { - background: #9b9b9b; - background: var(--scrollbar-thumb-hover); -} - -@media (prefers-color-scheme: dark) { - - ::-webkit-scrollbar-thumb:hover { - background: rgb(0, 0, 0); - background: var(--scrollbar-thumb-hover); - } -} - -@media (prefers-color-scheme: dark) { - - ::-webkit-scrollbar-thumb:hover { - background: rgb(0, 0, 0); - background: var(--scrollbar-thumb-hover); - } -} - -::-moz-selection { - background-color: #9e9e9e; - background-color: var(--selection); - color: #000; - color: var(--text-bright); -} - -::selection { - background-color: #9e9e9e; - background-color: var(--selection); - color: #000; - color: var(--text-bright); -} - -@media (prefers-color-scheme: dark) { - - ::-moz-selection { - color: #fff; - color: var(--text-bright); - } - - ::selection { - color: #fff; - color: var(--text-bright); - } -} - -@media (prefers-color-scheme: dark) { - - ::-moz-selection { - background-color: #1c76c5; - background-color: var(--selection); - } - - ::selection { - background-color: #1c76c5; - background-color: var(--selection); - } -} - -details { - display: flex; - flex-direction: column; - align-items: flex-start; - background-color: #f7f7f7; - background-color: var(--background-alt); - padding: 10px 10px 0; - margin: 1em 0; - border-radius: 6px; - overflow: hidden; -} - -@media (prefers-color-scheme: dark) { - - details { - background-color: #1a242f; - background-color: var(--background-alt); - } -} - -details[open] { - padding: 10px; -} - -details > :last-child { - margin-bottom: 0; -} - -details[open] summary { - margin-bottom: 10px; -} - -summary { - display: list-item; - background-color: #efefef; - background-color: var(--background); - padding: 10px; - margin: -10px -10px 0; - cursor: pointer; - outline: none; -} - -@media (prefers-color-scheme: dark) { - - summary { - background-color: #161f27; - background-color: var(--background); - } -} - -summary:hover, -summary:focus { - text-decoration: underline; -} - -details > :not(summary) { - margin-top: 0; -} - -summary::-webkit-details-marker { - color: #363636; - color: var(--text-main); -} - -@media (prefers-color-scheme: dark) { - - summary::-webkit-details-marker { - color: #dbdbdb; - color: var(--text-main); - } -} - -dialog { - background-color: #f7f7f7; - background-color: var(--background-alt); - color: #363636; - color: var(--text-main); - border: none; - border-radius: 6px; - border-color: #dbdbdb; - border-color: var(--border); - padding: 10px 30px; -} - -@media (prefers-color-scheme: dark) { - - dialog { - border-color: #526980; - border-color: var(--border); - } -} - -@media (prefers-color-scheme: dark) { - - dialog { - color: #dbdbdb; - color: var(--text-main); - } -} - -@media (prefers-color-scheme: dark) { - - dialog { - background-color: #1a242f; - background-color: var(--background-alt); - } -} - -dialog > header:first-child { - background-color: #efefef; - background-color: var(--background); - border-radius: 6px 6px 0 0; - margin: -10px -30px 10px; - padding: 10px; - text-align: center; -} - -@media (prefers-color-scheme: dark) { - - dialog > header:first-child { - background-color: #161f27; - background-color: var(--background); - } -} - -dialog::-webkit-backdrop { - background: #0000009c; - -webkit-backdrop-filter: blur(4px); - backdrop-filter: blur(4px); -} - -dialog::backdrop { - background: #0000009c; - -webkit-backdrop-filter: blur(4px); - backdrop-filter: blur(4px); -} - -footer { - border-top: 1px solid #dbdbdb; - border-top: 1px solid var(--border); - padding-top: 10px; - color: #70777f; - color: var(--text-muted); -} - -@media (prefers-color-scheme: dark) { - - footer { - color: #a9b1ba; - color: var(--text-muted); - } -} - -@media (prefers-color-scheme: dark) { - - footer { - border-top: 1px solid #526980; - border-top: 1px solid var(--border); - } -} - -body > footer { - margin-top: 40px; -} - -@media print { - body, - pre, - code, - summary, - details, - button, - input, - textarea { - background-color: #fff; - } - - button, - input, - textarea { - border: 1px solid #000; - } - - body, - h1, - h2, - h3, - h4, - h5, - h6, - pre, - code, - button, - input, - textarea, - footer, - summary, - strong { - color: #000; - } - - summary::marker { - color: #000; - } - - summary::-webkit-details-marker { - color: #000; - } - - tbody tr:nth-child(even) { - background-color: #f2f2f2; - } - - a { - color: #00f; - text-decoration: underline; - } -}