12166 lines
303 KiB
CSS
12166 lines
303 KiB
CSS
/**
|
||
* Raiju Admin — Backend Styles
|
||
* Imports shared tokens and components, then adds admin-specific styles.
|
||
*/
|
||
|
||
@import url('../css/raiju-admin-tokens.css');
|
||
@import url('../css/raiju-admin-components.css');
|
||
|
||
|
||
/* ============================================================
|
||
BASE
|
||
============================================================ */
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* Fluid root size: 14px below ~1100px, 16px around 1900px, 18px from ~2650px.
|
||
Everything below is in rem, so type, spacing, controls, sidebar and the
|
||
content width all scale together. Not shared with the public site. */
|
||
html {
|
||
font-size: clamp(14px, 11.1px + 0.26vw, 18px);
|
||
--rj-d: 1;
|
||
}
|
||
|
||
/* Density: "auto" follows the viewport, the user setting overrides it. */
|
||
@media (max-width: 1100px) {
|
||
html:not([data-density]),
|
||
html[data-density="auto"] { --rj-d: 0.85; }
|
||
}
|
||
@media (min-width: 1900px) {
|
||
html:not([data-density]),
|
||
html[data-density="auto"] { --rj-d: 1.08; }
|
||
}
|
||
html[data-density="compact"] { --rj-d: 0.8; }
|
||
html[data-density="comfortable"] { --rj-d: 1.12; }
|
||
|
||
body {
|
||
font-family: var(--rj-font-sans);
|
||
background: var(--rj-sidebar-bg);
|
||
color: var(--rj-text);
|
||
margin: 0;
|
||
padding: 0;
|
||
line-height: 1.6;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
a {
|
||
color: var(--rj-primary);
|
||
text-decoration: none;
|
||
}
|
||
|
||
a:hover {
|
||
color: var(--rj-primary-hover);
|
||
}
|
||
|
||
|
||
/* ============================================================
|
||
LOGIN / SETUP PAGE
|
||
============================================================ */
|
||
|
||
.login-page {
|
||
display: grid;
|
||
place-items: center;
|
||
min-height: 100vh;
|
||
background:
|
||
radial-gradient(ellipse at 50% 0%, var(--rj-primary-subtle) 0%, transparent 70%),
|
||
var(--rj-bg);
|
||
}
|
||
|
||
.login-page--background {
|
||
background:
|
||
linear-gradient(var(--login-overlay-color, color-mix(in srgb, var(--rj-bg) 86%, transparent)), var(--login-overlay-color, color-mix(in srgb, var(--rj-bg) 86%, transparent))),
|
||
var(--login-image),
|
||
var(--rj-bg);
|
||
background-position: center;
|
||
background-size: cover;
|
||
}
|
||
|
||
.login-page--split {
|
||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||
place-items: stretch;
|
||
background: var(--rj-bg);
|
||
}
|
||
|
||
.login-media {
|
||
display: none;
|
||
}
|
||
|
||
.login-page--split .login-media {
|
||
display: block;
|
||
min-height: 100vh;
|
||
background-image: var(--login-image);
|
||
background-position: center;
|
||
background-size: cover;
|
||
}
|
||
|
||
.login-page--image-right .login-media {
|
||
grid-column: 2;
|
||
}
|
||
|
||
.login-page--image-right .login-container {
|
||
grid-column: 1;
|
||
grid-row: 1;
|
||
}
|
||
|
||
.login-container {
|
||
align-self: center;
|
||
justify-self: center;
|
||
background: var(--login-box-bg, var(--rj-bg-elevated));
|
||
color: var(--login-box-text, var(--rj-text));
|
||
padding: var(--rj-space-10) var(--rj-space-8);
|
||
border-radius: var(--rj-radius-xl);
|
||
box-shadow: var(--rj-shadow-lg);
|
||
border: 1px solid var(--rj-border);
|
||
width: 100%;
|
||
max-width: 420px;
|
||
}
|
||
|
||
.login-container--plain {
|
||
background: transparent;
|
||
border-color: transparent;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.login-page--split .login-container {
|
||
max-width: 420px;
|
||
}
|
||
|
||
.login-logo {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-bottom: var(--rj-space-8);
|
||
}
|
||
|
||
.login-logo img {
|
||
width: auto;
|
||
max-width: 202px;
|
||
height: auto;
|
||
max-height: 77px;
|
||
object-fit: contain;
|
||
}
|
||
|
||
/* Inline-SVG variant of the favicon — follows the admin primary color. */
|
||
.login-logo svg {
|
||
width: 60px;
|
||
height: 60px;
|
||
color: var(--rj-primary);
|
||
}
|
||
|
||
.login-container h1 {
|
||
margin: 0 0 var(--rj-space-1) 0;
|
||
font-family: var(--rj-font-sans);
|
||
font-size: 1.5rem;
|
||
font-weight: 600;
|
||
color: var(--login-box-text, var(--rj-text));
|
||
text-align: center;
|
||
}
|
||
|
||
.site-name {
|
||
color: var(--login-box-text, var(--rj-text-muted));
|
||
margin: 0 0 var(--rj-space-6) 0;
|
||
font-size: 0.875rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.login-container .form-group label {
|
||
color: var(--login-box-text, var(--rj-text));
|
||
}
|
||
|
||
.login-container .btn-block {
|
||
margin-top: var(--rj-space-8);
|
||
}
|
||
|
||
.back-link {
|
||
margin-top: var(--rj-space-3);
|
||
text-align: center;
|
||
}
|
||
|
||
.back-link a {
|
||
color: var(--login-box-text, var(--rj-text-muted));
|
||
font-size: 0.875rem;
|
||
transition: color var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.back-link a:hover {
|
||
color: var(--rj-primary);
|
||
}
|
||
|
||
.login-version {
|
||
margin-top: var(--rj-space-3);
|
||
text-align: center;
|
||
font-size: 0.75rem;
|
||
color: var(--login-box-text, var(--rj-text-muted));
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* Password field with toggle */
|
||
.password-input-wrap {
|
||
position: relative;
|
||
}
|
||
|
||
.password-input-wrap input {
|
||
padding-right: 42px;
|
||
}
|
||
|
||
.password-toggle {
|
||
position: absolute;
|
||
right: 8px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
background: none;
|
||
border: none;
|
||
padding: var(--rj-space-1);
|
||
cursor: pointer;
|
||
color: var(--rj-text-muted);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: color var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.password-toggle:hover {
|
||
color: var(--rj-text);
|
||
}
|
||
|
||
.password-toggle .icon-eye-off {
|
||
display: none;
|
||
}
|
||
|
||
.password-toggle.visible .icon-eye {
|
||
display: none;
|
||
}
|
||
|
||
.password-toggle.visible .icon-eye-off {
|
||
display: block;
|
||
}
|
||
|
||
|
||
/* ============================================================
|
||
FORMS (legacy .form-group — used in login/setup/dashboard)
|
||
============================================================ */
|
||
|
||
.form-group {
|
||
margin-bottom: var(--rj-space-5);
|
||
}
|
||
|
||
.form-group label {
|
||
display: block;
|
||
margin-bottom: var(--rj-space-2);
|
||
font-size: 0.875rem;
|
||
font-weight: 500;
|
||
color: var(--rj-text);
|
||
}
|
||
|
||
.form-group input,
|
||
.form-group textarea,
|
||
.form-group select {
|
||
width: 100%;
|
||
padding: var(--rj-space-2-5) var(--rj-space-3-5);
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-md);
|
||
font-family: var(--rj-font-sans);
|
||
font-size: var(--rj-text-md);
|
||
color: var(--rj-text);
|
||
background: var(--rj-bg-elevated);
|
||
color-scheme: light;
|
||
transition: border-color var(--rj-duration-fast) var(--rj-ease),
|
||
box-shadow var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
[data-site-theme="dark"] .form-group input,
|
||
[data-site-theme="dark"] .form-group textarea,
|
||
[data-site-theme="dark"] .form-group select {
|
||
color-scheme: dark;
|
||
}
|
||
|
||
/* One control height for every single-line field (textareas keep their padding) */
|
||
.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
|
||
.form-group select {
|
||
height: var(--rj-control-h);
|
||
padding-block: 0;
|
||
}
|
||
|
||
.form-group input[type="date"]::-webkit-calendar-picker-indicator,
|
||
.form-group input[type="datetime-local"]::-webkit-calendar-picker-indicator,
|
||
.form-group input[type="month"]::-webkit-calendar-picker-indicator,
|
||
.form-group input[type="time"]::-webkit-calendar-picker-indicator,
|
||
.form-group input[type="week"]::-webkit-calendar-picker-indicator {
|
||
opacity: 0.72;
|
||
}
|
||
|
||
[data-site-theme="dark"] .form-group input[type="date"]::-webkit-calendar-picker-indicator,
|
||
[data-site-theme="dark"] .form-group input[type="datetime-local"]::-webkit-calendar-picker-indicator,
|
||
[data-site-theme="dark"] .form-group input[type="month"]::-webkit-calendar-picker-indicator,
|
||
[data-site-theme="dark"] .form-group input[type="time"]::-webkit-calendar-picker-indicator,
|
||
[data-site-theme="dark"] .form-group input[type="week"]::-webkit-calendar-picker-indicator {
|
||
filter: invert(1);
|
||
opacity: 0.78;
|
||
}
|
||
|
||
.ce-input[type="date"],
|
||
.ce-input[type="time"],
|
||
.editor-input[type="date"],
|
||
.editor-input[type="time"] {
|
||
background-repeat: no-repeat;
|
||
background-position: right 12px center;
|
||
background-size: 15px 15px;
|
||
padding-right: 36px;
|
||
}
|
||
|
||
.ce-input[type="date"],
|
||
.editor-input[type="date"] {
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
.ce-input[type="time"],
|
||
.editor-input[type="time"] {
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
[data-site-theme="dark"] .ce-input[type="date"],
|
||
[data-site-theme="dark"] .editor-input[type="date"] {
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c7d2e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
[data-site-theme="dark"] .ce-input[type="time"],
|
||
[data-site-theme="dark"] .editor-input[type="time"] {
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c7d2e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
.ce-input[type="date"]::-webkit-calendar-picker-indicator,
|
||
.ce-input[type="time"]::-webkit-calendar-picker-indicator,
|
||
.editor-input[type="date"]::-webkit-calendar-picker-indicator,
|
||
.editor-input[type="time"]::-webkit-calendar-picker-indicator {
|
||
opacity: 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.form-group input::placeholder,
|
||
.form-group textarea::placeholder {
|
||
color: var(--login-box-text, var(--rj-text-muted));
|
||
}
|
||
|
||
/* Override browser autofill background */
|
||
.form-group input:-webkit-autofill,
|
||
.form-group input:-webkit-autofill:hover,
|
||
.form-group input:-webkit-autofill:focus {
|
||
-webkit-box-shadow: 0 0 0 1000px var(--rj-bg-elevated) inset;
|
||
-webkit-text-fill-color: var(--rj-text);
|
||
transition: background-color 5000s ease-in-out 0s;
|
||
}
|
||
|
||
.form-group input:focus,
|
||
.form-group textarea:focus,
|
||
.form-group select:focus {
|
||
outline: none;
|
||
border-color: var(--rj-border-focus, var(--rj-primary));
|
||
box-shadow: 0 0 0 3px var(--rj-focus-ring, var(--rj-primary-muted));
|
||
}
|
||
|
||
.form-group textarea {
|
||
min-height: 150px;
|
||
font-family: inherit;
|
||
resize: vertical;
|
||
}
|
||
|
||
.form-group.html-editor textarea {
|
||
font-family: var(--rj-font-mono);
|
||
font-size: 0.875rem;
|
||
min-height: 300px;
|
||
}
|
||
|
||
.form-group select {
|
||
appearance: none;
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23525252' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||
background-repeat: no-repeat;
|
||
background-position: right 12px center;
|
||
padding-right: var(--rj-space-10);
|
||
}
|
||
|
||
select:not([multiple]) {
|
||
appearance: none;
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23525252' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||
background-repeat: no-repeat;
|
||
background-position: right 12px center;
|
||
background-size: 12px 8px;
|
||
padding-right: var(--rj-space-10);
|
||
}
|
||
|
||
[data-site-theme="dark"] select:not([multiple]) {
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23c7d2e0' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
.skip-link {
|
||
position: fixed;
|
||
top: 12px;
|
||
left: 12px;
|
||
z-index: calc(var(--rj-z-toast) + 1);
|
||
transform: translateY(calc(-100% - 24px)); /* fully off screen, shadow included */
|
||
padding: var(--rj-space-2-5) var(--rj-space-3-5);
|
||
border-radius: var(--editor-btn-radius, var(--rj-radius-md));
|
||
background: var(--rj-primary);
|
||
color: var(--rj-primary-contrast, #fff);
|
||
font-weight: 700;
|
||
text-decoration: none;
|
||
box-shadow: none;
|
||
transition: transform var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.skip-link:focus,
|
||
.skip-link:focus-visible {
|
||
transform: translateY(0);
|
||
box-shadow: var(--rj-shadow-lg);
|
||
outline: 3px solid var(--rj-primary-muted);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
|
||
/* ============================================================
|
||
BUTTONS (legacy .btn — used throughout dashboard JS)
|
||
============================================================ */
|
||
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: var(--rj-space-2);
|
||
height: var(--rj-control-h);
|
||
padding: 0 var(--rj-space-5);
|
||
border: 1px solid transparent;
|
||
border-radius: var(--editor-btn-radius, var(--rj-radius-md));
|
||
font-family: var(--rj-font-sans);
|
||
font-size: var(--rj-text-md);
|
||
font-weight: 500;
|
||
line-height: 1.2;
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
white-space: nowrap;
|
||
transition: background-color var(--rj-duration-fast) var(--rj-ease),
|
||
color var(--rj-duration-fast) var(--rj-ease),
|
||
border-color var(--rj-duration-fast) var(--rj-ease),
|
||
transform var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.btn:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.btn:focus-visible {
|
||
outline: 2px solid var(--rj-primary);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
.btn:disabled {
|
||
opacity: 0.5;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.btn-spinner {
|
||
width: 1em;
|
||
height: 1em;
|
||
border: 2px solid currentColor;
|
||
border-right-color: transparent;
|
||
border-radius: 50%;
|
||
animation: backup-spin 0.7s linear infinite;
|
||
}
|
||
|
||
.btn.is-loading {
|
||
cursor: wait;
|
||
}
|
||
|
||
/* Primary: the fill colour carries the hover (brief lift, then a calm settle,
|
||
see @keyframes rj-hover-fill); the glow is a sheen plus a soft shadow on
|
||
top and disappears entirely under .rj-flat-buttons. */
|
||
.btn-primary {
|
||
--rj-hover-from: var(--rj-primary);
|
||
--rj-hover-peak: var(--rj-hover-lift);
|
||
--rj-hover-to: var(--rj-hover-settle);
|
||
background-color: var(--rj-primary);
|
||
background-image: var(--rj-primary-sheen);
|
||
color: var(--rj-text-on-primary);
|
||
text-shadow: 0 1px 1px rgba(255,255,255,0.25), 0 -1px 1px rgba(0,0,0,0.15);
|
||
box-shadow: 0 2px 8px color-mix(in srgb, var(--rj-primary) 15%, transparent);
|
||
transition: background-color var(--rj-duration-hover-out) ease-out,
|
||
box-shadow var(--rj-duration-hover-out) ease-out,
|
||
transform var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background-color: var(--rj-hover-settle);
|
||
box-shadow: 0 4px 20px color-mix(in srgb, var(--rj-primary) 35%, transparent);
|
||
animation: rj-hover-fill var(--rj-duration-hover-in) linear both;
|
||
transition: box-shadow calc(var(--rj-duration-hover-in) * 0.4) var(--rj-ease),
|
||
transform var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.btn-primary:active {
|
||
background-color: var(--rj-primary-active);
|
||
animation: none;
|
||
transition-duration: var(--rj-duration-press);
|
||
}
|
||
|
||
/* Hover fill for every control: from the rest colour over a brighter peak to the
|
||
settled hover colour. Each control sets the three custom properties. */
|
||
@keyframes rj-hover-fill {
|
||
0% { background-color: var(--rj-hover-from); }
|
||
36% { background-color: var(--rj-hover-peak); }
|
||
62% { background-color: var(--rj-hover-peak); }
|
||
100% { background-color: var(--rj-hover-to); }
|
||
}
|
||
|
||
/* Glow off: no sheen, no shadow, no text shadow, in every state. The focus ring
|
||
is an outline and stays. */
|
||
.rj-flat-buttons .btn-primary,
|
||
.rj-flat-buttons .btn-primary:hover,
|
||
.rj-flat-buttons .btn-primary:active {
|
||
background-image: none;
|
||
box-shadow: none;
|
||
text-shadow: none;
|
||
}
|
||
|
||
/* Disabled and loading buttons keep their rest colour */
|
||
.btn:disabled,
|
||
.btn.is-loading,
|
||
.btn.is-loading:hover {
|
||
animation: none;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.btn-secondary {
|
||
--rj-hover-from: var(--rj-bg-elevated);
|
||
--rj-hover-peak: var(--rj-hover-tint);
|
||
--rj-hover-to: var(--rj-hover-tint-settle);
|
||
background-color: var(--rj-bg-elevated);
|
||
color: var(--rj-text);
|
||
border-color: var(--rj-border-strong);
|
||
transition: background-color var(--rj-duration-hover-out) ease-out,
|
||
border-color var(--rj-duration-hover-out) ease-out,
|
||
color var(--rj-duration-fast) var(--rj-ease),
|
||
transform var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background-color: var(--rj-hover-tint-settle);
|
||
border-color: var(--rj-text-muted);
|
||
animation: rj-hover-fill var(--rj-duration-hover-in) linear both;
|
||
}
|
||
|
||
.btn-secondary:active {
|
||
background-color: var(--rj-hover-tint);
|
||
animation: none;
|
||
transition-duration: var(--rj-duration-press);
|
||
}
|
||
|
||
.btn-success {
|
||
background: var(--rj-success);
|
||
color: var(--rj-text-on-primary);
|
||
}
|
||
|
||
.btn-success:hover {
|
||
background: #15803d;
|
||
}
|
||
|
||
.btn-danger {
|
||
background: var(--rj-danger-btn);
|
||
color: #ffffff;
|
||
text-shadow: 0 1px 1px rgba(0,0,0,0.2);
|
||
box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15);
|
||
position: relative;
|
||
overflow: hidden;
|
||
z-index: 0;
|
||
transition: box-shadow 800ms var(--rj-ease) 250ms,
|
||
transform var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.btn-danger::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: var(--rj-danger-btn-hover);
|
||
opacity: 0;
|
||
transition: opacity 800ms var(--rj-ease) 250ms;
|
||
z-index: -1;
|
||
}
|
||
|
||
.btn-danger:hover {
|
||
box-shadow: 0 4px 20px rgba(220, 38, 38, 0.4);
|
||
transition: box-shadow 800ms var(--rj-ease),
|
||
transform var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.btn-danger:hover::after {
|
||
opacity: 1;
|
||
transition: opacity 800ms var(--rj-ease);
|
||
}
|
||
|
||
/* Flat danger buttons (glow disabled) */
|
||
.rj-flat-buttons .btn-danger {
|
||
background: var(--rj-danger);
|
||
box-shadow: none;
|
||
}
|
||
|
||
.rj-flat-buttons .btn-danger::after {
|
||
display: none;
|
||
}
|
||
|
||
.rj-flat-buttons .btn-danger:hover {
|
||
background: var(--rj-danger-hover);
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.btn-sm {
|
||
height: var(--rj-control-h-sm);
|
||
padding: 0 var(--rj-space-3);
|
||
font-size: var(--rj-text-sm);
|
||
}
|
||
|
||
.btn-block {
|
||
display: flex;
|
||
width: 100%;
|
||
justify-content: center;
|
||
}
|
||
|
||
|
||
/* ============================================================
|
||
ALERTS
|
||
============================================================ */
|
||
|
||
.error-message {
|
||
background: var(--rj-danger-subtle);
|
||
color: var(--rj-danger);
|
||
padding: var(--rj-space-3) var(--rj-space-4);
|
||
border-radius: var(--rj-radius-md);
|
||
border: 1px solid rgba(220, 38, 38, 0.15);
|
||
margin-bottom: var(--rj-space-5);
|
||
font-size: 0.875rem;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.success-message {
|
||
background: var(--rj-success-subtle);
|
||
color: var(--rj-success);
|
||
padding: var(--rj-space-3) var(--rj-space-4);
|
||
border-radius: var(--rj-radius-md);
|
||
border: 1px solid rgba(22, 163, 74, 0.15);
|
||
margin-bottom: var(--rj-space-5);
|
||
font-size: 0.875rem;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.info-message {
|
||
background: var(--rj-warning-subtle);
|
||
color: var(--rj-warning-text, #92400e);
|
||
padding: var(--rj-space-3) var(--rj-space-4);
|
||
border-radius: var(--rj-radius-md);
|
||
border: 1px solid rgba(245, 158, 11, 0.2);
|
||
margin-bottom: var(--rj-space-5);
|
||
font-size: 0.875rem;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.lockout-countdown {
|
||
margin-top: var(--rj-space-2);
|
||
font-size: 1.0625rem;
|
||
font-weight: 600;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
|
||
/* ============================================================
|
||
PASSWORD WARNING BANNER
|
||
============================================================ */
|
||
|
||
/* Notice banner — used for inline editing hints and warnings. Top-level
|
||
banners live at the top of .admin-main; contained banners sit inside cards. */
|
||
.info-banner {
|
||
background: var(--rj-primary-medium);
|
||
border-bottom: 2px solid var(--rj-primary);
|
||
padding: var(--rj-space-3) var(--rj-space-5);
|
||
/* Match .admin-main's top-left radius so the banner doesn't bleed past it. */
|
||
border-top-left-radius: var(--rj-radius-xl);
|
||
}
|
||
|
||
.info-banner[hidden] {
|
||
display: none;
|
||
}
|
||
|
||
.info-banner--warning {
|
||
background: var(--rj-warning-subtle, #fffbeb);
|
||
border-bottom-color: var(--rj-warning);
|
||
}
|
||
|
||
.info-banner--contained {
|
||
margin: 0 0 var(--rj-space-4);
|
||
border: 1px solid var(--rj-primary);
|
||
border-radius: var(--rj-radius-xl);
|
||
}
|
||
|
||
.info-banner--contained.info-banner--warning {
|
||
border-color: var(--rj-warning);
|
||
}
|
||
|
||
.info-banner--contained .info-banner__inner {
|
||
max-width: none;
|
||
margin: 0;
|
||
}
|
||
|
||
.info-banner__inner {
|
||
max-width: 900px;
|
||
margin: 0 auto;
|
||
color: var(--rj-text);
|
||
font-size: 0.9375rem;
|
||
line-height: 1.5;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: var(--rj-space-3);
|
||
position: relative;
|
||
padding-right: var(--rj-space-8);
|
||
}
|
||
|
||
.info-banner__title {
|
||
color: var(--rj-text);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-1-5);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.info-banner--warning .info-banner__inner,
|
||
.info-banner--warning .info-banner__title {
|
||
color: var(--rj-warning-text-strong, #78350f);
|
||
}
|
||
|
||
.info-banner--warning .info-banner__body {
|
||
color: var(--rj-warning-text, #92400e);
|
||
}
|
||
|
||
/* Text + CTA live inside a single inline wrapper, so the CTA reads as the
|
||
end of the sentence rather than a button next to the close (×) icon. */
|
||
.info-banner__body {
|
||
flex: 1 1 auto;
|
||
}
|
||
|
||
.info-banner__cta {
|
||
color: var(--rj-primary, #3858e9);
|
||
font-weight: 600;
|
||
text-decoration: none;
|
||
white-space: nowrap;
|
||
margin-left: 0.35em;
|
||
}
|
||
|
||
.info-banner--warning .info-banner__cta {
|
||
color: var(--rj-warning-text-strong, #78350f);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.mail-config-banner {
|
||
margin: 0 0 var(--rj-space-5);
|
||
border: 1px solid color-mix(in srgb, var(--rj-warning) 38%, var(--rj-border));
|
||
border-radius: var(--rj-radius-lg);
|
||
padding: var(--rj-space-3) var(--rj-space-3-5);
|
||
}
|
||
|
||
.security-warning-banner {
|
||
max-width: calc(var(--rj-content-max) - (var(--rj-space-6) * 2));
|
||
margin: 0 auto var(--rj-space-6);
|
||
padding-inline: 0;
|
||
width: calc(100% - var(--rj-space-6) * 2);
|
||
}
|
||
|
||
.mail-config-banner .info-banner__inner {
|
||
max-width: none;
|
||
margin: 0;
|
||
display: grid;
|
||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||
gap: var(--rj-space-2-5);
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
padding-right: 0;
|
||
}
|
||
|
||
.mail-config-banner .info-banner__icon {
|
||
display: inline-flex;
|
||
color: var(--rj-warning-text-strong, #78350f);
|
||
}
|
||
|
||
.mail-config-banner .info-banner__content {
|
||
display: grid;
|
||
gap: var(--rj-space-0-5);
|
||
min-width: 0;
|
||
}
|
||
|
||
.mail-config-banner .info-banner__title {
|
||
display: block;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.mail-config-banner .info-banner__body {
|
||
display: block;
|
||
min-width: 0;
|
||
color: var(--rj-warning-text, #92400e);
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.mail-config-banner .info-banner__cta {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 30px;
|
||
border: 1px solid color-mix(in srgb, var(--rj-warning) 40%, transparent);
|
||
border-radius: var(--rj-radius-md);
|
||
padding: var(--rj-space-1) var(--rj-space-2-5);
|
||
margin-left: 0;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.mail-config-banner .info-banner__cta:hover {
|
||
background: color-mix(in srgb, var(--rj-warning) 14%, transparent);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.info-banner__cta-button {
|
||
appearance: none;
|
||
background: transparent;
|
||
border: 0;
|
||
padding: 0;
|
||
font: inherit;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.info-banner__cta:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.info-banner__close {
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 0;
|
||
transform: translateY(-50%);
|
||
background: transparent;
|
||
border: 0;
|
||
padding: var(--rj-space-1) var(--rj-space-2);
|
||
font-size: 1.25rem;
|
||
line-height: 1;
|
||
color: var(--rj-text-muted, #6b7280);
|
||
cursor: pointer;
|
||
border-radius: var(--rj-radius-sm);
|
||
}
|
||
|
||
.info-banner__close:hover {
|
||
background: rgba(0, 0, 0, 0.08);
|
||
color: var(--rj-text);
|
||
}
|
||
|
||
/* Radio-group — used in settings forms for mutually exclusive options.
|
||
Spec: needs to override .form-group label { display: block; margin-bottom: ... }. */
|
||
.form-group .form-group-label {
|
||
display: block;
|
||
margin-bottom: var(--rj-space-2);
|
||
font-size: 0.875rem;
|
||
font-weight: 500;
|
||
color: var(--rj-text);
|
||
}
|
||
|
||
.radio-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--rj-space-2);
|
||
margin-top: var(--rj-space-1);
|
||
}
|
||
|
||
.form-group label.radio-option {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-2-5);
|
||
cursor: pointer;
|
||
font-size: 0.9375rem;
|
||
font-weight: 400;
|
||
margin-bottom: 0;
|
||
color: var(--rj-text);
|
||
}
|
||
|
||
.form-group label.radio-option input[type="radio"] {
|
||
width: auto;
|
||
margin: 0;
|
||
padding: 0;
|
||
cursor: pointer;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
|
||
/* ============================================================
|
||
SIDEBAR LAYOUT
|
||
============================================================ */
|
||
|
||
.admin-body {
|
||
display: flex;
|
||
min-height: calc(100vh - var(--rj-topbar-h));
|
||
}
|
||
|
||
.admin-sidebar {
|
||
width: var(--rj-sidebar-w);
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
transition: transform var(--rj-duration-normal) var(--rj-ease);
|
||
position: sticky;
|
||
top: var(--rj-topbar-h);
|
||
align-self: flex-start;
|
||
height: calc(100vh - var(--rj-topbar-h));
|
||
}
|
||
|
||
.sidebar-top {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.sidebar-nav {
|
||
padding: var(--rj-space-4) var(--rj-space-3);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--rj-space-1);
|
||
}
|
||
|
||
.sidebar-nav-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-3);
|
||
padding: var(--rj-space-3) var(--rj-space-4);
|
||
border: none;
|
||
border-radius: var(--rj-radius-md);
|
||
background: transparent;
|
||
color: var(--rj-sidebar-text);
|
||
font-family: var(--rj-font-sans);
|
||
font-size: var(--rj-text-md);
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: background-color var(--rj-duration-fast) var(--rj-ease),
|
||
color var(--rj-duration-fast) var(--rj-ease);
|
||
text-decoration: none;
|
||
width: 100%;
|
||
text-align: left;
|
||
}
|
||
|
||
.sidebar-nav-item svg {
|
||
width: 1.25rem;
|
||
height: 1.25rem;
|
||
flex-shrink: 0;
|
||
opacity: 0.7;
|
||
transition: opacity var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
/* Menus brighten monochrome (a little of the text colour over the hover surface), not in the accent */
|
||
.sidebar-nav-item:not(.active):hover {
|
||
--rj-hover-from: transparent;
|
||
--rj-hover-peak: color-mix(in srgb, var(--rj-sidebar-text) 9%, var(--rj-sidebar-hover-bg));
|
||
--rj-hover-to: var(--rj-sidebar-hover-bg);
|
||
background: var(--rj-sidebar-hover-bg);
|
||
color: var(--rj-sidebar-text-hover, var(--rj-sidebar-text-active));
|
||
animation: rj-hover-fill var(--rj-duration-hover-in) linear both;
|
||
}
|
||
|
||
.sidebar-nav-item {
|
||
transition: background-color var(--rj-duration-hover-out) ease-out,
|
||
color var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.sidebar-nav-item:hover svg {
|
||
opacity: 1;
|
||
}
|
||
|
||
.sidebar-nav-item:focus-visible {
|
||
outline: 2px solid var(--rj-primary);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
.sidebar-nav-item.active {
|
||
background: var(--rj-sidebar-active-bg);
|
||
color: var(--rj-sidebar-text-active);
|
||
}
|
||
|
||
.sidebar-nav-item.active svg {
|
||
opacity: 1;
|
||
color: var(--rj-sidebar-text-active);
|
||
}
|
||
|
||
.sidebar-nav-item.active:hover {
|
||
background: var(--rj-sidebar-active-bg);
|
||
filter: brightness(1.05);
|
||
}
|
||
|
||
/* Paper: no filled pill, a bar at the left edge marks the active item */
|
||
[data-theme-preset="paper"] .sidebar-nav-item.active {
|
||
border-radius: 0;
|
||
box-shadow: inset 3px 0 0 var(--rj-primary);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.sidebar-bottom {
|
||
padding: var(--rj-space-3);
|
||
border-top: 1px var(--rj-divider-style, solid) var(--rj-sidebar-border);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--rj-space-1);
|
||
}
|
||
|
||
.sidebar-logout {
|
||
color: var(--rj-sidebar-text);
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.sidebar-logout:hover {
|
||
color: var(--rj-danger);
|
||
}
|
||
|
||
.sidebar-version {
|
||
display: block;
|
||
padding: var(--rj-space-3) var(--rj-space-4);
|
||
font-size: calc(0.6875rem * var(--rj-font-scale));
|
||
color: var(--rj-sidebar-text);
|
||
opacity: 0.55;
|
||
text-decoration: none;
|
||
transition: opacity var(--rj-duration-fast) var(--rj-ease),
|
||
color var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.sidebar-version:hover,
|
||
.sidebar-version:focus-visible {
|
||
color: var(--rj-sidebar-text-hover, var(--rj-sidebar-text-active));
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.sidebar-version:focus-visible {
|
||
outline: 2px solid var(--rj-primary);
|
||
outline-offset: 2px;
|
||
border-radius: var(--rj-radius-sm);
|
||
}
|
||
|
||
|
||
/* ============================================================
|
||
MAIN CONTENT AREA
|
||
============================================================ */
|
||
|
||
.admin-main {
|
||
flex: 1;
|
||
min-width: 0;
|
||
background: var(--rj-bg);
|
||
border-radius: var(--rj-radius-xl) 0 0 0;
|
||
box-shadow: -2px 0 12px rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.admin-main.has-security-warning {
|
||
padding-top: var(--rj-space-6);
|
||
}
|
||
|
||
.admin-topbar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-4);
|
||
min-height: var(--rj-topbar-h);
|
||
padding-block: var(--rj-space-2);
|
||
padding-inline-start: var(--rj-space-6);
|
||
/* Align .topbar-actions with the right edge of .admin-container's content.
|
||
The container is centred inside .admin-main (viewport minus sidebar) and
|
||
capped at --rj-content-max, so the free space right of it is half of
|
||
(main width - container width); add the container's own side padding. */
|
||
padding-inline-end: calc(
|
||
(100% - var(--rj-sidebar-w) - min(100% - var(--rj-sidebar-w), var(--rj-content-max))) / 2
|
||
+ var(--rj-space-6)
|
||
);
|
||
background: var(--rj-topbar-bg);
|
||
color: var(--rj-topbar-text);
|
||
border-bottom: 1px solid var(--rj-topbar-border, transparent);
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: calc(var(--rj-z-sticky) - 1);
|
||
}
|
||
|
||
.topbar-brand {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-2);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.topbar-logo {
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
|
||
/* Frontend-logos sub-section inside the Branding settings. Visually
|
||
separated from the Favicon block by a top border, but shares the
|
||
surrounding card so the hierarchy stays flat (no card-in-card). */
|
||
.frontend-logos-block {
|
||
margin-top: var(--rj-space-6);
|
||
padding-top: var(--rj-space-5);
|
||
border-top: 1px solid var(--rj-border);
|
||
}
|
||
.frontend-logos-block__title {
|
||
margin: 0 0 var(--rj-space-1) 0;
|
||
font-size: 0.9375rem;
|
||
font-weight: 600;
|
||
}
|
||
.frontend-logos-block__hint {
|
||
display: block;
|
||
margin-bottom: var(--rj-space-5);
|
||
}
|
||
.frontend-logos-block .form-group:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* Inline-SVG variant follows the admin primary color so it picks up
|
||
the user's branding accent in both light and dark themes. */
|
||
svg.topbar-logo {
|
||
color: var(--rj-primary);
|
||
}
|
||
|
||
.topbar-dashboard {
|
||
font-family: var(--rj-font-display);
|
||
font-size: var(--rj-text-lg);
|
||
font-weight: 600;
|
||
color: var(--rj-topbar-text);
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
.topbar-title {
|
||
margin: 0;
|
||
font-family: var(--rj-font-sans);
|
||
font-size: calc(0.9375rem * var(--rj-font-scale));
|
||
font-weight: 500;
|
||
color: var(--rj-topbar-text-muted);
|
||
padding-left: var(--rj-space-4);
|
||
border-left: 1px solid var(--rj-topbar-divider, var(--rj-border));
|
||
}
|
||
|
||
.topbar-selectors {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-2);
|
||
margin-left: auto;
|
||
}
|
||
|
||
.topbar-select {
|
||
height: var(--rj-control-h-sm);
|
||
padding: 0 30px 0 var(--rj-space-2-5);
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-full);
|
||
font-family: var(--rj-font-sans);
|
||
font-size: var(--rj-text-sm);
|
||
color: var(--rj-text);
|
||
background: var(--rj-bg-elevated);
|
||
appearance: none;
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23525252' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||
background-repeat: no-repeat;
|
||
background-position: right 8px center;
|
||
transition: border-color var(--rj-duration-fast) var(--rj-ease),
|
||
box-shadow var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.topbar-select:focus {
|
||
outline: none;
|
||
border-color: var(--rj-primary);
|
||
box-shadow: 0 0 0 3px var(--rj-primary-muted);
|
||
}
|
||
|
||
.topbar-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-3);
|
||
margin-left: auto;
|
||
padding-left: var(--rj-space-4);
|
||
border-left: 1px solid var(--rj-topbar-divider, var(--rj-border));
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.topbar-viewsite {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-2);
|
||
color: var(--rj-topbar-text-muted);
|
||
font-size: var(--rj-text-sm);
|
||
font-weight: 500;
|
||
text-decoration: none;
|
||
transition: color var(--rj-duration-fast) var(--rj-ease);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.topbar-viewsite:hover {
|
||
color: var(--rj-primary);
|
||
}
|
||
|
||
.sidebar-toggle {
|
||
display: none;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: var(--rj-control-h-sm);
|
||
height: var(--rj-control-h-sm);
|
||
border: none;
|
||
border-radius: var(--rj-radius-md);
|
||
background: transparent;
|
||
color: var(--rj-topbar-text-muted);
|
||
cursor: pointer;
|
||
padding: 0;
|
||
transition: background-color var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.sidebar-toggle:hover {
|
||
background: var(--rj-bg-hover);
|
||
}
|
||
|
||
.sidebar-toggle svg {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
|
||
/* ============================================================
|
||
MAIL BADGE
|
||
============================================================ */
|
||
|
||
.mail-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 18px;
|
||
height: 18px;
|
||
padding: 0 5px;
|
||
border-radius: var(--rj-radius-full);
|
||
background: var(--rj-brand);
|
||
color: var(--rj-text-on-primary);
|
||
font-size: 0.6875rem;
|
||
font-weight: 600;
|
||
line-height: 1;
|
||
margin-left: auto;
|
||
box-shadow: 0 0 0 2px var(--rj-brand-subtle);
|
||
}
|
||
|
||
.media-library-page {
|
||
min-height: calc(100vh - 88px);
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.media-library-mount {
|
||
min-height: calc(100vh - 168px);
|
||
flex: 1;
|
||
display: flex;
|
||
}
|
||
|
||
.mail-badge--hidden {
|
||
display: none;
|
||
}
|
||
|
||
|
||
/* ============================================================
|
||
ADMIN CONTAINER
|
||
============================================================ */
|
||
|
||
.admin-container {
|
||
max-width: var(--rj-content-max);
|
||
margin-inline: auto;
|
||
padding: var(--rj-space-6);
|
||
}
|
||
|
||
|
||
/* Mobile page selectors (shown only on mobile) */
|
||
.mobile-selectors {
|
||
display: none;
|
||
gap: var(--rj-space-2);
|
||
flex-wrap: wrap;
|
||
margin-bottom: var(--rj-space-4);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.mobile-selectors {
|
||
display: flex;
|
||
}
|
||
}
|
||
|
||
|
||
/* ============================================================
|
||
PAGE LIST
|
||
============================================================ */
|
||
|
||
.page-list-container {
|
||
margin-bottom: var(--rj-space-5);
|
||
}
|
||
|
||
.page-list-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: var(--rj-space-4);
|
||
}
|
||
|
||
.page-list-header-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-3);
|
||
--page-list-control-height: var(--rj-control-h-sm);
|
||
}
|
||
|
||
.page-list-header-left > .btn-sm {
|
||
height: var(--page-list-control-height);
|
||
padding-top: 0;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.sr-only {
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 1px;
|
||
padding: 0;
|
||
margin: -1px;
|
||
overflow: hidden;
|
||
clip: rect(0, 0, 0, 0);
|
||
white-space: nowrap;
|
||
border: 0;
|
||
}
|
||
|
||
.page-list-search {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.page-list-search-input {
|
||
width: min(18rem, 28vw);
|
||
min-width: 13rem;
|
||
height: var(--page-list-control-height);
|
||
padding: 0 var(--rj-space-3);
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-md);
|
||
color: var(--rj-text);
|
||
background: var(--rj-bg-elevated);
|
||
font: inherit;
|
||
font-size: 0.8125rem;
|
||
line-height: 1;
|
||
transition: border-color var(--rj-duration-fast) var(--rj-ease),
|
||
box-shadow var(--rj-duration-fast) var(--rj-ease),
|
||
background var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.page-list-search-input::placeholder {
|
||
color: var(--rj-text-muted);
|
||
}
|
||
|
||
.page-list-search-input:focus {
|
||
outline: none;
|
||
border-color: var(--rj-primary);
|
||
box-shadow: 0 0 0 3px var(--rj-primary-subtle);
|
||
}
|
||
|
||
.page-list-header-actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-end;
|
||
gap: var(--rj-space-2);
|
||
}
|
||
|
||
.page-list-header h2 {
|
||
margin: 0;
|
||
font-size: 1.25rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.page-list-title-stack {
|
||
display: grid;
|
||
gap: 3px;
|
||
}
|
||
|
||
.page-list-title-stack p {
|
||
max-width: 620px;
|
||
margin: 0;
|
||
color: var(--rj-text-muted);
|
||
font-size: 0.8125rem;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.page-list-header--mails {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) auto;
|
||
align-items: start;
|
||
gap: var(--rj-space-4);
|
||
}
|
||
|
||
.page-list-header--mails .page-list-header-left {
|
||
align-items: flex-start;
|
||
min-width: 0;
|
||
}
|
||
|
||
.page-list-header--mails .page-list-header-actions {
|
||
padding-top: var(--rj-space-0-5);
|
||
}
|
||
|
||
.mail-form-filter {
|
||
min-width: 180px;
|
||
}
|
||
|
||
.mail-cell-form {
|
||
color: var(--rj-text-muted);
|
||
font-size: 0.8125rem;
|
||
}
|
||
|
||
.page-list-table-wrap {
|
||
background: var(--rj-surface-panel, var(--rj-bg-elevated));
|
||
border-radius: var(--rj-radius-lg);
|
||
border: 1px solid var(--rj-border);
|
||
box-shadow: none;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.admin-list-footer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: var(--rj-space-3);
|
||
margin-top: var(--rj-space-3);
|
||
color: var(--rj-text-muted);
|
||
font-size: 0.75rem;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.admin-list-footer--top {
|
||
margin-top: 0;
|
||
margin-bottom: var(--rj-space-2);
|
||
}
|
||
|
||
.admin-list-footer--grid {
|
||
margin-top: var(--rj-space-4);
|
||
}
|
||
|
||
.admin-list-summary {
|
||
min-width: 0;
|
||
}
|
||
|
||
.admin-pagination {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-1);
|
||
flex-wrap: wrap;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.admin-pagination__btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 28px;
|
||
height: 28px;
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-md);
|
||
background: var(--rj-bg-elevated);
|
||
color: var(--rj-text);
|
||
cursor: pointer;
|
||
font: inherit;
|
||
font-weight: 600;
|
||
line-height: 1;
|
||
padding: 0 var(--rj-space-2);
|
||
transition: background var(--rj-duration-fast) var(--rj-ease),
|
||
border-color var(--rj-duration-fast) var(--rj-ease),
|
||
color var(--rj-duration-fast) var(--rj-ease),
|
||
box-shadow var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.admin-pagination__btn--arrow {
|
||
width: 28px;
|
||
padding: 0;
|
||
}
|
||
|
||
.admin-pagination__btn svg {
|
||
width: 14px;
|
||
height: 14px;
|
||
fill: none;
|
||
stroke: currentColor;
|
||
stroke-width: 2;
|
||
stroke-linecap: round;
|
||
stroke-linejoin: round;
|
||
}
|
||
|
||
.admin-pagination__btn:hover:not(:disabled),
|
||
.admin-pagination__btn:focus-visible {
|
||
border-color: var(--rj-primary);
|
||
color: var(--rj-primary);
|
||
background: var(--rj-primary-subtle);
|
||
box-shadow: 0 0 0 3px var(--rj-primary-subtle);
|
||
outline: none;
|
||
}
|
||
|
||
.admin-pagination__btn.is-current {
|
||
background: var(--rj-primary);
|
||
border-color: var(--rj-primary);
|
||
color: var(--rj-primary-contrast, #fff);
|
||
}
|
||
|
||
.admin-pagination__btn:disabled {
|
||
cursor: default;
|
||
opacity: .45;
|
||
}
|
||
|
||
.admin-pagination__ellipsis {
|
||
color: var(--rj-text-muted);
|
||
padding: 0 var(--rj-space-0-5);
|
||
}
|
||
|
||
.page-list-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.page-list-table thead th {
|
||
text-align: left;
|
||
padding: var(--rj-space-3) var(--rj-space-4);
|
||
font-weight: 600;
|
||
font-size: 0.75rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
color: var(--rj-text-muted);
|
||
background: var(--rj-bg-hover);
|
||
border-bottom: 1px solid var(--rj-border);
|
||
}
|
||
|
||
.page-list-table tbody tr {
|
||
border-bottom: 1px solid var(--rj-border);
|
||
transition: background var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.page-list-table tbody tr:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.page-list-table tbody tr:hover {
|
||
background: var(--rj-bg-hover);
|
||
}
|
||
|
||
.page-list-table td {
|
||
padding: var(--rj-space-3) var(--rj-space-4);
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.page-list-empty {
|
||
padding: var(--rj-space-8) var(--rj-space-4) !important;
|
||
color: var(--rj-text-muted);
|
||
text-align: center;
|
||
}
|
||
|
||
.page-list-col-title {
|
||
min-width: 200px;
|
||
}
|
||
|
||
.page-list-col-date {
|
||
min-width: 120px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.page-list-col-lang {
|
||
width: 100px;
|
||
text-align: center !important;
|
||
}
|
||
|
||
.page-list-cell-lang {
|
||
text-align: center;
|
||
}
|
||
|
||
.page-list-cell-title {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1px;
|
||
}
|
||
|
||
.page-list-title-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-2);
|
||
min-width: 0;
|
||
}
|
||
|
||
.page-list-title-link {
|
||
font-weight: 600;
|
||
color: var(--rj-text);
|
||
text-decoration: none;
|
||
transition: color var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.page-list-title-link:hover {
|
||
color: var(--rj-primary);
|
||
}
|
||
|
||
.page-list-slug {
|
||
font-size: 0.7rem;
|
||
color: var(--rj-text-muted);
|
||
font-family: var(--rj-font-mono);
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.page-list-cell-date {
|
||
color: var(--rj-text-muted);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* WordPress-style hover action row */
|
||
.page-list-row-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-0-5);
|
||
margin-top: var(--rj-space-0-5);
|
||
height: 20px;
|
||
opacity: 0;
|
||
transition: opacity var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.page-list-row:hover .page-list-row-actions {
|
||
opacity: 1;
|
||
}
|
||
|
||
.page-list-row-action {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 3px;
|
||
font-size: 0.75rem;
|
||
color: var(--rj-text-muted);
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
transition: color var(--rj-duration-fast) var(--rj-ease);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.page-list-row-action:hover {
|
||
color: var(--rj-primary);
|
||
}
|
||
|
||
.page-list-row-action--danger:hover {
|
||
color: var(--rj-danger);
|
||
}
|
||
|
||
.page-list-row-action.disabled {
|
||
opacity: 0.4;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.page-list-row-action svg {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.page-list-row-action-sep {
|
||
color: var(--rj-border);
|
||
font-size: 0.7rem;
|
||
user-select: none;
|
||
margin: 0 var(--rj-space-0-5);
|
||
}
|
||
|
||
/* Event status pills */
|
||
.events-status {
|
||
display: inline-block;
|
||
padding: var(--rj-space-0-5) var(--rj-space-2);
|
||
border-radius: var(--rj-radius-full);
|
||
font-size: 0.75rem;
|
||
font-weight: 500;
|
||
line-height: 1.4;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.events-status--upcoming {
|
||
background: var(--rj-primary-subtle);
|
||
color: var(--rj-primary);
|
||
}
|
||
|
||
.events-status--today {
|
||
background: rgba(217, 119, 6, 0.12);
|
||
color: var(--rj-warning, #d97706);
|
||
}
|
||
|
||
.events-status--past {
|
||
background: var(--rj-bg-hover);
|
||
color: var(--rj-text-muted);
|
||
}
|
||
|
||
.events-status--draft {
|
||
background: var(--rj-bg-hover);
|
||
color: var(--rj-text-muted);
|
||
font-style: italic;
|
||
}
|
||
|
||
/* Unread mail row — emphasised typography */
|
||
.mail-row-unread .page-list-title-link,
|
||
.mail-row-unread td:nth-child(4) {
|
||
font-weight: 700;
|
||
color: var(--rj-text);
|
||
}
|
||
|
||
.mail-col-flag,
|
||
.mail-cell-flag {
|
||
width: 34px;
|
||
min-width: 34px;
|
||
padding-left: var(--rj-space-2) !important;
|
||
padding-right: var(--rj-space-2) !important;
|
||
text-align: center !important;
|
||
}
|
||
|
||
.mail-header-sort,
|
||
.mail-flag-btn {
|
||
appearance: none;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: transparent;
|
||
border: 0;
|
||
color: var(--rj-text-muted);
|
||
cursor: pointer;
|
||
font: inherit;
|
||
line-height: 1;
|
||
padding: 0;
|
||
}
|
||
|
||
.mail-header-sort {
|
||
width: 100%;
|
||
min-height: 18px;
|
||
gap: var(--rj-space-0-5);
|
||
}
|
||
|
||
.mail-flag-btn {
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: var(--rj-radius-full);
|
||
transition: color var(--rj-duration-fast) var(--rj-ease),
|
||
background var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.mail-flag-btn:hover,
|
||
.mail-flag-btn:focus-visible {
|
||
color: var(--rj-text);
|
||
background: var(--rj-bg-hover);
|
||
outline: none;
|
||
}
|
||
|
||
.mail-read-dot {
|
||
width: 9px;
|
||
height: 9px;
|
||
border: 1.5px solid currentColor;
|
||
border-radius: var(--rj-radius-full);
|
||
}
|
||
|
||
.mail-read-toggle.is-active {
|
||
color: var(--rj-primary);
|
||
}
|
||
|
||
.mail-read-toggle.is-active .mail-read-dot {
|
||
background: currentColor;
|
||
}
|
||
|
||
.mail-star-toggle {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.mail-star-toggle.is-active {
|
||
color: var(--rj-warning, #d97706);
|
||
}
|
||
|
||
/* Sortable column headers */
|
||
.page-list-sortable {
|
||
cursor: pointer;
|
||
user-select: none;
|
||
transition: color var(--rj-duration-hover-out) ease-out,
|
||
background-color var(--rj-duration-hover-out) ease-out;
|
||
}
|
||
|
||
.page-list-sortable:hover {
|
||
color: var(--rj-text);
|
||
}
|
||
|
||
.page-list-sort-icon {
|
||
font-size: 0.65rem;
|
||
margin-left: var(--rj-space-0-5);
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.page-list-sortable.sorted .page-list-sort-icon {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* Edit button in language columns — small secondary button with icon */
|
||
.page-list-lang-btn {
|
||
display: inline-flex !important;
|
||
align-items: center;
|
||
gap: var(--rj-space-1);
|
||
padding: var(--rj-space-1) var(--rj-space-3) !important;
|
||
font-size: 0.75rem !important;
|
||
}
|
||
|
||
.page-list-lang-btn svg {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Create link in language columns — plain text link */
|
||
.page-list-create-link {
|
||
font-size: 0.75rem;
|
||
color: var(--rj-text-muted);
|
||
text-decoration: none;
|
||
white-space: nowrap;
|
||
transition: color var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.page-list-create-link:hover {
|
||
color: var(--rj-text-secondary);
|
||
}
|
||
|
||
.page-list-create-link.disabled {
|
||
opacity: 0.4;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.page-list-cell-actions {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: var(--rj-space-2);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.page-list-trash-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-1);
|
||
}
|
||
|
||
.page-list-cell-slug {
|
||
color: var(--rj-text-muted);
|
||
font-size: var(--rj-text-xs);
|
||
font-family: var(--rj-font-mono);
|
||
}
|
||
|
||
.trash-empty-msg {
|
||
text-align: center;
|
||
padding: var(--rj-space-6);
|
||
color: var(--rj-text-muted);
|
||
}
|
||
|
||
/* Back to pages link */
|
||
.editor-back {
|
||
margin-bottom: var(--rj-space-4);
|
||
}
|
||
|
||
.editor-back-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-2);
|
||
font-size: 0.8125rem;
|
||
color: var(--rj-text-muted);
|
||
text-decoration: none;
|
||
transition: color var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.editor-back-link:hover {
|
||
color: var(--rj-primary);
|
||
}
|
||
|
||
|
||
/* ============================================================
|
||
EDITOR CONTAINER
|
||
============================================================ */
|
||
|
||
.editor-container {
|
||
background: var(--rj-surface-panel, var(--rj-bg-elevated));
|
||
padding: var(--rj-space-5) var(--rj-space-6);
|
||
border-radius: var(--rj-radius-lg);
|
||
border: 1px solid var(--rj-border);
|
||
box-shadow: none;
|
||
margin-bottom: var(--rj-space-5);
|
||
}
|
||
|
||
.editor-header {
|
||
position: sticky;
|
||
top: calc(var(--rj-topbar-h) + 4px);
|
||
z-index: calc(var(--rj-z-sticky) - 2);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: calc(var(--rj-space-3) * -1);
|
||
margin-bottom: var(--rj-space-5);
|
||
padding-top: var(--rj-space-3);
|
||
padding-bottom: var(--rj-space-4);
|
||
border-bottom: 1px solid var(--rj-border);
|
||
background: var(--rj-bg-elevated);
|
||
backdrop-filter: blur(12px);
|
||
}
|
||
|
||
.editor-header::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: -2px;
|
||
height: calc(var(--rj-space-3) + 3px);
|
||
background: var(--rj-bg-elevated);
|
||
pointer-events: none;
|
||
z-index: -1;
|
||
}
|
||
|
||
.editor-header h2 {
|
||
margin: 0;
|
||
font-size: 1.125rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.editor-header-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-3);
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.editor-header-left h2 {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.editor-header-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-4);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.editor-trash-btn {
|
||
display: inline-flex !important;
|
||
align-items: center;
|
||
gap: var(--rj-space-1);
|
||
color: var(--rj-text-muted) !important;
|
||
}
|
||
|
||
.editor-trash-btn:hover {
|
||
color: var(--rj-danger) !important;
|
||
border-color: var(--rj-danger) !important;
|
||
}
|
||
|
||
.last-modified {
|
||
color: var(--rj-text-muted);
|
||
font-size: 0.8125rem;
|
||
}
|
||
|
||
.editor-seo-health {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.seo-health-badge {
|
||
position: relative;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-1-5);
|
||
max-width: 100%;
|
||
padding: 3px var(--rj-space-2);
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: 999px;
|
||
background: var(--rj-bg-elevated);
|
||
color: var(--rj-text);
|
||
font-size: 0.75rem;
|
||
font-weight: 500;
|
||
line-height: 1.25;
|
||
white-space: nowrap;
|
||
outline: none;
|
||
}
|
||
|
||
.seo-health-badge--page-list {
|
||
padding: var(--rj-space-0-5) 7px;
|
||
font-size: 0.6875rem;
|
||
}
|
||
|
||
.seo-health-badge__dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
flex: 0 0 auto;
|
||
border-radius: 50%;
|
||
background: var(--rj-warning);
|
||
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.14);
|
||
}
|
||
|
||
.seo-health-badge--green .seo-health-badge__dot {
|
||
background: var(--rj-success);
|
||
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14);
|
||
}
|
||
|
||
.seo-health-badge--yellow .seo-health-badge__dot {
|
||
background: var(--rj-warning);
|
||
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16);
|
||
}
|
||
|
||
.seo-health-badge--red .seo-health-badge__dot {
|
||
background: var(--rj-danger);
|
||
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14);
|
||
}
|
||
|
||
.seo-health-badge__score {
|
||
color: var(--rj-text-muted);
|
||
}
|
||
|
||
.seo-health-badge__popover {
|
||
position: absolute;
|
||
z-index: 50;
|
||
top: calc(100% + 8px);
|
||
left: 0;
|
||
width: min(320px, calc(100vw - 40px));
|
||
padding: var(--rj-space-3) var(--rj-space-3-5);
|
||
border-radius: var(--rj-radius-md);
|
||
background: var(--rj-bg-elevated);
|
||
color: var(--rj-text);
|
||
border: 1px solid var(--rj-border);
|
||
box-shadow: var(--rj-shadow-lg);
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transform: translateY(-3px);
|
||
transition: opacity var(--rj-duration-fast) var(--rj-ease), transform var(--rj-duration-fast) var(--rj-ease), visibility var(--rj-duration-fast) var(--rj-ease);
|
||
pointer-events: none;
|
||
white-space: normal;
|
||
}
|
||
|
||
.seo-health-badge__popover strong {
|
||
display: block;
|
||
margin-bottom: var(--rj-space-1-5);
|
||
}
|
||
|
||
.seo-health-badge__popover ul {
|
||
margin: 0;
|
||
padding-left: 18px;
|
||
}
|
||
|
||
.seo-health-badge__popover li + li {
|
||
margin-top: var(--rj-space-1);
|
||
}
|
||
|
||
.seo-health-badge:hover .seo-health-badge__popover,
|
||
.seo-health-badge:focus-visible .seo-health-badge__popover {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
|
||
/* ============================================================
|
||
CONTENT EDITOR — GENERIC JSON RENDERER
|
||
============================================================ */
|
||
|
||
.ce-meta {
|
||
display: flex;
|
||
gap: var(--rj-space-5);
|
||
padding: var(--rj-space-2) var(--rj-space-3);
|
||
background: var(--rj-bg-sunken);
|
||
border-radius: var(--rj-radius-md);
|
||
margin-bottom: var(--rj-space-4);
|
||
font-size: 0.8125rem;
|
||
color: var(--rj-text-muted);
|
||
}
|
||
|
||
.ce-meta-item strong {
|
||
color: var(--rj-text);
|
||
}
|
||
|
||
.ce-editor-shell {
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-lg);
|
||
background: var(--rj-bg-elevated);
|
||
overflow: visible;
|
||
}
|
||
|
||
.ce-editor-tabs {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-1);
|
||
padding: var(--rj-space-2) var(--rj-space-3) 0;
|
||
border-bottom: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-lg) var(--rj-radius-lg) 0 0;
|
||
background: var(--rj-bg);
|
||
}
|
||
|
||
.ce-editor-tab {
|
||
border: 0;
|
||
border-bottom: 2px solid transparent;
|
||
background: transparent;
|
||
color: var(--rj-text-muted);
|
||
padding: var(--rj-space-2-5) var(--rj-space-3);
|
||
font: inherit;
|
||
font-size: 0.875rem;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.ce-editor-tab:hover {
|
||
color: var(--rj-text);
|
||
}
|
||
|
||
.ce-editor-tab.active {
|
||
color: var(--rj-primary);
|
||
border-bottom-color: var(--rj-primary);
|
||
}
|
||
|
||
.ce-editor-panels {
|
||
padding: var(--rj-space-4);
|
||
}
|
||
|
||
.ce-editor-panel {
|
||
display: none;
|
||
}
|
||
|
||
.ce-editor-panel.active {
|
||
display: block;
|
||
}
|
||
|
||
.ce-editor-panel[data-editor-panel="settings"] {
|
||
display: none;
|
||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||
gap: var(--rj-space-3);
|
||
}
|
||
|
||
.ce-editor-panel[data-editor-panel="settings"].active {
|
||
display: grid;
|
||
}
|
||
|
||
.ce-editor-panel[data-editor-panel="seo"].active,
|
||
.ce-editor-panel[data-editor-panel="access"].active {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 720px);
|
||
}
|
||
|
||
.ce-content-layout {
|
||
display: grid;
|
||
grid-template-columns: 220px minmax(0, 1fr);
|
||
gap: var(--rj-space-4);
|
||
align-items: start;
|
||
margin-bottom: var(--rj-space-4);
|
||
}
|
||
|
||
.ce-section-nav {
|
||
position: sticky;
|
||
top: 76px;
|
||
max-height: calc(100vh - 110px);
|
||
overflow: auto;
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-md);
|
||
background: var(--rj-bg);
|
||
}
|
||
|
||
.ce-section-nav__title {
|
||
padding: var(--rj-space-2-5) var(--rj-space-3);
|
||
border-bottom: 1px solid var(--rj-border);
|
||
font-size: 0.75rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
color: var(--rj-text-muted);
|
||
}
|
||
|
||
.ce-section-nav__tools {
|
||
display: grid;
|
||
gap: var(--rj-space-1-5);
|
||
padding: var(--rj-space-2);
|
||
border-bottom: 1px solid var(--rj-border);
|
||
}
|
||
|
||
.ce-section-nav__search,
|
||
.ce-section-nav__select {
|
||
width: 100%;
|
||
min-width: 0;
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-sm);
|
||
background: var(--rj-bg-elevated);
|
||
color: var(--rj-text);
|
||
font: inherit;
|
||
font-size: 0.8125rem;
|
||
padding: 7px var(--rj-space-2);
|
||
}
|
||
|
||
.ce-section-nav__search:focus,
|
||
.ce-section-nav__select:focus {
|
||
outline: none;
|
||
border-color: var(--rj-primary);
|
||
box-shadow: 0 0 0 3px var(--rj-primary-muted);
|
||
}
|
||
|
||
.ce-section-nav__list {
|
||
display: grid;
|
||
gap: 1px;
|
||
padding: var(--rj-space-1-5);
|
||
}
|
||
|
||
.ce-section-nav__empty {
|
||
margin: 0;
|
||
padding: var(--rj-space-2) 9px;
|
||
color: var(--rj-text-muted);
|
||
font-size: 0.8125rem;
|
||
}
|
||
|
||
.ce-section-nav__item {
|
||
position: relative;
|
||
display: block;
|
||
padding: var(--rj-space-2) 9px;
|
||
border-radius: var(--rj-radius-sm);
|
||
color: var(--rj-text);
|
||
text-decoration: none;
|
||
font-size: 0.8125rem;
|
||
line-height: 1.25;
|
||
}
|
||
|
||
.ce-section-nav__item:hover {
|
||
background: var(--rj-bg-hover);
|
||
}
|
||
|
||
.ce-section-nav__item.is-active {
|
||
background: color-mix(in srgb, var(--rj-primary) 16%, transparent);
|
||
box-shadow: inset 3px 0 0 var(--rj-primary);
|
||
}
|
||
|
||
.ce-section-nav__item.is-filtered-out {
|
||
opacity: 0.38;
|
||
cursor: not-allowed;
|
||
filter: grayscale(0.55);
|
||
}
|
||
|
||
.ce-section-nav__item.is-filtered-out:hover {
|
||
background: transparent;
|
||
}
|
||
|
||
.ce-section-nav__item.is-filtered-out.is-active {
|
||
background: transparent;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.ce-section-nav__item.is-dragging {
|
||
opacity: 0.45;
|
||
}
|
||
|
||
.ce-section-nav__item.is-drop-target {
|
||
outline: 1px solid var(--rj-primary);
|
||
background: var(--rj-primary-muted);
|
||
}
|
||
|
||
.ce-section-nav__item[data-type="divider"] {
|
||
color: var(--rj-text-muted);
|
||
}
|
||
|
||
.ce-section-nav__item[data-type="divider"] span {
|
||
font-size: 0.75rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.ce-section-nav__item em {
|
||
position: absolute;
|
||
top: 7px;
|
||
right: 7px;
|
||
min-width: 18px;
|
||
height: 18px;
|
||
border-radius: 999px;
|
||
background: var(--rj-warning-subtle, rgba(245, 158, 11, 0.12));
|
||
color: var(--rj-warning, #d97706);
|
||
font-size: 0.6875rem;
|
||
font-style: normal;
|
||
font-weight: 700;
|
||
line-height: 18px;
|
||
text-align: center;
|
||
}
|
||
|
||
.ce-section-nav__item span {
|
||
display: block;
|
||
font-weight: 600;
|
||
overflow-wrap: anywhere;
|
||
word-break: normal;
|
||
}
|
||
|
||
.ce-section-nav__item small {
|
||
display: -webkit-box;
|
||
margin-top: var(--rj-space-0-5);
|
||
color: var(--rj-text-muted);
|
||
overflow: hidden;
|
||
overflow-wrap: anywhere;
|
||
word-break: normal;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 4;
|
||
line-clamp: 4;
|
||
}
|
||
|
||
.ce-section-editor__header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: var(--rj-space-3);
|
||
}
|
||
|
||
.ce-section-editor__header h3 {
|
||
margin: 0;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.ce-section-editor__header span {
|
||
color: var(--rj-text-muted);
|
||
font-size: 0.8125rem;
|
||
}
|
||
|
||
.ce-section-editor__tools {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-2);
|
||
}
|
||
|
||
.ce-section-editor__tools .btn.active {
|
||
color: var(--rj-primary);
|
||
border-color: var(--rj-primary);
|
||
background: var(--rj-primary-muted);
|
||
}
|
||
|
||
.ce-empty-state {
|
||
margin: 0;
|
||
padding: var(--rj-space-4);
|
||
border: 1px dashed var(--rj-border);
|
||
border-radius: var(--rj-radius-md);
|
||
color: var(--rj-text-muted);
|
||
}
|
||
|
||
/* Collapsible groups */
|
||
.ce-group {
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-md);
|
||
margin-bottom: var(--rj-space-2);
|
||
background: var(--rj-bg-elevated);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.ce-group--nested {
|
||
border-color: var(--rj-border);
|
||
margin-bottom: var(--rj-space-1);
|
||
}
|
||
|
||
.ce-group-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-2);
|
||
padding: var(--rj-space-2) var(--rj-space-3);
|
||
cursor: pointer;
|
||
user-select: none;
|
||
background: var(--rj-bg-hover);
|
||
border-radius: var(--rj-radius-md) var(--rj-radius-md) 0 0;
|
||
transition: background-color var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.ce-group-header:hover {
|
||
background: var(--rj-bg-sunken);
|
||
}
|
||
|
||
.ce-group--nested .ce-group-header {
|
||
padding: var(--rj-space-1-5) var(--rj-space-2-5);
|
||
background: var(--rj-bg);
|
||
}
|
||
|
||
.ce-chevron {
|
||
font-size: 0.7em;
|
||
color: var(--rj-text-muted);
|
||
width: 12px;
|
||
text-align: center;
|
||
flex-shrink: 0;
|
||
transition: transform var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.ce-group-title {
|
||
font-weight: 600;
|
||
font-size: 0.875rem;
|
||
color: var(--rj-text);
|
||
}
|
||
|
||
.ce-group--nested .ce-group-title {
|
||
font-weight: 500;
|
||
font-size: 0.8125rem;
|
||
}
|
||
|
||
.ce-group-count {
|
||
font-size: 0.75rem;
|
||
color: var(--rj-text-muted);
|
||
margin-left: auto;
|
||
}
|
||
|
||
.ce-group-body {
|
||
padding: var(--rj-space-2) var(--rj-space-3) var(--rj-space-3);
|
||
}
|
||
|
||
.ce-group--nested .ce-group-body {
|
||
padding: var(--rj-space-1-5) var(--rj-space-2-5) var(--rj-space-2-5);
|
||
}
|
||
|
||
/* Fields */
|
||
.ce-field {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: var(--rj-space-2-5);
|
||
margin-bottom: var(--rj-space-1-5);
|
||
}
|
||
|
||
.ce-field-label {
|
||
flex: 0 0 140px;
|
||
font-size: 0.8125rem;
|
||
font-weight: 500;
|
||
color: var(--rj-text-muted);
|
||
padding-top: 7px;
|
||
text-align: right;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.ce-input {
|
||
flex: 1;
|
||
min-height: var(--rj-control-h-sm);
|
||
padding: 0 var(--rj-space-2-5);
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-sm);
|
||
font-size: 0.875rem;
|
||
font-family: var(--rj-font-sans);
|
||
color: var(--rj-text);
|
||
background: var(--rj-bg-elevated);
|
||
transition: border-color var(--rj-duration-fast) var(--rj-ease),
|
||
box-shadow var(--rj-duration-fast) var(--rj-ease);
|
||
min-width: 0;
|
||
}
|
||
|
||
.ce-input:focus {
|
||
outline: none;
|
||
border-color: var(--rj-primary);
|
||
box-shadow: 0 0 0 3px var(--rj-primary-muted);
|
||
}
|
||
|
||
.ce-textarea {
|
||
flex: 1;
|
||
padding: var(--rj-space-1-5) var(--rj-space-2-5);
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-sm);
|
||
font-size: 0.875rem;
|
||
font-family: var(--rj-font-sans);
|
||
color: var(--rj-text);
|
||
background: var(--rj-bg-elevated);
|
||
resize: vertical;
|
||
min-height: 60px;
|
||
line-height: 1.5;
|
||
transition: border-color var(--rj-duration-fast) var(--rj-ease),
|
||
box-shadow var(--rj-duration-fast) var(--rj-ease);
|
||
min-width: 0;
|
||
}
|
||
|
||
.ce-textarea--manual-resize {
|
||
flex: 0 0 auto;
|
||
height: auto;
|
||
min-height: 72px;
|
||
overflow: auto;
|
||
resize: none;
|
||
}
|
||
|
||
.ce-textarea-resize-handle {
|
||
position: absolute;
|
||
right: 6px;
|
||
bottom: 6px;
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: var(--rj-radius-sm);
|
||
cursor: ns-resize;
|
||
opacity: 0.72;
|
||
}
|
||
|
||
.ce-textarea-resize-handle::before {
|
||
content: "";
|
||
position: absolute;
|
||
right: 3px;
|
||
bottom: 3px;
|
||
width: 9px;
|
||
height: 9px;
|
||
background:
|
||
linear-gradient(135deg, transparent 0 46%, var(--rj-text-muted) 47% 53%, transparent 54%),
|
||
linear-gradient(135deg, transparent 0 68%, var(--rj-text-muted) 69% 75%, transparent 76%);
|
||
}
|
||
|
||
.ce-textarea-resize-handle:hover,
|
||
.ce-form-tile--resizable:focus-within .ce-textarea-resize-handle,
|
||
.ce-resizing-textarea .ce-textarea-resize-handle {
|
||
opacity: 1;
|
||
}
|
||
|
||
.ce-resizing-textarea {
|
||
user-select: none;
|
||
cursor: ns-resize;
|
||
}
|
||
|
||
.ce-textarea:focus {
|
||
outline: none;
|
||
border-color: var(--rj-primary);
|
||
box-shadow: 0 0 0 3px var(--rj-primary-muted);
|
||
}
|
||
|
||
.ce-checkbox {
|
||
margin-top: 9px;
|
||
width: 16px;
|
||
height: 16px;
|
||
cursor: pointer;
|
||
accent-color: var(--rj-primary);
|
||
}
|
||
|
||
/* Page Settings panel */
|
||
.ce-group--settings {
|
||
margin-bottom: var(--rj-space-lg, var(--rj-space-6));
|
||
}
|
||
|
||
.ce-group--settings .ce-group-body {
|
||
padding: var(--rj-space-3);
|
||
}
|
||
|
||
.ce-page-settings-grid {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
|
||
gap: var(--rj-space-3);
|
||
}
|
||
|
||
.ce-settings-card {
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-md);
|
||
background: var(--rj-bg);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.ce-settings-card--seo {
|
||
grid-row: span 2;
|
||
}
|
||
|
||
.ce-settings-card__header {
|
||
padding: var(--rj-space-2-5) var(--rj-space-3);
|
||
border-bottom: 1px solid var(--rj-border);
|
||
background: var(--rj-bg-muted);
|
||
}
|
||
|
||
.ce-settings-card__header h4 {
|
||
margin: 0;
|
||
font-size: 0.8125rem;
|
||
font-weight: 650;
|
||
color: var(--rj-text);
|
||
}
|
||
|
||
.ce-settings-card__header p {
|
||
margin: 3px 0 0;
|
||
font-size: 0.75rem;
|
||
color: var(--rj-text-muted);
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.ce-settings-card__body {
|
||
padding: var(--rj-space-3);
|
||
}
|
||
|
||
.ce-settings-card__body .ce-field:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.ce-field--stacked {
|
||
display: block;
|
||
}
|
||
|
||
.ce-form-tile {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.ce-form-tile--resizable {
|
||
position: relative;
|
||
}
|
||
|
||
.ce-form-tile > span {
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
color: var(--rj-text-muted);
|
||
}
|
||
|
||
.ce-label-with-action {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-1-5);
|
||
}
|
||
|
||
.ce-card-field-label {
|
||
display: block;
|
||
margin-bottom: 7px;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
color: var(--rj-text-muted);
|
||
}
|
||
|
||
.ce-card-field-hint {
|
||
display: block;
|
||
margin: -2px 0 8px;
|
||
}
|
||
|
||
.ce-form-tile--wide {
|
||
grid-column: 1 / -1;
|
||
}
|
||
|
||
.ce-seo-grid,
|
||
.ce-visibility-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: var(--rj-space-2-5);
|
||
}
|
||
|
||
.ce-seo-grid .ce-textarea,
|
||
.ce-visibility-grid .ce-textarea {
|
||
min-height: 54px;
|
||
}
|
||
|
||
.ce-seo-grid .ce-textarea--manual-resize {
|
||
min-height: 72px;
|
||
}
|
||
|
||
.ce-ai-seo-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-2-5);
|
||
margin-bottom: var(--rj-space-0-5);
|
||
}
|
||
|
||
.ce-ai-fill-all {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-1-5);
|
||
}
|
||
|
||
.ce-ai-status {
|
||
color: var(--rj-text-muted);
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
.ce-ai-field-btn {
|
||
display: inline-grid;
|
||
width: 22px;
|
||
height: 22px;
|
||
place-items: center;
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-sm);
|
||
background: var(--rj-bg-elevated);
|
||
color: var(--rj-primary);
|
||
cursor: pointer;
|
||
padding: 0;
|
||
transition: border-color var(--rj-duration-fast) var(--rj-ease), background var(--rj-duration-fast) var(--rj-ease), color var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.ce-ai-field-btn:hover:not(:disabled) {
|
||
border-color: var(--rj-primary);
|
||
background: var(--rj-primary-subtle);
|
||
}
|
||
|
||
.ce-ai-field-btn:disabled,
|
||
.ce-ai-fill-all:disabled {
|
||
cursor: not-allowed;
|
||
opacity: 0.45;
|
||
}
|
||
|
||
.ce-nav-check--standalone {
|
||
grid-column: 1 / -1;
|
||
padding-top: var(--rj-space-0-5);
|
||
}
|
||
|
||
.ce-input--sm {
|
||
padding: var(--rj-space-1) var(--rj-space-2);
|
||
font-size: 0.8125rem;
|
||
}
|
||
|
||
/* Nav location checkboxes */
|
||
.ce-nav-checkboxes {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: var(--rj-space-2) var(--rj-space-3-5);
|
||
min-height: 32px;
|
||
}
|
||
|
||
.ce-nav-check {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-1);
|
||
font-size: 0.8125rem;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.ce-nav-check input[type="checkbox"] {
|
||
width: 15px;
|
||
height: 15px;
|
||
cursor: pointer;
|
||
accent-color: var(--rj-primary);
|
||
}
|
||
|
||
.ce-nav-custom {
|
||
flex: 1;
|
||
min-width: 150px;
|
||
}
|
||
|
||
.ce-nav-custom-editor {
|
||
margin-top: var(--rj-space-2);
|
||
}
|
||
|
||
.ce-nav-custom-editor > .btn,
|
||
#breadcrumbEditor > .btn {
|
||
align-self: flex-start;
|
||
}
|
||
|
||
/* Breadcrumb editor */
|
||
.ce-breadcrumb-editor {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--rj-space-1-5);
|
||
}
|
||
|
||
.ce-breadcrumb-row {
|
||
display: flex;
|
||
gap: var(--rj-space-1-5);
|
||
align-items: center;
|
||
}
|
||
|
||
.ce-breadcrumb-row .ce-input--sm {
|
||
flex: 1;
|
||
}
|
||
|
||
.ce-breadcrumb-row .ce-input--sm:first-child {
|
||
flex: 1.2;
|
||
}
|
||
|
||
.ce-breadcrumb-remove {
|
||
flex-shrink: 0;
|
||
padding: 3px var(--rj-space-2);
|
||
font-size: 1rem;
|
||
line-height: 1;
|
||
}
|
||
|
||
/* Image preview */
|
||
.ce-image-preview {
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.editor-form-row--cover .ce-image-preview {
|
||
margin-top: var(--rj-space-2-5);
|
||
}
|
||
|
||
.ce-image-preview img {
|
||
max-height: 100px;
|
||
max-width: 160px;
|
||
border-radius: var(--rj-radius-sm);
|
||
border: 1px solid var(--rj-border);
|
||
object-fit: cover;
|
||
}
|
||
|
||
.editor-form-row--cover .ce-image-preview img {
|
||
display: block;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
height: auto;
|
||
max-height: 190px;
|
||
object-fit: contain;
|
||
background: var(--rj-bg-sunken, #f5f5f5);
|
||
}
|
||
|
||
.ce-image-input-row {
|
||
display: flex;
|
||
gap: var(--rj-space-2);
|
||
align-items: center;
|
||
flex: 1;
|
||
}
|
||
|
||
.ce-image-input-row .ce-input {
|
||
flex: 1;
|
||
}
|
||
|
||
.ce-image-input-row .btn {
|
||
flex-shrink: 0;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* The path field sits beside a small button and takes its height */
|
||
.ce-image-input-row .editor-input,
|
||
.ce-image-input-row .ce-input {
|
||
height: var(--rj-control-h-sm);
|
||
min-height: var(--rj-control-h-sm);
|
||
padding-block: 0;
|
||
}
|
||
|
||
/* Array items */
|
||
.ce-array-list {
|
||
margin-bottom: var(--rj-space-2);
|
||
}
|
||
|
||
.ce-array-item {
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-sm);
|
||
margin-bottom: var(--rj-space-1);
|
||
background: var(--rj-bg-elevated);
|
||
}
|
||
|
||
.ce-array-item-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-2);
|
||
padding: 5px var(--rj-space-2-5);
|
||
background: var(--rj-bg-hover);
|
||
border-radius: var(--rj-radius-sm) var(--rj-radius-sm) 0 0;
|
||
font-size: 0.8125rem;
|
||
}
|
||
|
||
.ce-array-item-label {
|
||
flex: 1;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
color: var(--rj-text);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.ce-preview-text {
|
||
font-weight: 400;
|
||
color: var(--rj-text-muted);
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.ce-array-item-actions {
|
||
display: flex;
|
||
gap: 3px;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.ce-array-item-actions .btn {
|
||
padding: var(--rj-space-0-5) var(--rj-space-1-5);
|
||
font-size: 0.75em;
|
||
line-height: 1;
|
||
}
|
||
|
||
.ce-array-item-body {
|
||
padding: var(--rj-space-2) var(--rj-space-2-5);
|
||
}
|
||
|
||
.ce-array-add {
|
||
margin-top: var(--rj-space-1-5);
|
||
}
|
||
|
||
/* Inline array items (primitives) */
|
||
.ce-array-item > .ce-input {
|
||
border: none;
|
||
border-top: 1px solid var(--rj-border);
|
||
border-radius: 0 0 var(--rj-radius-sm) var(--rj-radius-sm);
|
||
padding: var(--rj-space-1-5) var(--rj-space-2-5);
|
||
}
|
||
|
||
|
||
/* ============================================================
|
||
SECTIONS (legacy, if used)
|
||
============================================================ */
|
||
|
||
.section-item {
|
||
scroll-margin-top: 150px;
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-md);
|
||
padding: var(--rj-space-4);
|
||
margin-bottom: var(--rj-space-4);
|
||
background: var(--rj-bg);
|
||
transition: border-color var(--rj-duration-fast) var(--rj-ease),
|
||
box-shadow var(--rj-duration-fast) var(--rj-ease),
|
||
opacity var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.section-item.is-active {
|
||
border-color: color-mix(in srgb, var(--rj-primary) 58%, var(--rj-border));
|
||
box-shadow: 0 0 0 1px color-mix(in srgb, var(--rj-primary) 26%, transparent);
|
||
}
|
||
|
||
.section-item.is-dragging {
|
||
opacity: 0.45;
|
||
}
|
||
|
||
.section-item.is-drop-target {
|
||
border-color: var(--rj-primary);
|
||
box-shadow: 0 0 0 3px var(--rj-primary-muted);
|
||
}
|
||
|
||
.section-item[data-type="divider"] {
|
||
padding-block: var(--rj-space-3);
|
||
background: color-mix(in srgb, var(--rj-bg) 72%, var(--rj-bg-elevated));
|
||
}
|
||
|
||
.section-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: var(--rj-space-2-5);
|
||
gap: var(--rj-space-3);
|
||
}
|
||
|
||
.section-heading {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-2);
|
||
min-width: 0;
|
||
}
|
||
|
||
.section-drag-handle,
|
||
.section-toggle-btn {
|
||
width: 24px;
|
||
height: 24px;
|
||
display: inline-grid;
|
||
place-items: center;
|
||
border: 1px solid transparent;
|
||
border-radius: var(--rj-radius-sm);
|
||
background: transparent;
|
||
color: var(--rj-text-muted);
|
||
cursor: pointer;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.section-drag-handle {
|
||
cursor: grab;
|
||
font-size: 0.875rem;
|
||
letter-spacing: -0.15em;
|
||
}
|
||
|
||
.section-drag-handle:active {
|
||
cursor: grabbing;
|
||
}
|
||
|
||
.section-drag-handle:hover,
|
||
.section-toggle-btn:hover {
|
||
color: var(--rj-text);
|
||
border-color: var(--rj-border);
|
||
background: var(--rj-bg-hover);
|
||
}
|
||
|
||
.section-index-label {
|
||
width: 24px;
|
||
height: 24px;
|
||
display: inline-grid;
|
||
place-items: center;
|
||
border-radius: 999px;
|
||
background: var(--rj-bg-elevated);
|
||
color: var(--rj-text-muted);
|
||
font-size: 0.75rem;
|
||
font-weight: 700;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.section-type {
|
||
border: 1px solid color-mix(in srgb, var(--rj-primary) 48%, transparent);
|
||
background: color-mix(in srgb, var(--rj-primary) 14%, transparent);
|
||
color: color-mix(in srgb, var(--rj-primary) 84%, var(--rj-text));
|
||
padding: var(--rj-space-0-5) 7px;
|
||
border-radius: 999px;
|
||
font-size: 0.6875rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
line-height: 1.35;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.section-type.text {
|
||
border-color: color-mix(in srgb, #08aab2 42%, transparent);
|
||
background: color-mix(in srgb, #08aab2 14%, transparent);
|
||
color: color-mix(in srgb, #08aab2 82%, var(--rj-text));
|
||
}
|
||
|
||
.section-type.soundcloud {
|
||
border-color: color-mix(in srgb, #ff5500 38%, transparent);
|
||
background: color-mix(in srgb, #ff5500 12%, transparent);
|
||
color: color-mix(in srgb, #ff5500 78%, var(--rj-text));
|
||
}
|
||
|
||
.section-type.youtube {
|
||
border-color: color-mix(in srgb, #ff3b30 38%, transparent);
|
||
background: color-mix(in srgb, #ff3b30 12%, transparent);
|
||
color: color-mix(in srgb, #ff3b30 78%, var(--rj-text));
|
||
}
|
||
|
||
.section-title-preview {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
color: var(--rj-text-muted);
|
||
font-size: 0.8125rem;
|
||
}
|
||
|
||
.section-issue-badge {
|
||
flex: 0 0 auto;
|
||
border: 1px solid color-mix(in srgb, var(--rj-warning, #d97706) 40%, transparent);
|
||
border-radius: 999px;
|
||
background: var(--rj-warning-subtle, rgba(245, 158, 11, 0.12));
|
||
color: var(--rj-warning, #d97706);
|
||
padding: var(--rj-space-0-5) 7px;
|
||
font-size: 0.6875rem;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.section-actions {
|
||
display: flex;
|
||
gap: 5px;
|
||
}
|
||
|
||
.section-fields {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr);
|
||
gap: var(--rj-space-3) var(--rj-space-4);
|
||
}
|
||
|
||
.ce-content-layout--compact .section-item:not(.is-open) {
|
||
padding-block: var(--rj-space-3);
|
||
}
|
||
|
||
.ce-content-layout--compact .section-item:not(.is-open) .section-header {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.ce-content-layout--compact .section-item:not(.is-open) .section-fields {
|
||
display: none;
|
||
}
|
||
|
||
.ce-content-layout--compact .section-item:not(.is-open) .section-toggle-btn {
|
||
transform: rotate(-90deg);
|
||
}
|
||
|
||
.section-fields .form-group {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.section-field-group--content,
|
||
.section-field-group--text,
|
||
.section-field-group--style {
|
||
grid-column: 1 / -1;
|
||
}
|
||
|
||
.section-item[data-type="text"] .section-fields {
|
||
grid-template-columns: minmax(0, 3fr) minmax(180px, 1fr);
|
||
}
|
||
|
||
.section-item[data-type="image"] .section-fields {
|
||
grid-template-columns: minmax(280px, 0.52fr) minmax(0, 1fr);
|
||
column-gap: calc(var(--rj-space-4) * 2);
|
||
align-items: start;
|
||
}
|
||
|
||
.section-item[data-type="image"] .section-field-group--image,
|
||
.section-item[data-type="image"] .section-field-group--src {
|
||
grid-row: span 3;
|
||
}
|
||
|
||
.section-item[data-type="image"] .section-field-group--caption,
|
||
.section-item[data-type="image"] .section-field-group--width {
|
||
grid-column: 2;
|
||
}
|
||
|
||
.section-item[data-type="image"] .ce-image-preview {
|
||
margin-bottom: var(--rj-space-2);
|
||
}
|
||
|
||
.section-item[data-type="image"] .ce-image-preview img {
|
||
width: 100%;
|
||
max-width: none;
|
||
max-height: 150px;
|
||
}
|
||
|
||
.section-item[data-type="image"] .ce-image-input-row {
|
||
align-items: flex-start;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.section-item[data-type="image"] .ce-image-input-row .ce-input {
|
||
width: 100%;
|
||
}
|
||
|
||
.section-item[data-type="image"] .ce-image-input-row .btn {
|
||
align-self: flex-start;
|
||
}
|
||
|
||
|
||
/* ============================================================
|
||
BACKUPS
|
||
============================================================ */
|
||
|
||
.backup-container {
|
||
background: var(--rj-surface-panel, var(--rj-bg-elevated));
|
||
padding: var(--rj-space-5) var(--rj-space-6);
|
||
border-radius: var(--rj-radius-lg);
|
||
border: 1px solid var(--rj-border);
|
||
box-shadow: none;
|
||
}
|
||
|
||
.backup-container h3 {
|
||
margin: 0 0 var(--rj-space-4) 0;
|
||
font-size: 0.8125rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
color: var(--rj-text-muted);
|
||
}
|
||
|
||
.backup-list {
|
||
max-height: 300px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.backup-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: var(--rj-space-3);
|
||
border-bottom: 1px solid var(--rj-border);
|
||
}
|
||
|
||
.backup-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.backup-info {
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.backup-date {
|
||
font-weight: 500;
|
||
}
|
||
|
||
.backup-time {
|
||
color: var(--rj-text-muted);
|
||
margin-left: var(--rj-space-2-5);
|
||
}
|
||
|
||
.backup-actions {
|
||
display: flex;
|
||
gap: 5px;
|
||
}
|
||
|
||
|
||
/* ============================================================
|
||
MEDIA FIELDS
|
||
============================================================ */
|
||
|
||
.media-field {
|
||
display: flex;
|
||
gap: var(--rj-space-2-5);
|
||
align-items: center;
|
||
}
|
||
|
||
.media-field input {
|
||
flex: 1;
|
||
}
|
||
|
||
.media-field .id-input {
|
||
max-width: 200px;
|
||
}
|
||
|
||
/* Add Section */
|
||
.add-section-container {
|
||
margin-top: var(--rj-space-3);
|
||
padding: var(--rj-space-4);
|
||
border: 1px dashed var(--rj-border);
|
||
border-radius: var(--rj-radius-md);
|
||
background: var(--rj-bg);
|
||
}
|
||
|
||
.add-section-container p {
|
||
margin: 0 0 var(--rj-space-3);
|
||
color: var(--rj-text-muted);
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.ce-section-list:empty + .add-section-container {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.ce-section-list:not(:empty) + .add-section-container {
|
||
border-top: 1px dashed var(--rj-border);
|
||
}
|
||
|
||
.ce-section-list[hidden] + .add-section-container {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.add-section-buttons {
|
||
display: flex;
|
||
gap: var(--rj-space-2-5);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.ce-section-insert {
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: center;
|
||
min-height: 14px;
|
||
margin: -8px 0 2px;
|
||
}
|
||
|
||
.ce-section-insert[hidden] {
|
||
display: none;
|
||
}
|
||
|
||
.ce-section-insert__trigger {
|
||
opacity: 0;
|
||
transform: translateY(-2px);
|
||
border: 1px dashed var(--rj-border);
|
||
border-radius: 999px;
|
||
background: var(--rj-bg);
|
||
color: var(--rj-text-muted);
|
||
font: inherit;
|
||
font-size: 0.75rem;
|
||
padding: var(--rj-space-1) var(--rj-space-2-5);
|
||
cursor: pointer;
|
||
transition: opacity var(--rj-duration-fast) var(--rj-ease),
|
||
transform var(--rj-duration-fast) var(--rj-ease),
|
||
border-color var(--rj-duration-fast) var(--rj-ease),
|
||
color var(--rj-duration-fast) var(--rj-ease),
|
||
background-color var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.ce-section-insert:hover .ce-section-insert__trigger,
|
||
.ce-section-insert:focus-within .ce-section-insert__trigger,
|
||
.ce-section-insert:has(.ce-section-insert__menu:not([hidden])) .ce-section-insert__trigger {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.ce-section-insert__trigger:hover {
|
||
border-color: var(--rj-primary);
|
||
color: var(--rj-primary);
|
||
background: var(--rj-primary-muted);
|
||
}
|
||
|
||
.ce-section-insert__menu {
|
||
position: absolute;
|
||
top: calc(100% + 6px);
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: var(--rj-z-dropdown, 1000);
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(120px, 1fr));
|
||
gap: var(--rj-space-1-5);
|
||
width: min(360px, calc(100vw - 48px));
|
||
padding: var(--rj-space-2);
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-md);
|
||
background: var(--rj-bg-elevated);
|
||
box-shadow: var(--rj-shadow-lg);
|
||
}
|
||
|
||
.ce-section-insert__menu[hidden] {
|
||
display: none;
|
||
}
|
||
|
||
.ce-section-insert__menu button {
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-sm);
|
||
background: var(--rj-bg);
|
||
color: var(--rj-text);
|
||
font: inherit;
|
||
font-size: 0.8125rem;
|
||
padding: 7px 9px;
|
||
text-align: left;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.ce-section-insert__menu button:hover {
|
||
border-color: var(--rj-primary);
|
||
color: var(--rj-primary);
|
||
background: var(--rj-primary-muted);
|
||
}
|
||
|
||
|
||
/* ============================================================
|
||
NEWS / BLOG
|
||
============================================================ */
|
||
|
||
.news-item {
|
||
padding: var(--rj-space-4) var(--rj-space-5);
|
||
border-bottom: 1px solid var(--rj-border);
|
||
}
|
||
|
||
.news-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.news-item-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: var(--rj-space-1-5);
|
||
}
|
||
|
||
.news-item-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-3);
|
||
}
|
||
|
||
.news-item-date {
|
||
font-size: 0.8125rem;
|
||
color: var(--rj-text-muted);
|
||
}
|
||
|
||
.news-status {
|
||
font-size: 0.6875rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
padding: var(--rj-space-0-5) var(--rj-space-2);
|
||
border-radius: var(--rj-radius-full);
|
||
}
|
||
|
||
.news-published {
|
||
background: var(--rj-success-subtle, rgba(16, 185, 129, 0.1));
|
||
color: var(--rj-success, #10b981);
|
||
}
|
||
|
||
.news-draft {
|
||
background: var(--rj-warning-subtle, rgba(245, 158, 11, 0.1));
|
||
color: var(--rj-warning, #f59e0b);
|
||
}
|
||
|
||
.news-item-actions {
|
||
display: flex;
|
||
gap: var(--rj-space-2);
|
||
}
|
||
|
||
.news-item-title {
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
margin: 0 0 var(--rj-space-1);
|
||
color: var(--rj-text);
|
||
}
|
||
|
||
.news-item-excerpt {
|
||
font-size: 0.875rem;
|
||
color: var(--rj-text-muted);
|
||
margin: 0;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.news-editor {
|
||
padding: var(--rj-space-5);
|
||
}
|
||
|
||
.editor-form-grid {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--rj-space-4);
|
||
}
|
||
|
||
.editor-form-grid--news {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(240px, 0.75fr);
|
||
align-items: start;
|
||
}
|
||
|
||
.editor-form-row--span-2 {
|
||
grid-column: span 2;
|
||
}
|
||
|
||
.editor-form-row--cover {
|
||
grid-column: 3;
|
||
grid-row: 1 / span 3;
|
||
}
|
||
|
||
.editor-form-row--full {
|
||
grid-column: 1 / -1;
|
||
}
|
||
|
||
.editor-form-row label {
|
||
display: block;
|
||
font-size: 0.8125rem;
|
||
font-weight: 600;
|
||
color: var(--rj-text-muted);
|
||
margin-bottom: var(--rj-space-1);
|
||
}
|
||
|
||
.editor-form-row-half {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: var(--rj-space-4);
|
||
}
|
||
|
||
@media (max-width: 980px) {
|
||
.editor-form-grid--news {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.editor-form-row--span-2,
|
||
.editor-form-row--cover,
|
||
.editor-form-row--full {
|
||
grid-column: 1;
|
||
grid-row: auto;
|
||
}
|
||
}
|
||
|
||
.editor-input,
|
||
.editor-textarea {
|
||
width: 100%;
|
||
padding: var(--rj-space-2) var(--rj-space-3);
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius);
|
||
background: var(--rj-bg);
|
||
color: var(--rj-text);
|
||
font-size: 0.875rem;
|
||
font-family: inherit;
|
||
}
|
||
|
||
.editor-input:focus,
|
||
.editor-textarea:focus {
|
||
outline: none;
|
||
border-color: var(--rj-primary);
|
||
box-shadow: 0 0 0 2px var(--rj-primary-subtle);
|
||
}
|
||
|
||
.editor-textarea-large {
|
||
font-family: 'Geist Mono', ui-monospace, monospace;
|
||
font-size: 0.8125rem;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* News WYSIWYG Toolbar */
|
||
.news-wysiwyg-toolbar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-0-5);
|
||
padding: var(--rj-space-1) var(--rj-space-2);
|
||
border: 1px solid var(--rj-border);
|
||
border-bottom: none;
|
||
border-radius: var(--rj-radius) var(--rj-radius) 0 0;
|
||
background: var(--rj-surface);
|
||
}
|
||
|
||
.news-wysiwyg-toolbar button {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 32px;
|
||
height: 28px;
|
||
border: none;
|
||
border-radius: var(--rj-radius-sm);
|
||
background: transparent;
|
||
color: var(--rj-text);
|
||
font-size: 0.8125rem;
|
||
cursor: pointer;
|
||
transition: background 0.15s;
|
||
}
|
||
|
||
.news-wysiwyg-toolbar button:hover {
|
||
background: var(--rj-hover);
|
||
}
|
||
|
||
.news-wysiwyg-toolbar button:active {
|
||
background: var(--rj-active);
|
||
}
|
||
|
||
.news-toolbar-sep {
|
||
width: 1px;
|
||
height: 20px;
|
||
background: var(--rj-border);
|
||
margin: 0 var(--rj-space-1);
|
||
}
|
||
|
||
.news-html-toggle {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-1);
|
||
height: 28px;
|
||
padding: 0 var(--rj-space-0-5);
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
line-height: 1;
|
||
color: var(--rj-text-muted);
|
||
cursor: pointer;
|
||
user-select: none;
|
||
}
|
||
|
||
.news-html-toggle input {
|
||
flex: 0 0 auto;
|
||
width: 13px;
|
||
height: 13px;
|
||
margin: 0;
|
||
}
|
||
|
||
.news-html-toggle input:checked + span {
|
||
color: var(--rj-primary);
|
||
}
|
||
|
||
.news-wysiwyg-editor {
|
||
width: 100%;
|
||
min-height: 300px;
|
||
max-height: 600px;
|
||
overflow-y: auto;
|
||
padding: var(--rj-space-3) var(--rj-space-4);
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: 0 0 var(--rj-radius) var(--rj-radius);
|
||
background: var(--rj-bg);
|
||
color: var(--rj-text);
|
||
font-size: 0.875rem;
|
||
font-family: inherit;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.news-wysiwyg-editor:focus {
|
||
outline: none;
|
||
border-color: var(--rj-primary);
|
||
box-shadow: 0 0 0 2px var(--rj-primary-subtle);
|
||
}
|
||
|
||
.news-wysiwyg-editor h3 { font-size: 1.1rem; margin: 1em 0 0.5em; }
|
||
.news-wysiwyg-editor p { margin: 0 0 0.75em; }
|
||
.news-wysiwyg-editor ul, .news-wysiwyg-editor ol { margin: 0 0 0.75em; padding-left: 1.5em; }
|
||
.news-wysiwyg-editor a { color: var(--rj-primary); }
|
||
|
||
/* News status badge inline in title cell */
|
||
.page-list-cell-title .news-status {
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
margin-left: var(--rj-space-2);
|
||
font-size: 0.625rem;
|
||
}
|
||
|
||
.editor-checkbox-label {
|
||
display: flex !important;
|
||
align-items: center;
|
||
gap: var(--rj-space-2);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.editor-form-actions {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: var(--rj-space-3);
|
||
margin-top: var(--rj-space-5);
|
||
padding-top: var(--rj-space-4);
|
||
border-top: 1px solid var(--rj-border);
|
||
}
|
||
|
||
.btn-xs {
|
||
font-size: 0.75rem;
|
||
padding: 3px var(--rj-space-2-5);
|
||
}
|
||
|
||
/* ============================================================
|
||
MAIL DETAIL MODAL
|
||
============================================================ */
|
||
|
||
.modal-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: var(--rj-z-modal);
|
||
animation: rj-fade-in var(--rj-duration-normal) var(--rj-ease);
|
||
}
|
||
|
||
.modal {
|
||
background: var(--rj-bg-elevated);
|
||
padding: var(--rj-space-6);
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-lg);
|
||
max-width: 500px;
|
||
width: 90%;
|
||
max-height: 80vh;
|
||
overflow-y: auto;
|
||
box-shadow: var(--rj-shadow-xl);
|
||
animation: rj-slide-in var(--rj-duration-normal) var(--rj-ease);
|
||
}
|
||
|
||
.modal-large {
|
||
max-width: 700px;
|
||
}
|
||
|
||
.modal-backup-preview {
|
||
display: flex;
|
||
width: 80vw;
|
||
max-width: 80vw;
|
||
height: calc(100vh - 64px);
|
||
max-height: calc(100vh - 64px);
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.modal-backup-preview .modal-text {
|
||
flex: 1 1 auto;
|
||
min-height: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.modal-backup-preview .modal-actions {
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.modal h3 {
|
||
margin: 0 0 var(--rj-space-4) 0;
|
||
font-size: 1.125rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.modal-text {
|
||
color: var(--rj-text);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.backup-preview-modal {
|
||
display: grid;
|
||
height: 100%;
|
||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||
align-content: start;
|
||
gap: var(--rj-space-2);
|
||
overflow: auto;
|
||
padding: var(--rj-space-0-5) var(--rj-space-0-5) var(--rj-space-2-5);
|
||
text-align: left;
|
||
}
|
||
|
||
.backup-preview-field {
|
||
min-width: 0;
|
||
}
|
||
|
||
.backup-preview-field__name {
|
||
margin: 0 0 3px;
|
||
color: var(--rj-text-muted, #737373);
|
||
font-size: 0.68rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.02em;
|
||
line-height: 1.2;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
text-transform: uppercase;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.backup-preview-field__value {
|
||
min-height: 34px;
|
||
max-height: 132px;
|
||
overflow: auto;
|
||
border: 1px solid var(--rj-border, #d9e5e5);
|
||
border-radius: var(--rj-radius-sm, 6px);
|
||
background: var(--rj-bg, #f8fafc);
|
||
color: var(--rj-text, #1f2937);
|
||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
||
font-size: 0.78rem;
|
||
line-height: 1.35;
|
||
padding: 7px var(--rj-space-2);
|
||
white-space: pre-wrap;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.backup-preview-empty {
|
||
margin: 0;
|
||
color: var(--rj-text-muted, #737373);
|
||
}
|
||
|
||
.modal-field-label {
|
||
color: var(--rj-text, #374151);
|
||
display: block;
|
||
font-size: 0.85rem;
|
||
font-weight: 600;
|
||
margin-bottom: var(--rj-space-2, 0.45rem);
|
||
text-align: left;
|
||
}
|
||
|
||
.modal-choice-list {
|
||
display: grid;
|
||
gap: var(--rj-space-3, 0.75rem);
|
||
text-align: left;
|
||
}
|
||
|
||
.modal-choice {
|
||
align-items: flex-start;
|
||
border: 1px solid var(--rj-border, #d9e5e5);
|
||
border-radius: var(--rj-radius-sm, 8px);
|
||
cursor: pointer;
|
||
display: flex;
|
||
gap: var(--rj-space-3, 0.75rem);
|
||
padding: var(--rj-space-3, 0.85rem);
|
||
}
|
||
|
||
.modal-choice input {
|
||
margin-top: 0.15rem;
|
||
}
|
||
|
||
.modal-choice strong {
|
||
display: block;
|
||
font-weight: 700;
|
||
margin-bottom: 0.2rem;
|
||
}
|
||
|
||
.modal-choice small {
|
||
color: var(--rj-text-muted, #6b7280);
|
||
display: block;
|
||
font-size: 0.82rem;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.modal-actions {
|
||
display: flex;
|
||
gap: var(--rj-space-2);
|
||
justify-content: flex-end;
|
||
margin-top: var(--rj-space-5);
|
||
}
|
||
|
||
.modal-form {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--rj-space-4);
|
||
}
|
||
|
||
.modal-label {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--rj-space-1);
|
||
font-size: 0.8125rem;
|
||
font-weight: 600;
|
||
color: var(--rj-text);
|
||
}
|
||
|
||
.modal-input {
|
||
padding: var(--rj-space-2) var(--rj-space-3);
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-md);
|
||
font-family: var(--rj-font-sans);
|
||
font-size: 0.875rem;
|
||
font-weight: 400;
|
||
color: var(--rj-text);
|
||
background: var(--rj-bg-elevated);
|
||
transition: border-color var(--rj-duration-fast) var(--rj-ease),
|
||
box-shadow var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
select.modal-input {
|
||
appearance: none;
|
||
padding-right: var(--rj-space-10);
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23525252' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||
background-repeat: no-repeat;
|
||
background-position: right 12px center;
|
||
background-size: 12px 8px;
|
||
}
|
||
|
||
.modal-input:focus {
|
||
outline: none;
|
||
border-color: var(--rj-primary);
|
||
box-shadow: 0 0 0 3px var(--rj-primary-muted);
|
||
}
|
||
|
||
.modal-hint {
|
||
font-size: 0.75rem;
|
||
font-weight: 400;
|
||
color: var(--rj-text-muted);
|
||
}
|
||
|
||
.mail-detail-row {
|
||
margin-bottom: var(--rj-space-4);
|
||
}
|
||
|
||
.mail-detail-row label {
|
||
font-weight: 600;
|
||
color: var(--rj-text-muted);
|
||
display: block;
|
||
margin-bottom: 3px;
|
||
font-size: 0.8125rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.03em;
|
||
}
|
||
|
||
.mail-detail-row span,
|
||
.mail-detail-row a {
|
||
color: var(--rj-text);
|
||
}
|
||
|
||
.mail-detail-row a {
|
||
color: var(--rj-primary);
|
||
}
|
||
|
||
.mail-detail-row a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.mail-detail-message {
|
||
margin-top: var(--rj-space-5);
|
||
padding-top: var(--rj-space-5);
|
||
border-top: 1px solid var(--rj-border);
|
||
}
|
||
|
||
.mail-message-text {
|
||
background: var(--rj-bg-sunken);
|
||
padding: var(--rj-space-4);
|
||
border-radius: var(--rj-radius-md);
|
||
line-height: 1.7;
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
.mail-fields-list {
|
||
display: grid;
|
||
gap: var(--rj-space-2);
|
||
}
|
||
|
||
.mail-field-item {
|
||
display: grid;
|
||
grid-template-columns: minmax(120px, 0.28fr) minmax(0, 1fr);
|
||
gap: var(--rj-space-3);
|
||
padding: var(--rj-space-3);
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-md);
|
||
background: var(--rj-bg-sunken);
|
||
}
|
||
|
||
.mail-field-item span {
|
||
color: var(--rj-text-muted);
|
||
font-size: 0.8125rem;
|
||
}
|
||
|
||
.mail-field-item strong {
|
||
color: var(--rj-text);
|
||
font-weight: 500;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
|
||
/* ============================================================
|
||
SETTINGS
|
||
============================================================ */
|
||
|
||
.settings-layout {
|
||
display: grid;
|
||
grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
|
||
gap: var(--rj-space-5);
|
||
align-items: start;
|
||
}
|
||
|
||
.settings-tabs {
|
||
position: sticky;
|
||
top: var(--rj-space-4);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--rj-space-5);
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-lg);
|
||
background: color-mix(in srgb, var(--rj-bg-elevated) 88%, var(--rj-bg));
|
||
padding: var(--rj-space-4);
|
||
box-shadow: none;
|
||
}
|
||
|
||
.settings-nav-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--rj-space-0-5);
|
||
}
|
||
|
||
.settings-nav-group h3 {
|
||
margin: 0 0 var(--rj-space-2);
|
||
color: var(--rj-text-muted);
|
||
font-size: calc(0.72rem * var(--rj-font-scale));
|
||
font-weight: 700;
|
||
letter-spacing: 0.06em;
|
||
line-height: 1.2;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.settings-tab-btn {
|
||
width: 100%;
|
||
padding: 7px var(--rj-space-2-5);
|
||
font-size: var(--rj-text-md);
|
||
font-weight: 500;
|
||
line-height: 1.3;
|
||
text-align: left;
|
||
color: var(--rj-text-muted);
|
||
background: transparent;
|
||
border: 1px solid transparent;
|
||
border-radius: var(--rj-radius-md);
|
||
cursor: pointer;
|
||
transition: color 0.15s, border-color 0.15s, background 0.15s;
|
||
}
|
||
|
||
.settings-tab-btn:not(.active):hover {
|
||
--rj-hover-from: transparent;
|
||
--rj-hover-peak: color-mix(in srgb, var(--rj-text) 7%, var(--rj-bg-hover));
|
||
--rj-hover-to: var(--rj-bg-hover);
|
||
color: var(--rj-text);
|
||
background: var(--rj-bg-hover);
|
||
animation: rj-hover-fill var(--rj-duration-hover-in) linear both;
|
||
}
|
||
|
||
.settings-tab-btn {
|
||
transition: background-color var(--rj-duration-hover-out) ease-out,
|
||
color var(--rj-duration-fast) var(--rj-ease),
|
||
border-color var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.settings-tab-btn.active {
|
||
color: var(--rj-primary);
|
||
border-color: var(--rj-primary-muted);
|
||
background: var(--rj-primary-subtle);
|
||
}
|
||
|
||
.settings-panel {
|
||
display: none;
|
||
background: var(--rj-surface-panel, var(--rj-bg-elevated));
|
||
padding: var(--rj-space-6);
|
||
border-radius: var(--rj-radius-lg);
|
||
border: 1px solid var(--rj-border);
|
||
box-shadow: none;
|
||
}
|
||
|
||
.settings-panel.active {
|
||
display: block;
|
||
}
|
||
|
||
.settings-panel h2 {
|
||
margin: 0 0 var(--rj-space-1) 0;
|
||
font-size: 1.25rem;
|
||
line-height: 1.1;
|
||
font-weight: 600;
|
||
}
|
||
|
||
@media (max-width: 980px) {
|
||
.settings-layout {
|
||
grid-template-columns: 1fr;
|
||
gap: var(--rj-space-4);
|
||
}
|
||
|
||
.settings-tabs {
|
||
position: static;
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||
gap: var(--rj-space-4);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 560px) {
|
||
.settings-tabs {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
.settings-description {
|
||
margin: 0 0 var(--rj-space-5) 0;
|
||
color: var(--rj-text-muted);
|
||
font-size: 0.8125rem;
|
||
line-height: 1.5;
|
||
padding-bottom: var(--rj-space-4);
|
||
border-bottom: 1px var(--rj-divider-style, solid) var(--rj-border);
|
||
}
|
||
|
||
.settings-form .form-group {
|
||
margin-bottom: var(--rj-space-5);
|
||
}
|
||
|
||
.settings-form--embedded {
|
||
margin-top: var(--rj-space-6);
|
||
}
|
||
|
||
.settings-section {
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-lg);
|
||
padding: var(--rj-space-5) var(--rj-space-6) var(--rj-space-3);
|
||
margin: 0 0 var(--rj-space-6) 0;
|
||
background: transparent;
|
||
}
|
||
|
||
/* Float legend inside the box, not breaking the border line */
|
||
.settings-section > legend {
|
||
float: left;
|
||
width: 100%;
|
||
padding: 0;
|
||
margin-bottom: var(--rj-space-4);
|
||
font-size: 1rem;
|
||
font-weight: 700;
|
||
color: var(--rj-text);
|
||
}
|
||
|
||
.settings-section > legend + * {
|
||
clear: left;
|
||
}
|
||
|
||
.settings-section .form-group:last-child {
|
||
margin-bottom: var(--rj-space-2);
|
||
}
|
||
|
||
.settings-section--compact {
|
||
padding: var(--rj-space-4) var(--rj-space-5);
|
||
margin-bottom: var(--rj-space-4);
|
||
}
|
||
|
||
.settings-section--compact > legend {
|
||
margin-bottom: var(--rj-space-3);
|
||
}
|
||
|
||
.settings-section--compact .form-group {
|
||
margin-bottom: var(--rj-space-3);
|
||
}
|
||
|
||
.forms-admin-layout {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: var(--rj-space-4);
|
||
align-items: start;
|
||
}
|
||
|
||
.forms-admin-editor {
|
||
min-width: 0;
|
||
}
|
||
|
||
.forms-admin-list {
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-lg);
|
||
background: var(--rj-surface-group, color-mix(in srgb, var(--rj-bg-elevated) 88%, var(--rj-bg)));
|
||
padding: var(--rj-space-4);
|
||
}
|
||
|
||
.forms-admin-list__head {
|
||
display: grid;
|
||
grid-template-columns: minmax(260px, 420px) max-content;
|
||
align-items: end;
|
||
gap: var(--rj-space-3);
|
||
}
|
||
|
||
#newFormBtn {
|
||
justify-self: start;
|
||
width: auto;
|
||
min-width: 5.5rem;
|
||
}
|
||
|
||
.forms-admin-select-group {
|
||
margin: 0;
|
||
}
|
||
|
||
.forms-admin-select-group label {
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.forms-admin-select-group select {
|
||
width: 100%;
|
||
max-width: none;
|
||
}
|
||
|
||
.forms-admin-meta {
|
||
margin: var(--rj-space-2) 0 0;
|
||
color: var(--rj-text-muted);
|
||
font-size: 0.8125rem;
|
||
}
|
||
|
||
.forms-admin-switches {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--rj-space-3);
|
||
margin-bottom: var(--rj-space-4);
|
||
}
|
||
|
||
.forms-fields-toolbar {
|
||
margin-bottom: var(--rj-space-3);
|
||
}
|
||
|
||
.forms-fields-table-wrap {
|
||
width: 100%;
|
||
overflow: visible;
|
||
}
|
||
|
||
.forms-fields-table {
|
||
width: 100%;
|
||
min-width: 0;
|
||
border-collapse: separate;
|
||
border-spacing: 0;
|
||
}
|
||
|
||
.forms-fields-table thead {
|
||
display: none;
|
||
}
|
||
|
||
.forms-fields-table tbody {
|
||
display: grid;
|
||
gap: var(--rj-space-3);
|
||
}
|
||
|
||
.forms-fields-table tr.forms-field-row {
|
||
position: relative;
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: var(--rj-space-3);
|
||
align-items: end;
|
||
/* Room on the right for the delete button, which sits in the corner of the card, level with the first input. */
|
||
padding: var(--rj-space-3) calc(var(--rj-control-h) + var(--rj-space-3) * 2) var(--rj-space-3) var(--rj-space-3);
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-md);
|
||
background: var(--rj-surface-item, var(--rj-bg));
|
||
}
|
||
|
||
.forms-fields-table tr.forms-field-row td.forms-field-options {
|
||
grid-column: 1 / -1;
|
||
}
|
||
|
||
.forms-fields-table tr.forms-field-row td.users-table__actions {
|
||
position: absolute;
|
||
/* card padding + the label line (16px box + its gap) puts the button level with the inputs */
|
||
top: calc(var(--rj-space-3) + 16px + var(--rj-space-1-5));
|
||
right: var(--rj-space-3);
|
||
width: var(--rj-control-h);
|
||
}
|
||
|
||
.forms-fields-table td,
|
||
.forms-fields-table th {
|
||
padding: 0;
|
||
border-bottom: 0;
|
||
min-width: 0;
|
||
}
|
||
|
||
.forms-fields-table tr.forms-field-row > td {
|
||
border: 0 !important;
|
||
box-shadow: none;
|
||
/* The row card already spaces its cells with a gap; the .users-table cell
|
||
padding would only steal width from the inputs. */
|
||
padding: 0;
|
||
}
|
||
|
||
.forms-fields-table td {
|
||
display: grid;
|
||
grid-template-rows: 22px minmax(38px, auto);
|
||
align-items: start;
|
||
}
|
||
|
||
/* Inputs fill their grid cell at every width; the browser default (size=20)
|
||
drops below 120px once the fluid root size is under 16px. */
|
||
.forms-fields-table td input,
|
||
.forms-fields-table td select,
|
||
.forms-fields-table td textarea {
|
||
width: 100%;
|
||
min-width: 0;
|
||
}
|
||
|
||
.forms-fields-table td::before {
|
||
content: attr(data-label);
|
||
display: block;
|
||
min-height: 16px;
|
||
margin-bottom: var(--rj-space-1-5);
|
||
color: var(--rj-text-muted);
|
||
font-size: 0.8125rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0;
|
||
line-height: 1.2;
|
||
text-transform: none;
|
||
}
|
||
|
||
.forms-fields-table input,
|
||
.forms-fields-table select,
|
||
.forms-fields-table textarea {
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
min-height: 38px;
|
||
padding: var(--rj-space-2) var(--rj-space-2-5);
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-sm);
|
||
background: var(--rj-bg-elevated);
|
||
color: var(--rj-text);
|
||
font: inherit;
|
||
}
|
||
|
||
.forms-fields-table select {
|
||
appearance: none;
|
||
min-width: 100%;
|
||
padding-right: var(--rj-space-10);
|
||
background-color: var(--rj-bg-elevated);
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23525252' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||
background-repeat: no-repeat;
|
||
background-position: right 12px center;
|
||
background-size: 12px 8px;
|
||
}
|
||
|
||
.forms-fields-table textarea {
|
||
min-height: 54px;
|
||
resize: vertical;
|
||
}
|
||
|
||
.forms-field-check {
|
||
justify-items: start;
|
||
}
|
||
|
||
.forms-fields-table td.forms-field-check input[type="checkbox"] {
|
||
width: 18px;
|
||
height: 18px;
|
||
min-height: 0;
|
||
margin: 0;
|
||
align-self: center;
|
||
justify-self: start;
|
||
}
|
||
|
||
.forms-fields-table .users-table__actions {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: flex-end;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.forms-fields-table .users-table__actions::before {
|
||
display: none;
|
||
}
|
||
|
||
.forms-fields-table .users-table__actions .btn-icon {
|
||
width: 36px;
|
||
min-width: 36px;
|
||
flex-basis: 36px;
|
||
height: 36px;
|
||
padding: 0;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1px solid var(--rj-border);
|
||
background: var(--rj-bg-elevated);
|
||
}
|
||
|
||
.access-maintenance-grid {
|
||
clear: left;
|
||
display: grid;
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
gap: var(--rj-space-4) var(--rj-space-5);
|
||
align-items: start;
|
||
}
|
||
|
||
.access-maintenance-grid > .form-group {
|
||
margin: 0;
|
||
min-width: 0;
|
||
}
|
||
|
||
.access-maintenance-grid > .form-group > label:not(.toggle-label) {
|
||
display: block;
|
||
line-height: 1.45;
|
||
}
|
||
|
||
/* Toggles share a row with labelled fields: start one label height down */
|
||
.access-maintenance-grid > .access-toggle-row {
|
||
display: flex;
|
||
align-items: center;
|
||
min-height: var(--rj-control-h);
|
||
margin-top: var(--rj-label-offset);
|
||
}
|
||
|
||
.access-maintenance-grid > .access-toggle-row .toggle-label {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* The enable switch has the longer label and takes two columns */
|
||
.access-maintenance-grid > .access-toggle-row:first-child {
|
||
grid-column: span 2;
|
||
}
|
||
|
||
/* Full-width rows stretch their field across the whole grid (the :not()
|
||
chain matches the specificity of the 40rem cap in the settings form) */
|
||
.settings-panel .settings-form .access-maintenance-grid > .access-wide input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
|
||
.settings-panel .settings-form .access-maintenance-grid > .access-wide textarea,
|
||
.settings-panel .settings-form .access-maintenance-grid > .access-wide .logo-path-input,
|
||
.settings-panel .settings-form .access-maintenance-grid > .access-wide .logo-path-input .input-with-clear {
|
||
max-width: none;
|
||
}
|
||
|
||
.access-maintenance-grid #maintenanceUntil {
|
||
width: 100%;
|
||
}
|
||
|
||
.access-wide {
|
||
grid-column: 1 / -1;
|
||
}
|
||
|
||
.settings-visual-grid {
|
||
display: grid;
|
||
grid-template-columns: minmax(220px, 0.42fr) minmax(260px, 0.5fr) minmax(0, 1fr);
|
||
gap: var(--rj-space-3) var(--rj-space-4);
|
||
}
|
||
|
||
.settings-visual-grid .form-group {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.visual-overlay-color-group input[type="color"] {
|
||
width: 54px;
|
||
min-height: 38px;
|
||
padding: 3px;
|
||
}
|
||
|
||
.visual-color-opacity-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-3);
|
||
}
|
||
|
||
.visual-opacity-control {
|
||
flex: 1;
|
||
min-width: 0;
|
||
max-width: 260px;
|
||
}
|
||
|
||
/* Overlay colour (shown for some layouts) takes two columns */
|
||
.access-maintenance-grid > .visual-overlay-color-group {
|
||
grid-column: span 2;
|
||
}
|
||
|
||
#maintenanceUntil {
|
||
width: min(100%, 22rem);
|
||
padding-right: var(--rj-space-10);
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23525252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
|
||
background-repeat: no-repeat;
|
||
background-position: right 14px center;
|
||
}
|
||
|
||
[data-site-theme="dark"] #maintenanceUntil {
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23cfcfcf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
#maintenanceUntil::-webkit-calendar-picker-indicator {
|
||
opacity: 0;
|
||
cursor: pointer;
|
||
background: transparent;
|
||
}
|
||
|
||
#maintenanceUntil::-webkit-inner-spin-button,
|
||
#maintenanceUntil::-webkit-clear-button {
|
||
display: none;
|
||
-webkit-appearance: none;
|
||
}
|
||
|
||
.access-select {
|
||
width: 100%;
|
||
min-width: 0;
|
||
}
|
||
|
||
.settings-section--maintenance textarea {
|
||
min-height: 92px;
|
||
}
|
||
|
||
.settings-toggle-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||
gap: var(--rj-space-3) var(--rj-space-4);
|
||
}
|
||
|
||
.settings-toggle-grid--modules {
|
||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||
align-items: stretch;
|
||
}
|
||
|
||
.settings-toggle-grid .form-group {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.access-toggle-row .toggle-label {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
justify-content: flex-start;
|
||
gap: 0;
|
||
}
|
||
|
||
.access-toggle-row .toggle-label > .toggle-switch {
|
||
margin-top: var(--rj-space-2);
|
||
}
|
||
|
||
.access-toggle-row--module .toggle-label {
|
||
min-height: 64px;
|
||
padding: var(--rj-space-3);
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-md);
|
||
background: color-mix(in srgb, var(--rj-bg-elevated) 68%, var(--rj-bg));
|
||
}
|
||
|
||
.access-toggle-row--inline {
|
||
align-self: start;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.ai-feature-toggle-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: var(--rj-space-4);
|
||
}
|
||
|
||
.ai-feature-toggle-grid .toggle-label {
|
||
min-height: 66px;
|
||
}
|
||
|
||
.branding-main-grid {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr);
|
||
gap: var(--rj-space-8);
|
||
}
|
||
|
||
.branding-main-column {
|
||
min-width: 0;
|
||
}
|
||
|
||
.settings-section--branding-main .frontend-logos-block {
|
||
margin-top: 0;
|
||
padding-top: 0;
|
||
border-top: 0;
|
||
}
|
||
|
||
.settings-section--branding-main .form-group-row {
|
||
grid-template-columns: minmax(0, 1fr);
|
||
gap: var(--rj-space-5);
|
||
}
|
||
|
||
.settings-section--branding-main #logoDisplayGroup {
|
||
margin-top: var(--rj-space-6);
|
||
}
|
||
|
||
.settings-section--branding-main #logoSizeGroup {
|
||
margin-top: var(--rj-space-5);
|
||
}
|
||
|
||
.settings-section--branding-main #logoDisplayGroup .radio-group {
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
column-gap: var(--rj-space-6);
|
||
row-gap: var(--rj-space-2);
|
||
}
|
||
|
||
.settings-section--branding-main .radio-group--segmented {
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
column-gap: var(--rj-space-6);
|
||
row-gap: var(--rj-space-2);
|
||
}
|
||
|
||
.branding-form-actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--rj-space-3);
|
||
}
|
||
|
||
.branding-identity-grid {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr);
|
||
gap: var(--rj-space-5);
|
||
}
|
||
|
||
.branding-identity-grid .form-group {
|
||
min-width: 0;
|
||
}
|
||
|
||
.branding-favicon-hint {
|
||
display: block;
|
||
margin-bottom: var(--rj-space-3);
|
||
}
|
||
|
||
.branding-site-name-hint {
|
||
display: block;
|
||
margin-bottom: var(--rj-space-3);
|
||
}
|
||
|
||
@media (min-width: 1100px) {
|
||
.branding-main-grid {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
align-items: start;
|
||
}
|
||
}
|
||
|
||
.form-group-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: var(--rj-space-8);
|
||
}
|
||
|
||
@media (min-width: 1200px) {
|
||
.form-group-row {
|
||
grid-template-columns: 1fr 1fr;
|
||
}
|
||
}
|
||
|
||
.form-group-row .form-group {
|
||
margin-bottom: var(--rj-space-5);
|
||
min-width: 0;
|
||
}
|
||
|
||
.form-group-row--pagination {
|
||
gap: var(--rj-space-5);
|
||
}
|
||
|
||
.form-group-row--pagination input {
|
||
width: 100%;
|
||
}
|
||
|
||
@media (min-width: 980px) {
|
||
.form-group-row--pagination {
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
}
|
||
}
|
||
|
||
.change-password-form {
|
||
max-width: 500px;
|
||
}
|
||
|
||
/* Logo Preview */
|
||
.logo-preview-group {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: var(--rj-space-4);
|
||
}
|
||
|
||
.logo-preview-group--with-hint {
|
||
margin-top: var(--rj-space-2);
|
||
}
|
||
|
||
@media (max-width: 479px) {
|
||
.logo-preview-group {
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
|
||
.logo-preview {
|
||
width: 64px;
|
||
height: 64px;
|
||
flex-shrink: 0;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #f8fafc;
|
||
background-image:
|
||
linear-gradient(45deg, rgba(15, 23, 42, 0.12) 25%, transparent 25%),
|
||
linear-gradient(-45deg, rgba(15, 23, 42, 0.12) 25%, transparent 25%),
|
||
linear-gradient(45deg, transparent 75%, rgba(15, 23, 42, 0.12) 75%),
|
||
linear-gradient(-45deg, transparent 75%, rgba(15, 23, 42, 0.12) 75%);
|
||
background-position: 0 0, 0 8px, 8px -8px, -8px 0;
|
||
background-size: 16px 16px;
|
||
border: 1px solid color-mix(in srgb, var(--rj-border) 70%, #ffffff);
|
||
border-radius: 0;
|
||
box-shadow:
|
||
inset 0 0 0 1px rgba(255, 255, 255, 0.78),
|
||
0 0 0 1px color-mix(in srgb, var(--rj-bg) 70%, transparent);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.logo-preview::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background:
|
||
linear-gradient(135deg, transparent calc(50% - 1px), color-mix(in srgb, var(--rj-border) 86%, #ffffff) 50%, transparent calc(50% + 1px));
|
||
opacity: 0.72;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.logo-preview:has(img[src]:not([src=""]))::after {
|
||
display: none;
|
||
}
|
||
|
||
.logo-preview img {
|
||
position: relative;
|
||
z-index: 1;
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.logo-preview--wide {
|
||
width: 9rem;
|
||
aspect-ratio: 1.91 / 1;
|
||
}
|
||
|
||
.logo-controls {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--rj-space-2);
|
||
}
|
||
|
||
.logo-path-input {
|
||
display: flex;
|
||
gap: var(--rj-space-2);
|
||
/* The field sits next to a small button, so it takes the small control
|
||
height too (the input rule reads --rj-control-h) */
|
||
--rj-control-h: var(--rj-control-h-sm);
|
||
}
|
||
|
||
.logo-path-input .input-with-clear {
|
||
position: relative;
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.logo-path-input .input-with-clear input {
|
||
width: 100%;
|
||
padding-right: 2rem;
|
||
}
|
||
|
||
.logo-path-input .btn {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.input-clear-btn {
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 0.5rem;
|
||
transform: translateY(-50%);
|
||
width: 1.25rem;
|
||
height: 1.25rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: none;
|
||
background: transparent;
|
||
color: var(--rj-text-muted);
|
||
cursor: pointer;
|
||
padding: 0;
|
||
border-radius: var(--rj-radius-sm);
|
||
transition: background-color var(--rj-duration-fast) var(--rj-ease),
|
||
color var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.input-clear-btn:hover {
|
||
background: var(--rj-bg-hover);
|
||
color: var(--rj-text);
|
||
}
|
||
|
||
.input-clear-btn:focus-visible {
|
||
outline: 2px solid var(--rj-primary);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
.input-clear-btn[hidden] {
|
||
display: none;
|
||
}
|
||
|
||
.input-clear-btn svg {
|
||
width: 0.875rem;
|
||
height: 0.875rem;
|
||
}
|
||
|
||
/* Toggle Switch */
|
||
.toggle-label {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: var(--rj-space-3);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.toggle-switch {
|
||
position: relative;
|
||
width: 44px;
|
||
height: 24px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.toggle-switch input {
|
||
opacity: 0;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
|
||
.toggle-slider {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: var(--rj-border-strong);
|
||
border-radius: var(--rj-radius-full);
|
||
transition: background-color var(--rj-duration-fast) var(--rj-ease);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.toggle-slider::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 2px;
|
||
left: 2px;
|
||
width: 20px;
|
||
height: 20px;
|
||
background: white;
|
||
border-radius: 50%;
|
||
transition: transform var(--rj-duration-fast) var(--rj-ease);
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.toggle-switch input:checked + .toggle-slider {
|
||
background: var(--rj-primary);
|
||
}
|
||
|
||
.toggle-switch input:disabled + .toggle-slider,
|
||
.toggle-switch input:disabled:checked + .toggle-slider {
|
||
background: var(--rj-border-strong);
|
||
cursor: not-allowed;
|
||
opacity: 0.65;
|
||
}
|
||
|
||
.toggle-switch input:checked + .toggle-slider::before {
|
||
transform: translateX(20px);
|
||
}
|
||
|
||
.toggle-switch input:focus-visible + .toggle-slider {
|
||
outline: 2px solid var(--rj-border-focus);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
/* Range Input */
|
||
.range-input-group {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-3);
|
||
}
|
||
|
||
.range-input {
|
||
flex: 1;
|
||
height: 6px;
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
background: var(--rj-border-strong);
|
||
border-radius: var(--rj-radius-full);
|
||
outline: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.range-input::-webkit-slider-thumb {
|
||
-webkit-appearance: none;
|
||
width: 18px;
|
||
height: 18px;
|
||
background: var(--rj-primary);
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
|
||
transition: transform var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.range-input::-webkit-slider-thumb:hover {
|
||
transform: scale(1.15);
|
||
}
|
||
|
||
.range-input::-moz-range-thumb {
|
||
width: 18px;
|
||
height: 18px;
|
||
background: var(--rj-primary);
|
||
border: none;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.range-input:focus-visible {
|
||
outline: 2px solid var(--rj-border-focus);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
.range-value {
|
||
min-width: 40px;
|
||
text-align: right;
|
||
font-size: var(--rj-text-sm);
|
||
font-weight: 500;
|
||
color: var(--rj-text-secondary);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
/* Fill slider: the field area fills with the accent colour up to the value;
|
||
the percentage label sits inside the field and flips sides below 40%. */
|
||
.fill-slider {
|
||
position: relative;
|
||
height: 40px;
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-md);
|
||
background: var(--rj-bg-elevated);
|
||
overflow: visible;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.fill-slider__fill {
|
||
position: absolute;
|
||
inset: 0 auto 0 0;
|
||
width: 70%;
|
||
background: var(--rj-primary);
|
||
pointer-events: none;
|
||
transition: width var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.fill-slider__value {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 14px;
|
||
transform: translateY(-50%);
|
||
z-index: 1;
|
||
font-size: var(--rj-text-md);
|
||
font-weight: 700;
|
||
color: var(--rj-text-on-primary, #fff);
|
||
font-variant-numeric: tabular-nums;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.fill-slider__value--right {
|
||
left: auto;
|
||
right: 14px;
|
||
color: var(--rj-text-secondary);
|
||
}
|
||
|
||
/* Native range on top provides the interaction. The track stays transparent
|
||
(the fill layer shows the value) but the thumb is a visible drag handle.
|
||
The extra specificity overrides the .form-group input surface background. */
|
||
.fill-slider .fill-slider__input {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 0;
|
||
margin: 0;
|
||
border: 0;
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
background: transparent;
|
||
box-shadow: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.fill-slider__input:disabled {
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.fill-slider__input::-webkit-slider-runnable-track {
|
||
background: transparent;
|
||
height: 100%;
|
||
}
|
||
|
||
.fill-slider__input::-moz-range-track {
|
||
background: transparent;
|
||
height: 100%;
|
||
}
|
||
|
||
.fill-slider__input::-webkit-slider-thumb {
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
width: 10px;
|
||
height: 46px;
|
||
border-radius: var(--rj-radius-md);
|
||
background: #fff;
|
||
border: 1px solid var(--rj-primary);
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||
cursor: grab;
|
||
top:-3px;
|
||
position:relative
|
||
}
|
||
|
||
.fill-slider__input::-webkit-slider-thumb:active {
|
||
cursor: grabbing;
|
||
}
|
||
|
||
.fill-slider__input::-moz-range-thumb {
|
||
width: 10px;
|
||
height: 46px;
|
||
border-radius: var(--rj-radius-md);
|
||
background: #fff;
|
||
border: 1px solid var(--rj-primary);
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||
cursor: grab;
|
||
top:-3px;
|
||
position:relative
|
||
}
|
||
|
||
.fill-slider:has(.fill-slider__input:focus-visible) {
|
||
outline: none;
|
||
border-color: var(--rj-primary);
|
||
box-shadow: 0 0 0 3px var(--rj-primary-muted);
|
||
}
|
||
|
||
/* Editor Button Settings Row */
|
||
.editor-btn-settings-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: var(--rj-space-4);
|
||
align-items: start;
|
||
}
|
||
|
||
.editor-btn-settings-row .toggle-label {
|
||
padding-top: var(--rj-space-1);
|
||
}
|
||
|
||
.range-field label {
|
||
display: block;
|
||
font-size: var(--rj-text-sm);
|
||
font-weight: 500;
|
||
color: var(--rj-text-secondary);
|
||
margin-bottom: var(--rj-space-1);
|
||
}
|
||
|
||
/* Button Style Row — controls + live preview side by side */
|
||
.btn-style-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr minmax(220px, auto);
|
||
gap: var(--rj-space-4);
|
||
align-items: stretch;
|
||
margin-top: var(--rj-space-2);
|
||
}
|
||
|
||
.settings-section--button-style .btn-style-row {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.btn-style-controls {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--rj-space-3);
|
||
min-width: 0;
|
||
}
|
||
|
||
.btn-style-radius-field {
|
||
width: min(100%, 460px);
|
||
}
|
||
|
||
.btn-style-glow-field {
|
||
display: grid;
|
||
gap: var(--rj-space-1);
|
||
max-width: 460px;
|
||
}
|
||
|
||
.btn-style-controls .form-hint {
|
||
margin-top: var(--rj-space-1-5);
|
||
}
|
||
|
||
.btn-style-preview {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--rj-space-2);
|
||
align-items: stretch;
|
||
justify-content: center;
|
||
padding: var(--rj-space-4);
|
||
background: color-mix(in srgb, var(--rj-bg-elevated) 82%, var(--rj-bg));
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-lg);
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.btn-style-row {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
.btn-preview-primary {
|
||
--rj-hover-from: var(--rj-primary);
|
||
--rj-hover-peak: var(--rj-hover-lift);
|
||
--rj-hover-to: var(--rj-hover-settle);
|
||
padding: var(--rj-space-2-5) var(--rj-space-6);
|
||
border: none;
|
||
font-size: 0.875rem;
|
||
font-family: inherit;
|
||
font-weight: 500;
|
||
cursor: default;
|
||
color: var(--rj-text-on-primary, #fff);
|
||
background-color: var(--rj-primary);
|
||
background-image: var(--rj-primary-sheen);
|
||
transition: box-shadow 0.3s, border-radius 0.3s, background-color var(--rj-duration-hover-out) ease-out;
|
||
}
|
||
|
||
.btn-preview-primary:hover {
|
||
background-color: var(--rj-hover-settle);
|
||
animation: rj-hover-fill var(--rj-duration-hover-in) linear both;
|
||
}
|
||
|
||
.btn-preview-secondary {
|
||
--rj-hover-from: transparent;
|
||
--rj-hover-peak: var(--rj-hover-tint);
|
||
--rj-hover-to: var(--rj-hover-tint-settle);
|
||
transition: background-color var(--rj-duration-hover-out) ease-out, border-radius 0.3s;
|
||
}
|
||
|
||
.btn-preview-secondary:hover {
|
||
background-color: var(--rj-hover-tint-settle);
|
||
animation: rj-hover-fill var(--rj-duration-hover-in) linear both;
|
||
}
|
||
|
||
/* With the glow the real button has a faint text shadow; flat buttons do not */
|
||
html:not(.rj-flat-buttons) .btn-preview-primary {
|
||
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.25), 0 -1px 1px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.btn-preview-secondary {
|
||
padding: var(--rj-space-2-5) var(--rj-space-6);
|
||
background: transparent;
|
||
border: 2px solid var(--rj-border-strong);
|
||
font-size: 0.875rem;
|
||
font-family: inherit;
|
||
font-weight: 500;
|
||
cursor: default;
|
||
color: var(--rj-text-secondary);
|
||
transition: border-radius 0.3s;
|
||
}
|
||
|
||
/* Theme Selector */
|
||
.theme-selector {
|
||
display: flex;
|
||
gap: var(--rj-space-5);
|
||
}
|
||
|
||
.theme-option {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: var(--rj-space-2);
|
||
padding: var(--rj-space-3);
|
||
background: var(--rj-bg);
|
||
border: 2px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-md);
|
||
cursor: pointer;
|
||
font-size: 0.8125rem;
|
||
font-family: inherit;
|
||
color: var(--rj-text-secondary);
|
||
transition: border-color var(--rj-duration-fast) var(--rj-ease),
|
||
color var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.theme-option:hover {
|
||
border-color: var(--rj-border-strong);
|
||
color: var(--rj-text);
|
||
}
|
||
|
||
.theme-option.selected {
|
||
border-color: var(--rj-primary);
|
||
color: var(--rj-text);
|
||
}
|
||
|
||
.theme-swatch {
|
||
display: block;
|
||
width: 40px;
|
||
height: 28px;
|
||
border-radius: var(--rj-radius-sm);
|
||
border: 1px solid var(--rj-border);
|
||
}
|
||
|
||
.theme-swatch--light {
|
||
background: linear-gradient(135deg, #ffffff 50%, #f0f0f0 50%);
|
||
}
|
||
|
||
.theme-swatch--dark {
|
||
background: linear-gradient(135deg, #1a1a1a 50%, #0f0f0f 50%);
|
||
}
|
||
|
||
.theme-swatch--system {
|
||
background: linear-gradient(135deg, #ffffff 50%, #1a1a1a 50%);
|
||
}
|
||
|
||
/* Color Input — round swatch (acts as picker trigger) + slim hex field */
|
||
.color-input-group {
|
||
display: flex;
|
||
gap: var(--rj-space-2);
|
||
align-items: center;
|
||
}
|
||
|
||
/* Round picker — selector deliberately raised to input.color-picker so it
|
||
beats .form-group input (which sets width: 100% and padding). */
|
||
input.color-picker,
|
||
.color-picker {
|
||
width: 32px;
|
||
height: 32px;
|
||
min-width: 32px;
|
||
padding: 0;
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: 50%;
|
||
background: var(--rj-bg);
|
||
cursor: pointer;
|
||
overflow: hidden;
|
||
flex-shrink: 0;
|
||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
|
||
transition: transform var(--rj-duration-fast) var(--rj-ease),
|
||
border-color var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
input.color-picker:hover,
|
||
.color-picker:hover {
|
||
transform: scale(1.05);
|
||
border-color: var(--rj-primary);
|
||
}
|
||
|
||
input.color-picker:focus-visible,
|
||
.color-picker:focus-visible {
|
||
outline: 2px solid var(--rj-border-focus);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
/* Browser swatch wrappers — fill the round button edge-to-edge */
|
||
input.color-picker::-webkit-color-swatch-wrapper,
|
||
.color-picker::-webkit-color-swatch-wrapper {
|
||
padding: 0;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
input.color-picker::-webkit-color-swatch,
|
||
.color-picker::-webkit-color-swatch {
|
||
border: none;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
input.color-picker::-moz-color-swatch,
|
||
.color-picker::-moz-color-swatch {
|
||
border: none;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
input.color-hex-input,
|
||
.color-hex-input {
|
||
width: 110px;
|
||
font-family: var(--rj-font-mono);
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
/* Auto-badge — shown when an optional color field is in "auto" mode */
|
||
.auto-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: var(--rj-space-0-5) var(--rj-space-2);
|
||
background: var(--rj-primary-subtle);
|
||
color: var(--rj-primary);
|
||
border-radius: var(--rj-radius-full);
|
||
font-size: 0.6875rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
user-select: none;
|
||
}
|
||
|
||
.auto-badge[hidden] {
|
||
display: none;
|
||
}
|
||
|
||
/* Reset-to-auto button per color field */
|
||
.auto-reset-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 28px;
|
||
height: 28px;
|
||
padding: 0;
|
||
margin-left: auto;
|
||
background: transparent;
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-sm);
|
||
color: var(--rj-text-muted);
|
||
font-size: 0.875rem;
|
||
cursor: pointer;
|
||
transition: color var(--rj-duration-fast) var(--rj-ease),
|
||
border-color var(--rj-duration-fast) var(--rj-ease),
|
||
background var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.auto-reset-btn:hover {
|
||
color: var(--rj-primary);
|
||
border-color: var(--rj-primary);
|
||
background: var(--rj-primary-subtle);
|
||
}
|
||
|
||
.auto-reset-btn:focus-visible {
|
||
outline: 2px solid var(--rj-border-focus);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
/* Theme color sections — Light / Dark blocks side-by-side on desktop */
|
||
.theme-color-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 0;
|
||
margin: 0 0 var(--rj-space-5);
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.theme-color-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: var(--rj-space-4);
|
||
}
|
||
}
|
||
|
||
.theme-color-preview {
|
||
--rj-bg: #f8fafc;
|
||
--rj-bg-elevated: #ffffff;
|
||
--rj-bg-sunken: #eef4ff;
|
||
--rj-bg-hover: #f1f5f9;
|
||
--rj-text: #1a1a1a;
|
||
--rj-text-secondary: #454545;
|
||
--rj-text-muted: #595959;
|
||
--rj-border: #ccd9ed;
|
||
--rj-border-strong: #adbfd9;
|
||
background: var(--rj-bg);
|
||
border: 1px solid var(--rj-border);
|
||
padding: var(--rj-space-4);
|
||
}
|
||
|
||
.theme-color-section {
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-lg);
|
||
padding: var(--rj-space-5) var(--rj-space-5) var(--rj-space-5);
|
||
margin: 0;
|
||
background: var(--rj-bg-elevated);
|
||
color: var(--rj-text);
|
||
}
|
||
|
||
.theme-color-section legend {
|
||
padding: 0 var(--rj-space-2);
|
||
background: var(--rj-bg-elevated);
|
||
font-size: 0.8125rem;
|
||
font-weight: 600;
|
||
color: var(--rj-text);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
}
|
||
|
||
.theme-color-preview[data-mode="dark"] {
|
||
--rj-bg: #151c28;
|
||
--rj-bg-elevated: #1e2632;
|
||
--rj-bg-sunken: #0c121e;
|
||
--rj-bg-hover: #253040;
|
||
--rj-text: #e5e5e5;
|
||
--rj-text-secondary: #b8b8b8;
|
||
--rj-text-muted: #b8b8b8;
|
||
--rj-border: #344255;
|
||
--rj-border-strong: #46566d;
|
||
background: var(--rj-bg);
|
||
}
|
||
|
||
.theme-color-preview[data-mode="dark"] .theme-color-section {
|
||
background: var(--rj-bg-elevated);
|
||
}
|
||
|
||
.theme-color-preview[data-mode="dark"] .theme-color-section legend {
|
||
background: var(--rj-bg-elevated);
|
||
}
|
||
|
||
.theme-color-preview[data-mode="light"] input,
|
||
.theme-color-preview[data-mode="light"] textarea,
|
||
.theme-color-preview[data-mode="light"] select {
|
||
color-scheme: light;
|
||
}
|
||
|
||
.theme-color-preview[data-mode="dark"] input,
|
||
.theme-color-preview[data-mode="dark"] textarea,
|
||
.theme-color-preview[data-mode="dark"] select {
|
||
color-scheme: dark;
|
||
}
|
||
|
||
.theme-color-section .form-group:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* Action row at the bottom of the theme form */
|
||
.theme-form-actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--rj-space-3);
|
||
align-items: center;
|
||
margin-top: var(--rj-space-4);
|
||
}
|
||
|
||
|
||
/* Logo Browser Modal */
|
||
.logo-browser-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
|
||
gap: var(--rj-space-3);
|
||
max-height: 400px;
|
||
overflow-y: auto;
|
||
padding: var(--rj-space-2);
|
||
}
|
||
|
||
.logo-browser-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: var(--rj-bg-sunken);
|
||
border: 2px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-md);
|
||
cursor: pointer;
|
||
overflow: hidden;
|
||
padding: var(--rj-space-2);
|
||
transition: border-color var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.logo-browser-item:hover {
|
||
border-color: var(--rj-primary);
|
||
}
|
||
|
||
.logo-browser-item img {
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.logo-browser-item-name,
|
||
.logo-browser-name {
|
||
font-size: 0.6875rem;
|
||
color: var(--rj-text-muted);
|
||
text-align: center;
|
||
margin-top: var(--rj-space-1);
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* Danger Zone Tab & Panel */
|
||
.settings-tab-btn--danger {
|
||
color: var(--rj-danger);
|
||
}
|
||
|
||
.settings-tab-btn--danger:hover {
|
||
color: var(--rj-danger);
|
||
background: var(--rj-danger-subtle);
|
||
}
|
||
|
||
.settings-tab-btn--danger.active {
|
||
color: var(--rj-danger);
|
||
border-color: color-mix(in srgb, var(--rj-danger) 35%, var(--rj-border));
|
||
background: var(--rj-danger-subtle);
|
||
}
|
||
|
||
/* Email Settings */
|
||
.settings-hint-box {
|
||
padding: var(--rj-space-3) var(--rj-space-4);
|
||
margin-bottom: var(--rj-space-5);
|
||
background: var(--rj-warning-subtle);
|
||
border: 1px solid var(--rj-warning);
|
||
border-radius: var(--rj-radius-md);
|
||
font-size: 0.8125rem;
|
||
line-height: 1.5;
|
||
color: var(--rj-text);
|
||
}
|
||
|
||
.settings-hint-box p {
|
||
margin: 0;
|
||
}
|
||
|
||
.settings-divider {
|
||
border: none;
|
||
border-top: 1px var(--rj-divider-style, solid) var(--rj-border);
|
||
margin: var(--rj-space-5) 0;
|
||
}
|
||
|
||
.settings-subheading {
|
||
font-size: 0.9375rem;
|
||
font-weight: 600;
|
||
margin: 0 0 var(--rj-space-4) 0;
|
||
color: var(--rj-text);
|
||
}
|
||
|
||
.form-row-inline {
|
||
display: flex;
|
||
gap: var(--rj-space-4);
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.form-row-inline .form-group {
|
||
flex: 1;
|
||
}
|
||
|
||
.settings-actions-row {
|
||
display: flex;
|
||
gap: var(--rj-space-3);
|
||
align-items: center;
|
||
margin-top: var(--rj-space-4);
|
||
}
|
||
|
||
.settings-test-result {
|
||
margin-top: var(--rj-space-3);
|
||
padding: var(--rj-space-3) var(--rj-space-4);
|
||
border-radius: var(--rj-radius-md);
|
||
font-size: 0.8125rem;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.settings-test-result--success {
|
||
background: var(--rj-success-subtle);
|
||
color: var(--rj-success);
|
||
border: 1px solid var(--rj-success);
|
||
}
|
||
|
||
.settings-test-result--error {
|
||
background: var(--rj-danger-subtle);
|
||
color: var(--rj-danger);
|
||
border: 1px solid var(--rj-danger);
|
||
}
|
||
|
||
/* Users Table */
|
||
.users-toolbar {
|
||
margin-bottom: var(--rj-space-4);
|
||
}
|
||
|
||
.users-table-wrap {
|
||
margin-top: var(--rj-space-3);
|
||
}
|
||
|
||
.users-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 0.8125rem;
|
||
}
|
||
|
||
.users-table--admin {
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.users-table th,
|
||
.users-table td {
|
||
padding: var(--rj-space-2) var(--rj-space-3);
|
||
text-align: left;
|
||
border-bottom: 1px solid var(--rj-border);
|
||
font-size: inherit;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.users-table--admin th,
|
||
.users-table--admin td {
|
||
border-bottom: 0;
|
||
}
|
||
|
||
.users-table th {
|
||
font-weight: 600;
|
||
text-transform: none;
|
||
letter-spacing: 0;
|
||
color: var(--rj-text-muted);
|
||
}
|
||
|
||
.users-table__current {
|
||
background: transparent;
|
||
}
|
||
|
||
.users-table__current td:first-child {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.users-table__current em {
|
||
color: var(--rj-text-muted);
|
||
font-style: normal;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.users-table__actions {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
gap: var(--rj-space-1);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.users-table__actions .btn {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.role-badge {
|
||
display: inline-block;
|
||
font-size: inherit;
|
||
font-weight: 500;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.role-badge--admin {
|
||
color: var(--rj-primary);
|
||
}
|
||
|
||
.role-badge--editor {
|
||
color: var(--rj-text-secondary);
|
||
}
|
||
|
||
.users-table__actions .btn-icon {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 28px;
|
||
height: 28px;
|
||
padding: 0;
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-sm);
|
||
background: var(--rj-bg-elevated);
|
||
color: var(--rj-text-secondary);
|
||
cursor: pointer;
|
||
transition: background 0.15s ease, color 0.15s ease;
|
||
}
|
||
|
||
.users-table__actions .btn-icon:hover {
|
||
background: var(--rj-bg-sunken);
|
||
color: var(--rj-text);
|
||
}
|
||
|
||
.users-table__actions .btn-icon--danger:hover {
|
||
background: var(--rj-danger-subtle);
|
||
color: var(--rj-danger);
|
||
}
|
||
|
||
.users-table__actions .btn-icon svg {
|
||
width: 14px;
|
||
height: 14px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Forgot Password */
|
||
.forgot-password {
|
||
margin-top: var(--rj-space-1);
|
||
text-align: right;
|
||
}
|
||
|
||
.forgot-password a {
|
||
font-size: var(--rj-text-sm);
|
||
color: var(--rj-text-secondary);
|
||
}
|
||
|
||
.forgot-password a:hover {
|
||
color: var(--rj-primary);
|
||
}
|
||
|
||
.reset-desc {
|
||
color: var(--rj-text-secondary);
|
||
margin-bottom: var(--rj-space-4);
|
||
}
|
||
|
||
/* Danger Zone */
|
||
.danger-zone-title {
|
||
color: var(--rj-danger);
|
||
}
|
||
|
||
.danger-zone-card {
|
||
border: 1px solid var(--rj-danger);
|
||
border-radius: var(--rj-radius-lg);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.danger-zone-card__header {
|
||
padding: var(--rj-space-4) var(--rj-space-5);
|
||
}
|
||
|
||
.danger-zone-card__header h3 {
|
||
margin: 0 0 var(--rj-space-2) 0;
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.danger-zone-card__header p {
|
||
margin: 0;
|
||
font-size: 0.8125rem;
|
||
color: var(--rj-text-muted);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.danger-zone-card__warning {
|
||
padding: var(--rj-space-3) var(--rj-space-5);
|
||
background: rgba(220, 38, 38, 0.06);
|
||
border-top: 1px solid var(--rj-border);
|
||
border-bottom: 1px solid var(--rj-border);
|
||
font-size: 0.8125rem;
|
||
color: var(--rj-danger);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.danger-zone-card__action {
|
||
padding: var(--rj-space-4) var(--rj-space-5);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-3);
|
||
}
|
||
|
||
.danger-zone-card__action label {
|
||
font-size: 0.8125rem;
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.danger-zone-card__action input {
|
||
width: 120px;
|
||
padding: var(--rj-space-2) var(--rj-space-3);
|
||
font-size: 0.875rem;
|
||
font-family: var(--rj-font-mono, monospace);
|
||
letter-spacing: 0.05em;
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-md);
|
||
background: var(--rj-bg);
|
||
color: var(--rj-text);
|
||
}
|
||
|
||
.danger-zone-card__action input:focus {
|
||
outline: none;
|
||
border-color: var(--rj-danger);
|
||
box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
|
||
}
|
||
|
||
.danger-zone-card__action .btn {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Backup card */
|
||
.backup-manual-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: var(--rj-space-5);
|
||
margin-top: var(--rj-space-5);
|
||
}
|
||
|
||
.backup-manual-grid .backup-site-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.backup-manual-grid .backup-site-card__info {
|
||
flex: 1;
|
||
}
|
||
|
||
.backup-site-card {
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-lg);
|
||
overflow: hidden;
|
||
background: var(--rj-bg);
|
||
}
|
||
|
||
.backup-site-card__info {
|
||
padding: var(--rj-space-4) var(--rj-space-5);
|
||
}
|
||
|
||
.backup-site-card__info h3 {
|
||
margin: 0 0 var(--rj-space-2) 0;
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.backup-site-card__info p {
|
||
margin: 0;
|
||
font-size: 0.8125rem;
|
||
color: var(--rj-text-muted);
|
||
}
|
||
|
||
.backup-site-card__action {
|
||
padding: var(--rj-space-4) var(--rj-space-5);
|
||
border-top: 1px var(--rj-divider-style, solid) var(--rj-border);
|
||
min-height: 72px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.backup-site-card__action .btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-2);
|
||
}
|
||
|
||
.backup-progress {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-3);
|
||
font-size: 0.875rem;
|
||
color: var(--rj-text-muted);
|
||
}
|
||
|
||
.backup-progress__spinner {
|
||
width: 18px;
|
||
height: 18px;
|
||
border: 2px solid var(--rj-border);
|
||
border-top-color: var(--rj-primary);
|
||
border-radius: 50%;
|
||
animation: backup-spin 0.7s linear infinite;
|
||
}
|
||
|
||
@keyframes backup-spin {
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
/* Restore from Backup */
|
||
.restore-upload-area {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-3);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.restore-upload-area .btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-2);
|
||
}
|
||
|
||
.restore-filename {
|
||
font-size: 0.8125rem;
|
||
color: var(--rj-text-muted);
|
||
}
|
||
|
||
.restore-mode-block {
|
||
margin-top: var(--rj-space-4);
|
||
}
|
||
|
||
.restore-mode-heading {
|
||
margin: 0 0 var(--rj-space-2);
|
||
color: var(--rj-text);
|
||
font-size: 0.8125rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.restore-mode-selector {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: var(--rj-space-3);
|
||
}
|
||
|
||
.restore-mode-option {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.restore-mode-option input[type="radio"] {
|
||
position: absolute;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.restore-mode-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--rj-space-1);
|
||
height: 100%;
|
||
padding: var(--rj-space-3) var(--rj-space-4);
|
||
border: 2px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-lg);
|
||
transition: border-color var(--rj-duration-fast) var(--rj-ease),
|
||
background-color var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.restore-mode-card__header {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: var(--rj-space-3);
|
||
}
|
||
|
||
.restore-mode-card strong {
|
||
font-size: 0.875rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.restore-mode-card span {
|
||
font-size: 0.75rem;
|
||
color: var(--rj-text-muted);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.restore-mode-indicator {
|
||
position: relative;
|
||
flex: 0 0 auto;
|
||
width: 20px;
|
||
height: 20px;
|
||
border: 2px solid var(--rj-border-strong, var(--rj-text-muted));
|
||
border-radius: 50%;
|
||
background: var(--rj-bg);
|
||
transition: border-color var(--rj-duration-fast) var(--rj-ease),
|
||
background-color var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.restore-mode-indicator::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 5px;
|
||
top: 2px;
|
||
width: 5px;
|
||
height: 9px;
|
||
border: solid #fff;
|
||
border-width: 0 2px 2px 0;
|
||
opacity: 0;
|
||
transform: rotate(45deg) scale(0.7);
|
||
transition: opacity var(--rj-duration-fast) var(--rj-ease),
|
||
transform var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.restore-mode-option input[type="radio"]:checked + .restore-mode-card {
|
||
border-color: var(--rj-primary);
|
||
background: var(--rj-primary-muted);
|
||
box-shadow: 0 0 0 1px var(--rj-primary);
|
||
}
|
||
|
||
.restore-mode-option input[type="radio"]:checked + .restore-mode-card .restore-mode-indicator {
|
||
border-color: var(--rj-primary);
|
||
background: var(--rj-primary);
|
||
}
|
||
|
||
.restore-mode-option input[type="radio"]:checked + .restore-mode-card .restore-mode-indicator::after {
|
||
opacity: 1;
|
||
transform: rotate(45deg) scale(1);
|
||
}
|
||
|
||
.restore-mode-option:hover input[type="radio"]:not(:checked) + .restore-mode-card {
|
||
border-color: var(--rj-text-muted);
|
||
}
|
||
|
||
.restore-mode-option input[type="radio"]:focus-visible + .restore-mode-card {
|
||
outline: 2px solid var(--rj-primary);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
.restore-actions {
|
||
margin-top: var(--rj-space-4);
|
||
}
|
||
|
||
.restore-actions .btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-2);
|
||
}
|
||
|
||
/* ============================================================
|
||
AUTOMATED / SCHEDULED BACKUPS
|
||
============================================================ */
|
||
|
||
.backup-scheduled {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
gap: var(--rj-space-4);
|
||
margin-top: var(--rj-space-5);
|
||
padding: var(--rj-space-5);
|
||
}
|
||
|
||
.backup-scheduled .backup-site-card__info {
|
||
padding: 0;
|
||
max-width: 76rem;
|
||
}
|
||
|
||
/* Status banner — ok/warning/error/idle states */
|
||
.scheduled-status {
|
||
padding: var(--rj-space-3) var(--rj-space-4);
|
||
border-radius: var(--rj-radius-lg);
|
||
border: 1px solid var(--rj-border);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--rj-space-1);
|
||
align-items: baseline;
|
||
font-size: 0.875rem;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
min-width: 16rem;
|
||
grid-column: 1;
|
||
}
|
||
.scheduled-status[data-state="ok"] {
|
||
border-color: rgba(46, 160, 67, 0.4);
|
||
background: rgba(46, 160, 67, 0.06);
|
||
}
|
||
.scheduled-status[data-state="warning"] {
|
||
border-color: rgba(204, 145, 0, 0.45);
|
||
background: rgba(204, 145, 0, 0.08);
|
||
}
|
||
.scheduled-status[data-state="error"] {
|
||
border-color: rgba(220, 53, 69, 0.45);
|
||
background: rgba(220, 53, 69, 0.06);
|
||
}
|
||
.scheduled-status__row {
|
||
display: flex;
|
||
gap: var(--rj-space-2);
|
||
align-items: baseline;
|
||
min-width: 0;
|
||
}
|
||
.scheduled-status__message {
|
||
font-size: 0.8125rem;
|
||
color: var(--rj-text-muted);
|
||
min-width: 0;
|
||
}
|
||
.scheduled-status[data-state="warning"] .scheduled-status__message,
|
||
.scheduled-status[data-state="error"] .scheduled-status__message {
|
||
color: inherit;
|
||
}
|
||
|
||
.scheduled-storage {
|
||
font-size: 0.875rem;
|
||
color: var(--rj-text-muted);
|
||
min-width: 0;
|
||
display: flex;
|
||
gap: var(--rj-space-1);
|
||
flex-wrap: wrap;
|
||
}
|
||
.scheduled-storage strong {
|
||
color: var(--rj-text);
|
||
}
|
||
.scheduled-storage__dates {
|
||
color: inherit;
|
||
}
|
||
|
||
/* Settings form */
|
||
.scheduled-form {
|
||
display: grid;
|
||
grid-template-columns: minmax(24rem, 40rem) minmax(18rem, 22rem);
|
||
gap: var(--rj-space-5) var(--rj-space-8);
|
||
align-items: start;
|
||
padding: var(--rj-space-4);
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-lg);
|
||
background: var(--rj-bg);
|
||
}
|
||
.scheduled-form__toggle {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-2);
|
||
font-size: 0.9375rem;
|
||
color: var(--rj-text);
|
||
grid-column: 1 / -1;
|
||
}
|
||
.scheduled-form__toggle.toggle-label {
|
||
justify-content: space-between;
|
||
padding: 0;
|
||
}
|
||
.scheduled-form__hint {
|
||
margin: 0;
|
||
font-size: 0.8125rem;
|
||
color: var(--rj-text-muted);
|
||
line-height: 1.4;
|
||
}
|
||
.scheduled-form__toggle + .scheduled-form__hint {
|
||
grid-column: 1 / -1;
|
||
margin-top: 0;
|
||
margin-bottom: var(--rj-space-2);
|
||
}
|
||
.scheduled-form__mode {
|
||
grid-column: 1 / -1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--rj-space-2);
|
||
max-width: 40rem;
|
||
}
|
||
.scheduled-form__mode > label {
|
||
font-size: 0.875rem;
|
||
font-weight: 600;
|
||
color: var(--rj-text);
|
||
}
|
||
.scheduled-form__fieldset {
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-lg);
|
||
padding: var(--rj-space-3);
|
||
margin: 0;
|
||
min-width: 0;
|
||
}
|
||
.scheduled-form__fieldset legend {
|
||
font-size: 0.875rem;
|
||
font-weight: 600;
|
||
padding: 0 var(--rj-space-2);
|
||
}
|
||
.scheduled-form__grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--rj-space-2);
|
||
margin-top: var(--rj-space-2);
|
||
}
|
||
.scheduled-form__grid label {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--rj-space-1);
|
||
font-size: 0.8125rem;
|
||
color: var(--rj-text);
|
||
width: 5.75rem;
|
||
}
|
||
.scheduled-form__grid input,
|
||
.scheduled-form__limit input {
|
||
padding: var(--rj-space-2);
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-md);
|
||
font-size: 0.875rem;
|
||
box-sizing: border-box;
|
||
background: var(--rj-bg-elevated);
|
||
color: var(--rj-text);
|
||
}
|
||
.scheduled-form__grid input {
|
||
width: 100%;
|
||
}
|
||
.scheduled-form__limit {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--rj-space-1);
|
||
min-width: 0;
|
||
}
|
||
.scheduled-form__limit input {
|
||
width: 9rem;
|
||
}
|
||
.scheduled-form__side {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--rj-space-3);
|
||
grid-column: 2;
|
||
grid-row: 4 / span 2;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
}
|
||
.scheduled-form__actions {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-self: center;
|
||
grid-column: 2;
|
||
grid-row: 5;
|
||
}
|
||
|
||
/* Remote backup targets */
|
||
.backup-remote {
|
||
padding: var(--rj-space-4);
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-lg);
|
||
background: var(--rj-bg);
|
||
}
|
||
.backup-remote__header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
gap: var(--rj-space-4);
|
||
margin-bottom: var(--rj-space-4);
|
||
}
|
||
.backup-remote__header h4 {
|
||
margin: 0 0 var(--rj-space-2) 0;
|
||
font-size: 0.9375rem;
|
||
font-weight: 600;
|
||
color: var(--rj-text);
|
||
}
|
||
.backup-remote__header p,
|
||
.backup-remote__empty {
|
||
margin: 0;
|
||
font-size: 0.8125rem;
|
||
color: var(--rj-text-muted);
|
||
line-height: 1.4;
|
||
}
|
||
.backup-remote__beta-note {
|
||
margin-top: var(--rj-space-2) !important;
|
||
color: var(--rj-warning, #b7791f) !important;
|
||
}
|
||
.backup-remote__add {
|
||
display: grid;
|
||
grid-template-columns: minmax(12rem, 1fr) auto;
|
||
gap: var(--rj-space-2);
|
||
align-items: center;
|
||
justify-content: end;
|
||
min-width: 22rem;
|
||
margin-top: 1.7rem;
|
||
}
|
||
.backup-remote__add select,
|
||
.backup-remote-target input[type="text"],
|
||
.backup-remote-target input[type="password"],
|
||
.backup-remote-target__secret {
|
||
padding: var(--rj-space-2);
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-md);
|
||
font-size: 0.875rem;
|
||
background-color: var(--rj-bg);
|
||
color: var(--rj-text);
|
||
}
|
||
.backup-remote__add select {
|
||
background-color: var(--rj-bg-elevated);
|
||
min-width: 0;
|
||
width: 100%;
|
||
}
|
||
.backup-remote-target input::placeholder {
|
||
color: var(--rj-text-muted);
|
||
opacity: 0.75;
|
||
}
|
||
.backup-remote__list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--rj-space-3);
|
||
}
|
||
.backup-remote-target {
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-lg);
|
||
padding: var(--rj-space-3);
|
||
background: var(--rj-bg-elevated);
|
||
}
|
||
.backup-remote-target__header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: var(--rj-space-3);
|
||
margin-bottom: var(--rj-space-3);
|
||
}
|
||
.backup-remote-target__title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-2);
|
||
min-width: 0;
|
||
}
|
||
.backup-remote-target__title input[type="text"] {
|
||
min-width: 12rem;
|
||
font-weight: 600;
|
||
}
|
||
.backup-remote-target__title span {
|
||
display: inline-block;
|
||
flex-shrink: 0;
|
||
padding: var(--rj-space-0-5) var(--rj-space-2);
|
||
border-radius: var(--rj-radius-pill, 9999px);
|
||
background: var(--rj-bg);
|
||
border: 1px solid var(--rj-border);
|
||
color: var(--rj-text-muted);
|
||
font-size: 0.75rem;
|
||
white-space: nowrap;
|
||
}
|
||
.backup-remote-target__actions {
|
||
display: flex;
|
||
gap: var(--rj-space-2);
|
||
flex-wrap: wrap;
|
||
justify-content: flex-end;
|
||
}
|
||
.backup-remote-target__grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: var(--rj-space-3);
|
||
}
|
||
.backup-remote-target__grid label {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--rj-space-1);
|
||
min-width: 0;
|
||
font-size: 0.8125rem;
|
||
color: var(--rj-text-secondary);
|
||
}
|
||
.backup-remote-target__grid input[type="text"],
|
||
.backup-remote-target__grid input[type="password"],
|
||
.backup-remote-target__grid .backup-remote-target__secret {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
.backup-remote-target__check {
|
||
flex-direction: row !important;
|
||
align-items: center;
|
||
}
|
||
.backup-remote-target__status {
|
||
margin-top: var(--rj-space-3);
|
||
font-size: 0.8125rem;
|
||
color: var(--rj-text-muted);
|
||
}
|
||
.backup-remote-target__status[data-state="success"] {
|
||
color: #166534;
|
||
}
|
||
.backup-remote-target__status[data-state="error"] {
|
||
color: #b42318;
|
||
}
|
||
|
||
.backup-remote-files {
|
||
margin-top: var(--rj-space-3);
|
||
border-top: 1px solid var(--rj-border);
|
||
padding-top: var(--rj-space-3);
|
||
color: var(--rj-text-muted);
|
||
font-size: 0.8125rem;
|
||
}
|
||
|
||
.backup-remote-file {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: var(--rj-space-3);
|
||
padding: var(--rj-space-2) 0;
|
||
border-bottom: 1px solid var(--rj-border);
|
||
}
|
||
|
||
.backup-remote-file:last-child {
|
||
border-bottom: 0;
|
||
}
|
||
|
||
.backup-remote-file__meta {
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.2rem;
|
||
}
|
||
|
||
.backup-remote-file__meta strong {
|
||
color: var(--rj-text);
|
||
font-size: 0.8125rem;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.backup-remote-file__actions {
|
||
display: flex;
|
||
gap: var(--rj-space-2);
|
||
flex-wrap: wrap;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
/* Cron setup card */
|
||
.scheduled-cron {
|
||
margin-top: var(--rj-space-2);
|
||
margin-bottom: var(--rj-space-2);
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-lg);
|
||
background: var(--rj-bg);
|
||
}
|
||
.scheduled-cron summary {
|
||
cursor: pointer;
|
||
list-style: none;
|
||
padding: var(--rj-space-3) var(--rj-space-4);
|
||
font-size: 0.9375rem;
|
||
font-weight: 600;
|
||
color: var(--rj-text);
|
||
}
|
||
.scheduled-cron summary::-webkit-details-marker {
|
||
display: none;
|
||
}
|
||
.scheduled-cron summary::after {
|
||
content: "+";
|
||
float: right;
|
||
color: var(--rj-text-muted);
|
||
}
|
||
.scheduled-cron[open] summary {
|
||
border-bottom: 1px solid var(--rj-border);
|
||
}
|
||
.scheduled-cron[open] summary::after {
|
||
content: "-";
|
||
}
|
||
.scheduled-cron p {
|
||
margin: 0;
|
||
padding: var(--rj-space-3) var(--rj-space-4) var(--rj-space-3);
|
||
font-size: 0.8125rem;
|
||
color: var(--rj-text-muted);
|
||
line-height: 1.45;
|
||
}
|
||
.scheduled-cron .scheduled-cron__hint {
|
||
padding-top: var(--rj-space-2);
|
||
padding-bottom: var(--rj-space-4);
|
||
}
|
||
.scheduled-cron__line {
|
||
display: grid;
|
||
grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr) auto;
|
||
align-items: center;
|
||
gap: var(--rj-space-2);
|
||
margin: 0 var(--rj-space-4) var(--rj-space-2-5);
|
||
}
|
||
.scheduled-cron__line:last-child {
|
||
margin-bottom: var(--rj-space-4);
|
||
}
|
||
.scheduled-cron__line > span {
|
||
color: var(--rj-text-muted);
|
||
font-size: 0.8125rem;
|
||
}
|
||
.scheduled-cron__line code {
|
||
padding: var(--rj-space-2) var(--rj-space-3);
|
||
background: var(--rj-bg-elevated);
|
||
color: var(--rj-text);
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-md);
|
||
font-family: var(--font-mono, ui-monospace, SF Mono, Menlo, Consolas, monospace);
|
||
font-size: 0.8125rem;
|
||
overflow-x: auto;
|
||
white-space: nowrap;
|
||
}
|
||
.scheduled-cron__line--fallback {
|
||
grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
|
||
margin-top: var(--rj-space-3);
|
||
}
|
||
|
||
@media (max-width: 700px) {
|
||
.scheduled-cron__line,
|
||
.scheduled-cron__line--fallback {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
/* Backup list */
|
||
.scheduled-list {
|
||
margin-top: var(--rj-space-5);
|
||
padding: var(--rj-space-4);
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-lg);
|
||
background: var(--rj-surface-group, var(--rj-bg));
|
||
}
|
||
|
||
.scheduled-list__header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
gap: var(--rj-space-4);
|
||
flex-wrap: wrap;
|
||
margin-bottom: var(--rj-space-3);
|
||
}
|
||
|
||
.scheduled-list h4 {
|
||
margin: 0;
|
||
font-size: 0.9375rem;
|
||
font-weight: 600;
|
||
}
|
||
.scheduled-list__table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 0.875rem;
|
||
}
|
||
.scheduled-list__table th,
|
||
.scheduled-list__table td {
|
||
text-align: left;
|
||
padding: var(--rj-space-2) var(--rj-space-3);
|
||
border-bottom: 1px solid var(--rj-border);
|
||
}
|
||
.scheduled-list__table th {
|
||
font-size: 0.75rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
color: var(--rj-text-muted);
|
||
font-weight: 600;
|
||
}
|
||
.scheduled-list__empty {
|
||
text-align: center !important;
|
||
color: var(--rj-text-muted);
|
||
padding: var(--rj-space-5) !important;
|
||
}
|
||
.scheduled-list__actions {
|
||
display: flex;
|
||
gap: var(--rj-space-2);
|
||
flex-wrap: wrap;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
/* Tier badges */
|
||
.scheduled-tier {
|
||
display: inline-block;
|
||
padding: var(--rj-space-0-5) var(--rj-space-2);
|
||
border-radius: var(--rj-radius-pill, 9999px);
|
||
font-size: 0.6875rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
background: var(--rj-bg-subtle, #f5f5f4);
|
||
color: var(--rj-text-muted);
|
||
}
|
||
.scheduled-tier--daily { background: rgba(96, 165, 250, 0.15); color: #1d4ed8; }
|
||
.scheduled-tier--weekly { background: rgba(96, 165, 250, 0.25); color: #1e40af; }
|
||
.scheduled-tier--monthly { background: rgba(167, 139, 250, 0.2); color: #6d28d9; }
|
||
.scheduled-tier--yearly { background: rgba(251, 191, 36, 0.25); color: #92400e; }
|
||
.scheduled-tier--manual { background: rgba(34, 197, 94, 0.18); color: #166534; }
|
||
|
||
@media (max-width: 768px) {
|
||
.backup-manual-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: var(--rj-space-4);
|
||
}
|
||
|
||
.restore-mode-selector {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.scheduled-status {
|
||
width: 100%;
|
||
}
|
||
|
||
.scheduled-form {
|
||
grid-template-columns: 1fr;
|
||
gap: var(--rj-space-4);
|
||
}
|
||
|
||
.scheduled-form__side {
|
||
grid-column: 1;
|
||
grid-row: auto;
|
||
}
|
||
|
||
.scheduled-form__actions {
|
||
grid-column: 1;
|
||
grid-row: auto;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.logo-preview-group {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.theme-selector {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.danger-zone-card__action {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.danger-zone-card__action input {
|
||
width: 100%;
|
||
}
|
||
|
||
.backup-remote__header,
|
||
.backup-remote-target__header {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
}
|
||
.backup-remote__add,
|
||
.backup-remote-target__actions {
|
||
justify-content: flex-start;
|
||
}
|
||
.backup-remote__add {
|
||
grid-template-columns: 1fr;
|
||
min-width: 0;
|
||
width: 100%;
|
||
margin-top: 0;
|
||
}
|
||
.backup-remote-target__grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.scheduled-list__table th:nth-child(3),
|
||
.scheduled-list__table td:nth-child(3) {
|
||
display: none; /* hide size column on narrow screens */
|
||
}
|
||
}
|
||
|
||
|
||
/* ============================================================
|
||
SETUP WIZARD
|
||
============================================================ */
|
||
|
||
.setup-container {
|
||
max-width: 520px;
|
||
}
|
||
|
||
.setup-lang-row {
|
||
display: flex;
|
||
gap: var(--rj-space-4);
|
||
}
|
||
|
||
.setup-lang-row .form-group {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.setup-lang-row .form-group select {
|
||
width: 100%;
|
||
}
|
||
|
||
.form-hint {
|
||
display: block;
|
||
margin-top: var(--rj-space-2);
|
||
color: var(--rj-text-muted);
|
||
font-size: 0.8125rem;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.form-hint code {
|
||
background: var(--rj-bg-sunken);
|
||
padding: 1px 5px;
|
||
border-radius: var(--rj-radius-sm);
|
||
font-family: var(--rj-font-mono);
|
||
font-size: 0.85em;
|
||
}
|
||
|
||
.theme-contrast-feedback {
|
||
display: block;
|
||
margin-top: var(--rj-space-1);
|
||
color: var(--rj-text-muted);
|
||
font-size: 0.75rem;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.theme-contrast-feedback::before {
|
||
content: '';
|
||
display: inline-block;
|
||
width: 7px;
|
||
height: 7px;
|
||
margin-right: var(--rj-space-1-5);
|
||
border-radius: 50%;
|
||
background: var(--rj-text-muted);
|
||
vertical-align: 1px;
|
||
}
|
||
|
||
.theme-contrast-feedback[data-state="ok"] {
|
||
color: var(--rj-text-muted);
|
||
}
|
||
|
||
.theme-contrast-feedback[data-state="ok"]::before {
|
||
background: #16a34a;
|
||
}
|
||
|
||
.theme-contrast-feedback[data-state="error"] {
|
||
color: var(--rj-danger);
|
||
}
|
||
|
||
.theme-contrast-feedback[data-state="error"]::before {
|
||
background: #dc2626;
|
||
}
|
||
|
||
.password-field-row {
|
||
display: flex;
|
||
gap: var(--rj-space-2);
|
||
}
|
||
|
||
.password-field-row input {
|
||
flex: 1;
|
||
}
|
||
|
||
.password-field-row .btn-sm {
|
||
white-space: nowrap;
|
||
align-self: stretch;
|
||
}
|
||
|
||
.generated-password {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-2);
|
||
margin-top: var(--rj-space-2);
|
||
padding: var(--rj-space-2) var(--rj-space-3);
|
||
background: var(--rj-success-subtle);
|
||
border: 1px solid rgba(22, 163, 74, 0.2);
|
||
border-radius: var(--rj-radius-md);
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.generated-password code {
|
||
flex: 1;
|
||
font-family: var(--rj-font-mono);
|
||
font-size: 0.9em;
|
||
word-break: break-all;
|
||
color: var(--rj-text);
|
||
}
|
||
|
||
.btn-copy {
|
||
background: none;
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-sm);
|
||
padding: 3px var(--rj-space-2-5);
|
||
font-family: var(--rj-font-sans);
|
||
font-size: 0.8125rem;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
color: var(--rj-text-muted);
|
||
transition: background-color var(--rj-duration-fast) var(--rj-ease),
|
||
color var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.btn-copy:hover {
|
||
background: var(--rj-bg-hover);
|
||
color: var(--rj-text);
|
||
}
|
||
|
||
|
||
/* ============================================================
|
||
PASSWORD REQUIREMENTS
|
||
============================================================ */
|
||
|
||
.password-requirements {
|
||
margin-bottom: var(--rj-space-5);
|
||
}
|
||
|
||
.password-requirements small {
|
||
color: var(--rj-text-muted);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.password-requirements ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: var(--rj-space-2) 0 0 0;
|
||
}
|
||
|
||
.password-requirements .requirement {
|
||
padding: var(--rj-space-0-5) 0;
|
||
font-size: 0.8125rem;
|
||
color: var(--rj-text-muted);
|
||
transition: color var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.password-requirements .requirement::before {
|
||
content: '\2022';
|
||
margin-right: var(--rj-space-2);
|
||
}
|
||
|
||
.password-requirements .requirement.met {
|
||
color: var(--rj-success);
|
||
}
|
||
|
||
.password-requirements .requirement.met::before {
|
||
content: '\2713';
|
||
}
|
||
|
||
.password-requirements .requirement.unmet {
|
||
color: var(--rj-danger);
|
||
}
|
||
|
||
.password-requirements .requirement.unmet::before {
|
||
content: '\2717';
|
||
}
|
||
|
||
.password-requirements--compact .requirement-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--rj-space-1) var(--rj-space-2);
|
||
margin-top: var(--rj-space-2);
|
||
}
|
||
|
||
.password-requirements--compact .requirement {
|
||
padding: var(--rj-space-0-5) var(--rj-space-2);
|
||
font-size: 0.75rem;
|
||
border-radius: var(--rj-radius-sm);
|
||
background: var(--rj-bg-sunken);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.password-requirements--compact .requirement::before {
|
||
content: none;
|
||
margin-right: 0;
|
||
}
|
||
|
||
.password-requirements--compact .requirement.met {
|
||
background: var(--rj-success-subtle);
|
||
}
|
||
|
||
.password-requirements--compact .requirement.unmet {
|
||
background: rgba(239, 68, 68, 0.08);
|
||
}
|
||
|
||
|
||
/* ============================================================
|
||
TOAST NOTIFICATIONS
|
||
============================================================ */
|
||
|
||
.toast {
|
||
position: fixed;
|
||
top: calc(56px + var(--rj-space-4));
|
||
right: var(--rj-space-5);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-3);
|
||
padding: var(--rj-space-3) var(--rj-space-5);
|
||
background: var(--rj-bg-elevated);
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-sm);
|
||
box-shadow: var(--rj-shadow-lg);
|
||
color: var(--rj-text);
|
||
font-size: 0.8125rem;
|
||
z-index: var(--rj-z-toast);
|
||
animation: rj-slide-in-right var(--rj-duration-normal) var(--rj-ease);
|
||
max-width: 380px;
|
||
}
|
||
|
||
.toast::before {
|
||
content: '';
|
||
flex-shrink: 0;
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: 50%;
|
||
background: var(--rj-text-muted);
|
||
}
|
||
|
||
.toast.success {
|
||
border-color: color-mix(in srgb, var(--rj-brand) 70%, var(--rj-border));
|
||
background: var(--rj-brand-subtle);
|
||
}
|
||
|
||
.toast.success::before {
|
||
background: var(--rj-brand);
|
||
/* Checkmark via mask */
|
||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
|
||
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
|
||
-webkit-mask-size: 12px;
|
||
mask-size: 12px;
|
||
-webkit-mask-repeat: no-repeat;
|
||
mask-repeat: no-repeat;
|
||
-webkit-mask-position: center;
|
||
mask-position: center;
|
||
}
|
||
|
||
.toast.error {
|
||
border-color: var(--rj-danger);
|
||
}
|
||
|
||
.toast.warning {
|
||
border-color: var(--rj-warning);
|
||
background: var(--rj-warning-subtle);
|
||
color: var(--rj-warning-text-strong);
|
||
}
|
||
|
||
.toast.warning::before {
|
||
background: var(--rj-warning);
|
||
}
|
||
|
||
.toast.error::before {
|
||
background: var(--rj-danger);
|
||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
|
||
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
|
||
-webkit-mask-size: 12px;
|
||
mask-size: 12px;
|
||
-webkit-mask-repeat: no-repeat;
|
||
mask-repeat: no-repeat;
|
||
-webkit-mask-position: center;
|
||
mask-position: center;
|
||
}
|
||
|
||
.toast-fade-out {
|
||
animation: rj-fade-out 0.3s var(--rj-ease) forwards;
|
||
}
|
||
|
||
.editor-undo-redo {
|
||
display: flex;
|
||
gap: var(--rj-space-0-5);
|
||
}
|
||
|
||
.editor-undo-redo .btn {
|
||
padding: var(--rj-space-1) var(--rj-space-2);
|
||
min-width: 0;
|
||
}
|
||
|
||
.editor-undo-redo .btn:disabled {
|
||
opacity: 0.35;
|
||
cursor: default;
|
||
}
|
||
|
||
@keyframes rj-fade-out {
|
||
from { opacity: 1; transform: translateX(0); }
|
||
to { opacity: 0; transform: translateX(20px); }
|
||
}
|
||
|
||
|
||
/* ============================================================
|
||
LOADING
|
||
============================================================ */
|
||
|
||
.loading {
|
||
opacity: 0.6;
|
||
pointer-events: none;
|
||
}
|
||
|
||
|
||
/* ============================================================
|
||
ANIMATIONS (referenced by modal/toast)
|
||
============================================================ */
|
||
|
||
@keyframes rj-fade-in {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
|
||
@keyframes rj-slide-in {
|
||
from { opacity: 0; transform: scale(0.96) translateY(-8px); }
|
||
to { opacity: 1; transform: scale(1) translateY(0); }
|
||
}
|
||
|
||
@keyframes rj-slide-in-right {
|
||
from { opacity: 0; transform: translateX(100%); }
|
||
to { opacity: 1; transform: translateX(0); }
|
||
}
|
||
|
||
|
||
/* ============================================================
|
||
RESPONSIVE
|
||
============================================================ */
|
||
|
||
@media (max-width: 768px) {
|
||
.admin-list-footer {
|
||
align-items: flex-start;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.admin-pagination {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.admin-sidebar {
|
||
position: fixed;
|
||
top: var(--rj-topbar-h);
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 200px;
|
||
z-index: var(--rj-z-sticky);
|
||
background: var(--rj-sidebar-bg);
|
||
transform: translateX(-100%);
|
||
}
|
||
|
||
.admin-sidebar.open {
|
||
transform: translateX(0);
|
||
box-shadow: var(--rj-shadow-xl);
|
||
}
|
||
|
||
.admin-main {
|
||
border-radius: 0;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.sidebar-toggle {
|
||
display: flex;
|
||
}
|
||
|
||
.topbar-selectors {
|
||
display: none !important;
|
||
}
|
||
|
||
.topbar-actions {
|
||
display: none;
|
||
}
|
||
|
||
.admin-container {
|
||
padding: var(--rj-space-4);
|
||
}
|
||
|
||
.editor-header {
|
||
top: calc(var(--rj-topbar-h) + 4px);
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: var(--rj-space-3);
|
||
}
|
||
|
||
.editor-header-left,
|
||
.editor-header-right,
|
||
.ce-section-editor__tools {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.section-header {
|
||
align-items: flex-start;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.section-heading {
|
||
width: 100%;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.section-actions {
|
||
width: 100%;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.backup-item {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: var(--rj-space-3);
|
||
}
|
||
|
||
.ce-field {
|
||
flex-direction: column;
|
||
gap: var(--rj-space-0-5);
|
||
}
|
||
|
||
.ce-page-settings-grid,
|
||
.ce-seo-grid,
|
||
.ce-visibility-grid,
|
||
.access-maintenance-grid,
|
||
.settings-visual-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.ce-editor-tabs {
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.ce-editor-panels {
|
||
padding: var(--rj-space-3);
|
||
}
|
||
|
||
.ce-editor-panel[data-editor-panel="settings"].active,
|
||
.ce-editor-panel[data-editor-panel="seo"].active,
|
||
.ce-editor-panel[data-editor-panel="access"].active,
|
||
.ce-content-layout,
|
||
.section-item[data-type="text"] .section-fields,
|
||
.section-item[data-type="image"] .section-fields {
|
||
display: block;
|
||
}
|
||
|
||
.ce-content-layout--compact .section-item:not(.is-open) .section-fields {
|
||
display: none;
|
||
}
|
||
|
||
.section-fields .form-group {
|
||
margin-bottom: var(--rj-space-3);
|
||
}
|
||
|
||
.section-item[data-type="image"] .section-field-group--width {
|
||
grid-column: auto;
|
||
}
|
||
|
||
.ce-section-nav {
|
||
position: static;
|
||
max-height: 180px;
|
||
margin-bottom: var(--rj-space-4);
|
||
}
|
||
|
||
.ce-section-insert__menu {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.ce-field-label {
|
||
flex: none;
|
||
text-align: left;
|
||
padding-top: 0;
|
||
}
|
||
|
||
.ce-meta {
|
||
flex-direction: column;
|
||
gap: var(--rj-space-1);
|
||
}
|
||
|
||
.login-page--split {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.login-page--split .login-media {
|
||
min-height: 34vh;
|
||
}
|
||
|
||
.login-container {
|
||
margin: var(--rj-space-4);
|
||
padding: var(--rj-space-6);
|
||
}
|
||
}
|
||
|
||
/* ============================================================
|
||
EVENTS EDITOR (Dashboard)
|
||
============================================================ */
|
||
|
||
/* (selector-divider removed — selectors in topbar now) */
|
||
|
||
.ce-group-actions {
|
||
margin-left: auto;
|
||
display: flex;
|
||
gap: var(--rj-space-1);
|
||
}
|
||
|
||
.ce-field-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||
gap: var(--rj-space-3);
|
||
}
|
||
|
||
/* Several fields in one row: the label sits above its field, so a date
|
||
or time input keeps its full width instead of hiding behind a 140px label */
|
||
.ce-field-row > .ce-field {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
gap: var(--rj-space-1);
|
||
}
|
||
|
||
.ce-field-row > .ce-field > .ce-field-label {
|
||
flex: 0 0 auto;
|
||
padding-top: 0;
|
||
text-align: left;
|
||
}
|
||
|
||
.ce-field-row > .ce-field > .ce-input {
|
||
width: 100%;
|
||
}
|
||
|
||
.ce-input[type="date"],
|
||
.ce-input[type="datetime-local"] {
|
||
min-width: 9rem;
|
||
}
|
||
|
||
.ce-input[type="time"] {
|
||
min-width: 6.5rem;
|
||
}
|
||
|
||
.ce-lang-section {
|
||
margin-top: var(--rj-space-3);
|
||
border: 1px solid var(--rj-border, #e0e0e0);
|
||
border-radius: var(--rj-radius-md, 6px);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.ce-lang-header {
|
||
display: flex;
|
||
align-items: stretch;
|
||
gap: var(--rj-space-2);
|
||
background: var(--rj-bg-sunken, #f5f5f5);
|
||
border-bottom: 1px solid var(--rj-border, #e0e0e0);
|
||
}
|
||
|
||
.ce-lang-tabs {
|
||
display: flex;
|
||
gap: 0;
|
||
}
|
||
|
||
.ce-lang-tab {
|
||
padding: var(--rj-space-1-5) var(--rj-space-3-5);
|
||
border: none;
|
||
background: transparent;
|
||
color: var(--rj-text-muted, #888);
|
||
cursor: pointer;
|
||
font-size: 0.8125rem;
|
||
font-weight: 500;
|
||
border-bottom: 2px solid transparent;
|
||
transition: color 0.15s, border-color 0.15s;
|
||
}
|
||
|
||
.ce-lang-tab:hover {
|
||
color: var(--rj-text, #333);
|
||
}
|
||
|
||
.ce-lang-tab.active {
|
||
color: var(--rj-primary, #3858e9);
|
||
border-bottom-color: var(--rj-primary, #3858e9);
|
||
}
|
||
|
||
.ce-lang-translate {
|
||
margin: var(--rj-space-1-5) var(--rj-space-2) var(--rj-space-1-5) auto;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.ce-lang-panel {
|
||
padding: var(--rj-space-3);
|
||
}
|
||
|
||
.ce-lang-panel .ce-field + .ce-field {
|
||
margin-top: var(--rj-space-2);
|
||
}
|
||
|
||
/* ============================================
|
||
MENU ORDER
|
||
============================================ */
|
||
|
||
.menu-order-list {
|
||
border: 1px solid var(--rj-border, #e5e5e5);
|
||
border-radius: var(--rj-radius-lg);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.menu-order-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: var(--rj-space-2-5) var(--rj-space-3-5);
|
||
gap: var(--rj-space-3);
|
||
border-bottom: 1px solid var(--rj-border, #e5e5e5);
|
||
background: var(--rj-bg, #fff);
|
||
transition: background 0.15s ease;
|
||
}
|
||
|
||
.menu-order-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.menu-order-item:hover {
|
||
background: var(--rj-bg-hover, #f5f5f5);
|
||
}
|
||
|
||
.menu-order-item.dragging {
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.menu-order-item.drag-over-top {
|
||
box-shadow: inset 0 3px 0 var(--rj-primary, #3858e9);
|
||
}
|
||
|
||
.menu-order-item.drag-over-bottom {
|
||
box-shadow: inset 0 -3px 0 var(--rj-primary, #3858e9);
|
||
}
|
||
|
||
.menu-order-item__drag-handle {
|
||
cursor: grab;
|
||
color: var(--rj-text-muted, #a3a3a3);
|
||
display: flex;
|
||
align-items: center;
|
||
padding: var(--rj-space-0-5);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.menu-order-item__drag-handle:active {
|
||
cursor: grabbing;
|
||
}
|
||
|
||
.menu-order-item__drag-handle svg {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
|
||
.menu-order-item__drag-handle:hover {
|
||
color: var(--rj-text, #171717);
|
||
}
|
||
|
||
.menu-order-item__label {
|
||
flex: 1;
|
||
min-width: 0;
|
||
overflow-wrap: anywhere;
|
||
font-weight: 500;
|
||
color: var(--rj-text, #171717);
|
||
}
|
||
|
||
.menu-order-item__slug {
|
||
min-width: 0;
|
||
overflow-wrap: anywhere;
|
||
font-size: 0.8rem;
|
||
color: var(--rj-text-muted, #737373);
|
||
font-family: 'Geist Mono', ui-monospace, monospace;
|
||
}
|
||
|
||
.menu-order-item__actions {
|
||
display: flex;
|
||
flex-shrink: 0;
|
||
gap: var(--rj-space-1);
|
||
}
|
||
|
||
.menu-order-item__actions .btn-icon {
|
||
width: 30px;
|
||
height: 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1px solid var(--rj-border, #e5e5e5);
|
||
border-radius: var(--rj-radius-md);
|
||
background: var(--rj-bg, #fff);
|
||
color: var(--rj-text-muted, #737373);
|
||
cursor: pointer;
|
||
transition: all 0.15s ease;
|
||
}
|
||
|
||
.menu-order-item__actions .btn-icon:hover:not(:disabled) {
|
||
background: var(--rj-bg-hover, #f5f5f5);
|
||
color: var(--rj-text, #171717);
|
||
border-color: var(--rj-text-muted, #a3a3a3);
|
||
}
|
||
|
||
.menu-order-item__actions .btn-icon:disabled {
|
||
opacity: 0.3;
|
||
cursor: default;
|
||
}
|
||
|
||
.menu-order-empty {
|
||
padding: var(--rj-space-6);
|
||
text-align: center;
|
||
color: var(--rj-text-muted, #737373);
|
||
}
|
||
|
||
/* ============================================
|
||
ICON MANAGER
|
||
============================================ */
|
||
|
||
.icon-manager-path {
|
||
margin: 0 0 var(--rj-space-4);
|
||
color: var(--rj-text-muted, #737373);
|
||
font-family: 'Geist Mono', ui-monospace, monospace;
|
||
font-size: 0.82rem;
|
||
}
|
||
|
||
.icon-manager-toolbar {
|
||
display: grid;
|
||
grid-template-columns: minmax(260px, 1fr) minmax(180px, 240px);
|
||
gap: var(--rj-space-3);
|
||
align-items: end;
|
||
margin: 0 0 var(--rj-space-3-5);
|
||
}
|
||
|
||
.icon-manager-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||
gap: var(--rj-space-3-5);
|
||
}
|
||
|
||
.icon-manager-card {
|
||
display: grid;
|
||
grid-template-columns: 52px minmax(0, 1fr) auto;
|
||
gap: var(--rj-space-3);
|
||
align-items: center;
|
||
padding: var(--rj-space-3-5) var(--rj-space-3) var(--rj-space-3-5) var(--rj-space-3-5);
|
||
border: 1px solid var(--rj-border, #e5e5e5);
|
||
border-radius: var(--rj-radius-md);
|
||
background: var(--rj-surface-item, var(--rj-bg));
|
||
box-shadow: none;
|
||
}
|
||
|
||
.icon-manager-card--highlight {
|
||
border-color: var(--rj-primary, #10b3a3);
|
||
background: color-mix(in srgb, var(--rj-primary) 8%, var(--rj-surface-item, var(--rj-bg)));
|
||
}
|
||
|
||
.icon-manager-card__preview {
|
||
width: 52px;
|
||
height: 52px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: var(--rj-radius-lg);
|
||
background: var(--rj-primary-subtle, rgba(37, 99, 235, 0.08));
|
||
color: var(--rj-primary, #3858e9);
|
||
}
|
||
|
||
.icon-manager-card__preview svg,
|
||
.icon-manager-preview-box svg {
|
||
width: 28px;
|
||
height: 28px;
|
||
}
|
||
|
||
.icon-manager-card__body {
|
||
min-width: 0;
|
||
display: grid;
|
||
gap: 3px;
|
||
}
|
||
|
||
.icon-manager-card__body strong,
|
||
.icon-manager-card__body span {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.icon-manager-card__body strong {
|
||
color: var(--rj-text, #171717);
|
||
font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
font-size: 0.875rem;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.icon-manager-card__body span {
|
||
color: var(--rj-text-muted, #737373);
|
||
font-size: 0.875rem;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.icon-manager-card__actions {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
gap: var(--rj-space-1);
|
||
align-self: stretch;
|
||
}
|
||
|
||
.icon-manager-action-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 32px;
|
||
height: 32px;
|
||
padding: 0;
|
||
border: 1px solid var(--rj-border, #e5e5e5);
|
||
border-radius: var(--rj-radius-md);
|
||
background: var(--rj-bg-elevated);
|
||
color: var(--rj-text-muted, #737373);
|
||
cursor: pointer;
|
||
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
|
||
}
|
||
|
||
.icon-manager-action-btn:hover:not(:disabled),
|
||
.icon-manager-action-btn:focus-visible {
|
||
background: var(--rj-bg-hover, #f5f5f5);
|
||
border-color: var(--rj-text-muted, #a3a3a3);
|
||
color: var(--rj-text, #171717);
|
||
}
|
||
|
||
.icon-manager-action-btn--danger:hover:not(:disabled),
|
||
.icon-manager-action-btn--danger:focus-visible {
|
||
background: var(--rj-danger-subtle, rgba(220, 38, 38, 0.08));
|
||
border-color: var(--rj-danger, #dc2626);
|
||
color: var(--rj-danger, #dc2626);
|
||
}
|
||
|
||
.icon-manager-action-btn svg {
|
||
width: 16px;
|
||
height: 16px;
|
||
stroke-width: 1.5;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.icon-manager-action-btn:disabled {
|
||
opacity: 0.4;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.icon-manager-svg-field {
|
||
display: grid;
|
||
gap: var(--rj-space-1);
|
||
}
|
||
|
||
.icon-manager-svg-field .form-hint {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.icon-manager-svg-tools {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--rj-space-2);
|
||
margin-top: var(--rj-space-0-5);
|
||
}
|
||
|
||
.icon-manager-svg-input {
|
||
min-height: 180px;
|
||
font-family: 'Geist Mono', ui-monospace, monospace;
|
||
resize: vertical;
|
||
}
|
||
|
||
.icon-manager-preview-box {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-3-5);
|
||
min-height: 56px;
|
||
padding: var(--rj-space-3);
|
||
border: 1px solid var(--rj-border, #e5e5e5);
|
||
border-radius: var(--rj-radius-lg);
|
||
background: var(--rj-bg-sunken, #f5f5f5);
|
||
color: var(--rj-text, #171717);
|
||
}
|
||
|
||
.icon-manager-preview-box span {
|
||
color: var(--rj-text-muted, #737373);
|
||
}
|
||
|
||
.icon-manager-rename-warning {
|
||
margin-top: var(--rj-space-3);
|
||
padding: var(--rj-space-3) var(--rj-space-3-5);
|
||
border: 1px solid rgba(245, 158, 11, 0.35);
|
||
border-bottom: 1px solid rgba(245, 158, 11, 0.35);
|
||
border-radius: var(--rj-radius-lg);
|
||
background: rgba(245, 158, 11, 0.12);
|
||
}
|
||
|
||
.icon-manager-rename-warning .info-banner__inner {
|
||
display: block;
|
||
max-width: none;
|
||
margin: 0;
|
||
padding-right: 0;
|
||
}
|
||
|
||
.icon-manager-rename-warning .info-banner__title {
|
||
color: #fbbf24;
|
||
}
|
||
|
||
.icon-manager-rename-warning .info-banner__body {
|
||
display: block;
|
||
margin-top: var(--rj-space-2);
|
||
padding: 0;
|
||
border: 0;
|
||
background: transparent;
|
||
color: var(--rj-text, #e5e7eb);
|
||
}
|
||
|
||
.iconify-import-controls {
|
||
display: grid;
|
||
grid-template-columns: minmax(160px, 0.8fr) minmax(220px, 1.4fr) auto;
|
||
gap: var(--rj-space-3);
|
||
align-items: end;
|
||
}
|
||
|
||
.icon-set-picker {
|
||
position: relative;
|
||
}
|
||
|
||
.icon-set-picker__btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: var(--rj-space-2);
|
||
width: 100%;
|
||
text-align: left;
|
||
cursor: pointer;
|
||
background: var(--rj-bg-elevated);
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-md);
|
||
padding: var(--rj-space-2) var(--rj-space-3);
|
||
font-size: var(--rj-text-md);
|
||
color: var(--rj-text);
|
||
transition: border-color var(--rj-duration-fast);
|
||
}
|
||
|
||
.icon-set-picker__btn:focus-visible {
|
||
outline: 2px solid var(--rj-primary);
|
||
outline-offset: 1px;
|
||
}
|
||
|
||
.icon-set-picker__btn svg {
|
||
width: 16px;
|
||
height: 16px;
|
||
flex-shrink: 0;
|
||
color: var(--rj-text-muted);
|
||
transition: transform var(--rj-duration-fast);
|
||
}
|
||
|
||
.icon-set-picker__btn[aria-expanded="true"] svg {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
.icon-set-picker__list {
|
||
position: fixed;
|
||
z-index: calc(var(--rj-z-modal) + 10);
|
||
background: var(--rj-bg-elevated);
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-md);
|
||
box-shadow: var(--rj-shadow-lg);
|
||
padding: var(--rj-space-1);
|
||
margin: 0;
|
||
list-style: none;
|
||
max-height: 260px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.icon-set-picker__list [role="option"] {
|
||
padding: 7px var(--rj-space-2-5);
|
||
border-radius: var(--rj-radius-sm);
|
||
cursor: pointer;
|
||
font-size: var(--rj-text-md);
|
||
color: var(--rj-text);
|
||
}
|
||
|
||
.icon-set-picker__list [role="option"]:hover,
|
||
.icon-set-picker__list [role="option"][aria-selected="true"] {
|
||
background: var(--rj-primary-muted);
|
||
color: var(--rj-primary);
|
||
}
|
||
|
||
.iconify-import-results {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||
gap: var(--rj-space-2-5);
|
||
max-height: 420px;
|
||
overflow: auto;
|
||
padding-right: var(--rj-space-1);
|
||
}
|
||
|
||
.iconify-import-card {
|
||
display: grid;
|
||
grid-template-columns: 48px minmax(0, 1fr) auto;
|
||
gap: var(--rj-space-2-5);
|
||
align-items: center;
|
||
padding: var(--rj-space-2-5);
|
||
border: 1px solid var(--rj-border, #2f2f2f);
|
||
border-radius: var(--rj-radius-lg);
|
||
background: var(--rj-bg-sunken, #111);
|
||
}
|
||
|
||
.iconify-import-card--imported {
|
||
border-color: color-mix(in srgb, var(--rj-primary, #10b3a3) 42%, var(--rj-border, #2f2f2f));
|
||
background: color-mix(in srgb, var(--rj-primary, #10b3a3) 9%, var(--rj-bg-sunken, #111));
|
||
}
|
||
|
||
.iconify-import-card__preview {
|
||
width: 44px;
|
||
height: 44px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: var(--rj-radius-lg);
|
||
color: var(--rj-primary, #10b3a3);
|
||
background: color-mix(in srgb, var(--rj-primary, #10b3a3) 14%, transparent);
|
||
}
|
||
|
||
.iconify-import-card__preview svg {
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
|
||
.iconify-import-card__body {
|
||
min-width: 0;
|
||
}
|
||
|
||
.iconify-import-card__body strong,
|
||
.iconify-import-card__body span,
|
||
.iconify-import-card__body code {
|
||
display: block;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.iconify-import-card__body strong {
|
||
color: var(--rj-text, #fff);
|
||
font-size: 0.9rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.iconify-import-card__body span,
|
||
.iconify-import-card__body code {
|
||
margin-top: var(--rj-space-0-5);
|
||
color: var(--rj-text-muted, #737373);
|
||
font-family: var(--rj-font, inherit);
|
||
font-size: 0.78rem;
|
||
}
|
||
|
||
#iconifyImportQuery::-webkit-search-cancel-button,
|
||
#iconManagerSearch::-webkit-search-cancel-button {
|
||
filter: grayscale(1) brightness(1.7);
|
||
opacity: 0.72;
|
||
}
|
||
|
||
.dashboard-home {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--rj-space-4);
|
||
}
|
||
|
||
.dashboard-section {
|
||
border: 1px solid var(--rj-border, #e5e5e5);
|
||
border-radius: var(--rj-radius-lg);
|
||
background: var(--rj-surface-panel, var(--rj-bg-elevated));
|
||
color: var(--rj-text, #111);
|
||
padding: var(--rj-space-4);
|
||
box-shadow: none;
|
||
}
|
||
|
||
.dashboard-status-strip {
|
||
display: grid;
|
||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||
gap: 1px;
|
||
overflow: hidden;
|
||
border: 1px solid var(--rj-border, #e5e5e5);
|
||
border-radius: var(--rj-radius-md);
|
||
background: var(--rj-border, #e5e5e5);
|
||
}
|
||
|
||
.dashboard-status-chip {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
gap: 3px;
|
||
min-width: 0;
|
||
min-height: 58px;
|
||
border: 0;
|
||
border-radius: 0;
|
||
background: var(--rj-bg-elevated, #fff);
|
||
color: var(--rj-text, #111);
|
||
cursor: pointer;
|
||
padding: 9px var(--rj-space-3) var(--rj-space-2-5);
|
||
text-align: left;
|
||
font: inherit;
|
||
transition: background var(--rj-duration-fast) var(--rj-ease), box-shadow var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.dashboard-status-chip:hover,
|
||
.dashboard-status-chip:focus-visible {
|
||
background: var(--rj-brand-subtle, rgba(96, 165, 250, 0.12));
|
||
box-shadow: inset 0 -2px 0 var(--rj-brand, #60a5fa);
|
||
outline: 2px solid var(--rj-brand, #60a5fa);
|
||
outline-offset: -2px;
|
||
}
|
||
|
||
.dashboard-status-chip--accent {
|
||
background: var(--rj-brand-subtle, rgba(96, 165, 250, 0.12));
|
||
}
|
||
|
||
.dashboard-status-chip__label {
|
||
display: block;
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
color: var(--rj-text-muted, #737373);
|
||
font-size: 0.72rem;
|
||
line-height: 1.25;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.dashboard-status-chip__value {
|
||
display: block;
|
||
max-width: 100%;
|
||
color: var(--rj-text, #111);
|
||
font-size: 0.86rem;
|
||
font-weight: 700;
|
||
line-height: 1.25;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.dashboard-status-chip--wide {
|
||
grid-column: span 2;
|
||
}
|
||
|
||
.dashboard-section--ai {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--rj-space-3-5);
|
||
}
|
||
|
||
.dashboard-section[hidden] {
|
||
display: none !important;
|
||
}
|
||
|
||
.dashboard-section--analytics {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--rj-space-3);
|
||
}
|
||
|
||
.dashboard-section-header {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: var(--rj-space-4);
|
||
}
|
||
|
||
.dashboard-section-header h3 {
|
||
margin: 0 0 var(--rj-space-1);
|
||
color: var(--rj-text, #111);
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.dashboard-section-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
flex: 0 0 auto;
|
||
gap: var(--rj-space-2);
|
||
}
|
||
|
||
.ai-usage-summary {
|
||
color: var(--rj-text-muted);
|
||
font-size: 0.8125rem;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.ai-image-jobs-panel {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: var(--rj-space-3);
|
||
border: 1px solid var(--rj-border, #e5e5e5);
|
||
border-radius: var(--rj-radius-lg);
|
||
background: var(--rj-bg-elevated, #fff);
|
||
padding: var(--rj-space-3) var(--rj-space-3-5);
|
||
}
|
||
|
||
.ai-image-jobs-panel[hidden] {
|
||
display: none !important;
|
||
}
|
||
|
||
.ai-image-jobs-panel__copy {
|
||
flex: 1 1 auto;
|
||
min-width: 0;
|
||
}
|
||
|
||
.ai-image-jobs-panel__copy h4 {
|
||
margin: 0;
|
||
color: var(--rj-text, #111);
|
||
font-size: 0.92rem;
|
||
}
|
||
|
||
.ai-image-jobs-panel__copy p,
|
||
.ai-image-jobs-panel__meta {
|
||
margin: 3px 0 0;
|
||
color: var(--rj-text-muted, #737373);
|
||
font-size: 0.82rem;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.ai-image-jobs-panel__actions {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
flex: 0 1 48%;
|
||
gap: var(--rj-space-2-5);
|
||
min-width: 0;
|
||
}
|
||
|
||
.ai-image-jobs-panel__meta {
|
||
display: block;
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
max-height: 5.4em;
|
||
overflow: hidden;
|
||
overflow-wrap: anywhere;
|
||
white-space: normal;
|
||
}
|
||
|
||
.ai-image-jobs-panel__actions .btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
flex: 0 0 auto;
|
||
gap: 7px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.ai-image-jobs-panel {
|
||
align-items: stretch;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.ai-image-jobs-panel__actions {
|
||
justify-content: space-between;
|
||
flex-basis: auto;
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.dashboard-section-actions--stacked {
|
||
align-items: flex-end;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.dashboard-range-tabs {
|
||
display: inline-flex;
|
||
gap: var(--rj-space-1);
|
||
border: 1px solid var(--rj-border, #e5e5e5);
|
||
border-radius: 999px;
|
||
padding: 3px;
|
||
background: var(--rj-bg, #f8fafc);
|
||
}
|
||
|
||
.dashboard-range-tab {
|
||
min-height: 28px;
|
||
border: 0;
|
||
border-radius: 999px;
|
||
background: transparent;
|
||
color: var(--rj-text-muted, #737373);
|
||
cursor: pointer;
|
||
padding: var(--rj-space-1) var(--rj-space-2-5);
|
||
font: inherit;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.dashboard-range-tab.active {
|
||
background: var(--rj-primary, #3858e9);
|
||
color: var(--rj-text-on-primary, #fff);
|
||
}
|
||
|
||
.dashboard-content-pills {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-end;
|
||
gap: var(--rj-space-2);
|
||
}
|
||
|
||
.dashboard-content-pills span {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-1-5);
|
||
min-height: 30px;
|
||
border: 1px solid var(--rj-border, #e5e5e5);
|
||
border-radius: 999px;
|
||
padding: var(--rj-space-1) var(--rj-space-2-5);
|
||
color: var(--rj-text-muted, #737373);
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.dashboard-content-pills strong {
|
||
color: var(--rj-text, #111);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.dashboard-stat-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
|
||
gap: var(--rj-space-2-5);
|
||
}
|
||
|
||
.dashboard-stat-grid--analytics {
|
||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||
}
|
||
|
||
.dashboard-stat-card,
|
||
.dashboard-panel {
|
||
border: 1px solid var(--rj-border, #e5e5e5);
|
||
border-radius: var(--rj-radius-md);
|
||
background: var(--rj-surface-item, var(--rj-bg));
|
||
color: var(--rj-text, #111);
|
||
padding: var(--rj-space-3);
|
||
box-shadow: none;
|
||
}
|
||
|
||
.dashboard-stat-card {
|
||
display: flex;
|
||
min-height: 74px;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.dashboard-stat-card span {
|
||
display: block;
|
||
color: var(--rj-text-muted, #737373);
|
||
font-size: 0.78rem;
|
||
line-height: 1.25;
|
||
}
|
||
|
||
.dashboard-stat-card strong {
|
||
display: block;
|
||
margin-top: auto;
|
||
color: var(--rj-text, #111);
|
||
font-size: 1.45rem;
|
||
line-height: 1;
|
||
}
|
||
|
||
.dashboard-home-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
gap: var(--rj-space-2-5);
|
||
}
|
||
|
||
.dashboard-home-grid--analytics,
|
||
.dashboard-home-grid--details {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
|
||
.dashboard-home-grid--analytics .dashboard-panel,
|
||
.dashboard-home-grid--details .dashboard-panel {
|
||
grid-column: auto;
|
||
}
|
||
|
||
.dashboard-home-grid .dashboard-panel:nth-child(1),
|
||
.dashboard-home-grid .dashboard-panel:nth-child(2),
|
||
.dashboard-home-grid .dashboard-panel:nth-child(5) {
|
||
grid-column: span 2;
|
||
}
|
||
|
||
.dashboard-home-grid--analytics .dashboard-panel:nth-child(1),
|
||
.dashboard-home-grid--analytics .dashboard-panel:nth-child(2),
|
||
.dashboard-home-grid--details .dashboard-panel:nth-child(1),
|
||
.dashboard-home-grid--details .dashboard-panel:nth-child(2) {
|
||
grid-column: auto;
|
||
}
|
||
|
||
.dashboard-panel h3,
|
||
.dashboard-section-title {
|
||
margin: 0 0 var(--rj-space-2-5);
|
||
color: var(--rj-text, #111);
|
||
font-size: 0.92rem;
|
||
}
|
||
|
||
.dashboard-panel-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: var(--rj-space-3);
|
||
margin-bottom: var(--rj-space-2-5);
|
||
}
|
||
|
||
.dashboard-panel-header h3 {
|
||
margin: 0;
|
||
}
|
||
|
||
.dashboard-panel-header span {
|
||
color: var(--rj-text-muted, #737373);
|
||
font-size: 0.78rem;
|
||
}
|
||
|
||
.dashboard-section-title {
|
||
margin-top: var(--rj-space-1);
|
||
}
|
||
|
||
.dashboard-chart-panel {
|
||
padding-bottom: var(--rj-space-2-5);
|
||
}
|
||
|
||
.dashboard-chart {
|
||
min-height: 220px;
|
||
}
|
||
|
||
.dashboard-traffic-svg {
|
||
display: block;
|
||
width: 100%;
|
||
height: auto;
|
||
min-height: 220px;
|
||
overflow: visible;
|
||
}
|
||
|
||
.dashboard-chart-grid line {
|
||
stroke: var(--rj-border, #e5e5e5);
|
||
stroke-width: 1;
|
||
opacity: 0.85;
|
||
}
|
||
|
||
.dashboard-chart-grid text,
|
||
.dashboard-chart-xlabels text {
|
||
fill: var(--rj-text-muted, #737373);
|
||
font-size: 0.6875rem;
|
||
}
|
||
|
||
.dashboard-chart-area {
|
||
fill: color-mix(in srgb, var(--rj-primary, #3858e9) 20%, transparent);
|
||
}
|
||
|
||
.dashboard-chart-line {
|
||
fill: none;
|
||
stroke: var(--rj-primary, #3858e9);
|
||
stroke-linecap: round;
|
||
stroke-linejoin: round;
|
||
stroke-width: 3;
|
||
}
|
||
|
||
.dashboard-chart-points circle {
|
||
fill: var(--rj-bg-elevated, #fff);
|
||
stroke: var(--rj-primary, #3858e9);
|
||
stroke-width: 2;
|
||
}
|
||
|
||
.dashboard-hour-panel {
|
||
padding-bottom: var(--rj-space-3);
|
||
}
|
||
|
||
.dashboard-hour-chart {
|
||
display: grid;
|
||
grid-template-columns: repeat(24, minmax(0, 1fr));
|
||
align-items: end;
|
||
gap: 5px;
|
||
min-height: 150px;
|
||
}
|
||
|
||
.dashboard-hour-bar {
|
||
display: grid;
|
||
min-width: 0;
|
||
gap: 5px;
|
||
}
|
||
|
||
.dashboard-hour-bar__track {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: end;
|
||
height: 118px;
|
||
border-radius: var(--rj-radius-md);
|
||
background: var(--rj-bg, #f8fafc);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.dashboard-hour-bar__fill {
|
||
display: block;
|
||
width: 100%;
|
||
min-height: 3px;
|
||
border-radius: var(--rj-radius-md) var(--rj-radius-md) 0 0;
|
||
background: linear-gradient(180deg, var(--rj-primary, #3858e9), color-mix(in srgb, var(--rj-primary, #3858e9) 52%, transparent));
|
||
}
|
||
|
||
.dashboard-hour-bar__label {
|
||
min-height: 16px;
|
||
color: var(--rj-text-muted, #737373);
|
||
font-size: 0.68rem;
|
||
line-height: 1;
|
||
text-align: center;
|
||
}
|
||
|
||
.dashboard-top-pages {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--rj-space-1-5);
|
||
}
|
||
|
||
.dashboard-top-page {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: var(--rj-space-3);
|
||
border-bottom: 1px solid var(--rj-border, #e5e5e5);
|
||
padding-bottom: var(--rj-space-1-5);
|
||
color: var(--rj-text-secondary, #525252);
|
||
}
|
||
|
||
.dashboard-top-page > span {
|
||
min-width: 0;
|
||
}
|
||
|
||
.dashboard-top-page > span > strong {
|
||
display: block;
|
||
font-weight: 600;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.dashboard-top-page small {
|
||
display: block;
|
||
margin-top: 3px;
|
||
color: var(--rj-text-muted, #737373);
|
||
font-size: 0.78rem;
|
||
}
|
||
|
||
.dashboard-top-page:last-child {
|
||
border-bottom: 0;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.dashboard-breakdown-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: var(--rj-space-3);
|
||
border-bottom: 1px solid var(--rj-border, #e5e5e5);
|
||
padding-bottom: var(--rj-space-1-5);
|
||
color: var(--rj-text-secondary, #525252);
|
||
}
|
||
|
||
.dashboard-breakdown-row + .dashboard-breakdown-row {
|
||
margin-top: var(--rj-space-1-5);
|
||
}
|
||
|
||
.dashboard-breakdown-row:last-child {
|
||
border-bottom: 0;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.dashboard-breakdown-row span {
|
||
min-width: 0;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.dashboard-split-lists {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: var(--rj-space-3-5);
|
||
}
|
||
|
||
.dashboard-status-text,
|
||
.dashboard-empty {
|
||
margin: 0;
|
||
color: var(--rj-text-muted, #737373);
|
||
}
|
||
|
||
.dashboard-quick-actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--rj-space-2);
|
||
margin-top: var(--rj-space-3);
|
||
}
|
||
|
||
.dashboard-details {
|
||
border-top: 1px solid var(--rj-border, #e5e5e5);
|
||
padding-top: var(--rj-space-2-5);
|
||
}
|
||
|
||
.dashboard-details summary {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
min-height: 30px;
|
||
border: 1px solid var(--rj-border, #e5e5e5);
|
||
border-radius: 999px;
|
||
padding: var(--rj-space-1) var(--rj-space-2-5);
|
||
color: var(--rj-text-muted, #737373);
|
||
cursor: pointer;
|
||
font-size: 0.82rem;
|
||
user-select: none;
|
||
}
|
||
|
||
.dashboard-details summary:hover {
|
||
border-color: var(--rj-primary, #3858e9);
|
||
color: var(--rj-text, #111);
|
||
}
|
||
|
||
.dashboard-details[open] summary {
|
||
margin-bottom: var(--rj-space-2-5);
|
||
}
|
||
|
||
.ai-grid {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||
gap: var(--rj-space-4);
|
||
align-items: stretch;
|
||
min-width: 0;
|
||
}
|
||
|
||
.ai-card--tools {
|
||
grid-column: 1 / -1;
|
||
grid-row: 1;
|
||
}
|
||
|
||
.ai-card--assistant {
|
||
grid-column: 1 / -1;
|
||
grid-row: 2;
|
||
}
|
||
|
||
.ai-card {
|
||
min-width: 0;
|
||
border: 1px solid var(--rj-border, #e5e5e5);
|
||
border-radius: var(--rj-radius-md);
|
||
background: var(--rj-surface-item, var(--rj-bg));
|
||
color: var(--rj-text, #111);
|
||
padding: var(--rj-space-4);
|
||
box-shadow: none;
|
||
}
|
||
|
||
.ai-card--assistant,
|
||
.ai-card--tools {
|
||
display: flex;
|
||
min-height: 0;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.ai-card h3 {
|
||
margin: 0 0 var(--rj-space-2-5);
|
||
color: var(--rj-text, #111);
|
||
font-size: 0.92rem;
|
||
}
|
||
|
||
.ai-tool-tabs {
|
||
display: inline-flex;
|
||
align-self: flex-start;
|
||
gap: var(--rj-space-1);
|
||
margin-bottom: var(--rj-space-3);
|
||
border: 1px solid var(--rj-border, #e5e5e5);
|
||
border-radius: 999px;
|
||
padding: 3px;
|
||
background: var(--rj-bg, #f8fafc);
|
||
}
|
||
|
||
.ai-tool-tab {
|
||
min-height: 30px;
|
||
border: 0;
|
||
border-radius: 999px;
|
||
background: transparent;
|
||
color: var(--rj-text-muted, #737373);
|
||
cursor: pointer;
|
||
padding: var(--rj-space-1) var(--rj-space-3);
|
||
font: inherit;
|
||
font-size: 0.84rem;
|
||
}
|
||
|
||
.ai-tool-tab.active {
|
||
background: var(--rj-primary, #3858e9);
|
||
color: var(--rj-text-on-primary, #fff);
|
||
}
|
||
|
||
.ai-tool-panel {
|
||
display: flex;
|
||
flex: 1 1 auto;
|
||
min-height: 0;
|
||
flex-direction: column;
|
||
gap: var(--rj-space-3);
|
||
}
|
||
|
||
#aiImageForm {
|
||
display: grid;
|
||
grid-template-columns: minmax(320px, 1.2fr) minmax(320px, 1fr);
|
||
gap: var(--rj-space-1-5) 18px;
|
||
align-items: start;
|
||
}
|
||
|
||
.ai-image-column {
|
||
display: flex;
|
||
min-width: 0;
|
||
flex-direction: column;
|
||
gap: var(--rj-space-1-5);
|
||
}
|
||
|
||
#aiImageForm .form-group {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
#aiAuditRun {
|
||
align-self: flex-start;
|
||
width: auto;
|
||
}
|
||
|
||
.ai-image-options-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: var(--rj-space-2) var(--rj-space-3);
|
||
align-items: end;
|
||
}
|
||
|
||
.ai-image-model-row {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr);
|
||
gap: var(--rj-space-3);
|
||
}
|
||
|
||
.ai-image-filename-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-2);
|
||
}
|
||
|
||
.ai-image-filename-row input {
|
||
flex: 1 1 auto;
|
||
min-width: 0;
|
||
}
|
||
|
||
.ai-image-filename-row button {
|
||
flex: 0 0 auto;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.ai-image-options-grid .form-group {
|
||
min-width: 0;
|
||
}
|
||
|
||
.ai-image-options-grid label {
|
||
min-height: 2.45em;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.ai-image-options-grid select,
|
||
.ai-image-options-grid input {
|
||
width: 100%;
|
||
height: 38px;
|
||
min-height: 38px;
|
||
min-width: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.ai-image-command-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: var(--rj-space-3);
|
||
flex-wrap: wrap;
|
||
padding: 0;
|
||
}
|
||
|
||
.ai-reference-control {
|
||
display: flex;
|
||
align-items: center;
|
||
min-width: 0;
|
||
gap: var(--rj-space-2);
|
||
flex-wrap: wrap;
|
||
flex: 1 1 280px;
|
||
}
|
||
|
||
.ai-reference-name {
|
||
max-width: 220px;
|
||
min-height: 28px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
color: var(--rj-text-muted, #737373);
|
||
font-size: 0.78rem;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.ai-reference-clear {
|
||
min-height: 28px;
|
||
padding: 3px var(--rj-space-2);
|
||
}
|
||
|
||
.ai-reference-clear[hidden] {
|
||
display: none !important;
|
||
}
|
||
|
||
.ai-reference-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--rj-space-1-5);
|
||
margin-top: -4px;
|
||
}
|
||
|
||
.ai-reference-list[hidden] {
|
||
display: none !important;
|
||
}
|
||
|
||
.ai-reference-chip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-1-5);
|
||
max-width: 190px;
|
||
min-height: 28px;
|
||
padding: 3px 5px 3px var(--rj-space-1);
|
||
border: 1px solid var(--rj-border, #e5e5e5);
|
||
border-radius: var(--rj-radius-md);
|
||
background: var(--rj-bg-sunken, #f5f5f5);
|
||
color: var(--rj-text, #111);
|
||
font-size: 0.76rem;
|
||
}
|
||
|
||
.ai-reference-chip__thumb {
|
||
width: 22px;
|
||
height: 22px;
|
||
flex: 0 0 auto;
|
||
border-radius: var(--rj-radius-sm);
|
||
background-position: center;
|
||
background-size: cover;
|
||
border: 1px solid var(--rj-border, #e5e5e5);
|
||
}
|
||
|
||
.ai-reference-chip__name {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.ai-reference-chip__remove {
|
||
width: 18px;
|
||
height: 18px;
|
||
flex: 0 0 auto;
|
||
border: 0;
|
||
border-radius: var(--rj-radius-sm);
|
||
background: transparent;
|
||
color: var(--rj-text-muted, #737373);
|
||
cursor: pointer;
|
||
line-height: 1;
|
||
}
|
||
|
||
.ai-reference-chip__remove:hover {
|
||
background: var(--rj-bg-hover, #eee);
|
||
color: var(--rj-text, #111);
|
||
}
|
||
|
||
.ai-ratio-select {
|
||
position: relative;
|
||
}
|
||
|
||
.ai-size-native {
|
||
display: none;
|
||
}
|
||
|
||
.ai-size-trigger {
|
||
position: relative;
|
||
display: grid;
|
||
grid-template-columns: 28px minmax(0, 1fr);
|
||
align-items: center;
|
||
column-gap: var(--rj-space-2);
|
||
width: 100%;
|
||
height: 40px;
|
||
min-height: 40px;
|
||
box-sizing: border-box;
|
||
border: 1px solid var(--rj-border, #e5e5e5);
|
||
border-radius: var(--rj-radius-md, 8px);
|
||
background: var(--rj-bg-elevated, #fff);
|
||
color: var(--rj-text, #111);
|
||
cursor: pointer;
|
||
font: inherit;
|
||
font-size: 0.9375rem;
|
||
line-height: 1.3;
|
||
padding: 0 34px 0 var(--rj-space-3-5);
|
||
text-align: left;
|
||
}
|
||
|
||
.ai-size-trigger:focus,
|
||
.ai-size-trigger[aria-expanded="true"] {
|
||
outline: none;
|
||
border-color: var(--rj-primary);
|
||
box-shadow: 0 0 0 3px var(--rj-primary-muted);
|
||
}
|
||
|
||
.ai-size-trigger-label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-1-5);
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.ai-size-trigger-label span {
|
||
min-width: 0;
|
||
}
|
||
|
||
.ai-size-trigger-label span:first-child {
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.ai-size-trigger-label span:last-child {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.ai-size-trigger::after {
|
||
content: "";
|
||
position: absolute;
|
||
right: 12px;
|
||
top: 50%;
|
||
width: 7px;
|
||
height: 7px;
|
||
border-right: 1.5px solid currentColor;
|
||
border-bottom: 1.5px solid currentColor;
|
||
opacity: 0.7;
|
||
transform: translateY(-65%) rotate(45deg);
|
||
}
|
||
|
||
.ai-size-trigger:disabled {
|
||
cursor: not-allowed;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.ai-size-menu {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: calc(100% + 4px);
|
||
z-index: 30;
|
||
max-height: 310px;
|
||
overflow: auto;
|
||
border: 1px solid var(--rj-border, #e5e5e5);
|
||
border-radius: var(--rj-radius-md, 10px);
|
||
background: var(--rj-bg-elevated, #fff);
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
|
||
padding: var(--rj-space-1);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1px;
|
||
}
|
||
|
||
.ai-size-menu[hidden] {
|
||
display: none;
|
||
}
|
||
|
||
.ai-size-group,
|
||
.ai-size-option {
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.ai-size-group {
|
||
padding: var(--rj-space-2) var(--rj-space-2-5) var(--rj-space-0-5);
|
||
color: var(--rj-text-muted, #737373);
|
||
font-size: 0.7rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.05em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.ai-size-option {
|
||
display: grid;
|
||
grid-template-columns: 20px 42px minmax(0, 1fr);
|
||
align-items: center;
|
||
width: 100%;
|
||
min-height: 34px;
|
||
border: 0;
|
||
border-radius: var(--rj-radius-sm, 6px);
|
||
background: transparent;
|
||
color: var(--rj-text, #111);
|
||
cursor: pointer;
|
||
gap: var(--rj-space-1-5);
|
||
padding: 7px var(--rj-space-2-5);
|
||
text-align: left;
|
||
font: inherit;
|
||
font-size: 0.875rem;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.ai-size-option-ratio {
|
||
font-weight: 650;
|
||
}
|
||
|
||
.ai-size-option-name {
|
||
min-width: 0;
|
||
text-align: right;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.ai-size-option:hover,
|
||
.ai-size-option[aria-selected="true"] {
|
||
background: var(--rj-bg-hover, #f3f4f6);
|
||
}
|
||
|
||
.ai-size-option-icon {
|
||
--ratio-w: 1;
|
||
--ratio-h: 1;
|
||
justify-self: center;
|
||
width: calc(10px * var(--ratio-w));
|
||
height: calc(10px * var(--ratio-h));
|
||
max-width: 24px;
|
||
max-height: 24px;
|
||
min-width: 8px;
|
||
min-height: 8px;
|
||
border: 1.5px solid var(--rj-primary, #3858e9);
|
||
border-radius: 1px;
|
||
}
|
||
|
||
.ai-size-option-icon[data-ratio="auto"] {
|
||
position: relative;
|
||
width: 18px;
|
||
height: 18px;
|
||
max-width: 18px;
|
||
max-height: 18px;
|
||
min-width: 18px;
|
||
min-height: 18px;
|
||
border: 0;
|
||
}
|
||
|
||
.ai-size-option-icon[data-ratio="auto"]::after,
|
||
.ai-size-option-icon[data-ratio="auto"]::before,
|
||
.ai-ratio-icon--auto::after,
|
||
.ai-ratio-icon--auto::before {
|
||
content: "";
|
||
position: absolute;
|
||
border: 1.5px solid var(--rj-primary, #3858e9);
|
||
border-radius: 1px;
|
||
background: transparent;
|
||
}
|
||
|
||
.ai-size-option-icon[data-ratio="auto"]::before {
|
||
width: 16px;
|
||
height: 9px;
|
||
left: 0;
|
||
top: 7px;
|
||
}
|
||
|
||
.ai-size-option-icon[data-ratio="auto"]::after {
|
||
width: 9px;
|
||
height: 16px;
|
||
left: 0;
|
||
top: 0;
|
||
}
|
||
|
||
.ai-ratio-icon {
|
||
--ratio-w: 1;
|
||
--ratio-h: 1;
|
||
position: relative;
|
||
justify-self: center;
|
||
z-index: 1;
|
||
width: calc(18px * var(--ratio-w));
|
||
height: calc(18px * var(--ratio-h));
|
||
max-width: 25px;
|
||
max-height: 25px;
|
||
min-width: 12px;
|
||
min-height: 12px;
|
||
border: 1.5px solid var(--rj-primary, #3858e9);
|
||
border-radius: var(--rj-radius-sm);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.ai-image-size-note {
|
||
margin: var(--rj-space-0-5) 0 var(--rj-space-0-5);
|
||
color: var(--rj-text-muted, #737373);
|
||
font-size: 0.78rem;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.ai-ratio-icon--auto {
|
||
width: 25px;
|
||
height: 22px;
|
||
border: 0;
|
||
max-width: 25px;
|
||
max-height: 22px;
|
||
min-width: 25px;
|
||
min-height: 22px;
|
||
}
|
||
|
||
.ai-ratio-icon--auto::before {
|
||
width: 16px;
|
||
height: 9px;
|
||
left: 0;
|
||
top: 7px;
|
||
}
|
||
|
||
.ai-ratio-icon--auto::after {
|
||
width: 9px;
|
||
height: 16px;
|
||
left: 0;
|
||
top: 0;
|
||
}
|
||
|
||
.ai-form-actions {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.ai-image-generate-row {
|
||
align-items: flex-end;
|
||
gap: var(--rj-space-3);
|
||
}
|
||
|
||
.ai-image-count-control {
|
||
display: grid;
|
||
gap: var(--rj-space-1-5);
|
||
margin-right: auto;
|
||
}
|
||
|
||
.ai-image-count-control label {
|
||
color: var(--rj-text, #111);
|
||
font-size: 0.78rem;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.ai-count-stepper {
|
||
display: grid;
|
||
grid-template-columns: 56px 24px;
|
||
width: 80px;
|
||
border: 1px solid var(--rj-border, #e5e5e5);
|
||
border-radius: var(--rj-radius-sm, 6px);
|
||
overflow: hidden;
|
||
background: var(--rj-bg-input, var(--rj-bg-elevated, #fff));
|
||
}
|
||
|
||
.ai-count-stepper input {
|
||
width: 100%;
|
||
border: 0;
|
||
border-radius: 0;
|
||
background: transparent;
|
||
text-align: center;
|
||
-moz-appearance: textfield;
|
||
}
|
||
|
||
.ai-count-stepper input::-webkit-outer-spin-button,
|
||
.ai-count-stepper input::-webkit-inner-spin-button {
|
||
margin: 0;
|
||
-webkit-appearance: none;
|
||
}
|
||
|
||
.ai-count-stepper-buttons {
|
||
display: grid;
|
||
border-left: 1px solid var(--rj-border, #e5e5e5);
|
||
}
|
||
|
||
.ai-count-step {
|
||
min-height: 18px;
|
||
border: 0;
|
||
border-bottom: 1px solid var(--rj-border, #e5e5e5);
|
||
background: var(--rj-bg-elevated, #fff);
|
||
color: var(--rj-text, #111);
|
||
cursor: pointer;
|
||
font: inherit;
|
||
font-size: 0.72rem;
|
||
line-height: 1;
|
||
padding: 0;
|
||
}
|
||
|
||
.ai-count-step:last-child {
|
||
border-bottom: 0;
|
||
}
|
||
|
||
.ai-count-step:disabled {
|
||
cursor: not-allowed;
|
||
opacity: 0.45;
|
||
}
|
||
|
||
.ai-form-actions--between {
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: var(--rj-space-2-5);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.ai-form-actions .btn {
|
||
max-width: 100%;
|
||
white-space: normal;
|
||
}
|
||
|
||
.ai-image-gallery {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||
gap: var(--rj-space-3);
|
||
width: 100%;
|
||
}
|
||
|
||
.ai-image-figure {
|
||
margin: 0;
|
||
min-width: 0;
|
||
}
|
||
|
||
.ai-image-preview-btn {
|
||
display: grid;
|
||
place-items: center;
|
||
width: 100%;
|
||
aspect-ratio: 16 / 10;
|
||
overflow: hidden;
|
||
border: 0;
|
||
border-radius: var(--rj-radius-lg);
|
||
background: var(--rj-bg-sunken, #f5f5f5);
|
||
padding: 0;
|
||
cursor: zoom-in;
|
||
}
|
||
|
||
.ai-image-figure img {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
border-radius: var(--rj-radius-lg);
|
||
}
|
||
|
||
.ai-image-figure figcaption {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
gap: var(--rj-space-2);
|
||
margin-top: var(--rj-space-2);
|
||
}
|
||
|
||
.ai-image-history {
|
||
border-top: 1px solid var(--rj-border, #e5e5e5);
|
||
margin-top: var(--rj-space-4);
|
||
padding-top: var(--rj-space-4);
|
||
}
|
||
|
||
.ai-image-history__header {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: var(--rj-space-3);
|
||
margin-bottom: var(--rj-space-3);
|
||
}
|
||
|
||
.ai-image-history__header h4 {
|
||
margin: 0;
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.ai-image-history__header p,
|
||
.ai-image-history-empty,
|
||
.ai-image-history-meta {
|
||
color: var(--rj-text-muted, #666);
|
||
font-size: 0.82rem;
|
||
margin: var(--rj-space-1) 0 0;
|
||
}
|
||
|
||
.ai-image-history-list {
|
||
display: grid;
|
||
gap: var(--rj-space-2-5);
|
||
}
|
||
|
||
.ai-image-history-card {
|
||
display: grid;
|
||
grid-template-columns: 88px minmax(0, 1fr);
|
||
gap: var(--rj-space-3);
|
||
border: 1px solid var(--rj-border, #e5e5e5);
|
||
border-radius: var(--rj-radius-lg);
|
||
background: var(--rj-bg-elevated, #fff);
|
||
padding: var(--rj-space-2-5);
|
||
}
|
||
|
||
.ai-image-history-card--multi {
|
||
grid-template-columns: minmax(0, 1fr);
|
||
}
|
||
|
||
.ai-image-history-card--error {
|
||
border-color: color-mix(in srgb, #ef4444 30%, var(--rj-border, #e5e5e5));
|
||
}
|
||
|
||
.ai-image-history-card__thumbs {
|
||
display: flex;
|
||
gap: var(--rj-space-1-5);
|
||
overflow-x: auto;
|
||
scrollbar-width: thin;
|
||
}
|
||
|
||
.ai-image-history-card__thumb {
|
||
display: block;
|
||
width: 88px;
|
||
height: 88px;
|
||
flex: 0 0 88px;
|
||
overflow: hidden;
|
||
border: 0;
|
||
border-radius: var(--rj-radius-md);
|
||
background: var(--rj-bg-soft, #f5f5f5);
|
||
color: var(--rj-text-muted, #666);
|
||
cursor: zoom-in;
|
||
padding: 0;
|
||
}
|
||
|
||
.ai-image-history-card__thumb img {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.ai-image-history-card__thumb--empty {
|
||
display: grid;
|
||
place-items: center;
|
||
cursor: default;
|
||
font-size: 0.75rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.ai-image-history-card__body {
|
||
min-width: 0;
|
||
}
|
||
|
||
.ai-image-history-card__top,
|
||
.ai-image-history-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: var(--rj-space-2);
|
||
}
|
||
|
||
.ai-image-history-card__top time {
|
||
color: var(--rj-text-muted, #666);
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
.ai-image-history-status {
|
||
border: 1px solid var(--rj-border, #e5e5e5);
|
||
border-radius: 999px;
|
||
color: var(--rj-text-muted, #666);
|
||
font-size: 0.72rem;
|
||
padding: var(--rj-space-0-5) 7px;
|
||
}
|
||
|
||
.ai-image-history-prompt {
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
line-clamp: 2;
|
||
margin: var(--rj-space-2) 0 0;
|
||
overflow: hidden;
|
||
color: var(--rj-text, #111);
|
||
font-size: 0.84rem;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.ai-image-history-actions {
|
||
justify-content: flex-start;
|
||
margin-top: var(--rj-space-2-5);
|
||
}
|
||
|
||
.ai-image-history-more {
|
||
margin-top: var(--rj-space-3);
|
||
}
|
||
|
||
.ai-image-model-note,
|
||
.ai-field-hint {
|
||
color: var(--rj-text-muted, #666);
|
||
font-size: 0.82rem;
|
||
margin: var(--rj-space-2) 0 0;
|
||
}
|
||
|
||
.ai-field-hint {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: var(--rj-space-2);
|
||
}
|
||
|
||
.ai-tool-panel[hidden] {
|
||
display: none;
|
||
}
|
||
|
||
.ai-audit-results {
|
||
margin-top: var(--rj-space-3-5);
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.ai-audit-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.ai-audit-table th,
|
||
.ai-audit-table td {
|
||
text-align: left;
|
||
padding: var(--rj-space-2) var(--rj-space-2-5);
|
||
border-bottom: 1px solid var(--rj-border, #e5e5e5);
|
||
vertical-align: top;
|
||
}
|
||
|
||
.ai-audit-badge {
|
||
display: inline-block;
|
||
padding: var(--rj-space-0-5) var(--rj-space-2);
|
||
border-radius: 999px;
|
||
font-size: 0.8rem;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.ai-audit-badge--ok {
|
||
background: var(--rj-success-bg, #e7f6ec);
|
||
color: var(--rj-success-text, #1b7a3d);
|
||
}
|
||
|
||
.ai-audit-badge--warn {
|
||
background: var(--rj-warning-bg, #fdf3e1);
|
||
color: var(--rj-warning-text, #9a6b00);
|
||
}
|
||
|
||
/* Custom combobox: replaces native datalist popups so suggestion lists
|
||
render UI-conform and identical in all browsers and embedded webviews. */
|
||
.rj-combobox {
|
||
position: relative;
|
||
display: block;
|
||
}
|
||
|
||
.rj-combobox input {
|
||
width: 100%;
|
||
min-width: 0;
|
||
padding-right: 58px;
|
||
}
|
||
|
||
.rj-combobox .rj-combobox__clear {
|
||
position: absolute;
|
||
right: 32px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.rj-combobox__toggle {
|
||
position: absolute;
|
||
right: 6px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 24px;
|
||
height: 24px;
|
||
padding: 0;
|
||
border: none;
|
||
border-radius: var(--rj-radius-sm, 6px);
|
||
background: transparent;
|
||
color: var(--rj-text-muted, #888);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.rj-combobox__toggle:hover {
|
||
background: var(--rj-bg-hover, rgba(127, 127, 127, 0.12));
|
||
color: var(--rj-text, inherit);
|
||
}
|
||
|
||
.rj-combobox__toggle svg {
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
|
||
.rj-combobox__list {
|
||
position: absolute;
|
||
z-index: var(--rj-z-dropdown, 1000);
|
||
top: calc(100% + 4px);
|
||
left: 0;
|
||
right: 0;
|
||
max-height: 260px;
|
||
overflow-y: auto;
|
||
background: var(--rj-bg-elevated, #fff);
|
||
border: 1px solid var(--rj-border, #e5e5e5);
|
||
border-radius: var(--rj-radius-md, 10px);
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
|
||
padding: var(--rj-space-1);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1px;
|
||
}
|
||
|
||
.rj-combobox__list[hidden] {
|
||
display: none;
|
||
}
|
||
|
||
.rj-combobox__option {
|
||
padding: 7px var(--rj-space-2-5);
|
||
border-radius: var(--rj-radius-sm, 6px);
|
||
font-size: 0.88rem;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
font-variant-numeric: tabular-nums;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.rj-combobox__option:hover,
|
||
.rj-combobox__option.is-active {
|
||
background: var(--rj-bg-hover, rgba(127, 127, 127, 0.12));
|
||
color: var(--rj-text, inherit);
|
||
}
|
||
|
||
.ai-usage-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
|
||
gap: var(--rj-space-3);
|
||
}
|
||
|
||
.ai-usage-stat {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--rj-space-0-5);
|
||
padding: var(--rj-space-3) var(--rj-space-3-5);
|
||
border: 1px solid var(--rj-border, #e5e5e5);
|
||
border-radius: var(--rj-radius-lg);
|
||
background: var(--rj-surface, rgba(127, 127, 127, 0.06));
|
||
}
|
||
|
||
.ai-usage-stat__value {
|
||
font-size: 1.3rem;
|
||
font-weight: 700;
|
||
line-height: 1.2;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.ai-usage-stat__label {
|
||
font-size: 0.78rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
opacity: 0.65;
|
||
}
|
||
|
||
.ai-usage-stat__sub {
|
||
font-size: 0.82rem;
|
||
opacity: 0.75;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.ai-usage-budget {
|
||
margin-top: var(--rj-space-3-5);
|
||
}
|
||
|
||
.ai-usage-budget__header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
gap: var(--rj-space-3);
|
||
font-size: 0.85rem;
|
||
margin-bottom: var(--rj-space-1-5);
|
||
}
|
||
|
||
.ai-usage-budget__label {
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
font-size: 0.78rem;
|
||
opacity: 0.65;
|
||
}
|
||
|
||
.ai-usage-budget__value {
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.ai-usage-budget__bar {
|
||
height: 8px;
|
||
border-radius: 999px;
|
||
background: var(--rj-border, rgba(127, 127, 127, 0.25));
|
||
overflow: hidden;
|
||
}
|
||
|
||
.ai-usage-budget__fill {
|
||
height: 100%;
|
||
border-radius: 999px;
|
||
background: var(--rj-success-text, #1b7a3d);
|
||
transition: width 0.4s ease;
|
||
}
|
||
|
||
.ai-usage-budget__fill--warn {
|
||
background: var(--rj-warning-text, #b8860b);
|
||
}
|
||
|
||
.ai-usage-budget__fill--over {
|
||
background: var(--rj-danger, #c0392b);
|
||
}
|
||
|
||
.ai-status-box {
|
||
border: 1px solid var(--rj-border, #e5e5e5);
|
||
border-radius: var(--rj-radius-lg);
|
||
margin-bottom: var(--rj-space-3-5);
|
||
padding: var(--rj-space-3) var(--rj-space-3-5);
|
||
font-size: 0.92rem;
|
||
}
|
||
|
||
.ai-status-box--ok {
|
||
border-color: color-mix(in srgb, #16a34a 35%, var(--rj-border, #e5e5e5));
|
||
background: color-mix(in srgb, #16a34a 8%, transparent);
|
||
color: var(--rj-text, #111);
|
||
}
|
||
|
||
.ai-status-box--warning {
|
||
border-color: color-mix(in srgb, #f59e0b 45%, var(--rj-border, #e5e5e5));
|
||
background: color-mix(in srgb, #f59e0b 10%, transparent);
|
||
color: var(--rj-text, #111);
|
||
}
|
||
|
||
.ai-settings-compact {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||
gap: var(--rj-space-3-5) 18px;
|
||
align-items: start;
|
||
}
|
||
|
||
.ai-settings-compact .form-group input,
|
||
.ai-settings-compact .form-group select {
|
||
width: 100%;
|
||
min-width: 0;
|
||
}
|
||
|
||
/* The toggle at the row start sits level with the controls beside it: the
|
||
neighbours stack label + control, so it starts one label height lower */
|
||
.ai-settings-compact .form-group > label:not(.toggle-label) {
|
||
display: block;
|
||
line-height: 1.45;
|
||
}
|
||
|
||
/* Height of a field label plus its gap: a toggle that shares a row with
|
||
labelled fields starts this far down to sit level with their controls */
|
||
.settings-panel,
|
||
.ai-settings-compact {
|
||
--rj-label-offset: calc(0.875rem * 1.45 + var(--rj-space-2));
|
||
}
|
||
|
||
[data-theme-preset="console"] .settings-panel,
|
||
[data-theme-preset="console"] .ai-settings-compact {
|
||
--rj-label-offset: calc(var(--rj-text-xs) * 1.45 + var(--rj-space-2));
|
||
}
|
||
|
||
.ai-enable-row {
|
||
align-self: start;
|
||
display: flex;
|
||
align-items: center;
|
||
min-height: var(--rj-control-h);
|
||
margin-top: var(--rj-label-offset);
|
||
}
|
||
|
||
.ai-local-toggle,
|
||
.ai-section-hint {
|
||
margin-top: var(--rj-space-3);
|
||
}
|
||
|
||
.form-group label.checkbox-label,
|
||
.checkbox-label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-2);
|
||
margin-top: var(--rj-space-2);
|
||
margin-bottom: 0;
|
||
color: var(--rj-text-muted, #737373);
|
||
font-size: 0.875rem;
|
||
line-height: 1.25;
|
||
width: max-content;
|
||
max-width: 100%; /* a long label wraps on a phone instead of widening the page */
|
||
}
|
||
|
||
.checkbox-label input[type="checkbox"] {
|
||
flex: 0 0 auto;
|
||
width: auto;
|
||
height: auto;
|
||
margin: 0;
|
||
}
|
||
|
||
.ai-form {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--rj-space-3);
|
||
}
|
||
|
||
.ai-form textarea:disabled,
|
||
.ai-form input:disabled,
|
||
.ai-form select:disabled,
|
||
.ai-form button:disabled {
|
||
cursor: not-allowed;
|
||
opacity: 0.55;
|
||
}
|
||
|
||
.ai-form textarea,
|
||
.ai-result {
|
||
width: 100%;
|
||
min-height: 96px;
|
||
border: 1px solid var(--rj-border, #e5e5e5);
|
||
border-radius: var(--rj-radius-md);
|
||
background: var(--rj-bg, #f8fafc);
|
||
color: var(--rj-text, #111);
|
||
padding: var(--rj-space-3);
|
||
resize: vertical;
|
||
}
|
||
|
||
.ai-form textarea::placeholder {
|
||
color: var(--rj-text-muted, #737373);
|
||
opacity: 0.85;
|
||
}
|
||
|
||
.ai-form textarea:focus,
|
||
.ai-form input:focus,
|
||
.ai-result:focus {
|
||
border-color: var(--rj-border-focus, var(--rj-primary, #3858e9));
|
||
outline: none;
|
||
}
|
||
|
||
.ai-card input,
|
||
.ai-card select {
|
||
width: 100%;
|
||
min-width: 0;
|
||
background: var(--rj-bg, #f8fafc);
|
||
color: var(--rj-text, #111);
|
||
border-color: var(--rj-border, #e5e5e5);
|
||
}
|
||
|
||
.ai-card:nth-child(1) .ai-form textarea {
|
||
min-height: 110px;
|
||
}
|
||
|
||
.ai-form-action {
|
||
align-self: end;
|
||
}
|
||
|
||
.ai-chat-log {
|
||
display: flex;
|
||
min-height: 260px;
|
||
max-height: 430px;
|
||
flex-direction: column;
|
||
gap: var(--rj-space-2-5);
|
||
overflow: auto;
|
||
margin-bottom: var(--rj-space-2-5);
|
||
padding: var(--rj-space-3);
|
||
border: 1px solid var(--rj-border, #e5e5e5);
|
||
border-radius: var(--rj-radius-lg);
|
||
background: var(--rj-bg, #f8fafc);
|
||
}
|
||
|
||
.ai-chat-message {
|
||
max-width: 86%;
|
||
padding: var(--rj-space-2-5) var(--rj-space-3);
|
||
border-radius: var(--rj-radius-lg);
|
||
white-space: pre-wrap;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.ai-chat-message strong {
|
||
font-weight: 700;
|
||
color: var(--rj-text, #111);
|
||
}
|
||
|
||
.ai-chat-message em {
|
||
color: var(--rj-text-secondary, #525252);
|
||
}
|
||
|
||
.ai-chat-message a {
|
||
color: var(--rj-primary, #3858e9);
|
||
text-decoration: underline;
|
||
text-underline-offset: 2px;
|
||
}
|
||
|
||
.ai-chat-message a:hover {
|
||
color: var(--rj-primary-hover, #1d4ed8);
|
||
}
|
||
|
||
.ai-chat-message--user {
|
||
align-self: flex-end;
|
||
background: var(--rj-primary-subtle, #dbeafe);
|
||
color: var(--rj-text, #111);
|
||
}
|
||
|
||
.ai-chat-message--assistant {
|
||
align-self: flex-start;
|
||
background: var(--rj-bg-elevated, #fff);
|
||
color: var(--rj-text, #111);
|
||
border: 1px solid var(--rj-border, #e5e5e5);
|
||
}
|
||
|
||
.ai-chat-message--error {
|
||
align-self: stretch;
|
||
background: var(--rj-danger-subtle, #fee2e2);
|
||
color: var(--rj-danger, #991b1b);
|
||
}
|
||
|
||
.ai-chat-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
gap: var(--rj-space-3);
|
||
}
|
||
|
||
.ai-chat-shortcut-hint {
|
||
flex: 1 1 auto;
|
||
color: var(--rj-text-muted, #737373);
|
||
font-size: 0.78rem;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.ai-chat-actions .btn {
|
||
flex: 0 0 auto;
|
||
min-width: 112px;
|
||
}
|
||
|
||
.ai-running-indicator {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-2);
|
||
color: var(--rj-text-muted, #737373);
|
||
font-size: 0.84rem;
|
||
}
|
||
|
||
.ai-running-indicator[hidden] {
|
||
display: none;
|
||
}
|
||
|
||
.ai-running-indicator::before {
|
||
content: "";
|
||
width: 1em;
|
||
height: 1em;
|
||
border: 2px solid color-mix(in srgb, var(--rj-primary, #3858e9) 25%, transparent);
|
||
border-top-color: var(--rj-primary, #3858e9);
|
||
border-radius: 50%;
|
||
animation: backup-spin 0.8s linear infinite;
|
||
}
|
||
|
||
/* Ring spinner for work in progress (image jobs, thinking bubble). Motion stops for prefers-reduced-motion. */
|
||
.rj-spinner {
|
||
display: inline-block;
|
||
flex: 0 0 auto;
|
||
width: 1.05em;
|
||
height: 1.05em;
|
||
border: 2px solid color-mix(in srgb, var(--rj-primary, #3858e9) 25%, transparent);
|
||
border-top-color: var(--rj-primary, #3858e9);
|
||
border-radius: 50%;
|
||
vertical-align: -0.15em;
|
||
animation: backup-spin 0.8s linear infinite;
|
||
}
|
||
|
||
.rj-spinner[hidden] {
|
||
display: none;
|
||
}
|
||
|
||
.ai-image-jobs-panel__copy p {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-2);
|
||
}
|
||
|
||
/* The assistant is working on an answer: a bubble in the chat with the ring and three dots. */
|
||
.ai-chat-message--thinking {
|
||
align-self: flex-start;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-2-5);
|
||
background: var(--rj-bg-elevated, #fff);
|
||
color: var(--rj-text-muted, #737373);
|
||
border: 1px solid var(--rj-border, #e5e5e5);
|
||
}
|
||
|
||
.ai-chat-message--thinking .rj-thinking-dots {
|
||
display: inline-flex;
|
||
gap: 3px;
|
||
}
|
||
|
||
.ai-chat-message--thinking .rj-thinking-dots i {
|
||
width: 5px;
|
||
height: 5px;
|
||
border-radius: 50%;
|
||
background: currentColor;
|
||
animation: aiPulse 1.1s ease-in-out infinite;
|
||
}
|
||
|
||
.ai-chat-message--thinking .rj-thinking-dots i:nth-child(2) { animation-delay: 0.18s; }
|
||
.ai-chat-message--thinking .rj-thinking-dots i:nth-child(3) { animation-delay: 0.36s; }
|
||
|
||
@keyframes aiPulse {
|
||
0%, 100% {
|
||
opacity: 0.35;
|
||
transform: scale(0.8);
|
||
}
|
||
50% {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
.ai-image-result {
|
||
display: grid;
|
||
min-height: 180px;
|
||
place-items: center;
|
||
margin-top: var(--rj-space-3);
|
||
border: 1px dashed var(--rj-border, #e5e5e5);
|
||
border-radius: var(--rj-radius-lg);
|
||
padding: var(--rj-space-3);
|
||
color: var(--rj-text-muted, #737373);
|
||
}
|
||
|
||
.ai-image-message {
|
||
display: flex;
|
||
width: 100%;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
gap: var(--rj-space-2);
|
||
border-radius: var(--rj-radius-lg);
|
||
padding: var(--rj-space-3) var(--rj-space-3-5);
|
||
line-height: 1.45;
|
||
text-align: left;
|
||
}
|
||
|
||
.ai-image-message strong {
|
||
color: var(--rj-text, #111);
|
||
font-size: 0.86rem;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.ai-image-message__prompt {
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 5;
|
||
line-clamp: 5;
|
||
overflow: hidden;
|
||
border: 1px solid var(--rj-border, #e5e5e5);
|
||
border-radius: var(--rj-radius-md);
|
||
background: color-mix(in srgb, var(--rj-bg-elevated, #fff) 70%, transparent);
|
||
color: var(--rj-text-muted, #737373);
|
||
font-size: 0.82rem;
|
||
line-height: 1.45;
|
||
padding: 9px var(--rj-space-2-5);
|
||
}
|
||
|
||
.ai-image-message--error {
|
||
border: 1px solid color-mix(in srgb, var(--rj-danger, #dc2626) 42%, transparent);
|
||
background: color-mix(in srgb, var(--rj-danger, #dc2626) 11%, var(--rj-bg-elevated, #fff));
|
||
color: var(--rj-text, #111);
|
||
}
|
||
|
||
.ai-image-message--error strong {
|
||
color: var(--rj-danger, #dc2626);
|
||
}
|
||
|
||
.ai-image-result img {
|
||
display: block;
|
||
max-width: 100%;
|
||
max-height: 420px;
|
||
border-radius: var(--rj-radius-md);
|
||
}
|
||
|
||
|
||
/* ============================================================
|
||
ADMIN UI SYSTEM MAPPING
|
||
Maps older admin-specific classes to the shared Panel / Group / Item
|
||
hierarchy without changing markup.
|
||
============================================================ */
|
||
|
||
.page-list-table-wrap,
|
||
.editor-container,
|
||
.backup-container,
|
||
.settings-panel,
|
||
.dashboard-section {
|
||
background: var(--rj-surface-panel, var(--rj-bg-elevated));
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-lg);
|
||
box-shadow: none;
|
||
}
|
||
|
||
.settings-tabs,
|
||
.settings-section,
|
||
.ce-settings-card,
|
||
.forms-admin-list,
|
||
.backup-site-card,
|
||
.scheduled-form,
|
||
.scheduled-form__fieldset,
|
||
.backup-remote {
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-lg);
|
||
box-shadow: none;
|
||
}
|
||
|
||
.settings-section {
|
||
background: transparent;
|
||
}
|
||
|
||
.ce-settings-card,
|
||
.forms-admin-list,
|
||
.backup-site-card,
|
||
.scheduled-form,
|
||
.backup-remote {
|
||
background: var(--rj-surface-group, color-mix(in srgb, var(--rj-bg-elevated) 88%, var(--rj-bg)));
|
||
}
|
||
|
||
.dashboard-panel,
|
||
.dashboard-stat-card,
|
||
.ai-card,
|
||
.icon-manager-card,
|
||
.forms-fields-table tr.forms-field-row,
|
||
.restore-mode-card,
|
||
.scheduled-status,
|
||
.backup-remote-target,
|
||
.backup-remote-file {
|
||
background: var(--rj-surface-item, var(--rj-bg));
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-md);
|
||
box-shadow: none;
|
||
}
|
||
|
||
.topbar-select,
|
||
.modal-input,
|
||
.ce-section-nav__select,
|
||
.access-select,
|
||
.forms-fields-table select,
|
||
.backup-remote__add select,
|
||
.ai-card select {
|
||
padding-right: var(--rj-space-10);
|
||
background-repeat: no-repeat;
|
||
background-position: right 12px center;
|
||
background-size: 12px 8px;
|
||
}
|
||
|
||
.icon-manager-action-btn,
|
||
.btn-icon {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: var(--rj-radius-md);
|
||
}
|
||
|
||
.icon-manager-action-btn svg,
|
||
.btn-icon svg {
|
||
width: 16px;
|
||
height: 16px;
|
||
stroke-width: 1.5;
|
||
}
|
||
|
||
@media (max-width: 1120px) {
|
||
.dashboard-home-grid,
|
||
.dashboard-stat-grid--analytics {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
|
||
.dashboard-status-strip {
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
}
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
.dashboard-section-header,
|
||
.dashboard-content-pills {
|
||
align-items: flex-start;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.dashboard-section-header {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.dashboard-status-strip {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
|
||
.page-list-header--mails {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.page-list-header--mails .page-list-header-actions {
|
||
justify-content: flex-start;
|
||
padding-top: 0;
|
||
}
|
||
|
||
.forms-admin-layout {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.mail-form-filter {
|
||
width: 100%;
|
||
}
|
||
|
||
.dashboard-stat-grid,
|
||
.dashboard-home-grid,
|
||
.dashboard-split-lists {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.ai-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.ai-image-options-grid {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
|
||
.ai-settings-compact {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.dashboard-home-grid .dashboard-panel:nth-child(1),
|
||
.dashboard-home-grid .dashboard-panel:nth-child(2),
|
||
.dashboard-home-grid .dashboard-panel:nth-child(5) {
|
||
grid-column: span 1;
|
||
}
|
||
|
||
.ai-grid .ai-card:nth-child(1),
|
||
.ai-grid .ai-card:nth-child(3) {
|
||
grid-column: auto;
|
||
grid-row: auto;
|
||
}
|
||
|
||
.icon-manager-toolbar,
|
||
.iconify-import-controls {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
.modal-backup-preview {
|
||
width: 94vw;
|
||
max-width: 94vw;
|
||
height: calc(100vh - 32px);
|
||
max-height: calc(100vh - 32px);
|
||
}
|
||
|
||
.backup-preview-modal {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
#aiImageForm {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.ai-image-options-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
animation-duration: 0.01ms !important;
|
||
animation-iteration-count: 1 !important;
|
||
scroll-behavior: auto !important;
|
||
transition-duration: 0.01ms !important;
|
||
}
|
||
}
|
||
|
||
/* Form layout follows available panel width, including the desktop sidebar. */
|
||
.admin-main { min-width: 0; }
|
||
.admin-container { container-type: inline-size; container-name: dashboard; }
|
||
.admin-main fieldset, .admin-main .form-group { min-width: 0; }
|
||
.admin-main input, .admin-main textarea, .admin-main .rj-select { max-width: 100%; }
|
||
.form-row-inline { flex-wrap: wrap; }
|
||
.form-row-inline .form-group { flex: 1 1 15rem; }
|
||
.page-list-header-left { flex-wrap: wrap; min-width: 0; }
|
||
.page-list-search { flex: 1 1 15rem; min-width: 0; }
|
||
.page-list-search-input { width: 100%; min-width: 0; }
|
||
.scheduled-form { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
|
||
.scheduled-status { min-width: 0; }
|
||
.scheduled-status__row { flex-wrap: wrap; }
|
||
.scheduled-form__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||
.scheduled-form__grid label { width: auto; min-width: 0; }
|
||
.backup-remote__header { flex-wrap: wrap; }
|
||
.backup-remote__header > div:first-child { flex: 1 1 20rem; }
|
||
.backup-remote__add { flex: 1 1 22rem; min-width: 0; margin-top: 0; }
|
||
.backup-remote-target__header { flex-wrap: wrap; }
|
||
.backup-remote-target__title { flex: 1 1 22rem; flex-wrap: wrap; }
|
||
.backup-remote-target__title input[type="text"] { flex: 1 1 14rem; min-width: 0; width: 100%; }
|
||
.backup-remote-target__actions { justify-content: flex-start; }
|
||
.backup-remote-target__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
|
||
.backup-remote-target { min-width: 0; }
|
||
@container dashboard (max-width: 50rem) {
|
||
.scheduled-form { grid-template-columns: minmax(0, 1fr); }
|
||
.scheduled-form__side, .scheduled-form__actions { grid-column: 1; grid-row: auto; }
|
||
.scheduled-form__actions { justify-content: flex-start; }
|
||
}
|
||
@container dashboard (max-width: 30rem) {
|
||
.scheduled-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||
.backup-scheduled { padding: var(--rj-space-3); }
|
||
.backup-remote-target__title { display: grid; grid-template-columns: auto minmax(0, 1fr); }
|
||
.backup-remote-target__title span { grid-column: 2; justify-self: start; }
|
||
.backup-remote-target__title input[type="text"] { width: 100%; }
|
||
.backup-remote-target__actions .btn { flex: 1 1 auto; }
|
||
.page-list-header, .page-list-header-left { align-items: stretch; }
|
||
.page-list-header { flex-direction: column; }
|
||
.mobile-selectors { flex-wrap: wrap; }
|
||
.mobile-selectors .rj-select { flex: 1 1 9rem; min-width: 0; }
|
||
.section-header { flex-wrap: wrap; gap: var(--rj-space-3); }
|
||
.section-header > div { min-width: 0; max-width: 100%; flex-wrap: wrap; }
|
||
}
|
||
.icon-manager-path { overflow-wrap: anywhere; }
|
||
.system-status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 20px; }
|
||
.system-status-grid .dashboard-panel { min-width: 0; padding: 20px; }
|
||
.system-status-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding: 8px 0; border-bottom: 1px solid var(--rj-border); }
|
||
.system-status-grid p, .system-status-row { overflow-wrap: anywhere; }
|
||
.system-request { padding: 16px 0; }
|
||
.system-request-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
|
||
/* Security check: full-width first panel with one row per finding. */
|
||
.system-status-grid .system-security { grid-column: 1 / -1; }
|
||
.system-security .dashboard-panel-header { flex-wrap: wrap; }
|
||
.system-security__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
|
||
.system-check__state::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--rj-border-strong); vertical-align: 1px; }
|
||
.system-check--critical .system-check__state { color: var(--rj-danger); font-weight: 600; }
|
||
[data-site-theme="dark"] .system-check--critical .system-check__state { color: color-mix(in srgb, var(--rj-danger) 60%, #fff); }
|
||
.system-check--warning .system-check__state { color: var(--rj-warning-text, #92400e); font-weight: 600; }
|
||
.system-check--critical .system-check__state::before { background: var(--rj-danger); }
|
||
.system-check--warning .system-check__state::before { background: var(--rj-warning); }
|
||
.system-check--ok .system-check__state::before { background: var(--rj-success); }
|
||
.system-check--note .system-check__state::before { background: var(--rj-primary); }
|
||
.system-check--skipped .system-check__state, .system-check--pending .system-check__state, .system-check--unknown .system-check__state { color: var(--rj-text-muted); }
|
||
.system-check__details { padding: 8px 0 12px; font-size: 0.875rem; line-height: 1.5; }
|
||
.system-check__details summary { cursor: pointer; font-weight: 600; }
|
||
.system-check__details p { margin: 8px 0 0; }
|
||
.system-check--critical .system-check__details { padding-left: 12px; border-left: 3px solid var(--rj-danger); }
|
||
.system-check__probes { margin: 8px 0 0; padding-left: 1.25em; }
|
||
.system-check__rules { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 8px; }
|
||
.system-check__rules pre { flex: 1 1 26rem; min-width: 0; margin: 0; padding: 10px 12px; overflow-x: auto; background: var(--rj-bg-elevated); color: var(--rj-text); border: 1px solid var(--rj-border); border-radius: var(--rj-radius-md); font-family: var(--font-mono, ui-monospace, SF Mono, Menlo, Consolas, monospace); font-size: 0.8125rem; line-height: 1.5; }
|
||
.system-badge { background: var(--rj-danger); box-shadow: 0 0 0 2px var(--rj-danger-subtle); }
|
||
.admin-main:has(> .security-exposure-banner:not([hidden])) { padding-top: var(--rj-space-6); }
|
||
@media (max-width: 768px) {
|
||
/* Security banners: wrap the title and place the call to action below the text. */
|
||
.security-warning-banner { margin-inline: var(--rj-space-4); }
|
||
.security-warning-banner .info-banner__inner { grid-template-columns: auto minmax(0, 1fr); }
|
||
.security-warning-banner .info-banner__title { white-space: normal; }
|
||
.security-warning-banner .info-banner__cta { grid-column: 2; justify-self: start; }
|
||
}
|
||
|
||
.settings-panels, .settings-panel, .settings-tabs, .settings-layout { min-width: 0; }
|
||
.settings-panel { container-type: inline-size; container-name: settings; }
|
||
.settings-actions-row, .color-input-group { flex-wrap: wrap; }
|
||
.settings-mobile-navigation { display: none; }
|
||
.forms-admin-list__head { grid-template-columns: minmax(0, 1fr) auto; }
|
||
.forms-fields-table { display: block; }
|
||
.forms-fields-table td { grid-template-rows: auto minmax(38px, auto); }
|
||
.forms-fields-table td input, .forms-fields-table td textarea { width: 100%; min-width: 0; }
|
||
.settings-visual-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
|
||
.access-maintenance-grid > .access-wide { grid-column: 1 / -1; }
|
||
@container settings (max-width: 52rem) {
|
||
.access-maintenance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||
}
|
||
@container settings (max-width: 28rem) {
|
||
.access-maintenance-grid { grid-template-columns: minmax(0, 1fr); }
|
||
.access-maintenance-grid > .access-toggle-row:first-child { grid-column: auto; }
|
||
.access-maintenance-grid > .access-toggle-row .toggle-label { white-space: normal; }
|
||
.access-maintenance-grid > .visual-overlay-color-group { grid-column: auto; }
|
||
.access-maintenance-grid > .access-toggle-row { margin-top: 0; min-height: 0; }
|
||
}
|
||
@container dashboard (max-width: 65rem) {
|
||
.settings-layout { grid-template-columns: minmax(0, 1fr); }
|
||
.settings-tabs { position: static; display: none; }
|
||
.settings-mobile-navigation { display: grid; gap: 8px; }
|
||
.settings-mobile-navigation .rj-select { width: 100%; }
|
||
}
|
||
@container settings (max-width: 28rem) {
|
||
.menu-order-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 8px; padding: 10px; }
|
||
.menu-order-item__drag-handle { grid-column: 1; grid-row: 1 / 3; }
|
||
.menu-order-item__label { grid-column: 2; grid-row: 1; }
|
||
.menu-order-item__slug { grid-column: 2; grid-row: 2; }
|
||
.menu-order-item__actions { grid-column: 3; grid-row: 1 / 3; }
|
||
.settings-section, .settings-section--compact { padding: 12px; }
|
||
.forms-fields-table tr.forms-field-row { grid-template-columns: minmax(0, 1fr); }
|
||
.forms-admin-list__head { grid-template-columns: minmax(0, 1fr); }
|
||
.forms-admin-list { padding: 12px; }
|
||
.branding-main-grid, .branding-main-column, .theme-settings-grid { grid-template-columns: minmax(0, 1fr); }
|
||
.settings-actions-row .btn { flex: 1 1 12rem; }
|
||
.users-table-wrap { overflow-x: auto; }
|
||
}
|
||
@container settings (min-width: 60rem) {
|
||
/* Wide: type, key, label, placeholder, width and required in one line, the options below. */
|
||
/* Columns stay at least 120px wide at the fluid 14–15px root size (responsive-check) */
|
||
.forms-fields-table tr.forms-field-row { grid-template-columns: 8.5rem minmax(8.5rem, 0.8fr) minmax(8.5rem, 1.1fr) minmax(8.5rem, 1.1fr) 7.5rem 5rem; }
|
||
}
|
||
.ai-image-filename-row { flex-wrap: wrap; }
|
||
.ai-image-filename-row input { flex: 1 1 12rem; }
|
||
@container dashboard (max-width: 30rem) {
|
||
.ai-image-filename-row button { flex: 1 1 auto; }
|
||
}
|
||
@container dashboard (max-width: 50rem) {
|
||
.backup-remote__header, .backup-remote-target__header { flex-direction: column; align-items: stretch; }
|
||
.backup-remote__header > div:first-child, .backup-remote__add, .backup-remote-target__title { flex: 0 1 auto; }
|
||
.backup-remote__add { width: 100%; }
|
||
}
|
||
.access-maintenance-grid > .form-group.access-wide { grid-column: 1 / -1; }
|
||
|
||
|
||
/* AI settings: the long form keeps its save bar in reach, rarely used agent groups fold away. */
|
||
.settings-actions-row--sticky {
|
||
position: sticky;
|
||
bottom: 0;
|
||
z-index: 5;
|
||
margin-left: calc(var(--rj-space-4) * -1);
|
||
margin-right: calc(var(--rj-space-4) * -1);
|
||
padding: var(--rj-space-3) var(--rj-space-4);
|
||
border-top: 1px var(--rj-divider-style, solid) var(--rj-border);
|
||
background: var(--rj-surface, var(--rj-bg, #fff));
|
||
}
|
||
|
||
/* Collapsible groups in the agent section: same look as the other cards (see .scheduled-cron). */
|
||
.ai-agent-details {
|
||
margin: var(--rj-space-2) 0;
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-lg);
|
||
background: var(--rj-bg);
|
||
/* The summary's hover surface follows the rounded frame */
|
||
overflow: hidden;
|
||
}
|
||
|
||
.ai-agent-details[open] {
|
||
padding-bottom: var(--rj-space-3);
|
||
}
|
||
|
||
.ai-agent-details > summary {
|
||
cursor: pointer;
|
||
list-style: none;
|
||
padding: var(--rj-space-3) var(--rj-space-4);
|
||
font-size: 0.9375rem;
|
||
font-weight: 600;
|
||
line-height: 1.4;
|
||
color: var(--rj-text);
|
||
/* The hover surface fades in and out instead of snapping */
|
||
transition: background-color var(--rj-duration-hover-out) ease-out;
|
||
}
|
||
|
||
.ai-agent-details > summary::-webkit-details-marker {
|
||
display: none;
|
||
}
|
||
|
||
.ai-agent-details > summary::after {
|
||
content: "+";
|
||
float: right;
|
||
color: var(--rj-text-muted);
|
||
}
|
||
|
||
.ai-agent-details > summary:hover {
|
||
background: var(--rj-bg-hover);
|
||
}
|
||
|
||
.ai-agent-details[open] > summary {
|
||
border-bottom: 1px solid var(--rj-border);
|
||
}
|
||
|
||
.ai-agent-details[open] > summary::after {
|
||
content: "-";
|
||
}
|
||
|
||
.ai-agent-details > :not(summary) {
|
||
margin-left: var(--rj-space-4);
|
||
margin-right: var(--rj-space-4);
|
||
}
|
||
|
||
.ai-agent-details > summary + * {
|
||
margin-top: var(--rj-space-3);
|
||
}
|
||
|
||
.ai-agent-details > :last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* A stored key is never shown: the field stays empty (placeholder as a mask) and a small x removes the key. */
|
||
.secret-field {
|
||
position: relative;
|
||
}
|
||
|
||
.secret-field input {
|
||
width: 100%;
|
||
padding-right: 2rem;
|
||
}
|
||
|
||
.secret-field input::placeholder {
|
||
letter-spacing: 0.15em;
|
||
}
|
||
|
||
/* Models: one column per purpose */
|
||
.ai-model-columns {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: var(--rj-space-4);
|
||
}
|
||
|
||
.ai-model-col__title {
|
||
margin: 0 0 var(--rj-space-1);
|
||
font-size: 0.9375rem;
|
||
font-weight: 600;
|
||
color: var(--rj-text);
|
||
}
|
||
|
||
.ai-model-col__hint {
|
||
margin: 0 0 var(--rj-space-3);
|
||
}
|
||
|
||
.ai-price-row {
|
||
margin-bottom: var(--rj-space-4);
|
||
}
|
||
|
||
.ai-price-row[hidden],
|
||
.ai-price-row .btn[hidden],
|
||
.ai-model-col [hidden],
|
||
#aiOrganizationGroup[hidden] {
|
||
display: none !important;
|
||
}
|
||
|
||
.ai-price-status {
|
||
margin: 0 0 var(--rj-space-2);
|
||
}
|
||
|
||
.ai-price-status--unknown {
|
||
color: var(--rj-warning-text, #92400e);
|
||
font-weight: 600;
|
||
}
|
||
|
||
@media (max-width: 700px) {
|
||
.ai-model-columns {
|
||
grid-template-columns: minmax(0, 1fr);
|
||
}
|
||
}
|
||
|
||
.ai-limit-banner .ai-limit-banner__line { margin: 0 0 var(--rj-space-2); }
|
||
.ai-limit-banner .ai-limit-banner__line--reached { font-weight: 700; }
|
||
.ai-limit-banner .ai-limit-banner__actions { margin-top: var(--rj-space-2); }
|
||
|
||
/* Assistant card on the dashboard home: the chat (Agent | Classic) is embedded; the classic form carries a label. */
|
||
.ai-assistant-embed[hidden],
|
||
.ai-card--assistant .ai-chat-log[hidden],
|
||
.ai-card--assistant .ai-form[hidden] {
|
||
display: none;
|
||
}
|
||
|
||
.ai-assistant-embed .rj-copilot-panel {
|
||
background: var(--rj-bg-elevated, #fff);
|
||
}
|
||
|
||
.ai-card__badge {
|
||
display: inline-block;
|
||
margin-left: var(--rj-space-1-5);
|
||
padding: 1px var(--rj-space-2);
|
||
border: 1px solid var(--rj-border, #d4d4d4);
|
||
border-radius: 999px;
|
||
color: var(--rj-text-muted, #737373);
|
||
font-size: 0.72rem;
|
||
font-weight: 500;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.ai-card__badge[hidden] {
|
||
display: none;
|
||
}
|
||
|
||
|
||
/* ============================================================
|
||
PHASE 2 PATTERNS (Dashboard-Redesign, Okt 2026)
|
||
Five patterns every tab shares: page header, card with at most two
|
||
levels, form row (label left), list row, sticky action bar.
|
||
Appended last so it wins over the older per-tab rules above.
|
||
============================================================ */
|
||
|
||
/* --- Page header: title (+ one-line description) left, actions right --- */
|
||
.page-list-header {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: var(--rj-space-3) var(--rj-space-4);
|
||
margin-bottom: var(--rj-space-5);
|
||
--page-list-control-height: var(--rj-control-h-sm);
|
||
}
|
||
|
||
.page-list-header-left {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: var(--rj-space-1);
|
||
min-width: 0;
|
||
}
|
||
|
||
.page-list-header h2,
|
||
.settings-panel h2,
|
||
.editor-header h2 {
|
||
margin: 0;
|
||
font-size: var(--rj-text-xl);
|
||
font-weight: 650;
|
||
letter-spacing: -0.01em;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.page-list-header p,
|
||
.page-description,
|
||
.settings-description {
|
||
margin: 0;
|
||
max-width: 64ch;
|
||
color: var(--rj-text-muted);
|
||
font-size: var(--rj-text-sm);
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.settings-description {
|
||
max-width: none;
|
||
margin: var(--rj-space-1) 0 var(--rj-space-5);
|
||
padding-bottom: var(--rj-space-4);
|
||
border-bottom: 1px var(--rj-divider-style, solid) var(--rj-border);
|
||
}
|
||
|
||
.settings-description:not(.settings-description--compact) {
|
||
padding-right: 20%;
|
||
}
|
||
|
||
.page-list-header .last-modified {
|
||
font-size: var(--rj-text-xs);
|
||
}
|
||
|
||
.page-list-header-actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
gap: var(--rj-space-2);
|
||
margin-left: auto;
|
||
padding-top: 0;
|
||
}
|
||
|
||
.page-list-header-actions .btn,
|
||
.page-list-header-actions .topbar-select,
|
||
.page-list-header-actions .page-list-search-input {
|
||
height: var(--rj-control-h-sm);
|
||
}
|
||
|
||
.page-list-header-actions .page-list-search-input {
|
||
width: min(15rem, 24vw);
|
||
min-width: 10rem;
|
||
}
|
||
|
||
.page-list-header-actions .topbar-select {
|
||
border-radius: var(--rj-radius-md);
|
||
}
|
||
|
||
/* The one primary action sits at the far right */
|
||
.page-list-header-actions .btn-primary {
|
||
order: 10;
|
||
}
|
||
|
||
.page-list-header--mails {
|
||
display: flex;
|
||
}
|
||
|
||
/* --- Cards: two levels only. Fieldsets inside a settings card become groups
|
||
(top divider + small caps label) instead of a second framed box. --- */
|
||
.settings-panel .settings-section,
|
||
.settings-panel .settings-section--compact {
|
||
border: 0;
|
||
border-top: 1px var(--rj-divider-style, solid) var(--rj-border);
|
||
border-radius: 0;
|
||
background: transparent;
|
||
padding: var(--rj-space-5) 0 0;
|
||
margin: var(--rj-space-5) 0 0;
|
||
min-width: 0;
|
||
}
|
||
|
||
.settings-panel .settings-description + form > .settings-section:first-child,
|
||
.settings-panel .settings-description + .settings-section,
|
||
.settings-panel .settings-description + form > .form-group:first-child + .settings-section {
|
||
border-top: 0;
|
||
padding-top: 0;
|
||
margin-top: 0;
|
||
}
|
||
|
||
.settings-panel .settings-section > legend {
|
||
float: none;
|
||
display: block;
|
||
width: auto;
|
||
/* The fieldset line resumes right after the legend box; keep it off the letters */
|
||
padding: 0 var(--rj-space-3) 0 0;
|
||
margin: 0 0 var(--rj-space-3);
|
||
font-size: var(--rj-text-xs);
|
||
font-weight: 600;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
color: var(--rj-text-muted);
|
||
}
|
||
|
||
.settings-panel .settings-section > legend + * {
|
||
clear: none;
|
||
}
|
||
|
||
.settings-panel .settings-section .form-group:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* Dashboard home: AI tools card no longer wraps further cards */
|
||
.dashboard-section--ai .ai-grid {
|
||
gap: 0;
|
||
}
|
||
|
||
.dashboard-section--ai .ai-image-jobs-panel {
|
||
border: 0;
|
||
border-top: 1px var(--rj-divider-style, solid) var(--rj-border);
|
||
border-radius: 0;
|
||
background: transparent;
|
||
padding: var(--rj-space-4) 0 0;
|
||
}
|
||
|
||
.settings-panel .forms-admin-list {
|
||
border: 0;
|
||
border-radius: 0;
|
||
background: transparent;
|
||
padding: 0 0 var(--rj-space-4);
|
||
border-bottom: 1px var(--rj-divider-style, solid) var(--rj-border);
|
||
}
|
||
|
||
.dashboard-section--ai .ai-grid > .ai-card {
|
||
border: 0;
|
||
border-radius: 0;
|
||
background: transparent;
|
||
padding: 0;
|
||
}
|
||
|
||
/* The tools card is placed first by the grid although the assistant comes
|
||
first in the DOM, so the divider follows the visual order: the assistant
|
||
gets a top line whenever the tools card is shown above it. */
|
||
.dashboard-section--ai .ai-grid:has(> .ai-card--tools:not([hidden])) > .ai-card--assistant {
|
||
border-top: 1px var(--rj-divider-style, solid) var(--rj-border);
|
||
padding-top: var(--rj-space-5);
|
||
margin-top: var(--rj-space-2);
|
||
}
|
||
|
||
.ai-card h3 {
|
||
font-size: var(--rj-text-lg);
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* Backup: scheduled form is a group inside the card, not a card in a card */
|
||
.backup-scheduled .scheduled-form {
|
||
border: 0;
|
||
border-radius: 0;
|
||
background: transparent;
|
||
padding: 0;
|
||
}
|
||
|
||
/* Card titles: one size */
|
||
.dashboard-section-header h3,
|
||
.dashboard-panel h3,
|
||
.backup-site-card__info h3,
|
||
.settings-panel h3:not(.settings-nav-group h3):not(.ai-model-col__title) {
|
||
font-size: var(--rj-text-lg);
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* --- Form rows: label left, field right (WordPress form-table), from 1100px --- */
|
||
.settings-panel .settings-form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
|
||
.settings-panel .settings-form select,
|
||
.settings-panel .settings-form textarea {
|
||
max-width: 40rem;
|
||
}
|
||
|
||
.settings-panel .settings-form input[type="number"] {
|
||
max-width: 10rem;
|
||
}
|
||
|
||
@media (min-width: 1100px) {
|
||
.settings-panel .form-group-row {
|
||
display: block;
|
||
}
|
||
|
||
.settings-panel :is(.settings-form, .settings-form--embedded, .settings-section, .form-group-row) > .form-group:not(.branding-main-grid .form-group):not(.access-toggle-row):not(.ai-feature-toggle-grid):not(:has(> label.toggle-label)):not(:has(> label:first-child input)) {
|
||
display: grid;
|
||
grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr);
|
||
column-gap: var(--rj-space-6);
|
||
row-gap: var(--rj-space-1);
|
||
align-items: start;
|
||
margin: 0;
|
||
padding: var(--rj-space-3) 0;
|
||
border-bottom: 1px solid var(--rj-border-subtle);
|
||
}
|
||
|
||
.settings-panel :is(.settings-form, .settings-form--embedded, .settings-section, .form-group-row) > .form-group:not(.branding-main-grid .form-group):not(.access-toggle-row):not(.ai-feature-toggle-grid):not(:has(> label.toggle-label)):not(:has(> label:first-child input)):last-child,
|
||
.settings-panel :is(.settings-form, .settings-form--embedded, .settings-section, .form-group-row) > .form-group:not(.branding-main-grid .form-group):not(.access-toggle-row):not(.ai-feature-toggle-grid):not(:has(> label.toggle-label)):not(:has(> label:first-child input)):has(+ .settings-actions),
|
||
.settings-panel :is(.settings-form, .settings-form--embedded, .settings-section, .form-group-row) > .form-group:not(.branding-main-grid .form-group):not(.access-toggle-row):not(.ai-feature-toggle-grid):not(:has(> label.toggle-label)):not(:has(> label:first-child input)):has(+ .settings-section) {
|
||
border-bottom: 0;
|
||
}
|
||
|
||
.settings-panel :is(.settings-form, .settings-form--embedded, .settings-section, .form-group-row) > .form-group:not(.branding-main-grid .form-group):not(.access-toggle-row):not(.ai-feature-toggle-grid):not(:has(> label.toggle-label)):not(:has(> label:first-child input)) > label:first-child:not(:has(input)) {
|
||
grid-column: 1;
|
||
margin: 0;
|
||
padding-top: calc((var(--rj-control-h) - 1.45em) / 2);
|
||
font-weight: 500;
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.settings-panel :is(.settings-form, .settings-form--embedded, .settings-section, .form-group-row) > .form-group:not(.branding-main-grid .form-group):not(.access-toggle-row):not(.ai-feature-toggle-grid):not(:has(> label.toggle-label)):not(:has(> label:first-child input)) > :not(label:first-child) {
|
||
grid-column: 2;
|
||
min-width: 0;
|
||
}
|
||
|
||
/* A label that wraps its own control (checkbox, toggle) spans both columns */
|
||
.settings-panel :is(.settings-form, .settings-form--embedded, .settings-section, .form-group-row) > .form-group:not(.branding-main-grid .form-group):not(.access-toggle-row):not(.ai-feature-toggle-grid):not(:has(> label.toggle-label)):not(:has(> label:first-child input)) > label:first-child:has(input) {
|
||
grid-column: 1 / -1;
|
||
margin: 0;
|
||
}
|
||
|
||
.settings-panel :is(.settings-form, .settings-form--embedded, .settings-section, .form-group-row) > .form-group:not(.branding-main-grid .form-group):not(.access-toggle-row):not(.ai-feature-toggle-grid):not(:has(> label.toggle-label)):not(:has(> label:first-child input)) > label.toggle-label:first-child {
|
||
justify-content: flex-start;
|
||
gap: var(--rj-space-4);
|
||
max-width: 55rem;
|
||
}
|
||
|
||
.settings-panel :is(.settings-form, .settings-form--embedded, .settings-section, .form-group-row) > .form-group:not(.branding-main-grid .form-group):not(.access-toggle-row):not(.ai-feature-toggle-grid):not(:has(> label.toggle-label)):not(:has(> label:first-child input)) > .form-hint {
|
||
/* row-gap already adds one step; together with this the hint sits 8px below its control */
|
||
margin-top: var(--rj-space-1);
|
||
}
|
||
}
|
||
|
||
/* --- Sticky action bar at the bottom of every settings form --- */
|
||
.settings-actions {
|
||
position: sticky;
|
||
bottom: 0;
|
||
z-index: 5;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
gap: var(--rj-space-2);
|
||
margin: var(--rj-space-5) calc(var(--rj-space-6) * -1) calc(var(--rj-space-6) * -1);
|
||
padding: var(--rj-space-3) var(--rj-space-6);
|
||
border-top: 1px var(--rj-divider-style, solid) var(--rj-border);
|
||
border-radius: 0 0 var(--rj-radius-lg) var(--rj-radius-lg);
|
||
background: var(--rj-surface-panel, var(--rj-bg-elevated));
|
||
}
|
||
|
||
.settings-actions .btn-primary {
|
||
order: 10;
|
||
}
|
||
|
||
.settings-actions > :not(.btn) {
|
||
margin-right: auto;
|
||
}
|
||
|
||
.settings-actions .settings-test-result {
|
||
margin-top: 0;
|
||
}
|
||
|
||
/* --- List rows: one height, everything centred, actions on hover and focus --- */
|
||
.page-list-table thead th {
|
||
background: transparent;
|
||
font-size: var(--rj-text-xs);
|
||
padding-block: var(--rj-space-2-5);
|
||
}
|
||
|
||
.page-list-table td {
|
||
padding-block: var(--rj-space-2-5);
|
||
}
|
||
|
||
.page-list-cell-title {
|
||
justify-content: center;
|
||
}
|
||
|
||
.page-list-row-actions {
|
||
height: auto;
|
||
min-height: 1.1rem;
|
||
margin-top: var(--rj-space-0-5);
|
||
}
|
||
|
||
.page-list-row:focus-within .page-list-row-actions {
|
||
opacity: 1;
|
||
}
|
||
|
||
.page-list-empty {
|
||
padding: var(--rj-space-10) var(--rj-space-4) !important;
|
||
text-align: center;
|
||
color: var(--rj-text-muted);
|
||
}
|
||
|
||
.page-list-empty__text {
|
||
margin: 0;
|
||
font-size: var(--rj-text-md);
|
||
}
|
||
|
||
.page-list-empty__cta {
|
||
margin-top: var(--rj-space-3);
|
||
}
|
||
|
||
/* --- Topbar: site name left, breadcrumb to the current place --- */
|
||
.topbar-title {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-2);
|
||
min-width: 0;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* Breadcrumb in the topbar colour, not the stage colour: the topbar is dark in Classic and Pop */
|
||
.topbar-title .topbar-crumb {
|
||
color: var(--rj-topbar-text-muted);
|
||
}
|
||
|
||
.topbar-title .topbar-crumb-sep {
|
||
color: var(--rj-topbar-text-muted);
|
||
opacity: 0.6;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.page-list-header-actions {
|
||
width: 100%;
|
||
justify-content: flex-start;
|
||
margin-left: 0;
|
||
}
|
||
|
||
.settings-actions {
|
||
margin-inline: calc(var(--rj-space-4) * -1);
|
||
padding-inline: var(--rj-space-4);
|
||
}
|
||
}
|
||
|
||
.dashboard-section--ai .ai-image-jobs-panel[hidden],
|
||
.dashboard-section--ai .ai-grid[hidden],
|
||
.dashboard-section--ai .ai-card[hidden] {
|
||
display: none !important;
|
||
}
|
||
|
||
.settings-panel .users-toolbar {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-bottom: var(--rj-space-3);
|
||
}
|
||
|
||
|
||
/* ============================================================
|
||
PHASE 3: DESIGN PAGE (theme presets, base colour, font, density)
|
||
============================================================ */
|
||
|
||
.preset-grid {
|
||
justify-self: stretch;
|
||
display: grid;
|
||
/* Six cards: three per row where the panel allows it, two below ~34rem */
|
||
grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
|
||
gap: var(--rj-space-5);
|
||
max-width: 48rem;
|
||
}
|
||
|
||
.preset-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--rj-space-2);
|
||
padding: var(--rj-space-2);
|
||
border: 2px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-lg);
|
||
background: var(--rj-bg-elevated);
|
||
color: var(--rj-text);
|
||
font: inherit;
|
||
text-align: left;
|
||
cursor: pointer;
|
||
transition: border-color var(--rj-duration-fast) var(--rj-ease), box-shadow var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.preset-card:hover {
|
||
border-color: var(--rj-border-strong);
|
||
}
|
||
|
||
.preset-card:focus-visible {
|
||
outline: 2px solid var(--rj-primary);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
.preset-card.selected {
|
||
border-color: var(--rj-primary);
|
||
box-shadow: 0 0 0 3px var(--rj-primary-muted);
|
||
}
|
||
|
||
/* Miniature of the shell: sidebar strip, topbar strip, two blocks on the stage */
|
||
.preset-card__preview {
|
||
--pv-sidebar: oklch(from var(--rj-base) 0.965 min(c, 0.012) h);
|
||
--pv-topbar: var(--pv-sidebar);
|
||
--pv-bg: oklch(from var(--rj-base) 0.985 min(c, 0.006) h);
|
||
--pv-card: #ffffff;
|
||
--pv-border: oklch(from var(--rj-base) 0.92 min(c, 0.008) h);
|
||
--pv-accent: var(--rj-primary);
|
||
--pv-radius: 3px;
|
||
position: relative;
|
||
display: grid;
|
||
grid-template-columns: 22% 1fr;
|
||
grid-template-rows: 14% 1fr;
|
||
aspect-ratio: 16 / 10;
|
||
overflow: hidden;
|
||
border-radius: var(--rj-radius-md);
|
||
border: 1px solid var(--rj-border);
|
||
background: var(--pv-bg);
|
||
}
|
||
|
||
.preset-card__preview::before {
|
||
content: "";
|
||
grid-row: 1 / -1;
|
||
background: var(--pv-sidebar);
|
||
}
|
||
|
||
.preset-card__preview::after {
|
||
content: "";
|
||
grid-column: 2;
|
||
grid-row: 1;
|
||
background: var(--pv-topbar);
|
||
border-bottom: 1px solid var(--pv-border);
|
||
}
|
||
|
||
.preset-card__stage {
|
||
grid-column: 2;
|
||
grid-row: 2;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 6%;
|
||
padding: 8%;
|
||
}
|
||
|
||
.preset-card__stage span {
|
||
display: block;
|
||
background: var(--pv-card);
|
||
border: 1px solid var(--pv-border);
|
||
border-radius: var(--pv-radius);
|
||
}
|
||
|
||
.preset-card__stage span:first-child {
|
||
grid-column: 1 / -1;
|
||
height: 38%;
|
||
border-top: 3px solid var(--pv-accent);
|
||
}
|
||
|
||
.preset-card__name {
|
||
font-size: var(--rj-text-md);
|
||
font-weight: 600;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.preset-card__desc {
|
||
font-size: var(--rj-text-xs);
|
||
color: var(--rj-text-muted);
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.preset-card[data-preset="classic"] .preset-card__preview { --pv-sidebar: #1d2327; --pv-topbar: #1d2327; --pv-bg: #f0f0f1; --pv-border: #c3c4c7; --pv-radius: 1px; }
|
||
.preset-card[data-preset="paper"] .preset-card__preview { --pv-sidebar: #fafaf8; --pv-topbar: #ffffff; --pv-bg: #ffffff; --pv-border: #e3e3df; --pv-radius: 2px; }
|
||
.preset-card[data-preset="console"] .preset-card__preview { --pv-sidebar: #f1f1f1; --pv-topbar: #fafafa; --pv-bg: #f1f1f1; --pv-card: #fafafa; --pv-border: #c4c4c4; --pv-radius: 0; }
|
||
.preset-card[data-preset="console"] .preset-card__preview::after { border-bottom-style: dashed; }
|
||
.preset-card[data-preset="pop"] .preset-card__preview { --pv-sidebar: #2c3b53; --pv-topbar: #2c3b53; --pv-bg: #eef2f8; --pv-card: #ffffff; --pv-border: #dbe2ec; --pv-radius: 4px; }
|
||
.preset-card[data-preset="pop"] .preset-card__preview::before { background: linear-gradient(180deg, #2c3b53, #3f5474); }
|
||
.preset-card[data-preset="pop"] .preset-card__stage span:first-child { border-top-width: 0; box-shadow: inset 0 3px 0 var(--pv-accent); border-radius: 4px; }
|
||
.preset-card[data-preset="studio"] .preset-card__preview { --pv-sidebar: #fafafa; --pv-topbar: #ffffff; --pv-bg: #fafafa; --pv-border: #eaeaea; --pv-accent: #171717; --pv-radius: 2px; }
|
||
[data-site-theme="dark"] .preset-card__preview { --pv-sidebar: oklch(from var(--rj-base) 0.20 min(c, 0.012) h); --pv-topbar: var(--pv-sidebar); --pv-bg: oklch(from var(--rj-base) 0.17 min(c, 0.008) h); --pv-card: oklch(from var(--rj-base) 0.215 min(c, 0.01) h); --pv-border: oklch(from var(--rj-base) 0.30 min(c, 0.012) h); }
|
||
[data-site-theme="dark"] .preset-card[data-preset="classic"] .preset-card__preview { --pv-sidebar: #0e1113; --pv-topbar: #0e1113; --pv-bg: #15181b; --pv-card: #1e2327; --pv-border: #3a4248; }
|
||
[data-site-theme="dark"] .preset-card[data-preset="paper"] .preset-card__preview { --pv-sidebar: #0d0d0d; --pv-topbar: #0d0d0d; --pv-bg: #121212; --pv-card: #181818; --pv-border: #2c2c2c; }
|
||
[data-site-theme="dark"] .preset-card[data-preset="console"] .preset-card__preview { --pv-sidebar: #0a0a0a; --pv-topbar: #0a0a0a; --pv-bg: #0a0a0a; --pv-card: #121212; --pv-border: #2a2a2a; }
|
||
[data-site-theme="dark"] .preset-card[data-preset="pop"] .preset-card__preview { --pv-sidebar: #151d2a; --pv-topbar: #151d2a; --pv-bg: #1c2533; --pv-card: #26303f; --pv-border: #35415a; }
|
||
[data-site-theme="dark"] .preset-card[data-preset="pop"] .preset-card__preview::before { background: linear-gradient(180deg, #151d2a, #23304a); }
|
||
[data-site-theme="dark"] .preset-card[data-preset="studio"] .preset-card__preview { --pv-sidebar: #000000; --pv-topbar: #000000; --pv-bg: #000000; --pv-card: #0a0a0a; --pv-border: #262626; --pv-accent: #ededed; }
|
||
|
||
/* Segmented control (density, mode) built from radio inputs */
|
||
.segmented {
|
||
display: inline-flex;
|
||
justify-self: start;
|
||
width: max-content;
|
||
max-width: 100%;
|
||
padding: 2px;
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-md);
|
||
background: var(--rj-bg-sunken);
|
||
}
|
||
|
||
.segmented label {
|
||
position: relative;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-2);
|
||
height: calc(var(--rj-control-h) - 6px);
|
||
padding: 0 var(--rj-space-3);
|
||
border-radius: calc(var(--rj-radius-md) - 2px);
|
||
color: var(--rj-text-secondary);
|
||
font-size: var(--rj-text-md);
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* Unchosen options brighten monochrome on hover, like the menus */
|
||
.segmented label:not(:has(input:checked)):hover {
|
||
--rj-hover-from: transparent;
|
||
--rj-hover-peak: color-mix(in srgb, var(--rj-text) 9%, var(--rj-bg-elevated));
|
||
--rj-hover-to: color-mix(in srgb, var(--rj-bg-elevated) 55%, var(--rj-bg-sunken));
|
||
background-color: color-mix(in srgb, var(--rj-bg-elevated) 55%, var(--rj-bg-sunken));
|
||
color: var(--rj-text);
|
||
animation: rj-hover-fill var(--rj-duration-hover-in) linear both;
|
||
}
|
||
|
||
.segmented label {
|
||
transition: background-color var(--rj-duration-hover-out) ease-out,
|
||
color var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.segmented label:has(input:checked) {
|
||
background: var(--rj-bg-elevated);
|
||
color: var(--rj-text);
|
||
box-shadow: var(--rj-shadow-sm);
|
||
}
|
||
|
||
.segmented label:has(input:focus-visible) {
|
||
outline: 2px solid var(--rj-primary);
|
||
outline-offset: 1px;
|
||
}
|
||
|
||
.segmented input {
|
||
position: absolute;
|
||
opacity: 0;
|
||
width: 1px;
|
||
height: 1px;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.theme-contrast-feedback {
|
||
display: block;
|
||
margin-top: var(--rj-space-1);
|
||
font-size: var(--rj-text-xs);
|
||
color: var(--rj-text-muted);
|
||
}
|
||
|
||
.theme-contrast-feedback[data-state="error"] {
|
||
color: var(--rj-danger);
|
||
}
|
||
|
||
.theme-contrast-feedback::before {
|
||
content: "";
|
||
display: inline-block;
|
||
width: 0.45rem;
|
||
height: 0.45rem;
|
||
margin-right: 0.35rem;
|
||
border-radius: 50%;
|
||
background: var(--rj-success, #16a34a);
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.theme-contrast-feedback[data-state="error"]::before {
|
||
background: var(--rj-danger);
|
||
}
|
||
|
||
.theme-contrast-feedback:empty {
|
||
display: none;
|
||
}
|
||
|
||
/* "Erweitert" lives in a details element so the common case stays short */
|
||
.settings-advanced {
|
||
margin-top: var(--rj-space-5);
|
||
border-top: 1px var(--rj-divider-style, solid) var(--rj-border);
|
||
padding-top: var(--rj-space-3);
|
||
}
|
||
|
||
.settings-advanced > summary {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--rj-space-2);
|
||
cursor: pointer;
|
||
list-style: none;
|
||
font-size: var(--rj-text-xs);
|
||
font-weight: 600;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
color: var(--rj-text-muted);
|
||
padding: var(--rj-space-1) 0;
|
||
}
|
||
|
||
.settings-advanced > summary::-webkit-details-marker {
|
||
display: none;
|
||
}
|
||
|
||
.settings-advanced > summary::before {
|
||
content: "";
|
||
width: 0.4rem;
|
||
height: 0.4rem;
|
||
border-right: 1.5px solid currentColor;
|
||
border-bottom: 1.5px solid currentColor;
|
||
transform: rotate(-45deg);
|
||
transition: transform var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.settings-advanced[open] > summary::before {
|
||
transform: rotate(45deg);
|
||
}
|
||
|
||
.settings-advanced[open] > summary {
|
||
margin-bottom: var(--rj-space-2);
|
||
}
|
||
|
||
.theme-option--swatch-preview {
|
||
width: 2rem;
|
||
height: 2rem;
|
||
border-radius: 50%;
|
||
border: 1px solid var(--rj-border);
|
||
background: var(--rj-primary);
|
||
}
|
||
|
||
/* --- Design page follow-ups (review) --- */
|
||
|
||
/* Radio labels inside the segmented control are not form labels: no block margin */
|
||
.segmented label {
|
||
margin: 0;
|
||
line-height: 1;
|
||
}
|
||
|
||
/* The auto-reset button belongs next to the badge, not at the far right */
|
||
.color-input-group .auto-reset-btn {
|
||
margin-left: 0;
|
||
}
|
||
|
||
/* Button preview: one row, as wide as its content, not a stretched block */
|
||
.settings-panel .btn-style-preview {
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-self: start;
|
||
width: max-content;
|
||
max-width: 100%;
|
||
gap: var(--rj-space-3);
|
||
padding: var(--rj-space-3) var(--rj-space-4);
|
||
}
|
||
|
||
.settings-panel .range-input-group {
|
||
max-width: 22rem;
|
||
}
|
||
|
||
/* Headings keep a little air below them even in the compact density */
|
||
.settings-description {
|
||
margin-top: max(var(--rj-space-1), 0.3rem);
|
||
}
|
||
|
||
.settings-panel .settings-section > legend {
|
||
margin-bottom: max(var(--rj-space-3), 0.65rem);
|
||
}
|
||
|
||
.page-list-header-left {
|
||
gap: max(var(--rj-space-1), 0.25rem);
|
||
}
|
||
|
||
.page-list-header {
|
||
margin-bottom: max(var(--rj-space-5), 1rem);
|
||
}
|
||
|
||
.dashboard-section-header h3,
|
||
.backup-site-card__info h3 {
|
||
margin-bottom: max(var(--rj-space-1), 0.25rem);
|
||
}
|
||
|
||
/* Compact density: tighter sidebar items */
|
||
html[data-density="compact"] .sidebar-nav-item {
|
||
padding-block: var(--rj-space-2);
|
||
}
|
||
|
||
html[data-density="compact"] .sidebar-nav,
|
||
html[data-density="compact"] .sidebar-bottom {
|
||
gap: 1px;
|
||
}
|
||
|
||
/* "Erweitert": colours left, button style right, side by side when there is room */
|
||
.settings-advanced__grid {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr);
|
||
gap: var(--rj-space-6) 0;
|
||
}
|
||
|
||
/* Colours: six across, three across in a narrower panel, then two, then one.
|
||
The button settings follow below in a row of three. */
|
||
.settings-advanced__colors {
|
||
display: grid;
|
||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||
gap: var(--rj-space-4) var(--rj-space-4);
|
||
align-items: start;
|
||
}
|
||
|
||
.settings-advanced__buttons {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: var(--rj-space-4) var(--rj-space-6);
|
||
align-items: start;
|
||
padding-top: var(--rj-space-5);
|
||
border-top: 1px var(--rj-divider-style, solid) var(--rj-border);
|
||
}
|
||
|
||
.settings-advanced__colors > .form-group,
|
||
.settings-advanced__buttons > .form-group {
|
||
margin: 0;
|
||
min-width: 0;
|
||
}
|
||
|
||
/* The hex field never shrinks below seven mono characters; badge and reset
|
||
wrap to a second line in a tight column instead */
|
||
.settings-advanced__colors .color-input-group {
|
||
flex-wrap: wrap;
|
||
gap: var(--rj-space-1);
|
||
}
|
||
|
||
.settings-advanced__colors input.color-hex-input {
|
||
flex: 1 1 4.5rem;
|
||
min-width: 4.5rem;
|
||
width: auto;
|
||
padding-inline: var(--rj-space-1-5);
|
||
}
|
||
|
||
.settings-advanced__colors .auto-reset-btn {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.settings-advanced__buttons .range-input-group {
|
||
max-width: none;
|
||
}
|
||
|
||
@container settings (max-width: 64rem) {
|
||
.settings-advanced__colors {
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
}
|
||
}
|
||
|
||
@container settings (max-width: 48rem) {
|
||
.settings-advanced__buttons {
|
||
grid-template-columns: minmax(0, 1fr);
|
||
}
|
||
}
|
||
|
||
@container settings (max-width: 40rem) {
|
||
.settings-advanced__colors {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
}
|
||
|
||
@container settings (max-width: 26rem) {
|
||
.settings-advanced__colors {
|
||
grid-template-columns: minmax(0, 1fr);
|
||
}
|
||
}
|
||
|
||
/* Compact density: tighter settings sub-navigation */
|
||
html[data-density="compact"] .settings-tab-btn {
|
||
padding-block: var(--rj-space-1);
|
||
}
|
||
|
||
html[data-density="compact"] .settings-tabs {
|
||
gap: var(--rj-space-3);
|
||
}
|
||
|
||
html[data-density="compact"] .settings-nav-group h3 {
|
||
margin-bottom: var(--rj-space-1);
|
||
}
|
||
|
||
|
||
/* ============================================================
|
||
PHASE 4: DARK MODE PASS
|
||
============================================================ */
|
||
|
||
/* Dark text on the lifted primary: no light text-shadow */
|
||
[data-site-theme="dark"] .btn-primary,
|
||
[data-site-theme="dark"] .rj-btn--primary {
|
||
text-shadow: none;
|
||
}
|
||
|
||
/* Native checkboxes and radios pick up the base colour and stay visible on dark surfaces */
|
||
.admin-main input[type="checkbox"],
|
||
.admin-main input[type="radio"] {
|
||
accent-color: var(--rj-primary);
|
||
}
|
||
|
||
[data-site-theme="dark"] .admin-main input[type="radio"],
|
||
[data-site-theme="dark"] .admin-main input[type="checkbox"] {
|
||
color-scheme: dark;
|
||
}
|
||
|
||
/* Accent status chip: label on the tinted chip uses the full text colour */
|
||
.dashboard-status-chip--accent .dashboard-status-chip__label {
|
||
color: var(--rj-text);
|
||
opacity: 0.78;
|
||
}
|
||
|
||
|
||
/* ============================================================
|
||
POLISH PASS (review of the merged redesign)
|
||
============================================================ */
|
||
|
||
/* Paper is the one preset that needs a line under the white topbar; the stage
|
||
then starts square so the corner does not sit on the line. */
|
||
[data-theme-preset="paper"] .admin-topbar {
|
||
border-bottom-color: var(--rj-border);
|
||
}
|
||
|
||
[data-theme-preset="paper"] .admin-main {
|
||
border-radius: 0;
|
||
}
|
||
|
||
/* Toggle rows: switch first, text right next to it. Reads as one unit and the
|
||
state is obvious; nothing floats to the far end of a wide row. */
|
||
label.toggle-label,
|
||
.form-group label.toggle-label,
|
||
.scheduled-form__toggle.toggle-label,
|
||
.access-toggle-row .toggle-label,
|
||
.ai-feature-toggle-grid .toggle-label {
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
gap: var(--rj-space-3);
|
||
width: auto;
|
||
max-width: 100%;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
label.toggle-label > .toggle-switch,
|
||
.access-toggle-row .toggle-label > .toggle-switch {
|
||
order: -1;
|
||
margin: 0;
|
||
}
|
||
|
||
.ai-feature-toggle-grid .toggle-label {
|
||
min-height: 0;
|
||
}
|
||
|
||
/* The switch is sometimes a <span>: it needs a box to get its 44x24 size */
|
||
.toggle-switch {
|
||
display: inline-block;
|
||
}
|
||
|
||
.form-group:has(> label.toggle-label):not(.ai-feature-toggle-grid):not(.access-toggle-row) {
|
||
display: block;
|
||
}
|
||
|
||
.form-group:has(> label.toggle-label) > .form-hint {
|
||
margin-top: var(--rj-space-2);
|
||
}
|
||
|
||
.form-group-label {
|
||
display: block;
|
||
margin-bottom: var(--rj-space-2);
|
||
font-size: var(--rj-text-md);
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* Path fields with a browse button: the field is capped like every other
|
||
input, the button stays right next to it instead of at the row's end */
|
||
.settings-panel .settings-form .logo-path-input {
|
||
max-width: 46rem;
|
||
}
|
||
|
||
.settings-panel .settings-form .logo-path-input .input-with-clear {
|
||
max-width: 40rem;
|
||
}
|
||
|
||
/* A heading directly followed by its form gets the same gap as a description would leave */
|
||
.settings-panel > h2 + form,
|
||
.settings-panel > h2 + .settings-form {
|
||
margin-top: var(--rj-space-4);
|
||
}
|
||
|
||
/* The password form was capped at 500px and cut the card's action bar short */
|
||
.change-password-form {
|
||
max-width: none;
|
||
}
|
||
|
||
.change-password-form input {
|
||
max-width: 30rem;
|
||
}
|
||
|
||
/* Backup: retention fieldset is a group inside the card, not a boxed box */
|
||
.scheduled-form__fieldset {
|
||
border: 0;
|
||
border-radius: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.scheduled-form__fieldset legend {
|
||
padding: 0;
|
||
margin-bottom: var(--rj-space-2);
|
||
font-size: var(--rj-text-xs);
|
||
font-weight: 600;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
color: var(--rj-text-muted);
|
||
}
|
||
|
||
.scheduled-form__limit > label,
|
||
.scheduled-form__side > label {
|
||
font-size: var(--rj-text-md);
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* System status: in wide panels the value sits next to its label instead of
|
||
at the far right edge */
|
||
.system-status-grid .dashboard-panel {
|
||
container-type: inline-size;
|
||
}
|
||
|
||
@container (min-width: 44rem) {
|
||
.system-status-row {
|
||
display: grid;
|
||
grid-template-columns: minmax(14rem, 22rem) minmax(0, 1fr);
|
||
justify-content: start;
|
||
column-gap: var(--rj-space-6);
|
||
}
|
||
|
||
.system-status-row > :last-child {
|
||
text-align: left;
|
||
}
|
||
}
|
||
|
||
/* Module tiles and the three-column feature grid fill their cells */
|
||
.access-toggle-row label.toggle-label,
|
||
.ai-feature-toggle-grid label.toggle-label,
|
||
.form-group.access-toggle-row label.toggle-label,
|
||
.form-group.ai-feature-toggle-grid label.toggle-label {
|
||
display: flex;
|
||
width: 100%;
|
||
}
|
||
|
||
|
||
/* ============================================================
|
||
PRESET REFINEMENTS
|
||
------------------------------------------------------------
|
||
Soft follows the shadcn/ui dashboard blocks, Studio follows the Vercel
|
||
dashboard / Geist. The tokens carry the colours, radii and control
|
||
heights; the rules here cover what tokens cannot express: table heads,
|
||
button surfaces, the sidebar item geometry and the topbar line.
|
||
============================================================ */
|
||
|
||
/* --- Soft: shadcn/ui ------------------------------------------------------ */
|
||
|
||
/* Buttons px-4, small ones px-3 */
|
||
[data-theme-preset="soft"] .btn {
|
||
padding-inline: var(--rj-space-4);
|
||
}
|
||
|
||
[data-theme-preset="soft"] .btn-sm {
|
||
padding-inline: var(--rj-space-3);
|
||
}
|
||
|
||
/* Inputs px-3 */
|
||
[data-theme-preset="soft"] .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
|
||
[data-theme-preset="soft"] .form-group select,
|
||
[data-theme-preset="soft"] .form-group textarea {
|
||
padding-inline: var(--rj-space-3);
|
||
}
|
||
|
||
/* Sidebar menu buttons: h-8, px-2, 16px icons, gap-2 */
|
||
[data-theme-preset="soft"] .sidebar-nav {
|
||
padding: var(--rj-space-3) var(--rj-space-2);
|
||
gap: var(--rj-space-0-5);
|
||
}
|
||
|
||
[data-theme-preset="soft"] .sidebar-nav-item {
|
||
min-height: 2rem;
|
||
padding: var(--rj-space-1-5) var(--rj-space-2);
|
||
gap: var(--rj-space-2);
|
||
font-weight: 500;
|
||
}
|
||
|
||
[data-theme-preset="soft"] .sidebar-nav-item svg {
|
||
width: 1rem;
|
||
height: 1rem;
|
||
opacity: 0.85;
|
||
}
|
||
|
||
[data-theme-preset="soft"] .sidebar-nav-item.active {
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* Table heads h-10, medium weight, muted, no caps; cells p-2; rows hover muted/50 */
|
||
[data-theme-preset="soft"] .page-list-table thead th,
|
||
[data-theme-preset="soft"] .users-table th,
|
||
[data-theme-preset="soft"] .scheduled-list__table th,
|
||
[data-theme-preset="soft"] .ai-audit-table th {
|
||
height: 2.5rem;
|
||
padding-block: 0;
|
||
vertical-align: middle;
|
||
font-size: var(--rj-text-sm);
|
||
font-weight: 500;
|
||
text-transform: none;
|
||
letter-spacing: 0;
|
||
color: var(--rj-text-muted);
|
||
background: transparent;
|
||
}
|
||
|
||
[data-theme-preset="soft"] .page-list-table td,
|
||
[data-theme-preset="soft"] .users-table td,
|
||
[data-theme-preset="soft"] .scheduled-list__table td,
|
||
[data-theme-preset="soft"] .ai-audit-table td {
|
||
padding-block: var(--rj-space-2);
|
||
}
|
||
|
||
[data-theme-preset="soft"] .page-list-table tbody tr:hover,
|
||
[data-theme-preset="soft"] .users-table tbody tr:hover,
|
||
[data-theme-preset="soft"] .scheduled-list__table tbody tr:hover {
|
||
background: var(--rj-bg-hover);
|
||
}
|
||
|
||
/* --- Studio: Vercel / Geist ----------------------------------------------- */
|
||
|
||
/* Topbar and sidebar end in a hairline; the stage starts square under it */
|
||
[data-theme-preset="studio"] .admin-topbar {
|
||
border-bottom-color: var(--rj-border);
|
||
}
|
||
|
||
[data-theme-preset="studio"] .admin-sidebar {
|
||
border-right: 1px solid var(--rj-sidebar-border);
|
||
}
|
||
|
||
[data-theme-preset="studio"] .admin-main {
|
||
border-radius: 0;
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* Sidebar items: 32px, quiet text, dark when active */
|
||
[data-theme-preset="studio"] .sidebar-nav {
|
||
padding: var(--rj-space-3) var(--rj-space-2);
|
||
gap: var(--rj-space-0-5);
|
||
}
|
||
|
||
[data-theme-preset="studio"] .sidebar-nav-item {
|
||
min-height: 2rem;
|
||
padding: var(--rj-space-1-5) var(--rj-space-2-5);
|
||
gap: var(--rj-space-2);
|
||
font-weight: 500;
|
||
}
|
||
|
||
[data-theme-preset="studio"] .sidebar-nav-item svg {
|
||
width: 1rem;
|
||
height: 1rem;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
[data-theme-preset="studio"] .sidebar-nav-item.active {
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* Buttons: solid, no gradient, no glow, no text shadow. Secondary buttons
|
||
are white with a hairline that darkens on hover. */
|
||
[data-theme-preset="studio"] .btn {
|
||
font-weight: 500;
|
||
}
|
||
|
||
[data-theme-preset="studio"] .btn-primary,
|
||
[data-theme-preset="studio"] .btn-danger {
|
||
text-shadow: none;
|
||
box-shadow: none;
|
||
transition: background-color var(--rj-duration-fast) var(--rj-ease),
|
||
transform var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
[data-theme-preset="studio"] .btn-primary,
|
||
[data-theme-preset="studio"] .btn-primary:hover,
|
||
[data-theme-preset="studio"] .btn-primary:active {
|
||
background-image: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
[data-theme-preset="studio"] .btn-danger {
|
||
background: var(--rj-danger);
|
||
}
|
||
|
||
[data-theme-preset="studio"] .btn-danger:hover {
|
||
background: var(--rj-danger-hover);
|
||
box-shadow: none;
|
||
}
|
||
|
||
[data-theme-preset="studio"] .btn-danger::after {
|
||
display: none;
|
||
}
|
||
|
||
[data-theme-preset="studio"] .btn-secondary {
|
||
--rj-hover-from: var(--rj-bg-elevated);
|
||
border-color: var(--rj-border);
|
||
box-shadow: none;
|
||
}
|
||
|
||
[data-theme-preset="studio"] .btn-secondary:hover {
|
||
background: var(--rj-bg);
|
||
border-color: var(--rj-border-strong);
|
||
}
|
||
|
||
/* Tables: grey head band, 13px muted labels, hairline rows, hover #fafafa */
|
||
[data-theme-preset="studio"] .page-list-table thead th,
|
||
[data-theme-preset="studio"] .users-table th,
|
||
[data-theme-preset="studio"] .scheduled-list__table th,
|
||
[data-theme-preset="studio"] .ai-audit-table th {
|
||
padding-block: var(--rj-space-2-5);
|
||
font-size: var(--rj-text-sm);
|
||
font-weight: 500;
|
||
text-transform: none;
|
||
letter-spacing: 0;
|
||
color: var(--rj-text-muted);
|
||
background: var(--rj-bg);
|
||
border-bottom: 1px solid var(--rj-border);
|
||
}
|
||
|
||
[data-theme-preset="studio"] .page-list-table td,
|
||
[data-theme-preset="studio"] .users-table td,
|
||
[data-theme-preset="studio"] .scheduled-list__table td,
|
||
[data-theme-preset="studio"] .ai-audit-table td {
|
||
padding-block: var(--rj-space-3);
|
||
}
|
||
|
||
[data-theme-preset="studio"] .page-list-table tbody tr:hover,
|
||
[data-theme-preset="studio"] .users-table tbody tr:hover,
|
||
[data-theme-preset="studio"] .scheduled-list__table tbody tr:hover {
|
||
background: var(--rj-bg);
|
||
}
|
||
|
||
/* Focus rings use the base colour so the accent still shows up somewhere */
|
||
[data-theme-preset="studio"] .btn:focus-visible,
|
||
[data-theme-preset="studio"] .sidebar-nav-item:focus-visible,
|
||
[data-theme-preset="studio"] .preset-card:focus-visible {
|
||
outline-color: var(--rj-border-focus);
|
||
}
|
||
|
||
|
||
/* --- Console: ops-console look -------------------------------------------- */
|
||
|
||
/* Chrome: hairline under the topbar and beside the sidebar, square stage */
|
||
[data-theme-preset="console"] .admin-topbar {
|
||
border-bottom-color: var(--rj-border);
|
||
}
|
||
|
||
[data-theme-preset="console"] .admin-sidebar {
|
||
border-right: 1px solid var(--rj-sidebar-border);
|
||
}
|
||
|
||
[data-theme-preset="console"] .admin-main {
|
||
border-radius: 0;
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* Group dividers are dashed through --rj-divider-style (see tokens); the
|
||
choice cards drop their 2px frame to a hairline like every other box. */
|
||
[data-theme-preset="console"] .preset-card,
|
||
[data-theme-preset="console"] .theme-option {
|
||
border-width: 1px;
|
||
}
|
||
|
||
/* Typography: labels, heads and navigation in caps with tracking; the mono
|
||
face makes the smaller scale from the tokens read like instrument text */
|
||
[data-theme-preset="console"] .form-group label:not(.toggle-label),
|
||
[data-theme-preset="console"] .form-group .form-group-label,
|
||
[data-theme-preset="console"] .settings-nav-group h3,
|
||
[data-theme-preset="console"] .dashboard-status-chip__label,
|
||
[data-theme-preset="console"] .dashboard-stat-card span,
|
||
[data-theme-preset="console"] .page-list-table thead th,
|
||
[data-theme-preset="console"] .users-table th,
|
||
[data-theme-preset="console"] .scheduled-list__table th,
|
||
[data-theme-preset="console"] .ai-audit-table th,
|
||
[data-theme-preset="console"] .preset-card__name,
|
||
[data-theme-preset="console"] .theme-option,
|
||
[data-theme-preset="console"] .segmented label {
|
||
font-size: var(--rj-text-xs);
|
||
font-weight: 600;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
[data-theme-preset="console"] .form-group label:not(.toggle-label),
|
||
[data-theme-preset="console"] .form-group .form-group-label {
|
||
color: var(--rj-text-secondary);
|
||
}
|
||
|
||
[data-theme-preset="console"] .page-list-table thead th,
|
||
[data-theme-preset="console"] .users-table th,
|
||
[data-theme-preset="console"] .scheduled-list__table th,
|
||
[data-theme-preset="console"] .ai-audit-table th {
|
||
color: var(--rj-text-muted);
|
||
background: transparent;
|
||
border-bottom: 1px solid var(--rj-border-strong);
|
||
}
|
||
|
||
[data-theme-preset="console"] .sidebar-nav {
|
||
padding: var(--rj-space-3) var(--rj-space-2);
|
||
gap: var(--rj-space-0-5);
|
||
}
|
||
|
||
[data-theme-preset="console"] .sidebar-nav-item,
|
||
[data-theme-preset="console"] .settings-tab-btn {
|
||
font-size: var(--rj-text-xs);
|
||
font-weight: 600;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
/* Three steps of hierarchy in caps: main menu, sub-navigation, group headings */
|
||
[data-theme-preset="console"] .sidebar-nav-item {
|
||
font-size: var(--rj-text-sm);
|
||
}
|
||
|
||
[data-theme-preset="console"] .settings-nav-group h3 {
|
||
font-size: calc(0.6875rem * var(--rj-font-scale));
|
||
font-weight: 600;
|
||
letter-spacing: 0.1em;
|
||
}
|
||
|
||
[data-theme-preset="console"] .sidebar-nav-item {
|
||
min-height: 2rem;
|
||
padding: var(--rj-space-1-5) var(--rj-space-2-5);
|
||
gap: var(--rj-space-2);
|
||
}
|
||
|
||
[data-theme-preset="console"] .sidebar-nav-item svg {
|
||
width: 1rem;
|
||
height: 1rem;
|
||
opacity: 0.75;
|
||
}
|
||
|
||
[data-theme-preset="console"] .topbar-title,
|
||
[data-theme-preset="console"] .topbar-brand {
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
/* Buttons: flat, caps, tracked; secondary ones are outlined */
|
||
[data-theme-preset="console"] .btn,
|
||
[data-theme-preset="console"] .rj-imgmgr-upload-btn,
|
||
[data-theme-preset="console"] .rj-imgmgr-ai-generator-btn {
|
||
font-size: var(--rj-text-xs);
|
||
font-weight: 600;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
[data-theme-preset="console"] .rj-imgmgr-upload-btn {
|
||
background-image: none;
|
||
}
|
||
|
||
/* Console's option trays carry 6px padding for the crosshair; in the media
|
||
toolbar the options shrink so the tray stays on the search field's height */
|
||
[data-theme-preset="console"] .rj-imgmgr-type-btn,
|
||
[data-theme-preset="console"] .rj-imgmgr-mode-btn,
|
||
[data-theme-preset="console"] .rj-imgmgr-view-btn {
|
||
height: calc(var(--rj-control-h) - 14px);
|
||
}
|
||
|
||
[data-theme-preset="console"] .rj-imgmgr-ai-generator-btn {
|
||
background: transparent;
|
||
border-color: var(--rj-border-strong);
|
||
}
|
||
|
||
[data-theme-preset="console"] .btn-primary,
|
||
[data-theme-preset="console"] .btn-danger {
|
||
text-shadow: none;
|
||
box-shadow: none;
|
||
transition: background-color var(--rj-duration-fast) var(--rj-ease),
|
||
transform var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
[data-theme-preset="console"] .btn-primary,
|
||
[data-theme-preset="console"] .btn-primary:hover,
|
||
[data-theme-preset="console"] .btn-primary:active {
|
||
background-image: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
[data-theme-preset="console"] .btn-danger {
|
||
background: var(--rj-danger);
|
||
}
|
||
|
||
[data-theme-preset="console"] .btn-danger:hover {
|
||
background: var(--rj-danger-hover);
|
||
box-shadow: none;
|
||
}
|
||
|
||
[data-theme-preset="console"] .btn-danger::after {
|
||
display: none;
|
||
}
|
||
|
||
[data-theme-preset="console"] .btn-secondary {
|
||
--rj-hover-from: transparent;
|
||
background: transparent;
|
||
border-color: var(--rj-border-strong);
|
||
}
|
||
|
||
[data-theme-preset="console"] .btn-secondary:hover {
|
||
background: var(--rj-bg-hover);
|
||
border-color: var(--rj-text);
|
||
}
|
||
|
||
/* Selected elements wear a crosshair: four corner brackets just outside
|
||
the box, drawn as eight gradient strokes on one pseudo-element. The box
|
||
itself keeps a thin accent border and no glow. */
|
||
[data-theme-preset="console"] .preset-card.selected,
|
||
[data-theme-preset="console"] .theme-option.selected,
|
||
[data-theme-preset="console"] .segmented label:has(input:checked),
|
||
[data-theme-preset="console"] .settings-tab-btn.active,
|
||
[data-theme-preset="console"] .sidebar-nav-item.active,
|
||
[data-theme-preset="console"] .ai-tool-tab.active,
|
||
[data-theme-preset="console"] .dashboard-range-tab.active,
|
||
[data-theme-preset="console"] .rj-imgmgr-type-btn--active,
|
||
[data-theme-preset="console"] .rj-imgmgr-mode-btn--active,
|
||
[data-theme-preset="console"] .rj-imgmgr-view-btn--active {
|
||
position: relative;
|
||
box-shadow: none;
|
||
}
|
||
|
||
[data-theme-preset="console"] .preset-card.selected,
|
||
[data-theme-preset="console"] .theme-option.selected {
|
||
border-color: var(--rj-primary);
|
||
--rj-xh-off: 8px;
|
||
--rj-xh-len: 12px;
|
||
}
|
||
|
||
[data-theme-preset="console"] .settings-tab-btn.active {
|
||
color: var(--rj-text);
|
||
background: var(--rj-sidebar-active-bg);
|
||
border-color: transparent;
|
||
}
|
||
|
||
[data-theme-preset="console"] .segmented label:has(input:checked),
|
||
[data-theme-preset="console"] .settings-tab-btn.active,
|
||
[data-theme-preset="console"] .sidebar-nav-item.active,
|
||
[data-theme-preset="console"] .ai-tool-tab.active,
|
||
[data-theme-preset="console"] .dashboard-range-tab.active,
|
||
[data-theme-preset="console"] .rj-imgmgr-type-btn--active,
|
||
[data-theme-preset="console"] .rj-imgmgr-mode-btn--active,
|
||
[data-theme-preset="console"] .rj-imgmgr-view-btn--active {
|
||
--rj-xh-off: 3px;
|
||
--rj-xh-len: 7px;
|
||
}
|
||
|
||
[data-theme-preset="console"] .preset-card.selected::after,
|
||
[data-theme-preset="console"] .theme-option.selected::after,
|
||
[data-theme-preset="console"] .segmented label:has(input:checked)::after,
|
||
[data-theme-preset="console"] .settings-tab-btn.active::after,
|
||
[data-theme-preset="console"] .sidebar-nav-item.active::after,
|
||
[data-theme-preset="console"] .ai-tool-tab.active::after,
|
||
[data-theme-preset="console"] .dashboard-range-tab.active::after,
|
||
[data-theme-preset="console"] .rj-imgmgr-type-btn--active::after,
|
||
[data-theme-preset="console"] .rj-imgmgr-mode-btn--active::after,
|
||
[data-theme-preset="console"] .rj-imgmgr-view-btn--active::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: calc(-1 * var(--rj-xh-off, 6px));
|
||
pointer-events: none;
|
||
--rj-xh-w: 2px;
|
||
--rj-xh-c: var(--rj-text-muted);
|
||
background:
|
||
linear-gradient(var(--rj-xh-c), var(--rj-xh-c)) top left / var(--rj-xh-len) var(--rj-xh-w) no-repeat,
|
||
linear-gradient(var(--rj-xh-c), var(--rj-xh-c)) top left / var(--rj-xh-w) var(--rj-xh-len) no-repeat,
|
||
linear-gradient(var(--rj-xh-c), var(--rj-xh-c)) top right / var(--rj-xh-len) var(--rj-xh-w) no-repeat,
|
||
linear-gradient(var(--rj-xh-c), var(--rj-xh-c)) top right / var(--rj-xh-w) var(--rj-xh-len) no-repeat,
|
||
linear-gradient(var(--rj-xh-c), var(--rj-xh-c)) bottom left / var(--rj-xh-len) var(--rj-xh-w) no-repeat,
|
||
linear-gradient(var(--rj-xh-c), var(--rj-xh-c)) bottom left / var(--rj-xh-w) var(--rj-xh-len) no-repeat,
|
||
linear-gradient(var(--rj-xh-c), var(--rj-xh-c)) bottom right / var(--rj-xh-len) var(--rj-xh-w) no-repeat,
|
||
linear-gradient(var(--rj-xh-c), var(--rj-xh-c)) bottom right / var(--rj-xh-w) var(--rj-xh-len) no-repeat;
|
||
}
|
||
|
||
/* Square swatch and badge, no shadows: Console has no round parts */
|
||
/* Vendor pseudo-elements stay in separate rules: an unknown one would
|
||
invalidate the whole selector list in the other engine */
|
||
[data-theme-preset="console"] input.color-picker,
|
||
[data-theme-preset="console"] .color-picker {
|
||
border-radius: var(--rj-radius-sm);
|
||
}
|
||
|
||
[data-theme-preset="console"] input.color-picker::-webkit-color-swatch-wrapper,
|
||
[data-theme-preset="console"] input.color-picker::-webkit-color-swatch {
|
||
border-radius: var(--rj-radius-sm);
|
||
}
|
||
|
||
[data-theme-preset="console"] input.color-picker::-moz-color-swatch {
|
||
border-radius: var(--rj-radius-sm);
|
||
}
|
||
|
||
[data-theme-preset="console"] .color-picker {
|
||
box-shadow: none;
|
||
}
|
||
|
||
[data-theme-preset="console"] .color-picker:hover {
|
||
transform: none;
|
||
}
|
||
|
||
[data-theme-preset="console"] .mail-badge {
|
||
border-radius: var(--rj-radius-sm);
|
||
box-shadow: none;
|
||
}
|
||
|
||
[data-theme-preset="console"] .toggle-slider {
|
||
border-radius: var(--rj-radius-sm);
|
||
}
|
||
|
||
[data-theme-preset="console"] .toggle-slider::before {
|
||
border-radius: 0;
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* Option groups (density, mode, AI tool tabs, chart range tabs): square
|
||
tray, options spaced so the crosshair around the chosen one has room,
|
||
the chosen option is a raised box instead of a filled pill */
|
||
[data-theme-preset="console"] .segmented,
|
||
[data-theme-preset="console"] .ai-tool-tabs,
|
||
[data-theme-preset="console"] .dashboard-range-tabs,
|
||
[data-theme-preset="console"] .rj-imgmgr-type-toggle,
|
||
[data-theme-preset="console"] .rj-imgmgr-mode-toggle,
|
||
[data-theme-preset="console"] .rj-imgmgr-view-toggle {
|
||
gap: var(--rj-space-2-5);
|
||
padding: var(--rj-space-1-5);
|
||
border-radius: var(--rj-radius-md);
|
||
background: var(--rj-bg-sunken);
|
||
border: 1px solid var(--rj-border);
|
||
}
|
||
|
||
[data-theme-preset="console"] .segmented label,
|
||
[data-theme-preset="console"] .ai-tool-tab,
|
||
[data-theme-preset="console"] .dashboard-range-tab,
|
||
[data-theme-preset="console"] .rj-imgmgr-type-btn,
|
||
[data-theme-preset="console"] .rj-imgmgr-mode-btn,
|
||
[data-theme-preset="console"] .rj-imgmgr-view-btn {
|
||
border-radius: var(--rj-radius-sm);
|
||
font-size: var(--rj-text-xs);
|
||
font-weight: 600;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: var(--rj-text-secondary);
|
||
}
|
||
|
||
[data-theme-preset="console"] .segmented label:has(input:checked),
|
||
[data-theme-preset="console"] .ai-tool-tab.active,
|
||
[data-theme-preset="console"] .dashboard-range-tab.active,
|
||
[data-theme-preset="console"] .rj-imgmgr-type-btn--active,
|
||
[data-theme-preset="console"] .rj-imgmgr-mode-btn--active,
|
||
[data-theme-preset="console"] .rj-imgmgr-view-btn--active {
|
||
background: var(--rj-bg-elevated);
|
||
color: var(--rj-text);
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* Content counters on the dashboard: no pills in Console. Square readouts
|
||
like the status tiles: caps label, tabular number, hairline box. */
|
||
[data-theme-preset="console"] .dashboard-content-pills {
|
||
gap: var(--rj-space-2-5);
|
||
}
|
||
|
||
[data-theme-preset="console"] .dashboard-content-pills span {
|
||
min-height: var(--rj-control-h-sm);
|
||
gap: var(--rj-space-2);
|
||
padding: 0 var(--rj-space-3);
|
||
border-radius: var(--rj-radius-sm);
|
||
background: var(--rj-bg-sunken);
|
||
font-size: var(--rj-text-xs);
|
||
font-weight: 600;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: var(--rj-text-muted);
|
||
}
|
||
|
||
[data-theme-preset="console"] .dashboard-content-pills strong {
|
||
font-size: var(--rj-text-md);
|
||
letter-spacing: 0;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
/* No pills anywhere in Console: badges, chips, tags, status labels,
|
||
collapsible summaries, the topbar select and the chat chips all take the
|
||
small square radius. Dots, spinners and slider thumbs stay round. */
|
||
[data-theme-preset="console"] :is(
|
||
.topbar-select, .events-status, .news-status, .seo-health-badge,
|
||
.section-index-label, .section-type, .section-issue-badge,
|
||
.ce-section-nav__item em, .auto-badge, .restore-mode-indicator,
|
||
.dashboard-details summary, .settings-advanced[open] > summary,
|
||
.ai-image-history-card__top time, .ai-image-history-status, .ai-audit-badge,
|
||
.ai-usage-budget__value, .ai-usage-budget__bar, .ai-usage-budget__fill,
|
||
.ai-card__badge, .mail-flag-btn,
|
||
.rj-copilot-toggle, .rj-copilot-image-modes, .rj-copilot-image-mode,
|
||
.rj-copilot-bool, .rj-agent-chip, .rj-agent-tag, .rj-imgmgr-ai-badge, .rj-imgmgr-check
|
||
) {
|
||
border-radius: var(--rj-radius-sm);
|
||
}
|
||
|
||
/* The button preview shows Console's real buttons: caps, tracked, flat,
|
||
secondary as a hairline outline */
|
||
[data-theme-preset="console"] .btn-preview-primary,
|
||
[data-theme-preset="console"] .btn-preview-secondary {
|
||
font-size: var(--rj-text-xs);
|
||
font-weight: 600;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
text-shadow: none;
|
||
}
|
||
|
||
[data-theme-preset="console"] .btn-preview-secondary {
|
||
border-width: 1px;
|
||
color: var(--rj-text);
|
||
}
|
||
|
||
/* A dashed hairline between neighbouring options, centred in the gap */
|
||
[data-theme-preset="console"] .segmented label,
|
||
[data-theme-preset="console"] .ai-tool-tab,
|
||
[data-theme-preset="console"] .dashboard-range-tab {
|
||
position: relative;
|
||
}
|
||
|
||
[data-theme-preset="console"] .segmented label + label::before,
|
||
[data-theme-preset="console"] .ai-tool-tab + .ai-tool-tab::before,
|
||
[data-theme-preset="console"] .dashboard-range-tab + .dashboard-range-tab::before,
|
||
[data-theme-preset="console"] .rj-imgmgr-type-btn + .rj-imgmgr-type-btn::before,
|
||
[data-theme-preset="console"] .rj-imgmgr-mode-btn + .rj-imgmgr-mode-btn::before,
|
||
[data-theme-preset="console"] .rj-imgmgr-view-btn + .rj-imgmgr-view-btn::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: calc(var(--rj-space-2-5) / -2);
|
||
top: 18%;
|
||
bottom: 18%;
|
||
border-left: 1px dashed var(--rj-border-strong);
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* The preset grid needs room for the brackets around the chosen card */
|
||
[data-theme-preset="console"] .preset-grid,
|
||
[data-theme-preset="console"] .theme-selector {
|
||
padding: var(--rj-space-2);
|
||
margin: calc(-1 * var(--rj-space-2));
|
||
}
|
||
|
||
/* Focus rings: accent, square */
|
||
[data-theme-preset="console"] .btn:focus-visible,
|
||
[data-theme-preset="console"] .sidebar-nav-item:focus-visible,
|
||
[data-theme-preset="console"] .preset-card:focus-visible {
|
||
outline-color: var(--rj-primary);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
/* --- Pop: playful dashboard --------------------------------------------------
|
||
Dark gradient chrome, a light sheet for the stage with a dog-eared corner,
|
||
labels and titles in coloured pills, round navigation. Colours and radii
|
||
come from the tokens; the rules here draw the gradient, the ear and the
|
||
pills and round off what the tokens cannot reach. */
|
||
|
||
/* Chrome: the sidebar runs the gradient, the topbar keeps its top colour so
|
||
both read as one board; a hairline of light separates sidebar and stage */
|
||
[data-theme-preset="pop"] .admin-sidebar {
|
||
background: var(--rj-sidebar-gradient, var(--rj-sidebar-bg));
|
||
}
|
||
|
||
[data-theme-preset="pop"] .admin-topbar {
|
||
border-bottom: 0;
|
||
}
|
||
|
||
/* Cards: white sheets with a soft shadow instead of a hard frame */
|
||
[data-theme-preset="pop"] .dashboard-stat-card,
|
||
[data-theme-preset="pop"] .dashboard-panel,
|
||
[data-theme-preset="pop"] .settings-panel {
|
||
border-color: var(--rj-border-subtle);
|
||
box-shadow: var(--rj-shadow-sm);
|
||
}
|
||
|
||
/* Pills: legends, panel titles, stat labels and status labels sit in a
|
||
coloured chip. --rj-pop-pill carries the colour, --rj-pop-pill-text the
|
||
text on it (white on the saturated light-mode colours, dark on the lifted
|
||
dark-mode ones, see below). */
|
||
[data-theme-preset="pop"] .settings-section > legend,
|
||
[data-theme-preset="pop"] .dashboard-panel h3,
|
||
[data-theme-preset="pop"] .dashboard-section-title,
|
||
[data-theme-preset="pop"] .dashboard-section-header h3,
|
||
[data-theme-preset="pop"] .ai-card > h3,
|
||
[data-theme-preset="pop"] .backup-site-card__info h3,
|
||
[data-theme-preset="pop"] .scheduled-list__header h4,
|
||
[data-theme-preset="pop"] .backup-remote__header h4,
|
||
[data-theme-preset="pop"] .dashboard-stat-card span,
|
||
[data-theme-preset="pop"] .dashboard-status-chip__label,
|
||
html[data-theme-preset="pop"] .settings-panel h3.settings-subheading,
|
||
[data-theme-preset="pop"] .frontend-logos-block__title,
|
||
[data-theme-preset="pop"] .scheduled-form__fieldset legend,
|
||
[data-theme-preset="pop"] .ai-image-jobs-panel__copy h4,
|
||
[data-theme-preset="pop"] .ai-image-history__header h4 {
|
||
display: inline-block;
|
||
width: auto;
|
||
max-width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 var(--rj-space-3);
|
||
border-radius: var(--rj-radius-full, 999px);
|
||
background: var(--rj-pop-pill, var(--rj-primary));
|
||
color: var(--rj-pop-pill-text, var(--rj-text-on-primary));
|
||
font-size: var(--rj-text-xs);
|
||
font-weight: 700;
|
||
letter-spacing: 0.06em;
|
||
/* Centred by line height so a long label can still truncate */
|
||
line-height: calc(1.5rem * var(--rj-font-scale));
|
||
text-transform: uppercase;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
/* Stat and status labels may run long: they wrap inside a rounded box
|
||
instead of truncating */
|
||
[data-theme-preset="pop"] .dashboard-stat-card span,
|
||
[data-theme-preset="pop"] .dashboard-status-chip__label {
|
||
white-space: normal;
|
||
line-height: 1.3;
|
||
padding-block: calc(0.1rem * var(--rj-font-scale) + 2px);
|
||
border-radius: 12px;
|
||
}
|
||
|
||
[data-theme-preset="pop"] .dashboard-stat-card span {
|
||
align-self: flex-start;
|
||
margin-bottom: var(--rj-space-2);
|
||
}
|
||
|
||
/* Second level inside a card (sub-blocks, retention, image jobs): the same
|
||
pill, tinted instead of filled */
|
||
html[data-theme-preset="pop"] .settings-panel h3.settings-subheading,
|
||
[data-theme-preset="pop"] .frontend-logos-block__title,
|
||
[data-theme-preset="pop"] .scheduled-form__fieldset legend,
|
||
[data-theme-preset="pop"] .ai-image-jobs-panel__copy h4,
|
||
[data-theme-preset="pop"] .ai-image-history__header h4 {
|
||
--rj-pop-pill: var(--rj-primary-subtle);
|
||
--rj-pop-pill-text: var(--rj-primary);
|
||
margin-bottom: var(--rj-space-2);
|
||
}
|
||
|
||
[data-theme-preset="pop"] .dashboard-section-header h3,
|
||
[data-theme-preset="pop"] .backup-site-card__info h3,
|
||
[data-theme-preset="pop"] .scheduled-list__header h4,
|
||
[data-theme-preset="pop"] .backup-remote__header h4 {
|
||
margin-bottom: var(--rj-space-2);
|
||
}
|
||
|
||
/* The assistant card is a flex column: the title keeps its own width, and
|
||
the mode badge inside it turns into a white outline */
|
||
[data-theme-preset="pop"] .ai-card > h3 {
|
||
align-self: flex-start;
|
||
}
|
||
|
||
[data-theme-preset="pop"] .ai-card > h3 .ai-card__badge {
|
||
border-color: color-mix(in srgb, currentColor 55%, transparent);
|
||
color: inherit;
|
||
font-size: inherit;
|
||
letter-spacing: inherit;
|
||
text-transform: inherit;
|
||
line-height: 1;
|
||
padding: 3px var(--rj-space-2) 2px;
|
||
vertical-align: 0px;
|
||
}
|
||
|
||
[data-theme-preset="pop"] .dashboard-panel h3,
|
||
[data-theme-preset="pop"] .dashboard-section-title {
|
||
margin-bottom: var(--rj-space-3);
|
||
}
|
||
|
||
[data-theme-preset="pop"] .dashboard-panel-header h3 {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* Stat tiles take turns through the palette: base, danger, warning, success,
|
||
accent; the number wears the tile colour */
|
||
[data-theme-preset="pop"] .dashboard-stat-card:nth-child(5n + 2) { --rj-pop-pill: var(--rj-danger); }
|
||
[data-theme-preset="pop"] .dashboard-stat-card:nth-child(5n + 3) { --rj-pop-pill: var(--rj-warning); }
|
||
[data-theme-preset="pop"] .dashboard-stat-card:nth-child(5n + 4) { --rj-pop-pill: var(--rj-success); }
|
||
[data-theme-preset="pop"] .dashboard-stat-card:nth-child(5n + 5) { --rj-pop-pill: var(--rj-brand); }
|
||
|
||
[data-theme-preset="pop"] .dashboard-stat-card strong {
|
||
color: var(--rj-pop-pill, var(--rj-primary));
|
||
font-weight: 700;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
/* Status strip: the label pill keeps the base colour, the value stays text */
|
||
[data-theme-preset="pop"] .dashboard-status-chip {
|
||
min-width: 0;
|
||
border-radius: var(--rj-radius-md);
|
||
}
|
||
|
||
[data-theme-preset="pop"] .dashboard-status-chip__label {
|
||
margin-bottom: var(--rj-space-1-5);
|
||
}
|
||
|
||
/* Light-mode pills are saturated, so white text; in dark mode the colours are
|
||
lifted (tokens) and the text turns dark like on the primary button */
|
||
[data-theme-preset="pop"] .dashboard-stat-card,
|
||
[data-theme-preset="pop"] .dashboard-status-chip {
|
||
--rj-pop-pill-text: #ffffff;
|
||
}
|
||
|
||
[data-theme-preset="pop"][data-site-theme="dark"] .dashboard-stat-card,
|
||
[data-theme-preset="pop"][data-site-theme="dark"] .dashboard-status-chip {
|
||
--rj-pop-pill-text: #11141b;
|
||
}
|
||
|
||
/* Settings sub-navigation: group heads as tinted pills, one step quieter */
|
||
[data-theme-preset="pop"] .settings-nav-group h3 {
|
||
display: inline-block;
|
||
line-height: calc(1.375rem * var(--rj-font-scale));
|
||
padding: 0 var(--rj-space-2-5);
|
||
margin: 0 0 var(--rj-space-2) var(--rj-space-1);
|
||
border-radius: var(--rj-radius-full, 999px);
|
||
background: var(--rj-primary-subtle);
|
||
color: var(--rj-primary);
|
||
font-size: calc(0.6875rem * var(--rj-font-scale));
|
||
letter-spacing: 0.08em;
|
||
}
|
||
|
||
[data-theme-preset="pop"] .settings-tab-btn {
|
||
border-radius: var(--rj-radius-full, 999px);
|
||
}
|
||
|
||
/* Navigation: round items, the active one a filled pill with a coloured glow */
|
||
[data-theme-preset="pop"] .sidebar-nav {
|
||
padding-inline: var(--rj-space-3);
|
||
}
|
||
|
||
[data-theme-preset="pop"] .sidebar-nav-item {
|
||
border-radius: var(--rj-radius-full, 999px);
|
||
padding-inline: var(--rj-space-4);
|
||
}
|
||
|
||
[data-theme-preset="pop"] .sidebar-nav-item.active {
|
||
box-shadow: 0 6px 16px -4px oklch(from var(--rj-primary) l c h / 0.6);
|
||
}
|
||
|
||
[data-theme-preset="pop"] .sidebar-nav-item.active:hover {
|
||
filter: none;
|
||
}
|
||
|
||
/* Collapsed sidebar: the active pill shrinks to a circle around the icon */
|
||
html[data-sidebar="collapsed"][data-theme-preset="pop"] .sidebar-nav-item {
|
||
padding-inline: 0;
|
||
}
|
||
|
||
/* Option groups and chips: round tray, round options */
|
||
[data-theme-preset="pop"] .segmented,
|
||
[data-theme-preset="pop"] .rj-imgmgr-type-toggle,
|
||
[data-theme-preset="pop"] .rj-imgmgr-mode-toggle,
|
||
[data-theme-preset="pop"] .rj-imgmgr-view-toggle {
|
||
border-radius: var(--rj-radius-full, 999px);
|
||
padding: 3px;
|
||
}
|
||
|
||
[data-theme-preset="pop"] .segmented label,
|
||
[data-theme-preset="pop"] .rj-imgmgr-type-btn,
|
||
[data-theme-preset="pop"] .rj-imgmgr-mode-btn,
|
||
[data-theme-preset="pop"] .rj-imgmgr-view-btn {
|
||
border-radius: var(--rj-radius-full, 999px);
|
||
}
|
||
|
||
[data-theme-preset="pop"] .segmented label:has(input:checked),
|
||
[data-theme-preset="pop"] .rj-imgmgr-type-btn--active,
|
||
[data-theme-preset="pop"] .rj-imgmgr-mode-btn--active,
|
||
[data-theme-preset="pop"] .rj-imgmgr-view-btn--active {
|
||
box-shadow: var(--rj-shadow-sm);
|
||
}
|
||
|
||
[data-theme-preset="pop"] .rj-imgmgr-type-btn,
|
||
[data-theme-preset="pop"] .rj-imgmgr-mode-btn,
|
||
[data-theme-preset="pop"] .rj-imgmgr-view-btn {
|
||
height: calc(var(--rj-control-h) - 8px);
|
||
}
|
||
|
||
/* Colour swatches are round */
|
||
[data-theme-preset="pop"] input.color-picker,
|
||
[data-theme-preset="pop"] .color-picker {
|
||
border-radius: 50%;
|
||
}
|
||
|
||
[data-theme-preset="pop"] input.color-picker::-webkit-color-swatch-wrapper,
|
||
[data-theme-preset="pop"] input.color-picker::-webkit-color-swatch {
|
||
border-radius: 50%;
|
||
}
|
||
|
||
[data-theme-preset="pop"] input.color-picker::-moz-color-swatch {
|
||
border-radius: 50%;
|
||
}
|
||
|
||
/* Table heads: tinted, rounded ends on the first and last column */
|
||
[data-theme-preset="pop"] .page-list-table thead th,
|
||
[data-theme-preset="pop"] .users-table th,
|
||
[data-theme-preset="pop"] .scheduled-list__table th,
|
||
[data-theme-preset="pop"] .ai-audit-table th {
|
||
background: color-mix(in srgb, var(--rj-primary) 15%, var(--rj-bg-elevated));
|
||
color: var(--rj-primary);
|
||
border-bottom-color: transparent;
|
||
font-weight: 700;
|
||
letter-spacing: 0.06em;
|
||
}
|
||
|
||
[data-theme-preset="pop"] .page-list-table thead th:first-child,
|
||
[data-theme-preset="pop"] .users-table th:first-child,
|
||
[data-theme-preset="pop"] .scheduled-list__table th:first-child,
|
||
[data-theme-preset="pop"] .ai-audit-table th:first-child {
|
||
border-top-left-radius: var(--rj-radius-full, 999px);
|
||
border-bottom-left-radius: var(--rj-radius-full, 999px);
|
||
}
|
||
|
||
[data-theme-preset="pop"] .page-list-table thead th:last-child,
|
||
[data-theme-preset="pop"] .users-table th:last-child,
|
||
[data-theme-preset="pop"] .scheduled-list__table th:last-child,
|
||
[data-theme-preset="pop"] .ai-audit-table th:last-child {
|
||
border-top-right-radius: var(--rj-radius-full, 999px);
|
||
border-bottom-right-radius: var(--rj-radius-full, 999px);
|
||
}
|
||
|
||
/* Status strip: a tray with room around the five tiles, so its background
|
||
reads as a surface; the label pills sit on one baseline at the bottom */
|
||
[data-theme-preset="pop"] .dashboard-status-strip {
|
||
gap: var(--rj-space-2);
|
||
padding: var(--rj-space-2);
|
||
border-color: var(--rj-border-subtle);
|
||
background: var(--rj-bg-sunken);
|
||
border-radius: var(--rj-radius-lg);
|
||
}
|
||
|
||
[data-theme-preset="pop"] .dashboard-status-chip {
|
||
justify-content: flex-end;
|
||
border-radius: var(--rj-radius-md);
|
||
box-shadow: var(--rj-shadow-sm);
|
||
}
|
||
|
||
[data-theme-preset="pop"] .dashboard-status-chip__label {
|
||
margin-top: auto;
|
||
}
|
||
|
||
/* Table wrappers: a little air so the tinted head stands off the card edge */
|
||
[data-theme-preset="pop"] .page-list-table-wrap {
|
||
padding: var(--rj-space-2);
|
||
}
|
||
|
||
/* A little white between the head and the first row: a spacer row, so the
|
||
head pill keeps its full rounding (a transparent border would flatten it) */
|
||
[data-theme-preset="pop"] .page-list-table thead th {
|
||
border-bottom: 0;
|
||
}
|
||
|
||
[data-theme-preset="pop"] .page-list-table tbody::before {
|
||
content: "";
|
||
display: table-row;
|
||
height: 6px;
|
||
}
|
||
|
||
/* Row hover: a rounded surface inset from the separator lines, drawn by a
|
||
pseudo-element per cell (so the corners can round) and faded in */
|
||
[data-theme-preset="pop"] .page-list-table tbody tr:hover {
|
||
background: transparent;
|
||
}
|
||
|
||
[data-theme-preset="pop"] .page-list-table tbody td {
|
||
position: relative;
|
||
z-index: 0;
|
||
/* A pixel more above and below, so the hover surface clears the separator lines */
|
||
padding-top: calc(var(--rj-space-2-5) + 1px);
|
||
padding-bottom: calc(var(--rj-space-2-5) + 1px);
|
||
}
|
||
|
||
[data-theme-preset="pop"] .page-list-table tbody td::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 3px;
|
||
bottom: 4px;
|
||
z-index: -1;
|
||
background: var(--rj-bg-hover);
|
||
opacity: 0;
|
||
transition: opacity var(--rj-duration-hover-out) ease-out;
|
||
pointer-events: none;
|
||
}
|
||
|
||
[data-theme-preset="pop"] .page-list-table tbody tr:hover td::before,
|
||
[data-theme-preset="pop"] .page-list-table tbody tr:focus-within td::before {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* First and last row: the hover keeps the same 8px to the card edge as at the sides */
|
||
[data-theme-preset="pop"] .page-list-table tbody tr:first-child td::before {
|
||
top: 2px;
|
||
}
|
||
|
||
[data-theme-preset="pop"] .page-list-table tbody tr:last-child td::before {
|
||
bottom: 0;
|
||
}
|
||
|
||
[data-theme-preset="pop"] .page-list-table tbody td:first-child::before {
|
||
border-radius: var(--rj-radius-md) 0 0 var(--rj-radius-md);
|
||
}
|
||
|
||
[data-theme-preset="pop"] .page-list-table tbody td:last-child::before {
|
||
border-radius: 0 var(--rj-radius-md) var(--rj-radius-md) 0;
|
||
}
|
||
|
||
/* Media library: grid items keep the normal card rounding, not the 30px */
|
||
[data-theme-preset="pop"] .rj-imgmgr-item {
|
||
border-radius: var(--rj-radius-md);
|
||
}
|
||
|
||
/* Media library list view: a light card like the page list, the pill head
|
||
inside it, rows with the inset hover */
|
||
[data-theme-preset="pop"] .rj-imgmgr-list.active {
|
||
padding: var(--rj-space-2);
|
||
border: 1px solid var(--rj-border-subtle);
|
||
border-radius: var(--rj-radius-lg);
|
||
background: var(--rj-bg-elevated);
|
||
box-shadow: var(--rj-shadow-sm);
|
||
}
|
||
|
||
[data-theme-preset="pop"] .rj-imgmgr-list-header {
|
||
margin-bottom: 6px;
|
||
border: 0;
|
||
border-radius: var(--rj-radius-full, 999px);
|
||
background: color-mix(in srgb, var(--rj-primary) 15%, var(--rj-bg-elevated));
|
||
color: var(--rj-primary);
|
||
font-size: var(--rj-text-xs);
|
||
font-weight: 700;
|
||
letter-spacing: 0.06em;
|
||
}
|
||
|
||
[data-theme-preset="pop"] .rj-imgmgr-list-header-col:hover {
|
||
color: var(--rj-primary-hover);
|
||
}
|
||
|
||
[data-theme-preset="pop"] .rj-imgmgr-list-body {
|
||
border: 0;
|
||
border-radius: 0;
|
||
background: transparent;
|
||
}
|
||
|
||
[data-theme-preset="pop"] .rj-imgmgr-row {
|
||
position: relative;
|
||
z-index: 0;
|
||
}
|
||
|
||
[data-theme-preset="pop"] .rj-imgmgr-row:hover {
|
||
background: transparent;
|
||
}
|
||
|
||
[data-theme-preset="pop"] .rj-imgmgr-row::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 3px var(--rj-space-1) 4px;
|
||
z-index: -1;
|
||
border-radius: var(--rj-radius-md);
|
||
background: var(--rj-bg-hover);
|
||
opacity: 0;
|
||
transition: opacity var(--rj-duration-hover-out) ease-out;
|
||
pointer-events: none;
|
||
}
|
||
|
||
[data-theme-preset="pop"] .rj-imgmgr-row:hover::before {
|
||
opacity: 1;
|
||
}
|
||
|
||
[data-theme-preset="pop"] .rj-imgmgr-row:last-child::before {
|
||
bottom: 0;
|
||
}
|
||
|
||
/* Sortable heads answer the pointer: deeper text, a shade more tint */
|
||
[data-theme-preset="pop"] .page-list-table thead th.page-list-sortable:hover {
|
||
color: var(--rj-primary-hover);
|
||
background-color: color-mix(in srgb, var(--rj-primary) 24%, var(--rj-bg-elevated));
|
||
}
|
||
|
||
/* Focus rings follow the round shapes */
|
||
[data-theme-preset="pop"] .sidebar-nav-item:focus-visible,
|
||
[data-theme-preset="pop"] .settings-tab-btn:focus-visible {
|
||
outline-offset: 3px;
|
||
border-radius: var(--rj-radius-full, 999px);
|
||
}
|
||
|
||
|
||
|
||
/* ============================================================
|
||
COLLAPSIBLE SIDEBAR (all presets)
|
||
------------------------------------------------------------
|
||
<html data-sidebar="collapsed"> shrinks the sidebar to its icons. The
|
||
state is a per-browser preference (localStorage, set before first paint
|
||
by a tiny head script) and toggled by the button at the sidebar's foot.
|
||
The mobile drawer below 769px ignores it and always shows labels.
|
||
============================================================ */
|
||
|
||
/* The collapse button sits apart from the navigation under its own line */
|
||
.sidebar-collapse {
|
||
position: relative;
|
||
margin-top: var(--rj-space-3);
|
||
}
|
||
|
||
.sidebar-collapse::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: calc(-1 * var(--rj-space-2));
|
||
border-top: 1px var(--rj-divider-style, solid) var(--rj-sidebar-border);
|
||
pointer-events: none;
|
||
}
|
||
|
||
@media (min-width: 769px) {
|
||
html[data-sidebar="collapsed"] {
|
||
--rj-sidebar-w: 3.5rem;
|
||
}
|
||
|
||
html[data-sidebar="collapsed"] .sidebar-nav,
|
||
html[data-sidebar="collapsed"] .sidebar-bottom {
|
||
padding-inline: var(--rj-space-2);
|
||
}
|
||
|
||
html[data-sidebar="collapsed"] .sidebar-nav-item {
|
||
position: relative;
|
||
justify-content: center;
|
||
padding-inline: 0;
|
||
gap: 0;
|
||
}
|
||
|
||
html[data-sidebar="collapsed"] .sidebar-nav-item > span:not(.mail-badge) {
|
||
display: none;
|
||
}
|
||
|
||
/* Icons carry the whole meaning now, so no preset may shrink them */
|
||
html[data-sidebar="collapsed"] .sidebar-nav-item svg {
|
||
width: 1.25rem;
|
||
height: 1.25rem;
|
||
min-width: 1.25rem;
|
||
min-height: 1.25rem;
|
||
opacity: 0.85;
|
||
}
|
||
|
||
html[data-sidebar="collapsed"] .sidebar-nav-item.active svg,
|
||
html[data-sidebar="collapsed"] .sidebar-nav-item:hover svg {
|
||
opacity: 1;
|
||
}
|
||
|
||
html[data-sidebar="collapsed"] .sidebar-nav-item > .mail-badge {
|
||
position: absolute;
|
||
top: 2px;
|
||
right: 2px;
|
||
margin: 0;
|
||
min-width: 0.875rem;
|
||
height: 0.875rem;
|
||
padding: 0 0.1875rem;
|
||
font-size: calc(0.5625rem * var(--rj-font-scale));
|
||
box-shadow: none;
|
||
}
|
||
|
||
html[data-sidebar="collapsed"] .sidebar-version {
|
||
display: none;
|
||
}
|
||
|
||
/* Paper marks the active item with a bar at the edge; keep that readable */
|
||
html[data-sidebar="collapsed"][data-theme-preset="paper"] .sidebar-nav-item.active {
|
||
box-shadow: inset 2px 0 0 var(--rj-primary);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.sidebar-collapse {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
/* Bypass link line under the explanation: label plus the assembled address */
|
||
.access-bypass-link {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: baseline;
|
||
gap: var(--rj-space-2);
|
||
margin: 0 0 var(--rj-space-5);
|
||
font-size: var(--rj-text-sm);
|
||
color: var(--rj-text-secondary);
|
||
}
|
||
|
||
.access-bypass-link code {
|
||
padding: var(--rj-space-1) var(--rj-space-2);
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-sm);
|
||
background: var(--rj-bg-sunken);
|
||
color: var(--rj-text);
|
||
font-family: var(--rj-font-mono);
|
||
font-size: var(--rj-text-sm);
|
||
word-break: break-all;
|
||
}
|
||
|
||
/* SMTP block of the e-mail settings: two columns on a wide panel. Left:
|
||
host, then port beside encryption; right: username, password. */
|
||
.smtp-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: var(--rj-space-4) var(--rj-space-6);
|
||
align-items: start;
|
||
}
|
||
|
||
.smtp-grid > .settings-divider,
|
||
.smtp-grid > .settings-subheading {
|
||
grid-column: 1 / -1;
|
||
}
|
||
|
||
.smtp-grid > .settings-divider {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.smtp-grid > .settings-subheading {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.smtp-grid > .form-group,
|
||
.smtp-grid > .form-row-inline {
|
||
margin: 0;
|
||
min-width: 0;
|
||
}
|
||
|
||
.smtp-grid__host { grid-column: 1; grid-row: 3; }
|
||
.smtp-grid__port-row { grid-column: 1; grid-row: 4; }
|
||
.smtp-grid__user { grid-column: 2; grid-row: 3; }
|
||
.smtp-grid__pass { grid-column: 2; grid-row: 4; }
|
||
|
||
/* Port stays short, encryption takes the rest so its right edge lines up */
|
||
.smtp-grid__port-row > .form-group:first-child {
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.smtp-grid__port-row > .form-group:last-child {
|
||
flex: 1 1 auto;
|
||
min-width: 0;
|
||
}
|
||
|
||
/* Fields fill their column; the grid already bounds them (the :not() chain
|
||
matches the 40rem cap of the settings form) */
|
||
.settings-panel .settings-form .smtp-grid input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
|
||
.settings-panel .settings-form .smtp-grid select {
|
||
max-width: none;
|
||
}
|
||
|
||
.settings-panel .settings-form .smtp-grid #settingsSmtpPort {
|
||
width: 7rem;
|
||
max-width: 7rem;
|
||
}
|
||
|
||
@container settings (max-width: 52rem) {
|
||
.smtp-grid {
|
||
grid-template-columns: minmax(0, 1fr);
|
||
}
|
||
|
||
.smtp-grid__host,
|
||
.smtp-grid__port-row,
|
||
.smtp-grid__user,
|
||
.smtp-grid__pass {
|
||
grid-column: auto;
|
||
grid-row: auto;
|
||
}
|
||
}
|
||
|
||
/* Bypass links: one row per parameter / key pair, labels on the first row
|
||
only, the bin at the row's end, the assembled address underneath */
|
||
.bypass-links {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--rj-space-4);
|
||
margin-bottom: var(--rj-space-3);
|
||
}
|
||
|
||
.bypass-row {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
|
||
gap: var(--rj-space-2) var(--rj-space-4);
|
||
align-items: end;
|
||
}
|
||
|
||
.bypass-row > .form-group {
|
||
margin: 0;
|
||
min-width: 0;
|
||
}
|
||
|
||
.bypass-row + .bypass-row > .form-group > label {
|
||
display: none;
|
||
}
|
||
|
||
.bypass-row__remove {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: var(--rj-control-h);
|
||
width: var(--rj-control-h);
|
||
padding: 0;
|
||
border: 1px solid var(--rj-border);
|
||
border-radius: var(--rj-radius-md);
|
||
background: var(--rj-bg-elevated);
|
||
color: var(--rj-text-muted);
|
||
cursor: pointer;
|
||
transition: background-color var(--rj-duration-fast) var(--rj-ease),
|
||
color var(--rj-duration-fast) var(--rj-ease),
|
||
border-color var(--rj-duration-fast) var(--rj-ease);
|
||
}
|
||
|
||
.bypass-row__remove:hover {
|
||
background: var(--rj-danger-subtle);
|
||
color: var(--rj-danger);
|
||
border-color: var(--rj-danger);
|
||
}
|
||
|
||
.bypass-row__remove:focus-visible {
|
||
outline: 2px solid var(--rj-border-focus);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
.bypass-row__remove svg {
|
||
width: 16px;
|
||
height: 16px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.bypass-row__link {
|
||
grid-column: 1 / -1;
|
||
margin: 0;
|
||
}
|
||
|
||
.settings-panel .settings-form .bypass-row input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]) {
|
||
max-width: none;
|
||
}
|
||
|
||
.bypass-links__actions {
|
||
margin-top: var(--rj-space-3);
|
||
}
|
||
|
||
@container settings (max-width: 40rem) {
|
||
.bypass-row {
|
||
grid-template-columns: minmax(0, 1fr) auto;
|
||
}
|
||
|
||
.bypass-row > .bypass-row__param {
|
||
grid-column: 1 / -1;
|
||
}
|
||
|
||
.bypass-row + .bypass-row > .form-group > label {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
/* Forms admin: the "new" button matches the select beside it; field rows
|
||
give inputs, selects and the delete button one control height */
|
||
.forms-admin-list__head .btn {
|
||
height: var(--rj-control-h);
|
||
padding-inline: var(--rj-space-4);
|
||
}
|
||
|
||
.forms-fields-table td {
|
||
grid-template-rows: auto minmax(var(--rj-control-h), auto);
|
||
}
|
||
|
||
.forms-fields-table td input:not([type="checkbox"]):not([type="radio"]),
|
||
.forms-fields-table td select {
|
||
height: var(--rj-control-h);
|
||
min-height: var(--rj-control-h);
|
||
padding-block: 0;
|
||
}
|
||
|
||
.forms-fields-table .users-table__actions .btn-icon {
|
||
width: var(--rj-control-h);
|
||
min-width: var(--rj-control-h);
|
||
flex-basis: var(--rj-control-h);
|
||
height: var(--rj-control-h);
|
||
}
|
||
|
||
/* AI settings: the budget bar and the image service select take half the
|
||
width, like one column of a two-column split; the fourth limit field
|
||
takes one third like its three neighbours instead of the whole row */
|
||
.ai-usage-budget {
|
||
max-width: calc(50% - var(--rj-space-3) / 2);
|
||
}
|
||
|
||
#aiImageServiceSection .ai-settings-compact {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
|
||
.form-row-inline:has(> .form-group > #aiDailyImageRequests) > .form-group {
|
||
flex: 0 1 calc((100% - 2 * var(--rj-space-4)) / 3);
|
||
}
|
||
|
||
@container settings (max-width: 40rem) {
|
||
.ai-usage-budget {
|
||
max-width: none;
|
||
}
|
||
|
||
#aiImageServiceSection .ai-settings-compact {
|
||
grid-template-columns: minmax(0, 1fr);
|
||
}
|
||
|
||
.form-row-inline:has(> .form-group > #aiDailyImageRequests) > .form-group {
|
||
flex: 1 1 15rem;
|
||
}
|
||
}
|
||
|
||
/* System status: its panels sit directly on the stage, not inside a card,
|
||
so they take the card surface like the settings panels */
|
||
#systemTab .dashboard-panel,
|
||
#iconsTab .icon-manager-card {
|
||
background: var(--rj-surface-panel, var(--rj-bg-elevated));
|
||
}
|