-
Notifications
You must be signed in to change notification settings - Fork 83
Expand file tree
/
Copy pathMessageBanner.css
More file actions
115 lines (101 loc) · 3.38 KB
/
MessageBanner.css
File metadata and controls
115 lines (101 loc) · 3.38 KB
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
/* ------------------------------------------------------------------ */
/* Message Banner CSS */
/* Last updated 2026-01-04 by @jgclark */
/* ------------------------------------------------------------------ */
/* CSS variables for info, warn, error, and success colors are generated by NPThemeToCSS.js in :root */
/* The CSS classes below use these variables with fallback values for backward compatibility */
.banner-panel {
margin: 0rem;
width: auto; /* Note: was 100% before, but this was causing the banner to be too wide on the screen */
border-width: 0px 0px 0px 6px;
border-style: solid;
display: grid;
grid-template-columns: fit-content(100%) 1fr fit-content(100%);
gap: 0.6rem;
justify-items: left;
align-items: center;
font-size: 1.0rem;
padding: 0.6rem 1.1rem;
/* Hide animation: fade and move up */
opacity: 0;
transform: translateY(-1rem);
transition:
opacity 0.2s cubic-bezier(0.4, 0, 1, 1),
transform 0.25s cubic-bezier(0.4, 0, 1, 1);
overflow: hidden;
}
.banner-panel.banner-panel--visible {
/* Show animation: fade and drop down */
opacity: 1;
transform: translateY(0);
transition:
opacity 0.25s cubic-bezier(0.24, 0.8, 0.47, 1),
transform 0.35s cubic-bezier(0.24, 0.8, 0.47, 1);
overflow: unset;
}
/* Floating mode (toast-like) styles */
.banner-panel--floating {
position: fixed;
top: calc(1rem + var(--noteplan-toolbar-height, 0px));
right: 1rem;
width: auto;
min-width: 300px;
max-width: 500px;
border-width: 0px 0px 0px 4px;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
font-size: 0.95rem;
padding: 0.8rem 1.1rem;
z-index: 10000; /* High z-index to ensure it appears on top of everything */
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
/* Hide animation: fade and slide out to right */
opacity: 0;
transform: translateX(100%);
transition:
opacity 0.2s cubic-bezier(0.4, 0, 1, 1),
transform 0.3s cubic-bezier(0.4, 0, 1, 1);
}
.banner-panel--floating.banner-panel--visible {
/* Show animation: fade and slide in from right */
opacity: 1;
transform: translateX(0);
transition:
opacity 0.25s cubic-bezier(0.24, 0.8, 0.47, 1),
transform 0.3s cubic-bezier(0.24, 0.8, 0.47, 1);
}
/* Base color and border classes are now in Root.css for reuse across components */
.banner-message-text {
white-space: pre-wrap;
}
.banner-close-button {
justify-self: right;
color: var(--fg-main-color, black);
cursor: pointer;
opacity: 0.7;
transition: opacity 0.2s;
}
.banner-close-button:hover {
opacity: 1;
}
/* Floating mode background colors (matching Toast styles) */
.banner-panel--floating.color-info {
background-color: var(--bg-info-color, rgba(219, 234, 254, 0.95));
color: var(--fg-info-color, #1e40af);
border-left-color: var(--fg-info-color, #3b82f6);
}
.banner-panel--floating.color-warn {
background-color: var(--bg-warn-color, rgba(254, 243, 199, 0.95));
color: var(--fg-warn-color, #b45309);
border-left-color: var(--fg-warn-color, #fbbf24);
}
.banner-panel--floating.color-error {
background-color: var(--bg-error-color, rgba(254, 226, 226, 0.95));
color: var(--fg-error-color, #991b1b);
border-left-color: var(--fg-error-color, #ef4444);
}
.banner-panel--floating.color-success {
background-color: var(--bg-ok-color, rgba(220, 252, 231, 0.95));
color: var(--fg-ok-color, #15803d);
border-left-color: var(--fg-ok-color, #22c55e);
}