@font-face { font-family: 'Segoe adjusted'; src: local("Segoe UI"); size-adjust: 94.5%; ascent-override: 98%; descent-override: 35%; font-weight: 400; } @font-face { font-family: 'Segoe adjusted'; src: local("Segoe UI SemiBold"); size-adjust: 92.5%; ascent-override: 98%; descent-override: 35%; font-weight: 500; } @font-face { font-family: 'Segoe adjusted'; src: local("Segoe UI Bold"); size-adjust: 92.5%; ascent-override: 98%; descent-override: 35%; font-weight: 700; } @font-face { font-family: 'Tahoma adjusted'; src: local("Tahoma Bold"); size-adjust: 96%; ascent-override: 90%; descent-override: 20%; font-weight: 800; font-style: normal; } html { height: 100%; width: 100%; margin: 0; font-size: 17px; } body { margin: 0; width: 100%; --font-body: 'Mada', 'Segoe adjusted', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; --font-titles: 'Nunito', 'Tahoma adjusted', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; font-family: var(--font-body); font-weight: var(--text-weight); color: var(--color-text); background-color: var(--body-background); } body * { box-sizing: border-box; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-titles); font-weight: 800; color: var(--color-text-bright); } h2, .h2 { font-size: 1.3rem; margin: 20px 0; } button.h2 { padding: 0; justify-content: flex-start; } ::-webkit-scrollbar { width: 15px; margin-left: 5px; padding-left: 5px; } ::-webkit-scrollbar-track { background: var(--scrollbar-background); box-shadow: var(--scrollbar-track-shadow); border-radius: 10px; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb-color); outline: var(--scrollbar-thumb-outline); box-shadow: var(--scrollbar-thumb-shadow); border-radius: 10px; } ::selection { background-color: var(--selection-background); color: var(--color-text-bright); } hr { border: none; border-bottom: 2px solid var(--color-text); } .mobile-text { display: none; } img { max-width: 100%; max-height: 100%; width: auto; } .document-page { max-width: 1000px; margin: 20px auto; padding: 0 30px; } mark { background-color: transparent; color: var(--color-text); } mark.--highlight { padding: 0 2px; margin: 0 -2px; } mark.--highlight-dark { background: var(--color-highlight-dark); } mark.--highlight-light { background: var(--color-highlight-light); } mark.--highlight-dark-simple { background: none; color: var(--color-highlight-dark-simple, var(--color-text)); } mark.--highlight-light-simple { background: none; color: var(--color-highlight-light-simple, var(--color-text)); } button, .button { border: none; background: var(--button-background); border-radius: 8px; padding: 8px; color: var(--button-color); --icon-color: var(--button-color); font-weight: 600; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 5px; position: relative; z-index: 0; font-size: .9rem; text-decoration: none; white-space: nowrap; transition: var(--button-transition); box-shadow: var(--button-shadow); } :is(button, .button)[data-copy-clipboard] { contain: none; } :is(button, .button) > .icon { transition: var(--button-transition); } .icon-button { padding: 0; background-color: transparent; } :is(button, .button):before { content: var(--button-border-content); pointer-events: none; position: absolute; z-index: -1; left: 0; top: 0; right: 0; bottom: 0; border: 2px solid transparent; transition: inherit; border-radius: inherit; background-image: linear-gradient(var(--button-background-hover), var(--button-background-hover)), var(--button-stroke); background-clip: padding-box, border-box; background-size: 100% 100%, 200% 200%; background-position: 0 0; opacity: 0; } :is(button, .button):is(:hover, :focus-visible) { cursor: pointer; background: var(--button-background-hover); color: var(--button-color-hover); --icon-color: var(--button-color-hover); box-shadow: var(--button-shadow-hover); } :is(button, .button):active { transform: var(--button-active-transform); } :is(button, .button):after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(1); width: 100%; height: 100%; opacity: 0; pointer-events: none; } :is(button, .button):active:not(:has(:is(button, a):active)):after { transform: translate(-50%, -50%) scale(var(--button-active-hitbox-scale)); pointer-events: all; } :is(button, .button):hover:before { opacity: 1; animation: button-stroke-animation 4s linear infinite; } @keyframes button-stroke-animation { 0% { background-position: 0 0; } 100% { background-position: 200% 200%; } } .clickable:hover { cursor: pointer; color: var(--color-text-bright); --icon-color: var(--color-text-bright); } button[disabled]:hover, .clickable[disabled]:hover, .button[disabled]:hover { cursor: not-allowed; } :is(button,.button):focus-visible { outline: 2px solid var(--button-color-hover); outline-offset: -2px; } :is(button, .button).--confirm { --button-background: var(--color-green-500); --button-color: var(--color-white); } :is(button, .button).--danger { --button-background: var(--color-red-500); --button-color: var(--color-white); } :is(button, .button).--gradient { --button-background: var(--zorro-gradient); --button-color: var(--color-white); } :is(button, .button).--gold { --button-background: var(--gradient-gold); --button-color: var(--color-white); } :is(button, .button).--warning { --button-background: var(--color-orange-500); --button-color: var(--color-white); } form:focus { outline: none; } button[disabled] { opacity: 0.5; } .alert-danger { color: var(--color-red-500); word-break: break-word; } .alert-success { color: var(--color-green-500); word-break: break-word; } .alert-warning { color: var(--color-orange-500); word-break: break-word; } .link-button { display: inline-block; border: none; background: none; color: inherit; font-size: inherit; font-family: inherit; font-style: inherit; font-weight: inherit; padding: 0; text-decoration: underline; --button-border-content: none; --button-active-transform: none; --button-active-hitbox-scale: 1; } .google-login { --button-color: var(--color-text-bright); } .github-login { --icon-color: var(--github-icon-color); --button-color: var(--color-text-bright); } .github-login:is(:hover, :focus-visible) { --icon-color: var(--github-icon-color); } .gitlab-login { --button-color: var(--color-text-bright); } .reveal-password { padding: 5px; --button-background: transparent; } .popup { display: none; position: absolute; left: 0; top: 100%; margin-top: 2px; background: var(--popup-background); box-shadow: var(--popup-shadow); text-align: left; font-weight: 700; z-index: 100; overflow-y: auto; overflow-x: hidden; max-width: 500px; padding: 15px 20px; border-radius: 30px; --button-background: transparent; --button-border-content: none; --button-color: var(--color-text); --button-color-hover: var(--color-text-bright); --button-background-hover: var(--popup-button-background-hover); } :is(.popup, .modal) :where(input, textarea) { background-color: var(--color-background-700); max-width: 100%; border-radius: 8px; } .popup.overflow { overflow: visible; } .popup.visible { display: block; } .popup::-webkit-scrollbar { width: 5px; } .popup hr { margin: 3px; } .popup > hr + input { margin-top: 10px; } .replaceable-content { max-height: 200px; overflow: hidden auto; position: relative; margin: 8px 0; } .replaceable-content-600 { max-height: 600px; overflow: hidden auto; position: relative; } .replaceable-content.reordering, .replaceable-content-600.reordering { padding: 8px 0; } .replaceable-content::-webkit-scrollbar, .replaceable-content-600::-webkit-scrollbar { width: 5px; height: 5px; } .popup-search-input { min-width: 100%; } .popup-search-input:focus { outline: none; } .popup-close-button { position: absolute; right: -26px; transform: translateX(-50%); --button-active-transform: translateX(-50%); --button-active-hitbox-scale: 1; padding: 4px; top: -13px; border-radius: 50%; border: 1px solid var(--color-gray-blueish); z-index: 1; --button-background: var(--color-background-500); } .popup-btn { width: 100%; white-space: normal; outline-offset: -1px; border-radius: 0; } .popup-btn > .icon { flex-shrink: 0; } .popup-placeholder { width: 100%; padding: 8px; text-align: center; color: var(--placeholder-color); font-size: .9rem; font-style: italic; } .search-filter { display: flex; flex-direction: row; max-height: 100%; align-items: center; font-size: .9rem; margin: 5px 0; } .search-filter > label { padding: 0 0 0 5px; margin: 0; } .search-filter > label:hover { cursor: pointer; } .search-filter > input:checked + label { color: var(--color-text-bright); } .popup > h2 { margin-left: 4px; font-size: 1.2rem; color: var(--color-text-bright); } .popup-bottom-link { color: var(--color-text); --icon-color: var(--color-text); text-decoration: none; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 5px; padding: 5px; font-size: 1rem; outline-offset: -2px; } .popup-bottom-link:hover { color: var(--color-text-bright); --icon-color: var(--color-text-bright); } input { background-color: var(--color-background-700); color: var(--color-text-bright); border-radius: 3px; font-weight: 500; padding: 5px; font-size: 1rem; } input:where(:not(.checkbox):not([type="range"])) { min-height: 35px; } input:is(:user-invalid, .invalid-input) { border-left: 5px solid var(--color-red-500) !important; } ::placeholder, .placeholder { color: var(--placeholder-color); } label > .placeholder { font-weight: normal; } input, select, textarea { border: 1px solid transparent; transition: border-color 0.3s ease-out; box-shadow: var(--input-inner-shadow); } :is(input, select, textarea):hover, label:hover :where(input, select, textarea), :is(input, select, textarea):focus { border-color: var(--placeholder-color); } :is(:user-invalid, .invalid-input)::placeholder { color: var(--color-red-500); } input[type="checkbox"]:hover, input[type="radio"]:hover { cursor: pointer; } :is(:user-invalid, .invalid-input) { background-color: var(--color-red-500-15) !important; } .invalid-label { padding: 4px; background: var(--color-red-500-15); border-left: 5px solid var(--color-red-500); color: var(--color-text-bright); } .input-search-popup { color: var(--color-text-bright); padding: 5px; font-weight: inherit; margin-bottom: 0; background: none; font-size: inherit; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; } .input-search-popup.empty:not(:is(:user-invalid, .invalid-input)) { color: var(--placeholder-color); } .input-search-popup:is(:user-invalid, .invalid-input) { border-left: 5px solid var(--color-red-500); } .feedback { display: none; } .feedback.error, .feedback.success, .feedback.warning, .feedback.tip { display: block; } @media (pointer: coarse) { .feedback.keyboard-tip { display: none; } } .feedback.error, .bug-report_unreproducible-tip, .copy-clipboard-tip.error { background-color: var(--color-red-500-15); border-left: 5px solid var(--color-red-500); color: var(--error-color); --icon-color: var(--error-color); font-weight: 500; padding: 5px; } .feedback.error { margin-top: 10px; } .feedback.success { background-color: var(--color-green-500-15); border-left: 5px solid var(--color-green-500); color: var(--success-color); --icon-color: var(--success-color); font-weight: 500; margin-top: 10px; padding: 5px; } .feedback.tip, .copy-clipboard-tip { background-color: var(--color-gray-blueish-15); border-left: 5px solid var(--color-gray-blueish); color: var(--tip-color); --icon-color: var(--tip-color); font-weight: 500; margin-top: 10px; padding: 5px; } .feedback.tip > svg { margin-right: 2px; transform: translateY(1px); } .feedback.warning, .bug-report_in-progress-tip { background-color: var(--color-orange-500-15); border-left: 5px solid var(--color-orange-500); color: var(--warning-color); --icon-color: var(--warning-color); font-weight: 500; padding: 5px; } .feedback.warning { margin-top: 10px; } .feedback.warning a { color: inherit; } .feedback > .icon { transform: translateY(3px); } select { background-color: var(--color-background-300); color: var(--color-text-bright); font-weight: 500; font-size: .9rem; } select:hover { color: var(--color-text-bright); cursor: pointer; } textarea { background-color: var(--color-background-700); font-weight: 500; padding: 5px; min-height: 40px; width: 100%; resize: vertical; color: var(--color-text-bright); font-size: 1rem; } input::-webkit-calendar-picker-indicator { filter: invert(100%); } input[type="checkbox"] { margin: 3px 3px 3px 4px; box-shadow: var(--input-inner-shadow); } .checkbox { appearance: none; padding: 0; width: 24px; min-width: 24px; height: 24px; cursor: pointer; } .checkbox:checked:after { content: ""; width: 18px; height: 18px; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: var(--color-green-500); --icon-src: url('data:image/svg+xml,%3Csvg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%20512%20512"%3E%3Cpath%20d="M173.898%20439.404l-166.4-166.4c-9.997-9.997-9.997-26.206%200-36.204l36.203-36.204c9.997-9.998%2026.207-9.998%2036.204%200L192%20312.69%20432.095%2072.596c9.997-9.997%2026.207-9.997%2036.204%200l36.203%2036.204c9.997%209.997%209.997%2026.206%200%2036.204l-294.4%20294.401c-9.998%209.997-26.207%209.997-36.204-.001z"/%3E%3C/svg%3E'); mask: var(--icon-src) no-repeat center; -webkit-mask: var(--icon-src) no-repeat center; display: block; } .checkbox:checked.impossible:after { background-color: var(--color-red-500); --icon-src: url('data:image/svg+xml,%3Csvg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%20352%20512"%3E%3Cpath%20d="M242.72%20256l100.07-100.07c12.28-12.28%2012.28-32.19%200-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48%200L176%20189.28%2075.93%2089.21c-12.28-12.28-32.19-12.28-44.48%200L9.21%20111.45c-12.28%2012.28-12.28%2032.19%200%2044.48L109.28%20256%209.21%20356.07c-12.28%2012.28-12.28%2032.19%200%2044.48l22.24%2022.24c12.28%2012.28%2032.2%2012.28%2044.48%200L176%20322.72l100.07%20100.07c12.28%2012.28%2032.2%2012.28%2044.48%200l22.24-22.24c12.28-12.28%2012.28-32.19%200-44.48L242.72%20256z"/%3E%3C/svg%3E'); } .checkbox:checked.semi-ok:after { background-color: var(--color-orange-500); --icon-src: url('data:image/svg+xml,%3Csvg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%20512%20512"%3E%3Cpath%20d="M339.54%20381.51c-35.52-6.48-66.75-27.68-89.31-55.87l-66.52-83.15C174.33%20230.73%20160.3%20224%20145.25%20224%20118.09%20224%2096%20246.09%2096%20273.25V321c0%2017.67-14.33%2032-32%2032H32c-17.67%200-32-14.33-32-32v-40.92c0-78.1%2058.67-147.33%20136.64-151.83%2047.6-2.75%2092.54%2017.39%20122.05%2054.27l69.59%2087c9.39%2011.75%2023.42%2018.48%2038.47%2018.48%2027.16%200%2049.25-22.09%2049.25-49.25V192c0-17.67%2014.33-32%2032-32h32c17.67%200%2032%2014.33%2032%2032v46.75c0%2089-80.45%20159.56-172.46%20142.76z"/%3E%3C/svg%3E'); } .checkbox.half-checked:checked:after { opacity: .25; } .checkbox:disabled:checked:not(.impossible):after { opacity: 0.5; } .checkbox:disabled:not([readonly]) + label { color: rgb(128, 128, 128); font-weight: normal; } .checkbox:disabled.semi-ok + label { color: var(--color-orange-500); } .toggle-group { text-align: center; display: flex; flex-direction: row; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--color-background-300); padding-left: 6px; } .toggle-group > .toggle-group_input { opacity: 0; position: absolute; pointer-events: none; } .toggle-group > label, .toggle-group_popup-container > label { padding: 8px 16px; background-color: var(--toggle-group-background); border-radius: 8px; margin-bottom: 0; white-space: nowrap; } .toggle-group > * ~ * { margin-left: -6px; } .toggle-group_popup-container { padding: 0; } .toggle-group label:hover, .toggle-group_popup-container:hover { cursor: pointer; color: var(--color-text-bright); } .toggle-group_popup-container_text { display: block; width: 100%; height: 100%; padding: 8px 16px; } .toggle-group_input:checked + label { position: relative; z-index: 1; } .toggle-group_input:focus-visible + label, .toggle-group_input:focus-visible + .toggle-group_popup-container > label { outline: 1px solid white; } .toggle-group_input:checked + label, .toggle-group_input:checked + .toggle-group_popup-container > label { background: var(--zorro-gradient); color: var(--color-white); transform: scale(1.05); } input:disabled, .checkbox:disabled + .checkbox-label { cursor: not-allowed; } input:focus-visible, textarea:focus-visible { outline: 1px solid white; } .highlight-unsaved { animation: highlight-unsaved 0.3s linear; } @keyframes highlight-unsaved { 0% { box-shadow: 0 0 0 0 var(--color-orange-500); border-color: var(--color-orange-500); outline-color: var(--color-orange-500); } 50% { box-shadow: 0 0 11px 5px var(--color-orange-500); } 100% { box-shadow: 0 0 0 0 var(--color-orange-500); border-color: var(--color-orange-500); outline-color: var(--color-orange-500); } } .caps-lock-tip { display: none; position: absolute; right: 0; bottom: 100%; background-color: var(--color-background-700); padding: 5px 8px; border-radius: 8px 8px 0 0; font-size: .9em; --icon-color: var(--color-orange-500); flex-direction: row; align-items: center; gap: 5px; width: auto; } input[type="password"]:has(+ .caps-lock-tip.visible) { border-top-right-radius: 0; position: relative; z-index: 1; } input[type="password"]:is(:focus, :focus-visible) + .caps-lock-tip.visible { display: flex; } #modalContainer { position: fixed; top: 0; left: 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: flex-start; overflow: hidden; z-index: 501; --modal-container-padding-v: 70px; } #modalContainer:has(.modal.--scroll-container) { overflow-y: auto; } .modal.--scroll-container .modal-content { max-height: unset; } #modalContainer::-webkit-scrollbar { width: 10px; } #modalContainer:has(.modal) { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #000000e8; padding: var(--modal-container-padding-v) 10px; } .modal { min-width: min(calc(100dvw - 20px), 500px); max-width: min(calc(100dvw - 20px), 800px); border-radius: 15px; background: var(--popup-background); --modal-padding: 20px; padding: var(--modal-padding); width: auto; align-items: center; display: flex; flex-direction: column; box-shadow: var(--modal-shadow); position: relative; --modal-extra-margin-bottom: 0px; --modal-illustration-height: 0px; --modal-content-max-height: calc(100dvh - var(--modal-container-padding-v) - max(20px, var(--modal-container-padding-v)) - 2 * var(--modal-padding) - 50px - 30px - var(--modal-extra-margin-bottom) - var(--modal-illustration-height)); } .modal > .modal { position: absolute; top: calc(100% + 10px); } :is(.left-menu, .page-content):has(~ #modalContainer .modal) { filter: blur(4px); } .modal_title-row { display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; } .modal-close { background-color: transparent; padding: 0; } .modal-header { text-align: center; font-family: var(--font-titles); font-weight: 800; font-size: 1.5rem; color: var(--modal-header-color); margin: 0 39px 0 15px; } .modal-top-right-button { position: absolute; right: 20px; top: 20px; height: 34px; display: flex; align-items: center; } .modal-buttons { justify-content: flex-end; display: flex; margin-top: var(--modal-buttons-margin-top, 20px); width: 100%; gap: 10px; flex-wrap: wrap; } .modal-buttons button { padding: 8px 14px; } .modal-buttons .modal-illustration ~ button { box-shadow: none; } .modal-hr { width: 100%; border-color: var(--color-text); } .modal-content { padding: 5px 15px; margin: 0 -15px; width: calc(100% + 20px); max-height: var(--modal-content-max-height); overflow: auto; z-index: 1; } .modal-content .popup { top: unset; left: unset; z-index: 502; } .modal-content .form-group:not(.relative) { position: static; } .modal-content::-webkit-scrollbar { width: 10px; } .modal > .feedback { width: 100%; } @media (max-width: 850px) or (max-height: 700px) { #modalContainer { --modal-container-padding-v: 30px; } } @media (max-width: 800px) { .modal { --modal-padding: 10px; } .modal-premium_content { padding: 10px; } .modal-top-right-button { top: 10px; } .modal .form-group.flex-row { flex-wrap: wrap; } .modal .form-group.flex-row > *:not(.tag) { width: 100%; margin-left: 0; } } @media (max-width: 500px) or (max-height: 500px) { #modalContainer { --modal-container-padding-v: 10px; } } @media (max-width: 400px) { .modal-header { font-size: 1.2rem; } } form { display: flex; flex-direction: column; } .form-group { margin-top: 10px; position: relative; } .form-group-checkbox { margin-top: 10px; position: relative; display: flex; align-items: center; } .form-input { width: 100%; } label, .label { display: block; color: var(--color-text); font-weight: 600; margin-bottom: 5px; cursor: default; } h3 > label { font-weight: inherit; } .label-tip { font-weight: 500; font-size: .9rem; font-style: italic; } .checkbox-label { margin-bottom: 0; margin-left: 5px; flex: 1; min-width: 0; } .checkbox-label:hover { cursor: pointer; } input:checked:not(.impossible):not(.semi-ok) + .checkbox-label { color: var(--color-text-bright); } input.disabled { opacity: 0.5; pointer-events: none; } .input-row { height: 35px; display: flex; flex-direction: row; align-items: center; flex: 1; } .input-row_btn { border-radius: 4px; padding: 4px; margin-left: 5px; } .secondary-label { font-size: .8rem; } .copy-clipboard { contain: none; } .copy-clipboard-tip { position: absolute; top: -10px; left: 0; transform: translateY(-100%); border-radius: 4px; font-weight: normal; font-size: .9rem; opacity: 0; transition: opacity 0.3s ease-out; pointer-events: none; box-shadow: -2px 2px 10px 2px var(--shadow-color-dark); margin: 0; } .copy-clipboard-tip.right { left: unset; right: 0; } .copy-clipboard-tip::before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: inherit; z-index: -1; background: var(--color-background-300); } .copy-clipboard-tip::after { content: ""; position: absolute; left: 8px; bottom: -15px; border: 7px solid transparent; border-top-color: var(--color-gray-blueish); } .copy-clipboard-tip.right::after { left: unset; right: 8px; } .copy-clipboard-tip.visible { opacity: 1; } .copy-clipboard-tip.error { border-color: var(--color-red-500); } .copy-clipboard-tip.error::after { border-top-color: var(--color-red-500); } .form-tooltip { display: block; z-index: 10; } .form-tooltip:hover { cursor: help; --icon-color: var(--color-text-bright); } .form-tooltip_text { opacity: 0; transition: opacity 0.3s ease-out; pointer-events: none; position: absolute; right: 0; top: 100%; background-color: var(--color-background-700); z-index: 1; padding: 8px; border-radius: 8px 4px 8px 8px; transform: translateY(5px); font-size: .9em; border: 1px solid var(--color-taupe-purple-600); } .form-tooltip_text:after { content: ""; opacity: inherit; position: absolute; right: 0; top: -20px; width: 0; height: 0; border: 10px solid transparent; border-bottom-color: var(--color-taupe-purple-600); } .form-tooltip:hover .form-tooltip_text, .form-tooltip:focus .form-tooltip_text { opacity: 1; } #flashMessageContainer { position: fixed; bottom: 0; left: 0; z-index: 1000; width: 100%; display: flex; flex-direction: column; align-items: center; pointer-events: none; } .flash-message { display: flex; flex-direction: row; align-items: center; position: relative; } .flash-message, #flashMessageContainer > .feedback { padding: 20px; max-width: 100%; gap: 15px; box-shadow: 0 -4px 12px var(--shadow-color-dark); background-color: var(--color-background-500); animation: ease-out flash-message-in 1.5s; pointer-events: auto; } #flashMessageContainer > .feedback br { display: none; } .flash-message.disappear, #flashMessageContainer .feedback.disappear { transform: translateY(100%); animation: ease-out flash-message-out 0.3s; } @keyframes flash-message-in { 0% { transform: translateY(100%); } 15% { box-shadow: 0 -4px 12px var(--shadow-color-dark); } 20% { transform: translateY(0%); } 30% { box-shadow: 0 -4px 12px 4px var(--color-magenta-500); } 45% { box-shadow: 0 -4px 12px 4px var(--color-magenta-500); } 100% { transform: translateY(0%); box-shadow: 0 -4px 12px var(--shadow-color-dark); } } @keyframes flash-message-out { 0% { transform: translateY(0%); } 100% { transform: translateY(100%); } } .flash-message_info { color: var(--color-red-500); } .flash-message_cancel { height: 100%; } .flash-close { padding: 5px; border-radius: 50%; --button-background: transparent; } @media (max-width: 600px) { .flash-message { padding: 20px 10px; gap: 10px; } } @media (max-width: 500px) { .flash-close { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); --button-active-transform: translate(-50%, -50%) scale(.9); background: var(--color-dark-100); box-shadow: var(--shadow-button-dark); padding: 6px; } } @media (max-width: 400px) { .flash-message_content > .mobile-400 { display: block; } .flash-message_content > .mobile-text ~ :not(.mobile-400) { display: none; } } .indicator-overlay { position: absolute; z-index: 1; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background-color: var(--color-background-700-85); opacity: 0; pointer-events: none; border-radius: inherit; } .indicator-spinner { pointer-events: none; max-width: 100%; max-height: 100%; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; pointer-events: auto; transition: opacity 0.2s step-end; } .context-menu { position: absolute; background-color: var(--color-background-300); display: flex; flex-direction: column; justify-content: center; z-index: 101; box-shadow: 2px 2px 10px var(--shadow-color-light); border-radius: 0 4px 4px 4px; --button-color: var(--color-text); } .context-menu-button { background-color: transparent; border-radius: 0; justify-content: flex-start; } .context-menu-button.danger:hover { --button-background-hover: var(--color-red-500); --button-color-hover: var(--color-white); --button-border-content: none; --button-transition: none; } .wheel-menu { position: absolute; z-index: 101; width: 250px; height: 250px; transform: translate(-50%, -50%); pointer-events: none; } .wheel-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; pointer-events: none; clip-path: circle(0% at 50% 50%); } .wheel-menu.visible .wheel-svg { animation: wheel-pop-in .2s ease-out forwards; } @keyframes wheel-pop-in { 0% { clip-path: circle(0% at 50% 50%); } 100% { clip-path: circle(50% at 50% 50%); } } .wheel-background { fill: var(--body-background); pointer-events: auto; } .wheel-slice { cursor: pointer; fill: url(#sliceGradient); pointer-events: auto; } .wheel-slice.--danger { fill: url(#sliceGradientDanger); } .wheel-slice:is(:hover, :focus-visible) { fill: var(--button-background-hover); stroke-width: 2px; stroke: var(--button-color-hover); } .wheel-slice:focus { outline: none; } .wheel-slice.--disabled { cursor: not-allowed; opacity: 0.5; } .wheel-button.--disabled { opacity: 0.5; } .wheel-button { pointer-events: none; color: var(--button-color); fill: var(--button-color); } .wheel-slice.--1:is(:hover, :focus-visible) ~ .wheel-button.--1, .wheel-slice.--2:is(:hover, :focus-visible) ~ .wheel-button.--2, .wheel-slice.--3:is(:hover, :focus-visible) ~ .wheel-button.--3, .wheel-slice.--4:is(:hover, :focus-visible) ~ .wheel-button.--4, .wheel-slice.--5:is(:hover, :focus-visible) ~ .wheel-button.--5, .wheel-slice.--6:is(:hover, :focus-visible) ~ .wheel-button.--6 { color: var(--button-color-hover); fill: var(--button-color-hover); } .wheel-slice.--danger.--1 ~ .wheel-button.--1, .wheel-slice.--danger.--2 ~ .wheel-button.--2, .wheel-slice.--danger.--3 ~ .wheel-button.--3, .wheel-slice.--danger.--4 ~ .wheel-button.--4, .wheel-slice.--danger.--5 ~ .wheel-button.--5, .wheel-slice.--danger.--6 ~ .wheel-button.--6 { --button-color: var(--color-text-bright); } .wheel-menu > .popup { top: 0; left: 50%; transform: translateX(-50%); pointer-events: auto; } .changelogs-carousel { overflow: hidden auto; position: relative; padding: 0 5px 10px; margin: 5px; } .changelogs-carousel_content { display: flex; flex-direction: row; } .changelogs-carousel_content:focus { outline: none; } .changelogs-carousel_content[data-slide="0"] .changelog-slide:not(:nth-child(1)) { display: none; } .changelogs-carousel_content[data-slide="1"] .changelog-slide:not(:nth-child(2)) { display: none; } .changelogs-carousel_content[data-slide="2"] .changelog-slide:not(:nth-child(3)) { display: none; } .changelogs-carousel_content[data-slide="3"] .changelog-slide:not(:nth-child(4)) { display: none; } .changelogs-carousel_content[data-slide="4"] .changelog-slide:not(:nth-child(5)) { display: none; } .changelogs-carousel_content[data-slide="0"] + .changelogs-carousel_bookmarks .changelogs-carousel_bookmark[data-slide="0"], .changelogs-carousel_content[data-slide="1"] + .changelogs-carousel_bookmarks .changelogs-carousel_bookmark[data-slide="1"], .changelogs-carousel_content[data-slide="2"] + .changelogs-carousel_bookmarks .changelogs-carousel_bookmark[data-slide="2"], .changelogs-carousel_content[data-slide="3"] + .changelogs-carousel_bookmarks .changelogs-carousel_bookmark[data-slide="3"], .changelogs-carousel_content[data-slide="4"] + .changelogs-carousel_bookmarks .changelogs-carousel_bookmark[data-slide="4"] { background: var(--color-magenta-500); transform: scale(1.5); } .changelog-slide { min-width: 100%; position: relative; } .changelog-slide_title { text-align: center; margin: 0; } .changelog-slide_next { position: absolute; right: 0; top: 50%; transform: translateY(-50%); border-radius: 50%; } .changelog-slide_previous { position: absolute; left: 0; top: 50%; transform: translateY(-50%); border-radius: 50%; } .changelog-slide_content { padding: 0 50px; margin-top: 20px; } .changelogs-carousel_bookmarks { display: flex; flex-direction: row; justify-content: center; gap: 25px; margin-top: 5px; } .changelogs-carousel_bookmark { background-color: var(--color-gray-blueish); transition: transform 0.3s ease-out; position: relative; } .changelogs-carousel_bookmark:hover { transform: scale(2); } .changelogs-carousel_bookmark:hover .changelogs-carousel_bookmark_version { opacity: 1; } .changelogs-carousel_bookmark_version { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); pointer-events: none; opacity: 0; transition: opacity 0.3s ease-out; font-size: .7rem; } .changelog-popup_logo { margin: -5px 0 -5px 3px; } .changelog-popup_header { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 5px; } .changelog-popup { max-height: calc(100% - 50px - 100px); } .changelog-slide_content h2 { color: var(--color-text-bright); } .changelog-slide_content h3 { color: var(--color-text-bright); margin-bottom: 10px; } .changelog-slide_content img, .changelog-slide_content video { max-width: 100%; border-radius: 8px; } .changelog-slide_content .flex-row:has(img, video) { align-items: flex-start; } .changelog-slide_content strong { color: var(--color-text-bright); } @media (max-width: 400px) { .changelog-popup_header { font-size: 1.3rem; } .changelog-slide_content { padding: 0 20px; } } @media (max-width: 370px) { .changelog-popup_header { font-size: 1.1rem; } } @media (max-width: 340px) { .changelog-popup_header { font-size: 1rem; } } .pre-inline { display: inline; font-family: monospace; white-space: pre-wrap; border-radius: 4px; padding: 4px 8px; background-color: var(--color-background-700); color: var(--color-text-bright); line-height: 1.8; font-size: .8rem; margin: 0; box-shadow: var(--input-inner-shadow); } .pre-inline.small { font-size: .7rem; padding: 3px 5px; } .pre-block { display: block; font-family: monospace; white-space: pre; border-radius: 4px; padding: 4px 8px; background-color: var(--color-background-700); line-height: 1.5; font-size: .8rem; overflow: auto hidden; margin: 10px 0; box-shadow: var(--input-inner-shadow); } .pre-block::-webkit-scrollbar { height: 5px; width: 5px; background-color: var(--color-background-700); } .text_list { padding-left: 30px; margin: 5px 0; } .text_task { padding: 6px 8px; background-color: var(--text-link-background); border-radius: 20px; text-decoration: none; color: var(--color-text-bright); line-height: 2; } .text_task:hover { color: var(--color-text-bright); text-decoration: underline; } .text_task_icon-container { display: inline-block; transform: translateY(2px); } .text_user { position: relative; line-height: 2; padding: 8px 8px 8px 6px; background-color: var(--text-link-background); border-radius: 20px; white-space: nowrap; color: var(--color-text-bright); } .text_user_img { border-radius: 50%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin-top: -20px; margin-bottom: -10px; } .text_user_details { position: absolute; z-index: 1; opacity: 0; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: var(--text-link-background); padding: 6px; border-radius: 8px; white-space: nowrap; line-height: 1; left: 0; top: -5px; transform: translate(0, -100%); font-size: .9rem; box-shadow: -1px -1px 10px var(--shadow-color-light); } .text_user_details::after { content: ""; position: absolute; left: 15px; bottom: -11px; border: 6px solid transparent; border-top-color: var(--color-gray-blueish); } .text_user:hover > .text_user_details { opacity: 1; } .icon { display: inline-block; color: var(--icon-color); max-height: 100%; flex-shrink: 0; } body { --icon-color: var(--color-text); } .icon-color-white { --icon-color: var(--color-text-bright); } .icon-color-success { --icon-color: var(--color-green-500); } .icon-color-danger { --icon-color: var(--color-red-500); } .icon-color-warning { --icon-color: var(--color-orange-500); } .superposed-icon { display: inline-block; max-height: 100%; position: relative; width: 24px; height: 24px; } .superposed-icon .icon { position: absolute; left: 0; top: 0; right: 0; bottom: 0; } .github-icon { --icon-color: var(--color-text-bright); } .bg-light { background-color: var(--color-background-300); } .flex-row { display: flex; flex-direction: row; max-height: 100%; } .flex-column { display: flex; flex-direction: column; } .flex-expand { flex: 1; min-width: 0; min-height: 0; } .flex-grow { flex-grow: 1; } .align-items-center { align-items: center; } .align-items-start { align-items: start !important; } .justify-content-center { justify-content: center; } .flex-row-center { display: flex; flex-direction: row; align-items: center; justify-content: center; } .flex-center-v { align-items: center; } .flex-center-h { justify-content: center; } .flex-align-right { justify-content: flex-end; } .flex-wrap { flex-wrap: wrap; } .gap-2 { gap: 2px; } .gap-5 { gap: 5px; } .gap-10 { gap: 10px; } .gap-20 { gap: 20px; } .gap-35 { gap: 35px; } .gap-45 { gap: 45px !important; } .inline-block { display: inline-block; } .white { color: var(--color-text-bright); } .color-initial { color: var(--color-text); } .hidden { display: none !important; } .center-text { text-align: center; } .relative { position: relative; } .z-index-1 { z-index: 1; } a { color: var(--link-color); word-break: break-word; } a:hover, a:focus-visible { color: var(--link-color-hover); --icon-color: var(--link-color-hover); } .m-auto { margin: auto; } .ml-5 { margin-left: 5px; } .ml-10 { margin-left: 10px !important; } .ml-15 { margin-left: 15px; } .ml-20 { margin-left: 20px; } .ml-29 { margin-left: 29px; } .ml-35 { margin-left: 35px; } .ml-50 { margin-left: 50px; } .mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 1px !important; } .mt-5 { margin-top: 5px !important; } .mt-10 { margin-top: 10px !important; } .mt-15 { margin-top: 15px !important; } .mt-20 { margin-top: 20px !important; } .mt-35 { margin-top: 35px !important; } .mt-50 { margin-top: 50px !important; } .m-0 { margin: 0 !important; } .mr-5 { margin-right: 5px !important; } .mr-10 { margin-right: 10px !important; } .m-4-8 { margin: 4px 8px !important; } .fz-1 { font-size: 1rem; } .fz-small { font-size: .8rem; } .no-wrap { white-space: nowrap; } .text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .white-link { color: var(--color-text-bright); } .rounded { border-radius: 50%; } .h-35 { height: 35px; } .h-fill { height: 100%; } .lowercase { text-transform: lowercase; } .mb-0 { margin-bottom: 0 !important; } .mb-5 { margin-bottom: 5px !important; } .mb-10 { margin-bottom: 10px !important; } .mb-15 { margin-bottom: 15px !important; } .mb-20 { margin-bottom: 20px !important; } .min-width-0 { min-width: 0; } .min-height-0 { min-height: 0; } .max-width-250 { max-width: 250px; } .w-100 { width: 100px; } .w-115 { width: 115px; } .w-200 { width: 200px; } .w-255 { width: 255px; } .w-fill { width: 100%; } .p-0 { padding: 0; } .p-4 { padding: 4px !important; } .p-6 { padding: 6px !important; } .p-l-r-8 { padding-left: 8px; padding-right: 8px; } .p-r-0 { padding-right: 0 !important; } .p-b-5 { padding-bottom: 5px; } .border-radius-8 { border-radius: 8px; } .border-radius-16 { border-radius: 16px; } .break-word { word-break: break-word; } .line-through { text-decoration: line-through var(--color-text-bright); } .img-max-width { max-width: 100%; height: auto; } .text-align-center { text-align: center; } .text-align-right { text-align: right; } .font-weight-500 { font-weight: 500; } script-once { display: none; } .overflow-hidden { overflow: hidden; } .task-category { display: flex; flex-direction: row; gap: 5px; align-items: center; font-size: .9rem; border-radius: 0; background: none; padding: 0; font-weight: normal; } .task-category.editable { padding: 0 5px 0 0; --button-color-hover: var(--color-text-bright); } .category-icon-background, .administration_category-background { border-radius: 5px; display: flex; justify-content: center; align-items: center; padding: 4px; --icon-color: var(--color-white); } .category-icon-background { height: 24px; width: 24px; } .task-cost-deadline-row { margin-top: 20px; display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px 35px; } .task-cost-deadline-row > div { flex-basis: 150px; flex-shrink: 1; flex-grow: 1; } .add-tag { padding: 5px; background: var(--color-gray-blueish); border-radius: 50%; --icon-color: var(--color-background-700); width: 24px; height: 24px; } .priority-input-group { display: flex; align-items: center; position: relative; flex-direction: row; } .priority-input-group > button { height: 35px; background: var(--color-gray-blueish-70); --icon-color: var(--color-white); } .priority-input-group > button:not(:last-child) { border-bottom-right-radius: 0; border-top-right-radius: 0; } .priority-input-group > button:last-child { border-bottom-left-radius: 0; border-top-left-radius: 0; } .priority-input-group > input { width: 50px; text-align: center; border-radius: 0; } .priority-input-group > input:focus-visible { outline: none; border: 1px solid white; } .priority-input-group > input::-webkit-outer-spin-button, .priority-input-group > input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .priority-input-group > input[type=number] { -moz-appearance: textfield; } .task-details_users { display: flex; flex-wrap: wrap; flex-direction: row; } .task-details_user-empty { background: var(--color-gray-blueish); width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; --icon-color: var(--color-background-700); border-radius: 50%; position: relative; overflow: hidden; } .task-details_user { display: inline-block; margin-right: 5px; position: relative; height: 50px; } .remove-badge { --button-background: var(--color-red-500); border-radius: 50%; position: absolute; width: 20px; height: 20px; top: -5px; right: -5px; --button-color: var(--color-white); padding: 2px; display: flex; } .board-column { flex: 1; padding: 5px; display: flex; flex-direction: column; overflow-y: auto; --column-color: var(--color-text); position: relative; } .board-column-header { text-align: center; font-family: var(--font-titles); font-weight: 800; text-transform: uppercase; font-size: 1.25rem; color: var(--column-color); display: flex; justify-content: center; align-items: center; --icon-color: var(--column-color); background: none; padding: 0; gap: 5px; --button-border-content: none; --button-background-hover: transparent; --button-active-transform: none; --button-active-hitbox-scale: 1; } .board-column-header_icon { width: 0; height: 0; } .board-column-hr { min-height: 3px; height: 3px; border: none; margin: 0.1em 10px 0.5em 0; background: var(--column-color); } .board-column-content { overflow-y: auto; padding: 0 10px 10px 0; position: relative; flex-grow: 1; contain: layout size style paint; } .board-column-content::-webkit-scrollbar, .inventory-tasks::-webkit-scrollbar { width: 10px; } .task { margin-top: 15px; padding: 8px; background: var(--task-background); color: var(--task-color); --icon-color: var(--task-icon-color); border-radius: 10px; box-shadow: var(--task-shadow); border-left: 12px solid var(--column-color); position: relative; z-index: 1; contain: layout paint style; } .task:first-child { margin-top: 0; } .task-header { font-weight: 600; align-items: center; } .task-title { word-break: break-word; } .task-id { color: var(--column-color); } .task-users { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 8px; } .task-user { border-radius: 50%; } .category-icon-container { display: inline-block; } .board-tasks { display: flex; flex-direction: row; padding: 0 10px; position: relative; width: calc(100dvw - 270px); height: 100%; } .task.clone { position: absolute; opacity: .5; pointer-events: none; } .task.dragging { background: var(--color-gray-blueish-40); animation: 1s linear infinite task-dragging; } @keyframes task-dragging { 0% { transform: scale(1); } 50% { transform: scale(0.95); } 100% { transform: scale(1); } } .task-row { margin-top: 8px; height: 16px; font-weight: var(--task-font-weight); display: flex; font-size: 0.8rem; } .task-row-group { display: flex; flex-direction: row; align-items: center; gap: 15px; flex-wrap: wrap; margin-top: 2px; } .task-row:last-child { margin-bottom: 0; } .task-row.complete { color: var(--color-green-500); --icon-color: var(--color-green-500); } .task-row.over-time { color: var(--color-red-500); --icon-color: var(--color-red-500); } .task-row.warning { color: var(--color-orange-500); --icon-color: var(--color-orange-500); } .menu-item, .menu-item-list { min-height: 44px; display: flex; align-items: center; cursor: pointer; background: var(--left-menu-item-background); border-radius: 10px; margin: 5px 12px; font-weight: 800; font-size: 1rem; color: var(--color-text); --icon-color: var(--color-text); overflow: hidden; position: relative; box-shadow: var(--left-menu-item-shadow); } .menu-item.active .menu-item_link, .menu-item-list.active .menu-item-list_title-row, .menu-item-list_title-row.active { background: var(--zorro-gradient); color: var(--color-white); --icon-color: var(--color-white); } .menu-item_link { padding: 10px; display: flex; align-items: center; color: inherit; flex: 1; text-decoration: none; position: relative; font-family: var(--font-titles); --link-color-hover: var(--color-text-bright); font-weight: inherit; gap: 0; } .menu-item_link:hover { color: var(--color-text-bright); --icon-color: var(--color-text-bright); } .menu-item_name { margin-left: 10px; } .menu-item-list_title-row { display: flex; flex-direction: row; align-items: center; position: relative; background: var(--left-menu-item-background); width: 100%; font-family: var(--font-titles); } .create-board { position: absolute; right: 0; display: flex; align-items: center; height: 100%; margin: 0; padding: 5px 8px; transition: transform 0.3s ease-in-out, background 0.3s step-end; transform: translateX(43px); --button-active-transform: translateX(43px); --button-active-hitbox-scale: 1; font-size: inherit; font-family: inherit; font-weight: inherit; background: transparent; border-radius: 0; gap: 0; --button-border-content: none; --button-background-hover: var(--color-green-500); --button-color: var(--color-text); --button-color-hover: var(--color-white); } .create-board:focus-visible { outline: none; } .create-board .icon { transition: color 0.3s step-end; } .create-board:not(:is(:hover, :focus-visible)) { transition: transform 0.3s ease-in-out, background 0.3s step-end, color 0.3s step-end; } .create-board:is(:hover, :focus-visible) .icon { transition: none; } .create-board_name { margin-left: 5px; width: 43px; overflow: hidden; transition: transform 0.3s ease-in-out; transform: translateX(10px); } .create-board:hover, .create-board:focus-visible { transform: translateX(0); transition: transform 0.3s ease-in-out; } .create-board:hover > .create-board_name, .create-board:focus-visible > .create-board_name { transform: translateX(0); } .menu-item-list.active .create-board { --button-color: var(--color-white); } .menu-card { padding: 8px 10px 10px 10px; border-radius: 16px; color: var(--color-text-bright); margin: 5px 12px; background: var(--color-background-700); box-shadow: 2px 2px 10px var(--shadow-color-light); font-size: 1rem; z-index: 0; } .menu-card_header { display: flex; align-items: center; margin-bottom: 15px; position: relative; z-index: 0; gap: 10px; } .menu-card_header:before { content: ""; position: absolute; left: -10px; right: -10px; top: -8px; height: 38px; z-index: -1; border-radius: 16px 16px 0 0; background: var(--color-background-300); } #timeTracker .menu-card_header:before, #timeTrackerMobile .menu-card_header:before { animation: time-tracker-header-anim 3s linear infinite; } #timeTracker .menu-card_title, #timeTrackerMobile .menu-card_task-name, #timeTrackerMobile .menu-card_task-name > a { color: var(--color-white); } @keyframes time-tracker-header-anim { 0% { background-color: var(--color-blue-500); } 50% { background-color: var(--color-magenta-500); } 100% { background-color: var(--color-blue-500); } } .menu-card_title { margin: 0; text-align: center; font-size: 1rem; } .menu-card_hr { margin: 5px 0; width: 100%; } .ongoing-events::-webkit-scrollbar { width: 5px; } .menu-card_task-name { font-size: .9rem; display: block; text-decoration: none; color: var(--color-text-bright); } .menu-card_task-name > a { outline-offset: -2px; text-decoration: none; color: var(--color-text-bright); } .tracker-row { display: flex; flex-direction: row; align-items: center; margin-top: 5px; } .tracker_btn { padding: 4px; flex-basis: 32px; min-width: 32px; transition: flex-basis ease-out 0.3s, gap ease-out 0.3s; height: 32px; margin-left: 5px; gap: 0; } .tracker_btn.--confirm:hover { flex-basis: 107px; } .tracker_btn.--danger:hover { flex-basis: 88px; } .tracker_btn_text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: clip; color: var(--color-text-bright); text-align: left; } #timeTracker.menu-card:before { content: ""; position: absolute; z-index: -1; left: 0; top: 0; right: 0; bottom: 0; background-image: var(--time-tracker-background), var(--time-tracker-border-background); background-clip: padding-box, border-box; background-size: 100% 100%, 200% 100%; background-position: 0 0, -1px 0; border: 1px solid transparent; border-radius: inherit; pointer-events: none; } .details-card { background: var(--details-card-background); padding: 15px; border-radius: 10px; margin-bottom: 15px; --placeholder-color: var(--details-card-placeholder-color); --card-title-color: var(--color-text-bright); box-shadow: var(--details-card-shadow); } .card-title { font-weight: 800; color: var(--card-title-color); --icon-color: var(--color-gray-blueish); display: flex; flex-direction: row; align-items: center; gap: 5px; } .card-title_text { font-family: var(--font-titles); font-size: 1.2rem; } .details-work-log { height: 40px; flex-direction: row; align-items: center; display: flex; margin-top: 10px; white-space: nowrap; } .details-work-log_date { margin: 0 3px; padding: 4px 6px; font-weight: inherit; font-size: inherit; display: block; color: inherit; } .details-work-log_value-container { display: flex; flex: 1; align-items: center; color: var(--color-text-bright); } .details-work-log_value { min-width: 0; flex: 1; padding: 4px 6px; font-weight: inherit; font-size: inherit; color: inherit; display: block; text-align: left; } .week-days, .month-days { flex-shrink: 0; padding: 0 25px 0 80px; font-size: 1.25rem; display: flex; flex-direction: row; align-items: center; justify-content: center; } .week-deadlines { flex-shrink: 0; padding: 0 25px 0 80px; font-size: 1.25rem; display: flex; flex-direction: row; justify-content: center; align-items: flex-start; margin-top: 5px; } .week-day { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; text-align: center; } .week-day.active { color: var(--color-text-bright); } .week-day.active > .week-day_number { border: 2px solid var(--color-magenta-500); margin: -2px 0; border-radius: 22px; background-color: var(--planning-purple-background); color: var(--color-magenta-500); } .planning_scrollable { padding-left: 20px; overflow-y: auto; padding-right: 10px; margin-top: 15px; position: relative; display: flex; flex-direction: row; } .planning-column.active { background-color: var(--color-background-500); } .current-time { position: absolute; left: 10px; width: calc(100% - 20px); display: flex; flex-direction: row; align-items: center; pointer-events: none; will-change: opacity; } .current-time_value { min-width: 70px; border: 2px solid var(--color-magenta-500); border-radius: 15px; background-color: var(--planning-purple-background); padding: 0 10px; color: var(--color-magenta-500); font-size: 1rem; text-align: center; } .current-time_hr { flex: 1; border-color: var(--color-magenta-500); margin: 0; } .hours-column { margin-right: 10px; display: flex; flex-direction: column; } .planning-hour { min-height: 55px; width: 50px; text-align: center; font-size: 1rem; } .planning-hour_text { margin-top: -11px; } .planning-column--first { display: flex; flex-direction: column; flex: 1; position: relative; overflow: hidden; height: calc(55px * 24); } .planning-column { display: flex; flex-direction: column; flex: 1; position: relative; overflow: hidden; height: calc(55px * 24); border-left: 1px solid var(--color-background-300); } .hours-column + .planning-column { border-left: none; } .planning-cell { display: flex; align-items: flex-start; min-height: 55px; padding: 0; background: none; border-radius: 0; outline-offset: -2px; } .planning-cell_hr { margin: 0; border: 1px dashed var(--color-background-300); height: 0; width: 100%; } .planning-event { position: absolute; left: 0; right: 0; color: var(--color-text-bright); font-size: .85rem; top: var(--y-position); height: var(--duration); border-radius: 0 8px 8px 0; margin-right: 10px; display: flex; flex-direction: column; cursor: pointer; --button-border-content: none; --button-active-transform: none; --button-active-hitbox-scale: 1; } .planning-event.active { color: var(--color-white); } .planning-event:not(.active), .planning-event.tracked { padding-left: 4px; } .planning-event:not(.active):after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: var(--color); pointer-events: none; } .planning-event_drag-area { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 0 8px 8px 0; z-index: 0; cursor: move; background: none; } .planning-event_drag-area:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: var(--color); border-radius: inherit; transition: 0.3s ease-out; z-index: 0; opacity: .2; transform: none; } .planning-event_drag-area:active:after { transform: none !important; } .planning-event.active > .planning-event_drag-area:after { opacity: .9; filter: brightness(var(--planning-active-event-brightness)); } .planning-event_text-container { position: relative; padding: 4px; overflow: hidden; height: 100%; pointer-events: none; word-break: break-word; } .planning-event.small .planning-event_text-container { padding: 1px; font-size: .6rem; } .planning-event_time { font-size: .65rem; } .planning-event.small .planning-event_text-container .planning-event_time { font-size: inherit; } .signup_username-row { display: flex; align-items: center; flex-direction: row; } .trailing-at { height: 35px; background-color: var(--color-background-700); margin-bottom: 0; display: flex; align-items: center; padding: 4px 8px; border-radius: 12px 0 0 12px; margin-left: -5px; } .pricing-cards-row { display: flex; flex-direction: row; align-items: stretch; gap: 40px; margin-top: -20px; margin-bottom: 60px; } .pricing-card { border-radius: 25px; background: var(--popup-background); padding: 30px; width: 380px; position: relative; z-index: 0; display: flex; flex-direction: column; gap: 0; align-items: center; line-height: 1; text-align: center; } .pricing-card.--offset { transform: translateY(40px); } .pricing-card > h3 { margin: 0; text-align: center; font-size: 1.75em; } .pricing-card h4 { margin: 15px 0 0 0; text-align: center; font-size: 3em; } .pricing-card h5 { margin: 5px 0 0 0; font-size: 1em; text-align: center; font-weight: normal; } .pricing-card > .toggle-group { margin-top: 20px; } .pricing-perks { margin: 40px 0 0 0; padding: 0; list-style: none; line-height: 2; text-align: left; } .pricing-perks li { position: relative; } .pricing-perks li:before { content: ""; position: absolute; left: -10px; top: 50%; width: 24px; height: 24px; transform: translate(-100%, -50%); background-color: var(--color-green-500); --icon-src: url('data:image/svg+xml,%3Csvg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%20512%20512"%3E%3Cpath%20d="M504%20256c0%20136.967-111.033%20248-248%20248S8%20392.967%208%20256%20119.033%208%20256%208s248%20111.033%20248%20248zM227.314%20387.314l184-184c6.248-6.248%206.248-16.379%200-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628%200L216%20308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628%200l-22.627%2022.627c-6.248%206.248-6.248%2016.379%200%2022.627l104%20104c6.249%206.249%2016.379%206.249%2022.628.001z"/%3E%3C/svg%3E'); mask: var(--icon-src) no-repeat center; -webkit-mask: var(--icon-src) no-repeat center; } .pricing-card :is(button, .button) { margin-top: 40px; font-size: 1.5em; padding: 10px 24px; line-height: 1; text-transform: uppercase; border-radius: 25px; } .price-row { margin-top: 15px; display: flex; align-items: center; gap: 5px; white-space: nowrap; } .price-initial { font-size: 1.4em; text-decoration: line-through; color: var(--color-text); } .discount-tag { font-size: 1em; padding: 8px 12px; border-radius: 48px; background: var(--gradient-gold); color: white; font-weight: 700; margin-left: 10px; text-shadow: 1px 1px 0 #00000085; } .discount-header { position: absolute; color: var(--color-white); left: 0; top: 0; width: 100%; padding: 2px; background: var(--gradient-gold); border-top-left-radius: inherit; text-shadow: 1px 1px 2px #000000d6; font-weight: 700; border-top-right-radius: inherit; } .price-row > h4 { margin-top: 0; }