mirror of
https://github.com/TriliumNext/Notes.git
synced 2025-08-11 11:02:27 +08:00
style(next): reorganize CSS
This commit is contained in:
Adorian Doran
parent
2031882c0d
commit
f6e0e93629
@ -1,5 +1,6 @@
|
|||||||
@import url(./forms.css);
|
@import url(./forms.css);
|
||||||
@import url(./shell.css);
|
@import url(./shell.css);
|
||||||
|
@import url(./dialogs.css);
|
||||||
@import url(./ribbon.css);
|
@import url(./ribbon.css);
|
||||||
@import url(./settings.css);
|
@import url(./settings.css);
|
||||||
@import url(./notes/empty.css);
|
@import url(./notes/empty.css);
|
||||||
|
|||||||
373
src/public/stylesheets/theme-next/dialogs.css
Normal file
373
src/public/stylesheets/theme-next/dialogs.css
Normal file
@ -0,0 +1,373 @@
|
|||||||
|
/*
|
||||||
|
* MODALS
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Modal body */
|
||||||
|
.modal .modal-content {
|
||||||
|
box-shadow: 0 .5em 3em .5em var(--modal-shadow-color);
|
||||||
|
border: 1px solid var(--modal-border-color);
|
||||||
|
background: var(--modal-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modal header */
|
||||||
|
.modal .modal-header {
|
||||||
|
border-bottom: unset;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal .modal-header .modal-title {
|
||||||
|
flex-grow: 1;
|
||||||
|
font-size: 1.2em;
|
||||||
|
color: var(--modal-title-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modal and toast control buttons (close and help) */
|
||||||
|
|
||||||
|
.modal .modal-header .btn-close,
|
||||||
|
.modal .modal-header .help-button,
|
||||||
|
#toast-container .toast .toast-header .btn-close {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 8px;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
padding: 0;
|
||||||
|
width: var(--modal-control-button-size);
|
||||||
|
height: var(--modal-control-button-size);
|
||||||
|
background: var(--modal-control-button-background);
|
||||||
|
font-size: var(--modal-control-button-size);
|
||||||
|
line-height: normal;
|
||||||
|
font-weight: normal;
|
||||||
|
color: var(--modal-control-button-color);
|
||||||
|
opacity: 1;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal .modal-header .btn-close,
|
||||||
|
#toast-container .toast .toast-header .btn-close {
|
||||||
|
--modal-control-button-hover-background: var(--modal-close-button-hover-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal .modal-header .btn-close::after,
|
||||||
|
#toast-container .toast .toast-header .btn-close::after {
|
||||||
|
content: "\ec8d";
|
||||||
|
font-family: boxicons;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal .modal-header .help-button {
|
||||||
|
margin-right: 0;
|
||||||
|
font-size: calc(var(--modal-control-button-size) * .75);
|
||||||
|
font-family: unset;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal .modal-header .btn-close:hover,
|
||||||
|
.modal .modal-header .help-button:hover,
|
||||||
|
#toast-container .toast .toast-header .btn-close:hover {
|
||||||
|
background: var(--modal-control-button-hover-background);
|
||||||
|
color: var(--modal-control-button-hover-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal .modal-header .btn-close:active,
|
||||||
|
.modal .modal-header .help-button:active,
|
||||||
|
#toast-container .toast .toast-header .btn-close:active {
|
||||||
|
transform: scale(.85);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal .modal-header .btn-close:focus,
|
||||||
|
.modal .modal-header .help-button:focus,
|
||||||
|
#toast-container .toast .toast-header .btn-close:focus {
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal .modal-header .btn-close:focus-visible,
|
||||||
|
.modal .modal-header .help-button:focus-visible,
|
||||||
|
#toast-container .toast .toast-header .btn-close:focus-visible {
|
||||||
|
outline: 2px solid var(--input-focus-outline-color);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modal footer */
|
||||||
|
.modal .modal-footer {
|
||||||
|
background: var(--modal-footer-background);
|
||||||
|
color: var(--modal-footer-color);
|
||||||
|
border-top: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* JUMP TO NOTE
|
||||||
|
*/
|
||||||
|
|
||||||
|
.jump-to-note-dialog .modal-dialog {
|
||||||
|
--modal-background-color: var(--menu-background-color);
|
||||||
|
--modal-footer-background: transparent;
|
||||||
|
--bs-modal-header-border-width: 0;
|
||||||
|
--bs-modal-footer-border-width: 0;
|
||||||
|
--bs-modal-footer-gap: 0;
|
||||||
|
|
||||||
|
backdrop-filter: var(--dropdown-backdrop-filter);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jump-to-note-dialog .modal-content {
|
||||||
|
--bs-modal-header-padding-x: 0;
|
||||||
|
|
||||||
|
box-shadow: 0 10px 20px rgba(0, 0, 0, var(--dropdown-shadow-opacity));
|
||||||
|
border: 1px solid var(--dropdown-border-color);
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jump-to-note-dialog .modal-header {
|
||||||
|
padding: unset !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jump-to-note-dialog .modal-body {
|
||||||
|
padding: 26px 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Search box wrapper */
|
||||||
|
.jump-to-note-dialog .input-group {
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jump-to-note-dialog .input-group:hover {
|
||||||
|
background: var(--quick-search-hover-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Focused search box */
|
||||||
|
.jump-to-note-dialog .input-group:focus-within {
|
||||||
|
border-color: var(--quick-search-focus-border);
|
||||||
|
background: var(--quick-search-focus-background);
|
||||||
|
color: var(--quick-search-focus-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jump-to-note-dialog .input-clearer-button {
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* RECENT CHANGES
|
||||||
|
*/
|
||||||
|
|
||||||
|
.recent-changes-dialog .modal-body {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-changes-content {
|
||||||
|
margin: var(--bs-modal-padding);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Date headings */
|
||||||
|
.recent-changes-content > div > b {
|
||||||
|
position: sticky;
|
||||||
|
display: block;
|
||||||
|
top: 0;
|
||||||
|
background: var(--modal-background-color);
|
||||||
|
padding: 10px 0 10px calc(var(--timeline-left-gap) + var(--timeline-right-gap));
|
||||||
|
font-size: 1.25em;
|
||||||
|
font-weight: 300;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-changes-content ul {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Timeline items */
|
||||||
|
.recent-changes-content ul li {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
margin: 0;
|
||||||
|
border: unset;
|
||||||
|
padding-top: var(--timeline-item-top-padding);
|
||||||
|
padding-bottom: var(--timeline-item-bottom-padding);
|
||||||
|
padding-left: calc(var(--timeline-left-gap) + var(--timeline-right-gap));
|
||||||
|
padding-right: var(--timeline-left-gap);
|
||||||
|
color: var(--active-item-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-changes-content li > span:first-child::after {
|
||||||
|
/* Remove the dash between time and note title */
|
||||||
|
content: "" !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-changes-content ul li:not(.deleted-note):hover {
|
||||||
|
border-radius: 8px;
|
||||||
|
background: var(--hover-item-background-color);
|
||||||
|
color: var(--hover-item-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-changes-content ul li .note-path {
|
||||||
|
color: var(--muted-text-color);
|
||||||
|
font-size: 0.75em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Item time */
|
||||||
|
.recent-changes-content ul li > span:first-child {
|
||||||
|
display: inline-block;
|
||||||
|
min-width: 80px;
|
||||||
|
vertical-align: top;
|
||||||
|
color: var(--muted-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Item title & path container */
|
||||||
|
.recent-changes-content ul li > span:nth-child(2) {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Item title link */
|
||||||
|
|
||||||
|
.recent-changes-content ul li .note-title a {
|
||||||
|
color: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-changes-content ul li .note-title a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Item title for deleted notes */
|
||||||
|
.recent-changes-content ul li.deleted-note .note-title > .note-title {
|
||||||
|
text-decoration: line-through;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Item path */
|
||||||
|
.recent-changes-content ul li > span:nth-child(2) small {
|
||||||
|
display: block;
|
||||||
|
line-height: 1;
|
||||||
|
opacity: 0.75;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Timeline connector */
|
||||||
|
.recent-changes-content ul li::before,
|
||||||
|
.recent-changes-content > div > b::before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
top: var(--connector-top, 0);
|
||||||
|
left: calc(var(--timeline-left-gap) + ((var(--timeline-bullet-size) - var(--timeline-connector-size)) / 2));
|
||||||
|
bottom: var(--connector-bottom, 0);
|
||||||
|
width: var(--timeline-connector-size);
|
||||||
|
border-radius: var(--connector-radius, 0) var(--connector-radius, 0) 0 0;
|
||||||
|
background: var(--timeline-connector-color);
|
||||||
|
transition: background-color 400ms ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-changes-content ul li:hover:before {
|
||||||
|
mix-blend-mode: var(--timeline-connector-hover-blend-mode);
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-changes-content > div:hover {
|
||||||
|
--timeline-connector-color: var(--timeline-connector-active-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The first item of the timeline */
|
||||||
|
.recent-changes-content > div:first-child > *:first-child {
|
||||||
|
--connector-top: 50%;
|
||||||
|
--connector-radius: calc(var(--timeline-connector-size) / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The last item of the timeline */
|
||||||
|
.recent-changes-content > div:last-child li:last-child {
|
||||||
|
--connector-bottom: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Timeline bullet */
|
||||||
|
.recent-changes-content ul li::after {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
top: calc(var(--timeline-item-top-padding) + var(--timeline-bullet-vertical-pos));
|
||||||
|
left: var(--timeline-left-gap);
|
||||||
|
width: var(--timeline-bullet-size);
|
||||||
|
height: var(--timeline-bullet-size);
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--timeline-bullet-color);
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hovered timeline bullet */
|
||||||
|
.recent-changes-content ul li:hover::after {
|
||||||
|
background: var(--timeline-bullet-hover-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* CHEATSHEET
|
||||||
|
*/
|
||||||
|
|
||||||
|
.help-dialog .modal-content {
|
||||||
|
--modal-background-color: var(--help-background-color);
|
||||||
|
backdrop-filter: blur(var(--help-backdrop-blur));
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-dialog .help-cards {
|
||||||
|
display: block;
|
||||||
|
columns: 3;
|
||||||
|
column-gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-dialog .card {
|
||||||
|
margin: 0;
|
||||||
|
width: auto;
|
||||||
|
border: none;
|
||||||
|
background: unset;
|
||||||
|
padding: 16px 8px;
|
||||||
|
break-inside: avoid-column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-dialog .card-body {
|
||||||
|
box-shadow: var(--help-card-shadow);
|
||||||
|
border-radius: 6px;
|
||||||
|
background: var(--help-card-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-dialog .card-body h5,
|
||||||
|
.help-dialog .card-body h6 {
|
||||||
|
color: var(--help-card-heading-color);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-dialog .card-body h5 {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-dialog .card-body h6 {
|
||||||
|
font-size: 15px;
|
||||||
|
padding-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Help card item */
|
||||||
|
.help-dialog .help-cards ul {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-dialog .help-cards li + li {
|
||||||
|
margin-top: 0.4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Keyboard shortcut */
|
||||||
|
.help-dialog .help-cards kbd,
|
||||||
|
.ck-content kbd {
|
||||||
|
box-shadow: var(--help-kbd-shortcut-shadow);
|
||||||
|
margin: 0 4px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 2px 10px;
|
||||||
|
background: var(--help-kbd-shortcut-background);
|
||||||
|
color: var(--help-kbd-shortcut-color);
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.5pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-dialog .help-cards kbd:first-child {
|
||||||
|
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);
|
||||||
|
}
|
||||||
@ -1391,57 +1391,6 @@ body .calendar-dropdown-widget .calendar-body a:hover {
|
|||||||
padding-top: 12px;
|
padding-top: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
* Jump to note
|
|
||||||
*/
|
|
||||||
|
|
||||||
.jump-to-note-dialog .modal-dialog {
|
|
||||||
--modal-background-color: var(--menu-background-color);
|
|
||||||
--modal-footer-background: transparent;
|
|
||||||
--bs-modal-header-border-width: 0;
|
|
||||||
--bs-modal-footer-border-width: 0;
|
|
||||||
--bs-modal-footer-gap: 0;
|
|
||||||
|
|
||||||
backdrop-filter: var(--dropdown-backdrop-filter);
|
|
||||||
}
|
|
||||||
|
|
||||||
.jump-to-note-dialog .modal-content {
|
|
||||||
--bs-modal-header-padding-x: 0;
|
|
||||||
|
|
||||||
box-shadow: 0 10px 20px rgba(0, 0, 0, var(--dropdown-shadow-opacity));
|
|
||||||
border: 1px solid var(--dropdown-border-color);
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.jump-to-note-dialog .modal-header {
|
|
||||||
padding: unset !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.jump-to-note-dialog .modal-body {
|
|
||||||
padding: 26px 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Search box wrapper */
|
|
||||||
.jump-to-note-dialog .input-group {
|
|
||||||
margin-right: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.jump-to-note-dialog .input-group:hover {
|
|
||||||
background: var(--quick-search-hover-background);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Focused search box */
|
|
||||||
.jump-to-note-dialog .input-group:focus-within {
|
|
||||||
border-color: var(--quick-search-focus-border);
|
|
||||||
background: var(--quick-search-focus-background);
|
|
||||||
color: var(--quick-search-focus-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.jump-to-note-dialog .input-clearer-button {
|
|
||||||
background: transparent !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Note Map
|
* Note Map
|
||||||
*/
|
*/
|
||||||
@ -1450,151 +1399,6 @@ body .calendar-dropdown-widget .calendar-body a:hover {
|
|||||||
color: var(--tab-close-button-hover-background);
|
color: var(--tab-close-button-hover-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
* Recent changes list
|
|
||||||
*/
|
|
||||||
|
|
||||||
.recent-changes-dialog .modal-body {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recent-changes-content {
|
|
||||||
margin: var(--bs-modal-padding);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Date headings */
|
|
||||||
.recent-changes-content > div > b {
|
|
||||||
position: sticky;
|
|
||||||
display: block;
|
|
||||||
top: 0;
|
|
||||||
background: var(--modal-background-color);
|
|
||||||
padding: 10px 0 10px calc(var(--timeline-left-gap) + var(--timeline-right-gap));
|
|
||||||
font-size: 1.25em;
|
|
||||||
font-weight: 300;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recent-changes-content ul {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Timeline items */
|
|
||||||
.recent-changes-content ul li {
|
|
||||||
display: flex;
|
|
||||||
position: relative;
|
|
||||||
margin: 0;
|
|
||||||
border: unset;
|
|
||||||
padding-top: var(--timeline-item-top-padding);
|
|
||||||
padding-bottom: var(--timeline-item-bottom-padding);
|
|
||||||
padding-left: calc(var(--timeline-left-gap) + var(--timeline-right-gap));
|
|
||||||
padding-right: var(--timeline-left-gap);
|
|
||||||
color: var(--active-item-text-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.recent-changes-content li > span:first-child::after {
|
|
||||||
/* Remove the dash between time and note title */
|
|
||||||
content: "" !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recent-changes-content ul li:not(.deleted-note):hover {
|
|
||||||
border-radius: 8px;
|
|
||||||
background: var(--hover-item-background-color);
|
|
||||||
color: var(--hover-item-text-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.recent-changes-content ul li .note-path {
|
|
||||||
color: var(--muted-text-color);
|
|
||||||
font-size: 0.75em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Item time */
|
|
||||||
.recent-changes-content ul li > span:first-child {
|
|
||||||
display: inline-block;
|
|
||||||
min-width: 80px;
|
|
||||||
vertical-align: top;
|
|
||||||
color: var(--muted-text-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Item title & path container */
|
|
||||||
.recent-changes-content ul li > span:nth-child(2) {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Item title link */
|
|
||||||
|
|
||||||
.recent-changes-content ul li .note-title a {
|
|
||||||
color: currentColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recent-changes-content ul li .note-title a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Item title for deleted notes */
|
|
||||||
.recent-changes-content ul li.deleted-note .note-title > .note-title {
|
|
||||||
text-decoration: line-through;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Item path */
|
|
||||||
.recent-changes-content ul li > span:nth-child(2) small {
|
|
||||||
display: block;
|
|
||||||
line-height: 1;
|
|
||||||
opacity: 0.75;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Timeline connector */
|
|
||||||
.recent-changes-content ul li::before,
|
|
||||||
.recent-changes-content > div > b::before {
|
|
||||||
position: absolute;
|
|
||||||
content: "";
|
|
||||||
top: var(--connector-top, 0);
|
|
||||||
left: calc(var(--timeline-left-gap) + ((var(--timeline-bullet-size) - var(--timeline-connector-size)) / 2));
|
|
||||||
bottom: var(--connector-bottom, 0);
|
|
||||||
width: var(--timeline-connector-size);
|
|
||||||
border-radius: var(--connector-radius, 0) var(--connector-radius, 0) 0 0;
|
|
||||||
background: var(--timeline-connector-color);
|
|
||||||
transition: background-color 400ms ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recent-changes-content ul li:hover:before {
|
|
||||||
mix-blend-mode: var(--timeline-connector-hover-blend-mode);
|
|
||||||
}
|
|
||||||
|
|
||||||
.recent-changes-content > div:hover {
|
|
||||||
--timeline-connector-color: var(--timeline-connector-active-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* The first item of the timeline */
|
|
||||||
.recent-changes-content > div:first-child > *:first-child {
|
|
||||||
--connector-top: 50%;
|
|
||||||
--connector-radius: calc(var(--timeline-connector-size) / 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* The last item of the timeline */
|
|
||||||
.recent-changes-content > div:last-child li:last-child {
|
|
||||||
--connector-bottom: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Timeline bullet */
|
|
||||||
.recent-changes-content ul li::after {
|
|
||||||
position: absolute;
|
|
||||||
content: "";
|
|
||||||
top: calc(var(--timeline-item-top-padding) + var(--timeline-bullet-vertical-pos));
|
|
||||||
left: var(--timeline-left-gap);
|
|
||||||
width: var(--timeline-bullet-size);
|
|
||||||
height: var(--timeline-bullet-size);
|
|
||||||
border-radius: 50%;
|
|
||||||
background: var(--timeline-bullet-color);
|
|
||||||
transform: translateY(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hovered timeline bullet */
|
|
||||||
.recent-changes-content ul li:hover::after {
|
|
||||||
background: var(--timeline-bullet-hover-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Bookmarks folder popup
|
* Bookmarks folder popup
|
||||||
*/
|
*/
|
||||||
@ -1852,87 +1656,6 @@ div.bookmark-folder-widget .note-link .bx {
|
|||||||
color: var(--muted-text-color);
|
color: var(--muted-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
* Help
|
|
||||||
*/
|
|
||||||
|
|
||||||
.help-dialog .modal-content {
|
|
||||||
--modal-background-color: var(--help-background-color);
|
|
||||||
backdrop-filter: blur(var(--help-backdrop-blur));
|
|
||||||
}
|
|
||||||
|
|
||||||
.help-dialog .help-cards {
|
|
||||||
display: block;
|
|
||||||
columns: 3;
|
|
||||||
column-gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.help-dialog .card {
|
|
||||||
margin: 0;
|
|
||||||
width: auto;
|
|
||||||
border: none;
|
|
||||||
background: unset;
|
|
||||||
padding: 16px 8px;
|
|
||||||
break-inside: avoid-column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.help-dialog .card-body {
|
|
||||||
box-shadow: var(--help-card-shadow);
|
|
||||||
border-radius: 6px;
|
|
||||||
background: var(--help-card-background);
|
|
||||||
}
|
|
||||||
|
|
||||||
.help-dialog .card-body h5,
|
|
||||||
.help-dialog .card-body h6 {
|
|
||||||
color: var(--help-card-heading-color);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.help-dialog .card-body h5 {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.help-dialog .card-body h6 {
|
|
||||||
font-size: 15px;
|
|
||||||
padding-bottom: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Help card item */
|
|
||||||
.help-dialog .help-cards ul {
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.help-dialog .help-cards li + li {
|
|
||||||
margin-top: 0.4em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Keyboard shortcut */
|
|
||||||
.help-dialog .help-cards kbd,
|
|
||||||
.ck-content kbd {
|
|
||||||
box-shadow: var(--help-kbd-shortcut-shadow);
|
|
||||||
margin: 0 4px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 2px 10px;
|
|
||||||
background: var(--help-kbd-shortcut-background);
|
|
||||||
color: var(--help-kbd-shortcut-color);
|
|
||||||
font-weight: 500;
|
|
||||||
letter-spacing: 0.5pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
.help-dialog .help-cards kbd:first-child {
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Note area */
|
/* Note area */
|
||||||
|
|
||||||
.title-row > *:first-child {
|
.title-row > *:first-child {
|
||||||
@ -2127,101 +1850,4 @@ div.promoted-attribute-cell .multiplicity:has(span) {
|
|||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
margin-right: calc(var(--pa-card-padding-left) - var(--pa-card-padding-right));
|
margin-right: calc(var(--pa-card-padding-left) - var(--pa-card-padding-right));
|
||||||
font-size: 0; /* Prevent whitespaces creating a gap between buttons */
|
font-size: 0; /* Prevent whitespaces creating a gap between buttons */
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Modals
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* Modal body */
|
|
||||||
.modal .modal-content {
|
|
||||||
box-shadow: 0 .5em 3em .5em var(--modal-shadow-color);
|
|
||||||
border: 1px solid var(--modal-border-color);
|
|
||||||
background: var(--modal-background-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Modal header */
|
|
||||||
.modal .modal-header {
|
|
||||||
border-bottom: unset;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal .modal-header .modal-title {
|
|
||||||
flex-grow: 1;
|
|
||||||
font-size: 1.2em;
|
|
||||||
color: var(--modal-title-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Modal and toast control buttons (close and help) */
|
|
||||||
|
|
||||||
.modal .modal-header .btn-close,
|
|
||||||
.modal .modal-header .help-button,
|
|
||||||
#toast-container .toast .toast-header .btn-close {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
margin-left: 8px;
|
|
||||||
border: 0;
|
|
||||||
border-radius: 50%;
|
|
||||||
padding: 0;
|
|
||||||
width: var(--modal-control-button-size);
|
|
||||||
height: var(--modal-control-button-size);
|
|
||||||
background: var(--modal-control-button-background);
|
|
||||||
font-size: var(--modal-control-button-size);
|
|
||||||
line-height: normal;
|
|
||||||
font-weight: normal;
|
|
||||||
color: var(--modal-control-button-color);
|
|
||||||
opacity: 1;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal .modal-header .btn-close,
|
|
||||||
#toast-container .toast .toast-header .btn-close {
|
|
||||||
--modal-control-button-hover-background: var(--modal-close-button-hover-background);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal .modal-header .btn-close::after,
|
|
||||||
#toast-container .toast .toast-header .btn-close::after {
|
|
||||||
content: "\ec8d";
|
|
||||||
font-family: boxicons;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal .modal-header .help-button {
|
|
||||||
margin-right: 0;
|
|
||||||
font-size: calc(var(--modal-control-button-size) * .75);
|
|
||||||
font-family: unset;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal .modal-header .btn-close:hover,
|
|
||||||
.modal .modal-header .help-button:hover,
|
|
||||||
#toast-container .toast .toast-header .btn-close:hover {
|
|
||||||
background: var(--modal-control-button-hover-background);
|
|
||||||
color: var(--modal-control-button-hover-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal .modal-header .btn-close:active,
|
|
||||||
.modal .modal-header .help-button:active,
|
|
||||||
#toast-container .toast .toast-header .btn-close:active {
|
|
||||||
transform: scale(.85);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal .modal-header .btn-close:focus,
|
|
||||||
.modal .modal-header .help-button:focus,
|
|
||||||
#toast-container .toast .toast-header .btn-close:focus {
|
|
||||||
box-shadow: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal .modal-header .btn-close:focus-visible,
|
|
||||||
.modal .modal-header .help-button:focus-visible,
|
|
||||||
#toast-container .toast .toast-header .btn-close:focus-visible {
|
|
||||||
outline: 2px solid var(--input-focus-outline-color);
|
|
||||||
outline-offset: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Modal footer */
|
|
||||||
.modal .modal-footer {
|
|
||||||
background: var(--modal-footer-background);
|
|
||||||
color: var(--modal-footer-color);
|
|
||||||
border-top: unset;
|
|
||||||
}
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user