:root { --color-dark-100: #181c3e; --color-dark-200: #141733; --color-dark-300: #0E1026; --color-dark-500: #080A1C; --color-dark-700: #000212; --color-dark-700-85: #000212d9; --color-background-100: var(--color-dark-100); --color-background-200: var(--color-dark-200); --color-background-300: var(--color-dark-300); --color-background-500: var(--color-dark-500); --color-background-700: var(--color-dark-700); --color-background-700-85: var(--color-dark-700-85); --text-weight: 500; --text-weight-strong: 600; --color-white: #FFFFFF; --color-gray-blueish-400: #D2D6E7; --color-gray-blueish: #8F98C1; --color-gray-blueish-15: #8F98C126; --color-gray-blueish-40: #8F99C266; --color-gray-blueish-70: #8F99C2B3; --color-gray-blueish-600: #687093; --color-gray-blueish-700: #535D97; --color-gray-blueish-bright: #9ea8d9; --color-blue-500: #451FDC; --color-blue-500-34: #451FDC57; --color-skyblue-500: #6187FA; --color-skyblue-500-50: #6187FA7F; --color-purple-500: #6F50F2; --color-magenta-500: #AA3DEB; --color-magenta-500-34: #AA3DEB57; --color-green-500-15: #19C75926; --color-green-500: #19C759; --color-green-700: #0D682F; --color-red-500-15: #EB385026; --color-red-500: #EB3850; --color-red-700: #B51228; --color-orange-500: #FF7752; --color-orange-500-15: #FF775226; --color-orange-700: #BD2900; --color-yellow-500: #FFCB3B; --gradient-slight-purple: linear-gradient(to bottom right, #FFFFFF, #E8C0FF); --color-white-medium: #F6F6F9; --color-gray-300: #ECEBEF; --color-gray-300-85: #ECEBEFd9; --color-gray-500: #DDDCE4; --color-taupe-purple-100: #e3dafd; --color-taupe-purple-200: #d4cdea; --color-taupe-purple-300: #716B8E; --color-taupe-purple-300-40: #716B8E66; --color-taupe-purple-400: #473b67; --color-taupe-purple-500: #40335C; --color-taupe-purple-600: #32284D; --zorro-gradient: linear-gradient(85deg, var(--color-blue-500), var(--color-magenta-500)); --zorro-gradient-34: linear-gradient(85deg, var(--color-blue-500-34), var(--color-magenta-500-34)); --gradient-gold: linear-gradient(90deg, #A8551A, var(--color-yellow-500), #A8551A); --navbar-color: #5155753D; --color-enhanced-white: #EBEEEF; --gradient-blue-to-transparent: linear-gradient(to bottom, #451FDC00 0%, #451FDC38 50%, #451FDCC4 100%); --color-text: var(--color-gray-blueish); --color-text-40: var(--color-gray-blueish-40); --color-text-bright: var(--color-white); --shadow-color-light: var(--color-background-300); --shadow-color-dark: var(--color-background-700); --shadow-button-dark: 2px 2px 14px 0 var(--shadow-color-dark); --body-background: var(--color-background-700); --landing-body-background: var(--color-background-700); --selection-background: var(--color-magenta-500); --scrollbar-background: var(--color-background-700); --scrollbar-track-shadow: inset 0 0 10px var(--shadow-color-light); --scrollbar-thumb-color: #141733; --scrollbar-thumb-outline: 1px solid var(--shadow-color-light); --scrollbar-thumb-shadow: none; --button-background: var(--color-dark-100); --color-button-background-hover: var(--color-background-300); --button-background-hover: var(--color-button-background-hover); --button-color: var(--color-gray-blueish); --button-color-hover: var(--color-magenta-500); --button-border-content: ""; --button-stroke: radial-gradient(#AA3DEB, #AA3DEB00); --button-transition: background .2s ease-out, color .2s ease-out, gap .2s ease-out; --button-shadow: none; --button-shadow-hover: none; --button-active-transform: scale(.9); --button-active-hitbox-scale: 1.13; --link-color: var(--color-skyblue-500); --link-color-hover: var(--color-purple-500); --left-menu-shadow: none; --left-menu-item-background: var(--color-background-700); --left-menu-item-shadow: none; --task-shadow: 5px 5px 10px 0 var(--color-background-700); --task-font-weight: 500; --task-color: var(--color-text-bright); --task-icon-color: var(--color-text); --task-color-tracked-hover: var(--color-white); --task-icon-color-tracked-hover: var(--color-white); --task-background: var(--color-background-300); --task-background-selected: var(--color-taupe-purple-600); --task-background-locked: var(--color-background-500); --task-background-hover: var(--color-taupe-purple-400); --task-attachment-background: var(--color-background-700); --modal-shadow: 5px 5px 10px 0 var(--color-background-700); --modal-header-color: var(--color-text); --popup-stroke: linear-gradient(-90deg, #AA3DEB, #AA3DEB00); --popup-background: linear-gradient(to top left, var(--color-background-700), var(--color-background-300)); --popup-shadow: 0 0 3px 0 var(--color-gray-blueish-40); --popup-button-background-hover: var(--button-background-hover); --popup-create-button-color: var(--color-gray-blueish); --popup-create-button-background: var(--color-dark-100); --popup-create-button-background-hover: var(--color-background-300); --time-tracker-background: linear-gradient(110deg, var(--color-background-700) 0%, #000212D4 35%, #AA3DEB00 100%); --time-tracker-border-background: var(--popup-stroke); --placeholder-color: var(--color-taupe-purple-600); --placeholder-inverted-color: var(--color-gray-blueish-70); --input-inner-shadow: none; --editable-shadow-hover: none; --editable-background-hover: var(--color-background-700); --toggle-group-background: var(--color-background-700); --text-editor-tip-shadow: none; --text-link-background: var(--color-gray-blueish-600); --details-card-shadow: 0px 0px 14px 0 var(--shadow-color-dark); --details-card-background: var(--color-background-300); --details-card-placeholder-color: var(--color-taupe-purple-400); --details-action-background: var(--button-background); --details-action-shadow: none; --details-border-top: 2px solid var(--color-background-300); --actionbar-background: var(--color-background-300); --active-board-link-color: var(--color-text-bright); --active-board-link-weight: inherit; --tip-color: var(--color-gray-blueish); --success-color: var(--color-green-500); --error-color: var(--color-red-500); --warning-color: var(--color-orange-500); --profile-menu-buttons-color: var(--color-text); --profile-menu-section-background: var(--color-background-500); --profile-menu-section-shadow: none; --profile-menu-subsection-shadow: none; --mood-board-border-color: var(--color-background-500); --mood-board-zoom-background: var(--color-background-300); --mood-board-zoom-handle-background: var(--color-background-700); --mood-board-zoom-handle-shadow: none; --mood-board-compass-background: var(--color-background-500); --mood-board-compass-shadow: none; --mood-board-compass-color: var(--color-background-100); --mood-board-text-editor-shadow: none; --tutorial-shadow: 0 0 3px 0 var(--color-gray-blueish-40); --admin-permission-background: var(--color-background-300); --admin-permission-color: var(--color-white); --admin-repository-background: var(--color-background-500); --github-icon-color: white; --planning-purple-background: var(--body-background); --planning-week-month-color: var(--color-gray-blueish-70); --planning-active-event-brightness: .8; --table-row-even-background: var(--color-background-700); --table-row-odd-background: var(--color-background-300); --table-color: var(--color-text); } @media (prefers-color-scheme: dark) { body:not(.--light-theme) { --color-highlight-dark: var(--color-white); --color-highlight-dark-simple: var(--color-white); --color-highlight-light: unset; --color-highlight-light-simple: unset; } body:not(.--light-theme) .--logo-light { display: none; } body.--light-theme .--logo-light { display: block; } body.--light-theme .--logo-dark { display: none; } } body.--light-theme { --color-background-100: var(--color-white); --color-background-200: var(--color-white); --color-background-300: var(--color-gray-300); --color-background-500: var(--color-white-medium); --color-background-700: var(--color-white-medium); --color-background-700-85: var(--color-gray-300-85); --text-weight: 600; --text-weight-strong: 700; --color-text: var(--color-taupe-purple-300); --color-text-40: var(--color-taupe-purple-300-40); --color-text-bright: var(--color-taupe-purple-500); --shadow-color-light: rgba(0, 0, 0, 0.14); --shadow-color-dark: #0000004D; --shadow-button-dark: 1px 1px 6px 0 var(--shadow-color-dark); --shadow-button-light: 2px 2px 8px 0 var(--shadow-color-light); --body-background: var(--color-white); --landing-body-background: var(--color-white-medium); --selection-background: #E2BDF8; --scrollbar-background: var(--color-white-medium); --scrollbar-track-shadow: inset 0 0 4px var(--shadow-color-light); --scrollbar-thumb-color: var(--color-white); --scrollbar-thumb-outline: 1px solid var(--shadow-color-light); --scrollbar-thumb-shadow: none; --button-background: var(--color-gray-500); --color-button-background-hover: var(--color-white); --button-background-hover: var(--color-button-background-hover); --button-color: var(--color-text-bright); --left-menu-shadow: 0 0 40px #D4D3E2; --left-menu-item-background: var(--color-white); --left-menu-item-shadow: 0px 0px 4px 0 var(--shadow-color-light); --task-shadow: 5px 5px 10px 0 #DADADA; --task-font-weight: 600; --task-color: var(--color-text-bright); --task-icon-color: var(--color-text); --task-color-tracked-hover: var(--task-color); --task-icon-color-tracked-hover: var(--task-icon-color); --task-background: var(--color-white-medium); --task-background-locked: var(--color-gray-300); --task-background-hover: var(--color-taupe-purple-200); --task-background-selected: var(--color-taupe-purple-100); --task-attachment-background: var(--color-background-300); --time-tracker-background: var(--gradient-slight-purple); --time-tracker-border-background: linear-gradient(0deg, #AA3DEB, #AA3DEB); --popup-background: linear-gradient(to top left, var(--color-white-medium), var(--color-white)); --popup-shadow: 0 0 10px var(--shadow-color-dark); --popup-button-background-hover: var(--color-taupe-purple-100); --popup-create-button-color: var(--color-white); --popup-create-button-background: var(--color-taupe-purple-500); --popup-create-button-background-hover: var(--color-white); --placeholder-color: var(--color-gray-blueish-70); --placeholder-inverted-color: var(--color-taupe-purple-600); --input-inner-shadow: inset 0 5px 15px 0 #00000026; --editable-shadow-hover: 3px 3px 8px var(--shadow-color-light); --editable-background-hover: var(--color-white); --toggle-group-background: var(--color-white); --modal-shadow: none; --modal-header-color: var(--color-text-bright); --text-editor-tip-shadow: 0 0 10px 0px var(--shadow-color-light); --text-link-background: var(--color-gray-blueish-400); --color-highlight-dark: unset; --color-highlight-dark-simple: unset; --color-highlight-light: var(--color-dark-700); --color-highlight-light-simple: var(--color-dark-700); --details-card-shadow: 0px 0px 10px 0 var(--shadow-color-light); --details-card-background: var(--color-white); --details-card-placeholder-color: var(--placeholder-color); --details-action-background: var(--color-white); --details-action-shadow: var(--shadow-button-light); --details-border-top: none; --actionbar-background: var(--color-white); --active-board-link-color: var(--color-magenta-500); --active-board-link-weight: 600; --tip-color: var(--color-gray-blueish-700); --success-color: var(--color-green-700); --error-color: var(--color-red-700); --warning-color: var(--color-orange-700); --profile-menu-buttons-color: var(--color-text-bright); --profile-menu-section-background: var(--details-card-background); --profile-menu-section-shadow: var(--shadow-button-light); --profile-menu-subsection-shadow: var(--details-card-shadow); --mood-board-border-color: var(--color-white-medium); --mood-board-zoom-background: var(--color-white); --mood-board-zoom-handle-shadow: 0px 0px 6px 0 var(--shadow-color-light); --mood-board-zoom-handle-background: var(--color-white); --mood-board-compass-background: var(--color-background-300); --mood-board-compass-shadow: inset 0 0 6px var(--shadow-color-light); --mood-board-compass-color: var(--color-white); --mood-board-text-editor-shadow: 0px 0px 6px var(--shadow-color-light); --tutorial-shadow: 0px 0px 10px 0 var(--shadow-color-light); --admin-permission-background: var(--color-white); --admin-permission-color: var(--color-text-bright); --admin-repository-background: var(--color-white); --github-icon-color: black; --planning-purple-background: var(--color-taupe-purple-100); --planning-week-month-color: var(--color-text); --planning-active-event-brightness: .9; --table-row-even-background: var(--color-gray-300); --table-row-odd-background: var(--color-white); --table-color: var(--color-text-bright); } @media (prefers-color-scheme: light) { body:not(.--dark-theme) { --color-background-100: var(--color-white); --color-background-200: var(--color-white); --color-background-300: var(--color-gray-300); --color-background-500: var(--color-white-medium); --color-background-700: var(--color-white-medium); --color-background-700-85: var(--color-gray-300-85); --text-weight: 600; --text-weight-strong: 700; --color-text: var(--color-taupe-purple-300); --color-text-40: var(--color-taupe-purple-300-40); --color-text-bright: var(--color-taupe-purple-500); --shadow-color-light: rgba(0, 0, 0, 0.14); --shadow-color-dark: #0000004D; --shadow-button-dark: 1px 1px 6px 0 var(--shadow-color-dark); --shadow-button-light: 2px 2px 8px 0 var(--shadow-color-light); --body-background: var(--color-white); --landing-body-background: var(--color-white-medium); --selection-background: #E2BDF8; --scrollbar-background: var(--color-white-medium); --scrollbar-track-shadow: inset 0 0 4px var(--shadow-color-light); --scrollbar-thumb-color: var(--color-white); --scrollbar-thumb-outline: 1px solid var(--shadow-color-light); --scrollbar-thumb-shadow: none; --button-background: var(--color-gray-500); --color-button-background-hover: var(--color-white); --button-background-hover: var(--color-button-background-hover); --button-color: var(--color-text-bright); --left-menu-shadow: 0 0 40px #D4D3E2; --left-menu-item-background: var(--color-white); --left-menu-item-shadow: 0px 0px 4px 0 var(--shadow-color-light); --task-shadow: 5px 5px 10px 0 #DADADA; --task-font-weight: 600; --task-color: var(--color-text-bright); --task-icon-color: var(--color-text); --task-color-tracked-hover: var(--task-color); --task-icon-color-tracked-hover: var(--task-icon-color); --task-background: var(--color-white-medium); --task-background-locked: var(--color-gray-300); --task-background-hover: var(--color-taupe-purple-200); --task-background-selected: var(--color-taupe-purple-100); --task-attachment-background: var(--color-background-300); --time-tracker-background: var(--gradient-slight-purple); --time-tracker-border-background: linear-gradient(0deg, #AA3DEB, #AA3DEB); --popup-background: linear-gradient(to top left, var(--color-white-medium), var(--color-white)); --popup-shadow: 0 0 10px var(--shadow-color-dark); --popup-button-background-hover: var(--color-taupe-purple-100); --popup-create-button-color: var(--color-white); --popup-create-button-background: var(--color-taupe-purple-500); --popup-create-button-background-hover: var(--color-white); --placeholder-color: var(--color-gray-blueish-70); --placeholder-inverted-color: var(--color-taupe-purple-600); --input-inner-shadow: inset 0 5px 15px 0 #00000026; --editable-shadow-hover: 3px 3px 8px var(--shadow-color-light); --editable-background-hover: var(--color-white); --toggle-group-background: var(--color-white); --modal-shadow: none; --modal-header-color: var(--color-text-bright); --text-editor-tip-shadow: 0 0 10px 0px var(--shadow-color-light); --text-link-background: var(--color-gray-blueish-400); --details-card-shadow: 0px 0px 10px 0 var(--shadow-color-light); --details-card-background: var(--color-white); --details-card-placeholder-color: var(--placeholder-color); --details-action-background: var(--color-white); --details-action-shadow: var(--shadow-button-light); --details-border-top: none; --actionbar-background: var(--color-white); --active-board-link-color: var(--color-magenta-500); --active-board-link-weight: 600; --tip-color: var(--color-gray-blueish-700); --success-color: var(--color-green-700); --error-color: var(--color-red-700); --warning-color: var(--color-orange-700); --profile-menu-buttons-color: var(--color-text-bright); --profile-menu-section-background: var(--details-card-background); --profile-menu-section-shadow: var(--shadow-button-light); --profile-menu-subsection-shadow: var(--details-card-shadow); --mood-board-border-color: var(--color-white-medium); --mood-board-zoom-background: var(--color-white); --mood-board-zoom-handle-shadow: 0px 0px 6px 0 var(--shadow-color-light); --mood-board-zoom-handle-background: var(--color-white); --mood-board-compass-background: var(--color-background-300); --mood-board-compass-shadow: inset 0 0 6px var(--shadow-color-light); --mood-board-compass-color: var(--color-white); --mood-board-text-editor-shadow: 0px 0px 6px var(--shadow-color-light); --tutorial-shadow: 0px 0px 10px 0 var(--shadow-color-light); --admin-permission-background: var(--color-white); --admin-permission-color: var(--color-text-bright); --admin-repository-background: var(--color-white); --github-icon-color: black; --planning-purple-background: var(--color-taupe-purple-100); --planning-week-month-color: var(--color-text); --table-row-even-background: var(--color-gray-300); --table-row-odd-background: var(--color-white); --table-color: var(--color-text-bright); } body:not(.--dark-theme) .--logo-light { display: block; } body:not(.--dark-theme) .--logo-dark { display: none; } }