/* * Layout */ /* * Typography */ /* * SPACING */ /* * BORDERS */ /* * Typography */ /* * Effects */ .\+flex { display: flex; } .\+cursor-clickable { cursor: pointer; } .\+hover-grey:hover { color: var(--color-text-active); } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-and-slide-in-from-bottom { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } @keyframes fsbr { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(20px); } } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } .animate--fade-in, .editor_controls .modal__backdrop { opacity: 0; animation: fade-in 0.1s forwards cubic-bezier(0.19, 1, 0.22, 1); } .animate--fade-out, .editor_controls .modal--animate-out .modal__backdrop { opacity: 1; animation: fade-out 0.1s forwards cubic-bezier(0.19, 1, 0.22, 1); } .animate--fade-and-slide-in-from-bottom, .editor_controls .modal__card { opacity: 0; transform: translateY(20px); animation: fade-and-slide-in-from-bottom 0.1s forwards cubic-bezier(0.19, 1, 0.22, 1); } .animate--fsbr, .editor_controls .modal--animate-out .modal__card { opacity: 1; transform: none; animation: fsbr 0.1s forwards cubic-bezier(0.19, 1, 0.22, 1); } :root { --env: $ENV; } .plotly-editor--theme-provider { --color-white: #ffffff; --color-rhino-core: #2a3f5f; --color-rhino-dark: #506784; --color-rhino-medium-1: #a2b1c6; --color-rhino-medium-2: #c8d4e3; --color-rhino-light-1: #dfe8f3; --color-rhino-light-2: #ebf0f8; --color-rhino-light-3: #f3f6fa; --color-rhino-light-4: #fafbfd; --color-rhino-light-5: #f8f8f9; --color-dodger: #119dff; --color-dodger-shade: #0d76bf; --color-dodger-shade-mid: #0d76bf; --color-aqua: #09ffff; --color-aqua-shade: #19d3f3; --color-lavender: #e763fa; --color-lavender-shade: #ab63fa; --color-lavender-shade-mid: #934bde; --color-cornflower: #636efa; --color-emerald: #00cc96; --color-sienna: #ef553b; --color-accent: var(--color-dodger); --color-accent-shade: var(--color-dodger-shade); --color-accent-shade-mid: var(--color-dodger-shade-mid); --color-brand: var(--color-dodger); --color-hightlight-darker: var(--color-gray-blue-pale); --color-text-base: var(--color-rhino-dark); --color-text-light: var(--color-rhino-medium-1); --color-text-dark: var(--color-rhino-core); --color-text-headings: var(--color-text-dark); --color-text-section-header: var(--color-text-dark); --color-text-active: var(--color-rhino-core); --color-text-placeholder: var(--color-rhino-medium-1); --color-border-default: var(--color-rhino-medium-2); --color-border-light: var(--color-rhino-light-1); --color-border-dark: var(--color-rhino-medium-1); --color-border-accent: var(--color-accent); --color-border-accent-shade: var(--color-accent-shade); --color-background: var(--color-rhino-light-2); --color-background-base: var(--color-rhino-light-2); --color-background-light: var(--color-rhino-light-3); --color-background-medium: var(--color-rhino-light-1); --color-background-dark: var(--color-rhino-medium-1); --color-background-top: var(--color-white); --color-background-inverse: var(--color-rhino-dark); --color-background-inputs: var(--color-background-top); --color-button-primary-base-fill: var(--color-accent); --color-button-primary-base-border: var(--color-accent-shade); --color-button-primary-base-text: var(--color-white); --color-button-primary-hover-fill: var(--color-accent-shade-mid); --color-button-primary-hover-border: var(--color-accent-shade); --color-button-primary-hover-text: var(--color-white); --color-button-primary-active-fill: var(--color-accent-shade); --color-button-primary-active-border: var(--color-accent-shade); --color-button-primary-active-text: var(--color-white); --color-button-secondary-base-fill: transparent; --color-button-secondary-base-border: var(--color-rhino-medium-2); --color-button-secondary-base-text: var(--color-text-base); --color-button-secondary-hover-fill: transparent; --color-button-secondary-hover-border: var(--color-rhino-medium-1); --color-button-secondary-hover-text: var(--color-text-dark); --color-button-secondary-active-fill: transparent; --color-button-secondary-active-border: var(--color-rhino-medium-1); --color-button-secondary-active-text: var(--color-text-dark); --color-button-tertiary-base-fill: transparent; --color-button-tertiary-base-border: transparent; --color-button-tertiary-base-text: var(--color-text-base); --color-button-tertiary-hover-fill: transparent; --color-button-tertiary-hover-border: transparent; --color-button-tertiary-hover-text: var(--color-text-dark); --color-button-tertiary-active-fill: transparent; --color-button-tertiary-active-border: transparent; --color-button-tertiary-active-text: var(--color-text-dark); --color-button-default-base-fill: var(--color-background-light); --color-button-default-base-border: var(--color-border-default); --color-button-default-base-text: var(--color-text-base); --color-button-default-hover-fill: var(--color-background-base); --color-button-default-hover-border: var(--color-border-dark); --color-button-default-hover-text: var(--color-text-dark); --color-button-default-active-fill: var(--color-background-dark); --color-button-default-active-border: var(--color-border-dark); --color-button-default-active-text: var(--color-text-dark); --color-button-upgrade-base-fill: var(--color-lavender-shade); --color-button-upgrade-base-border: var(--color-lavender-shade-dark); --color-button-upgrade-base-text: var(--color-white); --color-button-upgrade-hover-fill: var(--color-lavender-shade-mid); --color-button-upgrade-hover-border: var(--color-lavender-shade-dark); --color-button-upgrade-hover-text: var(--color-white); --color-button-upgrade-active-fill: var(--color-lavender-shade-dark); --color-button-upgrade-active-border: var(--color-lavender-shade-dark); --color-button-upgrade-active-text: var(--color-white); --color-button-header-base-fill: transparent; --color-button-header-base-border: var(--color-dodger); --color-button-header-base-text: var(--color-dodger); --color-button-header-hover-fill: transparent; --color-button-header-hover-border: var(--color-dodger-shade-mid); --color-button-header-hover-text: var(--color-dodger-shade); --color-button-header-active-fill: transparent; --color-button-header-active-border: var(--color-dodger-shade); --color-button-header-active-text: var(--color-dodger-shade); --spacing-base-unit: 24px; --spacing-half-unit: 12px; --spacing-quarter-unit: 6px; --spacing-sixth-unit: 4px; --spacing-eighth-unit: 3px; --font-size-base: 13px; --font-size-small: 12px; --font-size-medium: 14px; --font-size-large: 14px; --font-size-heading-base: 24px; --font-size-heading-small: 18px; --font-size-heading-large: 28px; --font-size-h5: 16px; --font-weight-light: 400; --font-weight-normal: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-leading-body: 1.6; --font-leading-head: 1.2; --font-letter-spacing-headings: 0.5px; --font-family-body: "Open Sans", --apple-default, sans-serif; --font-family-headings: "Dosis", "Arial", sans-serif; --border-default: 1px solid var(--color-border-default); --border-light: 1px solid var(--color-border-light); --border-dark: 1px solid var(--color-border-dark); --border-accent: 1px solid var(--color-border-accent); --border-accent-shade: 1px solid var(--color-border-accent-shade); --border-radius: 5px; --border-radius-small: 3px; --text-shadow-dark-color: rgba(42, 63, 95, 0.7); --text-shadow-dark-ui: 0 1px 2px var(--text-shadow-dark-color); --text-shadow-dark-ui-inactive: 0 1px 1px rgba(42, 63, 95, 0.4); --box-shadow-base-color: rgba(80, 103, 132, 0.2); --box-shadow-base: 0px 2px 9px var(--box-shadow-base-color); --scrollbar-track-background: var(--color-background-base); --scrollbar-thumb-color: var(--color-accent); --panel-background: var(--color-background-base); --panel-width: 335px; --fold-header-text-color-base: var(--color-white); --fold-header-text-color-closed: var(--color-white); --fold-header-background-base: var(--color-rhino-dark); --fold-header-background-closed: var(--color-rhino-core); --fold-header-border-color-closed: var(--color-rhino-core); --fold-header-border-color-base: var(--color-rhino-dark); --sidebar-background: var(--color-background-top); --sidebar-width: 100px; --sidebar-group-background-base: var(--sidebar-background); --sidebar-item-background-base: var(--color-background-light); --sidebar-item-background-hover: var(--color-background-base); --sidebar-item-background-active: var(--color-background-medium); --editor-width: calc( var(--sidebar-width) + var(--panel-width) + 1px ); } .editor_controls { position: relative; width: var(--editor-width); flex-shrink: 0; overflow: hidden; display: flex; /* TODO: Don't inline Draft.css; load it with `systemjs`. */ /** * Draft v0.3.0 * * Copyright (c) 2013-present, Facebook, Inc. * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. */ /** * Rangeslider */ /** * Rangeslider - Horizontal slider */ /** * Rangeslider - Vertical slider */ /** * Rangeslider - Reverse */ /** * Rangeslider - Labels */ /* ------------------------------------------------------------------- Microtip Modern, lightweight css-only tooltips Just 1kb minified and gzipped @author Ghosh @package Microtip ---------------------------------------------------------------------- 1. Base Styles 2. Direction Modifiers 3. Position Modifiers --------------------------------------------------------------------*/ /* ------------------------------------------------ [1] Base Styles -------------------------------------------------*/ /* ------------------------------------------------ [2] Position Modifiers -------------------------------------------------*/ /* ------------------------------------------------ [2.1] Top Left -------------------------------------------------*/ /* ------------------------------------------------ [2.2] Top Right -------------------------------------------------*/ /* ------------------------------------------------ [2.3] Bottom -------------------------------------------------*/ /* ------------------------------------------------ [2.4] Bottom Left -------------------------------------------------*/ /* ------------------------------------------------ [2.5] Bottom Right -------------------------------------------------*/ /* ------------------------------------------------ [2.6] Left -------------------------------------------------*/ /* ------------------------------------------------ [2.7] Right -------------------------------------------------*/ /* ------------------------------------------------ [3] Size -------------------------------------------------*/ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: var(--font-family-body); } .editor_controls .sidebar { user-select: none; height: 100%; min-width: var(--sidebar-width); width: var(--sidebar-width); max-width: var(--sidebar-width); text-align: center; background: var(--sidebar-background); overflow-y: auto; overflow-x: hidden; float: left; border-right: var(--border-default); flex-grow: 1; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; } .editor_controls .sidebar::-webkit-scrollbar { background: white; width: 0px; } .editor_controls .sidebar::-webkit-scrollbar-track { box-shadow: none; background: var(--scrollbar-track-background); } .editor_controls .sidebar::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-color); border-radius: 10px; } .editor_controls .sidebar__group { background-color: var(--sidebar-group-background-base); cursor: pointer; width: 100%; } .editor_controls .sidebar__group__title { color: var(--color-text-base); font-size: var(--font-size-medium); font-weight: var(--font-weight-normal); padding: var(--spacing-half-unit) 0; text-transform: capitalize; text-align: left; border-bottom: var(--border-light); display: flex; position: relative; } .editor_controls .sidebar__group__title__label { padding-left: var(--spacing-base-unit); } .editor_controls .sidebar__group__title__icon { position: absolute; transform: scale(0.9) translateX(2px) translateY(-4px); transform-origin: center center; opacity: 0.5; transition: all 0.15s ease-in-out; } .editor_controls .sidebar__group__title__icon svg path { fill: currentColor; } .editor_controls .sidebar__group:hover .sidebar__group__title__icon { opacity: 1; } .editor_controls .sidebar__group--is-active { color: var(--color-text-active); cursor: default; } .editor_controls .sidebar__group--is-active .sidebar__group__title__label { font-weight: var(--font-weight-semibold); color: var(--color-text-active); } .editor_controls .sidebar__group--is-active .sidebar__group__title__icon { opacity: 1; } .editor_controls .sidebar__group--is-active .sidebar__group__title__icon svg path { fill: var(--color-accent); } .editor_controls .sidebar__group--is-expanded .sidebar__group__title__icon { transform: scale(0.9) translateY(-5px) rotate(90deg); opacity: 1; } .editor_controls .sidebar__group--is-expanded .sidebar__group__title { position: relative; z-index: 4; box-shadow: var(--box-shadow-base); } .editor_controls .sidebar__item { color: var(--color-text-base); cursor: pointer; font-size: var(--font-size-medium); font-weight: var(--font-weight-normal); line-height: var(--font-size-medium); text-transform: capitalize; background-color: var(--sidebar-item-background-base); padding: 10px; padding-left: 18px; padding-right: var(--spacing-quarter-unit); text-align: left; border-bottom: var(--border-light); position: relative; overflow: hidden; } .editor_controls .sidebar__item--single { margin-top: 15px; } .editor_controls .sidebar__item--single:last-child { margin-bottom: 15px; } .editor_controls .sidebar__item::before { content: ''; position: absolute; height: 100%; top: 0; left: 0; width: 5px; background-color: var(--color-accent); transform: scaleX(0); transform-origin: left center; will-change: transform; transition: all 0.15s ease-in-out; } .editor_controls .sidebar__item span { display: block; will-change: transform; transition: all 0.15s ease-in-out; } .editor_controls .sidebar__item:not(.sidebar__item--is-active):hover { background-color: var(--sidebar-item-background-hover); } .editor_controls .sidebar__item--is-active { color: var(--color-text-active); font-weight: var(--font-weight-semibold); cursor: default; } .editor_controls .sidebar__item--is-active::before { transform: none; } .editor_controls .sidebar__item--is-active span { transform: translateX(5px); } .editor_controls .sidebar__logo { height: 50px; margin: 10px; } .editor_controls .panel { flex-grow: 1; overflow-x: hidden; overflow-y: auto; padding: var(--spacing-half-unit); box-sizing: border-box; position: relative; display: flex; flex-direction: column; width: 100%; -webkit-overflow-scrolling: touch; } .editor_controls .panel::-webkit-scrollbar { background: white; width: 5px; } .editor_controls .panel::-webkit-scrollbar-track { box-shadow: none; background: var(--scrollbar-track-background); } .editor_controls .panel::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-color); border-radius: 10px; } .editor_controls__wrapper > .panel { background-color: var(--panel-background); border-right: var(--border-default); width: calc(var(--panel-width)); } .editor_controls .panel__content { flex-grow: 1; display: flex; flex-direction: column; } .editor_controls .panel__header { margin-bottom: var(--spacing-half-unit); display: flex; flex-shrink: 0; } .editor_controls .panel__header__content { flex-grow: 1; } .editor_controls .panel__header__actions__container { width: 100%; } .editor_controls .panel__header__collapse { font-size: var(--font-size-medium); float: left; color: var(--color-text-base); display: flex; align-items: center; height: 100%; cursor: pointer; } .editor_controls .panel__header__collapse svg { width: 16px !important; height: 16px !important; fill: var(--color-text-light); padding-right: 3px; } .editor_controls .panel__header__action { float: right; } .editor_controls .panel__empty { position: absolute; top: 0; right: 0; width: var(--panel-width); border-right: var(--border-default); height: 100%; padding: var(--spacing-half-unit); background-color: var(--panel-background); box-sizing: border-box; z-index: 1003; display: flex; } .editor_controls .panel__empty__message { text-align: center; } .editor_controls .panel__empty__message__icon { padding-top: calc(var(--spacing-base-unit) * 2); margin-bottom: var(--spacing-half-unit); opacity: 0.5; } .editor_controls .panel__empty__message__icon svg { width: 48px !important; height: 48px !important; } .editor_controls .panel__empty__message__icon svg path { fill: var(--color-text-light); } .editor_controls .panel__empty__message__heading { color: var(--color-text-headings); font-size: var(--font-size-heading-base); font-weight: var(--font-weight-normal); line-height: var(--font-leading-head); font-family: var(--font-family-headings); letter-spacing: var(--font-letter-spacing-headings); } .editor_controls .panel__empty__message__content { font-size: var(--font-size-base); color: var(--color-text-base); line-height: var(--font-leading-body); } .editor_controls .panel--no-padding { padding: 0; } .editor_controls .fold .panel { overflow-x: visible; overflow-y: visible; } .editor_controls .fold { width: 100%; user-select: none; } .editor_controls .fold__top { display: flex; justify-content: space-between; clear: both; padding: var(--spacing-quarter-unit) var(--spacing-half-unit); color: var(--fold-header-text-color-closed); font-size: var(--font-size-base); border: 1px solid var(--fold-header-border-color-closed); background-color: var(--fold-header-background-closed); height: 15px; border-radius: var(--border-radius); text-shadow: var(--text-shadow-dark-ui); transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out, border 0.1s ease-in-out; box-sizing: content-box; } .editor_controls .fold__top:hover { cursor: pointer; background-color: var(--fold-header-background-closed); } .editor_controls .fold__top svg { width: 18px; height: 18px; display: block; filter: drop-shadow(0 1px 2px rgba(42, 63, 95, 0.7)); } .editor_controls .fold__top svg path { fill: currentColor; } .editor_controls .fold__top--open { color: var(--fold-header-text-color-base); background-color: var(--fold-header-background-base); border: 1px solid var(--fold-header-border-color-base); border-radius: var(--border-radius) var(--border-radius) 0 0; text-shadow: var(--text-shadow-dark-ui-inactive); } .editor_controls .fold__top--open svg { filter: drop-shadow(0 1px 1px rgba(42, 63, 95, 0.4)); } .editor_controls .fold__top--open:hover { background-color: var(--fold-header-background-base); } .editor_controls .fold__top__icon { display: block; margin-right: var(--spacing-quarter-unit); transform: translateY(-1px); } .editor_controls .fold__top__title { margin-left: var(--spacing-half-unit)/3; font-size: var(--font-size-medium); line-height: var(--font-size-medium); font-weight: var(--font-weight-semibold); transform: translateY(1px); white-space: nowrap; max-width: 230px; letter-spacing: 0.2px; text-overflow: ellipsis; overflow: hidden; } .editor_controls .fold__top__arrow { transform: translateX(-3px) translateY(-1px); } .editor_controls .fold__top__arrow svg { will-change: transform; transition: transform 0.1s ease-in-out; transform: rotate(-90deg); font-weight: bold; transform-origin: center center; } .editor_controls .fold__top__arrow-title { display: flex; flex-grow: 1; } .editor_controls .fold__top__arrow--open svg { transform: rotate(0deg); } .editor_controls .fold__top__delete { font-size: 18px; opacity: 0.75; transform: translateY(-2px); } .editor_controls .fold__top__delete:hover { opacity: 1; } .editor_controls .fold__content { background: var(--color-background-top); border: var(--border-default); border-width: 0 1px 1px 1px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .editor_controls .fold__content__plot { overflow: hidden; border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); } .editor_controls .fold__content > *:first-child { border-top: 0; } .editor_controls .fold__content__empty { font-family: var(--font-family-headings); display: flex; flex-direction: column; justify-content: center; padding: 30px 25px; } .editor_controls .fold__content__empty__icon { margin: 0 auto; margin-bottom: 15px; width: 40px; height: 40px; border-radius: 50%; background-color: var(--color-dodger); display: flex; flex-direction: column; justify-content: center; } .editor_controls .fold__content__empty__icon svg { margin: 0 auto !important; fill: white; width: 23px; height: 23px; } .editor_controls .fold__content__empty__message__primary { text-align: center; margin-bottom: 20px; font-size: 17px; color: var(--color-text-base); } .editor_controls .fold__content__empty__message__secondary { font-family: var(--font-family-body); font-size: var(--font-size-small); text-align: center; color: var(--color-text-base); } .editor_controls .fold__content--noheader { border-width: 1px 1px 1px 1px; } .editor_controls .fold { margin-bottom: var(--spacing-half-unit); } .editor_controls .fold .fold:last-child { margin-bottom: 0; } .editor_controls .section__heading { position: relative; display: flex; font-size: var(--font-size-base); color: var(--color-text-section-header); font-weight: var(--font-weight-semibold); cursor: default; background-color: var(--color-background-light); padding: var(--spacing-quarter-unit) var(--spacing-half-unit); clear: both; text-transform: capitalize; } .editor_controls .section:not(:first-child) .section__heading { border-top: var(--border-light); } .editor_controls .section:first-child .section__heading { border-top: 0; } .editor_controls .menupanel { padding-top: 0; display: flex; justify-content: flex-end; flex-grow: 1; } .editor_controls .menupanel--ownline { padding-top: var(--spacing-quarter-unit); width: 100%; } .editor_controls .menupanel__label { font-weight: var(--font-weight-semibold); padding-right: var(--spacing-quarter-unit); } .editor_controls .menupanel__icon { vertical-align: middle; width: 15px !important; height: 15px !important; fill: var(--color-text-light) !important; padding-left: var(--spacing-quarter-unit); } .editor_controls .menupanel__icon svg { display: block; } .editor_controls .menupanel__icon:hover { cursor: pointer; fill: var(--color-accent) !important; } .editor_controls .menupanel__icon-span { font-size: var(--font-size-small); display: flex; } .editor_controls .menupanel__icon-span--question { color: var(--color-text-base); } .editor_controls .info__title { color: var(--color-text-headings); font-size: var(--font-size-heading-small); font-weight: var(--font-weight-normal); line-height: var(--font-leading-head); font-family: var(--font-family-headings); letter-spacing: var(--font-letter-spacing-headings); padding: var(--spacing-half-unit) var(--spacing-half-unit) var(--spacing-quarter-unit) var(--spacing-half-unit); } .editor_controls .info__text { padding: var(--spacing-quarter-unit) var(--spacing-half-unit); color: var(--color-text-base); font-size: var(--font-size-small); font-weight: var(--font-weight-normal); line-height: var(--font-leading-body); } .editor_controls .info__sub-text { color: var(--color-text-base); font-size: var(--font-size-small); font-weight: var(--font-weight-normal); font-style: italic; line-height: var(--font-leading-body); padding: var(--spacing-quarter-unit) var(--spacing-half-unit) var(--spacing-half-unit) var(--spacing-half-unit); } .editor_controls .modalbox { position: absolute; border-radius: var(--border-radius); overflow: hidden; text-transform: none; text-align: left; border: var(--border-default); align-content: center; box-shadow: var(--box-shadow-base); left: calc(var(--spacing-quarter-unit) * -1); width: calc(100% + var(--spacing-half-unit)); top: calc(100% + var(--spacing-quarter-unit)); background-color: var(--color-background-top); z-index: 9; } .editor_controls .modalbox__cover { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; } .editor_controls .modalbox--dark { background-color: var(--color-background-inverse); } .editor_controls .modalbox--relative { position: relative; } .editor_controls .field .modalbox { width: 100%; left: -1px; top: 100%; } .editor_controls .modal { box-sizing: border-box; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; align-items: flex-start; overflow-y: auto; justify-content: center; z-index: 1003; } .editor_controls .modal * { box-sizing: border-box; } .editor_controls .modal__backdrop { height: 100%; width: 100%; left: 0; top: 0; position: fixed; opacity: 0; will-change: opacity; } .editor_controls .modal__backdrop::before { content: ''; height: 100%; width: 100%; left: 0; opacity: 0.5; top: 0; background: var(--color-background-dark); position: fixed; } .editor_controls .modal__card { background: var(--color-background-top); border-radius: var(--border-radius); position: relative; z-index: 1003; max-width: calc(100% - var(--spacing-base-unit)); box-shadow: var(--box-shadow-base); display: flex; flex-direction: column; will-change: opacity, transform; flex-grow: 0; margin: 5vh 10vw; } .editor_controls .modal__header { display: flex; justify-content: space-between; align-items: center; color: var(--color-text-base); padding: var(--spacing-half-unit); font-weight: var(--font-weight-semibold); } .editor_controls .modal__header__close { opacity: 0.5; } .editor_controls .modal__header__close:hover { cursor: pointer; opacity: 1; } .editor_controls .modal__header__close svg { display: block; } .editor_controls .modal__header__close svg * { fill: currentColor; } .editor_controls .modal__content { flex-grow: 1; background-color: var(--color-background-light); border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); } .editor_controls .modal__backdrop { animation-duration: 1s; animation-delay: 0s; } .editor_controls .modal__card { animation-duration: 0.85s; animation-delay: 0.1s; } .editor_controls .modal--animate-out { pointer-events: none; } .editor_controls .modal--animate-out .modal__backdrop { animation-duration: 0.85s; animation-delay: 0s; } .editor_controls .modal--animate-out .modal__card { animation-duration: 0.85s; animation-delay: 0s; } .editor_controls .panel .react-tabs { flex-grow: 1; display: flex; flex-direction: column; } .editor_controls .panel .react-tabs__tab { flex-grow: 1; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: var(--spacing-quarter-unit); color: var(--color-text-base); font-size: var(--font-size-base); background: var(--color-background-medium); border: var(--border-default); border-bottom: 0; position: relative; background: var(--color-background-light); transition: border-color 0.15s ease-in-out; } .editor_controls .panel .react-tabs__tab-list { background: var(--color-background-medium); margin: 0; flex-shrink: 0; list-style: none; display: flex; align-items: flex-end; padding-top: var(--spacing-half-unit); padding-left: var(--spacing-half-unit); padding-right: var(--spacing-half-unit); padding-bottom: 0; height: 32px; } .editor_controls .panel .react-tabs__tab:first-of-type { border-top-left-radius: var(--border-radius); } .editor_controls .panel .react-tabs__tab:last-of-type { border-top-right-radius: var(--border-radius); } .editor_controls .panel .react-tabs__tab:hover { background-color: var(--color-background-base); cursor: pointer; } .editor_controls .panel .react-tabs__tab--selected { background-color: var(--color-background-base); pointer-events: none; margin-top: 0; color: var(--color-text-active); border-top-color: var(--color-accent); border-top-width: 2px; } .editor_controls .panel .react-tabs__tab--selected::before { position: absolute; top: 100%; width: 100%; height: 1px; content: ''; background-color: var(--color-background-base); left: 0; z-index: 4; } .editor_controls .panel .react-tabs__tab:not(:first-of-type):not(:last-of-type) { border-left: 0; } .editor_controls .panel .react-tabs__tab:last-of-type { border-left: none; } .editor_controls .panel .react-tabs__tab-panel { border-top: var(--border-default); display: none; } .editor_controls .panel .react-tabs__tab-panel--selected { flex-grow: 1; display: flex; flex-direction: column; } .editor_controls .field { align-items: flex-start; border-top: var(--border-light); color: var(--color-text-base); display: flex; font-size: var(--font-size-base); font-weight: var(--font-weight-normal); justify-content: flex-start; line-height: var(--font-size-base); min-height: 32px; padding: var(--spacing-quarter-unit) 0; width: 100%; position: relative; } .editor_controls .field__no-title { width: 100%; padding: 0 var(--spacing-half-unit); align-self: center; line-height: var(--font-leading-body); } .editor_controls .field__no-title--center { text-align: center; } .editor_controls .field__widget { display: flex; flex-wrap: wrap; flex-basis: 0; padding-right: var(--spacing-half-unit); padding-left: var(--spacing-half-unit); align-self: center; } .editor_controls .field__widget:not(.field__widget--units) { flex-grow: 1; } .editor_controls .field__widget--units { padding-right: 0; } .editor_controls .field__units { align-self: center; } .editor_controls .field__title { width: 80px; padding-left: var(--spacing-half-unit); display: block; font-size: var(--font-size-small); line-height: var(--font-leading-body); color: var(--color-text-base); padding-top: var(--spacing-quarter-unit); user-select: none; } .editor_controls .field__title-text { text-transform: capitalize; cursor: default; } .editor_controls .field__delete { display: flex; align-items: center; justify-content: center; padding-left: var(--spacing-quarter-unit); opacity: 0.5; } .editor_controls .field__delete svg { display: block; } .editor_controls .field__delete svg path { fill: var(--color-text-base); } .editor_controls .field__delete:hover { cursor: pointer; opacity: 1; } .editor_controls .field__delete:hover svg path { fill: var(--color-sienna); } .editor_controls .field .rect, .editor_controls .field .square { border-color: var(--color-accent); } .editor_controls .field .rect-grid { border-color: var(--panel-background) !important; float: left; border-top: 1px solid; border-left: 1px solid; } .editor_controls .field .rect-container { margin: 0 auto; position: relative; max-width: 294px; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .editor_controls .field__widget { flex-basis: auto; } } .editor_controls .field .field { border-top: none; } .editor_controls .field .field .field__no-title { padding: 0; } .editor_controls .symbol-selector__toggle { border: var(--border-default); border-radius: var(--border-radius); width: 80px; cursor: pointer; padding: var(--spacing-quarter-unit) var(--spacing-quarter-unit) 3px var(--spacing-quarter-unit); } .editor_controls .symbol-selector__toggle:before, .editor_controls .symbol-selector__toggle:after { content: ' '; display: table; } .editor_controls .symbol-selector__toggle:after { clear: both; } .editor_controls .symbol-selector__toggle--dark { background-color: var(--color-background-inverse); } .editor_controls .symbol-selector__toggle__option { float: left; } .editor_controls .symbol-selector__toggle__caret { float: right; fill: var(--color-text-light); padding-top: var(--spacing-eighth-unit); width: 13px !important; height: 13px !important; } .editor_controls .symbol-selector__menu { max-width: 225px; position: absolute; z-index: 1003; border: var(--border-default); padding: var(--spacing-half-unit); box-shadow: 2px 2px var(--spacing-half-unit) var(--color-border-light); border-radius: var(--border-radius-small); left: var(--spacing-base-unit); } .editor_controls .symbol-selector__item { display: inline; } .editor_controls .symbol-selector__symbol:hover { background-color: var(--color-border-default); } .editor_controls button { display: inline-block; padding: var(--spacing-quarter-unit) var(--spacing-half-unit); line-height: 1; letter-spacing: 0.5px; text-transform: capitalize; text-align: center; cursor: pointer; height: 36px; outline: none; user-select: none; font-size: var(--font-size-medium); font-weight: var(--font-weight-semibold); font-family: var(--font-family-body); border-width: 1px; border-style: solid; border-color: transparent; border-radius: var(--border-radius); transition: all 0.15s ease-in-out; } .editor_controls button.button { padding-left: 0; } .editor_controls .button__wrapper { display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .editor_controls .button__label { padding-left: var(--spacing-half-unit); } .editor_controls .button__icon { display: flex; padding-left: var(--spacing-quarter-unit); will-change: transform; } .editor_controls .button__icon svg { transform: scale(0.8); transform-origin: center center; display: block; } .editor_controls .button__icon svg path { fill: currentColor; } .editor_controls .button__icon + .button__label { padding-left: 0; } .sidebar .button { width: calc(100% - var(--spacing-base-unit)); margin-left: var(--spacing-half-unit); margin-right: var(--spacing-half-unit); } .editor_controls .button--no-text { background-color: var(--color-button-default-base-fill); border-color: var(--color-button-default-base-border); color: var(--color-button-default-base-text); padding-right: var(--spacing-quarter-unit); margin-left: 5px; } .editor_controls .button--no-text:hover:not(.button--no-text--disabled) { background-color: var(--color-button-default-hover-fill); border: 1px solid var(--color-button-default-hover-border); color: var(--color-button-default-hover-text); } .editor_controls .button--no-text:active:not(.button--no-text--disabled) { background-color: var(--color-button-default-active-fill); border: 1px solid var(--color-button-default-active-border); color: var(--color-button-default-active-text); } .editor_controls .button--no-text--disabled { background-color: var(--color-button-default-base-fill); border-color: var(--color-button-default-base-border); color: var(--color-button-default-base-text); padding-right: var(--spacing-quarter-unit); margin-left: 5px; color: #bababa; cursor: default; } .editor_controls .button--no-text--disabled:hover:not(.button--no-text--disabled) { background-color: var(--color-button-default-hover-fill); border: 1px solid var(--color-button-default-hover-border); color: var(--color-button-default-hover-text); } .editor_controls .button--no-text--disabled:active:not(.button--no-text--disabled) { background-color: var(--color-button-default-active-fill); border: 1px solid var(--color-button-default-active-border); color: var(--color-button-default-active-text); } .editor_controls .button--default { background-color: var(--color-button-default-base-fill); border-color: var(--color-button-default-base-border); color: var(--color-button-default-base-text); } .editor_controls .button--default:hover:not(.button--no-text--disabled) { background-color: var(--color-button-default-hover-fill); border: 1px solid var(--color-button-default-hover-border); color: var(--color-button-default-hover-text); } .editor_controls .button--default:active:not(.button--no-text--disabled) { background-color: var(--color-button-default-active-fill); border: 1px solid var(--color-button-default-active-border); color: var(--color-button-default-active-text); } .editor_controls .button--primary { background-color: var(--color-button-primary-base-fill); border-color: var(--color-button-primary-base-border); color: var(--color-button-primary-base-text); text-shadow: var(--text-shadow-dark-ui); } .editor_controls .button--primary svg { filter: drop-shadow(0 1px 2px rgba(42, 63, 95, 0.7)); } .editor_controls .button--primary:hover:not(.button--no-text--disabled) { background-color: var(--color-button-primary-hover-fill); border: 1px solid var(--color-button-primary-hover-border); color: var(--color-button-primary-hover-text); } .editor_controls .button--primary:active:not(.button--no-text--disabled) { background-color: var(--color-button-primary-active-fill); border: 1px solid var(--color-button-primary-active-border); color: var(--color-button-primary-active-text); } .editor_controls .button--secondary { background-color: var(--color-button-secondary-base-fill); border-color: var(--color-button-secondary-base-border); color: var(--color-button-secondary-base-text); } .editor_controls .button--secondary:hover:not(.button--no-text--disabled) { background-color: var(--color-button-secondary-hover-fill); border: 1px solid var(--color-button-secondary-hover-border); color: var(--color-button-secondary-hover-text); } .editor_controls .button--secondary:active:not(.button--no-text--disabled) { background-color: var(--color-button-secondary-active-fill); border: 1px solid var(--color-button-secondary-active-border); color: var(--color-button-secondary-active-text); } .editor_controls .button--tertiary { background-color: var(--color-button-tertiary-base-fill); border-color: var(--color-button-tertiary-base-border); color: var(--color-button-tertiary-base-text); } .editor_controls .button--tertiary:hover:not(.button--no-text--disabled) { background-color: var(--color-button-tertiary-hover-fill); border: 1px solid var(--color-button-tertiary-hover-border); color: var(--color-button-tertiary-hover-text); } .editor_controls .button--tertiary:active:not(.button--no-text--disabled) { background-color: var(--color-button-tertiary-active-fill); border: 1px solid var(--color-button-tertiary-active-border); color: var(--color-button-tertiary-active-text); } .editor_controls .button--upgrade { background-color: var(--color-button-upgrade-base-fill); border-color: var(--color-button-upgrade-base-border); color: var(--color-button-upgrade-base-text); text-shadow: var(--text-shadow-dark-ui); } .editor_controls .button--upgrade svg { filter: drop-shadow(0 1px 2px rgba(42, 63, 95, 0.7)); } .editor_controls .button--upgrade:hover:not(.button--no-text--disabled) { background-color: var(--color-button-upgrade-hover-fill); border: 1px solid var(--color-button-upgrade-hover-border); color: var(--color-button-upgrade-hover-text); } .editor_controls .button--upgrade:active:not(.button--no-text--disabled) { background-color: var(--color-button-upgrade-active-fill); border: 1px solid var(--color-button-upgrade-active-border); color: var(--color-button-upgrade-active-text); } .editor_controls .button--header { background-color: var(--color-button-header-base-fill); border-color: var(--color-button-header-base-border); color: var(--color-button-header-base-text); } .editor_controls .button--header:hover:not(.button--no-text--disabled) { background-color: var(--color-button-header-hover-fill); border: 1px solid var(--color-button-header-hover-border); color: var(--color-button-header-hover-text); } .editor_controls .button--header:active:not(.button--no-text--disabled) { background-color: var(--color-button-header-active-fill); border: 1px solid var(--color-button-header-active-border); color: var(--color-button-header-active-text); } .editor_controls .checkbox__group { padding-left: var(--spacing-half-unit); text-align: left; } .editor_controls .checkbox__item { user-select: none; cursor: default; padding-top: var(--spacing-eighth-unit); padding-bottom: var(--spacing-eighth-unit); } .editor_controls .checkbox__item--vertical { display: block; clear: both; } .editor_controls .checkbox__box { height: 18px; width: 18px; border: var(--border-default); border-radius: var(--border-radius-small); cursor: pointer; display: inline-block; vertical-align: middle; text-align: center; position: relative; } .editor_controls .checkbox__box:hover { background: var(--color-background-light); } .editor_controls .checkbox__box--checked { border: var(--border-accent-shade); background: var(--color-accent); } .editor_controls .checkbox__box--checked:hover { background: var(--color-accent-shade); } .editor_controls .checkbox__box--checked + .checkbox__label { color: var(--color-text-active); } .editor_controls .checkbox__check { color: var(--color-text-base); font-size: var(--spacing-half-unit); position: absolute; height: 100%; width: 100%; left: 0; top: 0; display: flex; align-items: center; justify-content: center; } .editor_controls .checkbox__check svg { filter: drop-shadow(0 1px 2px rgba(42, 63, 95, 0.7)); } .editor_controls .checkbox__check svg path { fill: var(--color-white); } .editor_controls .checkbox__label { padding-left: var(--spacing-quarter-unit); font-size: var(--font-size-base); color: var(--color-text-base); display: inline-block; line-height: 20px; text-align: left; vertical-align: middle; cursor: pointer; } .editor_controls .colorpicker__saturation, .editor_controls .colorpicker__controls .colorpicker__sliders .colorpicker__slider, .editor_controls .colorpicker__controls .colorpicker__active { position: relative; overflow: hidden; border: var(--border-default); border-radius: var(--border-radius-small); cursor: pointer; } .editor_controls .colorpicker { display: flex; width: 26px; height: 26px; border-radius: 100%; border: var(--border-default); padding: var(--spacing-eighth-unit); /* Saturation wrapper style */ /* Wrapper style for Hue and Alpha sliders and swatch */ } .editor_controls .colorpicker__outer { width: 185px; } .editor_controls .colorpicker__container { display: flex; align-items: center; line-height: 2; position: relative; width: 185px; } .editor_controls .colorpicker__selected-color { margin-left: var(--spacing-half-unit); color: var(--color-text-base); font-weight: var(--font-weight-semibold); font-size: var(--font-size-small); display: inline-block; vertical-align: middle; text-transform: uppercase; } .editor_controls .colorpicker__swatch { border-radius: 50%; flex-grow: 1; width: 100%; height: 100%; } .editor_controls .colorpicker__saturation { height: 100px; } .editor_controls .colorpicker__custom-input { padding-top: var(--spacing-eighth-unit); } .editor_controls .colorpicker__custom-input input { border: var(--border-default) !important; box-shadow: none !important; background-color: var(--color-background-inputs); color: var(--color-text-dark); } .editor_controls .colorpicker__custom-input input + span { color: var(--color-text) !important; } .editor_controls .colorpicker__controls .colorpicker__sliders { width: 100%; } .editor_controls .colorpicker__controls .colorpicker__sliders .colorpicker__slider { margin: auto 0; height: 10px; margin: var(--spacing-eighth-unit) 0; } .editor_controls .colorpicker__controls .colorpicker__active { height: var(--spacing-base-unit); width: var(--spacing-base-unit); margin: var(--spacing-eighth-unit) 0 0 var(--spacing-half-unit); } .editor_controls .colorpicker__controls .colorpicker__active .colorpicker__active-swatch { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: var(--border-radius-small); border: 1px solid #eee; } .editor_controls .fold .fold .colorpicker__container { width: calc( $colorpicker-width - var(--spacing-half-unit) - var(--spacing-half-unit)); } .editor_controls .colorscalePickerContainer { min-width: 215px; position: relative; padding: 0; resize: none; border: none; background: none; } .editor_controls .colorscalePickerContainer::-webkit-scrollbar { width: 5px; } .editor_controls .colorscalePickerTopContainer { display: none; } .editor_controls .colorscaleDescription { display: none; } .editor_controls .colorscalePickerContainer input:focus { outline: none; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .editor_controls .colorscalePickerContainer { display: inline; } } .editor_controls .colorscalePickerBottomContainer { padding-right: 3px; } .editor_controls .customPickerContainer { margin-top: var(--spacing-quarter-unit); text-align: left; } .editor_controls .customPickerContainer__outer { width: 215px; text-align: center; } .editor_controls .dropdown-container { /** * React Select * ============ * Created by Jed Watson and Joss Mackison for KeystoneJS, http://www.keystonejs.com/ * https://twitter.com/jedwatson https://twitter.com/jossmackison https://twitter.com/keystonejs * MIT License: https://github.com/JedWatson/react-select */ flex-grow: 1; } @keyframes Select-animation-spin { to { transform: rotate(1turn); } } @-webkit-keyframes Select-animation-spin { to { -webkit-transform: rotate(1turn); } } .editor_controls .dropdown-container .Select { position: relative; } .editor_controls .dropdown-container .Select input::-webkit-contacts-auto-fill-button, .editor_controls .dropdown-container .Select input::-webkit-credentials-auto-fill-button { display: none !important; } .editor_controls .dropdown-container .Select input::-ms-clear { display: none !important; } .editor_controls .dropdown-container .Select input::-ms-reveal { display: none !important; } .editor_controls .dropdown-container .Select, .editor_controls .dropdown-container .Select div, .editor_controls .dropdown-container .Select input, .editor_controls .dropdown-container .Select span { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .editor_controls .dropdown-container .Select.is-disabled .Select-arrow-zone { cursor: default; pointer-events: none; } .editor_controls .dropdown-container .Select.is-disabled > .Select-control { background-color: #f9f9f9; } .editor_controls .dropdown-container .Select.is-disabled > .Select-control:hover { box-shadow: none; } .editor_controls .dropdown-container .Select.is-searchable.is-open > .Select-control { cursor: text; } .editor_controls .dropdown-container .Select.is-searchable.is-focused:not(.is-open) > .Select-control { cursor: text; } .editor_controls .dropdown-container .Select.is-open > .Select-control { border-bottom-right-radius: 0; border-bottom-left-radius: 0; background: #fff; border-color: #b3b3b3 #ccc #d9d9d9; } .editor_controls .dropdown-container .Select.is-open > .Select-control .Select-arrow { top: -2px; border-color: transparent transparent #999; border-width: 0 5px 5px; } .editor_controls .dropdown-container .Select.is-focused > .Select-control { background: #fff; } .editor_controls .dropdown-container .Select.is-focused:not(.is-open) > .Select-control { border-color: #08c #0099e6 #0099e6; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px -1px fade(#08c, 50%); } .editor_controls .dropdown-container .Select.has-value.is-clearable.Select--single > .Select-control .Select-value { padding-right: 42px; } .editor_controls .dropdown-container .Select.has-value.Select--single > .Select-control .Select-value .Select-value-label, .editor_controls .dropdown-container .Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label { color: #333; } .editor_controls .dropdown-container .Select.has-value.Select--single > .Select-control .Select-value a.Select-value-label, .editor_controls .dropdown-container .Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label { cursor: pointer; text-decoration: none; } .editor_controls .dropdown-container .Select.has-value.Select--single > .Select-control .Select-value a.Select-value-label:hover, .editor_controls .dropdown-container .Select.has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus, .editor_controls .dropdown-container .Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:hover, .editor_controls .dropdown-container .Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus { color: #08c; outline: none; text-decoration: underline; } .editor_controls .dropdown-container .Select.has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus, .editor_controls .dropdown-container .Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus { background: #fff; } .editor_controls .dropdown-container .Select.has-value.is-pseudo-focused .Select-input { opacity: 0; } .editor_controls .dropdown-container .Select.is-open .Select-arrow, .editor_controls .dropdown-container .Select .Select-arrow-zone:hover > .Select-arrow { border-top-color: #666; } .editor_controls .dropdown-container .Select.Select--rtl { direction: rtl; text-align: right; } .editor_controls .dropdown-container .Select-control { background-color: #fff; border-color: #d9d9d9 #ccc #b3b3b3; border-radius: 4px; border: 1px solid #ccc; color: #333; cursor: default; display: table; border-spacing: 0; border-collapse: separate; height: 36px; outline: none; overflow: hidden; position: relative; width: 100%; } .editor_controls .dropdown-container .Select-control:hover { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); } .editor_controls .dropdown-container .Select-control .Select-input:focus { outline: none; background: #fff; } .editor_controls .dropdown-container .Select-placeholder, .editor_controls .dropdown-container .Select--single > .Select-control .Select-value { bottom: 0; color: #aaa; left: 0; line-height: 34px; padding-left: 10px; padding-right: 10px; position: absolute; right: 0; top: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .editor_controls .dropdown-container .Select-input { height: 34px; padding-left: 10px; padding-right: 10px; vertical-align: middle; } .editor_controls .dropdown-container .Select-input > input { width: 100%; background: none transparent; border: 0 none; box-shadow: none; cursor: default; display: inline-block; font-family: inherit; font-size: inherit; margin: 0; outline: none; line-height: 17px; /* For IE 8 compatibility */ padding: 8px 0 12px; /* For IE 8 compatibility */ -webkit-appearance: none; } .is-focused .editor_controls .dropdown-container .Select-input > input { cursor: text; } .editor_controls .dropdown-container .Select-control:not(.is-searchable) > .Select-input { outline: none; } .editor_controls .dropdown-container .Select-loading-zone { cursor: pointer; display: table-cell; position: relative; text-align: center; vertical-align: middle; width: 16px; } .editor_controls .dropdown-container .Select-loading { -webkit-animation: Select-animation-spin 400ms infinite linear; -o-animation: Select-animation-spin 400ms infinite linear; animation: Select-animation-spin 400ms infinite linear; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; border: 2px solid #ccc; border-right-color: #333; display: inline-block; position: relative; vertical-align: middle; } .editor_controls .dropdown-container .Select-clear-zone { -webkit-animation: Select-animation-fadeIn 200ms; -o-animation: Select-animation-fadeIn 200ms; animation: Select-animation-fadeIn 200ms; color: #999; cursor: pointer; display: table-cell; position: relative; text-align: center; vertical-align: middle; width: 17px; } .editor_controls .dropdown-container .Select-clear-zone:hover { color: #D0021B; } .editor_controls .dropdown-container .Select-clear { display: inline-block; font-size: 18px; line-height: 1; } .editor_controls .dropdown-container .Select--multi .Select-clear-zone { width: 17px; } .editor_controls .dropdown-container .Select--multi .Select-multi-value-wrapper { display: inline-block; } .editor_controls .dropdown-container .Select .Select-aria-only { position: absolute; display: inline-block; height: 1px; width: 1px; margin: -1px; clip: rect(0, 0, 0, 0); overflow: hidden; float: left; } .editor_controls .dropdown-container .Select-arrow-zone { cursor: pointer; display: table-cell; position: relative; text-align: center; vertical-align: middle; width: 25px; padding-right: 5px; } .Select--rtl .editor_controls .dropdown-container .Select-arrow-zone { padding-right: 0; padding-left: 5px; } .editor_controls .dropdown-container .Select-arrow { border-color: #999 transparent transparent; border-style: solid; border-width: 5px 5px 2.5px; display: inline-block; height: 0; width: 0; position: relative; } @-webkit-keyframes Select-animation-fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes Select-animation-fadeIn { from { opacity: 0; } to { opacity: 1; } } .editor_controls .dropdown-container .Select-menu-outer { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: #fff; border: 1px solid #ccc; border-top-color: #e6e6e6; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); box-sizing: border-box; margin-top: -1px; max-height: 200px; position: absolute; left: 0; top: 100%; width: 100%; z-index: 1000; -webkit-overflow-scrolling: touch; } .editor_controls .dropdown-container .Select-menu { max-height: 198px; overflow-y: auto; } .editor_controls .dropdown-container .Select-option { box-sizing: border-box; background-color: #fff; color: #666666; cursor: pointer; display: block; padding: 8px 10px; } .editor_controls .dropdown-container .Select-option:last-child { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } .editor_controls .dropdown-container .Select-option.is-selected { background-color: #f5faff; color: #333; } .editor_controls .dropdown-container .Select-option.is-focused { background-color: #f2f9fc; color: #333; } .editor_controls .dropdown-container .Select-option.is-disabled { color: #cccccc; cursor: default; } .editor_controls .dropdown-container .Select-noresults { box-sizing: border-box; color: #999999; cursor: default; display: block; padding: 8px 10px; } .editor_controls .dropdown-container .Select--multi .Select-input { vertical-align: middle; margin-left: 10px; padding: 0; } .editor_controls .dropdown-container .Select--multi.Select--rtl .Select-input { margin-left: 0; margin-right: 10px; } .editor_controls .dropdown-container .Select--multi.has-value .Select-input { margin-left: 5px; } .editor_controls .dropdown-container .Select--multi .Select-value { background-color: #f2f9fc; border-radius: 2px; border: 1px solid #c9e6f2; color: #08c; display: inline-block; font-size: 0.9em; margin-left: 5px; margin-top: 5px; vertical-align: top; } .editor_controls .dropdown-container .Select--multi .Select-value-icon, .editor_controls .dropdown-container .Select--multi .Select-value-label { display: inline-block; vertical-align: middle; } .editor_controls .dropdown-container .Select--multi .Select-value-label { border-bottom-right-radius: 2px; border-top-right-radius: 2px; cursor: default; padding: 2px 5px; } .editor_controls .dropdown-container .Select--multi a.Select-value-label { color: #08c; cursor: pointer; text-decoration: none; } .editor_controls .dropdown-container .Select--multi a.Select-value-label:hover { text-decoration: underline; } .editor_controls .dropdown-container .Select--multi .Select-value-icon { cursor: pointer; border-bottom-left-radius: 2px; border-top-left-radius: 2px; border-right: 1px solid #c9e6f2; padding: 1px 5px 3px; } .editor_controls .dropdown-container .Select--multi .Select-value-icon:hover, .editor_controls .dropdown-container .Select--multi .Select-value-icon:focus { background-color: #ddeff7; color: #0077b3; } .editor_controls .dropdown-container .Select--multi .Select-value-icon:active { background-color: #c9e6f2; } .editor_controls .dropdown-container .Select--multi.Select--rtl .Select-value { margin-left: 0; margin-right: 5px; } .editor_controls .dropdown-container .Select--multi.Select--rtl .Select-value-icon { border-right: none; border-left: 1px solid #c9e6f2; } .editor_controls .dropdown-container .Select--multi.is-disabled .Select-value { background-color: #fcfcfc; border: 1px solid #e3e3e3; color: #333; } .editor_controls .dropdown-container .Select--multi.is-disabled .Select-value-icon { cursor: not-allowed; border-right: 1px solid #e3e3e3; } .editor_controls .dropdown-container .Select--multi.is-disabled .Select-value-icon:hover, .editor_controls .dropdown-container .Select--multi.is-disabled .Select-value-icon:focus, .editor_controls .dropdown-container .Select--multi.is-disabled .Select-value-icon:active { background-color: #fcfcfc; } @keyframes Select-animation-spin { to { transform: rotate(1turn); } } @-webkit-keyframes Select-animation-spin { to { -webkit-transform: rotate(1turn); } } .editor_controls .dropdown-container:not(:last-child) { margin-bottom: var(--spacing-quarter-unit); } .editor_controls .dropdown-container .Select.is-focused > .Select-control { background-color: var(--color-background-inputs); } .editor_controls .dropdown-container .Select.is-focused > .Select-control .Select-input { background-color: var(--color-background-inputs) !important; } .editor_controls .dropdown-container .Select.is-open > .Select-control { border-color: var(--color-border-dark); background-color: var(--color-background-inputs) !important; } .editor_controls .dropdown-container .Select.is-open > .Select-control .Select-input { background-color: var(--color-background-inputs) !important; } .editor_controls .dropdown-container .Select:not(.is-open) .Select-control { background-color: var(--color-background-inputs) !important; } .editor_controls .dropdown-container .Select:not(.is-open) .Select-control:hover { border-color: var(--color-border-dark); } .editor_controls .dropdown-container .Select:not(.is-open) .Select-control:hover .Select-arrow { opacity: 1; } .editor_controls .dropdown-container .Select-control { background-color: var(--color-background-inputs); border: var(--border-default); box-shadow: none !important; color: var(--color-text-base); } .editor_controls .dropdown-container .Select-option { color: var(--color-text-base); } .editor_controls .dropdown-container .Select-menu-outer { border: var(--border-default); border-top-color: var(--color-border-default); background-color: transparent; box-shadow: var(--box-shadow-base); } .editor_controls .dropdown-container .Select.is-focused:not(.is-open) > .Select-control { border-color: var(--color-border-accent); } .editor_controls .dropdown-container .Select.has-value.Select--single > .Select-control .Select-value .Select-value-label, .editor_controls .dropdown-container .Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label { color: var(--color-text-base); } .editor_controls .dropdown-container .Select.is-open .Select-arrow, .editor_controls .dropdown-container .editor_controls .dropdown-container .Select .Select-arrow-zone:hover > .Select-arrow { border-color: transparent transparent var(--color-border-accent) !important; } .editor_controls .dropdown-container .Select-arrow-zone:hover .Select-arrow { border-top-color: var(--color-border-accent) !important; } .editor_controls .dropdown-container .Select-arrow { border-color: var(--color-border-default) transparent transparent; } .editor_controls .dropdown-container .Select-option { background-color: var(--color-background-inputs); } .editor_controls .dropdown-container .Select-option.is-selected { color: var(--color-text-active); font-weight: var(--font-weight-semibold); background-color: var(--color-background-light); } .editor_controls .dropdown-container .Select-option.is-focused { background-color: var(--color-background-light); color: var(--color-text-active); } .editor_controls .dropdown-container .Select-option:hover { color: var(--color-text-active); background-color: var(--color-background-light); } .editor_controls .dropdown-container .Select-placeholder, .editor_controls .dropdown-container .Select--single > .Select-control .Select-value { color: var(--color-text-base); } .editor_controls .dropdown-container .Select-value-label { color: var(--color-text-base) !important; } .editor_controls .dropdown-container .Select-placeholder { color: var(--color-text-placeholder); } .editor_controls .dropdown-container .dropdown--dark .Select-control { background-color: var(--color-background-inverse); } .editor_controls .dropdown-container .dropdown--dark .Select-option { background-color: var(--color-background-inverse); } .editor_controls .dropdown-container .dropdown--dark .Select-option.is-selected { background-color: var(--color-border-default); } .editor_controls .dropdown-container .dropdown--dark .Select.is-focused { background-color: var(--color-border-light); } .editor_controls ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: var(--color-text-placeholder); } .editor_controls ::-moz-placeholder { /* Firefox 19+ */ color: var(--color-text-placeholder); } .editor_controls :-ms-input-placeholder { /* IE 10+ */ color: var(--color-text-placeholder); } .editor_controls :-moz-placeholder { /* Firefox 18- */ color: var(--color-text-placeholder); } .editor_controls .numeric-input__wrapper { line-height: 20px; max-width: 100%; flex: 1; display: flex; align-items: center; color: var(--color-text-base); } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .editor_controls .numeric-input__wrapper { flex-basis: auto; } } .editor_controls .numeric-input__number { display: inline-block; border: var(--border-default); background: var(--color-background-inputs); cursor: text; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; border-radius: var(--border-radius-small); padding: var(--spacing-quarter-unit) var(--spacing-quarter-unit) var(--spacing-quarter-unit) var(--spacing-half-unit); width: 62px; vertical-align: middle; font-size: inherit; color: inherit; font-family: inherit; } .editor_controls .numeric-input__caret-box { display: inline-block; max-height: 32px; margin-left: var(--spacing-quarter-unit); margin-right: var(--spacing-half-unit); vertical-align: middle; box-sizing: border-box; } .editor_controls .numeric-input__caret:first-child { margin-bottom: 2px; } .editor_controls .numeric-input__caret { cursor: pointer; background-color: var(--color-background-light); border: var(--border-default); border-radius: 1px; line-height: var(--spacing-half-unit); text-align: center; } .editor_controls .numeric-top-caret-modifier { width: 13px !important; height: 13px !important; fill: var(--color-text-base) !important; } .editor_controls .numeric-bottom-caret-modifier { width: 13px !important; height: 13px !important; fill: var(--color-text-base) !important; } .editor_controls ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: var(--color-text-placeholder); } .editor_controls ::-moz-placeholder { /* Firefox 19+ */ color: var(--color-text-placeholder); } .editor_controls :-ms-input-placeholder { /* IE 10+ */ color: var(--color-text-placeholder); } .editor_controls :-moz-placeholder { /* Firefox 18- */ color: var(--color-text-placeholder); } .editor_controls .text-input { display: inline-block; border: var(--border-default); background: var(--color-background-inputs); cursor: text; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; border-radius: var(--border-radius-small); padding: var(--spacing-quarter-unit) var(--spacing-quarter-unit) var(--spacing-quarter-unit) var(--spacing-half-unit); width: 140px; vertical-align: middle; font-size: inherit; color: inherit; font-family: inherit; } .editor_controls .radio-block { width: 100%; line-height: var(--font-leading-head); display: flex; } .editor_controls .radio-block__option { flex-grow: 1; padding: var(--spacing-quarter-unit) var(--spacing-half-unit); background-color: var(--color-background-top); border: var(--border-default); display: inline-block; cursor: pointer; min-width: 0px; text-align: center; font-size: var(--font-size-small); } .editor_controls .radio-block__option:not(.radio-block__option--active):hover { background-color: var(--color-background-light); color: var(--color-text-active); } .editor_controls .radio-block__option--active { background-color: var(--color-button-primary-base-fill); color: var(--color-button-primary-base-text); border: 1px solid var(--color-button-primary-base-border); margin-left: -1px; cursor: default; text-shadow: var(--text-shadow-dark-ui); font-weight: var(--font-weight-semibold); } .editor_controls .radio-block__option--active:not(:first-child), .editor_controls .radio-block__option--active:last-child { border-left: var(--border-accent-shade) !important; } .editor_controls .radio-block__option:not(:first-child):not(:last-child) { border-left: 0; } .editor_controls .radio-block__option:last-child { border-top-right-radius: var(--border-radius-small); border-bottom-right-radius: var(--border-radius-small); border-left: 0; } .editor_controls .radio-block__option:first-child { border-top-left-radius: var(--border-radius-small); border-bottom-left-radius: var(--border-radius-small); } .editor_controls .radio-block__option:first-child:not(.radio-block__option--active) { border-left: var(--border-default); } .editor_controls .text-editor { overflow: hidden; border: var(--border-default); border-radius: var(--border-radius); min-height: 155px; display: flex; flex-direction: column; flex-grow: 1; } .editor_controls .text-editor * { box-sizing: border-box; } .editor_controls .text-editor textarea[class='multi-format-editor__latex'] { height: 155px; width: 100%; margin: 10px; border: var(--border-default); } .editor_controls .text-editor textarea[class='multi-format-editor__html'] { height: 145px; width: 100%; } .editor_controls .text-editor textarea { width: 100%; height: 100%; border: none; overflow: auto; outline: none; box-shadow: none; padding: var(--spacing-quarter-unit); resize: none; line-height: 24px; font-size: 13px; color: var(--color-text-base); background-color: var(--color-background-inputs); } .editor_controls .multi-format-editor__root { display: flex; overflow: hidden; height: 205px; } .editor_controls .multi-format-editor__root__wrapper { flex-grow: 1; display: flex; flex-wrap: wrap; align-items: stretch; flex-direction: column; } .editor_controls .multi-format-editor__tabs { height: 30px; display: block; width: 100%; } .editor_controls .multi-format-editor__tab { text-align: center; height: 30px; line-height: 28px; box-sizing: border-box; } .editor_controls .multi-format-editor__tab.top-tab { width: 50%; overflow: hidden; color: var(--color-text-base); display: inline-block; } .editor_controls .multi-format-editor__tab.top-tab.left { border-top-left-radius: 5px; border-right: var(--border-default); } .editor_controls .multi-format-editor__tab.top-tab.right { border-top-right-radius: 5px; } .editor_controls .multi-format-editor__tab.top-tab:not(.selected) { border-bottom: var(--border-default); } .editor_controls .multi-format-editor__tab.bottom-tab { border-top: var(--border-default); width: 100%; display: block; color: var(--color-text-base); } .editor_controls .multi-format-editor__tab.selected { background: var(--color-background-light); font-weight: var(--font-weight-semibold); } .editor_controls .multi-format-editor__tab:hover:not(.selected) { cursor: pointer; color: var(--color-text-active); background-color: var(--color-background-light); } .editor_controls .multi-format-editor__content__wrapper__rich_text { flex-grow: 1; display: flex; flex-direction: column; } .editor_controls .multi-format-editor__content__wrapper__latex { background-color: var(--color-background-light); display: flex; align-items: center; justify-content: center; } .editor_controls .multi-format-editor__content__wrapper__html { display: flex; align-items: center; justify-content: center; } .editor_controls .multi-format-editor__confirmation-panel { height: 100%; max-height: 100%; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: flex-start; flex: 1; } .editor_controls .multi-format-editor__confirmation-panel__header { color: var(--color-text-section-header); margin-top: 0; margin-bottom: 5px; font-weight: 600; } .editor_controls .multi-format-editor__confirmation-panel__content { overflow-y: auto; display: flex; flex-direction: column; -webkit-overflow-scrolling: touch; padding: var(--spacing-half-unit); } .editor_controls .multi-format-editor__confirmation-panel__content::-webkit-scrollbar { background: white; width: 5px; } .editor_controls .multi-format-editor__confirmation-panel__content::-webkit-scrollbar-track { box-shadow: none; background: var(--scrollbar-track-background); } .editor_controls .multi-format-editor__confirmation-panel__content::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-color); border-radius: 10px; } .editor_controls .multi-format-editor__confirmation-panel__actions { padding: var(--spacing-half-unit); width: 100%; display: flex; justify-content: center; align-items: center; border-top: 1px solid var(--color-border-light); -webkit-overflow-scrolling: touch; } .editor_controls .multi-format-editor__confirmation-panel__actions::-webkit-scrollbar { background: white; width: 5px; } .editor_controls .multi-format-editor__confirmation-panel__actions::-webkit-scrollbar-track { box-shadow: none; background: var(--scrollbar-track-background); } .editor_controls .multi-format-editor__confirmation-panel__actions::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-color); border-radius: 10px; } .editor_controls .multi-format-editor__confirmation-panel__message { line-height: 20px; } .editor_controls .multi-format-editor__confirmation-panel__message-primary { font-weight: var(--font-weight-semibold); color: var(--color-text-base); } .editor_controls .multi-format-editor__confirmation-panel__message-secondary { color: var(--color-text-base); } .editor_controls .multi-format-editor__confirmation-panel__continue-button { margin-left: 10px; } .editor_controls .rich-text-editor__root { border-top: none; width: 100%; color: var(--color-text-base); display: flex; flex-direction: column; flex-grow: 1; } .editor_controls .rich-text-editor__editor { cursor: text; position: relative; flex-grow: 1; } .editor_controls .rich-text-editor__editor > div { position: absolute; width: 100%; height: 100%; max-width: 100%; max-height: 100%; overflow: auto; flex-grow: 1; left: 0; top: 0; } .editor_controls .rich-text-editor__controls { display: flex; justify-content: space-evenly; background: var(--color-background-light); font-size: 14px; padding: 10px 0; user-select: none; border-bottom: var(--border-default); } .editor_controls .rich-text-editor__controls .icon-link { transform: translateY(3px); display: inline-block; fill: var(--color-text-base); width: 15px !important; height: 15px !important; } .editor_controls .rich-text-editor__link-editor { background-color: var(--color-background-light); border: var(--border-default); padding: var(--spacing-half-unit); position: absolute; z-index: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; } .editor_controls .rich-text-editor__link-editor__label { display: block; } .editor_controls .rich-text-editor__link-editor__input { border: var(--border-default); color: var(--color-text-base); overflow: scroll; padding: 0 10px; width: 100%; margin-top: 10px; } .editor_controls .rich-text-editor__styleButton { color: var(--color-text-base); cursor: pointer; display: inline-block; margin: 0; min-height: var(--spacing-base-unit); min-width: var(--spacing-base-unit); text-align: center; background-color: transparent; border: var(--border-default); border-radius: var(--border-radius-small); line-height: 20px; position: relative; } .editor_controls .rich-text-editor__styleButton__wrapper { padding: 0 var(--spacing-quarter-unit); } .editor_controls .rich-text-editor__styleButton--active { background-color: var(--color-accent); border: var(--border-accent-shade); color: var(--color-white); } .editor_controls .rich-text-editor__styleButton--active:hover { background-color: var(--color-accent); border: var(--border-accent-shade); color: var(--color-white); } .editor_controls .rich-text-editor__styleButton--active:hover::before { transform: scaleX(0); } .editor_controls .rich-text-editor__styleButton::before { content: ''; position: absolute; bottom: -1px; height: 1px; width: calc(100% + 2px); left: -1px; background: var(--color-accent); will-change: transform; transform-origin: center center; transform: scaleX(0); transition: all 0.15s ease-in-out; } .editor_controls .rich-text-editor__styleButton:hover { color: var(--color-text-active); background-color: var(--color-background-top); } .editor_controls .rich-text-editor__styleButton:hover::before { transform: none; } .editor_controls .rich-text-editor__editor .public-DraftEditorPlaceholder-root, .editor_controls .rich-text-editor__editor .public-DraftEditor-content { padding: var(--spacing-quarter-unit); } .editor_controls .rich-text-editor__editor .public-DraftEditor-content { min-height: 100px; } .editor_controls .RichEditor-hidePlaceholder .public-DraftEditorPlaceholder-root { display: none; } .editor_controls .rich-text-editor__editor .RichEditor-blockquote { border-left: 5px solid #eee; color: #666; font-style: italic; margin: 16px 0; padding: 10px 20px; } .editor_controls .rich-text-editor__editor .public-DraftStyleDefault-pre { background-color: rgba(0, 0, 0, 0.05); font-size: 16px; padding: 20px; } .editor_controls .DraftEditor-editorContainer, .editor_controls .DraftEditor-root, .editor_controls .public-DraftEditor-content { height: inherit; text-align: initial; } .editor_controls .DraftEditor-root { position: relative; } .editor_controls .DraftEditor-editorContainer { background-color: rgba(255, 255, 255, 0); border-left: 0.1px solid transparent; position: relative; z-index: 1; } .editor_controls .public-DraftEditor-block { position: relative; } .editor_controls .DraftEditor-alignLeft .public-DraftStyleDefault-block { text-align: left; } .editor_controls .DraftEditor-alignLeft .public-DraftEditorPlaceholder-root { left: 0; text-align: left; } .editor_controls .DraftEditor-alignCenter .public-DraftStyleDefault-block { text-align: center; } .editor_controls .DraftEditor-alignCenter .public-DraftEditorPlaceholder-root { margin: 0 auto; text-align: center; width: 100%; } .editor_controls .DraftEditor-alignRight .public-DraftStyleDefault-block { text-align: right; } .editor_controls .DraftEditor-alignRight .public-DraftEditorPlaceholder-root { right: 0; text-align: right; } .editor_controls .public-DraftEditorPlaceholder-root { color: #9197a3; position: absolute; z-index: 0; } .editor_controls .public-DraftEditorPlaceholder-hasFocus { color: #bdc1c9; } .editor_controls .DraftEditorPlaceholder-hidden { display: none; } .editor_controls .public-DraftStyleDefault-block { position: relative; white-space: pre-wrap; } .editor_controls .public-DraftStyleDefault-ltr { direction: ltr; text-align: left; } .editor_controls .public-DraftStyleDefault-rtl { direction: rtl; text-align: right; } .editor_controls .public-DraftStyleDefault-listLTR { direction: ltr; } .editor_controls .public-DraftStyleDefault-listRTL { direction: rtl; } .editor_controls .public-DraftStyleDefault-ol, .editor_controls .public-DraftStyleDefault-ul { margin: 16px 0; padding: 0; } .editor_controls .public-DraftStyleDefault-depth0.public-DraftStyleDefault-listLTR { margin-left: 1.5em; } .editor_controls .public-DraftStyleDefault-depth0.public-DraftStyleDefault-listRTL { margin-right: 1.5em; } .editor_controls .public-DraftStyleDefault-depth1.public-DraftStyleDefault-listLTR { margin-left: 3em; } .editor_controls .public-DraftStyleDefault-depth1.public-DraftStyleDefault-listRTL { margin-right: 3em; } .editor_controls .public-DraftStyleDefault-depth2.public-DraftStyleDefault-listLTR { margin-left: 4.5em; } .editor_controls .public-DraftStyleDefault-depth2.public-DraftStyleDefault-listRTL { margin-right: 4.5em; } .editor_controls .public-DraftStyleDefault-depth3.public-DraftStyleDefault-listLTR { margin-left: 6em; } .editor_controls .public-DraftStyleDefault-depth3.public-DraftStyleDefault-listRTL { margin-right: 6em; } .editor_controls .public-DraftStyleDefault-depth4.public-DraftStyleDefault-listLTR { margin-left: 7.5em; } .editor_controls .public-DraftStyleDefault-depth4.public-DraftStyleDefault-listRTL { margin-right: 7.5em; } .editor_controls .public-DraftStyleDefault-unorderedListItem { list-style-type: square; position: relative; } .editor_controls .public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth0 { list-style-type: disc; } .editor_controls .public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth1 { list-style-type: circle; } .editor_controls .public-DraftStyleDefault-orderedListItem { list-style-type: none; position: relative; } .editor_controls .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listLTR:before { left: -36px; position: absolute; text-align: right; width: 30px; } .editor_controls .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listRTL:before { position: absolute; right: -36px; text-align: left; width: 30px; } .editor_controls .public-DraftStyleDefault-orderedListItem:before { content: counter(ol0) ". "; counter-increment: ol0; } .editor_controls .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth1:before { content: counter(ol1) ". "; counter-increment: ol1; } .editor_controls .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth2:before { content: counter(ol2) ". "; counter-increment: ol2; } .editor_controls .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth3:before { content: counter(ol3) ". "; counter-increment: ol3; } .editor_controls .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth4:before { content: counter(ol4) ". "; counter-increment: ol4; } .editor_controls .public-DraftStyleDefault-depth0.public-DraftStyleDefault-reset { counter-reset: ol0; } .editor_controls .public-DraftStyleDefault-depth1.public-DraftStyleDefault-reset { counter-reset: ol1; } .editor_controls .public-DraftStyleDefault-depth2.public-DraftStyleDefault-reset { counter-reset: ol2; } .editor_controls .public-DraftStyleDefault-depth3.public-DraftStyleDefault-reset { counter-reset: ol3; } .editor_controls .public-DraftStyleDefault-depth4.public-DraftStyleDefault-reset { counter-reset: ol4; } .editor_controls .rangeslider { margin: 0 var(--spacing-quarter-unit); min-width: 60px; position: relative; background: var(--color-background-light); -ms-touch-action: none; touch-action: none; border: 1px solid var(--color-border-default); flex-grow: 1; } .editor_controls .rangeslider, .editor_controls .rangeslider .rangeslider__fill { display: block; } .editor_controls .rangeslider .rangeslider__handle { outline: 0; background: #fff; border: 1px solid var(--color-border-default); cursor: pointer; display: inline-block; position: absolute; } .editor_controls .rangeslider .rangeslider__handle .rangeslider__active { opacity: 1; } .editor_controls .rangeslider .rangeslider__handle-tooltip { width: 20px; height: 20px; text-align: center; position: absolute; background-color: rgba(0, 0, 0, 0.8); font-weight: normal; font-size: 14px; transition: all 100ms ease-in; border-radius: 4px; display: inline-block; color: white; left: 50%; transform: translate3d(-50%, 0, 0); } .editor_controls .rangeslider .rangeslider__handle-tooltip span { margin-top: 12px; display: inline-block; line-height: 100%; } .editor_controls .rangeslider .rangeslider__handle-tooltip:after { content: ' '; position: absolute; width: 0; height: 0; } .editor_controls .rangeslider-horizontal { height: 6px; border-radius: 10px; } .editor_controls .rangeslider-horizontal .rangeslider__fill { height: 100%; background-color: var(--color-accent); border: var(--border-accent); border-radius: 10px; transform: translateY(-1px); top: 0; } .editor_controls .rangeslider-horizontal .rangeslider__handle { width: 6.66667px; height: 30px; border-radius: 20px; top: 50%; transform: translate3d(-50%, -50%, 0); display: flex; align-items: center; justify-content: center; } .editor_controls .rangeslider-horizontal .rangeslider__handle:after { content: ' '; position: absolute; width: 4px; height: 20px; border-radius: 5px; background-color: var(--color-accent); display: none; } .editor_controls .rangeslider-horizontal .rangeslider__handle-tooltip { top: -55px; } .editor_controls .rangeslider-horizontal .rangeslider__handle-tooltip:after { border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid rgba(0, 0, 0, 0.8); left: 50%; bottom: -8px; transform: translate3d(-50%, 0, 0); } .editor_controls .rangeslider-vertical { margin: 20px auto; height: 150px; max-width: 10px; background-color: transparent; } .editor_controls .rangeslider-vertical .rangeslider__fill, .editor_controls .rangeslider-vertical .rangeslider__handle { position: absolute; } .editor_controls .rangeslider-vertical .rangeslider__fill { width: 100%; background-color: #7cb342; box-shadow: none; bottom: 0; } .editor_controls .rangeslider-vertical .rangeslider__handle { width: 30px; height: 10px; left: -10px; box-shadow: none; } .editor_controls .rangeslider-vertical .rangeslider__handle-tooltip { left: -100%; top: 50%; transform: translate3d(-50%, -50%, 0); } .editor_controls .rangeslider-vertical .rangeslider__handle-tooltip:after { border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 8px solid rgba(0, 0, 0, 0.8); left: 100%; top: 12px; } .editor_controls .rangeslider-reverse.rangeslider-horizontal .rangeslider__fill { right: 0; } .editor_controls .rangeslider-reverse.rangeslider-vertical .rangeslider__fill { top: 0; bottom: inherit; } .editor_controls .rangeslider__labels { position: relative; } .rangeslider-vertical .editor_controls .rangeslider__labels { position: relative; list-style-type: none; margin: 0 0 0 24px; padding: 0; text-align: left; width: 250px; height: 100%; left: 10px; } .rangeslider-vertical .editor_controls .rangeslider__labels .rangeslider__label-item { position: absolute; transform: translate3d(0, -50%, 0); } .rangeslider-vertical .editor_controls .rangeslider__labels .rangeslider__label-item::before { content: ''; width: 10px; height: 2px; background: black; position: absolute; left: -14px; top: 50%; transform: translateY(-50%); z-index: -1; } .editor_controls .rangeslider__labels .rangeslider__label-item { position: absolute; font-size: 14px; cursor: pointer; display: inline-block; top: 10px; transform: translate3d(-50%, 0, 0); } .editor_controls .trace-grid-single-block { max-width: 460px; display: flex; flex-flow: wrap; padding: var(--spacing-quarter-unit); } .editor_controls .trace-grid { display: grid; grid-template-columns: repeat(4, 1fr); } @media (max-width: 860px) { .editor_controls .trace-grid { grid-template-columns: repeat(2, 1fr); } } .editor_controls .trace-grid__column { text-align: center; display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; flex-shrink: 0; flex-grow: 0; } .editor_controls .trace-grid__column:nth-of-type(4n + 3) { -ms-grid-column: 1; } .editor_controls .trace-grid__column:nth-of-type(4n) { -ms-grid-column: 2; } .editor_controls .trace-grid__column:nth-of-type(4n + 1) { -ms-grid-column: 3; } .editor_controls .trace-grid__column:nth-of-type(4n + 2) { -ms-grid-column: 4; } .editor_controls .trace-grid__column:nth-of-type(3), .editor_controls .trace-grid__column:nth-of-type(4), .editor_controls .trace-grid__column:nth-of-type(5), .editor_controls .trace-grid__column:nth-of-type(6) { -ms-grid-row: 2; } .editor_controls .trace-grid__column:nth-of-type(7), .editor_controls .trace-grid__column:nth-of-type(8), .editor_controls .trace-grid__column:nth-of-type(9), .editor_controls .trace-grid__column:nth-of-type(10) { -ms-grid-row: 3; } .editor_controls .trace-grid__column .trace-item:nth-of-type(2n + 1) { -ms-grid-column: 1; } .editor_controls .trace-grid__column .trace-item:nth-of-type(2n + 2) { -ms-grid-column: 2; } .editor_controls .trace-grid__column .trace-item:nth-of-type(3), .editor_controls .trace-grid__column .trace-item:nth-of-type(4) { -ms-grid-row: 2; } .editor_controls .trace-grid__column .trace-item:nth-of-type(5), .editor_controls .trace-grid__column .trace-item:nth-of-type(6) { -ms-grid-row: 3; } .editor_controls .trace-grid__column .trace-item:nth-of-type(7), .editor_controls .trace-grid__column .trace-item:nth-of-type(8) { -ms-grid-row: 4; } .editor_controls .trace-grid__column:not(:first-of-type) { position: relative; } .editor_controls .trace-grid__column:not(:first-of-type)::before { position: absolute; width: 1px; border-left: var(--border-light); height: 100%; top: 0; left: 0; content: ''; } .editor_controls .trace-grid__column:not(:first-of-type) .trace-grid__column__header { position: relative; z-index: 99; } .editor_controls .trace-grid__column--double { grid-column: span 2; flex-grow: 0; } .editor_controls .trace-grid__column--double:nth-of-type(2n + 1) { -ms-grid-column: 1; } .editor_controls .trace-grid__column--double:nth-of-type(2n + 2) { -ms-grid-column: 3; } .editor_controls .trace-grid__column--double:nth-of-type(5), .editor_controls .trace-grid__column--double:nth-of-type(6) { -ms-grid-row: 2; } .editor_controls .trace-grid__column--double:nth-of-type(7), .editor_controls .trace-grid__column--double:nth-of-type(8) { -ms-grid-row: 3; } .editor_controls .trace-grid__column--double .trace-item:nth-of-type(4n + 1) { -ms-grid-column: 1; } .editor_controls .trace-grid__column--double .trace-item:nth-of-type(4n + 2) { -ms-grid-column: 2; } .editor_controls .trace-grid__column--double .trace-item:nth-of-type(4n + 3) { -ms-grid-column: 3; } .editor_controls .trace-grid__column--double .trace-item:nth-of-type(4n) { -ms-grid-column: 4; } .editor_controls .trace-grid__column--double .trace-item:nth-of-type(3), .editor_controls .trace-grid__column--double .trace-item:nth-of-type(4) { -ms-grid-row: 1; } .editor_controls .trace-grid__column--double .trace-item:nth-of-type(5), .editor_controls .trace-grid__column--double .trace-item:nth-of-type(6), .editor_controls .trace-grid__column--double .trace-item:nth-of-type(7), .editor_controls .trace-grid__column--double .trace-item:nth-of-type(8) { -ms-grid-row: 2; } .editor_controls .trace-grid__column--double .trace-item:nth-of-type(9), .editor_controls .trace-grid__column--double .trace-item:nth-of-type(10), .editor_controls .trace-grid__column--double .trace-item:nth-of-type(11), .editor_controls .trace-grid__column--double .trace-item:nth-of-type(12) { -ms-grid-row: 3; } .editor_controls .trace-grid__column--double .trace-grid__column__items { display: grid; grid-gap: 0; grid-template-columns: repeat(4, 1fr); } .editor_controls .trace-grid__column__items { display: grid; grid-gap: 0; grid-template-columns: repeat(2, 90px); grid-template-rows: repeat(2, 112px); flex-grow: 1; width: 100%; padding: 0 var(--spacing-half-unit) var(--spacing-half-unit); } .editor_controls .trace-grid__column__header { text-transform: capitalize; font-weight: var(--font-weight-semibold); color: var(--color-text-base); text-align: left; display: flex; align-items: center; justify-content: flex-start; border-top: var(--border-light); width: 100%; padding: var(--spacing-half-unit) var(--spacing-base-unit) 0; box-sizing: border-box; } .editor_controls .trace-item { width: 90px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; flex-grow: 0; margin-top: var(--spacing-half-unit); color: var(--color-text-base); transition: all 0.15s ease-in-out; position: relative; } .editor_controls .trace-item--active .trace-item__image { border-color: var(--color-accent); border-width: 2px; color: var(--color-accent); } .editor_controls .trace-item__actions { position: absolute; width: calc(100%); display: flex; flex-direction: column; top: 0; left: var(--spacing-quarter-unit); justify-content: flex-start; align-items: flex-end; z-index: 99; height: 60px; } .editor_controls .trace-item__actions:hover .trace-item__actions__item { transform: translateX(-2px); opacity: 1; pointer-events: initial; } .editor_controls .trace-item__actions__item { transform: translateX(-10px); opacity: 0; pointer-events: none; color: var(--color-text-light); transition: all 0.15s ease-in-out; } .editor_controls .trace-item__actions__item:not(:last-child) { margin-bottom: var(--spacing-quarter-unit); } .editor_controls .trace-item__actions__item:hover { color: var(--color-accent); } .editor_controls .trace-item__actions__item svg { display: block; width: 16px; height: 16px; fill: currentColor; } .editor_controls .trace-item:hover { cursor: pointer; color: var(--color-accent); } .editor_controls .trace-item:hover .trace-item__label { color: var(--color-accent); } .editor_controls .trace-item:hover .trace-item__image { border-color: var(--color-accent); } .editor_controls .trace-item__image { position: relative; z-index: 2; border: 1px solid var(--color-border-default); width: 60px; height: 60px; border-radius: var(--border-radius); background: var(--color-background-top); box-shadow: 0 2px 9px transparent; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease-in-out; } .editor_controls .trace-item__image__svg { width: 100%; flex-grow: 1; padding: var(--spacing-quarter-unit); } .editor_controls .trace-item__image svg { display: block; } .editor_controls .trace-item__image img { display: block; font-size: 10px; color: var(--color-text-base); } .editor_controls .trace-item__image__wrapper { width: 100%; } .editor_controls .trace-item__label { font-weight: var(--font-weight-semibold); width: 72px; height: 34px; margin-top: var(--spacing-quarter-unit); color: var(--color-text-base); text-transform: capitalize; font-size: var(--font-size-small); text-align: center; } .editor_controls .trace-type-select-dropdown__wrapper > * > * { pointer-events: none; } .editor_controls .trace-type-select-dropdown__wrapper > *:hover { cursor: pointer; } .editor_controls .trace-type-select-dropdown__wrapper > *:hover .Select:not(.is-open) .Select-control { border-color: var(--color-border-dark); } .editor_controls .trace-type-select-button { display: flex; align-items: center; border: var(--border-default); width: 100%; height: 36px; border-radius: var(--border-radius); padding: 0 var(--spacing-quarter-unit); } .editor_controls .trace-type-select-button:hover { cursor: pointer; border-color: var(--color-border-dark); } .editor_controls .trace-type-select-button__icon { max-width: 20px; width: 20px; margin-right: var(--spacing-quarter-unit); } .editor_controls .trace-type-select-button__icon svg { max-width: 100%; display: block; } .editor_controls .trace-type-select-button__icon svg * { fill: currentColor; } .editor_controls .dropzone-container { flex-grow: 1; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--color-border-default); height: 160px; box-sizing: border-box; padding: 8px; border-radius: var(--border-radius); } .editor_controls .dropzone-container__content { width: 100%; height: 100%; text-align: center; background-color: var(--color-rhino-light-5); border-radius: var(--border-radius); display: flex; align-items: center; justify-content: center; } .editor_controls .dropzone-container__message { padding: 15px; } .editor_controls .dropzone-container__image { width: 100%; height: 100%; background-size: contain; background-position: center; position: relative; background-repeat: no-repeat; } .editor_controls .dropzone-container--active { border-color: var(--color-dodger); } .editor_controls .dropzone-container--rejected { border-color: red; } .editor_controls [aria-label][role~='tooltip'] { position: relative; } .editor_controls [aria-label][role~='tooltip']::before, .editor_controls [aria-label][role~='tooltip']::after { transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; display: none; will-change: transform; opacity: 0; pointer-events: none; transition: all var(--microtip-transition-duration, 0.18s) var(--microtip-transition-easing, ease-in-out) var(--microtip-transition-delay, 0s); position: absolute; box-sizing: border-box; z-index: 10; transform-origin: top; } .editor_controls [aria-label][role~='tooltip']::before { background-size: 100% auto !important; content: ''; } .editor_controls [aria-label][role~='tooltip']::after { background: #506784; border-radius: 4px; color: #ffffff; content: attr(aria-label); font-size: var(--microtip-font-size, 13px); font-weight: var(--microtip-font-weight, normal); text-transform: var(--microtip-text-transform, none); padding: 0.5em 1em; white-space: nowrap; box-sizing: content-box; } .editor_controls [aria-label][role~='tooltip']:hover::before, .editor_controls [aria-label][role~='tooltip']:hover::after, .editor_controls [aria-label][role~='tooltip']:focus::before, .editor_controls [aria-label][role~='tooltip']:focus::after { opacity: 1; pointer-events: auto; display: block; } .editor_controls [role~='tooltip'][data-microtip-position|='top']::before { background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2880,%20103,%20132,%201%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat; height: 6px; width: 18px; margin-bottom: 5px; } .editor_controls [role~='tooltip'][data-microtip-position|='top']::after { margin-bottom: 11px; } .editor_controls [role~='tooltip'][data-microtip-position|='top']::before { transform: translate3d(-50%, 0, 0); bottom: 100%; left: 50%; } .editor_controls [role~='tooltip'][data-microtip-position|='top']:hover::before { transform: translate3d(-50%, -5px, 0); } .editor_controls [role~='tooltip'][data-microtip-position|='top']::after { transform: translate3d(-50%, 0, 0); bottom: 100%; left: 50%; } .editor_controls [role~='tooltip'][data-microtip-position='top']:hover::after { transform: translate3d(-50%, -5px, 0); } .editor_controls [role~='tooltip'][data-microtip-position='top-left']::after { transform: translate3d(calc(-100% + 16px), 0, 0); bottom: 100%; } .editor_controls [role~='tooltip'][data-microtip-position='top-left']:hover::after { transform: translate3d(calc(-100% + 16px), -5px, 0); } .editor_controls [role~='tooltip'][data-microtip-position='top-right']::after { transform: translate3d(calc(0% + -16px), 0, 0); bottom: 100%; } .editor_controls [role~='tooltip'][data-microtip-position='top-right']:hover::after { transform: translate3d(calc(0% + -16px), -5px, 0); } .editor_controls [role~='tooltip'][data-microtip-position|='bottom']::before { background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2880,%20103,%20132,%201%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat; height: 6px; width: 18px; margin-top: 5px; margin-bottom: 0; } .editor_controls [role~='tooltip'][data-microtip-position|='bottom']::after { margin-top: 11px; } .editor_controls [role~='tooltip'][data-microtip-position|='bottom']::before { transform: translate3d(-50%, -10px, 0); bottom: auto; left: 10px; top: 100%; } .editor_controls [role~='tooltip'][data-microtip-position|='bottom']:hover::before { transform: translate3d(-50%, 0, 0); } .editor_controls [role~='tooltip'][data-microtip-position|='bottom']::after { transform: translate3d(-50%, -10px, 0); left: 10px; top: 100%; } .editor_controls [role~='tooltip'][data-microtip-position='bottom']:hover::after { transform: translate3d(-50%, 0, 0); } .editor_controls [role~='tooltip'][data-microtip-position='bottom-left']::after { transform: translate3d(calc(-100% + 16px), -10px, 0); top: 100%; } .editor_controls [role~='tooltip'][data-microtip-position='bottom-left']:hover::after { transform: translate3d(calc(-100% + 16px), 0, 0); } .editor_controls [role~='tooltip'][data-microtip-position='bottom-right']::after { transform: translate3d(calc(0% + -16px), -10px, 0); top: 100%; } .editor_controls [role~='tooltip'][data-microtip-position='bottom-right']:hover::after { transform: translate3d(calc(0% + -16px), 0, 0); } .editor_controls [role~='tooltip'][data-microtip-position='left']::before, .editor_controls [role~='tooltip'][data-microtip-position='left']::after { bottom: auto; left: auto; right: 100%; top: 50%; transform: translate3d(10px, -50%, 0); } .editor_controls [role~='tooltip'][data-microtip-position='left']::before { background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2880,%20103,%20132,%201%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat; height: 18px; width: 6px; margin-right: 5px; margin-bottom: 0; } .editor_controls [role~='tooltip'][data-microtip-position='left']::after { margin-right: 11px; } .editor_controls [role~='tooltip'][data-microtip-position='left']:hover::before, .editor_controls [role~='tooltip'][data-microtip-position='left']:hover::after { transform: translate3d(0, -50%, 0); } .editor_controls [role~='tooltip'][data-microtip-position='right']::before, .editor_controls [role~='tooltip'][data-microtip-position='right']::after { bottom: auto; left: 100%; top: 50%; transform: translate3d(-10px, -50%, 0); } .editor_controls [role~='tooltip'][data-microtip-position='right']::before { background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2880,%20103,%20132,%201%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat; height: 18px; width: 6px; margin-bottom: 0; margin-left: 5px; } .editor_controls [role~='tooltip'][data-microtip-position='right']::after { margin-left: 11px; } .editor_controls [role~='tooltip'][data-microtip-position='right']:hover::before, .editor_controls [role~='tooltip'][data-microtip-position='right']:hover::after { transform: translate3d(0, -50%, 0); } .editor_controls [role~='tooltip'][data-microtip-size='small']::after { white-space: initial; width: 80px; } .editor_controls [role~='tooltip'][data-microtip-size='medium']::after { white-space: initial; width: 140px; } .editor_controls [role~='tooltip'][data-microtip-size='large']::after { white-space: initial; width: 260px; } .editor_controls__wrapper { display: flex; flex-grow: 1; } .editor_controls a { color: #0d76bf; cursor: pointer; } .plotly_editor { display: flex; /* We are defining the max height of the app so that the editor knows how big to be currently the editor will take up whatever space it can if it is not constrained in its parent */ flex-grow: 1; height: 100%; max-height: 100%; width: 100%; } .plotly_editor_plot { max-width: 100%; height: 100%; max-height: 100%; overflow: auto; flex-grow: 1; }