cms/resources/css/components/dashboard.css at 8b29e7e5652a2941cb6893d3f3ed943bde2a0534 · statamic/cms · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/* ==========================================================================
   DASHBOARD WIDGET EDITING
   ========================================================================== */

.dashboard-widget-inner {
    @apply @container/widget relative rounded-xl;
}

/* Hide the chrome on the dragging source — the mirror is what the user sees */
.dashboard-widget-sortable.draggable-source--is-dragging .dashboard-widget-inner {
    @apply opacity-50;
}

.dashboard-widget-sortable.draggable-source--is-dragging [data-widget-edit-chrome] {
    @apply opacity-0;
}

.dashboard-widget-sortable.draggable-source--is-dragging .dashboard-widget-inner::after {
    content: '';
    @apply pointer-events-none absolute inset-0 rounded-xl border-2 border-dashed border-ui-accent-bg/40 bg-ui-accent-bg/5 dark:bg-ui-accent-bg/10;
}

/* Mirror — the floating element that follows the cursor while dragging */
body > .draggable-mirror.dashboard-widget-mirror {
    @apply rounded-xl shadow-ui-lg ring-1 ring-black/5 dark:ring-white/10;
    transition: none !important;
    will-change: transform;
}

body > .draggable-mirror.dashboard-widget-mirror [data-widget-edit-chrome] {
    @apply bg-white/95 dark:bg-gray-850/95;
}

.dashboard-widget-placeholder {
    @apply flex min-h-54 flex-col items-center justify-center gap-3 rounded-xl bg-gray-50 px-6 py-10 text-center ring-1 ring-black/5 dark:bg-gray-900/40 dark:ring-white/10;
}

.dashboard-widget-empty {
    @apply flex min-h-64 flex-col items-center justify-center gap-4 rounded-xl bg-gray-50 px-8 py-16 text-center ring-1 ring-black/5 dark:bg-gray-900/30 dark:ring-white/10;
}