:root { --page-bg: oklch(0% 0 0); --note-bg: var(--page-bg); --clr-accent: #35bdb1; --clr-accent-desat: oklch(from var(--clr-accent) calc(l * 1.2) calc(c * 0.9) h / 0.3); --clr: #6183ed; --clr-desat: oklch(from var(--clr) calc(l * 1.2) calc(c * 0.9) h / 0.3); --clr-bg: oklch(from var(--clr) 0.25 0.02 h / 0.6); --clr-text: oklch(100% 0.00011 271.152); --clr-text-alt: oklch(0% 0 0); --overlay-bg: var(--clr-bg); --overlay-padding: 1rem; --overlay-padding-elements: 1rem; --overlay-title-bg: oklch(from var(--clr-accent) l c h / 0.51); --overlay-blur: 1rem; --ui-blur: .2rem; --ui-blur-hover: calc(var(--ui-blur) * 3); --ui-bg: oklch(from var(--clr) 53.824% min(c, 0.04) h / 0.228); --ui-bg-hover: oklch(from var(--clr) 32.109% min(c, 0.08) h / 0.211); --ui-shadow: 0 0 10px 0 oklch(0% 0 0 / 0.502), 0 0 5px 0 oklch(65.004% 0.00007 271.152 / 0.259) inset; --ui-shadow-hover: 0 0 15px 0 oklch(0% 0 0 / 0.631), 0 0 10px 0 oklch(83.591% 0.0001 271.152 / 0.502) inset; --ui-elements-roundness: .7rem; --ui-elements-border-width: .15rem; --ui-elements-padding: .5rem; --ui-elements-font-size: 1rem; --ui-padding: 1rem; --ui-icon-size: 1.5rem; --ui-icon-size-small: 1.2rem; --ui-icon-roundness: 1rem; --ui-icon-roundness-small: .3rem; --ui-icon-padding: .5rem; --ui-icon-hover-scale: 1.15; --ui-popup-hitbox-size: 1rem; /*::before pseudo-element padding for most popups*/ --selection-border-width: .2rem; --selection-border-offset: .4rem; --selection-border-roundness: .4rem; --selection-border-color1: oklch(from var(--clr) l c calc(h - 60)); --selection-border-color2: oklch(from var(--clr) l c calc(h + 60)); --settings-bg: var(--overlay-bg); --settings-padding: var(--overlay-padding); --settings-padding-elements: var(--overlay-padding-elements); --settings-blur: var(--overlay-blur); --ui-text-size: 1rem; --ui-text-size-bold: 1.3rem; --transition-duration: 0.3s; --transition-duration-fast: 0.2s; --transition-duration-button: 0.1s; --transition-edit-selection: 0.15s; --transition-curve-bounce: ease; } *{ margin: 0; padding: 0; box-sizing: border-box; outline: none; border: none; color: var(--clr-text); transition: all var(--transition-duration) ease; font-size: var(--ui-elements-font-size); user-select: none !important; -webkit-user-select: none !important; -ms-user-select: none !important; -webkit-touch-callout: none !important; interpolate-size: allow-keywords; } .opposite{ display: flex; justify-content: space-between; } .no-transition{ transition: 0s !important; } .no-scale{ scale: 1 !important; } .dragging{ transition: .1s linear !important; } .selectable{ user-select: text !important; -webkit-user-select: text !important; -ms-user-select: text !important; -moz-user-select: text !important; -webkit-touch-callout: text !important; } html{color-scheme: dark light;} body{ position: absolute; width: 100%; height: 100%; background-color: var(--page-bg); overflow: hidden; } body[in-overlay="true"] > *:not(#overlay){ opacity: 0; pointer-events: none; } body[in-overlay="true"] > #wallpaper{ opacity: 1; pointer-events: all; } body[in-overlay="false"]:has(#note-wrapper[balls="true"]) > #wallpaper{ filter: blur(5.5vh); } body[loading="true"]{ cursor: wait; filter: blur(3vw); & > *{ pointer-events: none; } } #wallpaper{ position: fixed; inset: 0; pointer-events: none; /* in case of no wallpaper use the old one */ background: radial-gradient(circle at 0% 0%, #023437, transparent), radial-gradient(circle at 50% 50%, #360751, transparent), radial-gradient(circle at 100% 100%, #262500, transparent), radial-gradient(circle at 0% 100%, #400, transparent), radial-gradient(circle at 100% 0%, #045301, transparent); } #wallpaper iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: none; pointer-events: none; } .icon{ cursor: pointer; width: var(--ui-icon-size); height: var(--ui-icon-size); display: block; padding: var(--ui-icon-padding); box-sizing: content-box; background-position: center; background-repeat: no-repeat; } .icon:hover{ scale: var(--ui-icon-hover-scale); } .hover-list{ anchor-name: --hovered-item; &::after{ content: ''; position: absolute; top: anchor(top); left: anchor(left); right: anchor(right); bottom: anchor(bottom); background: var(--clr-accent-desat); border-radius: var(--ui-icon-roundness-small); pointer-events: none; transition: var(--transition-duration-fast); position-anchor: --hovered-item; scale: 0; z-index: -1; } &:has(> *:hover)::after{ scale: 1; } & > *:hover { anchor-name: --hovered-item; } /* round corners dinamically depending on the hovered item position */ &.h:has(> *:first-child:hover)::after { border-radius: var(--ui-icon-roundness) var(--ui-icon-roundness-small) var(--ui-icon-roundness-small) var(--ui-icon-roundness); } &.h:has(> *:last-child:hover)::after { border-radius: var(--ui-icon-roundness-small) var(--ui-icon-roundness) var(--ui-icon-roundness) var(--ui-icon-roundness-small); } &.v:has(> *:first-child:hover)::after { border-radius: var(--ui-icon-roundness) var(--ui-icon-roundness) var(--ui-icon-roundness-small) var(--ui-icon-roundness-small); } &.v:has(> *:last-child:hover)::after { border-radius: var(--ui-icon-roundness-small) var(--ui-icon-roundness-small) var(--ui-icon-roundness) var(--ui-icon-roundness); } &.v:has(> *:first-child:last-child)::after, &.h:has(> *:first-child:last-child)::after { border-radius: var(--ui-icon-roundness); } } .select-list.h > * { border-left: 1px solid var(--clr-desat); &:first-child { border-left: none; border-radius: var(--ui-elements-roundness) 0 0 var(--ui-elements-roundness); } &:last-child { border-radius: 0 var(--ui-elements-roundness) var(--ui-elements-roundness) 0; } } .select-list.v > * { border-top: 1px solid var(--clr-desat); &:first-child { border-top: none; border-radius: var(--ui-elements-roundness) var(--ui-elements-roundness) 0 0; } &:last-child { border-radius: 0 0 var(--ui-elements-roundness) var(--ui-elements-roundness); } } .select-list > * { padding: var(--ui-elements-padding); display: block; white-space: nowrap; &:hover { border-color: var(--clr-accent); background-color: var(--clr-accent-desat); & + * { border-color: var(--clr-accent); } } } /* deleteNoteButton */ .noteActionButton{ background-color: var(--clr-desat); border-color: transparent; }