From 7977fe9ea7511f02c03f98e92de268cde1de8aee Mon Sep 17 00:00:00 2001 From: Andy Burke Date: Tue, 3 Mar 2026 20:32:45 -0800 Subject: [PATCH] fix: styling improvements --- public/base.css | 1296 +-------------------------------- public/foo/index.html | 6 - public/icons.css | 1286 ++++++++++++++++++++++++++++++++ public/index.html | 1 + public/signup_login_wall.html | 12 +- 5 files changed, 1289 insertions(+), 1312 deletions(-) delete mode 100644 public/foo/index.html create mode 100644 public/icons.css diff --git a/public/base.css b/public/base.css index 876d988..87aca04 100644 --- a/public/base.css +++ b/public/base.css @@ -1,6 +1,6 @@ /* Dark mode default */ :root { - --base-color: #518; + --base-color: #234; --bg: hsl(from var(--base-color) h 20% 7.5%); --bg-darker: hsl(from var(--base-color) h 20% 5%); @@ -55,13 +55,11 @@ dd { margin-block-end: 0; } -/* Set core body defaults */ body { min-height: 100vh; line-height: 1.5; } -/* Set shorter line heights on headings and interactive elements */ h1, h2, h3, @@ -72,7 +70,6 @@ label { line-height: 1.1; } -/* Balance text wrapping on headings */ h1, h2, h3, @@ -80,20 +77,17 @@ h4 { text-wrap: balance; } -/* A elements that don't have a class get default styles */ a:not([class]) { text-decoration-skip-ink: auto; color: currentColor; } -/* Make images easier to work with */ img, picture { max-width: 100%; display: block; } -/* Inherit fonts for inputs and buttons */ input, button, textarea, @@ -168,7 +162,6 @@ body { display: flex; flex-direction: column; height: 100vh; - /* fixed height? */ } #background-container { @@ -613,1290 +606,3 @@ body[data-perms*="files.write.own"] [data-requires-permission="files.write.own"] .inline { display: inline-block !important; } - -/* ICONS */ -.icon { - width: 24px; - height: 24px; - transform: scale(var(--icon-scale, 1)); - - stroke: white; - fill: transparent; - stroke-width: 1pt; - stroke-miterlimit: 10; - stroke-linecap: round; - stroke-linejoin: round; - stroke-dasharray: 400; - - margin: 0 auto; -} - -/* ICON - ADD (with box) */ -.icon.add { - box-sizing: border-box; - position: relative; - display: block; - width: 22px; - height: 22px; - border: 2px solid; - transform: scale(var(--icon-scale, 1)); - border-radius: 4px; -} - -.icon.add::after, -.icon.add::before { - content: ""; - display: block; - box-sizing: border-box; - position: absolute; - width: 10px; - height: 2px; - background: currentColor; - border-radius: 5px; - top: 8px; - left: 4px; -} - -.icon.add::after { - width: 2px; - height: 10px; - top: 4px; - left: 8px; -} - -/* ICON - ATTACHMENT */ -.icon.attachment { - box-sizing: border-box; - position: relative; - display: block; - width: 14px; - height: 14px; - border: 2px solid; - border-top: 0; - border-bottom-left-radius: 100px; - border-bottom-right-radius: 100px; - transform: scale(var(--icon-scale, 1)); - margin-top: 11px; -} - -.icon.attachment::after, -.icon.attachment::before { - content: ""; - display: block; - box-sizing: border-box; - position: absolute; - border-radius: 3px; - border: 2px solid; -} - -.icon.attachment::after { - border-bottom: 0; - border-top-left-radius: 100px; - border-top-right-radius: 100px; - right: -2px; - width: 10px; - height: 14px; - bottom: 8px; -} - -.icon.attachment::before { - width: 6px; - height: 12px; - border-top: 0; - border-bottom-left-radius: 100px; - border-bottom-right-radius: 100px; - left: 2px; - bottom: 4px; -} - -/* ICON - BLURB */ -.icon.blurb { - box-sizing: border-box; - position: relative; - display: block; - transform: scale(var(--icon-scale, 1)); - border: 2px solid; - border-radius: 3px; - width: 22px; - height: 16px; -} - -.icon.blurb::after, -.icon.blurb::before { - content: ""; - display: block; - box-sizing: border-box; - position: absolute; - height: 2px; - border-radius: 3px; - background: currentColor; - bottom: 2px; -} - -.icon.blurb::before { - width: 10px; - left: 2px; - box-shadow: 4px -4px 0; -} - -.icon.blurb::after { - width: 3px; - right: 2px; - box-shadow: -11px -4px 0; -} - -/* ICON - CALENDAR */ -.icon.calendar, -.icon.calendar::before { - display: block; - box-sizing: border-box; -} - -.icon.calendar { - position: relative; - transform: scale(var(--icon-scale, 1)); - width: 18px; - height: 18px; - border: 2px solid; - border-top: 4px solid; - border-radius: 3px; -} - -.icon.calendar::before { - content: ""; - position: absolute; - width: 10px; - border-radius: 3px; - left: 2px; - background: currentColor; - height: 2px; - top: 2px; -} - -/* ICON - CAMERA */ -.icon.camera { - box-sizing: border-box; - position: relative; - display: block; - transform: scale(var(--icon-scale, 1)); - border: 2px solid; - border-radius: 3px; - width: 18px; - height: 12px; - perspective: 24px; -} - -.icon.camera::after, -.icon.camera::before { - content: ""; - display: block; - box-sizing: border-box; - position: absolute; -} - -.icon.camera::before { - border: 2px solid; - border-left-color: transparent; - transform: rotateY(-70deg); - width: 8px; - height: 8px; - right: -7px; - top: 0; -} - -.icon.camera::after { - width: 10px; - height: 5px; - border-top: 2px solid; - border-right: 2px solid; - top: -5px; - right: 2px; - border-top-right-radius: 2px; -} - -/* ICON - CHAT */ -.icon.chat { - box-sizing: border-box; - position: relative; - display: block; - transform: scale(var(--icon-scale, 1)); - width: 14px; - height: 10px; -} - -.icon.chat::after, -.icon.chat::before { - content: ""; - display: block; - box-sizing: border-box; - position: absolute; - border-radius: 3px; - height: 2px; - background: currentColor; -} - -.icon.chat::before { - width: 10px; - opacity: 0.5; - box-shadow: 0 4px 0; -} - -.icon.chat::after { - width: 14px; - bottom: 0; -} - -/* ICON - CIRCLE */ -.icon.circle { - box-sizing: border-box; - position: relative; - display: block; - transform: scale(var(--icon-scale, 1)); - width: 19px; - height: 19px; - border: 2px solid; - border-radius: 100px; -} - -/* ICON - CLOSE */ -.icon.close { - box-sizing: border-box; - position: relative; - display: block; - transform: scale(var(--icon-scale, 1)); - width: 22px; - height: 22px; - border: 2px solid; - border-radius: var(--border-radius); -} - -.icon.close::after, -.icon.close::before { - content: ""; - display: block; - box-sizing: border-box; - position: absolute; - width: 12px; - height: 2px; - background: currentColor; - transform: rotate(45deg); - border-radius: var(--border-radius); - top: 8px; - left: 3px; -} - -.icon.close::after { - transform: rotate(-45deg); -} - -/* ICON - CONTROLLER */ -.icon.controller { - box-sizing: border-box; - position: relative; - display: block; - transform: scale(var(--icon-scale, 1)); - width: 8px; - height: 8px; - border: 2px solid; - border-radius: 100px; -} - -.icon.controller::before { - content: ""; - display: block; - box-sizing: border-box; - position: absolute; - width: 14px; - height: 14px; - box-shadow: - -6px -6px 0 -4px, - 6px 6px 0 -4px, - 6px -6px 0 -4px, - -6px 6px 0 -4px; - left: -5px; - top: -5px; - transform: rotate(45deg); -} - -/* ICON - DOWNLOAD */ -.icon.download { - box-sizing: border-box; - position: relative; - display: block; - transform: scale(var(--icon-scale, 1)); - width: 16px; - height: 6px; - border: 2px solid; - border-top: 0; - border-bottom-left-radius: 2px; - border-bottom-right-radius: 2px; - margin-top: 8px; -} - -.icon.download::after { - content: ""; - display: block; - box-sizing: border-box; - position: absolute; - width: 8px; - height: 8px; - border-left: 2px solid; - border-bottom: 2px solid; - transform: rotate(-45deg); - left: 2px; - bottom: 4px; -} - -.icon.download::before { - content: ""; - display: block; - box-sizing: border-box; - position: absolute; - border-radius: 3px; - width: 2px; - height: 10px; - background: currentColor; - left: 5px; - bottom: 5px; -} - -/* ICON - ESSAY */ -.icon.essay { - box-sizing: border-box; - position: relative; - display: block; - transform: scale(var(--icon-scale, 1)); - width: 22px; - height: 18px; - border: 2px solid; - border-radius: 3px; - box-shadow: 0 -1px 0; -} - -.icon.essay::after, -.icon.essay::before { - content: ""; - display: block; - box-sizing: border-box; - position: absolute; - width: 6px; - top: 2px; -} - -.icon.essay::before { - background: currentColor; - left: 2px; - box-shadow: - 0 4px 0, - 0 8px 0; - border-radius: 3px; - height: 2px; -} - -.icon.essay::after { - height: 10px; - border: 2px solid; - right: 2px; - border-radius: 1px; -} - -/* ICON - EXCHANGE */ -.icon.exchange, -.icon.exchange::after, -.icon.exchange::before { - display: block; - box-sizing: border-box; - width: 8px; - height: 8px; -} - -.icon.exchange { - position: relative; - transform: scale(var(--icon-scale, 1)); - box-shadow: - -3px 3px 0 -1px, - 3px -3px 0 -1px; -} - -.icon.exchange::after, -.icon.exchange::before { - content: ""; - position: absolute; - border: 2px solid; -} - -.icon.exchange::before { - top: -5px; - left: -5px; -} - -.icon.exchange::after { - bottom: -5px; - right: -5px; -} - -/* ICON - FORUM */ -.icon.forum { - box-sizing: border-box; - position: relative; - display: block; - transform: scale(var(--icon-scale, 1)); - width: 16px; - height: 14px; - border-bottom: 2px solid; -} - -.icon.forum::after, -.icon.forum::before { - content: ""; - display: block; - box-sizing: border-box; - position: absolute; - top: 2px; -} - -.icon.forum::before { - border-left: 4px solid; - left: 1px; - width: 0; - height: 0; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; -} - -.icon.forum::after { - width: 8px; - height: 6px; - border-top: 2px solid; - border-bottom: 2px solid; - right: 0; -} - -/* ICON - FORWARD */ -.icon.forward-copy { - box-sizing: border-box; - position: relative; - display: block; - transform: scale(var(--icon-scale, 1)); - width: 16px; - height: 16px; - box-shadow: 6px -6px 0 -4px; -} - -.icon.forward-copy::before { - content: ""; - display: block; - box-sizing: border-box; - position: absolute; - width: 8px; - height: 8px; - border: 2px solid; - border-radius: 1px; - left: 0; - bottom: 0; -} - -.icon.forward-copy::after { - content: ""; - display: block; - box-sizing: border-box; - position: absolute; - background: currentColor; - width: 2px; - height: 10px; - transform: rotate(45deg); - bottom: 8px; - right: 2px; - border-radius: 4px; -} - -/* ICON - HOME */ -.icon.home { - background: - linear-gradient(to left, currentColor 5px, transparent 0) no-repeat 0 bottom/4px 2px, - linear-gradient(to left, currentColor 5px, transparent 0) no-repeat right bottom/4px 2px; - box-sizing: border-box; - position: relative; - display: block; - transform: scale(var(--icon-scale, 1)); - width: 18px; - height: 14px; - border: 2px solid; - border-top: 0; - border-bottom: 0; - border-top-right-radius: 3px; - border-top-left-radius: 3px; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; - margin-bottom: -2px; -} - -.icon.home::after, -.icon.home::before { - content: ""; - display: block; - box-sizing: border-box; - position: absolute; -} - -.icon.home::before { - border-top: 2px solid; - border-left: 2px solid; - border-top-left-radius: 4px; - transform: rotate(45deg); - top: -5px; - border-radius: 3px; - width: 14px; - height: 14px; - left: 0; -} - -.icon.home::after { - width: 8px; - height: 10px; - border: 2px solid; - border-radius: 100px; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - border-bottom: 0; - left: 3px; - bottom: 0; -} - -/* ICON - LIVE */ -.icon.live { - transform: scale(var(--icon-scale, 1)); -} - -.icon.live, -.icon.live::after, -.icon.live::before { - box-sizing: border-box; - position: relative; - display: block; - width: 14px; - height: 14px; - border: 2px solid; - border-bottom-color: transparent; - border-radius: 50%; -} - -.icon.live::after, -.icon.live::before { - content: ""; - position: absolute; - width: 6px; - height: 6px; - top: 2px; - left: 2px; -} - -.icon.live::after { - width: 22px; - height: 22px; - top: -6px; - left: -6px; -} - -/* ICON - MINUS */ -.icon.minus { - box-sizing: border-box; - position: relative; - display: block; - transform: scale(var(--icon-scale, 1)); - width: 16px; - height: 2px; - background: currentColor; - border-radius: 10px; -} - -/* ICON - MORE */ -.icon.more { - box-sizing: border-box; - position: relative; - display: block; - transform: scale(var(--icon-scale, 1)); - width: 24px; - height: 20px; - border: 2px solid; - border-radius: 3px; -} - -.icon.more::before { - content: ""; - position: absolute; - box-sizing: border-box; - display: block; - width: 4px; - height: 4px; - background-color: currentColor; - border-radius: 20px; - top: 6px; - left: 8px; - box-shadow: - -5px 0 0, - 5px 0 0; -} - -/* ICON - MOREBORDERLESS */ -.icon.more-borderless { - transform: scale(var(--icon-scale, 1)); -} - -.icon.more-borderless, -.icon.more-borderless::after, -.icon.more-borderless::before { - box-sizing: border-box; - position: relative; - display: block; - width: 4px; - height: 4px; - background: currentColor; - border-radius: 100%; -} - -.icon.more-borderless::after, -.icon.more-borderless::before { - content: ""; - position: absolute; - top: 0; -} - -.icon.more-borderless::after { - left: -6px; -} - -.icon.more-borderless::before { - right: -6px; -} - -/* ICON - MORECIRCLE */ -.icon.more-circle { - box-sizing: border-box; - position: relative; - display: block; - transform: scale(var(--icon-scale, 1)); - width: 24px; - height: 24px; - border: 2px solid; - border-radius: 24px; -} - -.icon.more-circle::before { - content: ""; - position: absolute; - box-sizing: border-box; - display: block; - width: 4px; - height: 4px; - background-color: currentColor; - border-radius: 20px; - top: 8px; - left: 8px; - box-shadow: - -5px 0 0, - 5px 0 0; -} - -/* ICON - PHONE */ -.icon.phone { - box-sizing: border-box; - position: relative; - display: block; - width: 22px; - height: 22px; - transform: scale(var(--icon-scale, 1)); -} - -.icon.phone::after, -.icon.phone::before { - content: ""; - display: block; - box-sizing: border-box; - position: absolute; -} - -.icon.phone::after { - width: 18px; - height: 18px; - border-top-left-radius: 1px; - border-bottom-right-radius: 1px; - border-bottom-left-radius: 12px; - border-left: 4px solid; - border-bottom: 4px solid; - left: 2px; - bottom: 2px; - background: - linear-gradient(to left, currentColor 10px, transparent 0) no-repeat right 11px/6px 4px, - linear-gradient(to left, currentColor 10px, transparent 0) no-repeat -1px 0/4px 6px; -} - -.icon.phone::before { - width: 20px; - height: 20px; - border: 6px double; - border-top-color: transparent; - border-bottom-color: transparent; - border-left-color: transparent; - border-radius: 50%; - transform: rotate(-45deg); - bottom: 2px; - left: 2px; -} - -/* ICON - PLUS */ -.icon.plus, -.icon.plus::after, -.icon.plus::before { - display: block; - box-sizing: border-box; -} - -.icon.plus::after, -.icon.plus::before { - border-radius: 10px; - background: currentColor; -} - -.icon.plus { - position: relative; - transform: scale(var(--icon-scale, 1)); - width: 16px; - height: 16px; -} - -.icon.plus::after { - content: ""; - position: absolute; - width: 2px; - height: 16px; - top: 0; - left: 7px; -} - -.icon.plus::before { - content: ""; - position: absolute; - width: 16px; - height: 2px; - top: 7px; - left: 0; -} - -/* ICON - REPLY */ -.icon.reply { - box-sizing: border-box; - position: relative; - display: block; - transform: scale(var(--icon-scale, 1)); - width: 16px; - height: 16px; - box-shadow: -6px -6px 0 -4px; -} - -.icon.reply::before { - content: ""; - display: block; - box-sizing: border-box; - position: absolute; - width: 8px; - height: 8px; - border: 2px solid; - border-radius: 1px; - right: 0; - bottom: 0; -} - -.icon.reply::after { - content: ""; - display: block; - box-sizing: border-box; - position: absolute; - background: currentColor; - width: 2px; - height: 10px; - transform: rotate(-45deg); - bottom: 8px; - left: 2px; - border-radius: 4px; -} - -/* ICON - RESOURCES */ -.icon.resources, -.icon.resources::after { - display: block; - box-sizing: border-box; - border-radius: 22px; -} - -.icon.resources { - position: relative; - transform: scale(var(--icon-scale, 1)); - width: 20px; - height: 20px; - border: 2px solid transparent; -} - -.icon.resources::after { - content: ""; - position: absolute; - width: 4px; - height: 4px; - background: currentColor; - top: 6px; - left: 6px; - box-shadow: - 0 7px 0 1px, - 0 -7px 0 1px, - -7px 0 0 1px, - 7px 0 0 1px; -} - -/* ICON - SEND */ -.icon.send { - box-sizing: border-box; - position: relative; - display: block; - transform: scale(var(--icon-scale, 1)); - width: 22px; - height: 22px; - border: 2px solid; - border-radius: 4px; -} - -.icon.send::after, -.icon.send::before { - content: ""; - display: block; - box-sizing: border-box; - position: absolute; - width: 2px; - height: 8px; - border-right: 2px solid; - top: 5px; - right: 5px; -} - -.icon.send::after { - width: 6px; - height: 6px; - border-bottom: 2px solid; - transform: rotate(-45deg); - right: 9px; - top: 6px; -} - -/* ICON - TALK */ -.icon.talk { - transform: scale(var(--icon-scale, 1)); -} - -.icon.talk, -.icon.talk::after { - box-sizing: border-box; - position: relative; - display: block; - width: 20px; - height: 20px; - border-radius: 100px; - border: 2px dotted currentColor; -} - -.icon.talk::after { - content: ""; - position: absolute; - width: 8px; - height: 8px; - border: 1px solid transparent; - top: 4px; - left: 4px; - box-shadow: - 0 0 0 2px, - inset 0 0 0 2px currentColor; -} - -/* ICON - TRASH */ -.icon.trash { - box-sizing: border-box; - position: relative; - display: block; - transform: scale(var(--icon-scale, 1)); - width: 10px; - height: 12px; - border: 2px solid transparent; - box-shadow: - 0 0 0 2px, - inset -2px 0 0, - inset 2px 0 0; - border-bottom-left-radius: 1px; - border-bottom-right-radius: 1px; - margin-top: 4px; -} - -.icon.trash::after, -.icon.trash::before { - content: ""; - display: block; - box-sizing: border-box; - position: absolute; -} - -.icon.trash::after { - background: currentColor; - border-radius: 3px; - width: 16px; - height: 2px; - top: -4px; - left: -5px; -} - -.icon.trash::before { - width: 10px; - height: 4px; - border: 2px solid; - border-bottom: transparent; - border-top-left-radius: 2px; - border-top-right-radius: 2px; - top: -7px; - left: -2px; -} - -/* ICON - USER */ -.icon.user, -.icon.user::after, -.icon.user::before { - display: block; - box-sizing: border-box; - border: 2px solid; - border-radius: 100px; -} - -.icon.user { - overflow: hidden; - transform: scale(var(--icon-scale, 1)); - width: 22px; - height: 22px; - position: relative; -} - -.icon.user::after, -.icon.user::before { - content: ""; - position: absolute; - top: 2px; - left: 5px; - width: 8px; - height: 8px; -} - -.icon.user::after { - border-radius: 200px; - top: 11px; - left: 0px; - width: 18px; - height: 18px; -} - -/* ICON - WORK */ -.icon.work { - box-sizing: border-box; - position: relative; - display: block; - transform: scale(var(--icon-scale, 1)); - width: 20px; - height: 20px; - border: 2px solid; - border-radius: 22px; -} - -.icon.work::after, -.icon.work::before { - content: ""; - display: block; - box-sizing: border-box; - position: absolute; -} - -.icon.work::before { - width: 12px; - height: 6px; - border: 2px solid; - border-top-left-radius: 100px; - border-top-right-radius: 100px; - top: 2px; - left: 2px; - border-bottom: 0; -} - -.icon.work::after { - width: 18px; - height: 2px; - background: currentColor; - left: -1px; - top: 8px; -} - -/* ICONS - RIGHT/LEFT */ -.icon.right { - box-sizing: border-box; - position: relative; - display: block; - transform: scale(var(--icon-scale, 1)); - width: 22px; - height: 22px; -} - -.icon.right::after, -.icon.right::before { - content: ""; - display: block; - box-sizing: border-box; - position: absolute; - width: 8px; - height: 8px; - border-right: 2px solid; - border-top: 2px solid; - transform: rotate(45deg); - top: 7px; - right: 6px; -} - -.icon.right::after { - right: 11px; -} - -.icon.left { - box-sizing: border-box; - position: relative; - display: block; - transform: scale(var(--icon-scale, 1)); - width: 22px; - height: 22px; -} - -.icon.left::after, -.icon.left::before { - content: ""; - display: block; - box-sizing: border-box; - position: absolute; - width: 8px; - height: 8px; - border-left: 2px solid; - border-bottom: 2px solid; - transform: rotate(45deg); - top: 7px; - left: 6px; -} - -.icon.left::after { - left: 11px; -} - -.icon.map-pin { - box-sizing: border-box; - position: relative; - display: block; - transform: rotate(45deg) scale(var(--icon-scale, 1)); - width: 18px; - height: 18px; - border-radius: 100% 100% 0 100%; - border: 2px solid; - margin-top: -4px; -} - -.icon.map-pin::before { - content: ""; - display: block; - box-sizing: border-box; - position: absolute; - width: 8px; - height: 8px; - border: 2px solid; - top: 3px; - left: 3px; - border-radius: 40px; -} - - -/* AUDIO PLAYER ICONS */ -.icon.skip-back { - box-sizing: border-box; - position: relative; - display: block; - transform: scale(var(--icon-scale, 1)); - width: 22px; - height: 22px; - border: 2px solid; - border-radius: 4px; -} - -.icon.skip-back::after, -.icon.skip-back::before { - content: ""; - display: block; - box-sizing: border-box; - position: absolute; - height: 8px; - top: 5px; -} - -.icon.skip-back::before { - width: 2px; - border-radius: 2px; - right: 11px; - background: currentColor; -} - -.icon.skip-back::after { - width: 0; - border-top: 4px solid transparent; - border-bottom: 4px solid transparent; - border-right: 5px solid; - right: 5px; -} - -.icon.rewind { - box-sizing: border-box; - position: relative; - display: block; - transform: scale(var(--icon-scale, 1)); - border: 2px solid; - border-radius: 4px; - width: 22px; - height: 22px; -} - -.icon.rewind::after, -.icon.rewind::before { - content: ""; - display: block; - box-sizing: border-box; - position: absolute; - width: 6px; - height: 6px; - border-left: 2px solid; - border-bottom: 2px solid; - transform: rotate(45deg); - top: 6px; - left: 5px; -} - -.icon.rewind::after { - left: 9px; -} - -.icon.play { - box-sizing: border-box; - position: relative; - display: block; - transform: scale(var(--icon-scale, 1)); - width: 22px; - height: 22px; - border: 2px solid; - border-radius: 4px; -} - -.icon.play::before { - content: ""; - display: block; - box-sizing: border-box; - position: absolute; - width: 0; - height: 10px; - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-left: 6px solid; - top: 4px; - left: 7px; -} - -.icon.pause { - box-sizing: border-box; - position: relative; - display: block; - transform: scale(var(--icon-scale, 1)); - width: 22px; - height: 22px; - border: 2px solid; - border-radius: 4px; -} - -.icon.pause::before { - content: ""; - display: block; - box-sizing: border-box; - position: absolute; - width: 6px; - height: 6px; - left: 6px; - top: 6px; - border-left: 2px solid; - border-right: 2px solid; -} - -.icon.fastforward { - box-sizing: border-box; - position: relative; - display: block; - transform: scale(var(--icon-scale, 1)); - border: 2px solid; - border-radius: 4px; - width: 22px; - height: 22px; -} - -.icon.fastforward::after, -.icon.fastforward::before { - content: ""; - display: block; - box-sizing: border-box; - position: absolute; - width: 6px; - height: 6px; - border-right: 2px solid; - border-top: 2px solid; - transform: rotate(45deg); - top: 6px; - right: 5px; -} - -.icon.fastforward::after { - right: 9px; -} - -.icon.skip-forward { - box-sizing: border-box; - position: relative; - display: block; - transform: scale(var(--icon-scale, 1)); - width: 22px; - height: 22px; - border: 2px solid; - border-radius: 4px; -} - -.icon.skip-forward::after, -.icon.skip-forward::before { - content: ""; - display: block; - box-sizing: border-box; - position: absolute; - height: 8px; - top: 5px; -} - -.icon.skip-forward::before { - width: 2px; - border-radius: 2px; - left: 11px; - background: currentColor; -} - -.icon.skip-forward::after { - width: 0; - border-top: 4px solid transparent; - border-bottom: 4px solid transparent; - border-left: 5px solid; - left: 5px; -} diff --git a/public/foo/index.html b/public/foo/index.html deleted file mode 100644 index 42d2802..0000000 --- a/public/foo/index.html +++ /dev/null @@ -1,6 +0,0 @@ - - - -

Hello World - foo

- - diff --git a/public/icons.css b/public/icons.css new file mode 100644 index 0000000..56e8a15 --- /dev/null +++ b/public/icons.css @@ -0,0 +1,1286 @@ +/* ICONS */ +.icon { + width: 24px; + height: 24px; + transform: scale(var(--icon-scale, 1)); + + stroke: white; + fill: transparent; + stroke-width: 1pt; + stroke-miterlimit: 10; + stroke-linecap: round; + stroke-linejoin: round; + stroke-dasharray: 400; + + margin: 0 auto; +} + +/* ICON - ADD (with box) */ +.icon.add { + box-sizing: border-box; + position: relative; + display: block; + width: 22px; + height: 22px; + border: 2px solid; + transform: scale(var(--icon-scale, 1)); + border-radius: 4px; +} + +.icon.add::after, +.icon.add::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + width: 10px; + height: 2px; + background: currentColor; + border-radius: 5px; + top: 8px; + left: 4px; +} + +.icon.add::after { + width: 2px; + height: 10px; + top: 4px; + left: 8px; +} + +/* ICON - ATTACHMENT */ +.icon.attachment { + box-sizing: border-box; + position: relative; + display: block; + width: 14px; + height: 14px; + border: 2px solid; + border-top: 0; + border-bottom-left-radius: 100px; + border-bottom-right-radius: 100px; + transform: scale(var(--icon-scale, 1)); + margin-top: 11px; +} + +.icon.attachment::after, +.icon.attachment::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + border-radius: 3px; + border: 2px solid; +} + +.icon.attachment::after { + border-bottom: 0; + border-top-left-radius: 100px; + border-top-right-radius: 100px; + right: -2px; + width: 10px; + height: 14px; + bottom: 8px; +} + +.icon.attachment::before { + width: 6px; + height: 12px; + border-top: 0; + border-bottom-left-radius: 100px; + border-bottom-right-radius: 100px; + left: 2px; + bottom: 4px; +} + +/* ICON - BLURB */ +.icon.blurb { + box-sizing: border-box; + position: relative; + display: block; + transform: scale(var(--icon-scale, 1)); + border: 2px solid; + border-radius: 3px; + width: 22px; + height: 16px; +} + +.icon.blurb::after, +.icon.blurb::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + height: 2px; + border-radius: 3px; + background: currentColor; + bottom: 2px; +} + +.icon.blurb::before { + width: 10px; + left: 2px; + box-shadow: 4px -4px 0; +} + +.icon.blurb::after { + width: 3px; + right: 2px; + box-shadow: -11px -4px 0; +} + +/* ICON - CALENDAR */ +.icon.calendar, +.icon.calendar::before { + display: block; + box-sizing: border-box; +} + +.icon.calendar { + position: relative; + transform: scale(var(--icon-scale, 1)); + width: 18px; + height: 18px; + border: 2px solid; + border-top: 4px solid; + border-radius: 3px; +} + +.icon.calendar::before { + content: ""; + position: absolute; + width: 10px; + border-radius: 3px; + left: 2px; + background: currentColor; + height: 2px; + top: 2px; +} + +/* ICON - CAMERA */ +.icon.camera { + box-sizing: border-box; + position: relative; + display: block; + transform: scale(var(--icon-scale, 1)); + border: 2px solid; + border-radius: 3px; + width: 18px; + height: 12px; + perspective: 24px; +} + +.icon.camera::after, +.icon.camera::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; +} + +.icon.camera::before { + border: 2px solid; + border-left-color: transparent; + transform: rotateY(-70deg); + width: 8px; + height: 8px; + right: -7px; + top: 0; +} + +.icon.camera::after { + width: 10px; + height: 5px; + border-top: 2px solid; + border-right: 2px solid; + top: -5px; + right: 2px; + border-top-right-radius: 2px; +} + +/* ICON - CHAT */ +.icon.chat { + box-sizing: border-box; + position: relative; + display: block; + transform: scale(var(--icon-scale, 1)); + width: 14px; + height: 10px; +} + +.icon.chat::after, +.icon.chat::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + border-radius: 3px; + height: 2px; + background: currentColor; +} + +.icon.chat::before { + width: 10px; + opacity: 0.5; + box-shadow: 0 4px 0; +} + +.icon.chat::after { + width: 14px; + bottom: 0; +} + +/* ICON - CIRCLE */ +.icon.circle { + box-sizing: border-box; + position: relative; + display: block; + transform: scale(var(--icon-scale, 1)); + width: 19px; + height: 19px; + border: 2px solid; + border-radius: 100px; +} + +/* ICON - CLOSE */ +.icon.close { + box-sizing: border-box; + position: relative; + display: block; + transform: scale(var(--icon-scale, 1)); + width: 22px; + height: 22px; + border: 2px solid; + border-radius: var(--border-radius); +} + +.icon.close::after, +.icon.close::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + width: 12px; + height: 2px; + background: currentColor; + transform: rotate(45deg); + border-radius: var(--border-radius); + top: 8px; + left: 3px; +} + +.icon.close::after { + transform: rotate(-45deg); +} + +/* ICON - CONTROLLER */ +.icon.controller { + box-sizing: border-box; + position: relative; + display: block; + transform: scale(var(--icon-scale, 1)); + width: 8px; + height: 8px; + border: 2px solid; + border-radius: 100px; +} + +.icon.controller::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + width: 14px; + height: 14px; + box-shadow: + -6px -6px 0 -4px, + 6px 6px 0 -4px, + 6px -6px 0 -4px, + -6px 6px 0 -4px; + left: -5px; + top: -5px; + transform: rotate(45deg); +} + +/* ICON - DOWNLOAD */ +.icon.download { + box-sizing: border-box; + position: relative; + display: block; + transform: scale(var(--icon-scale, 1)); + width: 16px; + height: 6px; + border: 2px solid; + border-top: 0; + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; + margin-top: 8px; +} + +.icon.download::after { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + width: 8px; + height: 8px; + border-left: 2px solid; + border-bottom: 2px solid; + transform: rotate(-45deg); + left: 2px; + bottom: 4px; +} + +.icon.download::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + border-radius: 3px; + width: 2px; + height: 10px; + background: currentColor; + left: 5px; + bottom: 5px; +} + +/* ICON - ESSAY */ +.icon.essay { + box-sizing: border-box; + position: relative; + display: block; + transform: scale(var(--icon-scale, 1)); + width: 22px; + height: 18px; + border: 2px solid; + border-radius: 3px; + box-shadow: 0 -1px 0; +} + +.icon.essay::after, +.icon.essay::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + width: 6px; + top: 2px; +} + +.icon.essay::before { + background: currentColor; + left: 2px; + box-shadow: + 0 4px 0, + 0 8px 0; + border-radius: 3px; + height: 2px; +} + +.icon.essay::after { + height: 10px; + border: 2px solid; + right: 2px; + border-radius: 1px; +} + +/* ICON - EXCHANGE */ +.icon.exchange, +.icon.exchange::after, +.icon.exchange::before { + display: block; + box-sizing: border-box; + width: 8px; + height: 8px; +} + +.icon.exchange { + position: relative; + transform: scale(var(--icon-scale, 1)); + box-shadow: + -3px 3px 0 -1px, + 3px -3px 0 -1px; +} + +.icon.exchange::after, +.icon.exchange::before { + content: ""; + position: absolute; + border: 2px solid; +} + +.icon.exchange::before { + top: -5px; + left: -5px; +} + +.icon.exchange::after { + bottom: -5px; + right: -5px; +} + +/* ICON - FORUM */ +.icon.forum { + box-sizing: border-box; + position: relative; + display: block; + transform: scale(var(--icon-scale, 1)); + width: 16px; + height: 14px; + border-bottom: 2px solid; +} + +.icon.forum::after, +.icon.forum::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + top: 2px; +} + +.icon.forum::before { + border-left: 4px solid; + left: 1px; + width: 0; + height: 0; + border-top: 3px solid transparent; + border-bottom: 3px solid transparent; +} + +.icon.forum::after { + width: 8px; + height: 6px; + border-top: 2px solid; + border-bottom: 2px solid; + right: 0; +} + +/* ICON - FORWARD */ +.icon.forward-copy { + box-sizing: border-box; + position: relative; + display: block; + transform: scale(var(--icon-scale, 1)); + width: 16px; + height: 16px; + box-shadow: 6px -6px 0 -4px; +} + +.icon.forward-copy::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + width: 8px; + height: 8px; + border: 2px solid; + border-radius: 1px; + left: 0; + bottom: 0; +} + +.icon.forward-copy::after { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + background: currentColor; + width: 2px; + height: 10px; + transform: rotate(45deg); + bottom: 8px; + right: 2px; + border-radius: 4px; +} + +/* ICON - HOME */ +.icon.home { + background: + linear-gradient(to left, currentColor 5px, transparent 0) no-repeat 0 bottom/4px 2px, + linear-gradient(to left, currentColor 5px, transparent 0) no-repeat right bottom/4px 2px; + box-sizing: border-box; + position: relative; + display: block; + transform: scale(var(--icon-scale, 1)); + width: 18px; + height: 14px; + border: 2px solid; + border-top: 0; + border-bottom: 0; + border-top-right-radius: 3px; + border-top-left-radius: 3px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + margin-bottom: -2px; +} + +.icon.home::after, +.icon.home::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; +} + +.icon.home::before { + border-top: 2px solid; + border-left: 2px solid; + border-top-left-radius: 4px; + transform: rotate(45deg); + top: -5px; + border-radius: 3px; + width: 14px; + height: 14px; + left: 0; +} + +.icon.home::after { + width: 8px; + height: 10px; + border: 2px solid; + border-radius: 100px; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + border-bottom: 0; + left: 3px; + bottom: 0; +} + +/* ICON - LIVE */ +.icon.live { + transform: scale(var(--icon-scale, 1)); +} + +.icon.live, +.icon.live::after, +.icon.live::before { + box-sizing: border-box; + position: relative; + display: block; + width: 14px; + height: 14px; + border: 2px solid; + border-bottom-color: transparent; + border-radius: 50%; +} + +.icon.live::after, +.icon.live::before { + content: ""; + position: absolute; + width: 6px; + height: 6px; + top: 2px; + left: 2px; +} + +.icon.live::after { + width: 22px; + height: 22px; + top: -6px; + left: -6px; +} + +/* ICON - MINUS */ +.icon.minus { + box-sizing: border-box; + position: relative; + display: block; + transform: scale(var(--icon-scale, 1)); + width: 16px; + height: 2px; + background: currentColor; + border-radius: 10px; +} + +/* ICON - MORE */ +.icon.more { + box-sizing: border-box; + position: relative; + display: block; + transform: scale(var(--icon-scale, 1)); + width: 24px; + height: 20px; + border: 2px solid; + border-radius: 3px; +} + +.icon.more::before { + content: ""; + position: absolute; + box-sizing: border-box; + display: block; + width: 4px; + height: 4px; + background-color: currentColor; + border-radius: 20px; + top: 6px; + left: 8px; + box-shadow: + -5px 0 0, + 5px 0 0; +} + +/* ICON - MOREBORDERLESS */ +.icon.more-borderless { + transform: scale(var(--icon-scale, 1)); +} + +.icon.more-borderless, +.icon.more-borderless::after, +.icon.more-borderless::before { + box-sizing: border-box; + position: relative; + display: block; + width: 4px; + height: 4px; + background: currentColor; + border-radius: 100%; +} + +.icon.more-borderless::after, +.icon.more-borderless::before { + content: ""; + position: absolute; + top: 0; +} + +.icon.more-borderless::after { + left: -6px; +} + +.icon.more-borderless::before { + right: -6px; +} + +/* ICON - MORECIRCLE */ +.icon.more-circle { + box-sizing: border-box; + position: relative; + display: block; + transform: scale(var(--icon-scale, 1)); + width: 24px; + height: 24px; + border: 2px solid; + border-radius: 24px; +} + +.icon.more-circle::before { + content: ""; + position: absolute; + box-sizing: border-box; + display: block; + width: 4px; + height: 4px; + background-color: currentColor; + border-radius: 20px; + top: 8px; + left: 8px; + box-shadow: + -5px 0 0, + 5px 0 0; +} + +/* ICON - PHONE */ +.icon.phone { + box-sizing: border-box; + position: relative; + display: block; + width: 22px; + height: 22px; + transform: scale(var(--icon-scale, 1)); +} + +.icon.phone::after, +.icon.phone::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; +} + +.icon.phone::after { + width: 18px; + height: 18px; + border-top-left-radius: 1px; + border-bottom-right-radius: 1px; + border-bottom-left-radius: 12px; + border-left: 4px solid; + border-bottom: 4px solid; + left: 2px; + bottom: 2px; + background: + linear-gradient(to left, currentColor 10px, transparent 0) no-repeat right 11px/6px 4px, + linear-gradient(to left, currentColor 10px, transparent 0) no-repeat -1px 0/4px 6px; +} + +.icon.phone::before { + width: 20px; + height: 20px; + border: 6px double; + border-top-color: transparent; + border-bottom-color: transparent; + border-left-color: transparent; + border-radius: 50%; + transform: rotate(-45deg); + bottom: 2px; + left: 2px; +} + +/* ICON - PLUS */ +.icon.plus, +.icon.plus::after, +.icon.plus::before { + display: block; + box-sizing: border-box; +} + +.icon.plus::after, +.icon.plus::before { + border-radius: 10px; + background: currentColor; +} + +.icon.plus { + position: relative; + transform: scale(var(--icon-scale, 1)); + width: 16px; + height: 16px; +} + +.icon.plus::after { + content: ""; + position: absolute; + width: 2px; + height: 16px; + top: 0; + left: 7px; +} + +.icon.plus::before { + content: ""; + position: absolute; + width: 16px; + height: 2px; + top: 7px; + left: 0; +} + +/* ICON - REPLY */ +.icon.reply { + box-sizing: border-box; + position: relative; + display: block; + transform: scale(var(--icon-scale, 1)); + width: 16px; + height: 16px; + box-shadow: -6px -6px 0 -4px; +} + +.icon.reply::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + width: 8px; + height: 8px; + border: 2px solid; + border-radius: 1px; + right: 0; + bottom: 0; +} + +.icon.reply::after { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + background: currentColor; + width: 2px; + height: 10px; + transform: rotate(-45deg); + bottom: 8px; + left: 2px; + border-radius: 4px; +} + +/* ICON - RESOURCES */ +.icon.resources, +.icon.resources::after { + display: block; + box-sizing: border-box; + border-radius: 22px; +} + +.icon.resources { + position: relative; + transform: scale(var(--icon-scale, 1)); + width: 20px; + height: 20px; + border: 2px solid transparent; +} + +.icon.resources::after { + content: ""; + position: absolute; + width: 4px; + height: 4px; + background: currentColor; + top: 6px; + left: 6px; + box-shadow: + 0 7px 0 1px, + 0 -7px 0 1px, + -7px 0 0 1px, + 7px 0 0 1px; +} + +/* ICON - SEND */ +.icon.send { + box-sizing: border-box; + position: relative; + display: block; + transform: scale(var(--icon-scale, 1)); + width: 22px; + height: 22px; + border: 2px solid; + border-radius: 4px; +} + +.icon.send::after, +.icon.send::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + width: 2px; + height: 8px; + border-right: 2px solid; + top: 5px; + right: 5px; +} + +.icon.send::after { + width: 6px; + height: 6px; + border-bottom: 2px solid; + transform: rotate(-45deg); + right: 9px; + top: 6px; +} + +/* ICON - TALK */ +.icon.talk { + transform: scale(var(--icon-scale, 1)); +} + +.icon.talk, +.icon.talk::after { + box-sizing: border-box; + position: relative; + display: block; + width: 20px; + height: 20px; + border-radius: 100px; + border: 2px dotted currentColor; +} + +.icon.talk::after { + content: ""; + position: absolute; + width: 8px; + height: 8px; + border: 1px solid transparent; + top: 4px; + left: 4px; + box-shadow: + 0 0 0 2px, + inset 0 0 0 2px currentColor; +} + +/* ICON - TRASH */ +.icon.trash { + box-sizing: border-box; + position: relative; + display: block; + transform: scale(var(--icon-scale, 1)); + width: 10px; + height: 12px; + border: 2px solid transparent; + box-shadow: + 0 0 0 2px, + inset -2px 0 0, + inset 2px 0 0; + border-bottom-left-radius: 1px; + border-bottom-right-radius: 1px; + margin-top: 4px; +} + +.icon.trash::after, +.icon.trash::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; +} + +.icon.trash::after { + background: currentColor; + border-radius: 3px; + width: 16px; + height: 2px; + top: -4px; + left: -5px; +} + +.icon.trash::before { + width: 10px; + height: 4px; + border: 2px solid; + border-bottom: transparent; + border-top-left-radius: 2px; + border-top-right-radius: 2px; + top: -7px; + left: -2px; +} + +/* ICON - USER */ +.icon.user, +.icon.user::after, +.icon.user::before { + display: block; + box-sizing: border-box; + border: 2px solid; + border-radius: 100px; +} + +.icon.user { + overflow: hidden; + transform: scale(var(--icon-scale, 1)); + width: 22px; + height: 22px; + position: relative; +} + +.icon.user::after, +.icon.user::before { + content: ""; + position: absolute; + top: 2px; + left: 5px; + width: 8px; + height: 8px; +} + +.icon.user::after { + border-radius: 200px; + top: 11px; + left: 0px; + width: 18px; + height: 18px; +} + +/* ICON - WORK */ +.icon.work { + box-sizing: border-box; + position: relative; + display: block; + transform: scale(var(--icon-scale, 1)); + width: 20px; + height: 20px; + border: 2px solid; + border-radius: 22px; +} + +.icon.work::after, +.icon.work::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; +} + +.icon.work::before { + width: 12px; + height: 6px; + border: 2px solid; + border-top-left-radius: 100px; + border-top-right-radius: 100px; + top: 2px; + left: 2px; + border-bottom: 0; +} + +.icon.work::after { + width: 18px; + height: 2px; + background: currentColor; + left: -1px; + top: 8px; +} + +/* ICONS - RIGHT/LEFT */ +.icon.right { + box-sizing: border-box; + position: relative; + display: block; + transform: scale(var(--icon-scale, 1)); + width: 22px; + height: 22px; +} + +.icon.right::after, +.icon.right::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + width: 8px; + height: 8px; + border-right: 2px solid; + border-top: 2px solid; + transform: rotate(45deg); + top: 7px; + right: 6px; +} + +.icon.right::after { + right: 11px; +} + +.icon.left { + box-sizing: border-box; + position: relative; + display: block; + transform: scale(var(--icon-scale, 1)); + width: 22px; + height: 22px; +} + +.icon.left::after, +.icon.left::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + width: 8px; + height: 8px; + border-left: 2px solid; + border-bottom: 2px solid; + transform: rotate(45deg); + top: 7px; + left: 6px; +} + +.icon.left::after { + left: 11px; +} + +.icon.map-pin { + box-sizing: border-box; + position: relative; + display: block; + transform: rotate(45deg) scale(var(--icon-scale, 1)); + width: 18px; + height: 18px; + border-radius: 100% 100% 0 100%; + border: 2px solid; + margin-top: -4px; +} + +.icon.map-pin::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + width: 8px; + height: 8px; + border: 2px solid; + top: 3px; + left: 3px; + border-radius: 40px; +} + + +/* AUDIO PLAYER ICONS */ +.icon.skip-back { + box-sizing: border-box; + position: relative; + display: block; + transform: scale(var(--icon-scale, 1)); + width: 22px; + height: 22px; + border: 2px solid; + border-radius: 4px; +} + +.icon.skip-back::after, +.icon.skip-back::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + height: 8px; + top: 5px; +} + +.icon.skip-back::before { + width: 2px; + border-radius: 2px; + right: 11px; + background: currentColor; +} + +.icon.skip-back::after { + width: 0; + border-top: 4px solid transparent; + border-bottom: 4px solid transparent; + border-right: 5px solid; + right: 5px; +} + +.icon.rewind { + box-sizing: border-box; + position: relative; + display: block; + transform: scale(var(--icon-scale, 1)); + border: 2px solid; + border-radius: 4px; + width: 22px; + height: 22px; +} + +.icon.rewind::after, +.icon.rewind::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + width: 6px; + height: 6px; + border-left: 2px solid; + border-bottom: 2px solid; + transform: rotate(45deg); + top: 6px; + left: 5px; +} + +.icon.rewind::after { + left: 9px; +} + +.icon.play { + box-sizing: border-box; + position: relative; + display: block; + transform: scale(var(--icon-scale, 1)); + width: 22px; + height: 22px; + border: 2px solid; + border-radius: 4px; +} + +.icon.play::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + width: 0; + height: 10px; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-left: 6px solid; + top: 4px; + left: 7px; +} + +.icon.pause { + box-sizing: border-box; + position: relative; + display: block; + transform: scale(var(--icon-scale, 1)); + width: 22px; + height: 22px; + border: 2px solid; + border-radius: 4px; +} + +.icon.pause::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + width: 6px; + height: 6px; + left: 6px; + top: 6px; + border-left: 2px solid; + border-right: 2px solid; +} + +.icon.fastforward { + box-sizing: border-box; + position: relative; + display: block; + transform: scale(var(--icon-scale, 1)); + border: 2px solid; + border-radius: 4px; + width: 22px; + height: 22px; +} + +.icon.fastforward::after, +.icon.fastforward::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + width: 6px; + height: 6px; + border-right: 2px solid; + border-top: 2px solid; + transform: rotate(45deg); + top: 6px; + right: 5px; +} + +.icon.fastforward::after { + right: 9px; +} + +.icon.skip-forward { + box-sizing: border-box; + position: relative; + display: block; + transform: scale(var(--icon-scale, 1)); + width: 22px; + height: 22px; + border: 2px solid; + border-radius: 4px; +} + +.icon.skip-forward::after, +.icon.skip-forward::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + height: 8px; + top: 5px; +} + +.icon.skip-forward::before { + width: 2px; + border-radius: 2px; + left: 11px; + background: currentColor; +} + +.icon.skip-forward::after { + width: 0; + border-top: 4px solid transparent; + border-bottom: 4px solid transparent; + border-left: 5px solid; + left: 5px; +} diff --git a/public/index.html b/public/index.html index 2b5a262..09d55ed 100644 --- a/public/index.html +++ b/public/index.html @@ -10,6 +10,7 @@ + diff --git a/public/signup_login_wall.html b/public/signup_login_wall.html index 23eb841..a1bc6ce 100644 --- a/public/signup_login_wall.html +++ b/public/signup_login_wall.html @@ -17,19 +17,9 @@ } #auth-container { - width: 95%; - max-height: calc(min(90vh,900px)); - border-radius: 10px; position: relative; - background: var(--bg-lighter); - max-width: 40em; - margin: 0 auto; - border-radius: calc( var(--border-radius) * 2.5); - padding: 2em 1em; + padding: 8em 4em; overflow-y: scroll; - - transition: all 0.33s ease; - animation: zoomsettle 0.4s ease; } #signup-tab,