/* src/styles/_global.css */
:root {
--app-height: 100vh;
--notes-width: 50em;
--page-width: 1600px;
--page-gap: 1em;
--links-width: auto;
--link-padding: 0.3em;
--link-outer-radius: 0.6em;
--fade-in: 400ms;
--blur: 15px;
--brightness: 0.8;
--load-time-transition: 0ms;
--solid-background: black;
--average-color: black;
--text-shadow-alpha: 0.2;
--notes-background-alpha: 0.1;
--searchbar-background-alpha: 0.1;
--font-family:
-apple-system,
system-ui,
Ubuntu,
Roboto,
"Open Sans",
"Segoe UI",
"Helvetica Neue";
--monospace-font-family:
Consolas,
Monaco,
Ubuntu Mono,
monospace;
--font-weight-clock: 200;
--font-weight: 400;
--font-size: 1em;
--pomodoro-font-size: 14px;
--clock-size: 6em;
--greeting-size: 3em;
--supporters-notif-height: -171px;
--supporters-notif-background: "https://images.unsplash.com/photo-1457269449834-928af64c684d?q=80&w=1074&auto=format&fit=crop";
--red:
230,
75,
67;
--orange:
255,
128,
0;
--color-red: #e64b43;
--color-green: #2ed058;
--color-blue: #2990ff;
--color-orange: #fe9030;
--border-radius: 20px;
--out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
}
[data-theme=light] {
--color-text: #222222;
--color-param:
255,
255,
255;
--color-settings: #f2f2f7;
--color-areas: #f2f2f7;
--color-areas-text: var(--color-blue);
--color-input: #eaeaee;
--color-input-outside: #e3e3ea;
--color-focused: #dddde4;
--color-border: #c8c7cc;
--color-placeholder: #7c7d7e;
--color-light-text: #5a5858;
--color-dialog: #fffb;
--color-dialog-border: #3334;
--color-dialog-highlight: #fff4;
--color-dialog-input-text: #716f6d;
--color-dialog-input-bg: rgba(106, 104, 111, 0.12);
}
[data-theme=dark] {
--color-text: #eeeeee;
--color-light-text: #929294;
--color-param: 28, 28, 30;
--color-settings: #00000073;
--color-input: #39383d;
--color-input-outside: #39383d;
--color-border: var(--color-input);
--color-areas: var(--color-input);
--color-areas-text: var(--color-text);
--color-placeholder: #a4a5a6;
--color-focused: #323135;
--color-dialog: #191919aa;
--color-dialog-border: #fff4;
--color-dialog-highlight: #fff2;
--color-dialog-input-text: #a4a7a8;
--color-dialog-input-bg: rgba(110, 107, 114, 0.25);
}
[data-browser=edge] .firefox-only,
[data-browser=other] .firefox-only,
[data-browser=opera] .firefox-only,
[data-browser=chrome] .firefox-only,
[data-browser=safari] .firefox-only,
[data-browser=edge] .safari-only,
[data-browser=other] .safari-only,
[data-browser=opera] .safari-only,
[data-browser=chrome] .safari-only,
[data-browser=firefox] .safari-only,
[data-platform=safari] .not-safari,
[data-browser=edge] .not-edge,
[data-platform=online] .not-online {
display: none;
}
#interface,
input[type=range],
input[type=checkbox] {
color-scheme: only light;
}
body {
margin: 0;
opacity: 1;
color: white;
font-size: 1em;
font-family:
-apple-system,
system-ui,
Ubuntu,
Roboto,
"Open Sans",
"Segoe UI",
"Helvetica Neue";
text-align: center;
overflow-x: hidden;
overflow-y: overlay;
touch-action: manipulation;
user-select: none;
-webkit-user-select: none;
background-color: var(--average-color);
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
body p,
body h3 {
margin: 0;
}
body hr {
border: none;
border-bottom: 1px solid var(--color-border);
margin: 10px auto;
display: block;
}
body li {
list-style: none;
}
body button,
body select {
cursor: pointer;
}
body a,
body input,
body textarea,
body select,
body button {
border: none;
outline: none;
font-family: inherit;
box-sizing: border-box;
}
body.tabbing #settings a:focus,
body.tabbing input:focus,
body.tabbing textarea:focus,
body.tabbing .pce-focus,
body.tabbing select:focus,
body.tabbing button:focus,
body.tabbing button:focus,
body.tabbing #bookmarks li:focus-visible,
body.tabbing #link-title div:focus-visible,
body.tabbing #linkblocks .link:has(a:focus-visible),
body.tabbing #linkblocks .link-folder:focus-visible,
body.tabbing #notes_toolbar:focus-visible,
body.tabbing input:focus-visible+.slider,
body.tabbing #focus-toggle:focus,
body.tabbing .pomodoro_mode:focus {
outline-width: 2px;
outline-color: var(--color-blue);
outline-style: dashed;
}
body.tabbing #linkblocks .link {
border-radius: 10px;
outline-offset: 3px;
}
body.tabbing button.btn-red:focus-visible {
outline-color: var(--color-red);
}
body.loading #settings,
body.loading #interface,
body.loading #contextmenu,
body.loading #show-settings,
body.loading #credit-container {
opacity: 0;
}
body.init #interface,
body.init #show-settings,
body.init #credit-container {
transition: opacity var(--load-time-transition);
}
body.init #show-settings button {
transition: background-color 0s;
}
body.potato #bookmarks,
body.potato #bookmarks::backdrop,
body.potato #element-mover,
body.potato .move-overlay {
-webkit-backdrop-filter: none;
backdrop-filter: none;
transition: none;
}
body.potato #supporters-modal-container,
body.potato #linkblocks.in-folder #link-list {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
body.potato #bookmarks::backdrop {
background-color: rgba(34, 34, 34, 0.5333333333);
}
[data-theme=dark] body.potato #supporters-modal {
background-color: #1a1a1a;
}
[data-theme=light] body.potato #supporters-modal {
background-color: #e2e2e2;
}
body.potato #editlink,
body.potato #bookmarks,
body.potato #element-mover {
background-color: rgb(var(--color-param));
}
body.blurred .move-overlay,
body.blurred .link-folder>div {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
body .he_hidden,
body #time .analog.he_hidden,
body #tempContainer.he_hidden {
display: none;
}
button,
select,
input {
user-select: none;
font-size: 13px;
}
dialog a,
aside a {
color: var(--color-orange);
border-radius: 4px;
text-decoration: none;
}
dialog a:hover,
aside a:hover {
text-decoration: underline;
}
body::-webkit-scrollbar {
display: none;
}
aside::-webkit-scrollbar,
textarea::-webkit-scrollbar,
.pce-overlays::-webkit-scrollbar {
width: 5px;
}
aside::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track,
.pce-overlays::-webkit-scrollbar-track {
box-shadow: inset 0 0 10px 10px transparent;
border: solid 3px transparent;
}
aside::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb,
.pce-overlays::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 10px 10px var(--color-border);
border: solid 3px transparent;
border-radius: 100px;
}
/* src/styles/interface/global.css */
#interface {
position: relative;
display: grid;
width: 100%;
gap: var(--page-gap);
max-width: var(--page-width);
min-height: 100dvh;
padding: 4em 1em 6em 1em;
margin: 0 auto;
box-sizing: border-box;
will-change: transform;
font-size: var(--font-size);
font-family: var(--font-family);
font-weight: var(--font-weight);
text-shadow: 1px 2px 6px rgba(0, 0, 0, var(--text-shadow-alpha));
grid-template-areas: var(--grid);
transition: opacity var(--load-time-transition), transform 0.33s;
}
@supports not (min-height: 100dvh) {
#image-background-overlay,
#interface {
min-height: 100vh;
}
}
#interface.pushed {
transform: translateX(-100px);
}
.move-edit #main,
.move-edit #time,
.move-edit #linkblocks,
.move-edit #sb_container,
.move-edit #notes_container,
.move-edit #quotes_container,
.move-edit #pomodoro_container {
z-index: 3;
cursor: pointer;
user-select: none;
pointer-events: none;
}
#main,
#time,
#linkblocks,
#sb_container,
#notes_container,
#quotes_container,
#pomodoro_container {
place-self: center;
}
/* src/styles/interface/background.css */
#background-media .video-looper {
transition: opacity var(--video-fadetime);
}
#background-media .video-looper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
&.hiding {
opacity: 0;
transition: opacity var(--video-fadetime);
}
}
#background-wrapper {
position: fixed;
width: 100%;
height: 100%;
min-height: var(--app-height);
min-height: 100lvh;
overflow: hidden;
z-index: -1;
transition: opacity var(--fade-in);
}
#background-wrapper .background-image.pixelated {
image-rendering: pixelated;
}
#background-media .video-looper,
#background-media .background-image,
#background-color,
#background-texture {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#background-wrapper.hidden {
opacity: 0;
}
#background-wrapper #background-media,
#background-wrapper[data-type=color] #background-color {
display: block;
}
#background-wrapper #background-color,
#background-wrapper[data-type=color] #background-media {
display: none;
}
#background-media .video-looper,
#background-media .background-image {
object-fit: cover;
background-size: cover;
background-position: center;
transform: scale(1.1);
filter: blur(var(--blur)) brightness(var(--brightness));
}
#background-media [data-res=small] {
image-rendering: pixelated;
}
#background-media .video-looper,
#background-media .background-image {
transition: opacity 1.2s;
}
#background-media .video-looper.hiding,
#background-media .background-image.hiding {
opacity: 0;
}
[data-browser=safari] #background-media .video-looper,
[data-browser=safari] #background-media .background-image {
transform: scale(1.1) translateX(0px) translate3d(0, 0, 0);
}
body.init #background-media .video-looper,
body.init #background-media .background-image {
transition: none;
}
#background-color {
background-color: var(--solid-background);
}
#background-texture {
background-position: center center;
}
#background-wrapper[data-texture=grain] #background-texture {
opacity: var(--texture-opacity);
background-size: var(--texture-size);
background-image: url("./grain-SNSVLB6Q.png");
background-repeat: repeat;
}
#background-wrapper[data-texture=verticalDots] #background-texture {
opacity: var(--texture-opacity);
background-size: var(--texture-size) var(--texture-size);
background-image: radial-gradient(var(--texture-color) 1.25px, transparent 0);
}
#background-wrapper[data-texture=diagonalDots] #background-texture {
opacity: var(--texture-opacity);
background-image: radial-gradient(var(--texture-color) 1.25px, transparent 1.25px), radial-gradient(var(--texture-color) 1.25px, transparent 1.25px);
background-size: var(--texture-size) var(--texture-size);
background-position: 0 0, calc(var(--texture-size) / 2) calc(var(--texture-size) / 2);
}
#background-wrapper[data-texture=checkerboard] #background-texture {
opacity: var(--texture-opacity);
background-image:
repeating-linear-gradient(45deg,
var(--texture-color) 25%,
transparent 25%,
transparent 75%,
var(--texture-color) 75%,
var(--texture-color)),
repeating-linear-gradient(45deg,
var(--texture-color) 25%,
transparent 25%,
transparent 75%,
var(--texture-color) 75%,
var(--texture-color));
background-position: 0 0, calc(var(--texture-size) / 2) calc(var(--texture-size) / 2);
background-size: var(--texture-size) var(--texture-size);
}
#background-wrapper[data-texture=isometric] #background-texture {
opacity: var(--texture-opacity);
background-image:
linear-gradient(30deg,
var(--texture-color) 12%,
transparent 12.5%,
transparent 87%,
var(--texture-color) 87.5%,
var(--texture-color)),
linear-gradient(150deg,
var(--texture-color) 12%,
transparent 12.5%,
transparent 87%,
var(--texture-color) 87.5%,
var(--texture-color)),
linear-gradient(30deg,
var(--texture-color) 12%,
transparent 12.5%,
transparent 87%,
var(--texture-color) 87.5%,
var(--texture-color)),
linear-gradient(150deg,
var(--texture-color) 12%,
transparent 12.5%,
transparent 87%,
var(--texture-color) 87.5%,
var(--texture-color)),
linear-gradient(60deg,
var(--texture-color-transparent) 25%,
transparent 25.5%,
transparent 75%,
var(--texture-color-transparent) 75%,
var(--texture-color-transparent)),
linear-gradient(60deg,
var(--texture-color-transparent) 25%,
transparent 25.5%,
transparent 75%,
var(--texture-color-transparent) 75%,
var(--texture-color-transparent));
background-size: 44px 77px;
background-position:
0 0,
0 0,
22px 39px,
22px 39px,
0 0,
22px 39px;
}
#background-wrapper[data-texture=topographic] #background-texture {
background-color: var(--texture-color);
opacity: var(--texture-opacity);
mask-image: url('data:image/svg+xml,');
mask-repeat: repeat;
mask-size: var(--texture-size);
mask-position: center;
-webkit-mask-image: url('data:image/svg+xml,');
-webkit-mask-repeat: repeat;
-webkit-mask-size: var(--texture-size);
}
#background-wrapper[data-texture=grid] #background-texture {
background-image:
linear-gradient(var(--texture-color) 2px, transparent 2px),
linear-gradient(to right,
var(--texture-color) 2px,
transparent 2px);
background-size: var(--texture-size) var(--texture-size);
opacity: var(--texture-opacity);
}
#background-wrapper[data-texture=verticalLines] #background-texture {
background-image:
repeating-linear-gradient(to right,
var(--texture-color),
var(--texture-color) 2px,
transparent 2px,
transparent);
background-size: var(--texture-size) var(--texture-size);
opacity: var(--texture-opacity);
}
#background-wrapper[data-texture=horizontalLines] #background-texture {
background-image:
repeating-linear-gradient(0deg,
var(--texture-color),
var(--texture-color) 2px,
transparent 2px,
transparent);
background-size: var(--texture-size) var(--texture-size);
opacity: var(--texture-opacity);
}
#background-wrapper[data-texture=diagonalStripes] #background-texture {
background-image:
repeating-linear-gradient(45deg,
transparent,
transparent var(--texture-size),
var(--texture-color) var(--texture-size),
var(--texture-color) calc(var(--texture-size) * 2));
opacity: var(--texture-opacity);
}
#background-wrapper[data-texture=verticalStripes] #background-texture {
background-image:
linear-gradient(90deg,
transparent 50%,
var(--texture-color) 50%);
background-size: var(--texture-size) var(--texture-size);
opacity: var(--texture-opacity);
}
#background-wrapper[data-texture=horizontalStripes] #background-texture {
background-image:
linear-gradient(0deg,
transparent 50%,
var(--texture-color) 50%);
background-size: var(--texture-size) var(--texture-size);
opacity: var(--texture-opacity);
}
#background-wrapper[data-texture=diagonalLines] #background-texture {
background-image:
repeating-linear-gradient(45deg,
var(--texture-color) 0,
var(--texture-color) 2px,
transparent 0,
transparent 50%);
background-size: var(--texture-size) var(--texture-size);
opacity: var(--texture-opacity);
}
#background-wrapper[data-texture=aztec] #background-texture {
background-color: var(--texture-color);
opacity: var(--texture-opacity);
mask-image: url('data:image/svg+xml,');
mask-repeat: repeat;
mask-size: var(--texture-size);
mask-position: center;
-webkit-mask-image: url('data:image/svg+xml,');
-webkit-mask-repeat: repeat;
-webkit-mask-size: var(--texture-size);
}
#background-wrapper[data-texture=circuitBoard] #background-texture {
background-color: var(--texture-color);
opacity: var(--texture-opacity);
mask-image: url('data:image/svg+xml,');
mask-repeat: repeat;
mask-size: var(--texture-size);
mask-position: center;
-webkit-mask-image: url('data:image/svg+xml,');
-webkit-mask-repeat: repeat;
-webkit-mask-size: var(--texture-size);
}
#background-wrapper[data-texture=ticTacToe] #background-texture {
background-color: var(--texture-color);
opacity: var(--texture-opacity);
mask-image: url('data:image/svg+xml,');
mask-repeat: repeat;
mask-size: var(--texture-size);
mask-position: center;
-webkit-mask-image: url('data:image/svg+xml,');
-webkit-mask-repeat: repeat;
-webkit-mask-size: var(--texture-size);
}
#background-wrapper[data-texture=endlessClouds] #background-texture {
background-color: var(--texture-color);
opacity: var(--texture-opacity);
mask-image: url('data:image/svg+xml,');
mask-repeat: repeat;
mask-size: var(--texture-size);
mask-position: center;
-webkit-mask-image: url('data:image/svg+xml,');
-webkit-mask-repeat: repeat;
-webkit-mask-size: var(--texture-size);
}
#background-wrapper[data-texture=vectorGrain] #background-texture {
background-color: var(--texture-color);
opacity: var(--texture-opacity);
mask-mode: luminance;
mask-image: url('data:image/svg+xml,%0A%0A');
mask-repeat: repeat;
mask-size: var(--texture-size);
mask-position: center;
-webkit-mask-image: url('data:image/svg+xml,%0A%0A');
-webkit-mask-repeat: repeat;
-webkit-mask-size: var(--texture-size);
}
#background-wrapper[data-texture=waves] #background-texture {
background-color: var(--texture-color);
opacity: var(--texture-opacity);
mask-image: url('data:image/svg+xml,');
mask-repeat: repeat;
mask-size: var(--texture-size);
mask-position: center;
-webkit-mask-image: url('data:image/svg+xml,');
-webkit-mask-repeat: repeat;
-webkit-mask-size: var(--texture-size);
}
#background-wrapper[data-texture=honeycomb] #background-texture {
background-color: var(--texture-color);
opacity: var(--texture-opacity);
mask-mode: luminance;
mask-image: url('data:image/svg+xml,');
mask-repeat: repeat;
mask-size: var(--texture-size);
mask-position: center;
-webkit-mask-image: url('data:image/svg+xml,');
-webkit-mask-repeat: repeat;
-webkit-mask-size: var(--texture-size);
}
/* src/styles/interface/showsettings.css */
#show-settings {
position: fixed;
bottom: 0;
right: 0;
padding-right: 20px;
padding-bottom: 20px;
z-index: 3;
transition: opacity 0.1s var(--out-cubic);
}
#show-settings button {
display: flex;
align-items: center;
justify-content: center;
height: 4em;
width: 4em;
padding: 0;
border-radius: 13px;
background-color: transparent;
backdrop-filter: blur(0);
-webkit-backdrop-filter: blur(0);
cursor: pointer;
transition: background-color 0.1s var(--out-cubic);
}
#show-settings img {
width: 2.6em;
transition: transform 0.33s var(--out-cubic);
}
#show-settings.he_hidden {
display: flex;
opacity: 0;
}
#show-settings.he_hidden.shown {
opacity: 0.5;
}
#show-settings.he_hidden:hover {
opacity: 1;
}
#show-settings:hover img {
transform: rotate(20deg);
}
#show-settings.shown button {
background-color: rgba(170, 170, 170, 0.4);
backdrop-filter: blur(1em);
-webkit-backdrop-filter: blur(1em);
border: 1px solid rgba(255, 255, 255, 0.075);
}
#show-settings.shown button:hover {
opacity: 1;
background-color: rgba(102, 102, 102, 0.4);
}
#show-settings.shown img {
transform: rotate(60deg);
}
/* src/styles/interface/credits.css */
#credit-container,
#show-settings {
position: fixed;
pointer-events: all;
transition: opacity 0.1s;
}
#credit-container {
position: fixed;
bottom: 0;
left: 0;
opacity: 0;
padding-left: 28px;
padding-bottom: 28px;
max-width: 50%;
display: flex;
align-items: center;
pointer-events: none;
font-family: var(--font-family);
font-weight: var(--font-weight);
}
#credit-container.shown {
opacity: 1;
pointer-events: all;
}
#credit-container.shown:hover .exif,
#credit-container.shown:hover .save {
opacity: 1;
}
#credit.hidden {
display: none;
}
#credit {
text-align: left;
font-size: 13px;
line-height: 18px;
color: #fff9;
}
#credit a {
color: #fff9;
text-decoration: none;
}
#credit a:hover {
color: #fffe;
}
.exif {
opacity: 0;
transition: opacity 0.4s;
}
/* src/styles/interface/error.css */
#error {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
user-select: auto;
pointer-events: all;
top: 5%;
left: 5%;
width: calc(90% - 100px);
max-width: 500px;
padding: 50px;
opacity: 0;
color: #fff;
border-radius: 20px;
background-color: rgba(0, 0, 0, 0.1333333333);
backdrop-filter: blur(2em);
-webkit-backdrop-filter: blur(2em);
transition: opacity 0.4s;
z-index: 1;
}
#error pre {
width: calc(100% - 32px);
overflow: hidden;
user-select: all;
pointer-events: all;
padding: 8px 16px;
text-align: left;
background-color: rgba(17, 17, 17, 0.2666666667);
margin-top: 3em;
}
#error textarea {
width: calc(100% - 32px);
height: 100px;
padding: 8px 16px;
color: #fff;
font-size: 13px;
white-space: pre;
resize: vertical;
overflow-x: hidden;
border: none;
font-family: var(--monospace-font-family);
background-color: rgba(17, 17, 17, 0.2666666667);
}
#error a {
color: #fff;
}
#error button {
cursor: pointer;
padding: 5px 10px;
border-radius: 5px;
border: none;
background-color: var(--color-red);
color: #fff;
}
#error .error-explain {
margin-top: 2em;
margin-bottom: 3em;
}
#error .error-buttons {
display: flex;
justify-content: space-around;
width: 300px;
}
#error .error-buttons-close {
background-color: var(--color-blue);
}
/* src/styles/settings/global.css */
aside {
position: fixed;
top: 0;
bottom: 0;
z-index: 2;
right: -450px;
height: 100vh;
min-width: 333px;
width: 450px;
padding: 0 21px;
background-color: var(--color-settings);
color: var(--color-text);
backdrop-filter: blur(12px);
font-size: 15px;
font-weight: 400;
text-shadow: none;
text-align: initial;
overflow-y: scroll;
overflow-x: hidden;
touch-action: pan-y;
box-sizing: border-box;
transition: transform 0.33s, background-color 0.33s;
}
aside.hidden {
display: none;
}
aside.shown {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
box-shadow: 0px 1px 20px 1px rgba(0, 0, 0, 0.15);
}
aside.see-through {
opacity: 0.2;
}
aside.init .dropdown {
transition: max-height 0s;
}
.dropdown {
max-height: 0;
overflow: hidden;
visibility: hidden;
transition:
max-height 0.3s,
padding 0.2s,
margin 0.2s,
visibility 0s 0.3s;
}
.all .as,
.dropdown.shown {
visibility: visible;
transition:
max-height 0.3s,
padding 0.2s,
margin 0.2s,
visibility 0s 0s;
}
aside.change-theme .tooltip,
aside.change-theme .param,
aside.change-theme select,
aside.change-theme button,
aside.change-theme input,
aside.change-theme hr,
aside.change-theme {
transition-duration: 0.33s;
transition-property:
background-color,
border-color,
color;
}
aside.change-theme .as_fonts,
aside.change-theme #cssEditor,
aside.change-theme #time_options,
aside.change-theme #main_options,
aside.change-theme #notes_options,
aside.change-theme #quotes_options,
aside.change-theme #pomodoro_options,
aside.change-theme #searchbar_options,
aside.change-theme #settings-managment {
display: none;
}
/* src/styles/settings/other.css */
#i_favicon {
width: 33%;
padding: 0;
text-align: center;
}
#i_favicon::placeholder {
opacity: 0.7;
filter: grayscale(0.35);
}
#i_tabtitle {
width: 100%;
}
#f_addlink>div>div {
display: flex;
gap: 4px;
}
#f_addlink {
width: 66%;
}
#i_addlink-title {
width: 40%;
}
#b_showtitles,
#b_showbackgrounds {
opacity: 0.7;
padding: 0 4px;
min-width: 30px;
font-size: 14px;
font-weight: bold;
font-family: serif;
text-align: center;
background-color: transparent;
}
#b_showtitles:hover,
#b_showbackgrounds:hover {
opacity: 1;
}
#b_showbackgrounds {
display: flex;
justify-content: center;
align-items: center;
}
#b_showtitles span,
#b_showbackgrounds span {
justify-content: center;
align-items: center;
pointer-events: none;
}
#b_showbackgrounds span {
width: 14px;
height: 14px;
display: block;
border-radius: 4px;
border: 2px solid var(--color-text);
box-sizing: border-box;
}
[data-theme=light] #b_showtitles,
[data-theme=light] #b_showbackgrounds span {
color: var(--color-light-text);
border-color: var(--color-light-text);
}
#b_showtitles.on,
#b_showbackgrounds.on {
opacity: 1;
background-color: var(--color-input);
}
#worldclocks_options .wrapper {
padding: 0 0 0 4px;
}
#worldclocks-list {
width: 66%;
}
#worldclocks-list .split-inputs {
width: 100%;
padding: 2px;
box-sizing: border-box;
}
#worldclocks-list input,
#worldclocks-list select {
width: 100%;
}
#i_city {
text-transform: capitalize;
}
#quotes_userlist .wrapper {
flex-wrap: wrap;
}
#i_customfont {
text-transform: capitalize;
}
#i_weight option.hidden {
display: none;
}
#e_weight,
#e_size {
width: 50px;
}
/* src/styles/settings/dropdowns.css */
#supporters-notif-container.shown {
max-height: 180px;
}
#background-video-sound-options.shown {
max-height: 70px;
}
#solid_options.shown {
max-height: 400px;
}
#local_options.shown {
max-height: 585px;
}
#background-urls-option.shown {
max-height: calc(80vh + 80px);
}
.all #background-provider-option.shown {
max-height: 170px;
}
#background-user-coll-option.shown {
max-height: 105px;
}
#background-user-search-option.shown {
max-height: 60px;
}
#background-file-options.shown {
max-height: 180px;
}
#thumbnail-action-buttons.shown {
max-height: 60px;
}
#background-freq-option.shown {
max-height: 60px;
}
#background-filters-options.shown {
max-height: 300px;
}
#background-texture-options.shown {
max-height: 185px;
}
#background-texture-color-option.shown {
max-height: 60px;
}
#time_options.shown {
max-height: 920px;
}
#digital_options.shown {
max-height: 180px;
}
#analog_options.shown {
max-height: 280px;
}
#greetings_options.shown {
max-height: 430px;
}
#greetingscustom_options.shown {
max-height: 300px;
}
#ampm_label.shown {
max-height: 60px;
}
#ampm_position.shown {
max-height: 60px;
}
#timezone_options.shown {
max-height: 60px;
}
#worldclocks_options.shown {
max-height: 200px;
}
#worldclocks-list .dropdown:not(.shown) {
padding: 0;
}
#worldclocks-list .dropdown.shown {
max-height: 60px;
}
#main_options.shown {
max-height: 885px;
}
#weather_provider.shown {
max-height: 60px;
}
#location_options.shown {
max-height: 120px;
}
#quicklinks_options.shown {
max-height: 423px;
}
#notes_options.shown {
max-height: 200px;
}
#searchbar_options.shown {
max-height: 440px;
}
#searchbar_request.shown {
max-height: 120px;
}
#quotes_options.shown {
max-height: 450px;
}
#quotes_url.shown {
max-height: 120px;
}
#quotes_userlist.shown {
max-height: 450px;
}
#pomodoro_options.shown {
max-height: 250px;
}
#disabled-sync.shown {
max-height: 105px;
}
#url-sync.shown {
max-height: 220px;
}
#gist-sync.shown {
max-height: 220px;
}
.all .as_visuals {
max-height: 285px;
}
.all .as_provider.shown {
max-height: 120px;
}
.all .as_video_sound {
max-height: 60px;
}
.all .as_texture {
max-height: 245px;
}
.all .as_fadein {
max-height: 60px;
}
.all .as_link {
max-height: 360px;
}
.all .as_collection {
max-height: 130px;
}
.all .as_timedate {
max-height: 430px;
}
.all .as_searchbar {
max-height: 320px;
}
.all .as_weather {
max-height: 345px;
}
.all .as_clocktype {
max-height: 300px;
}
.all .as_fonts {
max-height: 350px;
}
.all .as_page {
max-height: 400px;
}
.all .as_css {
max-height: 3100px;
padding-top: 4px;
}
.all .as_quote_type {
max-height: 380px;
}
.all .as_notes {
max-height: 210px;
}
.all .as_updates {
max-height: 280px;
}
.all .as_sync {
max-height: 280px;
}
.all .as_pomodoro {
max-height: 190px;
}
.all .as_greetings {
max-height: 365px;
}
/* src/styles/settings/dragzone.css */
#mobile-drag-zone {
touch-action: none;
position: sticky;
display: none;
top: 0;
width: 100%;
padding: 20px 12px 12px;
cursor: grab;
z-index: 4;
box-sizing: border-box;
transition: transform 0.4s;
}
#mobile-drag-zone div {
width: 50px;
height: 8px;
margin: auto;
border-radius: 4px;
background-color: var(--color-focused);
transition: width 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#mobile-drag-zone:active {
cursor: grabbing;
}
#mobile-drag-zone:active div {
width: 75px;
background-color: var(--color-border);
}
/* src/styles/settings/notifications.css */
#settings-notifications {
margin-top: 2.2em;
}
#settings-notifications .param,
#settings-notifications {
position: absolute;
visibility: hidden;
}
#settings-notifications .param.shown,
#settings-notifications.shown {
position: static;
visibility: visible;
}
#settings-notifications .param {
margin-bottom: 1em;
}
#settings-notifications label {
padding-inline-end: 1em;
}
/* src/styles/settings/backgrounds.css */
.freq_wrap select {
width: 100%;
}
#background-local-actions>div {
display: flex;
gap: 8px;
}
#lbl_background-upload {
pointer-events: all;
}
#lbl_background-upload>span {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1em;
height: 31px;
font-size: 13px;
line-height: 31px;
cursor: pointer;
}
#i_background-upload {
display: none;
}
#local_options #background-local-actions {
padding: 5px 0 5px 0;
}
#thumbnails-container {
--thumbnails-columns: 3;
display: grid;
width: 100%;
max-height: 300px;
margin-top: 5px;
gap: 7px;
overflow: auto;
grid-template-columns: repeat(var(--thumbnails-columns), 1fr);
padding-bottom: 5px;
box-sizing: border-box;
}
#thumbnails-container:empty,
#thumbnails-container:empty+#background-local-actions {
display: none;
}
#thumbnails-container:not(:empty)~#background-local-tooltip {
display: none;
}
#background-local-tooltip {
padding-block: 5px;
}
.thumbnail {
position: relative;
height: calc(230px / var(--thumbnails-columns));
padding: 0;
overflow: hidden;
background-color: var(--color-input);
transition: transform 0.1s, opacity 0.1s;
border-radius: 12px;
}
.thumbnail.hiding {
transform: scale(0.9);
opacity: 0;
}
.thumbnail.loading {
pointer-events: none;
user-select: none;
}
.thumbnail::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 12px;
box-sizing: border-box;
}
.thumbnail:hover::after,
.thumbnail:active::after,
.thumbnail.selected::after {
border: 3px solid var(--color-blue);
}
.thumbnail:active::after {
background-color: rgba(var(--orange), 0.4);
}
.thumbnail.selected::after {
background-color: rgba(var(--orange), 0.2);
}
.thumbnail.loading img {
width: 3em;
height: 3em;
opacity: 0.9;
object-fit: unset;
transition: none;
}
.thumbnail.loaded img {
opacity: 0;
}
.thumbnail-format-icon {
position: absolute;
bottom: 5%;
right: 5%;
width: 15%;
height: 15%;
}
.thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.1s;
}
.thumbnail[data-format=video] .thumbnail-format-icon {
bottom: 0.75em;
right: 0.75em;
border-radius: 7px;
background-color: #fff4;
box-sizing: border-box;
display: block;
width: 22px;
height: 22px;
}
.thumbnail[data-format=video] .thumbnail-format-icon::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: 6px;
left: 9px;
}
#thumbnail-action-buttons {
column-gap: 8px;
}
#thumbnail-action-buttons .wrapper {
justify-content: center;
}
#background-urls-editor>div {
background-color: var(--color-input);
font-size: 13px;
min-height: 200px;
margin-top: 8px;
padding: 12px 16px 12px 34px;
}
#background-urls-editor .pce-line::before {
content: "";
position: absolute;
top: 2px;
left: -24px;
width: 12px;
height: 12px;
background-size: 12px 12px;
background-position: center;
border-radius: 4px;
border: 1px solid;
color: #fff4;
}
#background-urls-editor .pce-line::before {
opacity: 0.4;
background-image: url('data:image/svg+xml,%0A %0A%0A');
}
#background-urls-editor .pce-line.loading::before {
opacity: 0.8;
border-color: var(--color-blue);
background-image: url('data:image/svg+xml,%0A %0A %0A');
}
#background-urls-editor .pce-line.warn::before {
opacity: 1;
border-color: orange;
background-image: url('data:image/svg+xml,%0A %0A%0A');
}
#background-urls-editor .pce-line.error::before {
opacity: 1;
border-color: var(--color-red);
background-size: 11px 11px;
background-image: url('data:image/svg+xml,%0A %0A%0A');
}
#background-urls-editor .pce-line.good::before {
opacity: 1;
border-color: var(--color-green);
background-size: 13px 13px;
background-image: url('data:image/svg+xml,%0A %0A%0A');
}
/* src/styles/settings/management.css */
#settings-managment {
position: relative;
}
#settings-managment.dragging-file {
opacity: 0.5;
}
#settings-managment.dragging-file #file-import {
position: absolute;
display: initial;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: transparent;
}
#settings-data {
opacity: 0.8;
font-size: 13px;
width: 100%;
height: 110px;
min-height: 110px;
max-height: 3000px;
margin: 6px 0;
padding: 10px 16px;
tab-size: 1.5em;
resize: vertical;
cursor: pointer;
box-sizing: border-box;
border-radius: 11px;
color: var(--color-text);
background-color: var(--color-areas);
transition: min-height 0.1s ease;
}
[data-system=mac] #settings-data {
font-size: 12px;
}
#settings-data:focus-within {
overflow-y: auto;
opacity: unset;
cursor: inherit;
display: inline-block;
min-height: 300px;
}
#file-import,
#file-download,
#settings-files-options.hidden,
#settings-changes-options.hidden {
display: none;
}
#gist-sync-status-wrapper {
display: flex;
flex-direction: column;
text-align: right;
font-size: 13px;
padding-inline-end: 1em;
color: var(--color-light-text);
}
#gist-sync-status-wrapper,
#gist-sync-status-wrapper a {
font-size: 13px;
}
#reset-settings {
margin-top: 1em;
}
#reset-conf,
#reset-first {
display: none;
}
#reset-conf.shown,
#reset-first.shown {
display: flex;
}
/* src/styles/settings/footer.css */
#settings-footer {
width: 75%;
font-size: 14px;
margin: 50px auto 100px;
color: var(--color-light-text);
}
@supports (-webkit-touch-callout: none) {
#settings-footer {
margin-bottom: 150px;
}
}
#settings-footer>div:first-child {
display: flex;
align-items: center;
justify-content: space-between;
}
#settings-footer>div:nth-child(2) {
margin: 1.5em 0;
}
#settings-footer svg {
height: 1.25em;
fill: var(--color-orange);
}
#settings-footer-links a {
margin: 0 6px;
}
#settings-footer-links a:hover {
text-decoration: none;
opacity: 0.8;
}
/* src/styles/settings/inputs.css */
aside hr {
width: 100%;
margin: 10px 0;
border: none;
border-bottom: 1px solid var(--color-input);
}
aside .param-textarea {
width: 100%;
height: 200px;
margin-top: 12px;
padding: 12px;
font-size: 13px;
line-height: 1.5;
resize: none;
border-radius: 8px;
color: var(--color-text);
background-color: var(--color-areas);
}
aside .param-btn {
height: 31px;
padding: 0 1em;
color: var(--color-orange);
border: none;
border-radius: 1em;
white-space: nowrap;
background-color: rgba(var(--orange), 0.15);
display: inline-flex;
justify-content: center;
align-items: center;
gap: 5px;
cursor: pointer;
}
aside .param-btn img,
aside .param-btn span {
display: inline;
vertical-align: middle;
}
aside .param-btn:hover {
background-color: rgba(var(--orange), 0.25);
}
aside .param-btn:hover.btn-red {
color: var(--color-red);
background-color: rgba(var(--red), 0.25);
}
aside .param-btn:disabled {
opacity: 0.66;
filter: grayscale(1);
pointer-events: none;
}
aside .inline-btn {
border-radius: 1em;
color: var(--color-blue);
background-color: transparent;
}
aside .inline-btn:hover {
text-decoration: underline;
}
aside .input-btn {
text-decoration: none;
color: var(--color-text);
background-color: var(--color-input);
}
aside .input-btn.icon-only span {
display: flex;
justify-content: center;
}
aside .input-btn.icon-only span svg {
height: 18px;
flex-shrink: 0;
}
aside .input-btn.icon-only:hover,
aside .input-btn.icon-only:active {
background-color: var(--color-input);
}
aside textarea,
aside .prism-code-editor {
font-family: var(--monospace-font-family);
}
aside select,
aside input,
aside button {
border-radius: 8px;
color: var(--color-text);
-webkit-appearance: none;
appearance: none;
}
aside input,
aside select {
height: 31px;
width: 155px;
padding-inline: 13px;
overflow: hidden;
text-overflow: ellipsis;
background-color: var(--color-input);
}
@media only screen and (hover: hover) {
aside input:focus-visible,
aside .input-btn:active,
aside .tooltip:active,
aside .switch:hover {
background-color: var(--color-focused);
}
}
aside input::placeholder,
aside input[type=text] {
color: var(--color-placeholder);
}
aside input[type=text]:focus-visible {
color: var(--color-text);
}
aside input[type=checkbox] {
-webkit-tap-highlight-color: transparent;
cursor: pointer;
}
aside .switch {
position: relative;
display: inline-block;
height: 26px;
width: 50px;
border-radius: 8px;
background-color: #c6c4c7;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
overflow: visible;
transition: background-color 0.15s;
}
[data-theme=dark] aside .switch {
background-color: #39393d;
}
aside .switch:after {
content: "";
position: absolute;
height: 22px;
width: 22px;
border-radius: 7px;
background-color: white;
transition: background-color 0.15s, transform 0.15s;
left: 2px;
top: 50%;
margin-top: -11px;
}
aside .switch:checked {
background-color: var(--color-orange);
}
aside .switch:checked:after {
transform: translateX(21px);
}
@media only screen and (hover: hover) {
aside .switch:checked:hover {
background-color: #b56621;
}
}
aside input::-webkit-calendar-picker-indicator {
display: none !important;
}
aside input[type=range] {
height: 2.2em;
-webkit-appearance: none;
appearance: none;
background-color: var(--color-param);
cursor: grab;
overflow: visible;
padding-inline: unset;
padding-left: 3px;
--range: calc(var(--max) - var(--min));
--ratio: calc((var(--value) - var(--min)) / var(--range));
--sx: calc(0.5 * 2em + var(--ratio) * (100% - 2em));
}
aside input[type=range]:active {
cursor: grabbing;
}
aside input[type=range]:focus {
outline: none;
}
aside input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
background: #fff;
height: 15px;
width: 20px;
border-radius: 8px;
border: 0;
box-shadow: 0px 1px 4px 2px rgba(20, 20, 20, 0.17);
margin-top: calc(3px * 0.5 - 15px * 0.5);
}
aside input[type=range]::-webkit-slider-runnable-track {
height: 4px;
border: none;
border-radius: 0.5em;
box-shadow: none;
background: linear-gradient(var(--color-orange), var(--color-orange)) 0 / var(--sx) 100% no-repeat, #efefef;
}
[data-theme=dark] aside input[type=range]::-webkit-slider-runnable-track {
background: linear-gradient(var(--color-orange), var(--color-orange)) 0 / var(--sx) 100% no-repeat, #3d3c41;
}
aside input[type=range]::-moz-range-thumb {
background: #fff;
height: 20px;
width: 30px;
border-radius: 50px;
border: 0;
box-shadow: 0px 1px 4px 2px rgba(20, 20, 20, 0.17);
margin-top: calc(4px * 0.5 - 20px * 0.5);
}
aside input[type=range]::-moz-range-track {
height: 4px;
border: none;
border-radius: 0.5em;
box-shadow: none;
background: linear-gradient(var(--color-blue), var(--color-blue)) 0 / var(--sx) 100% no-repeat, #efefef;
}
[data-theme=dark] aside input[type=range]::-moz-range-track {
background: linear-gradient(var(--color-blue), var(--color-blue)) 0 / var(--sx) 100% no-repeat, #3d3c41;
}
aside input[type=range]::-ms-fill-upper {
background: transparent;
border-color: transparent;
}
aside input[type=range]::-ms-fill-lower {
background: transparent;
border-color: transparent;
}
aside input[type=range]::-ms-thumb {
width: 2em;
height: 2em;
border-radius: 1em;
background: var(--color-blue);
border: none;
box-shadow: 0px 1px 4px 2px rgba(20, 20, 20, 0.17);
margin-top: 0;
box-sizing: border-box;
}
aside input[type=range]::-ms-track {
height: 1em;
border-radius: 0.5em;
background: #efefef;
border: none;
box-shadow: none;
box-sizing: border-box;
}
aside input[type=range]::-ms-fill-lower {
height: 1em;
border-radius: 0.5em 0 0 0.5em;
margin: 0;
background: var(--color-blue);
border: none;
border-right-width: 0;
}
aside .color-button {
position: relative;
}
aside .color-button input {
overflow: hidden;
position: absolute;
bottom: 0;
padding: 0;
opacity: 0;
}
aside .color-button button {
border: 1px solid black;
height: 31px;
width: 155px;
text-align: left;
padding-inline-start: 1em;
outline-offset: 2px;
user-select: text;
cursor: pointer;
}
aside .inputWithSuffix {
width: 155px;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
aside .inputWithSuffix input {
flex: 1;
}
label.input-file {
position: relative;
display: block;
cursor: pointer;
text-align: center;
font-size: 13px;
}
label.input-file span {
position: absolute;
top: 50%;
left: 10%;
width: 80%;
margin: auto;
transform: translateY(-50%);
pointer-events: none;
}
input[type=file] {
height: 100px;
width: 100%;
color: transparent;
cursor: pointer;
}
input[type=file]::-webkit-file-selector-button,
input[type=file]::file-selector-button {
display: none;
}
label.input-file:active input[type=file] {
background-color: var(--color-focused);
}
label.input-file input[type=file].dragover {
background-color: var(--color-blue);
transform: scale(1.02);
}
label.input-file input[type=file].dragover~span {
color: white;
}
aside form {
width: 155px;
}
aside form>div {
display: flex;
gap: 4px;
width: 100%;
}
aside form button {
height: 31px;
width: 31px;
padding: 0;
opacity: 0;
max-width: 0;
visibility: hidden;
background-color: var(--color-input);
transition: opacity 0.1s, max-width 0.2s;
}
aside form button:disabled {
cursor: default;
background-color: transparent;
}
aside form button span {
display: flex;
width: 31px;
justify-content: center;
}
aside form.valid button {
opacity: 1;
max-width: 31px;
visibility: visible;
}
aside form.valid span::after {
content: "\2713";
}
aside form.valid.remove span::after {
content: url('data:image/svg+xml,%0A%0A%0A');
width: 11px;
}
@media (hover: hover) {
aside form.valid button:not(:disabled):hover,
aside form.valid button:not(:disabled):focus-visible {
color: var(--color-blue);
background-color: rgba(var(--orange), 0.15);
}
}
.param {
margin-top: 12px;
padding: 10px 16px;
border-radius: var(--border-radius);
background-color: var(--color-settings);
}
.param+.param {
margin-top: 12px;
}
.wrapper {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 31px;
padding: 4px;
}
.wrapper>span {
display: flex;
align-items: center;
}
.wrapper .tooltip {
margin: 0 7px;
}
.wrapper label {
pointer-events: none;
}
.split-inputs {
display: flex;
width: 155px;
column-gap: 4px;
}
.split-range {
height: 31px;
align-items: center;
}
.split-inputs input {
width: 100%;
}
.split-range button {
height: 31px;
width: 40px;
font-size: 20px;
background-color: transparent;
}
.split-range button:not(.on) span:last-child,
.split-range button.on span:first-child {
display: none;
}
.split-range span {
display: initial;
}
/* src/styles/settings/tooltips.css */
aside h1,
aside h2,
aside span {
margin: 0;
}
aside h2 {
font-weight: 450;
font-size: 1em;
}
.settings-title {
display: grid;
place-items: baseline;
grid-template-columns: 1fr min-content;
margin: 32px 20px 0px 20px;
color: var(--color-light-text);
scroll-margin-top: 20px;
}
.settings-title .tooltiptext {
grid-column: 1 / 3;
}
aside .tooltip {
width: 20px;
min-width: 20px;
height: 20px;
padding: 0;
border-radius: 5px;
border: none;
outline: none;
box-sizing: border-box;
color: var(--color-dialog-input-text);
background-color: var(--color-areas);
display: flex;
align-items: center;
justify-content: center;
}
aside .settings-title .tooltip {
background-color: var(--color-input-outside);
border-color: var(--color-focused);
}
@media screen and (hover: hover) {
aside .tooltip:active {
background-color: var(--color-input);
}
}
.tooltiptext {
color: var(--color-light-text);
font-size: 13px;
line-height: 1.5em;
}
.param .tooltiptext {
padding-left: 4px;
}
.tooltiptext.shown {
max-height: 60px;
}
.settings-title .tooltiptext.shown {
padding-top: 0.8em;
}
.param .tooltiptext.shown {
padding-top: 4px;
}
/* src/styles/components/dialog.css */
dialog {
color: var(--color-text);
background-color: var(--color-dialog);
border: 1px solid var(--color-dialog-border);
border-radius: 14px;
backdrop-filter: blur(4em);
-webkit-backdrop-filter: blur(4em);
box-shadow: 0px 0px 15px #0004;
}
dialog hr {
margin: 10px;
box-sizing: border-box;
border-color: var(--color-dialog-border);
}
dialog button {
border-radius: 8px;
border: 3px solid transparent;
background-color: transparent;
text-align: initial;
padding: 2px 12px;
color: var(--color-text);
outline: none;
cursor: pointer;
}
dialog button:disabled {
opacity: 0.3;
cursor: default;
pointer-events: none;
background-color: transparent;
filter: grayscale(1);
}
dialog button.btn-red:disabled:hover,
dialog button:disabled:hover {
color: inherit;
background-color: inherit;
}
dialog button:focus-visible,
dialog button:hover {
color: white;
background-color: var(--color-blue);
}
dialog button.btn-red:focus-visible,
dialog button.btn-red:hover {
color: white;
background-color: var(--color-red);
}
dialog option {
padding-inline-start: 0;
}
/* src/styles/components/networkform.css */
.network-form input {
width: 100%;
}
.network-form.warn span::after,
.network-form.load span::after {
display: block;
margin: auto;
width: 20px;
height: 20px;
color: transparent;
background-size: cover;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.network-form.load span::after {
animation: spin 600ms linear infinite;
background-image: url('data:image/svg+xml,%0A %0A %0A');
}
.network-form.warn span::after {
background-image: url('data:image/svg+xml,%0A %0A %0A %0A');
}
.network-form.warn button,
.network-form.warn span {
width: 22px;
max-width: 22px;
}
.network-form-warning {
display: none;
color: orange;
text-align: right;
padding: 6px 2px 0;
}
.network-form.warn .network-form-warning {
display: block;
}
/* src/styles/features/time.css */
#time {
position: relative;
}
#time:before {
box-shadow: 0px 0px 100px 40px rgba(34, 34, 34, 0.2666666667);
}
#time.hidden {
display: none;
}
#time.seconds .digital-mm-separator,
#time.seconds .digital-ss {
display: inline;
}
#time.seconds .analog-seconds {
display: block;
}
#time.is-analog .digital {
display: none;
}
#time.is-analog .analog {
display: inline-block;
}
#time-container {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 4em;
}
.digital {
margin: 0;
margin-bottom: 0.1em;
margin-inline-start: calc(var(--seconds-margin-offset) / 2);
font-size: calc(var(--clock-size) * 6);
line-height: 1em;
font-weight: 200;
font-weight: var(--font-weight-clock);
direction: ltr;
}
.digital[data-ampm-label][data-ampm][data-ampmposition=top-right],
.digital[data-ampm-label][data-ampm][data-ampmposition=bottom-right] {
margin-left: var(--seconds-width);
}
.digital span {
text-align: left;
}
.digital-hh,
.digital-mm,
.digital-hh-separator {
display: inline-block;
}
.digital-hh-leading-zero,
.digital-mm-separator,
.digital-ss {
display: none;
}
.digital.zero .digital-hh-leading-zero {
display: inline-block;
}
.digital-number-width {
position: absolute;
z-index: -1;
opacity: 0;
}
.digital-ampm {
font-size: 0.4em;
line-height: 0.8em;
vertical-align: top;
}
[data-ampmposition=bottom-right] .digital-ampm,
[data-ampmposition=top-right] .digital-ampm {
margin-left: 0.2em;
}
[data-ampmposition=bottom-left] .digital-ampm,
[data-ampmposition=top-left] .digital-ampm {
margin-right: 0.2em;
}
[data-ampmposition=bottom-right] .digital-ampm,
[data-ampmposition=bottom-left] .digital-ampm {
margin-bottom: 0.2em;
}
[data-ampmposition=top-right] .digital-ampm,
[data-ampmposition=top-left] .digital-ampm {
margin-top: 0.2em;
}
.digital-ampm,
.digital-am,
.digital-pm {
display: none;
}
[data-ampm-label][data-ampm][data-ampmposition] .digital-ampm,
[data-ampm-label][data-ampm=am][data-ampmposition] .digital-am,
[data-ampm-label][data-ampm=pm][data-ampmposition] .digital-pm {
display: inline-block;
}
.seconds [data-ampm-label][data-ampm] {
margin-inline-end: 0.5em;
}
#time[class] * * [data-ampm-label][data-ampm][data-ampmposition=bottom-right] .digital-ampm,
#time * * [data-ampm-label][data-ampm][data-ampmposition=bottom-right] .digital-ampm,
[data-ampm-label][data-ampm][data-ampmposition=bottom-left] .digital-ampm {
vertical-align: bottom;
}
#time[class=seconds] * * [data-ampm-label][data-ampm][data-ampmposition=top-right] .digital-ampm {
margin-left: 1ch;
}
#time[class=seconds] * * [data-ampm-label][data-ampm][data-ampmposition=bottom-right] .digital-ampm {
margin-left: 1ch;
vertical-align: bottom;
}
#time.seconds .digital-ss {
display: inline-block;
width: var(--seconds-width);
}
.analog {
display: none;
position: relative;
width: calc(var(--clock-size) * 8);
height: calc(var(--clock-size) * 8);
border: calc(var(--clock-size) * 0.2) solid;
border-color: var(--analog-border);
background-color: var(--analog-background);
backdrop-filter: blur(1em);
-webkit-backdrop-filter: blur(1em);
}
#time[data-shape=round] .analog {
border-radius: 100%;
}
#time[data-shape=square] .analog {
border-radius: calc(var(--clock-size) * 0.4);
}
#time[data-shape=rectangle] .analog {
border-radius: calc(var(--clock-size) * 1.5);
height: calc(var(--clock-size) * 9.5);
}
#time.transparent .analog {
box-shadow: unset;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.analog-center {
position: absolute;
top: 50%;
left: 50%;
width: calc(var(--clock-size) * 0.4);
height: calc(var(--clock-size) * 0.4);
border-radius: calc(var(--clock-size) * 0.4);
transform: translate(-50%, -50%);
background-color: white;
z-index: 5;
}
.analog-minutes,
.analog-hours,
.analog-seconds {
transform: rotate(var(--deg));
position: absolute;
display: block;
bottom: 50%;
left: 50%;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
width: calc(var(--clock-size) * 0.2);
border-radius: calc(var(--clock-size) * 0.2);
transform-origin: bottom center;
background-color: white;
will-change: transform;
left: 0;
right: 0;
margin: auto;
}
.analog-hours {
height: calc(var(--clock-size) * 2.4);
}
.analog-minutes {
height: calc(var(--clock-size) * 3.6);
}
.analog-seconds {
display: none;
height: calc(var(--clock-size) * 3.6);
opacity: 0.8;
background-color: #e30713;
width: calc(var(--clock-size) * 0.1);
}
#time[data-hands=swiss] .analog-center {
display: none;
}
#time[data-hands=swiss].seconds .analog-center {
display: block;
background-color: #e30713;
width: calc(var(--clock-size) * 0.3);
height: calc(var(--clock-size) * 0.3);
}
#time[data-hands=swiss] .analog-hours {
height: 30%;
width: calc(var(--clock-size) * 0.35);
border-radius: 0;
}
#time[data-hands=swiss] .analog-hours:after {
content: "";
display: block;
position: absolute;
background-color: white;
width: calc(var(--clock-size) * 0.35);
height: calc(var(--clock-size) * 1.2);
bottom: calc(var(--clock-size) * -1.2);
left: 50%;
transform: translateX(-50%);
}
#time[data-hands=swiss] .analog-minutes {
height: calc(var(--clock-size) * 3.69);
width: calc(var(--clock-size) * 0.25);
border-radius: 0;
}
#time[data-hands=swiss] .analog-minutes:after {
content: "";
display: block;
position: absolute;
background-color: white;
width: calc(var(--clock-size) * 0.25);
height: calc(var(--clock-size) * 1.2);
bottom: calc(var(--clock-size) * -1.2);
left: 50%;
transform: translateX(-50%);
}
#time[data-hands=swiss] .analog-seconds {
height: calc(var(--clock-size) * 2.8);
border-radius: 0;
opacity: 1;
}
#time[data-hands=swiss] .analog-seconds:after {
content: "";
display: block;
position: absolute;
background-color: #e30713;
width: calc(var(--clock-size) * 0.1);
height: calc(var(--clock-size) * 1.2);
bottom: calc(var(--clock-size) * -1.2);
left: 50%;
transform: translateX(-50%);
}
#time[data-hands=swiss] .analog-seconds:before {
content: "";
display: block;
position: absolute;
width: calc(var(--clock-size) * 0.65);
height: calc(var(--clock-size) * 0.65);
background-color: #e30713;
left: 50%;
transform: translateX(-50%);
border-radius: 100%;
}
#time[data-hands=braun].seconds .analog-center {
background-color: #f9b603;
width: calc(var(--clock-size) * 0.5);
height: calc(var(--clock-size) * 0.5);
}
#time[data-hands=braun].seconds .analog-seconds {
background-color: #f9b603;
opacity: 1;
height: calc(var(--clock-size) * 3.5);
}
#time[data-hands=braun] .analog-seconds:after {
content: "";
display: block;
position: absolute;
border-radius: 0 0 10px 10px;
background-color: #f9b603;
width: calc(var(--clock-size) * 0.3);
height: calc(var(--clock-size) * 0.75);
bottom: calc(var(--clock-size) * -0.75);
left: 50%;
transform: translateX(-50%);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}
#time[data-hands=braun] .analog-hours {
width: calc(var(--clock-size) * 0.3);
height: calc(var(--clock-size) * 2.58);
}
#time[data-hands=braun] .analog-minutes {
height: calc(var(--clock-size) * 3.33);
}
#time[data-hands=classic] .analog-hours,
#time[data-hands=classic] .analog-minutes {
background-color: transparent;
position: absolute;
background-position: center;
background-repeat: no-repeat;
box-shadow: unset;
filter: invert(1);
opacity: 1;
}
#time[data-hands=classic].white-opaque .analog-hours,
#time[data-hands=classic].white-opaque .analog-minutes {
filter: unset;
}
#time[data-hands=classic] .analog-hours {
background-image: url('data:image/svg+xml,%0A%0A%0A');
height: calc(var(--clock-size) * 2.35);
width: calc(var(--clock-size) * 1.5);
}
#time[data-hands=classic] .analog-minutes {
background-image: url('data:image/svg+xml,%0A%0A%0A');
height: calc(var(--clock-size) * 3.4);
width: calc(var(--clock-size) * 1.2);
}
#time[data-hands=classic] .analog-seconds,
#time[data-hands=classic].seconds .analog-center {
background-color: #cdaa35;
opacity: 1;
}
#time[data-hands=classic] .analog-seconds:after {
content: "";
display: block;
position: absolute;
background-color: #cdaa35;
width: calc(var(--clock-size) * 0.08);
height: calc(var(--clock-size) * 0.9);
bottom: calc(var(--clock-size) * -0.9);
left: 50%;
transform: translateX(-50%);
}
#time[data-hands=apple] .analog-hours,
#time[data-hands=apple] .analog-minutes {
height: calc(var(--clock-size) * 0.7);
width: calc(var(--clock-size) * 0.1);
border-radius: 0;
}
#time[data-hands=apple] .analog-hours:before,
#time[data-hands=apple] .analog-minutes:before {
content: "";
display: block;
position: absolute;
width: calc(var(--clock-size) * 0.3);
background-color: white;
left: 50%;
transform: translateX(-50%);
border-radius: 8px;
}
#time[data-hands=apple] .analog-hours:before {
height: calc(var(--clock-size) * 1.4);
top: calc(var(--clock-size) * -1.35);
}
#time[data-hands=apple] .analog-minutes:before {
height: calc(var(--clock-size) * 2.5);
top: calc(var(--clock-size) * -2.48);
}
#time[data-hands=apple].white-opaque .analog-hours:before,
#time[data-hands=apple].white-opaque .analog-minutes:before {
background-color: black;
}
#time[data-hands=apple].seconds .analog-seconds {
background-color: #f06142;
width: calc(var(--clock-size) * 0.08);
opacity: 1;
z-index: 1;
}
#time[data-hands=apple] .analog-seconds:after {
content: "";
display: block;
position: absolute;
background-color: #f06142;
width: calc(var(--clock-size) * 0.08);
height: calc(var(--clock-size) * 0.9);
bottom: calc(var(--clock-size) * -0.9);
left: 50%;
transform: translateX(-50%);
}
#time[data-hands=apple].seconds .analog-center {
background-color: #f06142;
}
#time[data-hands=apple].seconds .analog-center:before {
content: "";
width: calc(var(--clock-size) * 0.17);
height: calc(var(--clock-size) * 0.17);
background-color: black;
position: absolute;
display: block;
border-radius: 100%;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
#time[data-hands=apple].seconds.white-opaque .analog-center:before {
background-color: white;
}
#time[data-hands=apple] .analog:after {
content: "";
width: calc(var(--clock-size) * 0.45);
height: calc(var(--clock-size) * 0.45);
background-color: white;
position: absolute;
display: block;
border-radius: 100%;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
#time[data-hands=apple].white-opaque .analog:after {
background-color: black;
}
.analog-face {
position: absolute;
width: 100%;
height: 100%;
font-size: var(--clock-size);
--center: calc(50% - 0.5em);
--padding: 0.75em;
}
.analog-face span {
position: absolute;
display: block;
opacity: 0.6;
width: 1em;
height: 1em;
line-height: 1em;
text-align: center;
}
#time[data-face=swiss] .analog-face,
#time[data-face=braun] .analog-face {
background-size: 95%;
background-position: center;
background-repeat: no-repeat;
}
#time[data-face=swiss] .analog-face {
background-image: url('data:image/svg+xml,');
}
#time[data-face=braun] .analog-face {
background-image: url('data:image/svg+xml,');
}
#time[data-face=swiss].white-opaque .analog-face {
background-image: url('data:image/svg+xml,');
}
#time[data-face=braun].white-opaque .analog-face {
background-image: url('data:image/svg+xml,');
}
#time.white-opaque:not([data-hands=classic]) .analog .analog-minutes,
#time.white-opaque:not([data-hands=classic]) .analog .analog-hours,
#time.white-opaque[data-hands=modern] .analog-center,
#time.white-opaque .analog .analog-minutes:after,
#time.white-opaque .analog .analog-hours:after {
background-color: rgba(0, 0, 0, 0.9);
}
#time.white-opaque .analog-face span {
color: black;
opacity: 0.9;
}
.analog-face span:nth-child(1) {
left: var(--center);
top: var(--padding);
}
.analog-face span:nth-child(2) {
top: var(--center);
right: var(--padding);
}
.analog-face span:nth-child(3) {
left: var(--center);
bottom: var(--padding);
}
.analog-face span:nth-child(4) {
top: var(--center);
left: var(--padding);
}
#time p {
font-size: 1.5em;
}
#time .clock-date-aa {
display: inline-block;
}
#time .clock-date-aa::first-letter {
text-transform: uppercase;
}
#time.analog .clock-date {
margin-top: 1em;
}
.clock-region {
margin-top: 0.5em;
}
#time-container.he_hidden~.clock-date {
margin-top: 0;
}
.clock-date-aa-separator::after,
.clock-date-bb-separator::after {
content: " ";
}
.clock-date.us .clock-date-aa-separator::after {
content: ", ";
}
.clock-date-secondary {
display: block;
font-size: smaller;
}
.clock-date-secondary::after {
content: "\200b";
}
/* src/styles/features/main.css */
#main {
position: relative;
}
#main.hidden {
display: none;
}
#greetings {
font-size: var(--greeting-size);
font-weight: inherit;
margin: 0;
width: 100%;
min-width: 300px;
text-overflow: ellipsis;
}
#weather {
display: block;
position: relative;
text-decoration: none;
color: inherit;
width: 100%;
transition: opacity 0.05s 0.1s;
}
#weather.init {
transition: opacity 0.8s;
}
#weather.wait {
opacity: 0;
}
#weather[href]:hover {
opacity: 0.66;
}
#description {
font-size: 1.5em;
min-height: 1.5em;
}
#current,
#forecast {
min-height: 1.2em;
}
#tempContainer {
display: inline-flex;
justify-content: center;
align-items: center;
margin-top: 1em;
min-height: 3.3em;
column-gap: 0.5em;
}
#tempContainer p {
font-size: 2.2em;
}
#weather-icon {
height: 3.3em;
width: 3.3em;
border: none;
background-size: cover;
}
#weather-icon {
--day-clearsky: url('data:image/svg+xml,');
--day-fewclouds: url('data:image/svg+xml,');
--day-brokenclouds: url('data:image/svg+xml,');
--day-overcastclouds: url('data:image/svg+xml,');
--day-sunnyrain: url('data:image/svg+xml,');
--day-lightrain: url('data:image/svg+xml,');
--day-rain: url('data:image/svg+xml,');
--day-snow: url('data:image/svg+xml,%0A%0A%0A');
--day-mist: url('data:image/svg+xml,');
--day-thunderstorm: url('data:image/svg+xml,');
--night-clearsky: url('data:image/svg+xml,');
--night-fewclouds: url('data:image/svg+xml,');
--night-brokenclouds: url('data:image/svg+xml,');
--night-overcastclouds: url('data:image/svg+xml,');
--night-lightrain: url('data:image/svg+xml,');
--night-rain: url('data:image/svg+xml,');
--night-snow: url('data:image/svg+xml,');
--night-mist: url('data:image/svg+xml,');
--night-thunderstorm: url('data:image/svg+xml,');
}
#weather-icon[data-condition=clearsky][data-daytime=day] {
background-image: var(--day-clearsky);
}
#weather-icon[data-condition=clearsky][data-daytime=night] {
background-image: var(--night-clearsky);
}
#weather-icon[data-condition=fewclouds][data-daytime=day] {
background-image: var(--day-fewclouds);
}
#weather-icon[data-condition=fewclouds][data-daytime=night] {
background-image: var(--night-fewclouds);
}
#weather-icon[data-condition=brokenclouds][data-daytime=day] {
background-image: var(--day-brokenclouds);
}
#weather-icon[data-condition=brokenclouds][data-daytime=night] {
background-image: var(--night-brokenclouds);
}
#weather-icon[data-condition=overcastclouds][data-daytime=day] {
background-image: var(--day-overcastclouds);
}
#weather-icon[data-condition=overcastclouds][data-daytime=night] {
background-image: var(--night-overcastclouds);
}
#weather-icon[data-condition=sunnyrain][data-daytime=day] {
background-image: var(--day-sunnyrain);
}
#weather-icon[data-condition=lightrain][data-daytime=day] {
background-image: var(--day-lightrain);
}
#weather-icon[data-condition=lightrain][data-daytime=night] {
background-image: var(--night-lightrain);
}
#weather-icon[data-condition=rain][data-daytime=day] {
background-image: var(--day-rain);
}
#weather-icon[data-condition=rain][data-daytime=night] {
background-image: var(--night-rain);
}
#weather-icon[data-condition=thunderstorm][data-daytime=day] {
background-image: var(--day-thunderstorm);
}
#weather-icon[data-condition=thunderstorm][data-daytime=night] {
background-image: var(--night-thunderstorm);
}
#weather-icon[data-condition=snow][data-daytime=day] {
background-image: var(--day-snow);
}
#weather-icon[data-condition=snow][data-daytime=night] {
background-image: var(--night-snow);
}
#weather-icon[data-condition=mist][data-daytime=day] {
background-image: var(--day-mist);
}
#weather-icon[data-condition=mist][data-daytime=night] {
background-image: var(--night-mist);
}
/* src/styles/features/searchbar.css */
#sb_container {
position: relative;
display: flex;
visibility: visible;
align-items: center;
padding: 0;
width: 100%;
min-width: 15em;
max-width: var(--searchbar-width, 30em);
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
#sb_container.hidden {
display: none;
}
#sb_container.opaque #searchbar,
#sb_container.opaque #sb-suggestions,
#sb_container.opaque button {
color: #333;
}
#sb_container.opaque #searchbar::placeholder {
color: #3334;
}
#sb_container.opaque hr {
border-color: #3334;
}
#sb_container.opaque .default-search-icon {
filter: invert(1);
opacity: 0.7;
}
#sb_container hr {
margin: 0;
border-right: 1px solid #fff3;
}
#searchbar-wrapper {
display: flex;
align-items: center;
width: 100%;
border-radius: 1em;
background-color: var(--searchbar-background);
border: 1px solid #fff1;
backdrop-filter: blur(2em);
-webkit-backdrop-filter: blur(2em);
}
#searchbar {
width: 100%;
height: 2.5em;
color: #fff;
padding-inline-start: 1em;
font-size: 1.3em;
font-family: inherit;
font-weight: inherit;
text-overflow: ellipsis;
border: none;
background-color: transparent;
}
#searchbar::placeholder {
transition: opacity 0.2s;
text-transform: none;
color: #fff8;
}
#sb-buttons {
display: none;
}
#sb-buttons.shown {
display: flex;
}
#sb-buttons button {
color: #fff;
font-size: inherit;
padding: 0.3em 1.5em;
border-radius: 0.5em;
background-color: transparent;
transition: opacity 0.2s;
}
#sb-buttons button:hover {
filter: brightness(0.8);
}
#sb-buttons button:active {
filter: brightness(0.8) opacity(0.6);
}
#sb-buttons #sb_submit img {
margin-top: 0.2em;
height: 1.2em;
}
#sb-suggestions {
position: absolute;
display: none;
top: 2.5em;
width: 100%;
padding: 0.6em;
font-size: 1.3em;
text-shadow: none;
border-radius: 1em;
box-sizing: border-box;
backdrop-filter: blur(2em);
-webkit-backdrop-filter: blur(2em);
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
border: 1px solid #fff1;
background-color: var(--searchbar-background);
z-index: 4;
}
#sb-suggestions.shown {
display: block;
}
#sb-suggestions li {
display: none;
text-align: initial;
align-items: center;
margin: 0;
padding: 0.4em 1em 0.4em 0.6em;
border-radius: 0.4em;
column-gap: 0.6em;
border: 1px solid transparent;
cursor: pointer;
outline: none;
overflow-x: hidden;
}
#sb-suggestions li.shown {
display: flex;
}
#sb-suggestions li[aria-selected=true] {
border-color: var(--color-blue);
background-color: rgba(var(--orange), 0.3);
}
#sb-suggestions img {
width: 1.6em;
height: 1.6em;
object-fit: contain;
}
#sb-suggestions img.default-search-icon {
height: 1.1em;
}
#sb-suggestions .suggest-desc {
font-size: 0.8em;
}
/* node_modules/.deno/pocket-editor@2.5.0/node_modules/pocket-editor/dist/style.css */
:root {
--pe-color-text: #37352f;
--pe-color-text-selection: #37352f;
--pe-color-background: #fff;
--pe-color-line-selection: #e0edfb;
}
[data-pocket-editor] {
padding: 1.5em;
line-height: 1.7em;
word-break: break-word;
color: var(--pe-color-text);
background-color: var(--pe-color-background);
}
[data-pocket-editor]>div {
display: flex;
column-gap: 0.5em;
padding: 0 0.75em;
margin: 0.25em 0;
border-radius: 0.15em;
transition: color 0.1s, background-color 0.1s;
}
[data-pocket-editor] [data-selected] {
color: var(--pe-color-text-selection);
background-color: var(--pe-color-line-selection);
}
[data-pocket-editor] [contenteditable] {
width: 100%;
margin: 0;
outline: none;
cursor: text;
}
[data-pocket-editor] h1[contenteditable],
[data-pocket-editor] h2[contenteditable],
[data-pocket-editor] h3[contenteditable] {
margin: 0.5em 0;
}
[data-pocket-editor] [type=checkbox] {
width: 1.3em;
height: 1.3em;
}
[data-pocket-editor] [data-todo-checked] p {
text-decoration: line-through;
opacity: 0.8;
}
[data-pocket-editor] [data-list] [data-list-marker] {
text-align: center;
width: 1em;
}
[data-pocket-editor] [data-list] [data-list-marker]::before {
content: attr(data-content);
}
#pocket-editor-mock-sel,
#pocket-editor-mock-p {
position: absolute;
overflow: hidden;
height: 0;
}
/* src/styles/features/notes.css */
#notes_container {
width: 100%;
max-width: var(--notes-width);
}
#notes_container.hidden {
display: none;
}
#notes_container.opaque #pocket-editor {
color: #222;
}
#notes_container.opaque #pocket-editor [data-selected] {
color: #222;
background-color: rgba(34, 34, 34, 0.1333333333);
}
#notes_container.center-align #pocket-editor {
text-align: center;
}
#notes_container.right-align #pocket-editor {
text-align: right;
}
#pocket-editor {
color: #fff;
font-size: 1.3em;
padding: 1.2em;
min-width: 0;
text-align: initial;
text-shadow: none;
border-radius: 1em;
line-height: 1.5em;
letter-spacing: initial;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
border: 1px solid rgba(255, 255, 255, 0.075);
background-color: var(--notes-background);
backdrop-filter: blur(2em);
-webkit-backdrop-filter: blur(2em);
}
#pocket-editor [data-selected] {
color: #fff;
background-color: rgba(255, 255, 255, 0.1333333333);
}
#pocket-editor:empty:after {
content: attr(placeholder);
opacity: 0.5;
}
#pocket-editor>div:first-child h1,
#pocket-editor>div:first-child h2,
#pocket-editor>div:first-child h3 {
margin-top: 0;
}
#pocket-editor h1,
#pocket-editor h2,
#pocket-editor h3,
#pocket-editor h4,
#pocket-editor h5,
#pocket-editor h6 {
line-height: initial;
margin: 0.5em 0;
}
#pocket-editor input[type=checkbox] {
width: calc(var(--font-size) * 1.3);
height: calc(var(--font-size) * 1.3);
margin: 0.25em 0.1em;
}
#pocket-editor ul {
margin: 0;
padding-left: 1.6em;
}
#pocket-editor li {
list-style: inherit;
}
#pocket-editor a {
color: inherit;
}
#pocket-editor a.hidden {
resize: none;
display: none;
}
/* src/styles/features/links.css */
#linkblocks {
--in-out-bounce: cubic-bezier(0.68, -0.2, 0.265, 1.2);
}
#linkblocks.hidden {
display: none;
}
.select-all .link div,
.select-all .link span {
filter: grayscale(1) brightness(0.6);
}
.select-all .selected div,
.select-all .selected span {
filter: none;
}
.select-all.inline .link:hover span,
.select-all.text .link:hover span {
text-decoration: none;
}
.text-left #link-mini,
.text-left .link-list {
justify-content: start;
}
.text-left #link-mini {
text-align: left;
}
.text-left .link-group {
align-items: start;
}
.text-right #link-mini,
.text-right .link-list {
justify-content: end;
}
.text-right #link-mini {
text-align: right;
}
.text-right .link-group {
align-items: end;
}
.link-group {
display: flex;
flex-direction: column;
align-items: center;
row-gap: 1em;
}
.link-group.pinned {
margin-bottom: 3em;
}
.link-group.hiding .link-list {
opacity: 0;
}
.link-group.hiding .link {
transform: scale(0.9);
}
.link-elem:active,
.link-folder:active img,
.link-group.hiding .link-elem,
.link-group.hiding .link-folder img {
filter: brightness(0.8);
}
.link-folder:active div,
.link-group.hiding .link-folder div {
backdrop-filter: blur(1em) brightness(0.8);
-webkit-backdrop-filter: blur(1em) brightness(0.8);
}
.link-group.in-folder .link-list {
display: flex;
padding: var(--folder-padding);
background-color: #fff2;
border: 1px solid #fff4;
backdrop-filter: blur(2em);
-webkit-backdrop-filter: blur(2em);
}
.link-list {
position: relative;
display: inline-flex;
visibility: visible;
flex-wrap: wrap;
justify-content: center;
row-gap: var(--row-gap);
column-gap: var(--column-gap);
min-height: var(--min-height);
min-width: 6em;
padding: 0;
margin: 0;
max-width: var(--links-width);
background-color: transparent;
border: 1px solid transparent;
border-radius: var(--border-radius);
z-index: 2;
transition: opacity 0.05s var(--out-cubic);
}
.link-title {
display: none;
max-width: 26ch;
padding: 0.2em 1em;
overflow: hidden;
white-space: nowrap;
text-align: center;
text-overflow: ellipsis;
opacity: 0.7;
color: white;
font-size: 1em;
border-radius: 8px;
border: 1px solid transparent;
background-color: transparent;
cursor: pointer;
transition: transform 0.2s var(--in-out-bounce);
}
.link-group .link-title {
max-width: 100%;
}
.with-groups .link-group.pinned .link-title,
.link-group.in-folder .link-title {
display: initial;
}
.link-title:hover {
opacity: 1;
}
.link-title.selected,
.link-title.selected.selected-group {
opacity: 1;
outline: 2px solid var(--color-blue);
background-color: rgba(var(--orange), 0.15);
}
.link-group.pinned .link-title,
.link-title.selected-group {
opacity: 1;
cursor: initial;
border-color: #fff1;
background-color: #fff2;
backdrop-filter: blur(2em);
-webkit-backdrop-filter: blur(2em);
}
.link-group.in-folder .link-title {
user-select: none;
pointer-events: none;
-webkit-user-select: none;
}
.link {
transition:
transform 0.2s var(--in-out-bounce),
opacity 0.1s var(--in-out-bounce),
filter 0.06s;
}
.link {
width: var(--block-size);
cursor: pointer;
touch-action: none;
}
.link div,
.link img {
transition-duration: 0.05s;
transition-timing-function: var(--out-cubic);
transition-property:
transform,
box-shadow,
border-color,
background-color;
}
.link div {
margin: auto;
flex-shrink: 0;
width: var(--icon-size);
height: var(--icon-size);
box-sizing: border-box;
}
.link a {
color: white;
cursor: pointer;
text-decoration: none;
transition: width 0.2s var(--out-cubic);
-webkit-touch-callout: none;
}
.link img {
width: 100%;
height: 100%;
}
.link span {
display: none;
width: 100%;
padding-top: 0.4em;
line-height: 1.2em;
max-height: 3.6em;
overflow: hidden;
word-wrap: break-word;
}
.titles .link span {
display: block;
}
.titles.small .link span {
display: inline;
width: unset;
top: 3.5em;
}
.backgrounds .link div {
background-color: white;
border-color: white;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}
.backgrounds .link div:hover {
box-shadow: unset;
}
.link.removed {
margin: 0 calc(var(--column-gap) / 2 * -1);
width: 0 !important;
opacity: 0;
overflow: hidden;
transition:
width 0.3s 0.3s var(--out-cubic),
margin 0.3s 0.3s var(--out-cubic),
opacity 0.3s var(--out-cubic);
}
.link.removed span {
min-height: 0 !important;
max-height: 0 !important;
transition: max-height 0.3s 0.3s var(--out-cubic);
}
.link.removed div {
transform: scale(0.6);
}
#linkblocks.large .link.selected div,
#linkblocks.medium .link.selected div,
#linkblocks.small .link.selected div {
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
outline: 0.3em solid var(--color-blue);
}
#linkblocks.inline .link-folder.selected,
#linkblocks.inline .link.selected a,
#linkblocks.text .link-folder.selected,
#linkblocks.text .link.selected a {
border-radius: 0.5em;
outline: 0.2em solid var(--color-blue);
background-color: rgba(0, 114, 238, 0.1333333333);
}
#linkblocks.inline .link.selected:hover span,
#linkblocks.text .link.selected:hover span {
text-decoration: none;
}
@media only screen and (hover: hover) {
#linkblocks.backgrounds .link:hover div {
box-shadow: 0px 0.2em 1em #0003;
}
.link:hover:not(.selected) div {
transform: scale(0.95);
}
}
.link-folder>div {
display: grid;
column-gap: 4px;
height: var(--icon-size);
grid-template-columns: 1fr 1fr;
border: 1px solid transparent;
box-sizing: border-box;
backdrop-filter: blur(1em);
-webkit-backdrop-filter: blur(1em);
}
.link-folder img[src] {
display: initial;
}
.link-folder img {
display: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
}
#linkblocks .link-folder>div,
#linkblocks.backgrounds .link-folder>div {
background-color: #fff3;
border-color: #fff4;
}
#linkblocks.backgrounds .link-folder img {
background-color: white;
}
#linkblocks.large {
--min-height: 5.2em;
--column-gap: 0.6em;
--row-gap: 1em;
--icon-size: 4.8em;
--block-size: 6.5em;
--folder-padding: 2em;
}
.large .link div {
padding: var(--link-padding);
border-radius: var(--link-outer-radius);
}
.large .link img {
border-radius: calc(var(--link-outer-radius) - var(--link-padding));
}
.large .link-folder div {
padding: 5px;
}
.large .link-folder img {
border-radius: calc(var(--link-outer-radius) * 0.45);
padding: calc(var(--link-padding) * 0.45);
width: 100%;
aspect-ratio: 1/1;
height: auto;
box-sizing: border-box;
}
#linkblocks.medium {
--min-height: 3.9em;
--column-gap: 0.6em;
--row-gap: 1em;
--icon-size: 3.5em;
--block-size: 4.7em;
--folder-padding: 1.6em;
}
.medium .link div {
padding: calc(var(--link-padding) * 0.77);
border-radius: calc(var(--link-outer-radius) * 0.77);
}
.medium .link img {
border-radius: calc((var(--link-outer-radius) - var(--link-padding)) * 0.77);
}
#linkblocks.small {
--min-height: 2.5em;
--block-size: 2.5em;
--column-gap: 1.5em;
--row-gap: 1.5em;
--folder-padding: 1.2em;
}
.small #link-list {
min-height: 2em;
gap: 1.5em;
}
.small a,
.small .link {
position: relative;
}
.small .link {
width: var(--block-size);
}
.small .link div {
width: var(--block-size);
height: var(--block-size);
padding: calc(var(--link-padding) * 0.57);
border-radius: calc(var(--link-outer-radius) * 0.57);
}
.small .link img {
border-radius: calc((var(--link-outer-radius) - var(--link-padding)) * 0.57);
}
.small .link span {
position: absolute;
visibility: hidden;
top: 3em;
transform: translateX(-50%);
padding: 0em 0.6em;
opacity: 0;
color: white;
font-size: 0.9em;
line-height: 1.3em;
max-height: 3.9em;
text-shadow: none;
border-radius: 0.3em;
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.075);
backdrop-filter: blur(1em);
-webkit-backdrop-filter: blur(1em);
transition: opacity 0.2s;
z-index: 1;
}
.small .link span:empty {
display: none;
}
.small .link:hover span {
opacity: 1;
visibility: visible;
}
.small.removed {
margin-right: -1em;
margin-left: -1em;
}
#linkblocks.inline {
--min-height: 2.4em;
--block-size: 2em;
--column-gap: 1em;
--row-gap: 1em;
--icon-size: 2em;
--folder-padding: 1.2em;
justify-content: flex-start;
}
.inline .link-folder div {
display: block;
padding: 4px;
}
.inline .link-folder img {
box-sizing: border-box;
}
.inline .link-folder img:not(:first-child) {
display: none;
}
.inline .link span {
padding: 0 0.2em;
outline: 3px solid transparent;
}
.inline .link {
width: auto;
}
.inline .link:hover {
text-decoration: underline;
}
.inline .link:hover div {
box-shadow: none;
transform: none;
}
.inline .link-folder,
.inline .link a {
display: flex;
flex-direction: row;
align-items: center;
column-gap: 0.6em;
}
.inline .link div {
padding: calc(var(--link-padding) * 0.43);
border-radius: calc(var(--link-outer-radius) * 0.43);
}
.inline .link img {
border-radius: calc((var(--link-outer-radius) - var(--link-padding)) * 0.43);
}
.inline .link span {
display: block;
max-width: 8.4em;
font-size: 1.2em;
text-overflow: ellipsis;
white-space: pre;
line-height: 2em;
padding: 0;
}
.text {
--min-height: 2em;
--column-gap: 1.8em;
--row-gap: 1em;
--folder-padding: 1em;
justify-content: flex-start;
}
.text .link {
width: auto;
}
.text .link:hover span {
text-decoration: underline;
}
.text .link div,
.text .link img {
display: none;
}
.text .link span {
display: inline-block;
width: 100%;
max-width: 16em;
font-size: 1.5em;
text-overflow: ellipsis;
overflow: hidden;
white-space: pre;
border-radius: 8px;
}
.medium .link-folder div,
.small .link-folder div {
position: relative;
display: block;
}
.medium .link-folder img,
.small .link-folder img {
position: absolute;
width: 50%;
height: 50%;
box-sizing: border-box;
}
.medium .link-folder img {
padding: calc(var(--link-padding) * 0.42);
border-radius: calc(var(--link-outer-radius) * 0.42);
}
.small .link-folder img {
padding: calc(var(--link-padding) * 0.27);
border-radius: calc(var(--link-outer-radius) * 0.27);
}
.medium .link-folder img:nth-child(1),
.small .link-folder img:nth-child(1) {
top: 15%;
left: 15%;
z-index: 5;
}
.medium .link-folder img:nth-child(2),
.small .link-folder img:nth-child(2) {
top: 30%;
left: 30%;
z-index: 4;
}
.medium .link-folder img:nth-child(3),
.medium .link-folder img:nth-child(4),
.small .link-folder img:nth-child(3),
.small .link-folder img:nth-child(4) {
display: none;
}
.link.drop-target img,
.link.drop-source div {
transform: scale(0.8);
}
.link.drop-source span {
opacity: 0;
transition: opacity 0.05s;
}
.link.drop-target div {
border-color: #fff4;
background-color: #fff3;
}
.drop-target.link-group,
.drop-target.link-folder img {
opacity: 0.5;
}
.large .drop-target.link-folder img {
transform: none;
}
.inline .link.drop-source div,
.text .link.drop-source div {
opacity: 0;
}
.inline .drop-source span,
.text .drop-source span {
transform: scale(0.8);
}
.inline .drop-target span,
.inline .drop-target div,
.text .drop-target span,
.text .drop-target div {
opacity: 0.5;
}
.in-drag#link-mini,
.in-drag.link-group .link-list,
.in-drag.link-group.in-folder .link-list {
padding: 0;
max-width: none;
will-change: transform;
width: calc(var(--drag-width) - 2px);
height: calc(var(--drag-height) - 2px);
}
.in-drag a,
.in-drag div {
user-select: none;
pointer-events: none;
}
.in-drag#link-mini .link-title,
.in-drag .link {
pointer-events: none;
position: fixed;
top: 0;
left: 0;
z-index: 3;
}
.in-drag#link-mini .link-title {
border-color: #fff2;
}
.in-drag .on {
z-index: 4;
transition: none;
pointer-events: none;
}
#link-mini {
display: none;
width: 100%;
padding-top: 1em;
padding-right: 4em;
}
#link-mini>div {
position: relative;
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
column-gap: 1em;
row-gap: 0.5em;
box-sizing: border-box;
}
#link-mini .link-title {
display: initial;
}
#link-mini .add-group {
position: absolute;
visibility: hidden;
font-weight: bold;
width: 3em;
right: -4em;
}
#link-mini .add-group:hover,
#link-mini .add-group.selected,
#link-mini:hover .add-group {
visibility: visible;
}
#link-mini.in-drag .add-group {
visibility: hidden;
}
.link-group.in-folder+#link-mini {
display: none;
}
.with-groups #link-mini,
.in-folder #link-mini {
display: block;
}
/* src/styles/features/quotes.css */
#quotes_container {
display: block;
row-gap: 1em;
width: 50vw;
max-width: 45em;
min-width: 20em;
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
cursor: initial;
}
#quotes_container.hidden {
display: none;
}
#quotes_container:hover #author {
opacity: 1;
}
#quote {
font-size: 1.5em;
line-height: 1.5em;
max-height: 9em;
margin-bottom: 0.75em;
overflow-y: clip;
}
#author {
opacity: 0;
font-size: 1.2em;
transition: opacity 0.4s;
}
#author.always-on {
opacity: 1;
}
/* src/styles/features/pomodoro.css */
:root {
--pmdr-focus-transition: 0.25s;
}
body #background-wrapper:after {
content: "";
transition: opacity 0.5s ease;
position: absolute;
inset: 0;
will-change: opacity;
opacity: 0;
box-shadow: inset 0px 0px 285px rgba(0, 0, 0, 0.9);
}
body.pomodoro-focus:has(#pomodoro_container:not(.hidden)) #background-wrapper:after {
opacity: 1;
}
body.pomodoro-focus:has(#pomodoro_container:not(.hidden)) #interface>*:not(#pomodoro_container) {
display: none;
}
body.pomodoro-focus:has(#pomodoro_container:not(.hidden)) #interface {
grid-template-areas: "pomodoro";
}
#pomodoro_container {
display: flex;
flex-direction: column;
max-width: 45em;
min-width: 20em;
cursor: initial;
font-size: var(--pomodoro-font-size);
}
#pomodoro_container.clone {
will-change: transform, gap;
transition: transform var(--pmdr-focus-transition) ease, gap var(--pmdr-focus-transition) ease;
}
#pomodoro_container.clone #pmdr_timer {
transition: font-weight var(--pmdr-focus-transition) ease, font-size var(--pmdr-focus-transition) ease;
}
#pomodoro_container.outOfFocus {
gap: 0.75em;
}
#pomodoro_container.onFocus {
gap: 1em;
}
#pomodoro_container.hidden {
display: none;
}
#pomodoro_container #pmdr_pause,
#pomodoro_container.started #pmdr_start {
display: none;
}
#pomodoro_container #pmdr_start,
#pomodoro_container.started #pmdr_pause {
display: flex;
}
#pomodoro_options input[type=number]:after {
content: "mn";
display: none;
}
#pmdr_modes {
display: flex;
position: relative;
border-radius: 10em;
align-items: center;
gap: 1.2em;
padding: 0.5em 0.7em;
}
.glider {
position: absolute;
display: flex;
top: 0.5em;
bottom: 0.5em;
border-radius: 10em;
will-change: left, width;
opacity: 0;
&.gliding {
transition: left 0.2s ease, width 0.2s ease;
}
}
.glider,
#pmdr_modes .pomodoro_mode.active {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(2px) saturate(180%);
-webkit-backdrop-filter: blur(2px) saturate(180%);
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2), inset 0 4px 20px rgba(255, 255, 255, 0.3);
}
[data-theme=dark] .glider,
[data-theme=dark] #pmdr_modes .pomodoro_mode.active {
background: rgba(255, 255, 255, 0.2);
}
.glass {
position: relative;
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(2px) saturate(180%);
-webkit-backdrop-filter: blur(2px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.17), inset 0 4px 20px rgba(255, 255, 255, 0.225);
}
[data-theme=dark] .glass {
background: rgba(0, 0, 0, 0.32);
border: 1px solid rgba(255, 255, 255, 0.35);
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.17), inset 0 4px 20px rgba(255, 255, 255, 0.2);
}
.glass::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
border-radius: 2rem;
backdrop-filter: blur(1px);
-webkit-backdrop-filter: blur(1px);
box-shadow: inset -10px -8px 0px -11px rgba(255, 255, 255, 0.9), inset 0px -9px 0px -8px rgba(255, 255, 255, 0.9);
opacity: 0.6;
z-index: -1;
filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(115%);
}
[data-theme=dark] .glass:after {
background: rgba(255, 255, 255, 0.05);
box-shadow: inset -10px -8px 0px -11px rgba(255, 255, 255, 0.4), inset 0px -9px 0px -8px rgba(255, 255, 255, 0.4);
}
#pmdr_modes .pomodoro_mode {
background: transparent;
border-radius: 10em;
padding-block: 0.4em;
padding-inline: 1em;
font-weight: 500;
font-size: 1.1em;
z-index: 1;
}
#pmdr_modes .pomodoro_mode label {
cursor: pointer;
text-shadow: unset;
user-select: none;
-webkit-user-select: none;
}
#pmdr_modes .pomodoro_mode input {
display: none;
}
#pmdr_timer {
display: block;
}
#pomodoro_container.onFocus #pmdr_timer {
font-size: 6em;
font-weight: 600;
}
#pomodoro_container.outOfFocus #pmdr_timer {
font-size: 4em;
font-weight: 400;
}
#bottomControls {
display: flex;
justify-content: center;
align-items: center;
gap: 1em;
}
#bottomControls button {
padding: 3px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
height: 3em;
width: 3em;
border-radius: 100%;
color: white;
}
#bottomControls button svg {
width: 17px;
}
#focus-toggle {
position: relative;
display: flex;
align-items: center;
gap: 8px;
font-weight: 400;
color: white;
padding: 6px 12px;
border-radius: 9999px;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.1);
border: 1px solid #fff1;
transition:
backdrop-filter 0.2s ease,
background 0.2s ease,
box-shadow 0.2s ease,
border 0.2s ease;
}
#focus-toggle:hover {
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(2px) saturate(180%);
-webkit-backdrop-filter: blur(2px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.7);
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.17), inset 0 4px 20px rgba(255, 255, 255, 0.225);
}
[data-theme=dark] #focus-toggle:hover {
background: rgba(0, 0, 0, 0.32);
border: 1px solid rgba(255, 255, 255, 0.35);
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.17), inset 0 4px 20px rgba(255, 255, 255, 0.2);
}
#focus-toggle:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
border-radius: 2rem;
backdrop-filter: blur(1px);
-webkit-backdrop-filter: blur(1px);
box-shadow: inset -10px -8px 0px -11px rgba(255, 255, 255, 0.9), inset 0px -9px 0px -8px rgba(255, 255, 255, 0.9);
z-index: -1;
filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(115%);
opacity: 0;
}
[data-theme=dark] #focus-toggle:after {
background: rgba(255, 255, 255, 0.05);
box-shadow: inset -10px -8px 0px -11px rgba(255, 255, 255, 0.4), inset 0px -9px 0px -8px rgba(255, 255, 255, 0.4);
}
#focus-toggle:hover:after {
opacity: 0.6;
}
#focus-toggle input {
display: none;
}
#focus-toggle .slider {
width: 32px;
height: 18px;
background: rgba(255, 255, 255, 0.3);
border-radius: 9999px;
position: relative;
transition: background 0.3s;
}
#focus-toggle .slider::after {
content: "";
position: absolute;
left: 2px;
top: 2px;
width: 14px;
height: 14px;
background: white;
border-radius: 50%;
transition: transform 0.3s;
}
#focus-toggle input:checked+.slider {
background: var(--color-orange);
}
#focus-toggle input:checked+.slider::after {
transform: translateX(14px);
}
@media screen and (max-width: 600px) {
#pmdr_modes {
gap: 0;
}
}
/* src/styles/features/grid.css */
.move-overlay {
border: none;
border-radius: 1em;
background-color: #fff2;
backdrop-filter: blur(2em);
-webkit-backdrop-filter: blur(2em);
outline: 0.4em solid transparent;
transition: background-color 0.05s var(--out-cubic);
z-index: -1;
}
.move-overlay:hover {
background-color: #fff3;
}
.move-overlay.selected {
background-color: rgba(var(--orange), 0.15);
outline-color: var(--color-blue);
}
#move-overlay-time,
#time {
grid-area: time;
}
#move-overlay-main,
#main {
grid-area: main;
}
#move-overlay-searchbar,
#sb_container {
grid-area: searchbar;
}
#move-overlay-notes,
#notes_container {
grid-area: notes;
}
#move-overlay-quicklinks,
#linkblocks {
grid-area: quicklinks;
}
#move-overlay-quotes,
#quotes_container {
grid-area: quotes;
}
#move-overlay-pomodoro,
#pomodoro_container {
grid-area: pomodoro;
}
:root[data-theme=light] #text-alignment-mover button,
:root[data-theme=light] #box-alignment-mover button,
:root[data-theme=light] #grid-mover button {
color: var(--color-light-text);
}
#element-mover {
position: absolute;
display: flex;
flex-direction: column;
left: 2em;
top: 2em;
gap: 24px;
padding: 16px 6px 8px;
min-width: 170px;
font-size: 14px;
border-radius: 1em;
box-shadow: 5px 5px 20px #2224;
cursor: grab;
direction: ltr;
z-index: 4;
}
#element-mover:not(.active)>div:not(#close-mover-wrapper) {
pointer-events: none;
filter: grayscale(1);
opacity: 0.4;
cursor: auto;
}
#element-mover.hidden {
display: none;
}
#element-mover button {
text-align: center;
}
#element-mover p {
margin-bottom: 1em;
}
#grid-mover button,
#box-alignment-mover button,
#text-alignment-mover button {
padding: 0;
}
.mover {
display: grid;
}
.mover button {
border: none;
border-radius: 0.2em;
min-width: 2.5em;
background-color: transparent;
}
.mover button:hover:not(:disabled) {
background-color: #fff4;
}
.mover button:active:not(:disabled) {
background-color: #fff5;
}
.mover button.selected,
.mover button.selected:hover,
.mover button.selected:active {
outline: 2px solid var(--color-blue);
background-color: rgba(var(--orange), 0.15);
}
button.grid-spanner {
display: block;
width: 60%;
margin: 0.3em auto;
border-width: 2px;
background-color: var(--color-dialog-highlight);
}
button.grid-spanner:hover:not(:disabled) {
color: var(--color-blue);
background-color: rgba(var(--orange), 0.15);
}
button.grid-spanner.selected:not(:disabled) {
color: var(--color-blue);
border-color: var(--color-blue);
background-color: rgba(var(--orange), 0.25);
}
#grid-selection {
display: none;
}
#grid-mover {
max-width: 85px;
margin: auto;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
#grid-mover button {
min-width: 3em;
margin: 0;
padding: 0;
}
#grid-mover button:first-of-type,
#grid-mover button:last-of-type {
grid-column: 1 / 3;
}
#grid-spanner-container {
display: none;
}
#grid-spanner-container.active {
display: block;
}
#box-alignment-mover {
place-content: center;
grid-template-columns: repeat(3, 32px);
grid-template-rows: repeat(3, 24px);
}
#text-alignment-mover {
place-content: center;
grid-template-columns: repeat(3, 40px);
}
#text-alignment-mover button {
display: flex;
align-items: center;
justify-content: center;
padding: 0.5em;
}
#close-mover-wrapper button {
display: block;
width: 100%;
}
button i {
box-sizing: border-box;
position: relative;
display: block;
margin: auto;
}
button i::before,
button i::after {
content: "";
box-sizing: border-box;
position: absolute;
display: block;
}
.rotate-half {
transform: rotate(180deg);
}
.rotate-quart {
transform: rotate(90deg);
}
.rotate-quart-r {
transform: rotate(-90deg);
}
.chevron {
display: inline-block;
width: 2.4em;
height: 2.4em;
font-size: 10px;
}
.chevron::after {
border-bottom: 0.2em solid;
border-right: 0.2em solid;
width: 1em;
height: 1em;
transform: rotate(45deg) translateX(100%);
}
i.text-left,
i.text-center,
i.text-right,
i.box-center,
i.box-corner,
i.box-side {
margin: auto;
width: 1.4em;
height: 1.4em;
font-size: 10px;
}
i.box-center::after {
top: 0.2em;
left: 0.1em;
height: 0.6em;
width: 1.2em;
border-bottom: 0.2em solid;
}
i.box-center::before {
top: 0.1em;
left: 0.6em;
height: 1.2em;
border-left: 0.2em solid;
}
i.box-side {
border-bottom: 0.2em solid;
}
i.box-side::before {
bottom: 0;
left: 0.6em;
height: 0.6em;
border-left: 0.2em solid;
}
i.box-corner::before {
left: 0;
top: 0;
height: 1em;
width: 1em;
border-left: 0.2em solid;
border-top: 0.2em solid;
}
i.text-left::before,
i.text-center::before,
i.text-right::before,
i.text-left::after,
i.text-center::after,
i.text-right::after {
border-bottom: 0.2em solid;
border-top: 0.2em solid;
}
i.text-left::before,
i.text-center::before,
i.text-right::before {
top: 0;
width: 0.8em;
height: 1em;
}
i.text-left::after,
i.text-center::after,
i.text-right::after {
top: 0.4em;
width: 1.4em;
height: 1em;
}
i.text-left::after,
i.text-left::before,
i.text-center::after {
left: 0;
}
i.text-right::before,
i.text-right::after {
right: 0;
}
i.text-center::before {
left: 0.3em;
}
/* src/styles/features/editlink.css */
#editlink {
position: fixed;
left: 0;
top: 0;
opacity: 0;
width: 240px;
padding: 6px;
margin: 0;
z-index: 4;
transition: opacity 0.05s;
}
#editlink.shown {
opacity: 1;
}
#editlink label {
width: 100%;
opacity: 0.7;
column-gap: 4px;
margin-top: 6px;
padding-inline: 12px 4px;
place-items: center;
grid-template-columns: 42px 1fr;
box-sizing: border-box;
}
#editlink label span {
font-size: 12px;
justify-self: start;
max-width: 45px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
}
#editlink label:focus-within {
opacity: 1;
}
#editlink select,
#editlink input {
color: var(--color-text);
width: 100%;
height: 2.3em;
padding: 0 10px;
border: none;
border-radius: 8px;
box-sizing: border-box;
background-color: transparent;
}
#editlink input[type=file] {
line-height: 30px;
}
#editlink input::placeholder {
color: var(--color-dialog-input-text);
}
#editlink input:focus {
opacity: 1;
color: var(--color-text);
background-color: var(--color-dialog-input-bg);
outline: 3px solid rgba(var(--orange), 0.5);
outline-offset: -2px;
transition: background-color 0.1s;
}
#editlink button {
flex-direction: row;
align-items: center;
width: 100%;
padding: 4px 12px;
font-weight: 400;
gap: 0.5em;
}
#editlink button svg {
height: 18px;
}
#editlink hr,
#editlink label,
#editlink button {
display: none;
}
#editlink hr.on,
#editlink button.on {
display: flex;
}
#editlink label.on {
display: grid;
}
/* src/styles/features/contextmenu.css */
dialog#contextmenu {
position: fixed;
left: 0;
top: 0;
opacity: 0;
width: 240px;
padding: 6px;
margin: 0;
z-index: 4;
transition: opacity 0.05s;
}
dialog#contextmenu:focus-visible {
outline: none;
}
dialog#contextmenu.shown {
opacity: 1;
}
dialog#contextmenu label {
width: 100%;
opacity: 0.7;
column-gap: 4px;
margin-top: 6px;
padding-inline: 12px 4px;
place-items: center;
grid-template-columns: 42px 1fr;
box-sizing: border-box;
}
dialog#contextmenu label span {
font-size: 12px;
justify-self: start;
max-width: 45px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
}
dialog#contextmenu label:focus-within {
opacity: 1;
}
dialog#contextmenu input,
dialog#contextmenu select {
width: 100%;
height: 2.3em;
padding: 0 10px;
border: none;
border-radius: 8px;
box-sizing: border-box;
color: var(--color-text);
}
dialog#contextmenu input {
background-color: transparent;
}
dialog#contextmenu select {
background-color: transparent;
}
dialog#contextmenu select option {
color: black;
}
dialog#contextmenu input::placeholder {
color: var(--color-dialog-input-text);
}
dialog#contextmenu select:focus,
dialog#contextmenu input:focus {
opacity: 1;
color: var(--color-text);
background-color: var(--color-dialog-input-bg);
outline: 3px solid rgba(var(--orange), 0.5);
outline-offset: -2px;
transition: background-color 0.1s;
}
dialog#contextmenu input[type=file] {
color: transparent;
}
dialog#contextmenu input[type=file],
dialog#contextmenu input[type=file]+span {
grid-area: 1 / 2;
}
dialog#contextmenu input[type=file]+span {
display: inline-block;
font-size: 13px;
padding-inline: 10px;
width: calc(100% - 20px);
max-width: unset;
cursor: pointer;
text-align: left;
}
dialog#contextmenu button {
flex-direction: row;
align-items: center;
width: 100%;
padding: 4px 12px;
font-weight: 400;
gap: 0.5em;
}
dialog#contextmenu button * {
pointer-events: none;
}
dialog#contextmenu button>svg,
dialog#contextmenu button .iconContainer {
height: 18px;
width: 18px;
}
dialog#contextmenu button .iconContainer svg {
width: 100%;
}
dialog#contextmenu button .iconContainer {
padding: 2px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
dialog#contextmenu hr,
dialog#contextmenu label,
dialog#contextmenu button {
display: none;
}
dialog#contextmenu hr.on,
dialog#contextmenu button.on {
display: flex;
}
dialog#contextmenu label.on {
display: grid;
}
#background-actions {
display: none;
}
#background-actions.on:not([data-type=color]) {
display: block;
}
dialog#contextmenu #background-actions hr,
dialog#contextmenu #background-actions label,
dialog#contextmenu #background-actions button {
display: flex;
}
#background-actions .buttons {
display: flex;
flex-direction: column;
}
dialog#contextmenu #background-actions button {
display: flex;
width: unset;
}
dialog#contextmenu #background-actions button:disabled {
display: none;
}
#download-background {
display: none;
}
#b_interface-background-download.idle #is-downloading,
#b_interface-background-download.loading #idle-download {
display: none;
}
#b_interface-background-pause #interface-background-pause-icon,
#b_interface-background-pause.paused #interface-background-play-icon,
#b_interface-background-pause #interface-background-pause-string,
#b_interface-background-pause.paused #interface-background-play-string {
display: flex;
}
#b_interface-background-pause #interface-background-play-icon,
#b_interface-background-pause.paused #interface-background-pause-icon,
#b_interface-background-pause #interface-background-play-string,
#b_interface-background-pause.paused #interface-background-pause-string {
display: none;
}
#b_interface-background-mute #interface-background-mute-icon,
#b_interface-background-mute.muted #interface-background-unmute-icon,
#b_interface-background-mute #interface-background-mute-string,
#b_interface-background-mute.muted #interface-background-unmute-string {
display: flex;
}
#b_interface-background-mute #interface-background-unmute-icon,
#b_interface-background-mute.muted #interface-background-mute-icon,
#b_interface-background-mute #interface-background-unmute-string,
#b_interface-background-mute.muted #interface-background-mute-string {
display: none;
}
.spin path:last-child {
transform-origin: 12px 12px;
animation: spin 0.75s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
#pomodoro-info {
display: none;
flex-direction: column;
opacity: .8;
font-style: italic;
font-size: .8em;
text-align: left;
}
#pomodoro-info>div {
padding: 4px 12px;
}
dialog#contextmenu #pomodoro-info hr,
#pomodoro-info.on {
display: flex;
}
/* src/styles/features/bookmarks.css */
#bookmarks {
width: calc(100% - 4em);
max-width: 900px;
min-height: 30vh;
padding: 0em;
border-radius: 1.5em;
opacity: 0;
transition: opacity 0.1s 0.3s;
}
#bookmarks::backdrop {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background-color: transparent;
transition: background-color 0.3s, backdrop-filter 0.1s 0.3s;
}
#bookmarks.shown {
opacity: 1;
}
#bookmarks.shown::backdrop {
backdrop-filter: blur(1em);
-webkit-backdrop-filter: blur(1em);
background-color: #0006;
}
#bookmarks-header {
padding: 20px;
padding-inline-start: 60px;
display: flex;
gap: 2em;
align-items: center;
justify-content: space-between;
}
[data-theme=dark] #bookmarks-header {
box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 15px;
}
[data-theme=light] #bookmarks-header {
box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px;
}
#bookmarks-intro {
max-width: 400px;
text-align: left;
}
#bookmarks-buttons {
width: min-content;
text-align: right;
}
#bookmarks-buttons button {
white-space: nowrap;
width: fit-content;
margin: 2px 1em;
}
#bmk_apply {
color: white;
background-color: var(--color-blue);
}
#bmk_apply:disabled {
color: inherit;
background-color: transparent;
}
#bmk_apply:focus-visible,
#bmk_apply:hover {
filter: brightness(1.2);
}
#bookmarks-container {
max-height: 60vh;
overflow-y: auto;
padding: 2em 2em 1em;
will-change: backdrop-filter;
}
.bookmarks-folder {
border: 2px solid #fff1;
border-radius: 1em;
margin-bottom: 20px;
padding: 16px;
}
[data-theme=dark] .bookmarks-folder {
background-color: #fff1;
}
[data-theme=light] .bookmarks-folder {
background-color: #fff3;
}
.bookmarks-folder.selected {
border-color: var(--color-blue);
background-color: rgba(var(--orange), 0.15);
}
.bookmarks-folder.selected li {
user-select: none;
pointer-events: none;
}
.bookmarks-folder.selected li {
opacity: 0.3;
}
.bookmarks-folder.used {
user-select: none;
pointer-events: none;
opacity: 0.3;
}
.bookmarks-folder-title {
display: flex;
column-gap: 8px;
justify-content: space-between;
margin: 0 16px 24px 16px;
}
.bookmarks-folder-title button {
white-space: nowrap;
}
.bookmarks-folder-title-synced {
display: none;
}
.synced .bookmarks-folder-title-synced {
display: inline;
}
#bookmarks h2 {
margin: 0;
font-size: 20px;
text-transform: capitalize;
}
#bookmarks ol {
display: grid;
gap: 4px;
margin: 0;
padding: 0;
list-style-type: none;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
#bookmarks li {
border-radius: 1em;
border: 2px solid transparent;
user-select: none;
overflow: hidden;
}
#bookmarks li.selected {
border-color: var(--color-blue);
background-color: rgba(var(--orange), 0.25);
}
#bookmarks li button {
width: 100%;
padding: 5px;
transition: background-color 0.05s;
}
.selected .b_bookmarks-folder-select,
.synced .b_bookmarks-folder-sync {
color: var(--color-text);
background-color: #fff2;
}
.b_bookmarks-folder-select:focus-visible,
.b_bookmarks-folder-sync:focus-visible,
.b_bookmarks-folder-select:hover,
.b_bookmarks-folder-sync:hover {
color: var(--color-text);
background-color: #fff4;
}
#bookmarks li button:focus-visible,
#bookmarks li button:hover {
color: var(--color-text);
background-color: #fff2;
}
#bookmarks li.selected button:focus-visible,
#bookmarks li.selected button:hover {
background-color: transparent;
}
#bookmarks li button p:last-child {
opacity: 0.6;
font-weight: normal;
}
#bookmarks img {
display: block;
margin: auto;
margin-bottom: 0.5em;
width: 40px;
height: 40px;
border-radius: 8px;
}
#bookmarks p {
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
height: 1.5em;
line-height: 1.5em;
font-size: 0.9em;
font-weight: bold;
}
@media screen and (max-width: 600px) {
#bookmarks-container {
font-size: 14px;
padding: 8px;
}
#bookmarks-container #bookmarks {
width: 90%;
min-width: 0;
}
#bookmarks-container #bookmarks form div {
width: auto;
}
#bookmarks-header {
gap: 1em;
font-size: 14px;
text-align: left;
flex-direction: column;
padding-inline-start: 20px;
}
#bookmarks-buttons {
width: auto;
text-align: center;
}
.bookmarks-folder-title {
margin: 0 0 24px 0;
text-align: left;
align-items: center;
}
.bookmarks-folder-title h2 {
width: 100%;
}
.bookmarks-folder-title div {
text-align: right;
}
}
/* src/styles/features/csseditor.css */
#css-editor {
padding: 0;
}
.prism-code-editor {
font-size: 14px;
overflow: auto;
display: grid;
width: 100%;
max-height: 80vh;
line-height: 1.4;
--_pse: var(--padding-inline, 0.75em);
--_ns: var(--number-spacing, 0.75em);
padding: 16px 20px;
outline-offset: -2px;
border-radius: var(--border-radius);
box-sizing: border-box;
background: rgb(var(--color-param));
-webkit-user-select: none;
user-select: none;
isolation: isolate;
white-space: pre;
}
[data-system=mac] .prism-code-editor {
font-size: 12px;
}
.pce-wrapper {
position: relative;
pointer-events: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
.prism-code-editor textarea {
all: unset;
height: 100%;
width: 100%;
color: #0000;
overflow: hidden;
outline: none !important;
pointer-events: auto;
user-select: auto;
-webkit-user-select: auto;
}
.prism-code-editor textarea::placeholder {
color: var(--color-placeholder);
}
.pce-no-selection textarea:focus {
z-index: 1;
}
.pce-line {
position: relative;
}
.pce-overlays {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.pce-wrap {
white-space: pre-wrap;
word-break: break-word;
}
.token.italic {
font-style: italic;
}
.token.bold,
.token.important {
font-weight: 700;
}
aside .pce-wrapper {
--caret: #ffaa33;
--selector: #22a4e6;
--string: #86b300;
--keyword: #fa8d3e;
--operators: #ed9366;
}
[data-theme=dark] aside .pce-wrapper {
color-scheme: dark;
--selection-bg: #3198ff26;
--comment: #888b90bb;
--variable: #dddddd;
--plaintext: #dddddd;
--property: #3ba9ce;
--number: #d2a6ff;
--color: #98e7cc;
--class: #ffc35c;
--symbol: #ffaa33;
}
[data-theme=light] aside .pce-wrapper {
color-scheme: light;
--selection-bg: #036dd626;
--comment: #787b8099;
--plaintext: #5c6166;
--variable: #5c6166;
--property: #2fafda;
--number: #a37acc;
--color: #41b48e;
--class: #e6900f;
--symbol: #fa8d3e;
}
.prism-code-editor textarea {
caret-color: var(--caret);
}
.prism-code-editor textarea::selection {
color: transparent;
background: var(--selection-bg);
animation: alternate 1s 0s;
-webkit-animation: alternate 1s 0s;
}
.prism-code-editor,
.token.punctuation,
.token.combinator,
.token.plain-text {
color: var(--plaintext);
}
.token.comment {
color: var(--comment);
}
.token.symbol,
.token.inserted,
.token.unit {
color: var(--symbol);
}
.token.number {
color: var(--number);
}
.token.group,
.token.string,
.token.char,
.token.attr-value {
color: var(--string);
}
.token.keyword,
.token.important,
.token.boolean,
.token.tag,
.token.atrule .token.rule,
.token.function,
.token.pseudo-class,
.token.selector .token.operator,
.token.alternation .token.entity {
color: var(--keyword);
}
.token.variable,
.token.parameter,
.token.interpolation {
color: var(--variable);
}
.token.property {
color: var(--property);
}
.token.selector,
.token.escape {
color: var(--selector);
}
.token.selector .token.id,
.token.selector .token.class {
color: var(--class);
}
.token.color {
color: var(--color);
}
.token.constant {
color: var(--constant);
}
/* src/styles/features/supporters.css */
#supporters-notif-container.shown {
overflow: visible;
}
#supporters-notif {
position: relative;
padding: 1.5em 1.8em;
margin-top: 18px;
border-radius: var(--border-radius);
background-color: rgb(var(--color-param));
color: var(--color-text);
border: 1px solid #e3e3e3;
background-image:
linear-gradient(to left,
rgba(var(--color-param), 0) 0%,
rgba(var(--color-param), 0.9) 55%,
rgb(var(--color-param)) 100%),
var(--background);
background-size: 74%;
background-repeat: no-repeat;
background-position: right center;
transition: box-shadow 0.1s;
cursor: pointer;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
[data-theme=dark] #supporters-notif {
border-color: #363636;
}
#supporters-notif:hover:not(:has(#supporters-notif-close:hover)),
#supporters-notif:focus {
border: 1px solid #64b2ff;
box-shadow:
0 0 5px #50a8ff50,
0 0 10px #50a8ff50,
0 0 20px #50a7ff50,
0 0 30px #50a8ff50;
outline: unset;
}
[data-theme=dark] #supporters-notif:hover:not(:has(#supporters-notif-close:hover)),
#supporters-notif:focus {
border: 1px solid #50a7ff;
box-shadow:
0 0 5px #50a8ff53,
0 0 10px #50a7ff53,
0 0 20px #50a7ff53,
0 0 40px #50a8ff53;
}
#supporters-notif-close {
z-index: 2;
cursor: pointer;
border-radius: 100%;
width: 30px;
height: 30px;
position: absolute;
backdrop-filter: blur(4em);
-webkit-backdrop-filter: blur(4em);
background-color: var(--color-dialog);
top: 20px;
right: 20px;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.1s;
}
#supporters-notif-close:hover {
background-color: white;
}
[data-theme=dark] #supporters-notif-close:hover {
background-color: #191919;
}
#supporters-notif-close:focus {
outline-offset: 2px;
}
#supporters-notif-close svg {
flex-shrink: 0;
width: 22px;
stroke: #5f5f5f;
}
[data-theme=dark] #supporters-notif-close svg {
stroke: #fff;
}
#supporters-notif #supporters-notif-content {
z-index: 2;
position: relative;
width: 90%;
}
#supporters-notif #supporters-notif-title {
line-height: 1.5em;
font-size: 1.1em;
}
#supporters-notif #supporters-notif-button {
border-radius: 100px;
background-color: rgba(var(--orange));
color: white;
padding: 0.7em 0.9em;
margin-top: 1em;
transition: filter 0.05s;
}
#supporters-notif-button:focus {
outline: unset;
}
#show-settings:after {
content: "";
position: absolute;
display: block;
opacity: 0;
width: 7px;
height: 7px;
left: -2px;
top: -2px;
background-color: rgb(30, 161, 255);
border-radius: 100%;
z-index: 10;
transition: opacity 0.3s;
border: 1px solid #79bcff;
}
html[data-supporters] #show-settings:after {
opacity: 1;
}
html[data-supporters] #show-settings.shown:after {
opacity: 0;
}
@media screen and (max-width: 600px) {
#supporters-notif {
padding: 1.5em;
}
#supporters-notif #supporters-notif-title {
font-size: 1em;
}
#supporters-notif #supporters-notif-button {
padding: 0.5em 0.7em;
}
}
#supporters-modal-container {
position: absolute;
box-sizing: border-box;
top: 0;
left: 0;
width: 100svw;
height: 100svh;
backdrop-filter: blur(1em);
-webkit-backdrop-filter: blur(1em);
display: flex;
justify-content: center;
align-items: center;
z-index: 99;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease-in;
}
#supporters-modal {
all: unset;
display: block;
width: 100%;
max-width: 700px;
box-sizing: border-box;
position: relative;
border: 1px solid #fff1;
background-color: rgba(243, 243, 243, 0.8);
color: #131313;
border-radius: var(--border-radius);
margin: 1em;
overflow: hidden;
}
[data-theme=dark] #supporters-modal {
background-color: rgba(20, 20, 20, 0.8);
color: var(--color-text);
}
#supporters-modal #supporters-modal-close {
cursor: pointer;
border-radius: 100%;
position: absolute;
top: 25px;
right: 25px;
font-size: 1.1em;
display: flex;
justify-content: center;
align-items: center;
padding: 3px;
background-color: var(--color-dialog);
transition: background-color 0.1s;
}
#supporters-modal #supporters-modal-close:hover {
background-color: white;
}
[data-theme=dark] #supporters-modal #supporters-modal-close:hover {
background-color: #191919;
}
#supporters-modal #supporters-modal-close:focus {
outline-offset: 2px;
}
#supporters-modal #supporters-modal-close svg {
width: 22px;
stroke: #5f5f5f;
}
[data-theme=dark] #supporters-modal #supporters-modal-close svg {
stroke: #fff;
}
#supporters-modal main {
max-height: 50vh;
overflow-y: auto;
padding-inline: 3em;
}
#supporters-modal h2 {
margin-top: 2em;
font-size: 1.4em;
}
#supporters-modal h2,
#supporters-modal h3 {
font-weight: 500;
}
#supporters-modal main header {
max-width: 565px;
margin-inline: auto;
opacity: 0.9;
}
#supporters-modal main section {
margin-block: 2em;
margin-bottom: 3em;
display: flex;
flex-direction: column;
gap: 1em;
background-size: 4em;
background-repeat: no-repeat;
background-position: center;
background-image: url('data:image/svg+xml,');
}
#supporters-modal.loaded #supporters-monthly:has(ul:empty),
#supporters-modal.loaded #supporters-once:has(ul:empty) {
display: none;
}
#supporters-modal.loaded #supporters-monthly,
#supporters-modal.loaded #supporters-once {
opacity: 1;
}
#supporters-modal #supporters-monthly,
#supporters-modal #supporters-once {
opacity: 0;
}
#supporters-modal.loaded main section {
background-image: unset;
}
#supporters-modal main h3 {
margin-bottom: 0.5em;
}
#supporters-modal main h3:not(:first-child) {
margin-top: 0.75em;
}
#supporters-modal main ul {
display: inline-block;
max-width: 450px;
padding: 0;
margin: auto;
line-height: 1.3em;
}
#supporters-modal main ul li {
display: inline-block;
}
#supporters-modal main ul li:not(:last-child) {
margin-right: 5px;
}
#supporters-modal main ul li:not(:last-child):after {
content: "-";
margin-left: 5px;
}
#supporters-modal footer {
padding: 1em 3em;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1em;
text-align: left;
box-sizing: border-box;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
background-color: rgb(var(--color-param));
}
[data-theme=dark] #supporters-modal footer {
background-color: #111111;
box-shadow: rgba(20, 20, 20, 0.2) 0px 2px 8px 0px;
}
#supporters-modal footer a {
border-radius: 2em;
background-color: rgba(var(--orange));
border: 1px solid rgba(var(--orange));
color: white;
padding: 0.45em 0.75em;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: rgba(100, 100, 111, 0) 0px 0px 0px 0px;
transition: box-shadow cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s, border cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
}
#supporters-modal footer a:hover {
border: 1px solid #64b2ff;
box-shadow:
0 0 4px #50a8ff29,
0 0 5px #50a7ff29,
0 0 12px #50a7ff29,
0 0 19px #50a8ff29;
}
[data-theme=dark] #supporters-modal footer a:hover {
border: 1px solid #50a7ff;
box-shadow:
0 0 4px #50a8ff53,
0 0 5px #50a7ff53,
0 0 10px #50a7ff53,
0 0 15px #50a8ff53;
}
#supporters-modal footer a svg {
width: 20px;
margin-right: 10px;
}
@media screen and (max-width: 600px) {
#supporters-modal #supporters-modal-close {
top: 1em;
right: 1em;
}
#supporters-modal main,
#supporters-modal footer {
padding-inline: 1em;
}
#supporters-modal h2 {
font-size: 1.3em;
margin-top: 3em;
}
}
html[data-supporters-modal] body {
overflow-y: hidden;
}
html[data-supporters-modal] #supporters-modal-container {
opacity: 1;
pointer-events: all;
}
#supporters-modal-container #glitter {
pointer-events: none;
width: 100dvw;
height: 100dvh;
position: absolute;
top: 0;
left: 0;
transform: rotate(180deg);
color: #fbef68;
}
/* src/styles/_responsive.css */
@media (hover: none) and (pointer: coarse) {
.b_removethumb {
opacity: 1;
}
#show-settings {
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
#show-settings:active {
filter: brightness(0.5);
}
}
@media screen and (max-height: 900px) {
body {
font-size: 13px;
}
}
@media screen and (max-width: 600px) {
html,
body {
font-size: 12px;
overflow-y: auto;
}
.not-mobile {
display: none;
}
#editlink {
max-width: 80%;
}
#link-list {
padding: 2em;
}
#linkblocks.medium,
#linkblocks.large {
--folder-padding: 1.5em 1em;
}
#linkblocks.text,
#linkblocks.inline,
#linkblocks.small {
--folder-padding: 1.5em;
}
#element-mover {
font-size: 12px;
}
#interface {
padding-bottom: 77px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
body #interface.pushed {
transform: none;
}
#quotes_container {
width: 90vw;
}
#show-settings button {
height: 3.3em;
width: 3.3em;
border-radius: 10px;
}
#show-settings img {
width: 2em;
}
aside {
top: 100dvh;
right: auto;
left: 0%;
bottom: -100dvh;
height: 100dvh;
width: 100%;
padding: 0 12px;
font-size: 14px;
border-radius: 1em;
}
aside.shown {
transform: translateX(0) translateY(-75dvh);
}
#mobile-drag-zone {
display: block;
}
#mobile-drag-zone+.settings-title {
margin-top: 0;
}
.settings-title {
margin: 32px 16px 0px 16px;
}
@supports not (min-height: 100dvh) {
aside {
top: 100vh;
bottom: -100vh;
height: 100vh;
}
#mobile-drag-zone.shown {
transform: translateY(-75vh);
}
}
#f_addlink>div {
align-items: center;
}
#f_addlink>div>div {
width: 100%;
flex-direction: column;
}
aside::-webkit-scrollbar {
display: none;
}
#i_addlink-title,
#i_addlink-url,
#i_city {
width: 100%;
}
#f_location {
width: 155px;
}
#location_options.shown {
max-height: 100px;
}
#pagewidth,
#grid-layout-wrapper {
display: none;
}
#settings-footer {
width: 85%;
padding-bottom: 13vh;
}
#credit-container {
width: 100%;
padding-right: 7em;
padding-left: 1.5em;
}
#credit {
display: block;
line-height: 14px;
}
#credit a,
#credit p,
#credit span {
font-size: 11px;
}
}
@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
body {
padding: env(safe-area-inset);
overflow-y: scroll;
}
#main,
#time {
min-height: unset;
}
}
@media only screen and (hover: none) and (pointer: coarse) {
#image-background-overlay {
position: fixed;
}
#sb-suggestions,
#searchbar {
font-size: 1.7em;
box-sizing: border-box;
}
#sb-buttons {
font-size: 1.6em;
}
#sb-buttons button {
padding: 0 1em;
}
#notes_container #pocket-editor input[type=checkbox] {
width: calc(var(--font-size) * 1.5);
height: calc(var(--font-size) * 1.5);
}
#link-mini .link-title.add-group {
visibility: visible;
}
[data-pocket-editor] [data-todo] p {
display: flex;
align-items: center;
}
aside,
button,
select,
option,
input,
#settings-footer {
font-size: 15px;
}
aside input[type=range]::-webkit-slider-thumb {
height: 25px;
width: 25px;
border-radius: 50px;
}
aside .settings-title {
margin: 32px 16px 0px 16px;
}
aside .wrapper {
padding: unset;
min-height: 38px;
}
aside input:not(.range, .switch),
aside .input-btn,
aside form button,
aside select {
min-height: 36px;
border-radius: 13px;
}
aside .input-btn.icon-only:hover {
background-color: initial;
}
aside .switch:checked:hover {
background-color: var(--color-green);
}
#settings .tooltip {
width: 25px;
height: 25px;
min-width: 25px;
font-size: 15px;
}
}
::-webkit-scrollbar {
width: 3px;
height: 3px;
}
::-webkit-scrollbar-track {
background: transparent;
margin-block: 5px;
}
::-webkit-scrollbar-thumb {
background: var(--color-orange);
border-radius: 100px;
cursor: grab;
}
::-webkit-scrollbar-thumb:active {
background: var(--color-orange);
cursor: grabbing;
}
/* src/styles/style.css */