fa/breadcrumb-the-shire
1
0
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

variablen und empty states

Browse Source
This commit is contained in:
Felix Schneider
2026-03-12 16:47:53 +01:00
parent 0b9014dcbf
commit cb7256aebc
15 changed files with 323 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
i18n/default_de.json
View File

@@ -521,6 +521,7 @@
"Assigned departments": "Zugewiesene Abteilungen",
"Select departments": "Abteilungen auswählen",
"Departments for tenant": "Abteilungen für Mandant",
"No departments": "Keine Abteilungen",
"No departments available for this tenant": "Für diesen Mandanten sind keine Abteilungen verfügbar",
"Assign tenants first to select departments": "Bitte zuerst Mandanten zuweisen, um Abteilungen auszuwählen",
"Department options refresh after save": "Abteilungsoptionen werden nach dem Speichern aktualisiert",

1
i18n/default_en.json
View File

@@ -521,6 +521,7 @@
"Assigned departments": "Assigned departments",
"Select departments": "Select departments",
"Departments for tenant": "Departments for tenant",
"No departments": "No departments",
"No departments available for this tenant": "No departments available for this tenant",
"Assign tenants first to select departments": "Assign tenants first to select departments",
"Department options refresh after save": "Department options refresh after save",

2
pages/admin/departments/index(default).phtml
View File

@@ -25,7 +25,7 @@ $listTitle = t('Departments');
ob_start();
?>
<?php if ($canCreateDepartments): ?>
<a role="button" class="primary" href="<?php e(requestPathWithReturnTarget('admin/departments/create', Request::pathWithQuery())); ?>">
<a role="button" class="app-action-success" href="<?php e(requestPathWithReturnTarget('admin/departments/create', Request::pathWithQuery())); ?>">
<i class="bi bi-plus"></i> <?php e(t('Create department')); ?>
</a>
<?php endif; ?>

2
pages/admin/permissions/index(default).phtml
View File

@@ -23,7 +23,7 @@ $listTitle = t('Permissions');
ob_start();
?>
<?php if ($canCreatePermissions): ?>
<a role="button" class="primary" href="<?php e(requestPathWithReturnTarget('admin/permissions/create', Request::pathWithQuery())); ?>">
<a role="button" class="app-action-success" href="<?php e(requestPathWithReturnTarget('admin/permissions/create', Request::pathWithQuery())); ?>">
<i class="bi bi-plus"></i> <?php e(t('Create permission')); ?>
</a>
<?php endif; ?>

2
pages/admin/roles/index(default).phtml
View File

@@ -23,7 +23,7 @@ $listTitle = t('Roles');
ob_start();
?>
<?php if ($canCreateRoles): ?>
<a role="button" class="primary" href="<?php e(requestPathWithReturnTarget('admin/roles/create', Request::pathWithQuery())); ?>">
<a role="button" class="app-action-success" href="<?php e(requestPathWithReturnTarget('admin/roles/create', Request::pathWithQuery())); ?>">
<i class="bi bi-plus"></i> <?php e(t('Create role')); ?>
</a>
<?php endif; ?>

2
pages/admin/tenants/index(default).phtml
View File

@@ -23,7 +23,7 @@ $listTitle = t('Tenants');
ob_start();
?>
<?php if ($canCreateTenants): ?>
<a role="button" class="primary" href="<?php e(requestPathWithReturnTarget('admin/tenants/create', Request::pathWithQuery())); ?>">
<a role="button" class="app-action-success" href="<?php e(requestPathWithReturnTarget('admin/tenants/create', Request::pathWithQuery())); ?>">
<i class="bi bi-plus"></i> <?php e(t('Create tenant')); ?>
</a>
<?php endif; ?>

2
pages/admin/users/index(default).phtml
View File

@@ -65,7 +65,7 @@ ob_start();
</details>
<?php if ($canCreateUser): ?>
<a role="button" class="primary" href="<?php e(requestPathWithReturnTarget('admin/users/create', Request::pathWithQuery())); ?>">
<a role="button" class="app-action-success" href="<?php e(requestPathWithReturnTarget('admin/users/create', Request::pathWithQuery())); ?>">
<i class="bi bi-plus"></i> <?php e(t('Create user')); ?>
</a>
<?php endif; ?>

47
templates/partials/app-details-aside-actions.phtml
View File

@@ -12,6 +12,38 @@ $asideActions = is_array($asideActions ?? null) ? $asideActions : [];
if (!$asideActions) {
return;
}
$appendCssClass = static function (string $baseClass, string $appendClass): string {
$combined = trim($baseClass . ' ' . $appendClass);
return preg_replace('/\s+/', ' ', $combined) ?? $combined;
};
$resolveToneClass = static function (string $tone, string $detailActionKind, string $name, string $value): string {
$normalizedTone = strtolower(trim($tone));
if ($normalizedTone === 'success') {
return 'app-action-success';
}
if ($normalizedTone === 'danger') {
return 'app-action-danger';
}
if ($normalizedTone === 'neutral') {
return '';
}
$normalizedActionKind = strtolower(trim($detailActionKind));
if (in_array($normalizedActionKind, ['delete', 'danger', 'purge', 'revoke'], true)) {
return 'app-action-danger';
}
$normalizedName = strtolower(trim($name));
$normalizedValue = strtolower(trim($value));
if (
$normalizedName === 'action'
&& in_array($normalizedValue, ['create', 'create_close', 'save_close'], true)
) {
return 'app-action-success';
}
return '';
};
?>
<details name="details-actions">
@@ -42,7 +74,14 @@ if (!$asideActions) {
$itemTarget = (string) ($item['target'] ?? '');
$itemDetailActionKind = strtolower(trim((string) ($item['detailActionKind'] ?? '')));
$itemDetailSubmitLock = strtolower(trim((string) ($item['detailSubmitLock'] ?? '')));
$itemTone = (string) ($item['tone'] ?? '');
$itemName = (string) ($item['name'] ?? '');
$itemValue = (string) ($item['value'] ?? '');
$itemFields = is_array($item['fields'] ?? null) ? $item['fields'] : [];
$itemButtonClass = $appendCssClass(
$itemButtonClass,
$resolveToneClass($itemTone, $itemDetailActionKind, $itemName, $itemValue)
);
?>
<?php if ($itemAction !== ''): ?>
<form
@@ -77,6 +116,14 @@ if (!$asideActions) {
$itemLinkClass = (string) ($item['class'] ?? 'secondary outline small');
$itemTarget = (string) ($item['target'] ?? '');
$itemRel = (string) ($item['rel'] ?? '');
$itemTone = (string) ($item['tone'] ?? '');
$itemDetailActionKind = strtolower(trim((string) ($item['detailActionKind'] ?? '')));
$itemName = (string) ($item['name'] ?? '');
$itemValue = (string) ($item['value'] ?? '');
$itemLinkClass = $appendCssClass(
$itemLinkClass,
$resolveToneClass($itemTone, $itemDetailActionKind, $itemName, $itemValue)
);
?>
<?php if ($itemHref !== ''): ?>
<a

52
templates/partials/app-details-titlebar.phtml
View File

@@ -23,6 +23,38 @@ $unsavedIndicatorLabelMany = (string) ($titlebar['unsavedIndicatorLabelMany'] ??
$actionPolicyEnabled = !array_key_exists('actionPolicy', $titlebar) ? true : !empty($titlebar['actionPolicy']);
$actions = is_array($titlebar['actions'] ?? null) ? $titlebar['actions'] : [];
$menuItems = is_array($titlebar['menuItems'] ?? null) ? $titlebar['menuItems'] : [];
$appendCssClass = static function (string $baseClass, string $appendClass): string {
$combined = trim($baseClass . ' ' . $appendClass);
return preg_replace('/\s+/', ' ', $combined) ?? $combined;
};
$resolveToneClass = static function (string $tone, string $detailActionKind, string $name, string $value): string {
$normalizedTone = strtolower(trim($tone));
if ($normalizedTone === 'success') {
return 'app-action-success';
}
if ($normalizedTone === 'danger') {
return 'app-action-danger';
}
if ($normalizedTone === 'neutral') {
return '';
}
$normalizedActionKind = strtolower(trim($detailActionKind));
if (in_array($normalizedActionKind, ['delete', 'danger', 'purge', 'revoke'], true)) {
return 'app-action-danger';
}
$normalizedName = strtolower(trim($name));
$normalizedValue = strtolower(trim($value));
if (
$normalizedName === 'action'
&& in_array($normalizedValue, ['create', 'create_close', 'save_close'], true)
) {
return 'app-action-success';
}
return '';
};
?>
<div
@@ -69,7 +101,14 @@ $menuItems = is_array($titlebar['menuItems'] ?? null) ? $titlebar['menuItems'] :
$itemTarget = (string) ($item['target'] ?? '');
$itemDetailActionKind = strtolower(trim((string) ($item['detailActionKind'] ?? '')));
$itemDetailSubmitLock = strtolower(trim((string) ($item['detailSubmitLock'] ?? '')));
$itemTone = (string) ($item['tone'] ?? '');
$itemName = (string) ($item['name'] ?? '');
$itemValue = (string) ($item['value'] ?? '');
$itemFields = is_array($item['fields'] ?? null) ? $item['fields'] : [];
$itemButtonClass = $appendCssClass(
$itemButtonClass,
$resolveToneClass($itemTone, $itemDetailActionKind, $itemName, $itemValue)
);
?>
<?php if ($itemAction !== ''): ?>
<form
@@ -104,6 +143,14 @@ $menuItems = is_array($titlebar['menuItems'] ?? null) ? $titlebar['menuItems'] :
$itemLinkClass = (string) ($item['class'] ?? 'transparent');
$itemTarget = (string) ($item['target'] ?? '');
$itemRel = (string) ($item['rel'] ?? '');
$itemTone = (string) ($item['tone'] ?? '');
$itemDetailActionKind = strtolower(trim((string) ($item['detailActionKind'] ?? '')));
$itemName = (string) ($item['name'] ?? '');
$itemValue = (string) ($item['value'] ?? '');
$itemLinkClass = $appendCssClass(
$itemLinkClass,
$resolveToneClass($itemTone, $itemDetailActionKind, $itemName, $itemValue)
);
?>
<?php if ($itemHref !== ''): ?>
<a role="button" class="<?php e($itemLinkClass); ?>" href="<?php e($itemHref); ?>"
@@ -139,6 +186,7 @@ $menuItems = is_array($titlebar['menuItems'] ?? null) ? $titlebar['menuItems'] :
$itemConfirmFocus = strtolower(trim((string) ($item['confirmFocus'] ?? '')));
$itemDetailActionKind = strtolower(trim((string) ($item['detailActionKind'] ?? '')));
$itemDetailSubmitLock = strtolower(trim((string) ($item['detailSubmitLock'] ?? '')));
$itemTone = (string) ($item['tone'] ?? '');
$itemDisabled = !empty($item['disabled']);
$itemDetailSavePrimary = false;
if (array_key_exists('detailSavePrimary', $item)) {
@@ -156,6 +204,10 @@ $menuItems = is_array($titlebar['menuItems'] ?? null) ? $titlebar['menuItems'] :
$itemDetailActionKind = 'save-close';
}
}
$itemClass = $appendCssClass(
$itemClass,
$resolveToneClass($itemTone, $itemDetailActionKind, $itemName, $itemValue)
);
?>
<button
type="<?php e($itemType); ?>"

10
templates/partials/app-empty-state.phtml
View File

@@ -14,7 +14,7 @@ if ($emptyMessage === '') {
$emptyHint = trim((string) ($emptyState['hint'] ?? ''));
$emptySize = strtolower(trim((string) ($emptyState['size'] ?? 'default')));
if (!in_array($emptySize, ['default', 'compact'], true)) {
if (!in_array($emptySize, ['default', 'compact', 'small'], true)) {
$emptySize = 'default';
}
@@ -23,6 +23,8 @@ if (!in_array($emptyAlign, ['center', 'left'], true)) {
$emptyAlign = 'center';
}
$emptyShowIcon = (bool) ($emptyState['icon'] ?? true);
$emptyAction = is_array($emptyState['action'] ?? null) ? $emptyState['action'] : [];
$emptyActionLabel = trim((string) ($emptyAction['label'] ?? ''));
$emptyActionHref = trim((string) ($emptyAction['href'] ?? ''));
@@ -34,6 +36,12 @@ $showAction = $emptyActionLabel !== '' && ($emptyActionHref !== '' || $emptyActi
?>
<div class="app-empty-state" data-size="<?php e($emptySize); ?>" data-align="<?php e($emptyAlign); ?>">
<?php if ($emptyShowIcon): ?>
<svg class="app-empty-state-icon" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline>
<path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path>
</svg>
<?php endif; ?>
<p class="app-empty-state-message"><?php e($emptyMessage); ?></p>
<?php if ($emptyHint !== ''): ?>
<small class="app-empty-state-hint"><?php e($emptyHint); ?></small>

15
templates/partials/app-main-aside.phtml
View File

@@ -420,6 +420,18 @@ $csrfToken = (string) ($layoutNav['csrfToken'] ?? '');
</a>
</small>
<ul>
<?php if (!$departments): ?>
<li>
<?php
$emptyState = [
'message' => t('No departments'),
'size' => 'small',
'align' => 'center',
];
require templatePath('partials/app-empty-state.phtml');
?>
</li>
<?php else: ?>
<?php foreach ($departments as $department): ?>
<?php
$departmentId = (int) ($department['id'] ?? 0);
@@ -435,12 +447,11 @@ $csrfToken = (string) ($layoutNav['csrfToken'] ?? '');
<li>
<a href="<?php e($href); ?>" class="<?php e($isActive ? 'active' : ''); ?>"
<?php echo $isActive ? 'aria-current="page"' : ''; ?>>
<?php e($departmentName); ?>
</a>
</li>
<?php endforeach; ?>
<?php endif; ?>
</ul>
</li>
<?php endforeach; ?>

50
web/css/base/variables.base.css
View File

@@ -70,6 +70,10 @@
--tooltip-radius: 8px;
--tooltip-offset: 8px;
--app-badge-background-color: coral;
--app-empty-border-color: var(--app-muted-border-color);
--app-empty-bg: var(--app-card-background-color);
--app-empty-text: var(--app-color);
--app-empty-hint: var(--app-muted-color);
}
/* Icons */
@@ -293,6 +297,20 @@
--app-notice-error-color: var(--app-form-element-invalid-border-color);
--app-notice-error-border-color: var(--app-form-element-invalid-border-color);
--app-notice-error-background-color: rgb(255 0 0 / 13%);
--app-action-success-background: #1f7a45;
--app-action-success-border: #1f7a45;
--app-action-success-color: #fff;
--app-action-success-hover-background: #176238;
--app-action-success-hover-border: #176238;
--app-action-success-focus-color: rgba(31, 122, 69, 0.45);
--app-action-success-outline-background: rgba(31, 122, 69, 0.14);
--app-action-danger-background: #b33636;
--app-action-danger-border: #b33636;
--app-action-danger-color: #fff;
--app-action-danger-hover-background: #952d2d;
--app-action-danger-hover-border: #952d2d;
--app-action-danger-focus-color: rgba(179, 54, 54, 0.45);
--app-action-danger-outline-background: rgba(179, 54, 54, 0.14);
--app-switch-background-color: #bfc7d9;
--app-switch-checked-background-color: var(--app-primary-background);
--app-switch-color: #fff;
@@ -311,10 +329,6 @@
--app-card-box-shadow: var(--app-box-shadow);
--app-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--app-details-card-open-summary-bg: var(--app-card-sectioning-background-color);
--app-empty-border-color: var(--app-muted-border-color);
--app-empty-bg: var(--app-card-background-color);
--app-empty-text: var(--app-color);
--app-empty-hint: var(--app-muted-color);
--app-dropdown-background-color: #fff;
--app-dropdown-border-color: #eff1f4;
--app-dropdown-box-shadow: var(--app-box-shadow);
@@ -531,6 +545,20 @@
--app-form-element-valid-focus-color: var(
--app-form-element-valid-active-border-color
);
--app-action-success-background: #1f7a45;
--app-action-success-border: #1f7a45;
--app-action-success-color: #fff;
--app-action-success-hover-background: #176238;
--app-action-success-hover-border: #176238;
--app-action-success-focus-color: rgba(31, 122, 69, 0.5);
--app-action-success-outline-background: rgba(31, 122, 69, 0.2);
--app-action-danger-background: #b33636;
--app-action-danger-border: #b33636;
--app-action-danger-color: #fff;
--app-action-danger-hover-background: #952d2d;
--app-action-danger-hover-border: #952d2d;
--app-action-danger-focus-color: rgba(179, 54, 54, 0.5);
--app-action-danger-outline-background: rgba(179, 54, 54, 0.2);
--app-switch-background-color: #333c4e;
--app-switch-checked-background-color: var(--app-primary-background);
--app-switch-color: #fff;
@@ -766,6 +794,20 @@
--app-notice-error-color: var(--app-form-element-invalid-border-color);
--app-notice-error-border-color: var(--app-form-element-invalid-border-color);
--app-notice-error-background-color: rgba(149.5, 74, 80, 0.2);
--app-action-success-background: #1f7a45;
--app-action-success-border: #1f7a45;
--app-action-success-color: #fff;
--app-action-success-hover-background: #176238;
--app-action-success-hover-border: #176238;
--app-action-success-focus-color: rgba(31, 122, 69, 0.5);
--app-action-success-outline-background: rgba(31, 122, 69, 0.2);
--app-action-danger-background: #b33636;
--app-action-danger-border: #b33636;
--app-action-danger-color: #fff;
--app-action-danger-hover-background: #952d2d;
--app-action-danger-hover-border: #952d2d;
--app-action-danger-focus-color: rgba(179, 54, 54, 0.5);
--app-action-danger-outline-background: rgba(179, 54, 54, 0.2);
--app-switch-background-color: #333c4e;
--app-switch-checked-background-color: var(--app-primary-background);
--app-switch-color: #fff;

28
web/css/base/variables.contrast.css
View File

@@ -21,6 +21,20 @@ html[data-contrast="high"][data-theme="light"],
--app-blockquote-border-color: var(--app-muted-border-color);
--app-tooltip-background-color: #000;
--app-tooltip-color: #fff;
--app-action-success-background: #0f5f00;
--app-action-success-border: #0f5f00;
--app-action-success-color: #fff;
--app-action-success-hover-background: #084700;
--app-action-success-hover-border: #084700;
--app-action-success-focus-color: rgba(15, 95, 0, 0.65);
--app-action-success-outline-background: rgba(15, 95, 0, 0.2);
--app-action-danger-background: #8f0000;
--app-action-danger-border: #8f0000;
--app-action-danger-color: #fff;
--app-action-danger-hover-background: #6f0000;
--app-action-danger-hover-border: #6f0000;
--app-action-danger-focus-color: rgba(143, 0, 0, 0.65);
--app-action-danger-outline-background: rgba(143, 0, 0, 0.2);
}
html[data-contrast="high"][data-theme^="dark"],
@@ -42,5 +56,19 @@ html[data-contrast="high"][data-theme^="dark"],
--app-blockquote-border-color: var(--app-muted-border-color);
--app-tooltip-background-color: #fff;
--app-tooltip-color: #0b0f14;
--app-action-success-background: #0f5f00;
--app-action-success-border: #0f5f00;
--app-action-success-color: #fff;
--app-action-success-hover-background: #084700;
--app-action-success-hover-border: #084700;
--app-action-success-focus-color: rgba(15, 95, 0, 0.7);
--app-action-success-outline-background: rgba(15, 95, 0, 0.24);
--app-action-danger-background: #8f0000;
--app-action-danger-border: #8f0000;
--app-action-danger-color: #fff;
--app-action-danger-hover-background: #6f0000;
--app-action-danger-hover-border: #6f0000;
--app-action-danger-focus-color: rgba(143, 0, 0, 0.7);
--app-action-danger-outline-background: rgba(143, 0, 0, 0.24);
}
}

95
web/css/components/app-buttons.css
View File

@@ -1,8 +1,54 @@
@layer components {
.danger:is(button, [type="submit"], [type="button"], [role="button"]) {
--app-background-color: var(--app-notice-error-border-color);
--app-border-color: var(--app-notice-error-border-color);
--app-color: var(--app-secondary-inverse);
.app-action-success:is(button, [type="submit"], [type="button"], [role="button"]) {
--app-background-color: var(--app-action-success-background);
--app-border-color: var(--app-action-success-border);
--app-color: var(--app-action-success-color);
}
.app-action-success:is(button, [type="submit"], [type="button"], [role="button"]):is(
[aria-current]:not([aria-current="false"]),
:hover,
:active,
:focus
) {
--app-background-color: var(--app-action-success-hover-background);
--app-border-color: var(--app-action-success-hover-border);
--app-color: var(--app-action-success-color);
}
.app-action-success:is(button, [type="submit"], [type="button"], [role="button"]).outline {
--app-background-color: transparent;
--app-border-color: var(--app-action-success-border);
--app-color: var(--app-action-success-border);
}
.app-action-success:is(
button,
[type="submit"],
[type="button"],
[role="button"]
).outline:is(
[aria-current]:not([aria-current="false"]),
:hover,
:active,
:focus
) {
--app-background-color: var(--app-action-success-outline-background);
--app-border-color: var(--app-action-success-border);
--app-color: var(--app-action-success-border);
}
.app-action-success:is(button, [type="submit"], [type="button"], [role="button"]):focus {
--app-box-shadow:
var(--app-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--app-outline-width) var(--app-action-success-focus-color);
}
.danger:is(button, [type="submit"], [type="button"], [role="button"]),
.app-action-danger:is(button, [type="submit"], [type="button"], [role="button"]) {
--app-background-color: var(--app-action-danger-background);
--app-border-color: var(--app-action-danger-border);
--app-color: var(--app-action-danger-color);
}
.danger:is(button, [type="submit"], [type="button"], [role="button"]):is(
@@ -10,16 +56,23 @@
:hover,
:active,
:focus
),
.app-action-danger:is(button, [type="submit"], [type="button"], [role="button"]):is(
[aria-current]:not([aria-current="false"]),
:hover,
:active,
:focus
) {
--app-background-color: var(--app-form-element-invalid-active-border-color);
--app-border-color: var(--app-form-element-invalid-active-border-color);
--app-color: var(--app-secondary-inverse);
--app-background-color: var(--app-action-danger-hover-background);
--app-border-color: var(--app-action-danger-hover-border);
--app-color: var(--app-action-danger-color);
}
.danger:is(button, [type="submit"], [type="button"], [role="button"]).outline {
.danger:is(button, [type="submit"], [type="button"], [role="button"]).outline,
.app-action-danger:is(button, [type="submit"], [type="button"], [role="button"]).outline {
--app-background-color: transparent;
--app-border-color: var(--app-notice-error-border-color);
--app-color: var(--app-notice-error-border-color);
--app-border-color: var(--app-action-danger-border);
--app-color: var(--app-action-danger-border);
}
.danger:is(
@@ -32,15 +85,27 @@
:hover,
:active,
:focus
),
.app-action-danger:is(
button,
[type="submit"],
[type="button"],
[role="button"]
).outline:is(
[aria-current]:not([aria-current="false"]),
:hover,
:active,
:focus
) {
--app-background-color: var(--app-notice-error-background-color);
--app-border-color: var(--app-notice-error-border-color);
--app-color: var(--app-notice-error-border-color);
--app-background-color: var(--app-action-danger-outline-background);
--app-border-color: var(--app-action-danger-border);
--app-color: var(--app-action-danger-border);
}
.danger:is(button, [type="submit"], [type="button"], [role="button"]):focus {
.danger:is(button, [type="submit"], [type="button"], [role="button"]):focus,
.app-action-danger:is(button, [type="submit"], [type="button"], [role="button"]):focus {
--app-box-shadow:
var(--app-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--app-outline-width) var(--app-form-element-invalid-focus-color);
0 0 0 var(--app-outline-width) var(--app-action-danger-focus-color);
}
}

29
web/css/components/app-empty-state.css
View File

@@ -4,25 +4,43 @@
border-radius: var(--app-border-radius);
background: var(--app-empty-bg);
color: var(--app-empty-text);
padding: calc(var(--app-spacing) * 0.875) var(--app-spacing);
padding: calc(var(--app-spacing) * 1.5) var(--app-spacing);
display: grid;
gap: calc(var(--app-spacing) * 0.35);
text-align: center;
justify-items: center;
}
.app-empty-state[data-size="compact"] {
padding: calc(var(--app-spacing) * 0.625) calc(var(--app-spacing) * 0.75);
padding: calc(var(--app-spacing) * 0.75) calc(var(--app-spacing) * 0.75);
gap: calc(var(--app-spacing) * 0.25);
}
.app-empty-state[data-size="small"] {
padding: calc(var(--app-spacing) * 0.5) calc(var(--app-spacing) * 0.5);
gap: calc(var(--app-spacing) * 0.15);
}
.app-empty-state[data-align="left"] {
text-align: left;
justify-items: start;
}
.app-empty-state-icon {
color: var(--app-empty-hint);
opacity: 0.5;
margin-bottom: calc(var(--app-spacing) * 0.15);
}
.app-empty-state[data-size="compact"] .app-empty-state-icon {
width: 28px;
height: 28px;
margin-bottom: 0;
}
.app-empty-state-message {
margin: 0;
color: var(--app-empty-text);
font-size: 0.95rem;
color: var(--app-empty-hint);
font-size: 12px;
line-height: 1.4;
}
@@ -31,11 +49,12 @@
color: var(--app-empty-hint);
font-size: 0.85rem;
line-height: 1.3;
opacity: 0.75;
}
.app-empty-state-action {
justify-self: center;
margin-top: calc(var(--app-spacing) * 0.15);
margin-top: calc(var(--app-spacing) * 0.25);
}
.app-empty-state[data-align="left"] .app-empty-state-action {