Hari Rana
336ecd9ec3
The values were mostly copied from libadwaita's, but with the intention to easily add focus rings to custom widgets if desired.
405 lines
7.6 KiB
CSS
405 lines
7.6 KiB
CSS
@import 'events.css';
|
|
|
|
:root {
|
|
--insensitive-fg-color: color-mix(in srgb, var(--window-fg-color) 50%, transparent);
|
|
|
|
--focus-ring-transition:
|
|
outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
|
|
outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
|
|
outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
--focus-ring-color: rgb(from var(--accent-color) r g b / var(--dim-opacity));
|
|
}
|
|
|
|
/* Header labels */
|
|
label.primary-label {
|
|
font-size: 16pt;
|
|
font-weight: bold;
|
|
color: var(--accent-color);
|
|
padding: 12px;
|
|
}
|
|
|
|
label.secondary-label {
|
|
font-size: 16pt;
|
|
font-weight: bold;
|
|
padding: 12px;
|
|
color: rgb(from var(--window-fg-color) r g b / 55%);
|
|
}
|
|
|
|
calendar-view {
|
|
font-size: 10pt;
|
|
}
|
|
|
|
calendar-view.header,
|
|
label.header {
|
|
font-size: 10pt;
|
|
font-weight: bold;
|
|
color: rgb(from var(--window-fg-color) r g b / 55%);
|
|
}
|
|
|
|
calendar-view.current,
|
|
weekgrid.current {
|
|
background-color: rgb(from var(--accent-bg-color) r g b / 30%);
|
|
}
|
|
|
|
calendar-view:selected {
|
|
color: var(--accent-color);
|
|
font-weight: bold;
|
|
}
|
|
|
|
|
|
/* Event Popover */
|
|
popover.event-popover,
|
|
popover.event-popover > contents {
|
|
padding: 0;
|
|
}
|
|
|
|
/* calendar popover */
|
|
.calendar-list {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.calendar-list > list {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Date chooser */
|
|
|
|
/* month/year controls */
|
|
datechooser navigator { /* add some space between the two controls */
|
|
margin-right: 6px;
|
|
margin-left: 6px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
datechooser navigator label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
datechooser navigator button {
|
|
padding: 0;
|
|
}
|
|
|
|
/* week numbers, with a style resembling GNOME Shell's */
|
|
datechooser .weeknum {
|
|
font-size: smaller;
|
|
font-weight: bold;
|
|
margin: 6px;
|
|
padding: 4px;
|
|
border-radius: 5px;
|
|
background-color: rgb(from var(--insensitive-fg-color) r g b / 10%);
|
|
color: var(--insensitive-fg-color);
|
|
}
|
|
|
|
/* day names */
|
|
datechooser .weekday {
|
|
color: var(--insensitive-fg-color);
|
|
font-size: smaller;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* days */
|
|
datechooser button.day {
|
|
font-size: 10pt;
|
|
font-weight: normal;
|
|
min-height: 26px;
|
|
min-width: 26px;
|
|
margin: 2px;
|
|
padding: 3px;
|
|
transition: none;
|
|
}
|
|
|
|
datechooser button.day dot {
|
|
background-color: var(--window-fg-color);
|
|
border-radius: 50%;
|
|
min-height: 3px;
|
|
min-width: 3px;
|
|
}
|
|
|
|
datechooser button.day:selected dot {
|
|
background-color: var(--accent-fg-color);
|
|
}
|
|
|
|
datechooser button.day.non-workday {
|
|
color: var(--insensitive-fg-color);
|
|
}
|
|
|
|
datechooser button.day:selected {
|
|
background-color: var(--accent-bg-color);
|
|
color: var(--accent-fg-color);
|
|
font-weight: bold;
|
|
}
|
|
|
|
datechooser button.day.today {
|
|
color: var(--accent-color);
|
|
}
|
|
|
|
datechooser button.day.today dot {
|
|
background-color: var(--accent-color);
|
|
}
|
|
|
|
datechooser button.day.today:selected {
|
|
background-color: var(--accent-bg-color);
|
|
color: var(--accent-fg-color);
|
|
}
|
|
|
|
datechooser button.day.today:selected dot {
|
|
background-color: var(--accent-fg-color);
|
|
}
|
|
|
|
datechooser button.day.other-month:not(:hover),
|
|
datechooser button.day.other-month:backdrop {
|
|
color: rgb(from currentColor r g b / 50%);
|
|
}
|
|
|
|
datechooser button.day.other-month:not(:hover) dot,
|
|
datechooser button.day.other-month:backdrop dot {
|
|
background-color: rgb(from currentColor r g b / 50%);
|
|
}
|
|
|
|
datechooser button.day.other-month:hover:not(:backdrop) {
|
|
color: var(--insensitive-fg-color);
|
|
}
|
|
|
|
datechooser button.day.other-month:hover:not(:backdrop) dot {
|
|
background-color: var(--insensitive-fg-color);
|
|
}
|
|
|
|
label.month-name {
|
|
font-size: 16pt;
|
|
font-weight: bold;
|
|
color: var(--accent-color);
|
|
padding: 12px;
|
|
}
|
|
|
|
/* Week View CSS */
|
|
|
|
.week-header.lines {
|
|
color: rgb(from var(--window-fg-color) r g b / 15%);
|
|
}
|
|
|
|
weekhourbar > label {
|
|
font-size: 10pt;
|
|
padding: 4px 6px;
|
|
}
|
|
|
|
.week-view .lines {
|
|
color: rgb(from var(--window-fg-color) r g b / 15%);
|
|
}
|
|
|
|
weekgrid > widget.now-strip {
|
|
background-color: rgb(from var(--accent-bg-color) r g b / 80%);
|
|
margin: 0 0 0 1px;
|
|
min-height: 2px;
|
|
}
|
|
|
|
weekgrid.dnd, .week-header.dnd {
|
|
background-color: rgb(from var(--accent-bg-color) r g b / 25%);
|
|
}
|
|
|
|
weekheader > selection,
|
|
weekgrid > selection,
|
|
weekheader > droptarget,
|
|
weekgrid > droptarget {
|
|
background-color: rgb(from var(--accent-bg-color) r g b / 25%);
|
|
border-radius: 6px;
|
|
margin: 2px 0 1px 2px;
|
|
}
|
|
|
|
button.week-header-expander:checked image {
|
|
transform: rotateZ(180deg);
|
|
transition: 200ms;
|
|
}
|
|
|
|
/*
|
|
* Month cell
|
|
*/
|
|
|
|
monthcell {
|
|
--bg-color: rgb(from var(--window-fg-color) r g b / 0);
|
|
--separator-color: rgb(from var(--window-fg-color) r g b / calc(var(--border-opacity) + 12.5%));
|
|
|
|
border: solid 1px rgb(from var(--border-color) r g b / calc(var(--border-opacity) / 1.5));
|
|
border-width: 1px 0 0 1px;
|
|
transition: background-color 200ms;
|
|
background-color: var(--bg-color);
|
|
}
|
|
|
|
/* Today */
|
|
monthcell.today {
|
|
--bg-color: rgb(from var(--accent-bg-color) r g b / 15%);
|
|
}
|
|
|
|
monthcell.today label.day-label {
|
|
color: var(--accent-fg-color);
|
|
background-color: var(--accent-bg-color);
|
|
border-radius: 99px;
|
|
padding: 0 6px;
|
|
}
|
|
|
|
monthcell:hover {
|
|
background-color: rgb(from var(--bg-color) r g b / calc(alpha + 3.75%));
|
|
}
|
|
|
|
/* Selected */
|
|
monthcell:selected {
|
|
background-color:
|
|
color-mix(in srgb-linear, var(--bg-color) 82.5%, var(--accent-bg-color));
|
|
}
|
|
|
|
monthcell:hover:selected {
|
|
background-color:
|
|
color-mix(in srgb-linear, var(--bg-color) 77.5%, var(--accent-bg-color));
|
|
}
|
|
|
|
/* Out of Month */
|
|
monthcell.out-of-month > * {
|
|
opacity: calc(var(--dim-opacity) - 17.5%);
|
|
}
|
|
|
|
monthcell:selected label.day-label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Button */
|
|
monthcell button {
|
|
font-weight: normal;
|
|
padding: 0 4px;
|
|
border-radius: 0;
|
|
border-bottom: none;
|
|
border-right: none;
|
|
}
|
|
|
|
/* Separators */
|
|
monthcell.separator-top {
|
|
border-top: 1px solid var(--separator-color);
|
|
}
|
|
|
|
monthcell.separator-side:dir(ltr) {
|
|
border-left: 1px solid var(--separator-color);
|
|
}
|
|
|
|
monthcell.separator-side:dir(rtl) {
|
|
border-right: 1px solid var(--separator-color);
|
|
}
|
|
|
|
monthcell:nth-child(7n + 1):dir(ltr) {
|
|
border-left-width: 0;
|
|
}
|
|
|
|
monthcell:nth-child(7n + 1):dir(rtl) {
|
|
border-right-width: 0;
|
|
}
|
|
|
|
/*
|
|
* Month row
|
|
*/
|
|
|
|
calendar-view.scrolling > box {
|
|
background-color: transparent;
|
|
box-shadow: var(--headerbar-shade-color) 0 2px 4px;
|
|
transition: box-shadow 200ms;
|
|
}
|
|
|
|
|
|
calendar-view:not(.scrolling) > box {
|
|
transition: box-shadow 200ms;
|
|
}
|
|
|
|
/*
|
|
* Month popover
|
|
*/
|
|
|
|
monthpopover > box {
|
|
margin: 4px;
|
|
padding: 12px;
|
|
background-color: var(--popover-bg-color);
|
|
}
|
|
|
|
.notes-section box > textview {
|
|
border-radius: 8px;
|
|
padding: 8px;
|
|
}
|
|
|
|
.notes-section box > textview > text {
|
|
background: none;
|
|
}
|
|
|
|
/* Agenda View CSS */
|
|
|
|
agenda-view list > row {
|
|
padding: 2px 12px;
|
|
}
|
|
|
|
agenda-view list > label {
|
|
padding: 6px 12px;
|
|
}
|
|
|
|
.sidebar-pane agenda-view .background {
|
|
background: none;
|
|
color: inherit;
|
|
}
|
|
|
|
label.no-events {
|
|
font-style: italic;
|
|
}
|
|
|
|
/*
|
|
* Search
|
|
*/
|
|
|
|
searchbutton > popover > arrow {
|
|
background: none;
|
|
border: none;
|
|
}
|
|
|
|
searchbutton > popover listview > row:selected {
|
|
background-color: rgb(from var(--accent-bg-color) r g b / 11%);
|
|
}
|
|
|
|
/*
|
|
* Month selector
|
|
*/
|
|
|
|
datechooser {
|
|
padding: 6px;
|
|
}
|
|
|
|
datechooser .current-week {
|
|
background: rgb(from currentColor r g b / 10%);
|
|
color: var(--headerbar-fg-color);
|
|
border-radius: 9px;
|
|
}
|
|
|
|
menubutton stack > box {
|
|
border-spacing: 4px;
|
|
}
|
|
|
|
/*
|
|
* Sync Indicator
|
|
*/
|
|
|
|
syncindicator {
|
|
padding: 6px;
|
|
}
|
|
|
|
/*
|
|
* Styles for the drop overlay.
|
|
* From Amberol https://gitlab.gnome.org/World/amberol/-/blob/0dd6250ffd294b14532c428dcb76ae42086a5923/src/gtk/style.css
|
|
*/
|
|
|
|
/* Removes the default style */
|
|
.drop-target:drop(active) {
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Custom style for the drop overlay area */
|
|
.drop-overlay-area {
|
|
padding: 32px;
|
|
color: var(--accent-fg-color);
|
|
background-color: rgb(from var(--accent-bg-color) r g b / 50%);
|
|
}
|
|
|
|
.blurred {
|
|
filter: blur(6px);
|
|
}
|