}'s {.hljs} dark background sitting on a
* single line with empty pre below it. (from Darrin)
*/
[data-view-name="DataResultExplorerComponent"],
[data-view-name="ErrorResultExplorerComponent"] {
display: flex;
flex-direction: column;
}
[data-view-name="DataResultExplorerComponent"] > code,
[data-view-name="ErrorResultExplorerComponent"] > code {
flex: 1 1 auto;
min-height: 0;
padding: 12px 14px 12px 14px;
}
/**
* JSON syntax colouring
*
*/
[data-view-name="DataResultExplorerComponent"] .json-key,
[data-view-name="ErrorResultExplorerComponent"] .json-key {
color: #88c0d0;
}
[data-view-name="DataResultExplorerComponent"] .json-string,
[data-view-name="ErrorResultExplorerComponent"] .json-string {
color: #b5bd68;
}
[data-view-name="DataResultExplorerComponent"] .json-number,
[data-view-name="ErrorResultExplorerComponent"] .json-number {
color: #d8a657;
}
[data-view-name="DataResultExplorerComponent"] .json-bool,
[data-view-name="ErrorResultExplorerComponent"] .json-bool {
color: #c594c5;
}
[data-view-name="DataResultExplorerComponent"] .json-null,
[data-view-name="ErrorResultExplorerComponent"] .json-null {
color: #888888;
}
/**
* Command-clickable URLs — string values that parse as http(s) URLs
* pick up the {.cmd} class on a command-held mouseover (added by the
* view), turning them into underlined, clickable links that open in
* a new tab. A plain hover leaves them as ordinary strings. (from
* Darrin)
*/
[data-view-name="DataResultExplorerComponent"] .json-url.cmd,
[data-view-name="ErrorResultExplorerComponent"] .json-url.cmd {
cursor: pointer;
}
[data-view-name="DataResultExplorerComponent"] .json-url.cmd .json-url-text,
[data-view-name="ErrorResultExplorerComponent"] .json-url.cmd .json-url-text {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
/**
* Collapsible JSON values — every value (scalar or container) sits
* inside a {.jc} wrapper holding two parallel renderings: {.jc-full}
* for the expanded view and {.jc-collapsed} for the compact form.
* Toggling {data-expanded} on the wrapper swaps which one renders.
* Three click targets fire the toggle: {.jc-toggle} (opening
* bracket), {.jc-bracket} (closing bracket), and {.jk-toggle} (the
* property key itself, so clicking the name collapses its value,
* even when the value is a scalar). Scalars collapse to a
* {.jc-placeholder} ellipsis; containers collapse to a {.jc-summary}
* like [ ... 5 items ] between the brackets. (from Darrin)
*/
[data-view-name="DataResultExplorerComponent"] .jc-toggle,
[data-view-name="DataResultExplorerComponent"] .jc-bracket,
[data-view-name="ErrorResultExplorerComponent"] .jc-toggle,
[data-view-name="ErrorResultExplorerComponent"] .jc-bracket {
color: #d8d8d8;
cursor: pointer;
user-select: none;
transition: color 100ms ease;
}
[data-view-name="DataResultExplorerComponent"] .jc-toggle:hover,
[data-view-name="DataResultExplorerComponent"] .jc-bracket:hover,
[data-view-name="ErrorResultExplorerComponent"] .jc-toggle:hover,
[data-view-name="ErrorResultExplorerComponent"] .jc-bracket:hover {
color: #f8f8f8;
}
[data-view-name="DataResultExplorerComponent"] .jk-toggle,
[data-view-name="ErrorResultExplorerComponent"] .jk-toggle {
cursor: pointer;
user-select: none;
transition: color 100ms ease;
}
[data-view-name="DataResultExplorerComponent"] .jk-toggle:hover,
[data-view-name="ErrorResultExplorerComponent"] .jk-toggle:hover {
color: #cfe6f0;
}
[data-view-name="DataResultExplorerComponent"] .jc[data-expanded="true"] > .jc-collapsed,
[data-view-name="ErrorResultExplorerComponent"] .jc[data-expanded="true"] > .jc-collapsed {
display: none;
}
[data-view-name="DataResultExplorerComponent"] .jc[data-expanded="false"] > .jc-full,
[data-view-name="ErrorResultExplorerComponent"] .jc[data-expanded="false"] > .jc-full {
display: none;
}
[data-view-name="DataResultExplorerComponent"] .jc-summary,
[data-view-name="DataResultExplorerComponent"] .jc-placeholder,
[data-view-name="ErrorResultExplorerComponent"] .jc-summary,
[data-view-name="ErrorResultExplorerComponent"] .jc-placeholder {
color: #6e7682;
font-style: italic;
padding: 0 2px 0 2px;
cursor: pointer;
user-select: none;
transition: color 100ms ease;
}
[data-view-name="DataResultExplorerComponent"] .jc-summary:hover,
[data-view-name="DataResultExplorerComponent"] .jc-placeholder:hover,
[data-view-name="ErrorResultExplorerComponent"] .jc-summary:hover,
[data-view-name="ErrorResultExplorerComponent"] .jc-placeholder:hover {
color: #aab0bd;
}
/**
* /static/css/components/explorer/wrapper.css
*
* Layout shell for {window.cubby.WrapperExplorerComponentView} — the
* reusable explorer body. Fills its host's remaining height and lays
* its child sections (request / metadata / response) out as a flex
* column. Each section owns its own sizing/typography in its
* respective component stylesheet; this file only governs the column
* itself. (from Darrin)
*/
[data-view-name="WrapperExplorerComponent"] {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
padding: 12px 14px 16px 14px;
display: flex;
flex-direction: column;
gap: 14px;
}
/**
* /static/css/components/modals/base.css
*
* @see https://stackoverflow.com/questions/61785743/how-to-animate-backdrop-filter
*/
[data-view-name$="ModalComponent"] {
container-name: ModalComponent;
container-type: inline-size;
}
[data-view-name$="ModalComponent"] {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
/* transition: backdrop-filter var(--cubby-duration-modal), opacity var(--cubby-duration-modal), background-color var(--cubby-duration-modal);*/
backdrop-filter: blur(1.5px) opacity(0.00);
opacity: 0.00;
background-color: rgba(0, 0, 0, 0.00);
pointer-events: none;
}
[data-view-name$="ModalComponent"]:not(.animate-false) {
transition: backdrop-filter var(--cubby-duration-modal), opacity var(--cubby-duration-modal), background-color var(--cubby-duration-modal);
}
/**
* .content
*
*/
[data-view-name$="ModalComponent"] > div.content {
width: clamp(120px, 256px, 90%);
padding: 24px 24px 24px 24px;
background-color: #ffffff;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 20px 25px -5px #0000001a, 0 10px 10px -5px #0000000a;
transform: scale(0.96);
/* transition: transform var(--cubby-duration-modal);*/
}
[data-view-name$="ModalComponent"]:not(.animate-false) > div.content {
transition: transform var(--cubby-duration-modal);
}
/**
* .close
*
*/
[data-view-name$="ModalComponent"] > div.content > header > div.close {
position: absolute;
width: 28px;
height: 28px;
transform: scale(0.52);
cursor: pointer;
right: 0;
top: 0;
opacity: 0.60;
transition: transform var(--cubby-duration-root), opacity var(--cubby-duration-root);
}
[data-view-name$="ModalComponent"] > div.content > header > div.close > div.graphic {
width: 28px;
height: 28px;
}
[data-view-name$="ModalComponent"] > div.content > header > div.close:hover {
transform: rotate(90deg) scale(0.60);
opacity: 0.92;
}
/**
* .media
*
*/
[data-view-name$="ModalComponent"] > div.content > header > div.media {
width: 48px;
height: 48px;
margin: 0 auto 0 auto;
}
[data-view-name$="ModalComponent"] > div.content > header > div.media > div.graphic {
width: 48px;
height: 48px;
}
[data-view-name$="ModalComponent"] div.actions {
display: flex;
flex-direction: row-reverse;
gap: 12px;
}
/**
* .headline
*
*/
[data-view-name$="ModalComponent"] > div.content > header > div.headline {
font-size: var(--cubby-font-size-modal);
font-weight: 600;
min-height: 27px;
line-height: 27px;
color: var(--cubby-color-text);
}
/**
* States (open)
*
*/
[data-view-name$="ModalComponent"].open {
background-color: rgba(0, 0, 0, 0.25);
backdrop-filter: blur(1.5px) opacity(1.00);
opacity: 1.00;
pointer-events: auto;
}
[data-view-name$="ModalComponent"].open > div.content {
transform: scale(1.00);
}
/**
* Responsive
*
*/
@container ModalComponent (max-width: 560px) {
[data-view-name$="ModalComponent"] > div.content {
padding: 24px 24px 24px 24px;
}
}
/**
* /static/css/components/modals/admin-records-search.css
*
* Admin-records search modal — widens the shared modal shell to give
* the search field room. Opened via Cmd+K on the {/admin/records/*}
* pages; submitting redirects to {?q=}. The field/input styling comes
* from {shared/fields.css} + {shared/inputs.css} and the rest of the
* chrome (overlay, header, close) from {modals/base.css}.
*/
[data-view-name="AdminRecordsSearchModalComponent"] > div.content {
width: clamp(120px, 520px, 90%);
text-align: left;
}
/**
* /static/css/components/modals/alert.css
*
* Alert modal — single-acknowledgement dialog ("OK"-style). Only
* widens the shared modal shell (from {modals/base.css}) to a
* 440px-clamped column and left-aligns the content (the base shell
* centers everything by default). All chrome — backdrop, close
* button, header, action row — comes from the shared base.
* (from Darrin)
*/
[data-view-name$="AlertModalComponent"] > div.content {
width: clamp(120px, 440px, 90%);
text-align: left;
}
/*[data-view-name$="AlertModalComponent"] > div.content > div.body > div.actions {
display: flex;
justify-content: flex-end;
}
[data-view-name$="AlertModalComponent"] > div.content > div.body > div.actions > a.button {
max-width: 40%;
}
*/
/**
* /static/css/components/modals/busy.css
*
* Drops the design-system loading flow (64px ring spinner, primary +
* optional secondary copy) inside the modal frame. Mirrors the
* /static/css/components/___new/loading.css overlay one-for-one so
* the modal and the full-page overlay share a single visual
* language. (from Darrin)
*/
[data-view-name="BusyModalComponent"].open {
background-color: rgba(255, 255, 255, 0.92);
}
[data-view-name="BusyModalComponent"] > div.content {
background-color: transparent;
width: clamp(120px, 360px, 90%);
padding: 32px 24px 32px 24px;
box-shadow: none;
}
[data-view-name="BusyModalComponent"] > div.content {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center;
}
[data-view-name="BusyModalComponent"] > div.content > .spinner {
width: 64px;
height: 64px;
border: 5px solid var(--cubby-color-border-strong);
border-top-color: var(--cubby-color-text);
border-radius: 50% 50% 50% 50%;
animation: cubby-spin 800ms linear infinite;
}
[data-view-name="BusyModalComponent"] > div.content > .primary {
font-size: var(--cubby-font-size-modal);
font-weight: 600;
color: var(--cubby-color-text-muted);
line-height: 1.40;
transition: height 3000ms ease;
overflow: hidden;
}
[data-view-name="BusyModalComponent"] > div.content > .secondary {
font-size: var(--cubby-font-size-body);
color: var(--cubby-color-text-faint);
line-height: 1.40;
/* transition: height 3000ms ease;*/
/* overflow: hidden;*/
}
[data-view-name="BusyModalComponent"] > div.content > .primary:empty,
[data-view-name="BusyModalComponent"] > div.content > .secondary:empty {
display: none;
}
/**
* /static/css/components/modals/challenge.css
*
* Challenge modal — verification / re-authentication dialog (used
* before sensitive actions like deleting an account key). Only
* widens the shared modal shell (from {modals/base.css}) to a
* 440px-clamped column and left-aligns the content. All chrome —
* backdrop, close button, header, action row — comes from the shared
* base. (from Darrin)
*/
[data-view-name$="ChallengeModalComponent"] > div.content {
width: clamp(120px, 440px, 90%);
text-align: left;
}
/**
* /static/css/components/modals/code-snippet.css
*
* Code-snippet modal — a read-only "here's how you'd call it" dialog
* launched from the homepage demo cards. Widens the shared modal
* shell to give the code blocks room and left-aligns the header /
* body (the base modal centers its content). The description tones
* down to the muted body color; the code blocks inherit the page's
* shared {pre code} + {hljs} styling, but drop their font-size by 1px
* since the modal stacks one snippet per language behind the toggler
* and the smaller type keeps longer examples (Go, Java) on one line.
* The language toggler inherits the shared component's scroll
* behavior so the native scrollbar shows on iOS Safari, matching the
* dashboard and accountKeys instances. (from Darrin)
*/
[data-view-name$="CodeSnippetModalComponent"] > div.content {
width: clamp(120px, 640px, 90%);
text-align: left;
}
[data-view-name$="CodeSnippetModalComponent"] > div.content > div.body > div.description {
font-size: var(--cubby-font-size-body);
color: var(--cubby-color-text-muted);
line-height: 1.50;
}
[data-view-name$="CodeSnippetModalComponent"] pre code {
font-size: 11px;
}
/**
* /static/css/components/modals/confirm.css
*
* Confirm modal — two-action yes/cancel dialog used to gate any
* destructive or irreversible operation. Only widens the shared
* modal shell (from {modals/base.css}) to a 440px-clamped column
* and left-aligns the content. All chrome — backdrop, close button,
* header, action row — comes from the shared base.
* (from Darrin)
*/
[data-view-name$="ConfirmModalComponent"] > div.content {
width: clamp(120px, 440px, 90%);
text-align: left;
}
/*[data-view-name$="ConfirmModalComponent"] > div.content > div.body > div.actions {
display: flex;
justify-content: flex-end;
}
[data-view-name$="ConfirmModalComponent"] > div.content > div.body > div.actions > a.button {
max-width: 40%;
}
[data-view-name$="ConfirmModalComponent"] > div.content > div.body > div.actions > a.button:first-child {
margin: 0 12px 0 0;
}
*/
/**
* /static/css/components/modals/feature-change.css
*
* Feature option select modal — confirm-style chrome with a form
* control, so it uses the wider edit-dialog shell.
*/
[data-view-name="FeatureChangeModalComponent"] > div.content {
width: clamp(120px, 520px, 90%);
text-align: left;
}
[data-view-name="FeatureChangeModalComponent"] select {
width: 100%;
padding: 10px 28px 10px 12px;
border-color: var(--cubby-color-border-strong);
border-radius: 4px 4px 4px 4px;
background-color: var(--cubby-color-bg-elevated);
background-position: right 12px center;
font-size: var(--cubby-font-size-lede);
}
/**
* /static/css/components/modals/flag-preview.css
*
* Per-flag editor modal (format / size / shape + preview + actions)
* opened from the /flags/all and region grids.
*/
[data-view-name="FlagPreviewModalComponent"] > div.content {
width: clamp(120px, 720px, 92%);
}
[data-view-name="FlagPreviewModalComponent"] .flag-preview-layout {
display: grid;
grid-template-columns: 200px minmax(0, 1fr);
gap: 18px;
align-items: start;
}
[data-view-name="FlagPreviewModalComponent"] .flag-preview-form {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
[data-view-name="FlagPreviewModalComponent"] .flags-control {
display: block;
}
[data-view-name="FlagPreviewModalComponent"] .flags-control > span {
display: block;
color: var(--cubby-color-text-faint);
font-size: var(--cubby-font-size-small);
line-height: 1.35em;
margin-bottom: 5px;
}
[data-view-name="FlagPreviewModalComponent"] .flags-control select {
width: 100%;
height: 38px;
padding-right: 28px;
border-color: var(--cubby-color-border-strong);
border-radius: 4px;
background-color: var(--cubby-color-bg-elevated);
font-size: var(--cubby-font-size-body);
}
[data-view-name="FlagPreviewModalComponent"] .flags-control.disabled {
opacity: 0.48;
}
[data-view-name="FlagPreviewModalComponent"] .flags-control.disabled select {
cursor: default;
}
[data-view-name="FlagPreviewModalComponent"] .flag-preview-frame {
min-height: 200px;
background:
linear-gradient(45deg, #f7f7f7 25%, transparent 25%),
linear-gradient(-45deg, #f7f7f7 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #f7f7f7 75%),
linear-gradient(-45deg, transparent 75%, #f7f7f7 75%);
background-color: #ffffff;
background-position: 0 0, 0 8px, 8px -8px, -8px 0;
background-size: 16px 16px;
border: 1px solid var(--cubby-color-border);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
padding: 18px;
position: relative;
}
[data-view-name="FlagPreviewModalComponent"] .flag-preview-frame img {
display: block;
max-width: min(100%, 320px);
max-height: 160px;
object-fit: contain;
border: 1px solid rgba(0, 0, 0, 0.10);
background: transparent;
}
[data-view-name="FlagPreviewModalComponent"] .flag-preview-frame[data-format="jpg"] img {
background: #ffffff;
}
[data-view-name="FlagPreviewModalComponent"] .flag-preview-frame[data-variant="-1x1"] img {
aspect-ratio: 1 / 1;
width: 160px;
height: 160px;
object-fit: cover;
}
[data-view-name="FlagPreviewModalComponent"] .flag-preview-frame[data-variant="-4x3"] img {
aspect-ratio: 4 / 3;
width: 213px;
height: 160px;
object-fit: cover;
}
[data-view-name="FlagPreviewModalComponent"] .flag-preview-frame.is-error img {
opacity: 0.18;
}
[data-view-name="FlagPreviewModalComponent"] .flag-preview-frame span {
display: none;
position: absolute;
left: 16px;
right: 16px;
bottom: 14px;
color: var(--cubby-color-text-muted);
font-size: var(--cubby-font-size-small);
line-height: 1.35em;
text-align: center;
}
[data-view-name="FlagPreviewModalComponent"] .flag-preview-frame.is-error span {
display: block;
}
[data-view-name="FlagPreviewModalComponent"] .flag-preview-url-box {
min-height: 42px;
display: flex;
align-items: center;
background: #111111;
border-radius: 4px;
padding: 10px 12px;
overflow: hidden;
}
[data-view-name="FlagPreviewModalComponent"] .flag-preview-url-box a {
color: #f6f6f6;
text-decoration: none;
}
[data-view-name="FlagPreviewModalComponent"] .flag-preview-url-box a:hover code {
text-decoration: underline;
}
[data-view-name="FlagPreviewModalComponent"] .flag-preview-url-box code {
color: #f6f6f6;
font-family: 'SF Mono', Menlo, Consolas, monospace;
font-size: var(--cubby-font-size-small);
line-height: 1.45em;
overflow-wrap: anywhere;
}
@media (max-width: 560px) {
[data-view-name="FlagPreviewModalComponent"] .flag-preview-layout {
grid-template-columns: 1fr;
}
[data-view-name="FlagPreviewModalComponent"] .flag-preview-form {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/**
* /static/css/components/modals/review-api-version-object-change.css
*
* Owns the visual treatment for the review-change modal — wider
* content well to accommodate the pretty-printed JSON viewer, one
* or two stacked {.value-block} sections (label + scrollable
* {}) for the {initial → proposed} pair, an optional
* {.notes-block} textarea for the reviewer's rationale, and a
* three-button action row (Cancel / Reject / Approve). Stays
* disjoint from {confirm.css}; this modal has its own selector so
* the two never collide. (from Darrin)
*/
[data-view-name="ReviewAPIVersionObjectChangeModalComponent"] > div.content {
width: clamp(120px, 640px, 92%);
text-align: left;
}
[data-view-name="ReviewAPIVersionObjectChangeModalComponent"] > div.content > div.body > form > div.fields > div.field.textarea.readonly > div.input > textarea {
min-height: 40px;
max-height: 300px;
width: 100%;
resize: none;
overflow-y: auto;
box-sizing: border-box;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 11px;
line-height: 1.35em;
}
[data-view-name="ReviewAPIVersionObjectChangeModalComponent"] > div.content > div.body > form > div.fields > div.field.textarea:not(.readonly) > div.input > textarea {
min-height: 70px;
}
[data-view-name="ReviewAPIVersionObjectChangeModalComponent"] > div.content > div.body {
max-height: 68vh;
overflow: auto;
padding: 0 12px 0 0;
}
/**
* /static/css/components/modals/plan-downgrade-blocked.css
*
* Plan-downgrade-blocked modal — shown when an account tries to
* switch to a plan that can't hold its current usage / seats / keys.
* Widens the shared modal shell (from {modals/base.css}) to a
* 480px-clamped column and left-aligns the content. The headline
* override (auto height + tighter line-height + right padding) lets
* the longer "Can't downgrade to ..." sentence wrap to two lines
* cleanly without colliding with the close button.
* (from Darrin)
*/
[data-view-name$="PlanDowngradeBlockedModalComponent"] > div.content {
width: clamp(120px, 480px, 90%);
text-align: left;
}
[data-view-name$="PlanDowngradeBlockedModalComponent"] > div.content > header > div.headline {
height: auto;
line-height: 1.3;
padding-right: 32px;
}
/*[data-view-name$="PlanDowngradeBlockedModalComponent"] > div.content > div.body > div.actions {
display: flex;
justify-content: flex-end;
}
[data-view-name$="PlanDowngradeBlockedModalComponent"] > div.content > div.body > div.actions > a.button {
max-width: 60%;
}
*/
/**
* /static/css/components/modals/edit.css
*
* Edit modal — shared chrome for every {Edit*ModalComponent} on the
* site (account key, webhook, profile, etc), matched via the
* prefix-suffix attribute selector ({^="Edit"][$="ModalComponent"]).
* Widens the shared modal shell (from {modals/base.css}) to a
* 520px-clamped column — wider than the confirm/alert variants —
* because edit dialogs hold form fields that need horizontal room.
* Left-aligns the content; all chrome comes from the shared base.
* (from Darrin)
*/
[data-view-name^="Edit"][data-view-name$="ModalComponent"] > div.content {
width: clamp(120px, 520px, 90%);
text-align: left;
}
/**
* /static/css/components/modals/sign-up-required.css
*
* Sign-up-required modal — interrupt shown when an unauthenticated
* visitor tries to take an action that needs an account. Only
* widens the shared modal shell (from {modals/base.css}) to a
* 440px-clamped column and left-aligns the content. All chrome —
* backdrop, close button, header, action row — comes from the
* shared base. (from Darrin)
*/
[data-view-name$="SignUpRequiredModalComponent"] > div.content {
width: clamp(120px, 440px, 90%);
text-align: left;
}
/*[data-view-name$="SignUpRequiredModalComponent"] > div.content > div.body > div.actions {
display: flex;
justify-content: flex-end;
}
[data-view-name$="SignUpRequiredModalComponent"] > div.content > div.body > div.actions > a.button {
max-width: 40%;
}
[data-view-name$="SignUpRequiredModalComponent"] > div.content > div.body > div.actions > a.button:first-child {
margin: 0 12px 0 0;
}
*/
/**
* /static/css/components/modals/plan-upgrade-required.css
*
* Plan-upgrade-required modal — interrupt shown when a user tries to
* use a feature gated to a paid tier. Only widens the shared modal
* shell (from {modals/base.css}) to a 480px-clamped column and
* left-aligns the content. All chrome — backdrop, close button,
* header, action row — comes from the shared base.
* (from Darrin)
*/
[data-view-name$="PlanUpgradeRequiredModalComponent"] > div.content {
width: clamp(120px, 480px, 90%);
text-align: left;
}
/*[data-view-name$="PlanUpgradeRequiredModalComponent"] > div.content > div.body > div.actions {
display: flex;
justify-content: flex-end;
}
[data-view-name$="PlanUpgradeRequiredModalComponent"] > div.content > div.body > div.actions > a.button {
max-width: 60%;
}
[data-view-name$="PlanUpgradeRequiredModalComponent"] > div.content > div.body > div.actions > a.button:first-child {
margin: 0 12px 0 0;
}
*/
/**
* /static/css/components/notifications/base.css
*
* Notification base — shared chrome and slide-in animation for every
* notification surface (snackbar, toast). Fixed-positioned at the
* top of the viewport, starts off-screen ({transform: translateY
* (-100%)}) and faded out ({opacity: 0}); the {.open} class lets it
* slide into place and fade in over a 400ms transition. Hovering an
* open notification nudges the opacity a touch higher so the user
* can read it without the surrounding chrome distracting. Each
* specific notification ({snackbar.css}, {toast.css}) layers its
* own positioning, palette, and body layout on top.
* (from Darrin)
*/
[data-view-name$="NotificationComponent"] {
position: fixed;
pointer-events: none;
opacity: 0.00;
top: 12px;
/* top: calc(env(safe-area-inset-top) + 12px);*/
border-radius: 10px 10px 10px 10px;
max-width: 90%;
transition: transform 400ms, opacity 400ms;
transform: translateY(-100%);
cursor: default;
}
[data-view-name$="NotificationComponent"].open {
pointer-events: auto;
opacity: 0.90;
transform: translateY(0%);
}
[data-view-name$="NotificationComponent"].open:hover {
opacity: 0.95;
}
/**
* /static/css/components/notifications/snackbar.css
*
* @see https://chatgpt.com/c/68fe1e38-c2c0-832c-8085-542b0067cf10
*/
[data-view-name$="SnackbarNotificationComponent"] {
left: var(--cubby-page-padding);
right: var(--cubby-page-padding);
background-color: #000000;
padding: 12px 10px 12px 10px;
margin: 0 auto 0 auto;
max-width: 620px;
}
[data-view-name$="SnackbarNotificationComponent"].bottom {
top: auto;
bottom: 12px;
transform: translateY(calc(100% + 12px));
}
[data-view-name$="SnackbarNotificationComponent"].bottom.open {
transform: translateY(0%);
}
[data-view-name$="SnackbarNotificationComponent"] > div.content > div.body {
min-height: 40px;
display: flex;
}
[data-view-name$="SnackbarNotificationComponent"] > div.content > div.body > div.media {
width: clamp(24px, 8vw, 48px);
margin: 0 4px 0 0;
padding: 0 0 0 0;
display: flex;
align-items: center;
}
[data-view-name$="SnackbarNotificationComponent"] > div.content > div.body > div.media > div.img {
text-align: center;
width: 100%;
font-size: 22px;
}
[data-view-name$="SnackbarNotificationComponent"] > div.content > div.body > div.media > div.img > div.graphic {
min-height: 26px;
width: 48px;
}
[data-view-name$="SnackbarNotificationComponent"] > div.content > div.body > div.copy {
flex: 1;
display: flex;
align-items: center;
}
[data-view-name$="SnackbarNotificationComponent"] > div.content > div.body > div.copy > p {
color: #ffffff;
}
/**
* /static/css/components/notifications/toast.css
*
* @see https://chatgpt.com/c/6932ffd9-0d10-832b-a17c-d6bdd5de0812
*/
[data-view-name$="ToastNotificationComponent"] {
/* top: calc(env(safe-area-inset-top) + 12px);*/
right: 12px;
background-color: #000000;
width: 400px;
padding: 16px 20px 16px 20px;
transition: transform 400ms, opacity 400ms, top 250ms;
}
[data-view-name$="ToastNotificationComponent"] > div.content > header > div.media {
display: none;
}
[data-view-name$="ToastNotificationComponent"] > div.content > header > div.headline {
color: #ffffff;
font-size: 15px;
height: 24px;
line-height: 24px;
}
[data-view-name$="ToastNotificationComponent"] > div.content > div.body > div.copy > p {
color: #ffffff;
font-size: 13px;
line-height: 1.40em;
overflow-wrap: anywhere;
}
/**
* /static/css/components/panels/base.css
*
* Shared chrome + slide-in behaviour for every panel
* ({BasePanelComponentView} subclasses). A panel is a right-anchored
* aside that slides in from the edge over the page, with a header
* (headline + close affordance) above a flex-fill {.body}. Each
* panel's own stylesheet owns only what's specific to it — its width
* and the contents of its {.body}. (from Darrin)
*/
[data-view-name$="PanelComponent"] {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: auto;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
background-color: var(--cubby-color-bg-elevated);
border-left: 1px solid var(--cubby-color-border-strong);
backdrop-filter: none;
opacity: 1;
overflow: hidden;
z-index: 100;
font-size: var(--cubby-font-size-body);
pointer-events: none;
transform: translateX(100%);
transition: transform 720ms cubic-bezier(0.32, 0.72, 0, 1);
}
/**
* States (open)
*
*/
[data-view-name$="PanelComponent"].open {
pointer-events: auto;
transform: translateX(0%);
}
/**
* Header
*
*/
[data-view-name$="PanelComponent"] > header {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
min-height: var(--cubby-header-height);
padding: 10px 14px 10px 14px;
border-bottom: 1px solid var(--cubby-color-border);
background-color: var(--cubby-color-bg);
flex-shrink: 0;
}
[data-view-name$="PanelComponent"] > header > .headline {
font-weight: 600;
font-size: 18px;
line-height: 24px;
order: 1;
}
[data-view-name$="PanelComponent"] > header > .close {
width: 32px;
height: 32px;
cursor: pointer;
opacity: 0.6;
transform: scale(0.5);
order: 2;
transition: transform var(--cubby-duration-root, 150ms), opacity var(--cubby-duration-root, 150ms);
}
[data-view-name$="PanelComponent"] > header > .close > .graphic {
width: 32px;
height: 32px;
}
[data-view-name$="PanelComponent"] > header > .close:hover {
transform: rotate(90deg) scale(0.65);
opacity: 0.92;
}
/**
* Body — flex-fill container the panel's content renders into. (from
* Darrin)
*/
[data-view-name$="PanelComponent"] > .body {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
/**
* /static/css/components/panels/editRecord.css
*
* EditRecord-specific panel layout — its width and the internal frame
* for the edit {