payload/components/styles.css

Node, React and MongoDB Headless CMS and Application Framework

.banner{background:var(--theme-elevation-100);border:0;border-radius:3px;color:var(--theme-elevation-800);font-size:1rem;line-height:1.9230769231rem;margin-bottom:1.9230769231rem;padding:.9615384615rem;vertical-align:middle}.banner--has-action{cursor:pointer;-webkit-text-decoration:none;text-decoration:none}.banner--has-icon{display:flex}.banner--has-icon svg{display:block}.banner--type-default.button--has-action:hover{background:var(--theme-elevation-900)}.banner--type-default.button--has-action:active{background:var(--theme-elevation-950)}.banner--type-error{background:var(--theme-error-100);color:var(--theme-error-500)}.banner--type-error svg .stroke{stroke:var(--theme-error-500);fill:none}.banner--type-error svg .fill{fill:var(--theme-error-500)}.banner--type-error.button--has-action:hover{background:var(--theme-error-200)}.banner--type-error.button--has-action:active{background:var(--theme-error-300)}.banner--type-success{background:var(--theme-success-500);color:var(--color-base-800)}.banner--type-success.button--has-action:active,.banner--type-success.button--has-action:hover{background:var(--theme-success-200)}.icon--chevron{height:calc(var(--base)/2);width:calc(var(--base)/2)}.icon--chevron .stroke{fill:none;stroke:var(--theme-elevation-800);stroke-width:2px;vector-effect:non-scaling-stroke}.icon--chevron--size-large{height:var(--base);width:var(--base)}.icon--edit{shape-rendering:auto;height:1.9230769231rem;width:1.9230769231rem}.icon--edit .fill{fill:var(--theme-elevation-800);stroke:none}.icon--link{height:1.9230769231rem;width:1.9230769231rem}.icon--link .stroke{stroke:var(--theme-elevation-800);stroke-width:1px}.icon--plus{height:1.9230769231rem;width:1.9230769231rem}.icon--plus .stroke{stroke:var(--theme-elevation-800);stroke-width:1px}.icon--swap{height:1.9230769231rem;width:1.9230769231rem}.icon--swap .stroke{fill:none;stroke:var(--theme-elevation-800);stroke-width:2px}.icon--x line{stroke:var(--theme-elevation-800);stroke-width:1px}.tooltip{--caret-size:6px;background-color:var(--theme-elevation-800);border-radius:2px;color:var(--theme-elevation-0);font-weight:400;left:50%;line-height:1.4423076923rem;opacity:0;padding:.3846153846rem .7692307692rem;position:absolute;visibility:hidden;white-space:nowrap;z-index:2}.tooltip:after{border-left:var(--caret-size) solid transparent;border-right:var(--caret-size) solid transparent;content:" ";display:block;height:0;position:absolute;transform:translate3d(-50%,100%,0);width:0}.tooltip--show{cursor:default;opacity:1;transition:opacity .2s ease-in-out;visibility:visible}.tooltip--caret-center:after{left:50%}.tooltip--caret-left:after{left:calc(var(--base)*.5)}.tooltip--caret-right:after{right:calc(var(--base)*.5)}.tooltip--position-top{bottom:100%;transform:translate3d(-50%,calc(var(--caret-size)*-1),0)}.tooltip--position-top:after{border-top:var(--caret-size) solid var(--theme-elevation-800);bottom:1px}.tooltip--position-bottom{top:100%;transform:translate3d(-50%,var(--caret-size),0)}.tooltip--position-bottom:after{border-bottom:var(--caret-size) solid var(--theme-elevation-800);bottom:calc(100% + var(--caret-size) - 1px)}.tooltip .tooltip-content{overflow:hidden;text-overflow:ellipsis;width:100%}@media(max-width:1024px){.tooltip{display:none}}html[data-theme=light] .tooltip{background-color:var(--theme-error-250);color:var(--theme-error-750)}html[data-theme=light] .tooltip--position-top:after{border-top-color:var(--theme-error-250)}html[data-theme=light] .tooltip--position-bottom:after{border-bottom-color:var(--theme-error-250)}a.btn{display:inline-block}.btn{background:transparent;border:0;border-radius:4px;color:inherit;cursor:pointer;font-size:1rem;font-weight:400;line-height:1.9230769231rem;margin-bottom:1.9230769231rem;margin-top:1.9230769231rem;text-align:center;-webkit-text-decoration:none;text-decoration:none}.btn .btn__icon{border:1px solid;border-radius:100%}.btn .btn__icon .stroke{stroke:currentColor;fill:none}.btn .btn__icon .fill{fill:currentColor}.btn--has-tooltip{position:relative}.btn--icon-style-none .btn__icon,.btn--icon-style-without-border .btn__icon{border:none}.btn span{line-height:1.9230769231rem}.btn span,.btn svg{vertical-align:top}.btn--size-medium{padding:.9615384615rem 1.9230769231rem}.btn--size-small{padding:.4807692308rem .9615384615rem}.btn--style-primary{background-color:var(--theme-elevation-800);color:var(--theme-elevation-0)}.btn--style-primary.btn--disabled{background-color:var(--theme-elevation-400)}.btn--style-primary:not(.btn--disabled):focus-visible,.btn--style-primary:not(.btn--disabled):hover{background:var(--theme-elevation-750)}.btn--style-primary:not(.btn--disabled):active{background:var(--theme-elevation-700)}.btn--style-primary:focus:not(:focus-visible){box-shadow:0 0 0 2px var(--theme-success-500);outline:none}.btn--style-secondary{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:none;box-shadow:inset 0 0 0 1px var(--theme-elevation-800);color:var(--theme-elevation-800)}.btn--style-secondary:focus-visible,.btn--style-secondary:hover{background:var(--theme-elevation-100);box-shadow:inset 0 0 0 1px var(--theme-elevation-700)}.btn--style-secondary:active{background:var(--theme-elevation-200)}.btn--style-secondary.btn--disabled{background:none;box-shadow:inset 0 0 0 1px var(--theme-elevation-400);color:var(--theme-elevation-400)}.btn--style-secondary:focus:not(:focus-visible){box-shadow:inset 0 0 0 1px var(--theme-elevation-700),0 0 0 2px var(--theme-success-500);outline:none}.btn--style-none{border-radius:0;margin:0;padding:0}.btn--style-none:focus{opacity:.8}.btn--style-none:active{opacity:.7}.btn--round{border-radius:100%}[dir=rtl] .btn--icon span{margin-left:5px}.btn--icon span{display:flex;justify-content:space-between}.btn--icon.btn--style-primary .icon .stroke{stroke:var(--theme-elevation-0);fill:none}.btn--icon.btn--style-primary .icon .fill{fill:var(--theme-elevation-0)}.btn--style-icon-label{font-weight:600;padding:0}.btn--style-light-gray{box-shadow:inset 0 0 0 1px var(--theme-elevation-800)}.btn--icon-position-left .btn__content{flex-direction:row-reverse}.btn--icon-position-left .btn__icon{margin-right:.9615384615rem}.btn--icon-position-right .btn__icon{margin-left:.9615384615rem}.btn--icon-only .btn__icon{margin:0;padding:0}.btn--disabled{cursor:default}.btn:focus-visible .btn__icon,.btn:hover .btn__icon{background:var(--theme-elevation-800)}.btn:focus-visible .btn__icon .stroke,.btn:hover .btn__icon .stroke{stroke:var(--theme-elevation-0);fill:none}.btn:focus-visible .btn__icon .fill,.btn:hover .btn__icon .fill{fill:var(--theme-elevation-0)}.btn:focus:not(:focus-visible){outline:none}.btn:focus:not(:focus-visible) .btn__icon{background:var(--theme-elevation-150)}.btn:focus:not(:focus-visible) .btn__icon .stroke{stroke:var(--theme-elevation-800);fill:none}.btn:focus:not(:focus-visible) .btn__icon .fill{fill:var(--theme-elevation-800)}.btn:active .btn__icon{background:var(--theme-elevation-700)}.btn:active .btn__icon .stroke{stroke:var(--theme-elevation-0);fill:none}.btn:active .btn__icon .fill{fill:var(--theme-elevation-0)}.btn:focus-visible{outline:var(--accessibility-outline);outline-offset:var(--accessibility-outline-offset)}.pill{align-items:center;background:var(--theme-elevation-150);border:0;border-radius:3px;color:var(--theme-elevation-800);cursor:default;display:inline-flex;flex-shrink:0;font-size:1rem;line-height:1.9230769231rem;overflow:hidden;padding:0 .4807692308rem;text-overflow:ellipsis;white-space:nowrap}.pill--rounded{border-radius:var(--style-radius-l);font-size:12px;line-height:18px}.pill:active,.pill:focus:not(:focus-visible){outline:none}.pill:focus-visible{outline:var(--accessibility-outline);outline-offset:var(--accessibility-outline-offset)}.pill .icon{flex-shrink:0}.pill__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pill__icon{padding:calc(var(--base)/4)}.pill--has-action{cursor:pointer;-webkit-text-decoration:none;text-decoration:none}.pill--is-dragging{cursor:grabbing}.pill--has-icon svg{display:block}[dir=rtl] .pill--align-icon-left{padding-left:10px;padding-right:0}[dir=rtl] .pill--align-icon-right{padding-left:0;padding-right:10px}.pill--align-icon-left{padding-left:0}.pill--align-icon-right{padding-right:0}.pill--style-white{background:var(--theme-elevation-0)}.pill--style-light-gray,.pill--style-light.pill--has-action:active,.pill--style-light.pill--has-action:hover,.pill--style-white.pill--has-action:active,.pill--style-white.pill--has-action:hover{background:var(--theme-elevation-100)}.pill--style-light-gray{color:var(--theme-elevation-800)}.pill--style-warning{background:var(--theme-warning-500)}.pill--style-success{background:var(--theme-success-500);color:var(--color-base-800)}.pill--style-dark{background:var(--theme-elevation-800);color:var(--theme-elevation-0)}.pill--style-dark svg .stroke{stroke:var(--theme-elevation-0);fill:none}.pill--style-dark svg .fill{fill:var(--theme-elevation-0)}.pill--style-dark.pill--has-action:hover{background:var(--theme-elevation-750)}.pill--style-dark.pill--has-action:active{background:var(--theme-elevation-700)}html[data-theme=dark] .pill--style-error{background:var(--theme-error-500);color:var(--color-base-1000)}html[data-theme=light] .pill--style-error{background:var(--theme-error-250);color:var(--theme-error-750)}.popup-button{background:transparent;border:0;color:currentColor;cursor:pointer;display:inline-flex;font-family:inherit;font-size:inherit;height:100%;line-height:inherit;padding:0}.popup{--popup-button-highlight:var(--theme-elevation-200);--popup-bg:var(--theme-input-bg);--popup-text:var(--theme-text);--popup-caret-size:10px;--popup-x-padding:calc(var(--base)*0.33);--popup-padding:calc(var(--base)*0.5);position:relative}.popup__content{background:var(--popup-bg);border-radius:4px;color:var(--popup-text);max-width:calc(100vw - 1.92308rem);min-width:auto;min-width:var(--popup-width,auto);opacity:0;padding-left:var(--popup-padding);padding-right:var(--popup-padding);pointer-events:none;position:absolute;visibility:hidden;z-index:var(--z-popup)}.popup__hide-scrollbar{overflow:hidden}.popup__scroll-container{overflow-y:auto;padding-bottom:var(--popup-padding);padding-top:var(--popup-padding);white-space:nowrap;width:calc(100% + var(--scrollbar-width))}.popup__scroll-content{width:calc(100% - var(--scrollbar-width))}.popup--show-scrollbar .popup__scroll-container,.popup--show-scrollbar .popup__scroll-content{width:100%}.popup:active,.popup:focus{outline:none}.popup--size-small{--popup-width:100px}.popup--size-small .popup__content{box-shadow:0 0 30px 0 rgba(0,2,4,.12),0 30px 25px -8px rgba(0,2,4,.1)}.popup--size-medium{--popup-width:150px}.popup--size-medium .popup__content{box-shadow:0 20px 35px -10px rgba(0,2,4,.2),0 6px 4px -4px rgba(0,2,4,.02)}.popup--size-large{--popup-width:200px}.popup--size-large .popup__content{box-shadow:0 20px 35px -10px rgba(0,2,4,.2),0 6px 4px -4px rgba(0,2,4,.02)}[dir=rtl] .popup--h-align-left .popup__caret{left:auto;right:var(--popup-padding)}.popup--h-align-left .popup__caret{left:var(--popup-padding)}.popup--h-align-center .popup__caret,.popup--h-align-center .popup__content{left:50%;transform:translateX(-50%)}[dir=rtl] .popup--h-align-right .popup__content{left:0;right:auto}[dir=rtl] .popup--h-align-right .popup__caret{left:var(--popup-padding);right:auto}.popup--h-align-right .popup__content{right:0}.popup--h-align-right .popup__caret{right:var(--popup-padding)}.popup__caret{border:var(--popup-caret-size) solid transparent;position:absolute}.popup--v-align-top .popup__content{bottom:calc(100% + var(--popup-caret-size));box-shadow:0 20px 35px -10px rgba(0,2,4,.2),0 6px 4px -4px rgba(0,2,4,.02)}.popup--v-align-top .popup__caret{border-top-color:var(--popup-bg);top:calc(100% - 1px)}.popup--v-align-bottom .popup__content{box-shadow:0 -20px 35px -10px rgba(0,2,4,.2),0 -6px 4px -4px rgba(0,2,4,.02);top:calc(100% + var(--popup-caret-size))}.popup--v-align-bottom .popup__caret{border-bottom-color:var(--popup-bg);bottom:calc(100% - 1px)}.popup--active .popup__content{opacity:1;pointer-events:all;visibility:visible}@media(max-width:1024px){.popup{--popup-padding:calc(var(--base)*0.25)}.popup--h-align-center .popup__caret,.popup--h-align-center .popup__content{left:50%;transform:translateX(0)}.popup--h-align-right .popup__content{right:0}.popup--h-align-right .popup__caret{right:var(--popup-padding)}.popup--force-h-align-left .popup__content{left:0;right:auto;transform:none}.popup--force-h-align-left .popup__caret{left:var(--popup-padding);right:auto;transform:none}.popup--force-h-align-right .popup__content{left:auto;right:0;transform:none}.popup--force-h-align-right .popup__caret{left:auto;right:var(--popup-padding);transform:none}}.icon--check{height:1.9230769231rem;width:1.9230769231rem}.icon--check .stroke{fill:none;stroke:var(--theme-elevation-800);stroke-width:2px}.icon--menu .fill{fill:var(--theme-text)}.icon--search{height:1.9230769231rem;width:1.9230769231rem}.icon--search .stroke{stroke:var(--theme-elevation-800);stroke-width:1px}.template-minimal{align-items:center;display:flex;justify-content:center;margin-left:auto;margin-right:auto;min-height:100%;padding:5.7692307692rem 1.9230769231rem;width:100%}.template-minimal--width-normal .template-minimal__wrap{max-width:500px;width:100%}.template-minimal--width-wide .template-minimal__wrap{max-width:1024px;width:100%}