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,