Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-08-01 04:32:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(next): restyle the calendar

Browse Source
This commit is contained in:
Adorian Doran 2024-12-02 22:42:19 +02:00
parent 22db58d410
commit 95035acf38
1 changed files with 84 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/public/stylesheets/theme-next.css
View File

@ -182,6 +182,12 @@
--card-border-color: #eaeaea; --card-border-color: #eaeaea;
--card-shadow-color: rgba(0, 0, 0, 0.1); --card-shadow-color: rgba(0, 0, 0, 0.1);
--card-box-shadow: 0 0 12px var(--card-shadow-color); --card-box-shadow: 0 0 12px var(--card-shadow-color);
--calendar-color: var(--menu-text-color);
--calendar-weekday-labels-color: var(--muted-text-color);
--calendar-day-hover-color: var(--hover-item-text-color);
--calendar-day-hover-background: var(--active-item-background-color);
--calendar-day-highlight-background: #80808024;
} }
/* /*
@ -307,6 +313,12 @@
--card-background-press-color: #464646; --card-background-press-color: #464646;
--card-border-color: #222222; --card-border-color: #222222;
--card-box-shadow: 0 0 12px rgba(0, 0, 0, 0.15); --card-box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
--calendar-color: var(--menu-text-color);
--calendar-weekday-labels-color: var(--muted-text-color);
--calendar-day-hover-color: var(--hover-item-text-color);
--calendar-day-hover-background: var(--active-item-background-color);
--calendar-day-highlight-background: #8080805a;
} }
body ::-webkit-calendar-picker-indicator { body ::-webkit-calendar-picker-indicator {
@ -966,6 +978,78 @@ html body .dropdown-item.disabled {
color: var(--menu-item-arrow-color) !important; color: var(--menu-item-arrow-color) !important;
} }
/*
* Calendar
*/
.calendar-dropdown-widget {
padding: 12px;
color: var(--calendar-color);
}
.calendar-dropdown-widget .calendar-header {
padding: 8px 0 20px 0;
}
.calendar-dropdown-widget .calendar-header input[type="number"] {
appearance: textfield !important;
}
.calendar-dropdown-widget .calendar-header input[type="number"]::-webkit-outer-spin-button,
.calendar-dropdown-widget .calendar-header input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.calendar-dropdown-widget .calendar-header input,
.calendar-dropdown-widget .calendar-header select {
/* TODO: Provide styling for background and states */
border: unset;
text-align: center;
font-size: 1.4em;
font-weight: 300;
}
.calendar-dropdown-widget .calendar-week span {
font-size: .85em;
font-weight: 500;
color: var(--calendar-weekday-labels-color);
}
.calendar-dropdown-widget .calendar-body {
font-size: .9em;
}
.calendar-dropdown-widget .calendar-body a {
background: transparent;
color: var(--calendar-color);
}
.calendar-dropdown-widget .calendar-body a.calendar-date-exists {
position: relative;
text-decoration: none !important;
}
.calendar-dropdown-widget .calendar-body a.calendar-date-exists:not(:hover)::before {
--vertical-margin: 13%;
--horiz-margin: 18%;
content: "";
position: absolute;
top: var(--vertical-margin);
right: var(--horiz-margin);
bottom: var(--vertical-margin);
left: var(--horiz-margin);
border-radius: 6px;
background: var(--calendar-day-highlight-background);
z-index: -1;
}
body .calendar-dropdown-widget .calendar-body a:hover {
border-radius: 6px;
background: var(--calendar-day-hover-background);
color: var(--calendar-day-hover-color) !important;
}
/* /*
* TEXT NOTES * TEXT NOTES
*/ */