block { display: block; } .block { display: block; } inline { display: inline; } .inline { display: inline; } inlineblock { display: inline-block; } .inlineblock { display: inline-block; } .ib { display: inline-block; } inlineblocktop { display: inline-block; vertical-align: top; } .inlineblocktop { display: inline-block; vertical-align: top; } .ibt { display: inline-block; vertical-align: top; } .nowrap { white-space: nowrap; } a[href] { cursor: pointer; } .a { cursor: pointer; } [contenteditable][data-placeholder]:empty:before { content: attr(data-placeholder); color: rgba(0,0,0,.3); pointer-events: none; } body.dark [contenteditable][data-placeholder]:empty:before { color: rgba(255,255,255,.3); } .ui-container { overflow: scroll; } .ui-text { color: rgba(0,0,0,.9); } body.dark .ui-text { color: #f5f5f5; } .ui-code { font-family: menlo, 'Lucida Grande', 'Courier New'; letter-spacing: -.5px;; } .ui-number { color: #F57C00; } body.dark .ui-number { color: #FFB74D; } .ui-number.error { color: #D32F2F; } .ui-value.number { color: #F57C00; } body.dark .ui-value.number { color: #FFB74D; } .ui-value.number.error { color: #D32F2F; } .ui-number.placeholding { font-family: menlo, 'Lucida Grande', 'Courier New'; letter-spacing: -.5px;; color: #7f7f7f; } .ui-string { color: #388E3C; } body.dark .ui-string { color: #81C784; } .ui-value.string { color: #388E3C; } body.dark .ui-value.string { color: #81C784; } .ui-link { color: #1976D2; text-decoration: none; border-bottom: 1px dotted #1976D2; } .ui-link:hover { border-bottom: 1px solid #1976D2; } .ui-time { color: #7B1FA2; } body.dark .ui-time { color: #BA68C8; } .ui-value.time { color: #7B1FA2; } body.dark .ui-value.time { color: #BA68C8; } .ui-boolean { color: #C2185B; } .ui-tag { height: 24px; line-height: 24px; padding: 0 5px; font-size: 12px; background: #121212; color: #ededed; border-radius: 7px; } body.dark .ui-tag { background: #ededed; color: #121212; } .ui-null { font-family: menlo, 'Lucida Grande', 'Courier New'; letter-spacing: -.5px;; color: #7f7f7f; } .ui-void { font-family: menlo, 'Lucida Grande', 'Courier New'; letter-spacing: -.5px;; color: #7f7f7f; } .dragging { cursor: grabbing !important; } .dragging * { cursor: grabbing !important; } .ui-action { position: relative; width: 40px; height: 40px; box-sizing: border-box; } .ui-action.small { width: 30px; height: 30px; } .ui-action .ui-icon { width: 50%; height: 50%; } .ui-border { position: relative; } .ui-border::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; border-radius: 7px; box-sizing: border-box; border: 1px solid rgba(0,0,0,.2); } body.dark .ui-border::before { border: 1px solid rgba(255,255,255,.2); } .ui-border.hovering::before { border: 1px solid rgba(0,0,0,.4); } body.dark .ui-border.hovering::before { border: 1px solid rgba(255,255,255,.4); } .ui-border.round-top::before { border-radius: 7px 7px 0 0; } .ui-border.dynamic.round-top::before { border-radius: 7px 7px 0 0; } .ui-border.light::before { border: .5px solid rgba(255,255,255,.2); } .ui-border.round::before { border-radius: 100%; } .ui-border.self::before { content: none; } .ui-border.self { box-sizing: border-box; border: .5px solid rgba(0,0,0,.2); } body.dark .ui-border.self { border: .5px solid rgba(255,255,255,.2); } .ui-border.self.shadow { border: 0px solid black !important; box-shadow: 0 0 0 .5px rgba(0,0,0,.2) border: .5px solid rgba(0,0,0,.2); } body.dark .ui-border.self.shadow { box-shadow: .5px solid rgba(255,255,255,.2); } .ui-border.self.shadow.inset { box-shadow: inset 0 0 0 .5px rgba(0,0,0,.2); } body.dark .ui-border.self.shadow.inset { box-shadow: inset 0 0 0 .5px rgba(255,255,255,.2); } .ui-border.top { border-left: 0 !important; border-right: 0 !important; border-bottom: 0 !important; } .ui-border.bottom { border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; } .ui-button { position: relative; min-width: 40px; height: 40px; line-height: 40px; padding: 0 20px; box-sizing: border-box; border-radius: 7px; } .ui-button.small { min-width: 30px; height: 30px; line-height: 30px; padding: 0 10px; } .ui-button.cta { min-width: 50px; height: 50px; line-height: 50px; text-align: center; } .ui-button .ui-icon { vertical-align: top; width: 18px; height: 18px; margin: 11px 7px 11px 0; pointer-events: none; } .ui-button.small .ui-icon { width: 12px; height: 12px; margin: 9px 4px 9px 2px; } .ui-button .ui-text { position: relative; vertical-align: top; font-size: 16px; font-weight: 500; pointer-events: none; } .ui-button.small .ui-text { top: 1px; font-size: 14px; } .ui-button.cta .ui-text { font-size: 18px; } .ui-button.disabled .ui-text { font-size: 14px; font-weight: 300; } .ui-icon { pointer-events: none; position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; transform: translate(-50%, -50%); fill: rgba(0,0,0,.4); } .ui-icon.inline { position: relative; left: auto; top: auto; transform: none; } body.dark .ui-icon { fill: rgba(255,255,255,.4); } .ui-icon-parent .ui-icon { } .ui-icon-parent.hovering .ui-icon { fill: rgba(0,0,0,.6); } .ui-icon-parent.dragging .ui-icon { fill: rgba(0,0,0,.6); } .ui-icon-parent.active .ui-icon { fill: rgba(0,0,0,.8); } body.dark .ui-icon-parent.hovering .ui-icon { fill: rgba(255,255,255,.6); } body.dark .ui-icon-parent.dragging .ui-icon { fill: rgba(255,255,255,.6); } body.dark .ui-icon-parent.active .ui-icon { fill: rgba(255,255,255,.9); } [ui-image] { position: relative; display: inline-block; background-color: #646464; background-size: cover; background-position: 50% 0%; opacity: 0; pointer-events: none; transition-duration: .25s; border-radius: 100%; } [ui-image].imageloaded { opacity: 1; pointer-events: auto; } .ui-input { height: 40px; line-height: 40px; width: 100%; box-sizing: border-box; padding: 0 10px; font-size: 16px; color: rgba(0,0,0,.9); background: transparent; border: 0; outline: 0; overflow: hidden; } body.dark .ui-input { color: #f5f5f5; } .ui-input.placeholding { color: rgba(0,0,0,.3) !important; } body.dark .ui-input.placeholding { color: rgba(255,255,255,.3) !important; } .ui-labels .ui-label { position: relative; text-align: center; height: 30px; line-height: 30px; min-width: 30px; padding: 0 10px; border-radius: 15px; box-sizing: border-box; } .ui-labels .ui-label.symboled { padding-left: 27px; } .ui-labels .ui-label[label-count="2"] { padding-left: 31px; } .ui-labels .ui-label.iconed { padding-left: 27px; } .ui-labels .ui-label.iconed.sorter { padding-left: 10px; } .ui-labels .ui-label.iconed.sorter.selected { padding-right: 21px; } .ui-labels .ui-label.selected { background: var(--label-color); } .ui-labels .ui-label::before { border-radius: 15px; } .ui-labels.selectable .ui-label::before { border: 1px dashed rgba(0,0,0,.2); } body.dark .ui-labels.selectable .ui-label::before { border: 1px dashed rgba(255,255,255,.2); } .ui-labels .ui-label.hovering::before { } .ui-labels.selectable .ui-label.hovering::before { border: 1px solid var(--label-color); } .ui-labels .ui-label.selected::before { } .ui-labels.selectable .ui-label.selected::before { border: 1px solid var(--label-color); } .ui-labels .ui-label .ui-symbols { pointer-events: none; } .ui-labels .ui-label .ui-symbol { position: absolute; width: 14px; height: 14px; top: 8px; left: 8px; box-sizing: border-box; border-radius: 100%; } .ui-labels .ui-label.hidden .ui-symbol { opacity: .3; } .ui-labels .ui-label[label-count="2"] .ui-symbol { } .ui-labels .ui-label[label-count="2"] .ui-symbol[label-order="0"] { margin-left: 8px; } .ui-labels .ui-label[label-count="2"] .ui-symbol[label-order="1"] { margin-left: 0px; } .ui-labels .ui-label .ui-icon { width: 16px; height: 16px; left: 15px; } .ui-labels .ui-label.sorter .ui-icon { width: 8px; height: 8px; left: auto; right: 12px; transform: translate(50%, -50%) rotate(90deg); display: none; } .ui-labels .ui-label.sorter.asc .ui-icon { transform: translate(50%, calc(-50% + 1px)) rotate(270deg); } .ui-labels .ui-label.sorter.selected .ui-icon { display: inline-block; } .ui-labels .ui-label .ui-emoji { margin-right: 5px; pointer-events: none; } .ui-labels .ui-label .ui-text { position: relative; font-size: 14px; font-weight: 500; color: rgba(0,0,0,.9); pointer-events: none; } .ui-labels .ui-label.hidden .ui-text { text-decoration: line-through; opacity: .3; } .ui-labels .ui-label .ui-action { width: 20px; height: 20px; margin-left: 2px; pointer-events: none; } .ui-labels .ui-label .ui-action .ui-icon { left: auto; top: -1px; width: 10px; height: 10px; } .ui-labels .ui-label.hovering .ui-action .ui-icon { opacity: 1; } .ui-list-row { position: relative; display: block; min-height: 26px; line-height: 26px; border-bottom: 1px solid rgba(0,0,0,.2); padding: 5px 10px; font-size: 16px; font-weight: 400; } .ui-list-row[data-heading="1"] { padding: 7px 10px 7px 30px; font-size: 18px; font-weight: 500; } .ui-list-row[data-heading="2"] { padding: 7px 10px 7px 40px; font-size: 16px; font-weight: 400; } .ui-list-row[data-heading="3"] { padding: 7px 10px 7px 50px; font-size: 14px; font-weight: 300; } .ui-list-row .bullet { position: absolute; background: rgba(0,0,0,.1); left: 10px; pointer-events: none; } .ui-list-row.hovering .bullet { background: rgba(0,0,0,.2); } .ui-list-row[data-heading="1"] .bullet { top: 15px; height: 10px; width: 10px; border-radius: 5px; } .ui-list-row[data-heading="2"] .bullet { top: 16.25px; height: 7.5px; width: 20px; border-radius: 3.75px; } .ui-list-row[data-heading="3"] .bullet { top: 17.5px; height: 5px; width: 30px; border-radius: 2.5px; } .ui-list-row .ui-text { pointer-events: none; } .ui-property { display: grid; position: relative; grid-template-columns: auto 1fr; width: 100%; min-height: 30px; line-height: 30px; font-size: 14px; color: rgba(0,0,0,.9); } .ui-property.wide { display: block; margin-bottom: 5px; } body.dark .ui-property { color: #f5f5f5; } .ui-property .ui-key { grid-column: 1; position: relative; height: 100%; padding: 0 5px; font-family: menlo, 'Lucida Grande', 'Courier New'; letter-spacing: -.5px;; font-weight: 500; } .ui-property .ui-value { grid-column: 2; padding: 0 5px; text-align: right; font-weight: 500; } .ui-property.wide .ui-value { display: block; text-align: left; } .ui-property.color .ui-value { color: var(--color); } body.dark .ui-property.color .ui-value { color: var(--color-dark); } .ui-property .ui-options { position: absolute; top: 0; right: 0; background: #fff8e1; max-height: 320px; overflow: scroll; border-radius: 7px; box-shadow: 0 1px 2px rgba(0,0,0,.5); display: none; } body.dark .ui-property .ui-options { background: #1E1E1E; } .ui-property.open .ui-options { display: inline-block; } .ui-property .ui-options .ui-option { height: 30px; line-height: 30px; padding: 0 10px; color: var(--color); } body.dark .ui-property .ui-options .ui-option { color: var(--color-dark); } .ui-property .ui-options .ui-option:first-child { border-radius: 7px 7px 0 0; } .ui-property .ui-options .ui-option:last-child { border-radius: 0 0 7px 7px; } .ui-property .ui-actions { display: table-cell; vertical-align: top; line-height: 0; height: 20px; } .ui-property .ui-actions .ui-action { width: 20px; height: 20px; } .ui-property .ui-actions .ui-action .ui-icon { width: 14px; height: 14px; } .ui-result { position: relative; height: 30px; line-height: 30px; border-radius: 7px; } .ui-result .symbol { position: relative; height: 100%; aspect-ratio: 1 / 1; text-align: center; pointer-events: none; } .ui-result .text { pointer-events: none; } .ui-result .content { height: 30px; } .ui-result.static .content { pointer-events: none; } .ui-result .content[data-tooltip-bottom]::before { left: 50% !important; transform: translate(-50%,-5px) !important; } .ui-result .content[data-tooltip-bottom].hovering::before { transform: translate(-50%,0) !important; } .ui-result .section { position: relative; height: 100%; padding: 0 8px; background: #fff8e1; border-radius: 10px; } .ui-result .section { background: #ffffff; } .ui-result .section.static { pointer-events: none; } .ui-result.single .section { pointer-events: none; } .ui-result .section:last-child { margin-right: 0; } .ui-result .section:before { background: rgba(255,255,255,.1); border-radius: 10px; } .ui-result .section.type:before { border-width: 1px; } .ui-result .section.hovering:before { background: transparent; } .ui-result .content.hovering .section:before { background: transparent; } .ui-result .section > .ui-icon { width: 12px; height: 12px; top: 1px; margin-right: 4px; fill: #ffffff; } .ui-result .section .name { vertical-align: middle; line-height: 20px; color: rgba(0,0,0,.9); pointer-events: none; } .ui-result .section.label .name { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #ffffff; } .ui-result .section.node .name { color: #ffffff; } .ui-result .details { pointer-events: none; } .ui-result .details .detail { line-height: 12px; font-size: 12px; color: #646464; } .ui-result .section .details .detail { font-weight: 500; } .ui-result .section.hovering .details .detail { color: #2d2d2d; } .ui-result .section.details .detail { line-height: 30px; } .ui-result .ui-actions { padding: 0; margin-left: -15px; pointer-events: none; } .ui-result .ui-actions.hovering { background: #ffffff; } .ui-result .ui-actions:before { border-width: 1px; } .ui-result .ui-actions .ui-action { width: auto; height: 30px; pointer-events: auto; } .ui-result .ui-actions .ui-action .ui-icon { width: 9px; height: 9px; margin: 0 6.5px 0 19.5px; fill: rgba(0,0,0,.4); } .ui-result .ui-actions .ui-action.hovering .ui-icon { fill: #121212; } .ui-search .ui-box { position: relative; white-space: nowrap; cursor: text; } .ui-search .ui-box .ui-actions { position: absolute; top: 0; right: 0; height: 100%; pointer-events: none; } .ui-search .ui-box .ui-actions .ui-action { width: auto; height: 100%; aspect-ratio: 1 / 1; } .ui-search .ui-box .ui-actions .ui-action .ui-icon { width: 50%; height: 50%; } .ui-search .ui-box .ui-actions .ui-action .ui-icon.close { width: 40%; height: 40%; } .ui-toggle { position: relative; width: 30px; height: 30px; cursor: pointer; transition: .125s; } .ui-toggle.toggled { transform: rotate(90deg); } .ui-toggle .ui-icon { width: 12px; height: 12px; fill: rgba(0,0,0,.3); } body.dark .ui-toggle .ui-icon { fill: rgba(255,255,255,.3); } .ui-toggle.hovering .ui-icon { fill: rgba(0,0,0,.5); } body.dark .ui-toggle.hovering .ui-icon { fill: rgba(255,255,255,.5); } .ui-toggle.toggled .ui-icon { fill: rgba(0,0,0,.5); } body.dark .ui-toggle.toggled .ui-icon { fill: rgba(255,255,255,.5); } .ui-tooltip { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; } [ui-tooltip-top]::after { position: absolute; z-index: 2; height: 30px; line-height: 30px; padding: 0 10px; font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; white-space: nowrap; background: #ffffff; color: rgba(0,0,0,.9); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.5);; text-shadow: none; letter-spacing: 0; border-radius: 7px; transition: .25s; opacity: 0; pointer-events: none; content: attr(ui-tooltip-top); left: 0; bottom: calc(100% + 7px); transform: translate(0,5px); } body.dark [ui-tooltip-top]::after { background: #484848; color: #f5f5f5; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.5); } [ui-tooltip-top].hovering::after { opacity: 1; transform: translate(0); } .ui-tooltip-parent.hovering [ui-tooltip-top]::after { opacity: 1; transform: translate(0); } [ui-tooltip-top].longpressing::after { opacity: 1; transform: translate(0); } .ui-tooltip-parent.longpressing [ui-tooltip-top]::after { opacity: 1; transform: translate(0); } [ui-tooltip-top-left]::after { position: absolute; z-index: 2; height: 30px; line-height: 30px; padding: 0 10px; font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; white-space: nowrap; background: #ffffff; color: rgba(0,0,0,.9); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.5);; text-shadow: none; letter-spacing: 0; border-radius: 7px; transition: .25s; opacity: 0; pointer-events: none; content: attr(ui-tooltip-top-left); right: 0; bottom: calc(100% + 7px); transform: translate(0,5px); } body.dark [ui-tooltip-top-left]::after { background: #484848; color: #f5f5f5; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.5); } [ui-tooltip-top-left].hovering::after { opacity: 1; transform: translate(0); } .ui-tooltip-parent.hovering [ui-tooltip-top-left]::after { opacity: 1; transform: translate(0); } [ui-tooltip-top-left].longpressing::after { opacity: 1; transform: translate(0); } .ui-tooltip-parent.longpressing [ui-tooltip-top-left]::after { opacity: 1; transform: translate(0); } [ui-tooltip-top-right]::after { position: absolute; z-index: 2; height: 30px; line-height: 30px; padding: 0 10px; font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; white-space: nowrap; background: #ffffff; color: rgba(0,0,0,.9); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.5);; text-shadow: none; letter-spacing: 0; border-radius: 7px; transition: .25s; opacity: 0; pointer-events: none; content: attr(ui-tooltip-top-right); left: 0; bottom: calc(100% + 7px); transform: translate(0,5px); } body.dark [ui-tooltip-top-right]::after { background: #484848; color: #f5f5f5; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.5); } [ui-tooltip-top-right].hovering::after { opacity: 1; transform: translate(0); } .ui-tooltip-parent.hovering [ui-tooltip-top-right]::after { opacity: 1; transform: translate(0); } [ui-tooltip-top-right].longpressing::after { opacity: 1; transform: translate(0); } .ui-tooltip-parent.longpressing [ui-tooltip-top-right]::after { opacity: 1; transform: translate(0); } [ui-tooltip-right]::after { position: absolute; z-index: 2; height: 30px; line-height: 30px; padding: 0 10px; font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; white-space: nowrap; background: #ffffff; color: rgba(0,0,0,.9); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.5);; text-shadow: none; letter-spacing: 0; border-radius: 7px; transition: .25s; opacity: 0; pointer-events: none; content: attr(ui-tooltip-right); left: 100%; top: calc(50% - 15px); transform: translate(-5px,0); } body.dark [ui-tooltip-right]::after { background: #484848; color: #f5f5f5; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.5); } [ui-tooltip-right].hovering::after { opacity: 1; transform: translate(0); } .ui-tooltip-parent.hovering [ui-tooltip-right]::after { opacity: 1; transform: translate(0); } [ui-tooltip-right].longpressing::after { opacity: 1; transform: translate(0); } .ui-tooltip-parent.longpressing [ui-tooltip-right]::after { opacity: 1; transform: translate(0); } [ui-tooltip-right-long]::after { position: absolute; z-index: 2; height: 30px; line-height: 30px; padding: 0 10px; font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; white-space: nowrap; background: #ffffff; color: rgba(0,0,0,.9); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.5);; text-shadow: none; letter-spacing: 0; border-radius: 7px; transition: .25s; opacity: 0; pointer-events: none; content: attr(ui-tooltip-right-long); left: calc(100% - 3px); top: calc(50% - 15px); transform: translate(-5px,0); } body.dark [ui-tooltip-right-long]::after { background: #484848; color: #f5f5f5; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.5); } [ui-tooltip-right-long].longhovering::after { opacity: 1; transform: translate(0); } [ui-tooltip-right-long].longpressing::after { opacity: 1; transform: translate(0); } [ui-tooltip-bottom]::after { position: absolute; z-index: 2; height: 30px; line-height: 30px; padding: 0 10px; font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; white-space: nowrap; background: #ffffff; color: rgba(0,0,0,.9); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.5);; text-shadow: none; letter-spacing: 0; border-radius: 7px; transition: .25s; opacity: 0; pointer-events: none; content: attr(ui-tooltip-bottom); left: 0; top: calc(100% + 5px); transform: translate(0,-5px); } body.dark [ui-tooltip-bottom]::after { background: #484848; color: #f5f5f5; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.5); } [ui-tooltip-bottom].ui-tooltip-small::after { position: absolute; height: 16px; line-height: 16px; padding: 0 5px; font-size: 10px; white-space: nowrap; background: #ffffff; color: rgba(0,0,0,.9); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.5);; text-shadow: none; letter-spacing: 0; border-radius: 5px; transition: .25s; opacity: 0; pointer-events: none; top: calc(100% + 0px); } body.dark [ui-tooltip-bottom].ui-tooltip-small::after { background: #484848; color: #f5f5f5; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.5); } [ui-tooltip-bottom].hovering::after { opacity: 1; transform: translate(0); } .ui-tooltip-parent.hovering [ui-tooltip-bottom]::after { opacity: 1; transform: translate(0); } [ui-tooltip-bottom].longpressing::after { opacity: 1; transform: translate(0); } .ui-tooltip-parent.longpressing [ui-tooltip-bottom]::after { opacity: 1; transform: translate(0); } [ui-tooltip-bottom].poppingover::after { display: none; } [ui-tooltip-bottom-left]::after { position: absolute; z-index: 2; height: 30px; line-height: 30px; padding: 0 10px; font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; white-space: nowrap; background: #ffffff; color: rgba(0,0,0,.9); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.5);; text-shadow: none; letter-spacing: 0; border-radius: 7px; transition: .25s; opacity: 0; pointer-events: none; content: attr(ui-tooltip-bottom-left); right: 0; top: calc(100% + 0px); transform: translate(0,-5px); } body.dark [ui-tooltip-bottom-left]::after { background: #484848; color: #f5f5f5; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.5); } [ui-tooltip-bottom-left].hovering::after { opacity: 1; transform: translate(0); } .ui-tooltip-parent.hovering [ui-tooltip-bottom-left]::after { opacity: 1; transform: translate(0); } [ui-tooltip-bottom-left].longpressing::after { opacity: 1; transform: translate(0); } .ui-tooltip-parent.longpressing [ui-tooltip-bottom-left]::after { opacity: 1; transform: translate(0); } [ui-tooltip-bottom-right]::after { position: absolute; z-index: 2; height: 30px; line-height: 30px; padding: 0 10px; font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; white-space: nowrap; background: #ffffff; color: rgba(0,0,0,.9); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.5);; text-shadow: none; letter-spacing: 0; border-radius: 7px; transition: .25s; opacity: 0; pointer-events: none; content: attr(ui-tooltip-bottom-right); left: 0; top: calc(100% + 0px); transform: translate(0,-5px); } body.dark [ui-tooltip-bottom-right]::after { background: #484848; color: #f5f5f5; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.5); } [ui-tooltip-bottom-right].hovering::after { opacity: 1; transform: translate(0); } .ui-tooltip-parent.hovering [ui-tooltip-bottom-right]::after { opacity: 1; transform: translate(0); } [ui-tooltip-bottom-right].longpressing::after { opacity: 1; transform: translate(0); } .ui-tooltip-parent.longpressing [ui-tooltip-bottom-right]::after { opacity: 1; transform: translate(0); } [ui-tooltip-bottom-long]::after { position: absolute; z-index: 2; height: 30px; line-height: 30px; padding: 0 10px; font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; white-space: nowrap; background: #ffffff; color: rgba(0,0,0,.9); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.5);; text-shadow: none; letter-spacing: 0; border-radius: 7px; transition: .25s; opacity: 0; pointer-events: none; content: attr(ui-tooltip-bottom-long); left: 0; top: calc(100% + 7px); transform: translate(0,-5px); } body.dark [ui-tooltip-bottom-long]::after { background: #484848; color: #f5f5f5; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.5); } [ui-tooltip-bottom-long].longhovering::after { opacity: 1; transform: translate(0); } [ui-tooltip-bottom-long].longpressing::after { opacity: 1; transform: translate(0); } [ui-tooltip-left]::after { position: absolute; z-index: 2; height: 30px; line-height: 30px; padding: 0 10px; font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; white-space: nowrap; background: #ffffff; color: rgba(0,0,0,.9); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.5);; text-shadow: none; letter-spacing: 0; border-radius: 7px; transition: .25s; opacity: 0; pointer-events: none; content: attr(ui-tooltip-left); right: 100%; top: calc(50% - 15px); transform: translate(5px,0); } body.dark [ui-tooltip-left]::after { background: #484848; color: #f5f5f5; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.5); } [ui-tooltip-left].hovering::after { opacity: 1; transform: translate(0); } .ui-tooltip-parent.hovering [ui-tooltip-left]::after { opacity: 1; transform: translate(0); } [ui-tooltip-left].longpressing::after { opacity: 1; transform: translate(0); } .ui-tooltip-parent.longpressing [ui-tooltip-left]::after { opacity: 1; transform: translate(0); }