/* /node_modules/.store/nprogress@0.2.0/node_modules/nprogress/nprogress.css */ /* Make clicks pass-through */ #nprogress { pointer-events: none; } #nprogress .bar { background: #29d; position: fixed; z-index: 1031; top: 0; left: 0; width: 100%; height: 2px; } /* Fancy blur effect */ #nprogress .peg { display: block; position: absolute; right: 0px; width: 100px; height: 100%; box-shadow: 0 0 10px #29d, 0 0 5px #29d; opacity: 1.0; -webkit-transform: rotate(3deg) translate(0px, -4px); -ms-transform: rotate(3deg) translate(0px, -4px); transform: rotate(3deg) translate(0px, -4px); } /* Remove these to get rid of the spinner */ #nprogress .spinner { display: block; position: fixed; z-index: 1031; top: 15px; right: 15px; } #nprogress .spinner-icon { width: 18px; height: 18px; box-sizing: border-box; border: solid 2px transparent; border-top-color: #29d; border-left-color: #29d; border-radius: 50%; -webkit-animation: nprogress-spinner 400ms linear infinite; animation: nprogress-spinner 400ms linear infinite; } .nprogress-custom-parent { overflow: hidden; position: relative; } .nprogress-custom-parent #nprogress .spinner, .nprogress-custom-parent #nprogress .bar { position: absolute; } @-webkit-keyframes nprogress-spinner { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes nprogress-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* /app/styles/common.css */ *, *::before, *::after { box-sizing: border-box; } body { width: 100%; background-color: var(--bg); color: var(--text); font-family: lexend, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: antialiased; line-height: 1.55; overflow-x: hidden; -webkit-tap-highlight-color: transparent; } *:focus:not(:focus-visible) { outline: none !important; } a { color: var(--theme); font-weight: var(--semi-bold); text-decoration: none; } :is(button, .button) { display: flex; width: auto; align-items: center; justify-content: center; border: 2px solid var(--theme); border-radius: var(--rounded-sm); appearance: none; background: var(--theme); color: var(--button-text); cursor: pointer; font-size: var(--fonts-sm); font-weight: var(--bold); line-height: 1.2; outline-offset: 2px; padding-block: var(--s-1-5); padding-inline: var(--s-2-5); user-select: none; } :is(button, .button):focus-visible { outline: 2px solid var(--theme); } :is(button, .button):active { transform: translateY(1px); } :is(button, .button):disabled { cursor: not-allowed; opacity: 0.5; transform: initial; } :is(button, .button).outlined { background-color: var(--theme-very-transparent); color: var(--theme); } :is(button, .button).outlined-success { border-color: var(--theme-success); background-color: transparent; color: var(--theme-success); } :is(button, .button).tiny { font-size: var(--fonts-xs); padding-block: var(--s-1); padding-inline: var(--s-2); } :is(button, .button).miniscule { font-size: var(--fonts-xxs); padding-block: var(--s-1); padding-inline: var(--s-2); } :is(button, .button).big { font-size: var(--fonts-md); padding-block: var(--s-2-5); padding-inline: var(--s-6); } :is(button, .button).minimal { padding: 0; border: none; background-color: transparent; color: var(--theme); outline: initial; } :is(button, .button).minimal:focus-visible { outline: 2px solid var(--theme); } :is(button, .button).minimal-success { padding: 0; border: none; background-color: transparent; color: var(--theme-success); } :is(button, .button).success { border-color: var(--theme-success); background-color: var(--theme-success); outline-color: var(--theme-success); } :is(button, .button).destructive { border-color: var(--theme-error); background-color: transparent; color: var(--theme-error); outline-color: var(--theme-error); } :is(button, .button).minimal-destructive { padding: 0; border: none; background-color: transparent; color: var(--theme-error); outline-color: var(--theme-error); } :is(button, .button).loading { cursor: not-allowed; opacity: 0.6; } .button-icon { width: 1.25rem; margin-inline-end: var(--s-1-5); } .button-icon.lonely { margin-inline-end: 0 !important; } :is(button, .button).tiny > .button-icon { width: 1rem; margin-inline-end: var(--s-1); } /* :not([name="text"]) workaround not to select textarea on map planner */ textarea:not(.plain, [name="text"]) { width: 18rem; max-width: 100%; height: 8rem; padding: var(--s-2-5) var(--s-3); border: 2px solid var(--border); border-radius: var(--rounded-sm); accent-color: var(--theme-secondary); background-color: var(--bg-input); color: var(--text); outline: none; overflow-wrap: normal; overflow-x: auto; } progress { accent-color: var(--theme); } textarea:not(.plain, [name="text"]):focus-within { border-color: transparent; /* TODO: rectangle on Safari */ outline: 2px solid var(--theme); } input:not(.plain, [type="radio"]) { width: var(--input-width, 12rem); } input:not(.plain) { height: 1rem; padding: var(--s-4) var(--s-3); border: 2px solid var(--border); border-radius: var(--rounded-sm); accent-color: var(--theme-secondary); background-color: var(--bg-input); color: var(--text); outline: none; } input:user-invalid { border-color: transparent; outline: 2px solid var(--theme-error); } .input__read-only { cursor: not-allowed; opacity: 0.5; } input:not(.plain, .combobox-input):focus-within { border-color: transparent; /* TODO: rectangle on Safari */ outline: 2px solid var(--theme); } input:not(.plain)::placeholder { color: var(--text-lighter); font-size: var(--fonts-xxs); font-weight: var(--semi-bold); letter-spacing: 0.5px; } input:not(.plain).error { border-color: transparent; outline: 2px solid var(--theme-error); } input[type="checkbox"] { width: 16px; height: 16px; } [list]::-webkit-calendar-picker-indicator { display: none !important; } label { display: block; font-size: var(--fonts-xs); font-weight: var(--bold); margin-block-end: var(--label-margin); } details summary { cursor: pointer; user-select: none; } .summary { border-radius: var(--rounded); background-color: var(--bg-darker-transparent); font-size: var(--fonts-xs); font-weight: var(--semi-bold); padding-block: var(--s-1); padding-inline: var(--s-2); } fieldset { border: none; border-radius: var(--rounded); background-color: var(--bg-lighter); font-size: var(--fonts-sm); padding-block-end: var(--s-3); padding-inline: var(--s-3); } legend { border-radius: var(--rounded-sm); background-color: transparent; font-size: var(--fonts-xs); font-weight: var(--bold); } article { white-space: pre-wrap; } select { all: unset; width: 100%; box-sizing: border-box; border: 2px solid var(--border); border-radius: var(--rounded-sm); background: var(--select-background, var(--bg-input)); /* TODO: Get color from CSS var */ background-image: url('data:image/svg+xml;utf8,'); background-position: center right var(--s-3); background-repeat: no-repeat; cursor: pointer; font-weight: 500; padding-block: 3.5px; padding-inline: var(--s-3) var(--s-9); } select:disabled { cursor: not-allowed; opacity: 0.5; transform: initial; } /* Temporary solution for issue: https://github.com/Sendouc/sendou.ink/issues/1141 */ .light select { /* TODO: Get color from CSS var */ background-image: url('data:image/svg+xml;utf8,'); } select::selection { overflow: hidden; font-weight: bold; } select:focus { outline: 2px solid var(--theme); } .my-table { width: 100%; border-collapse: collapse; border-spacing: 0 var(--s-1-5); font-size: var(--fonts-xs); text-align: left; border-color: var(--border); } .my-table__container { position: relative; width: 100%; overflow: auto; } .my-table > thead { font-size: var(--fonts-xxs); } .my-table tr { border-style: solid; border-width: 0px; border-bottom-width: 1px; } .my-table tbody tr:hover { background-color: var(--bg-lighter); } .my-table > thead > tr > th { padding: var(--s-2); } .my-table > tbody > tr > td { padding: var(--s-2) var(--s-2-5); } td > input[type="checkbox"] { vertical-align: middle; } hr { border-color: var(--theme-transparent); } abbr:not([title]) { text-decoration: none; } abbr[title] { cursor: help; } dialog { width: min(90%, 24rem); border: 0; border-radius: var(--rounded); margin: auto; background-color: var(--bg); color: var(--text); } dialog::backdrop { background: hsla(237deg 98% 1% / 70%); } @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) { dialog::backdrop { -webkit-backdrop-filter: blur(7px) brightness(70%); backdrop-filter: blur(7px) brightness(70%); background-color: transparent; } } dialog[open], dialog::backdrop { animation: show 500ms ease; } @keyframes show { 0% { opacity: 0; } } .toggle { all: unset; position: relative; display: inline-flex; width: var(--s-11); height: var(--s-6); align-items: center; border-radius: var(--rounded); background-color: var(--theme-transparent); cursor: pointer; } .toggle.tiny { width: var(--s-6); height: var(--s-3); } .toggle.checked { background-color: var(--theme-vibrant); } .toggle:active { transform: initial; } .toggle-dot { display: inline-block; width: var(--s-4); height: var(--s-4); border-radius: 50%; background-color: white; transform: translateX(var(--s-1)); transition: transform 0.2s ease; } .toggle-dot.tiny { width: var(--s-3); height: var(--s-3); transform: translateX(-0.2rem); } .toggle-dot.checked { transform: translateX(var(--s-6)); } .toggle-dot.checked.tiny { transform: translateX(var(--s-4)); } .button-text-paragraph { display: flex; gap: var(--s-1); align-items: flex-end; } .button-text-paragraph > button { font-size: var(--fonts-sm); font-weight: var(--semi-bold); margin-block-end: 0.125rem; } .input-container { display: flex; border: 2px solid var(--border); border-radius: var(--rounded-sm); accent-color: var(--theme-secondary); background-color: var(--bg-input); color: var(--text); font-size: var(--fonts-sm); outline: none; } .input-container:focus-within { border-color: transparent; /* TODO: rectangle on Safari */ outline: 2px solid var(--theme); } .input-container > input { width: 100%; border: none; margin: auto 0; } .input-container > input:focus-within { outline: none; } .input-addon { display: grid; border-radius: var(--rounded-xs) 0 0 var(--rounded-xs); background-color: var(--bg-lighter); color: var(--text-lighter); font-size: var(--fonts-xs); font-weight: var(--semi-bold); padding-inline: var(--s-2); place-items: center; white-space: nowrap; } .sub-nav__container { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-4); margin-block-end: var(--s-8); } .sub-nav__container__secondary { margin-block-end: var(--s-2); } .sub-nav__link__container { display: flex; max-width: 110px; flex: 1; flex-direction: column; align-items: center; color: var(--text); gap: var(--s-1-5); } .sub-nav__link__container.active { color: var(--theme-secondary); } .sub-nav__link { width: 100%; padding: var(--s-1) var(--s-4); border-radius: var(--rounded); background-color: var(--bg-lightest); cursor: pointer; font-size: var(--fonts-xs); text-align: center; white-space: nowrap; } .sub-nav__link__secondary { font-size: var(--fonts-xxs); padding: var(--s-0-5) var(--s-2); background-color: var(--bg-lighter-solid); } .sub-nav__container.compact .sub-nav__link { padding: var(--s-1) var(--s-2); } .sub-nav__border-guy { width: 78%; height: 3px; border-radius: var(--rounded); background-color: var(--bg-lightest); visibility: hidden; } .sub-nav__border-guy__secondary { height: 2.5px; background-color: var(--bg-lighter-solid); } .sub-nav__link__container.active > .sub-nav__border-guy { visibility: initial; } .tab__buttons-container { display: flex; flex-direction: row; border-bottom: 2px solid var(--border); } .tab__button { background-color: transparent; border: none; font-size: var(--fonts-xs); border-radius: 0; border-bottom: 2px solid transparent; color: var(--text-lighter); white-space: nowrap; flex: 1; } .divider-tab__buttons-container { text-align: center; display: flex; align-items: center; } .tab__buttons-container__sticky { position: sticky; top: 47px; z-index: 1; background-color: var(--bg); } .divider-tab__buttons-container::before, .divider-tab__buttons-container::after { flex: 1; content: ""; padding: 2px; background-color: var(--theme-transparent); margin: 5px; border-radius: var(--rounded); } .divider-tab__button { background-color: transparent; font-size: var(--fonts-xxs); font-weight: var(--semi-bold); text-transform: uppercase; color: var(--text-lighter); border: 0; padding: 0; line-height: 17.36px; } .divider-tab__button[data-headlessui-state="selected"] { color: var(--theme); } .divider-tab__line-guy { background-color: var(--theme-transparent); border-radius: var(--rounded); height: 4px; width: 20.75px; margin: 5px; } .divider-tab__button:active { transform: initial; } .tab__button:active { transform: initial; } .tab__number { color: var(--theme); margin-inline-start: var(--s-2); } .divider-tab__button:focus-visible, .tab__button:focus-visible { color: var(--theme) !important; outline: none; } .tab__button[data-headlessui-state="selected"] { border-color: var(--theme); color: var(--text); } .popover-content { z-index: 1; max-width: 20rem; padding: var(--s-2); border: 2px solid var(--border); border-radius: var(--rounded); background-color: var(--bg-darker); font-size: var(--fonts-sm); font-weight: var(--semi-bold); white-space: pre-wrap; } .info-popover__trigger { border: 2px solid var(--bg-lightest); border-radius: 100%; background-color: transparent; color: var(--text); font-size: var(--fonts-md); padding: var(--s-0-5); width: 28px; height: 28px; } .info-popover__trigger__tiny { width: 20px; height: 20px; font-size: var(--fonts-xs); } .articles-list { display: flex; flex-direction: column; padding: 0; gap: var(--s-6); list-style: none; } .articles-list__title { color: var(--theme); font-size: var(--fonts-md); } .combobox-wrapper { position: relative; } .combobox-input { width: var(--input-width, 12rem); } .combobox-input.fullWidth { width: 100%; } .combobox-options { position: absolute; z-index: 2; width: var(--input-width, 12rem); border-radius: var(--rounded); margin-top: var(--s-2); background-color: var(--bg-darker); color: var(--text); font-size: var(--fonts-sm); padding-block: var(--s-3); padding-inline: 0; } .combobox-options.fullWidth { width: 100%; } .combobox-options.empty { padding-block: var(--s-1-5); } .combobox-item { display: flex; align-items: center; padding: var(--s-1) var(--s-3); gap: var(--s-2); list-style: none; } .combobox-item-image { min-width: 24px; } .combobox-item-label { white-space: nowrap; text-overflow: ellipsis; overflow-x: hidden; } .combobox-no-matches { display: flex; align-items: center; justify-content: center; color: var(--text-lighter); font-size: var(--fonts-xs); font-weight: var(--bold); gap: var(--s-1); } .combobox-emoji { color: var(--text); font-size: var(--fonts-lg); } .combobox-item.active { background-color: var(--theme-transparent); } .combobox-username { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .article > p { padding-block: var(--s-2-5); } .calendar__event__tags { display: flex; max-width: var(--tags-max-width, 18rem); flex-wrap: wrap; padding: 0; font-size: var(--fonts-xxs); font-weight: var(--semi-bold); gap: var(--s-1); list-style: none; } .calendar__event__tags > li { display: flex; align-items: center; border-radius: var(--rounded); padding-inline: var(--s-1-5); min-height: 20px; } .calendar__event__tag { color: var(--black-text); } .calendar__event__badge-tag { color: var(--badge-text); } .calendar__event__ranked-tag { background-color: var(--theme-info-transparent); color: var(--theme-info); } .calendar__event__unranked-tag { background-color: var(--theme-success-transparent); color: var(--theme-success); } .calendar__event__tag-delete-button { margin-left: auto; } .calendar__event__tag-badges { display: flex; margin-inline-start: var(--s-1); } .calendar__event__tag-delete-button > svg { width: 0.85rem !important; color: var(--black-text); margin-inline: var(--s-1) 0 !important; } .alert { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; border-radius: var(--rounded); background-color: var(--theme-info-transparent); color: var(--text); font-size: var(--fonts-sm); font-weight: var(--semi-bold); gap: var(--s-2); line-height: 1.4; margin-inline: auto; padding-block: var(--s-1-5); padding-inline: var(--s-3) var(--s-4); } .alert.tiny { font-size: var(--fonts-xs); } .alert.warning { background-color: var(--theme-warning-transparent); } .alert.error { background-color: var(--theme-error-transparent); } .alert.success { background-color: var(--theme-success-transparent); } .avatar { border-radius: 50%; background-color: var(--bg-lightest); } /* Hack to deal with Safari bug when the image is loading. See: https://stackoverflow.com/a/73466877 */ @media not all and (min-resolution: 0.001dpcm) { img[loading="lazy"] { clip-path: inset(0.5px); } } .alert > svg { height: 1.75rem; fill: var(--theme-info); } .alert.tiny > svg { height: 1.25rem; } .alert.warning > svg { fill: var(--theme-warning); } .alert.error > svg { fill: var(--theme-error); } .alert.success > svg { fill: var(--theme-success); } .form-errors { font-size: var(--fonts-sm); } .form-errors > h4 { color: var(--theme-error); } .section > div { padding: var(--s-2); border-radius: var(--rounded); background-color: var(--bg-darker); } .section > h2 { color: var(--text-lighter); font-size: var(--fonts-md); } .stack { display: flex; flex-direction: column; } .stack.xxxs { gap: var(--s-0-5); } .stack.xxs { gap: var(--s-1); } .stack.xs { gap: var(--s-1-5); } .stack.sm { gap: var(--s-2); } .stack.sm-column { column-gap: var(--s-2); } .stack.sm-plus { gap: var(--s-3); } .stack.md { gap: var(--s-4); } .stack.md-plus { gap: var(--s-6); } .stack.lg { gap: var(--s-8); } .stack.xs-row { row-gap: var(--s-1-5); } .stack.lg-row { row-gap: var(--s-8); } .stack.xl { gap: var(--s-12); } .stack.xxl { gap: var(--s-16); } .stack.horizontal { flex-direction: row; } .flex-same-size { flex: 1 1 0px; } .lock-scroll { overflow: hidden; height: unset; } .small-icon { width: 1.2rem; height: 1.2rem; } /* https://stackoverflow.com/questions/50917016/make-a-hidden-field-required/50917245#comment117565184_50917245 */ .hidden-input-with-validation { position: absolute; width: 0; height: 0; border: none; opacity: 0; pointer-events: none; } .label__container { display: flex; align-items: flex-end; gap: var(--s-2); margin-block-end: var(--label-margin); } .label__container > label { margin: 0; } .label__value { color: var(--text-lighter); font-size: var(--fonts-xxs); margin-block-start: -5px; } .label__value.warning { color: var(--theme-warning); } .label__value.error { color: var(--theme-error); } .error-message { display: block; color: var(--theme-error); font-size: var(--fonts-xs); margin-block-start: var(--label-margin); } .info-message { display: block; color: var(--text-lighter); font-size: var(--fonts-xs); margin-block-start: var(--label-margin); } .builds-container { display: grid; justify-content: center; gap: var(--s-4) var(--s-3); grid-template-columns: repeat(auto-fit, 240px); } .builds-buttons { display: flex; justify-content: space-between; } .builds-buttons__link { display: flex; flex-direction: column; gap: var(--s-2); } @media screen and (min-width: 480px) { .builds-buttons__link { flex-direction: row; } } .build__filter { display: flex; flex-direction: column; padding: var(--s-2-5); border-radius: var(--rounded); background-color: var(--bg-lighter); gap: var(--s-2); } .build__filter__mode { gap: var(--s-6); } .build__filter__date { display: flex; align-items: center; } @media screen and (min-width: 750px) { .build__filter { flex-direction: row; } } .build__filter__ability { display: flex; width: 32px; align-items: center; } .build__filter__ap-select { width: 75px; } .build__filter__date-select { width: 275px; } .build { position: relative; display: flex; flex-direction: column; padding: var(--s-3); border-radius: var(--rounded); background-color: var(--bg-lighter); gap: var(--s-3); } .build__private { background-color: var(--bg-lighter-transparent); } .build__private-text { display: flex; justify-content: center; font-weight: var(--semi-bold); gap: var(--s-1); } .build__private-icon { width: 16px; margin-block-end: var(--s-1); stroke-width: 2px; } .build__title { overflow: hidden; height: 2.5rem; font-size: var(--fonts-sm); line-height: 1.25; word-wrap: break-all; } .build__top-row { display: flex; justify-content: space-between; } .build__date-author-row { display: flex; font-size: var(--fonts-xxs); gap: var(--s-1); } .build__date-author-row__owner { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .build__modes { position: absolute; right: 0; display: flex; min-width: max-content; margin-top: -21px; gap: var(--s-1); } .build__weapon { position: relative; padding: var(--s-0-5); border-radius: 50%; background-color: var(--bg-darker-very-transparent); } .build__top500 { position: absolute; top: -14px; right: 8px; } .build__weapon-text { padding-left: var(--s-1); color: var(--text-lighter); font-size: var(--fonts-xxs); font-weight: var(--semi-bold); } .build__weapons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-1); } .build__gear-abilities { display: grid; gap: var(--s-2) var(--s-1); grid-template-columns: repeat(5, max-content); place-items: center; } .build__gear-abilities__no-gear { grid-template-columns: repeat(4, max-content); margin: 0 auto; margin-top: 10px; margin-bottom: 1rem; row-gap: 28px; } .build__gear { border-radius: 50%; background-color: var(--bg-darker-very-transparent); overflow: visible; } .build__ability { width: var(--ability-size); height: var(--ability-size); padding: 0; border: 2px solid var(--theme-transparent); border-radius: 50%; border-right: 0; border-bottom: 0; background: var(--bg-ability); background-size: 100%; box-shadow: 0 0 0 1px var(--bg-ability); transform: scale(1); transition: all 0.1s ease; user-select: none; } .build__ability.is-drag-target { background: var(--abilities-button-bg); transform: scale(1.15); } .build__ability.drag-started:not(.drop-allowed) { filter: grayscale(1); opacity: 0.3; pointer-events: none; } .build__ability.readonly, .build__ability.readonly:active { cursor: default; transform: none; } .build__bottom-row { display: flex; height: 100%; align-items: flex-end; justify-content: center; gap: var(--s-4); } .build__icon { width: 1.2rem; height: 1.2rem; } .build__small-text { font-size: var(--fonts-xxs) !important; } .ability-selector__container { display: flex; width: 100%; flex-direction: column; justify-content: center; gap: var(--s-3); } .ability-selector__slots { display: grid; margin: 0 auto; gap: var(--s-2); grid-template-columns: repeat(4, max-content); place-items: center; } .ability-selector__ability-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-1); } .ability-selector__ability-button { padding: var(--s-0-5); border-color: var(--abilities-button-bg); border-radius: 50%; background-color: var(--abilities-button-bg); } .ability-selector__ability-button.is-dragging { box-shadow: 0 0 100px inset rgb(255 255 255 / 25%); } .colors__grid { display: grid; width: 100%; justify-content: center; font-size: var(--fonts-sm); font-weight: var(--bold); grid-template-columns: 3fr 2fr 1fr; row-gap: var(--s-3); } .playwire__img { display: block; width: 200px; margin-right: auto; margin-left: auto; } .playwire__text { font-size: var(--fonts-sm); text-align: center; } .top-leaderboard { min-height: 110px; margin-block-start: var(--leaderboard-top-spacing); } .youtube__container { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; } .youtube__iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .divider { display: flex; width: 100%; align-items: center; color: var(--theme); font-size: var(--fonts-lg); text-align: center; } .divider::before, .divider::after { flex: 1; border-bottom: 2px solid var(--theme-transparent); content: ""; } .divider:not(:empty)::before { margin-right: 0.25em; } .divider:not(:empty)::after { margin-left: 0.25em; } .menu-container { position: relative; } .menu__items-container { position: absolute; top: 32px; border-radius: var(--rounded); background-color: var(--bg-darker); border: var(--border-style); z-index: 10; display: flex; flex-direction: column; overflow: hidden; align-items: flex-start; } .menu-container__scrolling { max-height: 300px; overflow-y: auto; scrollbar-color: rgb(83 65 91) transparent; scrollbar-width: thin; scrollbar-gutter: stable; } .menu__item { display: flex; font-size: var(--fonts-xs); color: var(--text); white-space: nowrap; gap: var(--s-2); border-radius: var(--rounded-xs); padding: var(--s-1-5) var(--s-2-5); background-color: var(--bg-darker); width: 100%; border: 0; justify-content: flex-start; } .menu__item:first-child { border-radius: 14.5px 14.5px var(--rounded-xs) var(--rounded-xs); } .menu__item:last-child { border-radius: var(--rounded-xs) var(--rounded-xs) 14.5px 14.5px; } .menu__item__active { background-color: var(--theme-very-transparent); } .menu__item__disabled { color: var(--text-lighter); cursor: not-allowed; } .menu__item__selected { background-color: var(--theme-transparent); font-weight: var(--extra-bold); } .menu__item__icon { width: 18px; } .discord-icon { width: 1rem; display: inline; fill: #7289da; } .youtube-icon { width: 1rem; display: inline; fill: #f00; } .art__dialog__image-container { width: 100vw; height: 90vh; display: flex; justify-content: center; align-items: center; background-color: transparent; padding: 0; overflow: visible; flex-direction: column; } .art__thumbnail { cursor: pointer; transition: all 0.2s ease; } .art__thumbnail:hover { scale: 1.025; } .art__dialog__image-container:focus-visible { outline: none; } .art__dialog__tag { background-color: #fff; border-radius: var(--rounded); color: #000; font-size: var(--fonts-xxs); padding-inline: var(--s-1); margin-block: var(--s-1) var(--s-0-5); } .art__dialog__tag__user { background-color: var(--theme); } .art__dialog__description { font-size: var(--fonts-sm); text-align: center; color: #fff; } .art__dialog__image-container img { max-width: 100%; max-height: 100%; object-fit: contain; } .art__comms-header { font-weight: var(--bold); color: var(--theme-secondary); font-size: var(--fonts-sm); } .art__delete-tag-button { margin-block-start: -5px; margin-inline-start: 1px; } .art__creation-mode-switcher-container { height: 20px; } .art__tags-container { display: flex; gap: var(--s-0-5) var(--s-2); justify-content: center; flex-wrap: wrap; margin-block-start: var(--s-0-5); } html[dir="rtl"] .fix-rtl { transform: rotate(180deg); } .pagination__dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background-color: var(--theme-transparent); transition: all 0.2s ease; display: none; } .pagination__dot__active { background-color: var(--theme); } .pagination__page-count { font-size: var(--fonts-sm); font-weight: var(--bold); color: var(--theme); } @media screen and (min-width: 640px) { .pagination__dot { display: initial; } .pagination__page-count { display: none; } } .tier__container { display: grid; } .tier__img { grid-column: 1; grid-row: 1; } .chart__container { height: var(--chart-height, 175px); width: var(--chart-width); background-color: var(--chart-bg, var(--bg-lighter)); border-radius: var(--rounded); } .chart__tooltip { border: 1.75px solid var(--border); border-radius: var(--rounded); background-color: var(--bg-darker); padding: var(--s-1) var(--s-2); font-weight: var(--semi-bold); font-size: var(--fonts-sm); display: flex; flex-direction: column; gap: var(--s-1); } .chart__tooltip__value { margin-inline-start: auto; min-width: 40px; } .chart__dot { background-color: var(--dot-color); border-radius: 100%; width: 12px; height: 12px; } .chart__dot__focused { outline: 3px solid var(--dot-color-outline); } .chat__container { display: flex; flex-direction: column; } .chat__messages { padding: var(--s-2-5) 0 0 0; display: flex; flex-direction: column; gap: var(--s-2); height: 310px; overflow-y: auto; } .chat__message { list-style: none; display: flex; gap: var(--s-2-5); } .chat__message__user { font-weight: var(--semi-bold); font-size: var(--fonts-sm); color: var(--chat-user-color); max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat__message__time { font-size: var(--fonts-xxs); color: var(--text-lighter); margin-block-start: 3px; } .chat__input-container { margin-top: auto; position: relative; --input-width: 100%; } .chat__message__contents { font-size: var(--fonts-sm); word-break: break-word; } .chat__message__contents.pending { opacity: 0.7; } .chat__room-button { background-color: var(--bg-light); color: var(--text-lighter); border-radius: var(--rounded) var(--rounded) 0 0; font-size: var(--fonts-xs); padding: var(--s-1) var(--s-1); border-color: var(--bg-light-variation); } .chat__room-button.current { background-color: var(--bg-lighter); color: var(--text); } .chat__room-button__unseen { color: var(--theme-secondary); text-shadow: var(--fonts-xxxs); margin-inline-start: var(--s-1); width: 25px; text-align: left; } .chat__bottom-row { display: flex; justify-content: space-between; align-items: flex-start; margin-block-start: var(--s-2); height: 20px; } .chat__unseen-messages { position: absolute; font-size: var(--fonts-xxs); font-weight: var(--bold); border-radius: var(--rounded-sm); background-color: var(--bg-lightest-solid); border: none; color: var(--text); bottom: 60px; right: 50%; left: 50%; transform: translate(-50%, -50%); height: 25px; width: max-content; } .chat__unseen-messages:active { transform: translate(-50%, -50%); } .winner__container { height: 125px; width: 125px; border-radius: 100%; background-color: var(--bg-lighter); overflow: hidden; position: relative; } .winner__container.small { height: 41.6667px; width: 41.6667px; } .winner__img-container { position: absolute; top: var(--winner-top, 5px); left: var(--winner-left, 25px); } .winner__img { overflow: visible; max-width: initial; } .map-pool-picker { --map-width: 90px; --map-height: 50.63px; } .map-pool-picker__slot { font-size: var(--fonts-xs); display: grid; place-items: center; color: var(--text-lighter); border-radius: var(--rounded-sm); font-weight: var(--bold); width: 24px; height: 24px; border: 2px dotted var(--bg-lightest); } .map-pool-picker__slot__icon { color: var(--theme-success); width: 16px; } .map-pool-picker__slot__picked { border-style: solid; } .map-pool-picker__map-img { border-radius: var(--rounded-sm); } .map-pool-picker__map-button { background-image: var(--map-image-url); background-size: contain; height: var(--map-height); width: var(--map-width); border: none; background-color: transparent; transition: filter, opacity 0.2s; } @keyframes wiggle { 0% { transform: rotate(0deg); } 25% { transform: rotate(5deg); } 75% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } } .map-pool-picker__map-button__wiggle { animation: wiggle 0.25s infinite; animation-iteration-count: 1; } .map-pool-picker__map-button:active { transform: none; } .map-pool-picker__map-button__greyed-out { filter: grayscale(100%) !important; opacity: 0.4 !important; } .map-pool-picker__map-button__icon { position: absolute; top: 2px; fill: var(--theme-success); width: 48px; cursor: pointer; } .map-pool-picker__map-button__icon__error { fill: var(--theme-error); } .map-pool-picker__map-button__text { position: absolute; top: 14px; text-transform: uppercase; font-weight: var(--bold); cursor: not-allowed; } .map-pool-picker__map-button__label { font-size: var(--fonts-xxxxs); color: var(--text-lighter); font-weight: var(--semi-bold); } .map-pool-picker__map-button__number { position: absolute; background-color: var(--theme); border-radius: 100%; width: 18px; height: 18px; display: grid; place-items: center; color: var(--button-text); font-size: var(--fonts-xxsm); font-weight: var(--semi-bold); top: -5px; left: 0; } .map-pool-picker__map-button__from { position: absolute; bottom: -15px; font-size: var(--fonts-xxs); font-weight: var(--bold); } .map-pool-picker__divider::before, .map-pool-picker__divider::after { border-bottom: 2px dotted var(--bg-lightest); } .map-pool-picker__divider { font-size: var(--fonts-xs); font-weight: var(--semi-bold); text-transform: uppercase; display: flex; gap: var(--s-2); } #nprogress .bar { margin-top: 3rem !important; background: var(--theme) !important; } #nprogress .spinner { display: none !important; } #nprogress .peg { display: none !important; } .badge-display__badges { display: flex; min-width: 20rem; max-width: 24rem; align-items: center; padding: var(--s-2); border-radius: var(--rounded); background-color: var(--bg-badge); margin-inline: auto; } .badge-display__small-badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; cursor: pointer; gap: var(--s-3); } .badge-display__badge-explanation { color: var(--text-lighter); font-size: var(--fonts-xs); display: flex; align-items: center; justify-content: center; gap: var(--s-2); } .badge-display__small-badge-container { position: relative; } .badge-display__small-badge-count { position: absolute; top: 0; right: 0; margin-top: -8px; margin-right: auto; margin-left: auto; color: var(--theme-vibrant); font-size: var(--fonts-xxxs); font-weight: var(--bold); } /* /app/styles/flags.css */ .twf { display: inline-block; width: 2.5rem; height: 2.5rem; vertical-align: -0.25em; } .twf-s { width: 1em; height: 1em; vertical-align: -0.1em; } .twf-af { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e6-1f1eb.svg"); } .twf-ax { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e6-1f1fd.svg"); } .twf-al { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e6-1f1f1.svg"); } .twf-dz { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e9-1f1ff.svg"); } .twf-as { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e6-1f1f8.svg"); } .twf-ad { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e6-1f1e9.svg"); } .twf-ao { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e6-1f1f4.svg"); } .twf-ai { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e6-1f1ee.svg"); } .twf-aq { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e6-1f1f6.svg"); } .twf-ag { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e6-1f1ec.svg"); } .twf-ar { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e6-1f1f7.svg"); } .twf-am { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e6-1f1f2.svg"); } .twf-aw { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e6-1f1fc.svg"); } .twf-au { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e6-1f1fa.svg"); } .twf-at { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e6-1f1f9.svg"); } .twf-az { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e6-1f1ff.svg"); } .twf-bs { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e7-1f1f8.svg"); } .twf-bh { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e7-1f1ed.svg"); } .twf-bd { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e7-1f1e9.svg"); } .twf-bb { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e7-1f1e7.svg"); } .twf-by { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e7-1f1fe.svg"); } .twf-be { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e7-1f1ea.svg"); } .twf-bz { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e7-1f1ff.svg"); } .twf-bj { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e7-1f1ef.svg"); } .twf-bm { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e7-1f1f2.svg"); } .twf-bt { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e7-1f1f9.svg"); } .twf-bo { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e7-1f1f4.svg"); } .twf-ba { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e7-1f1e6.svg"); } .twf-bw { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e7-1f1fc.svg"); } .twf-bv { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e7-1f1fb.svg"); } .twf-br { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e7-1f1f7.svg"); } .twf-io { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ee-1f1f4.svg"); } .twf-bn { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e7-1f1f3.svg"); } .twf-bg { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e7-1f1ec.svg"); } .twf-bf { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e7-1f1eb.svg"); } .twf-bi { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e7-1f1ee.svg"); } .twf-kh { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f0-1f1ed.svg"); } .twf-cm { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e8-1f1f2.svg"); } .twf-ca { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e8-1f1e6.svg"); } .twf-cv { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e8-1f1fb.svg"); } .twf-ky { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f0-1f1fe.svg"); } .twf-cf { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e8-1f1eb.svg"); } .twf-td { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f9-1f1e9.svg"); } .twf-cl { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e8-1f1f1.svg"); } .twf-cn { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e8-1f1f3.svg"); } .twf-cx { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e8-1f1fd.svg"); } .twf-cc { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e8-1f1e8.svg"); } .twf-co { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e8-1f1f4.svg"); } .twf-km { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f0-1f1f2.svg"); } .twf-cg { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e8-1f1ec.svg"); } .twf-cd { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e8-1f1e9.svg"); } .twf-ck { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e8-1f1f0.svg"); } .twf-cr { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e8-1f1f7.svg"); } .twf-ci { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e8-1f1ee.svg"); } .twf-hr { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ed-1f1f7.svg"); } .twf-cu { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e8-1f1fa.svg"); } .twf-cy { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e8-1f1fe.svg"); } .twf-cz { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e8-1f1ff.svg"); } .twf-dk { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e9-1f1f0.svg"); } .twf-dj { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e9-1f1ef.svg"); } .twf-dm { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e9-1f1f2.svg"); } .twf-do { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e9-1f1f4.svg"); } .twf-ec { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ea-1f1e8.svg"); } .twf-eg { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ea-1f1ec.svg"); } .twf-sv { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f8-1f1fb.svg"); } .twf-gq { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ec-1f1f6.svg"); } .twf-er { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ea-1f1f7.svg"); } .twf-ee { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ea-1f1ea.svg"); } .twf-et { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ea-1f1f9.svg"); } .twf-fk { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1eb-1f1f0.svg"); } .twf-fo { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1eb-1f1f4.svg"); } .twf-fj { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1eb-1f1ef.svg"); } .twf-fi { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1eb-1f1ee.svg"); } .twf-fr { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1eb-1f1f7.svg"); } .twf-gf { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ec-1f1eb.svg"); } .twf-pf { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f5-1f1eb.svg"); } .twf-tf { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f9-1f1eb.svg"); } .twf-ga { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ec-1f1e6.svg"); } .twf-gm { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ec-1f1f2.svg"); } .twf-ge { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ec-1f1ea.svg"); } .twf-de { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e9-1f1ea.svg"); } .twf-gh { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ec-1f1ed.svg"); } .twf-gi { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ec-1f1ee.svg"); } .twf-gr { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ec-1f1f7.svg"); } .twf-gl { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ec-1f1f1.svg"); } .twf-gd { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ec-1f1e9.svg"); } .twf-gp { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ec-1f1f5.svg"); } .twf-gu { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ec-1f1fa.svg"); } .twf-gt { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ec-1f1f9.svg"); } .twf-gg { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ec-1f1ec.svg"); } .twf-gn { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ec-1f1f3.svg"); } .twf-gw { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ec-1f1fc.svg"); } .twf-gy { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ec-1f1fe.svg"); } .twf-ht { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ed-1f1f9.svg"); } .twf-hm { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ed-1f1f2.svg"); } .twf-va { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1fb-1f1e6.svg"); } .twf-hn { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ed-1f1f3.svg"); } .twf-hk { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ed-1f1f0.svg"); } .twf-hu { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ed-1f1fa.svg"); } .twf-is { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ee-1f1f8.svg"); } .twf-in { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ee-1f1f3.svg"); } .twf-id { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ee-1f1e9.svg"); } .twf-ir { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ee-1f1f7.svg"); } .twf-iq { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ee-1f1f6.svg"); } .twf-ie { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ee-1f1ea.svg"); } .twf-im { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ee-1f1f2.svg"); } .twf-il { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ee-1f1f1.svg"); } .twf-it { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ee-1f1f9.svg"); } .twf-jm { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ef-1f1f2.svg"); } .twf-jp { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ef-1f1f5.svg"); } .twf-je { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ef-1f1ea.svg"); } .twf-jo { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ef-1f1f4.svg"); } .twf-kz { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f0-1f1ff.svg"); } .twf-ke { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f0-1f1ea.svg"); } .twf-ki { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f0-1f1ee.svg"); } .twf-kp { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f0-1f1f5.svg"); } .twf-kr { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f0-1f1f7.svg"); } .twf-kw { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f0-1f1fc.svg"); } .twf-kg { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f0-1f1ec.svg"); } .twf-la { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f1-1f1e6.svg"); } .twf-lv { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f1-1f1fb.svg"); } .twf-lb { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f1-1f1e7.svg"); } .twf-ls { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f1-1f1f8.svg"); } .twf-lr { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f1-1f1f7.svg"); } .twf-ly { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f1-1f1fe.svg"); } .twf-li { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f1-1f1ee.svg"); } .twf-lt { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f1-1f1f9.svg"); } .twf-lu { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f1-1f1fa.svg"); } .twf-mo { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f2-1f1f4.svg"); } .twf-mk { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f2-1f1f0.svg"); } .twf-mg { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f2-1f1ec.svg"); } .twf-mw { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f2-1f1fc.svg"); } .twf-my { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f2-1f1fe.svg"); } .twf-mv { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f2-1f1fb.svg"); } .twf-ml { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f2-1f1f1.svg"); } .twf-mt { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f2-1f1f9.svg"); } .twf-mh { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f2-1f1ed.svg"); } .twf-mq { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f2-1f1f6.svg"); } .twf-mr { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f2-1f1f7.svg"); } .twf-mu { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f2-1f1fa.svg"); } .twf-yt { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1fe-1f1f9.svg"); } .twf-mx { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f2-1f1fd.svg"); } .twf-fm { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1eb-1f1f2.svg"); } .twf-md { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f2-1f1e9.svg"); } .twf-mc { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f2-1f1e8.svg"); } .twf-mn { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f2-1f1f3.svg"); } .twf-ms { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f2-1f1f8.svg"); } .twf-ma { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f2-1f1e6.svg"); } .twf-mz { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f2-1f1ff.svg"); } .twf-mm { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f2-1f1f2.svg"); } .twf-na { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f3-1f1e6.svg"); } .twf-nr { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f3-1f1f7.svg"); } .twf-np { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f3-1f1f5.svg"); } .twf-nl { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f3-1f1f1.svg"); } .twf-an { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e6-1f1f3.svg"); } .twf-nc { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f3-1f1e8.svg"); } .twf-nz { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f3-1f1ff.svg"); } .twf-ni { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f3-1f1ee.svg"); } .twf-ne { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f3-1f1ea.svg"); } .twf-ng { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f3-1f1ec.svg"); } .twf-nu { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f3-1f1fa.svg"); } .twf-nf { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f3-1f1eb.svg"); } .twf-mp { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f2-1f1f5.svg"); } .twf-no { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f3-1f1f4.svg"); } .twf-om { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f4-1f1f2.svg"); } .twf-pk { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f5-1f1f0.svg"); } .twf-pw { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f5-1f1fc.svg"); } .twf-ps { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f5-1f1f8.svg"); } .twf-pa { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f5-1f1e6.svg"); } .twf-pg { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f5-1f1ec.svg"); } .twf-py { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f5-1f1fe.svg"); } .twf-pe { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f5-1f1ea.svg"); } .twf-ph { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f5-1f1ed.svg"); } .twf-pn { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f5-1f1f3.svg"); } .twf-pl { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f5-1f1f1.svg"); } .twf-pt { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f5-1f1f9.svg"); } .twf-pr { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f5-1f1f7.svg"); } .twf-qa { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f6-1f1e6.svg"); } .twf-re { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f7-1f1ea.svg"); } .twf-ro { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f7-1f1f4.svg"); } .twf-ru { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f7-1f1fa.svg"); } .twf-rw { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f7-1f1fc.svg"); } .twf-sh { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f8-1f1ed.svg"); } .twf-kn { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f0-1f1f3.svg"); } .twf-lc { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f1-1f1e8.svg"); } .twf-pm { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f5-1f1f2.svg"); } .twf-vc { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1fb-1f1e8.svg"); } .twf-ws { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1fc-1f1f8.svg"); } .twf-sm { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f8-1f1f2.svg"); } .twf-st { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f8-1f1f9.svg"); } .twf-sa { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f8-1f1e6.svg"); } .twf-sn { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f8-1f1f3.svg"); } .twf-cs { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e8-1f1f8.svg"); } .twf-sc { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f8-1f1e8.svg"); } .twf-sl { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f8-1f1f1.svg"); } .twf-sg { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f8-1f1ec.svg"); } .twf-sk { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f8-1f1f0.svg"); } .twf-si { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f8-1f1ee.svg"); } .twf-sb { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f8-1f1e7.svg"); } .twf-so { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f8-1f1f4.svg"); } .twf-za { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ff-1f1e6.svg"); } .twf-gs { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ec-1f1f8.svg"); } .twf-es { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ea-1f1f8.svg"); } .twf-lk { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f1-1f1f0.svg"); } .twf-sd { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f8-1f1e9.svg"); } .twf-sr { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f8-1f1f7.svg"); } .twf-sj { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f8-1f1ef.svg"); } .twf-sz { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f8-1f1ff.svg"); } .twf-se { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f8-1f1ea.svg"); } .twf-ch { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e8-1f1ed.svg"); } .twf-sy { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f8-1f1fe.svg"); } .twf-tw { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f9-1f1fc.svg"); } .twf-tj { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f9-1f1ef.svg"); } .twf-tz { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f9-1f1ff.svg"); } .twf-th { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f9-1f1ed.svg"); } .twf-tl { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f9-1f1f1.svg"); } .twf-tg { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f9-1f1ec.svg"); } .twf-tk { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f9-1f1f0.svg"); } .twf-to { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f9-1f1f4.svg"); } .twf-tt { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f9-1f1f9.svg"); } .twf-tn { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f9-1f1f3.svg"); } .twf-tr { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f9-1f1f7.svg"); } .twf-tm { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f9-1f1f2.svg"); } .twf-tc { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f9-1f1e8.svg"); } .twf-tv { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1f9-1f1fb.svg"); } .twf-ug { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1fa-1f1ec.svg"); } .twf-ua { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1fa-1f1e6.svg"); } .twf-ae { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1e6-1f1ea.svg"); } .twf-gb { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ec-1f1e7.svg"); } .twf-us { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1fa-1f1f8.svg"); } .twf-um { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1fa-1f1f2.svg"); } .twf-uy { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1fa-1f1fe.svg"); } .twf-uz { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1fa-1f1ff.svg"); } .twf-vu { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1fb-1f1fa.svg"); } .twf-ve { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1fb-1f1ea.svg"); } .twf-vn { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1fb-1f1f3.svg"); } .twf-vg { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1fb-1f1ec.svg"); } .twf-vi { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1fb-1f1ee.svg"); } .twf-wf { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1fc-1f1eb.svg"); } .twf-eh { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ea-1f1ed.svg"); } .twf-ye { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1fe-1f1ea.svg"); } .twf-zm { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ff-1f1f2.svg"); } .twf-zw { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f1ff-1f1fc.svg"); } .twf-gb-wls { background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f3f4-e0067-e0062-e0077-e006c-e0073-e007f.svg"); } /* /app/styles/layout.css */ .layout__container { display: flex; flex-direction: column; width: 100%; min-height: 100vh; } .layout__breadcrumb-container { display: flex; /** check if should use px or not */ height: 30px; align-items: center; gap: var(--s-2); } .layout__breadcrumb { overflow: hidden; max-width: 350px; color: var(--text); font-size: var(--fonts-xs); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .layout__breadcrumb__image { min-width: 24px; } .layout__breadcrumb.logo { overflow: initial; } .layout__breadcrumb-separator { font-size: 20px; opacity: 0.4; margin-inline-start: -1px; } .layout__item_size { --item-size: 1.9rem; } .layout__header { z-index: 501; display: flex; width: 100%; align-items: center; justify-content: space-between; border-bottom: 1.5px solid var(--border); -webkit-backdrop-filter: var(--backdrop-filter); backdrop-filter: var(--backdrop-filter); background-color: transparent; font-weight: bold; padding-block: var(--s-2); padding-inline: var(--s-4); position: sticky; top: 0; } .layout__avatar { width: var(--item-size); height: var(--item-size); color: transparent; } .layout__page-heading { display: flex; align-items: center; font-size: var(--fonts-md); font-weight: var(--bold); gap: var(--s-2-5); letter-spacing: 0.02rem; } .layout__header__right-container { display: flex; gap: var(--s-3); justify-self: flex-end; } .layout__header__button { width: var(--item-size); height: var(--item-size); padding: 0.25rem; border: 2px solid; border-color: var(--theme-transparent); border-radius: 50%; background-color: transparent; color: inherit; cursor: pointer; } .layout__header__button__icon { width: 1.15rem; } .main { width: 100%; max-width: 48rem; margin: 0 auto; padding-inline: var(--s-3); } .half-width { width: 100%; max-width: 24rem; margin: 0 auto; } .bigger { width: 100%; max-width: 72rem; margin: 0 auto; } .layout__main-container { display: flex; flex-direction: row; } .layout__main { padding-block: var(--s-4) var(--s-32); } .layout__log-in-button { display: flex; height: var(--item-size); align-items: center; justify-content: center; padding: 0.5rem; border: 2px solid; border-color: var(--theme-transparent); border-radius: var(--rounded); background-color: transparent; color: inherit; cursor: pointer; font-size: var(--fonts-xs); font-weight: var(--bold); gap: var(--s-2); text-decoration: none; } .layout__log-in-button > svg { width: 1rem; } .layout__log-in-button:active { transform: translateY(1px); } .layout__user-popover { display: flex; flex-direction: column; padding: var(--s-2); border-radius: var(--rounded); background-color: var(--bg-darker); gap: var(--s-2); } .layout__user-popover > button:focus { outline: 2px solid var(--theme); } .layout__footer { display: flex; flex-direction: column; padding: var(--s-2-5); background-color: var(--bg-lighter); gap: var(--s-6); margin-block-start: auto; padding-block-end: var(--s-32); } .layout__footer__link-list { display: flex; justify-content: space-evenly; font-size: var(--fonts-xxs); } .layout__footer__socials { display: flex; justify-content: center; gap: var(--s-2); } .layout__footer__social-link { display: flex; max-width: 10rem; height: 12rem; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: space-between; padding: var(--s-4); border-radius: var(--rounded); background-color: var(--theme-transparent); cursor: pointer; font-size: var(--fonts-lg); } .layout__footer__social-icon { height: 2.25rem; transition: transform 0.25s ease-in-out; } .layout__footer__social-link:hover > .layout__footer__social-icon { transform: translateY(-0.3rem); } .layout__footer__social-header { text-align: center; } .layout__footer__social-header > p { font-size: var(--fonts-xxs); } .layout__footer__patron-title { display: flex; align-items: flex-end; justify-content: center; font-size: var(--fonts-sm); font-weight: var(--semi-bold); gap: var(--s-2); } .layout__footer__patron-list { display: flex; max-width: 75vw; flex-wrap: wrap; justify-content: center; padding: 0; margin: 0 auto; font-size: var(--fonts-xs); gap: var(--s-1); list-style: none; margin-block-start: var(--s-2); } .layout__footer__patron-list__patron { max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } .layout__copyright-note { display: flex; flex-direction: column; color: var(--text-lighter); font-size: var(--fonts-xxs); text-align: center; } .layout__side-nav { background: black; display: flex; flex-direction: column; gap: var(--s-6); padding-block: var(--s-3); padding-inline: var(--s-4); min-width: fit-content; -webkit-backdrop-filter: var(--backdrop-filter); backdrop-filter: var(--backdrop-filter); background-color: transparent; overflow: hidden auto; direction: rtl; position: sticky; /* Top pixel count needs to be the same as nav height Max height is calculated using the viewport height minus the nav height This is unfortunately needed to avoid the sidebar from overflowing the viewport or navbar Without this, the sidebar would be cut off at the bottom or top or clip into it Will return if a better solution is found that doesnt require a hard coded value */ top: 47px; max-height: calc(100vh - 47px); scrollbar-color: rgb(83 65 91) transparent; scrollbar-width: thin; scrollbar-gutter: stable; } /* Works on literally every browser except Firefox Firefox scrollbar styling is above in .layout__side-nav */ .layout__side-nav::-webkit-scrollbar { width: 4px; } .layout__side-nav::-webkit-scrollbar-track { background: black; background-color: transparent; } .layout__side-nav::-webkit-scrollbar-corner { background: black; background-color: transparent; } .layout__side-nav::-webkit-scrollbar-thumb { background-color: rgb(83 65 91); border-radius: 4px; } .layout__side-nav::-webkit-scrollbar-thumb:hover { background-color: rgb(62 49 68); } .layout__side-nav-image-container { display: grid; width: 40px; height: 40px; border-radius: var(--rounded); background-color: var(--bg-lighter); place-items: center; transition: all 0.2s ease-out; } .layout__side-nav-image-container:hover { background-color: var(--theme-transparent); } @media screen and (display-mode: standalone) { .layout__header { align-items: flex-end; padding-top: env(safe-area-inset-top); } .layout__main { padding-block-start: calc( env(safe-area-inset-top) + var(--leaderboard-top-spacing) ); } } @media screen and (max-width: 950px) { .layout__side-nav { display: none; } } @media screen and (max-width: 640px) { .layout__header__right-container { display: none; } .layout__breadcrumb-container > a { max-width: 175px; } .layout__footer__socials { flex-direction: column; } .layout__footer__social-link { max-width: initial; flex-direction: row; } .layout__footer__social-header { display: flex; align-items: center; gap: var(--s-2); text-align: initial; } .layout__footer__social-header > p { margin-block-start: var(--s-1); } .layout__footer__social-icon { height: 1.75rem; } .layout__footer__social-link:hover > .layout__footer__social-icon { transform: translateX(-0.3rem); } } @media screen and (max-width: 480px) { .layout__breadcrumb-container { width: 100%; } } /* /app/styles/reset.css */ /* Modified from https://www.joshwcomeau.com/css/custom-css-reset/ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; overflow-wrap: break-word; } html, body { height: 100%; } body { -webkit-font-smoothing: antialiased; line-height: 1.5; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } /* /app/styles/utils.css */ .text-xl { font-size: var(--fonts-xl); } .text-lg { font-size: var(--fonts-lg); } .text-sm { font-size: var(--fonts-sm); } .text-md { font-size: var(--fonts-md); } .text-xs { font-size: var(--fonts-xs); } .text-xxs { font-size: var(--fonts-xxs); } .text-xxxs { font-size: var(--fonts-xxxs); } .text-center { text-align: center; } .text-main-forced { color: var(--text) !important; } .text-lighter { color: var(--text-lighter); } .text-lighter-important { color: var(--text-lighter) !important; } .text-theme-transparent { color: var(--theme-transparent); } .text-error { color: var(--theme-error); } .text-success { color: var(--theme-success); } .text-info { color: var(--theme-info); } .text-warning { color: var(--theme-warning); } .text-warning-important { color: var(--theme-warning) !important; } .text-theme { color: var(--theme); } .text-theme-secondary { color: var(--theme-secondary); } .text-uppercase { text-transform: uppercase; } .text-capitalize { text-transform: capitalize; } .underline { text-decoration: underline; } .fill-success { fill: var(--theme-success); } .fill-warning { fill: var(--theme-warning); } .fill-error { fill: var(--theme-error); } .bg-transparent-important { background-color: transparent !important; } .bg-darker-transparent { background-color: var(--bg-darker-transparent); } .bg-theme-transparent-important { background-color: var(--theme-transparent) !important; } .rounded { border-radius: var(--rounded); } .rounded-sm { border-radius: var(--rounded-sm); } .rounded-full { border-radius: 100%; } .font-body { font-weight: var(--body); } .font-semi-bold { font-weight: var(--semi-bold); } .font-bold { font-weight: var(--bold); } .h-full { height: 100%; } .w-full { width: 100%; } .w-full-important { width: 100% !important; } .w-4 { width: var(--s-4); } .w-6 { width: var(--s-6); } .w-24 { width: var(--s-24); } .w-max { width: max-content; } .w-min { width: min-content; } .px-4 { padding-inline: var(--s-4); } .py-4 { padding-block: var(--s-4); } .pl-0 { padding-inline-start: 0; } .pl-4 { padding-inline-start: var(--s-4); } .px-2 { padding-inline: var(--s-2); } .pb-4 { padding-block-end: var(--s-4); } .pt-8-forced { padding-block-start: var(--s-8) !important; } .m-auto-0 { margin: auto 0; } .mt-auto { margin-block-start: auto; } .mt-0 { margin-block-start: var(--s-0); } .-mt-1px { margin-block-start: -1px; } .mt-1 { margin-block-start: var(--s-1); } .mt-2 { margin-block-start: var(--s-2); } .mt-3 { margin-block-start: var(--s-3); } .mt-4 { margin-block-start: var(--s-4); } .mt-6 { margin-block-start: var(--s-6); } .mb-0 { margin-block-end: 0; } .mb-1 { margin-block-end: var(--s-1); } .mb-2 { margin-block-end: var(--s-2); } .mb-4 { margin-block-end: var(--s-4); } .ml-auto { margin-inline-start: auto; } .ml-1 { margin-inline-start: var(--s-1); } .ml-2 { margin-inline-start: var(--s-2); } .ml-2-5 { margin-inline-start: var(--s-2-5); } .ml-4 { margin-inline-start: var(--s-4); } .mr-auto { margin-inline-end: auto; } .mr-1 { margin-inline-end: var(--s-1); } .mr-2 { margin-inline-end: var(--s-2); } .mr-4 { margin-inline-end: var(--s-4); } .mx-auto { margin: 0 auto; } .mx-2 { margin-inline: var(--s-2); } .my-auto { margin-block: auto; } .my-1 { margin-block: var(--s-1); } .my-2 { margin-block: var(--s-2); } .my-3 { margin-block: var(--s-3); } .my-4 { margin-block: var(--s-4); } .m-0-auto { margin: 0 auto; } .hidden { display: none; } .invisible { visibility: hidden; } .whitespace-pre-wrap { white-space: pre-wrap; } .whitespace-nowrap { white-space: nowrap; } .overflow-x-auto { overflow-x: auto; } .relative { position: relative; } .italic { font-style: italic; } .flex { display: flex; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .justify-between { justify-content: space-between; } .justify-evenly { justify-content: space-evenly; } .justify-self-end { justify-self: flex-end; } .justify-self-center { justify-self: center; } .self-center { align-self: center; } .self-start { align-self: flex-start; } .justify-self-start { justify-self: flex-start; } .flex-wrap { flex-wrap: wrap; } .flex-wrap-reverse { flex-wrap: wrap-reverse; } .all-unset { all: unset; } .outline-theme:focus { outline: 2px solid var(--theme); } .focus-text-decoration:focus-visible { outline: none !important; text-decoration: underline; } .label-no-spacing { --label-margin: 0; } .mobile-hidden { display: none; } .desktop-hidden { display: inherit; } .cursor-pointer { cursor: pointer; } .line-height-tight { line-height: 1.3; } .line-height-very-tight { line-height: 1.1; } .opaque { opacity: 0.6; } .list-none { list-style: none; } @media screen and (min-width: 480px) { .mobile-hidden { display: inherit; } .desktop-hidden { display: none; } } /* /app/styles/vars.css */ html { --bg: #ebebf0; --bg-darker: #f8f8f8; --bg-lighter: rgb(250 250 250); --bg-lighter-solid: rgb(250 250 250); --bg-lightest: #fff; --bg-lightest-solid: #fff; --bg-light-variation: #fff; --bg-lighter-transparent: hsla(225deg 100% 88% / 50%); --bg-darker-very-transparent: rgb(187 208 219 / 29.5%); --bg-darker-transparent: hsla(202deg 90% 90% / 65%); --bg-ability: rgb(3 6 7); --bg-badge: #000; --bg-mode-active: rgb(213 42 190 / 23.4%); --abilities-button-bg: rgb(22 23 51); --badge-text: rgb(255 255 255 / 95%); --border: rgb(217 218 234); --border-style: 1.5px solid var(--border); --button-text: rgb(0 0 0 / 85%); --button-text-transparent: rgb(0 0 0 / 65%); --text: rgb(0 0 0 / 95%); --black-text: rgb(0 0 0 / 95%); --text-lighter: rgb(75 75 75 / 95%); --divider: #f5a2c8; --theme-error: rgb(199 13 6); --theme-error-transparent: rgba(199 13 6 / 55%); --theme-error-semi-transparent: rgba(199 13 6 / 70%); --theme-warning: #c9c900; --theme-warning-transparent: #c9c90052; --theme-success: #00a514; --theme-success-transparent: #00a51452; --theme-info: #1fb0d0; --theme-info-transparent: #1fb0d052; --theme-informative-yellow: #b09901; --theme-informative-red: #9d0404; --theme-informative-blue: #007f9c; --theme-informative-green: #017a0f; --theme: #f73e8b; --theme-transparent: #f3a0c386; --theme-very-transparent: #f3a0c341; --theme-vibrant: #f73e8b; --theme-semi-transparent: #ff99c477; --theme-secondary: rgb(63 58 255); --theme-secondary-transparent: rgb(63 58 255 / 55%); --backdrop-filter: blur(10px) brightness(95%); --rounded: 16px; --rounded-full: 200px; --rounded-xs: 8px; --rounded-sm: 10px; --fonts-xl: 1.5rem; --fonts-lg: 1.2rem; --fonts-md: 1rem; --fonts-sm: 0.92rem; --fonts-xsm: 0.85rem; --fonts-xs: 0.8rem; --fonts-xxsm: 0.75rem; --fonts-xxs: 0.7rem; --fonts-xxxs: 0.6rem; --fonts-xxxxs: 0.5rem; --extra-bold: 700; --bold: 600; --semi-bold: 500; --body: 400; --s-0-5: 0.125rem; --s-1: 0.25rem; --s-1-5: 0.375rem; --s-2: 0.5rem; --s-2-5: 0.625rem; --s-3: 0.75rem; --s-3-5: 0.875rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-7: 1.75rem; --s-8: 2rem; --s-9: 2.25rem; --s-10: 2.5rem; --s-11: 2.75rem; --s-12: 3rem; --s-14: 3.5rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem; --s-28: 7rem; --s-32: 8rem; --s-40: 10rem; --s-48: 12rem; --s-56: 14rem; --s-64: 16rem; --s-72: 18rem; --s-80: 20rem; --s-96: 2rem; --sparse: 0.4px; --label-margin: var(--s-1); --inactive-image-filter: grayscale(100%) brightness(30%); --leaderboard-top-spacing: var(--s-4); --sticky-top: 60px; } html.dark { --bg: #02011e; --bg-darker: #0a092d; --bg-lighter: rgb(169 138 255 / 10%); --bg-lighter-solid: #140f34; --bg-lighter-transparent: rgb(64 67 108 / 50%); --bg-light-variation: #a98aff30; --bg-lightest: rgb(169 138 255 / 30%); --bg-lightest-solid: #342b62; --bg-darker-very-transparent: hsla(237.3deg 42.3% 26.6% / 50%); --bg-darker-transparent: #0a092dce; --bg-ability: #010112; --bg-badge: #000; --bg-mode-active: var(--theme-transparent); --bg-input: #1b1a35; --abilities-button-bg: var(--bg-lighter); --border: rgb(255 255 255 / 10%); --button-text: rgb(0 0 0 / 85%); --button-text-transparent: rgb(0 0 0 / 65%); --text: #e1dede; --badge-text: var(--text); --black-text: rgb(0 0 0 / 95%); --text-lighter: rgb(215 214 255 / 80%); --divider: #ffbedb2f; --theme-error: rgb(219 70 65); --theme-error-transparent: rgba(219 70 65 / 55%); --theme-error-semi-transparent: rgba(199 13 6 / 70%); --theme-warning: #f5f587; --theme-success: #a3ffae; --theme-success-transparent: #a3ffae52; --theme-info: #87cddc; --theme-info-transparent: #87cddc52; --theme-informative-yellow: #ffed75; --theme-informative-red: #ff9494; --theme-informative-blue: #a7efff; --theme-informative-green: #a2ffad; --theme: #ffc6de; --theme-very-transparent: #ffc6de36; --theme-vibrant: #f391ba; --theme-semi-transparent: #ff99c477; --theme-transparent: #ffc6de52; --theme-secondary: rgb(239 229 83); --theme-secondary-transparent: rgb(239 229 83 / 55%); --backdrop-filter: blur(10px) brightness(75%); --inactive-image-filter: grayscale(100%) brightness(130%); } html.dark .light-mode-only { display: none; } html.light .dark-mode-only { display: none; } /* xs: "(min-width: 480px)", sm: "(min-width: 640px)", md: "(min-width: 768px)", lg: "(min-width: 1024px)", xl: "(min-width: 1280px)", */ /* /app/features/map-planner/plans.css */ @import url("https://fonts.googleapis.com/css2?family=Caveat+Brush&family=Source+Code+Pro&family=Source+Sans+Pro&family=Crimson+Pro&display=block"); /* Currently ignored by Biome, can be unignored when https://github.com/biomejs/biome/pull/3251 lands */ /* https://github.com/tldraw/tldraw/blob/2352985e949d14270fc89dc60144239c37c8ff91/packages/tldraw/src/hooks/useStylesheet.ts */ /* THIS CSS FILE IS GENERATED! DO NOT EDIT. OR EDIT. I'M A COMMENT NOT A COP */ /* This file is created by the copy-css-files.mjs script in packages/tldraw. */ /* It combines @tldraw/editor's editor.css and tldraw's ui.css */ /* @tldraw/editor */ .tl-container { width: 100%; height: 100%; font-size: 12px; /* Spacing */ --space-1: 2px; --space-2: 4px; --space-3: 8px; --space-4: 12px; --space-5: 16px; --space-6: 20px; --space-7: 28px; --space-8: 32px; --space-9: 64px; --space-10: 72px; /* Radius */ --radius-0: 2px; --radius-1: 4px; --radius-2: 6px; --radius-3: 9px; --radius-4: 11px; /* Canvas z-index */ --layer-canvas-hidden: -999999; --layer-canvas-background: 100; --layer-canvas-grid: 150; --layer-canvas-shapes: 300; --layer-canvas-overlays: 500; --layer-canvas-blocker: 10000; /* Canvas overlays z-index */ --layer-overlays-collaborator-scribble: 10; --layer-overlays-collaborator-brush: 20; --layer-overlays-collaborator-shape-indicator: 30; --layer-overlays-user-scribble: 40; --layer-overlays-user-brush: 50; --layer-overlays-user-indicator-selected: 60; --layer-overlays-user-indicator-hovered: 70; --layer-overlays-user-handles: 80; --layer-overlays-user-snapline: 90; --layer-overlays-selection-fg: 100; --layer-overlays-user-indicator-hint: 110; --layer-overlays-collaborator-cursor-hint: 120; --layer-overlays-collaborator-cursor: 130; /* Text editor z-index */ --layer-text-container: 1; --layer-text-content: 3; --layer-text-editor: 4; /* Error fallback z-index */ --layer-error-overlay: 1; --layer-error-canvas: 2; --layer-error-canvas-after: 3; --layer-error-content: 4; /* Misc */ --tl-zoom: 1; /* Cursor SVGs */ --tl-cursor-none: none; --tl-cursor-default: url("data:image/svg+xml,") 12 8, default; --tl-cursor-pointer: url("data:image/svg+xml,") 14 10, pointer; --tl-cursor-cross: url("data:image/svg+xml,") 16 16, crosshair; --tl-cursor-move: url("data:image/svg+xml,") 16 16, move; --tl-cursor-grab: url("data:image/svg+xml,") 16 16, grab; --tl-cursor-grabbing: url("data:image/svg+xml,") 16 16, grabbing; --tl-cursor-text: url("data:image/svg+xml,") 4 10, text; --tl-cursor-zoom-in: url("data:image/svg+xml,") 16 16, zoom-in; --tl-cursor-zoom-out: url("data:image/svg+xml,") 16 16, zoom-out; /* These cursor values get programmatically overridden */ /* They're just here to help your editor autocomplete */ --tl-cursor: var(--tl-cursor-default); --tl-cursor-resize-edge: ew-resize; --tl-cursor-resize-corner: nesw-resize; --tl-cursor-ew-resize: ew-resize; --tl-cursor-ns-resize: ns-resize; --tl-cursor-nesw-resize: nesw-resize; --tl-cursor-nwse-resize: nwse-resize; --tl-cursor-rotate: pointer; --tl-cursor-nwse-rotate: pointer; --tl-cursor-nesw-rotate: pointer; --tl-cursor-senw-rotate: pointer; --tl-cursor-swne-rotate: pointer; --tl-scale: calc(1 / var(--tl-zoom)); /* fonts */ --tl-font-draw: 'tldraw_draw', sans-serif; --tl-font-sans: 'tldraw_sans', sans-serif; --tl-font-serif: 'tldraw_serif', serif; --tl-font-mono: 'tldraw_mono', monospace; /* fext outline */ --a: calc(min(0.5, 1 / var(--tl-zoom)) * 2px); --b: calc(min(0.5, 1 / var(--tl-zoom)) * -2px); --tl-text-outline-reference: 0 var(--b) 0 var(--color-background), 0 var(--a) 0 var(--color-background), var(--b) var(--b) 0 var(--color-background), var(--a) var(--b) 0 var(--color-background), var(--a) var(--a) 0 var(--color-background), var(--b) var(--a) 0 var(--color-background); --tl-text-outline: var(--tl-text-outline-reference); /* own properties */ position: relative; inset: 0px; height: 100%; width: 100%; overflow: clip; color: var(--color-text); } .tl-theme__light { --color-accent: hsl(0, 76%, 60%); --color-background: hsl(210, 20%, 98%); --color-brush-fill: hsl(0, 0%, 56%, 10.2%); --color-brush-stroke: hsl(0, 0%, 56%, 25.1%); --color-grid: hsl(0, 0%, 43%); --color-low: hsl(204, 16%, 94%); --color-low-border: hsl(204, 16%, 92%); --color-culled: hsl(204, 14%, 93%); --color-muted-none: hsl(0, 0%, 0%, 0%); --color-muted-0: hsl(0, 0%, 0%, 2%); --color-muted-1: hsl(0, 0%, 0%, 10%); --color-muted-2: hsl(0, 0%, 0%, 4.3%); --color-hint: hsl(0, 0%, 0%, 5.5%); --color-overlay: hsl(0, 0%, 0%, 20%); --color-divider: hsl(0, 0%, 91%); --color-panel-contrast: hsl(0, 0%, 100%); --color-panel-overlay: hsl(0, 0%, 100%, 82%); --color-panel: hsl(0, 0%, 99%); --color-focus: hsl(214, 100%, 29%); --color-selected: hsl(214, 84%, 56%); --color-selected-contrast: hsl(0, 0%, 100%); --color-selection-fill: hsl(210, 100%, 56%, 24%); --color-selection-stroke: hsl(214, 84%, 56%); --color-text-0: hsl(0, 0%, 11%); --color-text-1: hsl(0, 0%, 18%); --color-text-3: hsl(220, 2%, 65%); --color-text-shadow: hsl(0, 0%, 100%); --color-primary: hsl(214, 84%, 56%); --color-success: hsl(123, 46%, 34%); --color-info: hsl(201, 98%, 41%); --color-warning: hsl(27, 98%, 47%); --color-error: hsl(0, 65%, 51%); --color-warn: hsl(0, 90%, 43%); --color-text: hsl(0, 0%, 0%); --color-laser: hsl(0, 100%, 50%); /* Shadows */ --shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 25%), 0px 1px 3px hsl(0, 0%, 0%, 9%); --shadow-2: 0px 0px 2px hsl(0, 0%, 0%, 16%), 0px 2px 3px hsl(0, 0%, 0%, 24%), 0px 2px 6px hsl(0, 0%, 0%, 0.1), inset 0px 0px 0px 1px var(--color-panel-contrast); --shadow-3: 0px 1px 2px hsl(0, 0%, 0%, 28%), 0px 2px 6px hsl(0, 0%, 0%, 14%), inset 0px 0px 0px 1px var(--color-panel-contrast); --shadow-4: 0px 0px 3px hsl(0, 0%, 0%, 19%), 0px 5px 4px hsl(0, 0%, 0%, 16%), 0px 2px 16px hsl(0, 0%, 0%, 6%), inset 0px 0px 0px 1px var(--color-panel-contrast); } .tl-theme__dark { --color-accent: hsl(0, 76%, 60%); --color-background: hsl(240, 5%, 6.5%); --color-brush-fill: hsl(0, 0%, 71%, 5.1%); --color-brush-stroke: hsl(0, 0%, 71%, 25.1%); --color-grid: hsl(0, 0%, 40%); --color-low: hsl(260, 4.5%, 10.5%); --color-low-border: hsl(207, 10%, 10%); --color-culled: hsl(210, 11%, 19%); --color-muted-none: hsl(0, 0%, 100%, 0%); --color-muted-0: hsl(0, 0%, 100%, 2%); --color-muted-1: hsl(0, 0%, 100%, 10%); --color-muted-2: hsl(0, 0%, 100%, 5%); --color-hint: hsl(0, 0%, 100%, 7%); --color-overlay: hsl(0, 0%, 0%, 50%); --color-divider: hsl(240, 9%, 22%); --color-panel-contrast: hsl(245, 12%, 23%); --color-panel: hsl(235, 6.8%, 13.5%); --color-panel-overlay: hsl(210, 10%, 24%, 82%); --color-focus: hsl(217, 76%, 80%); --color-selected: hsl(217, 89%, 61%); --color-selected-contrast: hsl(0, 0%, 100%); --color-selection-fill: hsl(209, 100%, 57%, 20%); --color-selection-stroke: hsl(214, 84%, 56%); --color-text-0: hsl(0, 9%, 94%); --color-text-1: hsl(0, 0%, 85%); --color-text-3: hsl(210, 6%, 45%); --color-text-shadow: hsl(210, 13%, 18%); --color-primary: hsl(214, 84%, 56%); --color-success: hsl(123, 38%, 57%); --color-info: hsl(199, 92%, 56%); --color-warning: hsl(36, 100%, 57%); --color-error: hsl(4, 90%, 58%); --color-warn: hsl(0, 81%, 66%); --color-text: hsl(210, 17%, 98%); --color-laser: hsl(0, 100%, 50%); /* Shadows */ --shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 16.1%), 0px 1px 3px hsl(0, 0%, 0%, 22%), inset 0px 0px 0px 1px var(--color-panel-contrast); --shadow-2: 0px 1px 3px hsl(0, 0%, 0%, 66.6%), 0px 2px 6px hsl(0, 0%, 0%, 33%), inset 0px 0px 0px 1px var(--color-panel-contrast); --shadow-3: 0px 1px 3px hsl(0, 0%, 0%, 50%), 0px 2px 12px hsl(0, 0%, 0%, 50%), inset 0px 0px 0px 1px var(--color-panel-contrast); } .tl-counter-scaled { transform: scale(var(--tl-scale)); transform-origin: top left; width: calc(100% * var(--tl-zoom)); height: calc(100% * var(--tl-zoom)); } .tl-container, .tl-container * { -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; scrollbar-highlight-color: transparent; -webkit-user-select: none; user-select: none; box-sizing: border-box; outline: none; } .tl-container a { -webkit-touch-callout: initial; } .tl-container__focused { outline: 1px solid var(--color-low); } input, *[contenteditable], *[contenteditable] * { -webkit-user-select: text; } /* -------------------------------------------------- */ /* Canvas */ /* -------------------------------------------------- */ .tl-canvas { position: absolute; inset: 0px; height: 100%; width: 100%; color: var(--color-text); cursor: var(--tl-cursor); overflow: clip; content-visibility: auto; touch-action: none; contain: strict; } .tl-shapes { position: relative; z-index: var(--layer-canvas-shapes); } .tl-overlays { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; contain: strict; pointer-events: none; z-index: var(--layer-canvas-overlays); } .tl-overlays__item { position: absolute; top: 0px; left: 0px; overflow: visible; pointer-events: none; transform-origin: top left; } .tl-svg-context { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; } /* ------------------- Background ------------------- */ .tl-background__wrapper { z-index: var(--layer-canvas-background); position: absolute; inset: 0px; height: 100%; width: 100%; } .tl-background { background-color: var(--color-background); width: 100%; height: 100%; } /* --------------------- Grid Layer --------------------- */ .tl-grid { position: absolute; inset: 0px; width: 100%; height: 100%; touch-action: none; pointer-events: none; z-index: var(--layer-canvas-grid); contain: strict; } .tl-grid-dot { fill: var(--color-grid); } /* --------------------- Layers --------------------- */ .tl-html-layer { position: absolute; top: 0px; left: 0px; width: 1px; height: 1px; contain: layout style size; } /* ---------------------- Brush --------------------- */ .tl-brush { stroke-width: calc(var(--tl-scale) * 1px); contain: size layout; } .tl-brush__default { stroke: var(--color-brush-stroke); fill: var(--color-brush-fill); } /* -------------------- Scribble -------------------- */ .tl-scribble { stroke-linejoin: round; stroke-linecap: round; pointer-events: none; contain: size layout; } /* ---------------------- Shape --------------------- */ .tl-shape { position: absolute; pointer-events: none; overflow: visible; transform-origin: top left; contain: size layout; } /* ---------------- Shape Containers ---------------- */ .tl-svg-container { position: absolute; inset: 0px; height: 100%; width: 100%; pointer-events: none; stroke-linecap: round; stroke-linejoin: round; transform-origin: top left; overflow: visible; } .tl-html-container { position: absolute; inset: 0px; height: 100%; width: 100%; pointer-events: none; stroke-linecap: round; stroke-linejoin: round; /* content-visibility: auto; */ transform-origin: top left; color: inherit; } /* --------------- Overlay Stack --------------- */ /* back of the stack, behind user's stuff */ .tl-collaborator__scribble { z-index: var(--layer-overlays-collaborator-scribble); } .tl-collaborator__brush { z-index: var(--layer-overlays-collaborator-brush); } .tl-collaborator__shape-indicator { z-index: var(--layer-overlays-collaborator-shape-indicator); } .tl-user-scribble { z-index: var(--layer-overlays-user-scribble); } .tl-user-brush { z-index: var(--layer-overlays-user-brush); } .tl-user-indicator__selected { z-index: var(--layer-overlays-user-indicator-selected); } .tl-user-indicator__hovered { z-index: var(--layer-overlays-user-indicator-hovered); } .tl-user-handles { z-index: var(--layer-overlays-user-handles); } .tl-user-snapline { z-index: var(--layer-overlays-user-snapline); } .tl-selection__fg { pointer-events: none; z-index: var(--layer-overlays-selection-fg); } .tl-user-indicator__hint { z-index: var(--layer-overlays-user-indicator-hint); stroke-width: calc(2.5px * var(--tl-scale)); } /* behind collaborator cursor */ .tl-collaborator__cursor-hint { z-index: var(--layer-overlays-collaborator-cursor-hint); } .tl-collaborator__cursor { z-index: var(--layer-overlays-collaborator-cursor); } .tl-cursor { overflow: visible; } /* -------------------- Indicator ------------------- */ .tl-shape-indicator { transform-origin: top left; fill: none; stroke-width: calc(1.5px * var(--tl-scale)); contain: size layout; } /* ------------------ SelectionBox ------------------ */ .tl-selection__bg { position: absolute; top: 0px; left: 0px; transform-origin: top left; background-color: transparent; pointer-events: all; } .tl-selection__fg__outline { fill: none; pointer-events: none; stroke: var(--color-selection-stroke); stroke-width: calc(1.5px * var(--tl-scale)); } .tl-corner-handle { pointer-events: none; stroke: var(--color-selection-stroke); fill: var(--color-background); stroke-width: calc(1.5px * var(--tl-scale)); } .tl-text-handle { pointer-events: none; fill: var(--color-selection-stroke); } .tl-corner-crop-handle { pointer-events: none; fill: none; stroke: var(--color-selection-stroke); } .tl-corner-crop-edge-handle { pointer-events: none; fill: none; stroke: var(--color-selection-stroke); } .tl-mobile-rotate__bg { pointer-events: all; cursor: var(--tl-cursor-grab); } .tl-mobile-rotate__fg { pointer-events: none; stroke: var(--color-selection-stroke); fill: var(--color-background); stroke-width: calc(1.5px * var(--tl-scale)); } .tl-transparent { fill: transparent; stroke: transparent; } /* --------------------- Handles -------------------- */ .tl-handle { pointer-events: all; } .tl-handle__bg { fill: transparent; stroke: transparent; pointer-events: all; } .tl-handle__fg { fill: var(--color-selected-contrast); stroke: var(--color-selection-stroke); stroke-width: calc(1.5px * var(--tl-scale)); pointer-events: none; } .tl-handle__create { opacity: 0; } .tl-handle__clone > .tl-handle__fg { fill: var(--color-selection-stroke); stroke: none; } .tl-handle__bg:active { fill: none; } @media (pointer: coarse) { .tl-handle__bg:active { fill: var(--color-selection-fill); } .tl-handle__create { opacity: 1; } } /* ------------------ Bounds Detail ----------------- */ .tl-image, .tl-video { object-fit: cover; background-size: cover; width: 100%; height: 100%; } .tl-video.tl-video-is-fullscreen { object-fit: contain; background-size: contain; } .tl-video-container, .tl-image-container, .tl-embed-container { width: 100%; height: 100%; pointer-events: all; /* background-color: var(--color-background); */ display: flex; justify-content: center; align-items: center; } .tl-image-container { position: relative; overflow: hidden; } .tl-image { position: absolute; inset: 0; } .tl-image__tg { --scale: calc(min(2, var(--tl-scale))); position: absolute; top: calc(var(--scale) * 8px); right: calc(var(--scale) * 8px); font-size: 10px; transform-origin: top right; background-color: var(--color-background); padding: 2px 4px; border-radius: var(--radius-1); } /* --------------------- Nametag -------------------- */ .tl-collaborator-cursor { position: absolute; } .tl-nametag { position: absolute; top: 16px; left: 13px; width: fit-content; height: fit-content; max-width: 120px; padding: 3px 6px; white-space: nowrap; position: absolute; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-family: var(--font-body); border-radius: var(--radius-2); color: var(--color-selected-contrast); } .tl-nametag-title { position: absolute; top: -2px; left: 13px; width: fit-content; height: fit-content; padding: 0px 6px; max-width: 120px; white-space: nowrap; position: absolute; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-family: var(--font-body); text-shadow: var(--tl-text-outline); color: var(--color-selected-contrast); } .tl-nametag-chat { position: absolute; top: 16px; left: 13px; width: fit-content; height: fit-content; color: var(--color-selected-contrast); white-space: nowrap; position: absolute; padding: 3px 6px; font-size: 12px; font-family: var(--font-body); opacity: 1; border-radius: var(--radius-2); } .tl-cursor-chat { position: absolute; color: var(--color-selected-contrast); white-space: nowrap; padding: 3px 6px; font-size: 12px; font-family: var(--font-body); pointer-events: none; z-index: var(--layer-cursor); margin-top: 16px; margin-left: 13px; opacity: 1; border: none; user-select: text; border-radius: var(--radius-2); } .tl-cursor-chat .tl-cursor-chat__bubble { padding-right: 12px; } .tl-cursor-chat::selection { background: var(--color-selected); color: var(--color-selected-contrast); text-shadow: none; } .tl-cursor-chat-fade { /* Setting to zero causes it to immediately disappear */ /* Setting to near-zero causes it to fade out gradually */ opacity: 0.0001; transition: opacity 5s ease-in-out; } .tl-cursor-chat::placeholder { color: var(--color-selected-contrast); opacity: 0.7; } /* -------------------------------------------------- */ /* Spinner */ /* -------------------------------------------------- */ @keyframes spinner { to { transform: rotate(360deg); } } /* ------------------- Text Shape ------------------- */ .tl-text-shape-label { position: relative; font-weight: normal; min-width: 1px; padding: 0px; margin: 0px; border: none; width: fit-content; height: fit-content; font-variant: normal; font-style: normal; pointer-events: all; white-space: pre-wrap; overflow-wrap: break-word; text-shadow: var(--tl-text-outline); } .tl-text-wrapper[data-font='draw'] { font-family: var(--tl-font-draw); } .tl-text-wrapper[data-font='sans'] { font-family: var(--tl-font-sans); } .tl-text-wrapper[data-font='serif'] { font-family: var(--tl-font-serif); } .tl-text-wrapper[data-font='mono'] { font-family: var(--tl-font-mono); } .tl-text-wrapper[data-align='start'], .tl-text-wrapper[data-align='start-legacy'] { text-align: left; } .tl-text-wrapper[data-align='middle'], .tl-text-wrapper[data-align='middle-legacy'] { text-align: center; } .tl-text-wrapper[data-align='end'], .tl-text-wrapper[data-align='end-legacy'] { text-align: right; } .tl-text-wrapper[data-isediting='true'] .tl-text-content { opacity: 0; } .tl-text { /* remove overflow from textarea on windows */ margin: 0px; padding: 0px; appearance: auto; background: none; border-image: none; border: 0px; caret-color: var(--color-text); color: inherit; column-count: initial !important; display: inline-block; font-family: inherit; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: inherit; font-stretch: 100%; font-style: inherit; font-variant: inherit; font-variation-settings: normal; font-weight: inherit; letter-spacing: inherit; line-height: inherit; outline: none; overflow-wrap: break-word; text-align: inherit; text-indent: 0px; text-rendering: auto; text-shadow: inherit; text-transform: none; white-space: pre-wrap; word-spacing: 0px; word-wrap: break-word; writing-mode: horizontal-tb !important; } .tl-text-measure { position: absolute; z-index: var(--layer-canvas-hidden); top: 0px; left: 0px; opacity: 0; width: max-content; box-sizing: border-box; pointer-events: none; line-break: normal; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; resize: none; border: none; user-select: none; contain: style paint; -webkit-user-select: none; } .tl-text-input, .tl-text-content { position: absolute; inset: 0px; height: 100%; width: 100%; min-width: 1px; min-height: 1px; overflow: visible; outline: none; } .tl-text-content__wrapper { position: relative; width: fit-content; height: fit-content; display: flex; align-items: center; justify-content: center; pointer-events: none; min-height: auto; } .tl-text-content { pointer-events: none; } .tl-text-input { resize: none; user-select: all; -webkit-user-select: text; overflow: hidden; cursor: var(--tl-cursor-text); } .tl-text-wrapper[data-isediting='false'] .tl-text-input, .tl-arrow-label[data-isediting='false'] .tl-text-input { opacity: 0; cursor: var(--tl-cursor-default); } .tl-text-input::selection { background: var(--color-selected); color: var(--color-selected-contrast); text-shadow: none; } /* ------------------- Snap Lines ------------------- */ .tl-snap-indicator { stroke: var(--color-accent); stroke-width: calc(1px * var(--tl-scale)); fill: none; } .tl-snap-point { stroke: var(--color-accent); stroke-width: calc(1px * var(--tl-scale)); fill: none; } /* -------------------- Groups ------------------ */ .tl-group { stroke: var(--color-text); stroke-width: calc(1px * var(--tl-scale)); opacity: 0.5; } /* ------------------- Bookmark Shape ------------------- */ .tl-bookmark__container { width: 100%; height: 100%; position: relative; border: 1px solid var(--color-panel-contrast); background-color: var(--color-panel); border-radius: var(--radius-2); display: flex; flex-direction: column; overflow: hidden; } .tl-bookmark__container--safariExport { border: 1px solid var(--color-divider); } .tl-bookmark__image_container { flex: 1 1 100%; overflow: hidden; border-top-left-radius: var(--radius-1); border-top-right-radius: var(--radius-1); width: 100%; height: 100%; display: flex; justify-content: flex-end; align-items: flex-start; } .tl-bookmark__image_container > .tl-hyperlink-button::after { background-color: var(--color-panel); } .tl-bookmark__placeholder { width: 100%; height: 100%; background-color: var(--color-muted-2); border-bottom: 1px solid var(--color-muted-2); } .tl-bookmark__image { width: 100%; height: 100%; object-fit: cover; object-position: center; border-bottom: 1px solid var(--color-muted-2); } .tl-bookmark__copy_container { background-color: var(--color-muted); padding: var(--space-4); pointer-events: all; display: flex; flex-direction: column; justify-content: space-between; flex: 1; } .tl-bookmark__heading, .tl-bookmark__description, .tl-bookmark__link { margin: 0px; width: 100%; font-family: inherit; } .tl-bookmark__heading { font-size: 16px; line-height: 1.5; font-weight: bold; padding-bottom: var(--space-2); overflow: hidden; max-height: calc((16px * 1.5) * 2); -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; text-overflow: ellipsis; display: -webkit-box; } .tl-bookmark__description { font-size: 12px; line-height: 1.5; overflow: hidden; max-height: calc((12px * 1.5) * 3); -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; text-overflow: ellipsis; display: -webkit-box; color: var(--color-text-2); margin: var(--space-2) 0px; } .tl-bookmark__heading + .tl-bookmark__link, .tl-bookmark__description + .tl-bookmark__link { margin-top: var(--space-3); } .tl-bookmark__link { font-size: 12px; pointer-events: all; display: flex; color: var(--color-text-2); align-items: center; cursor: var(--tl-cursor-pointer); width: fit-content; max-width: 100%; } .tl-bookmark__link > span { flex-shrink: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tl-bookmark__link > .tl-hyperlink__icon { margin-right: 8px; flex-shrink: 0; } .tl-bookmark__link > .tl-bookmark__favicon { margin-right: 8px; width: 16px; height: 16px; flex-shrink: 0; } /* ---------------- Hyperlink Button ---------------- */ .tl-hyperlink-button { background: none; margin: 0px; position: absolute; top: 0px; right: 0px; height: 44px; width: 44px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 400; color: var(--color-text-1); padding: 13px; cursor: var(--tl-cursor-pointer); border: none; outline: none; pointer-events: all; } .tl-hyperlink-button::after { content: ''; z-index: -1; position: absolute; right: 6px; bottom: 6px; display: block; width: calc(100% - 12px); height: calc(100% - 12px); border-radius: var(--radius-1); background-color: var(--color-background); pointer-events: none; } .tl-hyperlink-button:focus-visible { color: var(--color-selected); } .tl-hyperlink__icon { width: 16px; height: 16px; background-color: currentColor; pointer-events: none; } .tl-hyperlink-button__hidden { display: none; } /* ---------------- Geo shape ---------------- */ .tl-text-label { display: flex; justify-content: center; align-items: center; color: var(--color-text); text-shadow: var(--tl-text-outline); line-height: inherit; position: absolute; inset: 0px; height: 100%; width: 100%; } .tl-text-label[data-hastext='false'][data-isediting='false'] > .tl-text-label__inner { width: 40px; height: 40px; } .tl-text-label[data-hastext='true'][data-isediting='false'] .tl-text-content { pointer-events: all; } .tl-text-wrapper .tl-text-content { pointer-events: all; z-index: var(--layer-text-content); } .tl-text-label__inner > .tl-text-content { position: relative; top: 0px; left: 0px; padding: inherit; height: fit-content; width: fit-content; border-radius: var(--radius-1); max-width: 100%; } .tl-text-label__inner > .tl-text-input { position: absolute; inset: 0px; height: 100%; width: 100%; padding: inherit; } .tl-text-wrapper[data-isselected='true'] .tl-text-input { z-index: var(--layer-text-editor); pointer-events: all; } /* This part of the rule helps preserve the occlusion rules for the shapes so we * don't click on shapes that are behind other shapes. * One extra nuance is we don't use this behavior for: * - arrows which have weird geometry and just gets in the way. * - draw/line shapes, because it feels restrictive to have them be 'in the way' of clicking on a textfield * - shapes that are not filled */ .tl-canvas:is([data-iseditinganything='true'], [data-isselectinganything='true']) .tl-shape:not( [data-shape-type='arrow'], [data-shape-type='draw'], [data-shape-type='line'], [data-shape-type='highlight'], [data-shape-is-filled='false'] ) { pointer-events: all; } .tl-text-label[data-textwrap='true'] > .tl-text-label__inner { max-width: 100%; } .tl-text-label[data-isediting='true'] { background-color: transparent; min-height: auto; } .tl-text-label[data-isediting='true'] p { opacity: 0; } .tl-arrow-hint { stroke: var(--color-text-1); fill: none; stroke-linecap: round; overflow: visible; } /* ------------------- Arrow Shape ------------------ */ .tl-arrow-label { position: absolute; top: -1px; left: -1px; width: 2px; height: 2px; padding: 0px; display: flex; justify-content: center; align-items: center; text-align: center; color: var(--color-text); text-shadow: var(--tl-text-outline); } .tl-arrow-label[data-isediting='true'] p { opacity: 0; } .tl-arrow-label[data-isediting='true'] > .tl-arrow-label__inner { background-color: var(--color-background); } .tl-arrow-label__inner { border-radius: var(--radius-1); box-sizing: content-box; position: relative; height: max-content; width: max-content; pointer-events: none; display: flex; justify-content: center; align-items: center; } .tl-arrow-label .tl-arrow { position: relative; height: max-content; padding: inherit; overflow: visible; } .tl-arrow-label textarea { padding: inherit; /* Don't allow textarea to be zero width */ min-width: 4px; } /* -------------------- NoteShape ------------------- */ .tl-note__container { position: relative; width: 100%; height: 100%; pointer-events: all; opacity: 1; z-index: var(--layer-text-container); border-radius: 1px; } .tl-note__container > .tl-text-label { text-shadow: none; color: currentColor; } /* --------------------- Loading -------------------- */ .tl-loading { background-color: var(--color-background); color: var(--color-text-1); height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-2); font-size: 14px; font-weight: 500; opacity: 0; animation: fade-in 0.2s ease-in-out forwards; animation-delay: 0.2s; } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } /* -------------------- FrameShape ------------------- */ .tl-frame__body { stroke-width: calc(1px * var(--tl-scale)); } .tl-frame__creating { stroke: var(--color-selected); fill: none; } .tl-frame-heading { display: flex; align-items: center; position: absolute; transform-origin: 0% 100%; overflow: hidden; max-width: 100%; min-width: 32px; height: auto; font-size: 12px; padding-bottom: 4px; pointer-events: all; } .tl-frame-heading-hit-area { pointer-events: all; /* scale from bottom left corner so we can pin it to the top left corner of the frame */ transform-origin: 0% 100%; display: flex; height: 100%; width: 100%; align-items: center; border-radius: var(--radius-1); background-color: var(--color-background); } .tl-frame-label { pointer-events: all; overflow: hidden; text-overflow: ellipsis; padding: var(--space-3) var(--space-3); position: relative; font-size: inherit; white-space: pre; border: 1px solid transparent; } .tl-frame-label__editing { color: transparent; white-space: pre; width: auto; overflow: visible; background-color: var(--color-panel); border-radius: var(--radius-1); border-color: var(--color-selected); } .tl-frame-name-input { position: absolute; border: none; background: none; outline: none; padding: var(--space-3) var(--space-3); inset: 0px; height: 100%; width: 100%; font-size: inherit; font-family: inherit; font-weight: inherit; width: 100%; color: var(--color-text-1); border-radius: var(--radius-1); user-select: all; -webkit-user-select: text; white-space: pre; cursor: var(--tl-cursor-text); } /* If mobile use 16px as font size */ /* On iOS, font size under 16px in an input will make the page zoom into the input 🤦‍♂️ */ /* https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/ */ @media (max-width: 600px) { .tl-frame-heading { font-size: 16px; } } /* ------------------ iFrames Detail ----------------- */ .tl-embed { border: none; border-radius: var(--radius-2); } /* -------------- Shape Error Boundary -------------- */ .tl-shape-error-boundary { width: 100%; height: 100%; background-color: var(--color-muted-1); border-width: calc(1px * var(--tl-scale)); border-color: var(--color-muted-1); border-style: solid; border-radius: calc(var(--radius-1) * var(--tl-scale)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: left; position: relative; pointer-events: all; overflow: hidden; padding: var(--space-2); } .tl-shape-error-boundary::before { transform: scale(var(--tl-scale)); content: 'Error'; font-size: 12px; font-family: inherit; color: var(--color-text-0); } /* ----------------- Error Boundary ----------------- */ .tl-error-boundary { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background-color: var(--color-background); color: var(--color-text-1); position: absolute; } .tl-error-boundary__overlay { position: absolute; inset: 0px; height: 100%; width: 100%; z-index: var(--layer-error-overlay); background-color: var(--color-overlay); } .tl-error-boundary__content * { user-select: all; -webkit-user-select: text; pointer-events: all; } .tl-error-boundary__canvas { pointer-events: none; position: absolute; inset: 0px; height: 100%; width: 100%; z-index: var(--layer-error-canvas); } /* some browsers seem to have some weird interactions between stacking contexts and pointer-events. this ::after pseudo element covers the canvas and prevents it from receiving any pointer events or affecting the cursor. */ .tl-error-boundary__canvas::after { content: ' '; display: block; position: absolute; inset: 0px; height: 100%; width: 100%; z-index: var(--layer-error-canvas-after); pointer-events: all; } .tl-error-boundary__content { width: fit-content; height: fit-content; max-width: 100%; width: 400px; max-height: 100%; background-color: var(--color-panel); padding: 16px; border-radius: 16px; box-shadow: var(--shadow-2); font-size: 14px; font-weight: 400; display: flex; flex-direction: column; overflow: auto; z-index: var(--layer-error-content); gap: 12px; } .tl-error-boundary__content__expanded { width: 600px; } .tl-error-boundary__content h2 { font-size: 16px; margin: 0px; font-weight: 500; } .tl-error-boundary__content h4 { border: 1px solid var(--color-low-border); margin: -6px 0 0 0; padding: var(--space-5); border-radius: var(--radius-2); font-weight: normal; } .tl-error-boundary__content p { line-height: 1.5; margin: 0px; } .tl-error-boundary__content pre { background-color: var(--color-muted-2); margin-top: 0; padding: var(--space-5); border-radius: var(--radius-2); overflow: auto; font-size: 12px; max-height: 320px; } .tl-error-boundary__content button { background: none; border: none; font-family: inherit; font-size: 14px; font-weight: 500; padding: var(--space-4); border-radius: var(--radius-3); cursor: var(--tl-cursor-pointer); color: inherit; background-color: transparent; } .tl-error-boundary__content a { color: var(--color-text-1); font-weight: 500; text-decoration: none; } .tl-error-boundary__content__error { position: relative; margin: -6px 0 0 0; } .tl-error-boundary__content__error button { position: absolute; top: var(--space-2); right: var(--space-2); font-size: 12px; padding: var(--space-2) var(--space-3); background-color: var(--color-panel); border-radius: var(--radius-1); } .tl-error-boundary__content__actions { display: flex; justify-content: space-between; gap: var(--space-4); margin: 0px; margin-left: -4px; } .tl-error-boundary__content__actions__group { display: flex; gap: var(--space-4); } .tl-error-boundary__content .tl-error-boundary__reset { color: var(--color-warn); } .tl-error-boundary__content .tl-error-boundary__refresh { background-color: var(--color-primary); color: var(--color-selected-contrast); } /* --------------------- Coarse --------------------- */ .tl-hidden { opacity: 0; pointer-events: none; } .debug__ui-logger { position: absolute; top: 62px; left: 16px; color: #555; font-size: 12px; font-family: monospace; } /* ---------------- Hit test blocker ---------------- */ .tl-hit-test-blocker { position: absolute; z-index: var(--layer-canvas-blocker); inset: 0px; width: 100%; height: 100%; pointer-events: all; } .tl-hit-test-blocker__hidden { display: none; } @media (hover: hover) { .tl-handle__create:hover { opacity: 1; } .tl-handle__bg:hover { cursor: var(--tl-cursor-grab); fill: var(--color-selection-fill); } .tl-bookmark__link:hover { color: var(--color-selected); } .tl-hyperlink-button:hover { color: var(--color-selected); } .tl-error-boundary__content button:hover { background-color: var(--color-low); } .tl-error-boundary__content a:hover { color: var(--color-text-1); } .tl-error-boundary__content .tl-error-boundary__refresh:hover { background-color: var(--color-primary); opacity: 0.9; } /* These three rules help preserve clicking into specific points in text areas *while* * already in edit mode when jumping from shape to shape. */ .tl-canvas[data-iseditinganything='true'] .tl-text-wrapper:hover .tl-text-input { z-index: var(--layer-text-editor); pointer-events: all; } } /* @tldraw/ui */ .tl-container { --layer-above: 1; --layer-focused-input: 10; --layer-panels: 300; --layer-menus: 400; --layer-canvas-overlays: 500; --layer-toasts: 650; --layer-cursor: 700; --layer-header-footer: 999; --layer-following-indicator: 1000; } /* -------------------------------------------------- */ /* UI Refresh */ /* -------------------------------------------------- */ /* Button */ .tlui-button { position: relative; height: 40px; min-width: 40px; padding: 0px 12px; display: flex; align-items: center; justify-content: center; background-color: transparent; border: transparent; color: currentColor; cursor: pointer; pointer-events: all; font-weight: inherit; font-family: inherit; line-height: inherit; text-rendering: optimizeLegibility; font-size: 12px; gap: 0px; color: var(--color-text-1); } .tlui-button:disabled { color: var(--color-text-3); text-shadow: none; cursor: default; } .tlui-button:disabled .tlui-kbd { color: var(--color-text-3); } .tlui-button > * { position: relative; z-index: var(--layer-above); } .tlui-button__label { flex-grow: 2; text-align: left; } .tlui-button:focus-visible:not(:hover) { outline: 1px solid var(--color-selected); outline-offset: -4px; border-radius: var(--radius-3); } .tlui-button::after { display: block; content: ''; position: absolute; inset: 4px; background-color: transparent; border-radius: var(--radius-2); } .tlui-button[aria-expanded='true']::after { background-color: var(--color-muted-0); opacity: 1; } .tlui-button__icon + .tlui-button__label { margin-left: var(--space-2); } .tlui-button[data-state='hinted']::after { background-color: var(--color-hint); opacity: 1; } .tlui-button[data-state='hinted']:not(:disabled, :focus-visible):active:after { background: var(--color-hint); opacity: 1; } @media (hover: hover) { .tlui-button::after { background-color: var(--color-muted-2); opacity: 0; } .tlui-button:not(:disabled):hover::after { opacity: 1; } } /* Low button */ .tlui-button__low { border-radius: var(--radius-3); background-color: var(--color-low); } @media (hover: hover) { .tlui-button__low::after { background-color: var(--color-muted-2); } } /* Primary / danger buttons */ .tlui-button__primary { color: var(--color-primary); } .tlui-button__danger { color: var(--color-warn); text-shadow: none; } @media (hover: hover) { .tlui-button__primary:not(:disabled, :focus-visible):hover { color: var(--color-primary); } .tlui-button__danger:not(:disabled, :focus-visible):hover { color: var(--color-warn); text-shadow: none; } } /* Panel button */ .tlui-button__panel { position: relative; } /* Menu button */ .tlui-button__menu { height: 40px; min-height: 40px; width: 100%; gap: 8px; margin: -4px 0px; } .tlui-button__menu:nth-child(1) { margin-top: 0px; } .tlui-button__menu:nth-last-child(1) { margin-bottom: 0px; } @media (hover: hover) { .tlui-button__menu::after { inset: 4px; border-radius: var(--radius-2); } } /* Menu checkbox button */ .tlui-button__checkbox { padding-left: 8px; } .tlui-button__checkbox__indicator { width: 15px; height: 15px; } /* Tool lock button */ .tlui-toolbar__lock-button { position: absolute; top: 4px; right: 0px; pointer-events: all; height: 40px; width: 40px; min-width: 0px; border-radius: var(--radius-2); } .tlui-toolbar__lock-button::after { top: 4px; left: 8px; inset: 4px; } /* Tool button */ .tlui-button__tool { position: relative; height: 48px; width: 48px; margin-left: -2px; margin-right: -2px; } .tlui-button__tool:focus-visible:not(:hover) { border-radius: var(--radius-4); } .tlui-button__tool:nth-of-type(1) { margin-left: 0px; } .tlui-button__tool:nth-last-of-type(1) { margin-right: 0px; } @media (hover: hover) { .tlui-button__tool::after { inset: 4px; border-radius: 8px; } .tlui-button__tool[aria-checked='true']:not(:disabled, :focus-visible):hover { color: var(--color-selected-contrast); } } .tlui-button__tool[aria-checked='true'] { color: var(--color-selected-contrast); } .tlui-button__tool[aria-checked='true']:not(:disabled, :focus-visible):active { color: var(--color-selected-contrast); } .tlui-button__tool[aria-checked='true']:not(:disabled)::after { background: var(--color-selected); opacity: 1; } .tlui-layout__mobile .tlui-button__tool { height: 48px; width: 43px; } .tlui-layout__mobile .tlui-button__tool > .tlui-icon { height: 16px; width: 16px; } /* Help */ .tlui-button__help { height: 32px; width: 32px; padding: 0px; min-width: 32px; border-radius: 100%; background-color: var(--color-low); border: 1px solid var(--color-low-border); } @media (hover: hover) { .tlui-button__help::after { background-color: var(--color-muted-2); border-radius: 100%; inset: 4px; } } /* Button Row */ .tlui-buttons__horizontal { display: flex; flex-direction: row; } .tlui-buttons__horizontal > * { margin-left: -2px; margin-right: -2px; } .tlui-buttons__horizontal > *:nth-child(1) { margin-left: 0px; } .tlui-buttons__horizontal > *:nth-last-child(1) { margin-right: 0px; } .tlui-buttons__horizontal > *:only-child { width: 56px; } /* Button Grid */ .tlui-buttons__grid { display: grid; grid-template-columns: repeat(4, auto); grid-auto-flow: row; overflow: hidden; } .tlui-buttons__grid > .tlui-button { margin: -2px; } .tlui-buttons__grid > .tlui-button:nth-of-type(4n) { margin-right: 0px; } .tlui-buttons__grid > .tlui-button:nth-of-type(4n - 3) { margin-left: 0px; } .tlui-buttons__grid > .tlui-button:nth-of-type(-n + 4) { margin-top: 0px; } .tlui-buttons__grid > .tlui-button:nth-last-of-type(-n + 4) { margin-bottom: 0px; } /* Zoom button */ .tlui-zoom-menu__button__pct { width: 60px; min-width: 60px; text-align: center; } /* --------------------- Layout --------------------- */ .tlui-layout { position: relative; display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(0px, 1fr) auto; grid-auto-rows: auto; height: 100%; max-height: 100%; overflow: clip; pointer-events: none; user-select: none; contain: strict; z-index: var(--layer-panels); -webkit-transform: translate3d(0, 0, 0); --sab: env(safe-area-inset-bottom); font-weight: 500; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smooth: antialiased; text-rendering: optimizeLegibility; } .tlui-layout__top { grid-column: 1; grid-row: 1; display: flex; min-width: 0px; justify-content: space-between; } .tlui-layout__top__left { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 100%; height: 100%; flex: 0 1 0; } .tlui-layout__top__right { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; height: 100%; flex: 0 0 auto; min-width: 0px; } .scrollable, .scrollable * { pointer-events: all; touch-action: auto; overscroll-behavior: none; } /* ----------------- Helper Buttons ---------------- */ .tlui-helper-buttons { position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: min-content; gap: var(--space-3); margin: var(--space-2) var(--space-3); white-space: nowrap; pointer-events: none; z-index: var(--layer-panels); } /* ---------------------- Icon ---------------------- */ .tlui-icon { flex-shrink: 0; width: 18px; height: 18px; background-color: currentColor; } .tlui-icon__placeholder { flex-shrink: 0; width: 18px; height: 18px; background-color: transparent; } .tlui-icon__small { width: 15px; height: 15px; } /* --------------------- Slider --------------------- */ .tlui-slider { position: relative; display: flex; align-items: center; user-select: none; touch-action: none; } .tlui-slider__container { width: 100%; padding: 0px var(--space-4); } .tlui-slider__track { position: relative; flex-grow: 1; height: 44px; cursor: pointer; } .tlui-slider__track::after { display: block; position: absolute; top: calc(50% - 2px); content: ''; height: 3px; width: 100%; background-color: var(--color-muted-1); border-radius: 14px; } .tlui-slider__range { position: absolute; top: calc(50% - 2px); left: 0px; height: 3px; background-color: var(--color-selected); border-radius: 14px; } .tlui-slider__thumb { all: unset; cursor: grab; display: block; width: 18px; height: 18px; position: relative; top: -1px; background-color: var(--color-panel); border-radius: 999px; box-shadow: inset 0px 0px 0px 2px var(--color-text-1); } .tlui-slider__thumb:active { cursor: grabbing; box-shadow: inset 0px 0px 0px 2px var(--color-text-1), var(--shadow-1); } .tlui-slider__thumb:focus-visible { box-shadow: inset 0 0 0 2px var(--color-focus); } /* ----------------------- Kbd ---------------------- */ .tlui-kbd { font-family: inherit; font-size: 11px; line-height: 11px; display: grid; justify-items: center; grid-auto-flow: column; grid-template-columns: auto; grid-auto-columns: minmax(1em, auto); align-self: bottom; color: var(--color-text-1); margin-left: var(--space-4); } .tlui-kbd > span { width: 100%; text-align: center; display: inline; margin: 0px; padding: 2px; border-radius: 2px; } .tlui-kbd > span:last-child { padding-right: 0; } .tlui-kbd:not(:last-child) { margin-right: var(--space-2); } /* Focus Mode Button */ .tlui-focus-button { z-index: var(--layer-panels); pointer-events: all; } /* --------------------- Popover -------------------- */ .tlui-popover { position: relative; display: flex; align-content: stretch; } .tlui-popover__content { position: relative; max-height: 75vh; margin: 0px; border: none; border-radius: var(--radius-3); background-color: var(--color-panel); box-shadow: var(--shadow-3); z-index: var(--layer-menus); overflow: hidden; overflow-y: auto; touch-action: auto; overscroll-behavior: none; scrollbar-width: none; -ms-overflow-style: none; } /* -------------------------------------------------- */ /* Zones */ /* -------------------------------------------------- */ /* ------------------- Status Bar ------------------- */ .tlui-debug-panel { background-color: var(--color-low); width: 100%; display: grid; align-items: center; grid-template-columns: 1fr auto auto auto; justify-content: space-between; padding-left: var(--space-4); border-top: 1px solid var(--color-background); font-size: 12px; color: var(--color-text-1); z-index: var(--layer-panels); pointer-events: all; } .tlui-debug-panel__current-state { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .tlui-debug-panel__fps { margin-right: 8px; } .tlui-debug-panel__fps__slow { font-weight: bold; color: var(--color-warn); } /* -------------------- Menu Zone ------------------- */ .tlui-menu-zone { position: relative; z-index: var(--layer-panels); width: fit-content; border-right: 2px solid var(--color-background); border-bottom: 2px solid var(--color-background); border-bottom-right-radius: var(--radius-4); background-color: var(--color-low); } .tlui-menu-zone *[data-state='open']::after { background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%); } /* ------------------- Style Panel ------------------ */ .tlui-style-panel__wrapper { box-shadow: var(--shadow-2); border-radius: var(--radius-3); pointer-events: all; background-color: var(--color-panel); height: fit-content; max-height: 100%; margin: 8px; margin-top: 4px; touch-action: auto; overscroll-behavior: none; overflow-y: auto; overflow-x: hidden; color: var(--color-text); } /* if the style panel is the only child (ie no share menu), increase the margin */ .tlui-style-panel__wrapper:only-child { margin-top: 8px; } .tlui-style-panel { position: relative; z-index: var(--layer-panels); pointer-events: all; width: 148px; max-width: 148px; } .tlui-style-panel::-webkit-scrollbar { display: none; } .tlui-style-panel .tlui-button.select { width: 100%; } .tlui-style-panel__section { display: flex; position: relative; flex-direction: column; } .tlui-style-panel__section:nth-of-type(n + 2):not(:last-child) { border-bottom: 1px solid var(--color-divider); } .tlui-style-panel__section:empty { display: none; } .tlui-style-panel__section__common:not(:only-child) { margin-bottom: 7px; border-bottom: 1px solid var(--color-divider); } .tlui-style-panel__row { display: flex; } /* Only really used for the alignment picker */ .tlui-style-panel__row__extra-button { margin-left: -2px; } .tlui-style-panel__double-select-picker { display: flex; grid-template-columns: 1fr auto; align-items: center; padding-left: var(--space-4); color: var(--color-text-1); font-size: 12px; } .tlui-style-panel__double-select-picker-label { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; flex-grow: 2; max-width: 100%; } .tlui-style-panel__section *[data-state='open']::after { background: var(--color-muted-0); } /* ---------------------- Input --------------------- */ .tlui-input { background: none; margin: 0px; position: relative; z-index: var(--layer-above); height: 40px; max-height: 40px; display: flex; align-items: center; justify-content: center; font-family: inherit; font-size: 12px; font-weight: inherit; color: var(--color-text-1); padding: var(--space-4); padding-left: 0px; border: none; outline: none; text-overflow: ellipsis; width: 100%; user-select: all; text-rendering: optimizeLegibility; -webkit-user-select: auto !important; } .tlui-input__wrapper { width: 100%; height: 44px; display: flex; align-items: center; gap: var(--space-4); color: var(--color-text); } .tlui-input__wrapper > .tlui-icon { flex-shrink: 0; } /* If mobile use 16px as font size */ /* On iOS, font size under 16px in an input will make the page zoom into the input 🤦‍♂️ */ /* https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/ */ @media (max-width: 600px) { @supports (-webkit-touch-callout: none) { /* CSS specific to iOS devices */ .tlui-input { font-size: 16px; } } } /* ---------------- Dialog ---------------- */ .tlui-dialog__overlay { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: var(--layer-canvas-overlays); background-color: var(--color-overlay); pointer-events: all; animation: fadeIn 0.12s ease-out; display: grid; place-items: center; overflow-y: auto; } .tlui-dialog__content { display: flex; flex-direction: column; position: relative; cursor: default; background-color: var(--color-panel); box-shadow: var(--shadow-3); border-radius: var(--radius-3); font-size: 12px; overflow: hidden; min-width: 300px; max-width: 80%; max-height: 80%; } .tlui-dialog__header { position: relative; display: flex; align-items: center; flex: 0; z-index: var(--layer-header-footer); padding-left: var(--space-4); color: var(--color-text); height: 44px; } .tlui-dialog__header__title { flex: 1; font-weight: inherit; font-size: 12px; margin: 0px; color: var(--color-text-1); } .tlui-dialog__header__close { justify-self: flex-end; } .tlui-dialog__body { padding: var(--space-4) var(--space-4); flex: 0 1; overflow-y: auto; overflow-x: hidden; color: var(--color-text-1); user-select: all; -webkit-user-select: text; display: flex; flex-direction: column; gap: var(--space-4); } .tlui-dialog__body a { color: var(--color-selected); } .tlui-dialog__body ul, .tlui-dialog__body ol { padding-left: 16px; display: flex; flex-direction: column; gap: var(--space-4); } .tlui-dialog__footer { position: relative; z-index: var(--layer-header-footer); } .tlui-dialog__footer__actions { display: flex; align-items: center; justify-content: flex-end; } .tlui-dialog__footer__actions > .tlui-button:nth-last-child(n + 2) { margin-right: -4px; } /* --------------------- Toolbar -------------------- */ /* Wide container */ .tlui-toolbar { grid-column: 1 / span 3; grid-row: 1; display: flex; align-items: center; justify-content: center; flex-grow: 2; padding-bottom: calc(var(--space-3) + var(--sab)); } /* Centered Content */ .tlui-toolbar__inner { position: relative; width: fit-content; display: flex; gap: var(--space-3); align-items: flex-end; } .tlui-toolbar__left { width: fit-content; } /* Row of controls + lock button */ .tlui-toolbar__extras { position: relative; z-index: var(--layer-above); width: 100%; pointer-events: none; top: 6px; height: 48px; } .tlui-toolbar__extras:empty { display: none; } .tlui-toolbar__extras__controls { display: flex; position: relative; flex-direction: row; z-index: var(--layer-above); background-color: var(--color-low); border-top-left-radius: var(--radius-4); border-top-right-radius: var(--radius-4); border: 2px solid var(--color-background); margin-left: 8px; margin-right: 0px; pointer-events: all; width: fit-content; } .tlui-toolbar__tools { display: flex; flex-direction: row; align-items: center; background-color: var(--color-low); border-radius: var(--radius-4); z-index: var(--layer-panels); pointer-events: all; position: relative; background: var(--color-panel); box-shadow: var(--shadow-2); } .tlui-toolbar__tools__list { display: flex; flex-direction: row; align-items: center; } .tlui-toolbar__overflow { width: 40px; } .tlui-layout__mobile .tlui-toolbar__overflow { width: 32px; padding: 0px; } .tlui-layout__mobile .tlui-toolbar *[data-state='open']::after { background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%); } /* -------------------- Help Zone ------------------- */ .tlui-help-menu { pointer-events: all; position: absolute; bottom: var(--space-2); right: var(--space-2); z-index: var(--layer-panels); border: 2px solid var(--color-background); border-radius: 100%; } /* ------------------ Context Menu ------------------ */ .tlui-context-menu__move-to-page__name { max-width: calc(min(300px, 35vw)); overflow: hidden; text-overflow: ellipsis; } .tlui-context-menu__move-to-page__name[data-disabled] { color: var(--color-text-3); pointer-events: none; } /* ---------------------- Menu ---------------------- */ .tlui-menu:empty { display: none; } .tlui-menu { z-index: var(--layer-menus); height: fit-content; width: fit-content; max-height: 80vh; border-radius: var(--radius-3); pointer-events: all; touch-action: auto; overflow-y: auto; overscroll-behavior: none; background-color: var(--color-panel); box-shadow: var(--shadow-3); } .tlui-menu::-webkit-scrollbar { display: none; } .tlui-menu__arrow { position: relative; top: -1px; fill: var(--color-panel); stroke: var(--color-panel-contrast); stroke-width: 1px; } .tlui-menu__group { width: 100%; } .tlui-menu__group:empty { display: none; } .tlui-menu__group { border-bottom: 1px solid var(--color-divider); } .tlui-menu__group:nth-last-of-type(1) { border-bottom: none; } .tlui-menu__submenu__trigger[data-state='open']:not(:hover)::after { border-radius: var(--radius-1); background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%); } .tlui-menu__submenu__trigger[data-direction='left'][data-state='open']:not(:hover)::after { border-radius: var(--radius-1); background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%); } /* Menu Sizes */ .tlui-menu[data-size='large'] > .tlui-menu__group { min-width: initial; } .tlui-menu[data-size='medium'] > .tlui-menu__group { min-width: 144px; } .tlui-menu[data-size='small'] > .tlui-menu__group { min-width: 96px; } .tlui-menu[data-size='tiny'] > .tlui-menu__group { min-width: 0px; } /* ------------------ Actions Menu ------------------ */ .tlui-actions-menu { max-height: calc(100vh - 150px); } /* --------------------- Toasts --------------------- */ .tlui-toast__viewport { position: absolute; inset: 0px; margin: 0px; display: flex; align-items: flex-end; justify-content: flex-end; flex-direction: column; gap: var(--space-3); pointer-events: none; padding: 0px var(--space-3) 64px 0px; z-index: var(--layer-toasts); } .tlui-toast__viewport > * { pointer-events: all; } .tlui-toast__icon { padding-top: 11px; padding-left: var(--space-4); color: var(--color-text-1); } .tlui-toast__container { min-width: 200px; display: flex; flex-direction: row; background-color: var(--color-panel); box-shadow: var(--shadow-2); border-radius: var(--radius-3); font-size: 12px; } .tlui-toast__container[data-severity='success'] .tlui-icon { color: var(--color-success); } .tlui-toast__container[data-severity='info'] .tlui-icon { color: var(--color-info); } .tlui-toast__container[data-severity='warning'] .tlui-icon { color: var(--color-warning); } .tlui-toast__container[data-severity='error'] .tlui-icon { color: var(--color-error); } .tlui-toast__main { flex-grow: 2; max-width: 280px; } .tlui-toast__content { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); } .tlui-toast__title { font-weight: bold; color: var(--color-text-1); /* this makes the default toast look better */ line-height: 16px; } .tlui-toast__description { color: var(--color-text-1); padding: var(--space-3); margin: 0px; padding: 0px; } .tlui-toast__icon + .tlui-toast__main > .tlui-toast__actions { padding-left: 0px; } .tlui-toast__actions { display: flex; flex-direction: row; justify-content: flex-start; margin-left: 0; } .tlui-toast__close { align-self: flex-end; flex-shrink: 0; } @media (prefers-reduced-motion: no-preference) { .tlui-toast__container[data-state='open'] { animation: slide-in 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86); } .tlui-toast__container[data-state='closed'] { animation: hide 100ms ease-in; } .tlui-toast__container[data-swipe='move'] { transform: translateX(var(--radix-toast-swipe-move-x)); } .tlui-toast__container[data-swipe='cancel'] { transform: translateX(0); transition: transform 200ms ease-out; } .tlui-toast__container[data-swipe='end'] { animation: swipe-out 100ms ease-out; } } /* --------------------- Bottom --------------------- */ .tlui-layout__bottom { grid-row: 2; } .tlui-layout__bottom__main { width: 100%; position: relative; display: flex; align-items: flex-end; justify-content: center; } /* ------------------- Navigation ------------------- */ .tlui-navigation-panel { display: flex; width: min-content; flex-direction: column; z-index: var(--layer-panels); pointer-events: all; position: absolute; left: 0px; bottom: 0px; } .tlui-navigation-panel::before { content: ''; display: block; position: absolute; z-index: -1; inset: -2px -2px 0px 0px; border-radius: 0; border-top: 2px solid var(--color-background); border-right: 2px solid var(--color-background); border-top-right-radius: var(--radius-4); background-color: var(--color-low); } .tlui-navigation-panel__toggle .tlui-icon { opacity: 0.24; } .tlui-navigation-panel__toggle:active .tlui-icon { opacity: 1; } @media (hover: hover) { .tlui-navigation-panel__toggle:hover .tlui-icon { opacity: 1; } } .tlui-minimap { width: 100%; height: 96px; min-height: 96px; overflow: hidden; padding: var(--space-3); padding-top: 0px; } .tlui-minimap__canvas { position: relative; width: 100%; height: 100%; } /* ----------------------- ... ---------------------- */ @keyframes hide { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes slide-in { from { transform: translateX(calc(100% + var(--space-3))); } to { transform: translateX(0px); } } @keyframes swipe-out { from { transform: translateX(var(--radix-toast-swipe-end-x)); } to { transform: translateX(calc(100% + var(--space-3))); } } /* ------------------- Page Select ------------------ */ .tlui-page-menu__wrapper { position: relative; display: flex; flex-direction: column; width: 260px; height: fit-content; max-height: 50vh; } .tlui-page-menu__trigger { width: 128px; } .tlui-page-menu__header { display: flex; flex-direction: row; align-items: center; width: 100%; height: 40px; padding-left: var(--space-4); border-bottom: 1px solid var(--color-divider); } .tlui-page-menu__header > .tlui-button:nth-of-type(1) { margin-right: -4px; } .tlui-page-menu__header__title { color: var(--color-text); font-size: 12px; flex-grow: 2; } .tlui-page-menu__name { flex-grow: 2; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tlui-page-menu__list { position: relative; touch-action: auto; flex-direction: column; max-height: 100%; overflow-x: hidden; overflow-y: auto; touch-action: auto; } .tlui-page-menu__item { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 0px; } .tlui-page-menu__item:nth-of-type(n + 2) { margin-top: -4px; } .tlui-page-menu__item__button { width: 100%; } .tlui-page-menu__item__button:not(:only-child) { flex-grow: 2; margin-right: -2px; } .tlui-page-menu__item__button > span { display: block; flex-grow: 2; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tlui-page-menu__item__button__checkbox { padding-left: 35px; } .tlui-page-menu__item__button__check { position: absolute; left: 0px; width: 24px; padding-left: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text); } .tlui-page_menu__item__sortable { position: absolute; top: 0px; left: 0px; width: 100%; height: fit-content; display: flex; flex-direction: row; align-items: center; overflow: hidden; z-index: var(--layer-above); } .tlui-page_menu__item__sortable__title { flex: 1; } .tlui-page_menu__item__sortable__title > .tlui-input__wrapper { height: 100%; } .tlui-page_menu__item__sortable:focus-within { z-index: var(--layer-focused-input); } .tlui-page_menu__item__sortable__handle { touch-action: none; width: 32px; min-width: 0px; height: 40px; cursor: grab; color: var(--color-text-3); flex-shrink: 0; margin-right: -9px; } .tlui-page_menu__item__sortable__handle:active { cursor: grabbing; } .tlui-page-menu__item__input { margin-left: 12px; height: 100%; } /* The more menu has complex CSS here: */ /* If the user can hover, then visible but opacity zero until hover */ /* If the user cannot hover, then not displayed unless editing, and then opacity 1 */ .tlui-page_menu__item__submenu { pointer-events: all; flex: 0; cursor: pointer; margin: 0px; display: none; margin-left: -2px; } .tlui-page_menu__item__submenu[data-isediting='true'] { display: block; opacity: 1; } .tlui-page_menu__item__submenu > .tlui-button { opacity: 0; } @media (any-pointer: coarse) { .tlui-page_menu__item__submenu > .tlui-button { opacity: 1; } } .tlui-page-menu__item__button .tlui-button__icon { margin-right: 4px; } @media (hover: hover) { .tlui-page_menu__item__submenu { display: block; } .tlui-page_menu__item__submenu[data-isediting='true'] > .tlui-button { opacity: 0; } .tlui-page_menu__item__submenu > .tlui-button[data-state='open'], .tlui-page_menu__item__submenu:hover > .tlui-button, .tlui-page_menu__item__sortable:focus-within > .tlui-page_menu__item__submenu > .tlui-button { opacity: 1; } } /* --------------------- Dialogs -------------------- */ /* Edit Link Dialog */ .tlui-edit-link-dialog { display: flex; flex-direction: column; gap: var(--space-4); color: var(--color-text); } .tlui-edit-link-dialog__input { background-color: var(--color-muted-2); flex-grow: 2; border-radius: var(--radius-2); padding: 0px var(--space-4); } /* Embed Dialog */ .tlui-embed__spacer { flex-grow: 2; min-height: 0px; margin-left: calc(-1 * var(--space-4)); margin-top: calc(-1 * var(--space-4)); pointer-events: none; } .tlui-embed-dialog__list { display: flex; flex-direction: column; padding-bottom: var(--space-5); } .tlui-embed-dialog__item__image { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background-size: contain; background-repeat: no-repeat; background-position: center center; } .tlui-embed-dialog__enter { display: flex; flex-direction: column; gap: var(--space-4); color: var(--color-text-1); } .tlui-embed-dialog__input { background-color: var(--color-muted-2); flex-grow: 2; border-radius: var(--radius-2); padding: 0px var(--space-4); } .tlui-embed-dialog__warning { color: var(--color-warn); text-shadow: none; } .tlui-embed-dialog__instruction__link { display: flex; gap: var(--space-1); margin-top: var(--space-4); } .tlui-embed-dialog__enter a { color: var(--color-text-1); } .tlui-following-indicator { display: block; position: absolute; inset: 0px; border-width: 2px; border-style: solid; z-index: var(--layer-following-indicator); pointer-events: none; } /* ---------------- Offline Indicator --------------- */ .tlui-offline-indicator { display: flex; flex-direction: row; gap: var(--space-3); color: var(--color-text); background-color: var(--color-low); border: 3px solid var(--color-background); padding: 0px var(--space-5); height: 42px; align-items: center; justify-content: center; border-radius: 99px; opacity: 0; animation: fade-in; animation-duration: 0.12s; animation-delay: 2s; animation-fill-mode: forwards; } /* --------------- Keyboard shortcuts --------------- */ .tlui-shortcuts-dialog__header { border-bottom: 1px solid var(--color-divider); } .tlui-shortcuts-dialog__body { position: relative; columns: 3; column-gap: var(--space-9); pointer-events: all; touch-action: auto; /* Terrible fix to allow firefox users to scroll the dialog */ overflow-x: auto; } .tlui-shortcuts-dialog__body__tablet { columns: 2; } .tlui-shortcuts-dialog__body__mobile { columns: 1; } .tlui-shortcuts-dialog__group { break-inside: avoid-column; padding-bottom: var(--space-6); } .tlui-shortcuts-dialog__group__title { font-size: inherit; font-weight: inherit; margin: 0px; color: var(--color-text-3); height: 32px; display: flex; align-items: center; } .tlui-shortcuts-dialog__group__content { display: flex; flex-direction: column; color: var(--color-text-1); } .tlui-shortcuts-dialog__key-pair { display: flex; gap: var(--space-4); align-items: center; justify-content: space-between; height: 32px; } .tlui-shortcuts-dialog__key-pair__key { flex: 1; font-size: 12px; } /* ------------------- Da share zone ------------------ */ .tlui-share-zone { padding: 0px 0px 0px 0px; display: flex; flex-direction: row; justify-content: flex-end; z-index: var(--layer-panels); align-items: center; padding-top: 2px; padding-right: 4px; } /* ------------------- People Menu ------------------- */ .tlui-people-menu__avatars-button { display: flex; align-items: center; justify-content: flex-end; background: none; border: none; cursor: pointer; pointer-events: all; border-radius: var(--radius-1); padding-right: 1px; height: 36px; } .tlui-people-menu__avatars { display: flex; flex-direction: row; } .tlui-people-menu__avatar { height: 28px; width: 28px; border: 2px solid var(--color-background); background-color: var(--color-low); border-radius: 100%; display: flex; align-items: center; justify-content: center; position: relative; font-size: 10px; font-weight: bold; color: var(--color-selected-contrast); z-index: 2; } .tlui-people-menu__avatar:nth-of-type(n + 2) { margin-left: -12px; } .tlui-people-menu__avatars-button[data-state='open'] { opacity: 1; } @media (hover: hover) { .tlui-people-menu__avatars-button:hover .tlui-people-menu__avatar { border-color: var(--color-low); } } .tlui-people-menu__more { min-width: 0px; font-size: 11px; font-weight: 600; color: var(--color-text-1); font-family: inherit; padding: 0px 4px; letter-spacing: 1.5; } .tlui-people-menu__more::after { border-radius: var(--radius-2); inset: 0px; } .tlui-people-menu__wrapper { position: relative; display: flex; flex-direction: column; width: 220px; height: fit-content; max-height: 50vh; } .tlui-people-menu__section { position: relative; touch-action: auto; flex-direction: column; max-height: 100%; overflow-x: hidden; overflow-y: auto; touch-action: auto; } .tlui-people-menu__section:first-child, .tlui-people-menu__section:last-child { flex-shrink: 0; } .tlui-people-menu__section:not(:last-child) { border-bottom: 1px solid var(--color-divider); } .tlui-people-menu__user { display: flex; justify-content: flex-start; align-items: center; } .tlui-people-menu__user__color { flex-shrink: 0; } .tlui-people-menu__user__name { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--color-text-1); max-width: 100%; flex-grow: 1; flex-shrink: 100; } .tlui-people-menu__user__label { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--color-text-3); flex-grow: 100; flex-shrink: 0; margin-left: 4px; } .tlui-people-menu__user__input { flex-grow: 2; height: 100%; padding: 0px; margin: 0px; } .tlui-people-menu__user > .tlui-input__wrapper { width: auto; display: flex; align-items: auto; flex-grow: 2; gap: 8px; height: 100%; padding: 0px; } .tlui-people-menu__item { display: flex; justify-content: flex-start; width: 100%; } .tlui-people-menu__item__button { padding: 0 11px; } .tlui-people-menu__item > .tlui-button__menu { width: auto; display: flex; align-items: auto; justify-content: flex-start; flex-grow: 2; gap: 11px; } .tlui-people-menu__item__follow { min-width: 44px; } .tlui-people-menu__item__follow[data-active='true'] .tlui-icon { opacity: 1; } .tlui-people-menu__item__follow:focus-visible .tlui-icon { opacity: 1; } @media (hover: hover) { .tlui-people-menu__item__follow .tlui-icon { opacity: 0; } .tlui-people-menu__item__follow:hover .tlui-icon { opacity: 1; } } @font-face { font-family: "Recursive"; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/recursive/v23/8vI-7wMr0mhh-RQChyHEH06TlXhq_gukbYrFMk1QuAIcyEwG_X-dpEfaE5YaERmK-CImKsvxvU-MXGX2fSqasNfUlTGZnI14ZeY.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Recursive"; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/recursive/v23/8vI-7wMr0mhh-RQChyHEH06TlXhq_gukbYrFMk1QuAIcyEwG_X-dpEfaE5YaERmK-CImKsvxvU-MXGX2fSqasNfUlTGZnI14ZeY.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Recursive Mono"; font-style: normal; font-weight: 420; font-display: swap; src: url(https://fonts.gstatic.com/s/recursive/v23/8vI-7wMr0mhh-RQChyHEH06TlXhq_gukbYrFMk1QuAIcyEwG_X-dpEfaE5YaERmK-CImqvTxvU-MXGX2fSqasNfUlTGZnI14ZeY.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } div { box-shadow: none !important; } /** Hacky selector to remove the question mark popup on bottom left */ button[data-state="closed"][aria-haspopup="dialog"] { display: none; } #TD-MenuPanel { display: none; } #pw-oop-bottom_rail { display: none; } .layout__header { z-index: 2; border: none; backdrop-filter: none; background-color: transparent; } .layout__header__right-container { display: none; } .tl-canvas { background-color: var(--bg); } .plans__placeholder { min-height: 100%; } .plans__top-section { position: fixed; z-index: 10; top: 25px; left: 50%; display: flex; align-items: center; padding: var(--s-3); border: 1px solid var(--theme-very-transparent); border-radius: 0 0 var(--rounded) var(--rounded); background-color: var(--bg-darker); gap: var(--s-4); transform: translate(-50%, -42%); } .plans__outline-toggle { position: fixed; z-index: 10; top: 10%; left: 5px; } .plans__outline-toggle > .plans__outline-toggle__button { background-color: grey; font-size: var(--fonts-xs); padding: var(--s-2); color: var(--button-text); width: 140px; } .plans__outline-toggle > .plans__outline-toggle__button__outlined { background-color: var(--theme); } .plans__weapons-section { position: fixed; z-index: 10; top: 15%; width: 150px; max-height: 85vh; border: 1px solid var(--theme-very-transparent); border-radius: 0 var(--rounded) var(--rounded) 0; background: var(--bg-darker); gap: 2px; overflow-y: auto; } .plans__weapons-section__wide { width: 175px; } .plans__weapons-summary { background-color: var(--bg-lighter); font-size: var(--fonts-sm); font-weight: var(--bold); padding: var(--s-2-5); display: flex; align-items: center; gap: var(--s-2); } .plans__weapons-container { display: flex; flex-wrap: wrap; justify-content: center; padding: var(--s-1-5); gap: var(--s-1-5); } .plans__no-img-text { color: var(--theme-error); font-size: var(--fonts-xs); } .plans__style-panel { position: fixed; z-index: 10; margin-top: 50px; } .plans__zoom-quick-actions { position: absolute; z-index: 10; display: block; } .plans__zoom-menu { position: absolute; right: 0; } .plans__quick-actions { display: flex; right: 0; } img[src$="?outline=red"] { --outline-width: 0.1rem; --outline-color: crimson; filter: drop-shadow(0 0 var(--outline-width) var(--outline-color)) drop-shadow(0 0 var(--outline-width) var(--outline-color)) drop-shadow(0 0 var(--outline-width) var(--outline-color)); }