style(next): refactor

This commit is contained in:
Adorian Doran 2025-01-09 00:01:02 +02:00
parent 55048e36e7
commit 4ce2fb701f

View File

@ -1563,9 +1563,22 @@ body .calendar-dropdown-widget .calendar-body a:hover {
/* Help */ /* Help */
.help-dialog {
--help-background-color: #fffc;
--help-backdrop-blur: 10px;
--help-card-background: var(--card-background-color);
--help-card-shadow: 2px 2px 2px rgba(0, 0, 0, .10);
--help-card-heading-color: #797979;
--help-kbd-shortcut-color: #3f3f3f;
--help-kbd-shortcut-background: white;
--help-kbd-shortcut-shadow: 1px 1px 2px rgba(0, 0, 0, .3);
--help-code-color: black;
--help-code-background: #d7d5d5;
}
.help-dialog .modal-content { .help-dialog .modal-content {
--modal-background-color: #fffc; --modal-background-color: var(--help-background-color);
backdrop-filter: blur(10px); backdrop-filter: blur(var(--help-backdrop-blur));
} }
.help-dialog .help-cards { .help-dialog .help-cards {
@ -1578,20 +1591,20 @@ body .calendar-dropdown-widget .calendar-body a:hover {
margin: 0; margin: 0;
width: auto; width: auto;
border: none; border: none;
padding: 16px 8px;
background: unset; background: unset;
padding: 16px 8px;
break-inside: avoid-column; break-inside: avoid-column;
} }
.help-dialog .card-body { .help-dialog .card-body {
box-shadow: 2px 2px 2px rgba(0, 0, 0, .10); box-shadow: var(--help-card-shadow);
border-radius: 6px; border-radius: 6px;
background: var(--card-background-color); background: var(--help-card-background);
} }
.help-dialog .card-body h5, .help-dialog .card-body h5,
.help-dialog .card-body h6 { .help-dialog .card-body h6 {
color: #797979; color: var(--help-card-heading-color);
font-weight: 600; font-weight: 600;
} }
@ -1604,7 +1617,7 @@ body .calendar-dropdown-widget .calendar-body a:hover {
padding-bottom: .5em; padding-bottom: .5em;
} }
/* Help card item */
.help-dialog .help-cards ul { .help-dialog .help-cards ul {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
@ -1614,24 +1627,27 @@ body .calendar-dropdown-widget .calendar-body a:hover {
margin-top: .4em; margin-top: .4em;
} }
/* Keyboard shortcut */
.help-dialog .help-cards kbd { .help-dialog .help-cards kbd {
box-shadow: 1px 1px 2px rgba(0, 0, 0, .3); box-shadow: var(--help-kbd-shortcut-shadow);
margin: 0 4px; margin: 0 4px;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
padding: 2px 10px; padding: 2px 10px;
background: white; background: var(--help-kbd-shortcut-background);
color: #3f3f3f; color: var(--help-kbd-shortcut-color);
font-weight: 500; font-weight: 500;
letter-spacing: .5pt; letter-spacing: .5pt;
} }
.help-dialog .help-cards code {
border-radius: 4px;
background: #d7d5d5;
padding: 0 8px;
}
.help-dialog .help-cards kbd:first-child { .help-dialog .help-cards kbd:first-child {
margin-left: 0; margin-left: 0;
}
/* Inline code - used for Markdown samples */
.help-dialog .help-cards code {
border-radius: 4px;
background: var(--help-code-background);
padding: 0 8px;
color: var(--help-code-color);
} }