mirror of
https://github.com/fikte/calendar-period-week-notes.git
synced 2026-07-22 06:44:03 +00:00
7005 lines
165 KiB
CSS
7005 lines
165 KiB
CSS
body.theme-light {
|
||
--cpwn-month-color-themed: var(--cpwn-month-color-light);
|
||
--cpwn-today-circle-color-themed: var(--cpwn-today-circle-color-light);
|
||
--cpwn-today-highlight-color-themed: var(--cpwn-today-highlight-color-light);
|
||
--cpwn-date-cell-hover-color-themed: var(--cpwn-date-cell-hover-color-light);
|
||
--cpwn-pw-column-font-color-themed: var(--cpwn-pw-column-font-color-light);
|
||
--cpwn-week-number-font-color-themed: var(--cpwn-week-number-font-color-light);
|
||
--cpwn-day-header-font-color-themed: var(--cpwn-day-header-font-color-light);
|
||
--cpwn-day-cell-font-color-themed: var(--cpwn-day-cell-font-color-light);
|
||
--cpwn-other-month-font-color-themed: var(--cpwn-other-month-font-color-light);
|
||
--cpwn-weekend-shade-color-themed: var(--cpwn-weekend-shade-color-light);
|
||
--cpwn-row-highlight-color-themed: var(--cpwn-row-highlight-color-light);
|
||
--cpwn-year-color-themed: var(--cpwn-year-color-light);
|
||
--cpwn-current-label-highlight-color-themed: var(--cpwn-current-highlight-label-color-light);
|
||
|
||
}
|
||
body.theme-dark {
|
||
--cpwn-month-color-themed: var(--cpwn-month-color-dark);
|
||
--cpwn-today-circle-color-themed: var(--cpwn-today-circle-color-dark);
|
||
--cpwn-today-highlight-color-themed: var(--cpwn-today-highlight-color-dark);
|
||
--cpwn-date-cell-hover-color-themed: var(--cpwn-date-cell-hover-color-dark);
|
||
--cpwn-pw-column-font-color-themed: var(--cpwn-pw-column-font-color-dark);
|
||
--cpwn-week-number-font-color-themed: var(--cpwn-week-number-font-color-dark);
|
||
--cpwn-day-header-font-color-themed: var(--cpwn-day-header-font-color-dark);
|
||
--cpwn-day-cell-font-color-themed: var(--cpwn-day-cell-font-color-dark);
|
||
--cpwn-other-month-font-color-themed: var(--cpwn-other-month-font-color-dark);
|
||
--cpwn-weekend-shade-color-themed: var(--cpwn-weekend-shade-color-dark);
|
||
--cpwn-row-highlight-color-themed: var(--cpwn-row-highlight-color-dark);
|
||
--cpwn-year-color-themed: var(--cpwn-year-color-dark);
|
||
--cpwn-current-label-highlight-color-themed: var(--cpwn-current-highlight-label-color-dark);
|
||
}
|
||
|
||
body {
|
||
--cpwn-checkbox-gap: 8px;
|
||
--cpwn-content-indent: 24px;
|
||
}
|
||
|
||
body .tooltip {
|
||
z-index: 20000;
|
||
}
|
||
|
||
/* Default indent (Checkbox + Priority + Gaps) */
|
||
.cpwn-task-grid.has-priority {
|
||
--cpwn-content-indent: 24px;
|
||
}
|
||
|
||
/* Smaller indent (Checkbox + Gap only) */
|
||
.cpwn-task-grid.no-priority {
|
||
--cpwn-content-indent: 0px; /* Checkbox (~16) + Gap (~8) */
|
||
}
|
||
|
||
/* Style for the "Month" part (uses existing --cpwn-month-color-themed variable) */
|
||
.cpwn-month-title-month {
|
||
color: var(--cpwn-month-color-themed);
|
||
}
|
||
|
||
/* Style for the "Year" part (uses the new variable) */
|
||
.cpwn-month-title-year {
|
||
color: var(--cpwn-year-color-themed);
|
||
}
|
||
|
||
/* 4. Ensure individual date hover appears ON TOP of other highlights */
|
||
.cpwn-period-calendar-table td:hover td:not(.cpwn-pw-label-cell):not(.cpwn-week-number-cell):hover .cpwn-day-content {
|
||
background-color: var(--cpwn-date-cell-hover-color-themed);
|
||
}
|
||
|
||
.cpwn-period-calendar-table td.row-hover:not(.cpwn-pw-label-cell):not(.cpwn-week-number-cell) {
|
||
background-color: var(--cpwn-row-highlight-color-themed);
|
||
}
|
||
|
||
/* Day header row font color */
|
||
.cpwn-period-calendar-table thead th {
|
||
color: var(--cpwn-day-header-font-color-themed);
|
||
}
|
||
|
||
/* Period/Week column font color */
|
||
.cpwn-period-calendar-table .cpwn-pw-label-cell,
|
||
.cpwn-period-calendar-table .cpwn-pw-label-cell .cpwn-day-number {
|
||
font-weight: var(--cpwn-pw-column-font-weight);
|
||
font-size: var(--cpwn-header-font-size);
|
||
color: var(--cpwn-pw-column-font-color-themed);
|
||
}
|
||
|
||
/* Highlight today's P/W column with today color */
|
||
.cpwn-period-calendar-table .cpwn-pw-label-cell.today-pw-label .cpwn-day-number,
|
||
.cpwn-period-calendar-table .cpwn-week-number-cell.today-pw-label .cpwn-day-number {
|
||
color: var(--cpwn-current-label-highlight-color-themed);
|
||
|
||
}
|
||
|
||
/* Highlight today's day column header with today color */
|
||
.cpwn-period-calendar-table thead th.cpwn-today-day-header {
|
||
color: var(--cpwn-current-label-highlight-color-themed);
|
||
}
|
||
|
||
/* Week number column font color */
|
||
.cpwn-period-calendar-table .cpwn-week-number-cell,
|
||
.cpwn-period-calendar-table .cpwn-week-number-cell .cpwn-day-number {
|
||
font-weight: var(--cpwn-pw-column-font-weight);
|
||
font-size: var(--cpwn-header-font-size);
|
||
color: var(--cpwn-week-number-font-color-themed);
|
||
}
|
||
|
||
/* -- Main Layout -- */
|
||
.cpwn-period-month-container {
|
||
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
flex-grow: 1;
|
||
|
||
width: 100%;
|
||
padding-top: 6px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.cpwn-month-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0.1rem 0.25rem;
|
||
margin-bottom: 0.5rem; /* Specific margin for spacing */
|
||
}
|
||
|
||
.cpwn-month-header-title {
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
line-height: 1;
|
||
font-size: var(--cpwn-main-month-year-title-font-size);
|
||
white-space: nowrap;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.cpwn-month-title-month {
|
||
font-weight: var(--cpwn-main-month-title-weight);
|
||
}
|
||
|
||
.cpwn-month-title-year {
|
||
font-weight: var(--cpwn-main-year-title-weight);
|
||
}
|
||
|
||
.cpwn-month-header-nav {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.25rem;
|
||
}
|
||
|
||
.cpwn-month-header-nav button {
|
||
height: var(--cpwn-nav-button-height);
|
||
min-height: var(--cpwn-nav-button-height);
|
||
padding: 0; /* Remove horizontal padding */
|
||
width: var(--cpwn-nav-button-height); /* Make the button square */
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Accent color for the locked popup button on desktop */
|
||
.cpwn-month-header-nav button.cpwn-popup-locked .svg-icon {
|
||
color: var(--interactive-accent);
|
||
}
|
||
|
||
/* Specific override for mobile to ensure accent color is applied */
|
||
body.is-mobile .cpwn-month-header-nav button.cpwn-popup-locked .svg-icon {
|
||
color: var(--interactive-accent);
|
||
}
|
||
|
||
/* -- Chevron Button Animation -- */
|
||
.cpwn-month-header-nav button[aria-label="Toggle calendar visibility"] .svg-icon {
|
||
transition: transform 0.3s ease-in-out;
|
||
}
|
||
|
||
.cpwn-period-month-container.cpwn-calendar-collapsed .cpwn-month-header-nav button[aria-label="Toggle calendar visibility"] .svg-icon {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
body.is-mobile .cpwn-month-header-nav button .svg-icon {
|
||
width: 18px;
|
||
height: 18px;
|
||
color: var(--cpwn-icon-color);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.is-mobile .workspace-leaf-content[data-type="period-month-view"] {
|
||
height: calc(100% - var(--mobile-toolbar-height));
|
||
}
|
||
|
||
.is-mobile .workspace-leaf-content[data-type="period-month-view"] .view-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%; /* Ensures this container has a height to give to its children */
|
||
}
|
||
|
||
/* -- Calendar Collapse Animation -- */
|
||
.cpwn-calendar-table-wrapper {
|
||
flex-shrink: 0;
|
||
max-height: 500px;
|
||
transition: max-height 0.3s ease-in-out, margin-bottom 0.3s ease-in-out;
|
||
overflow: hidden;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.cpwn-period-month-container.cpwn-calendar-collapsed .cpwn-calendar-table-wrapper {
|
||
max-height: 0;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* -- Calendar Table -- */
|
||
.cpwn-period-calendar-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
table-layout: fixed;
|
||
}
|
||
|
||
.cpwn-period-calendar-table th, .cpwn-period-calendar-table td {
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
padding: 0;
|
||
font-size: var(--cpwn-header-font-size);
|
||
}
|
||
|
||
.cpwn-period-calendar-table th {
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.cpwn-period-calendar-table th {
|
||
font-weight: var(--cpwn-header-row-font-weight);
|
||
height: 2.5em;
|
||
}
|
||
|
||
.cpwn-period-calendar-table tbody td {
|
||
cursor: pointer;
|
||
overflow: visible;
|
||
position: relative;
|
||
}
|
||
|
||
.cpwn-period-month-container:not(.hide-grid) .cpwn-period-calendar-table td {
|
||
border: var(--cpwn-calendar-grid-gap-width) solid var(--background-modifier-border);
|
||
}
|
||
|
||
/* -- Rounded Row Highlight -- */
|
||
.cpwn-period-calendar-table .current-week-row td:first-child {
|
||
border-top-left-radius: 6px;
|
||
border-bottom-left-radius: 6px;
|
||
}
|
||
|
||
.cpwn-period-calendar-table .current-week-row td:last-child {
|
||
border-top-right-radius: 6px;
|
||
border-bottom-right-radius: 6px;
|
||
}
|
||
|
||
.cpwn-period-calendar-table tbody td:not(.cpwn-pw-label-cell):not(.cpwn-week-number-cell):hover .cpwn-day-content {
|
||
background-color: var(--cpwn-date-cell-hover-color-themed);
|
||
border-radius: 6px;
|
||
transition: background-color 0.15s ease;
|
||
}
|
||
|
||
body .cpwn-period-month-container.today-style-cell .cpwn-today-cell .cpwn-day-content {
|
||
background-color: var(--cpwn-today-highlight-color-themed);
|
||
border-radius: 6px;
|
||
}
|
||
|
||
body .cpwn-period-month-container.today-style-cell .cpwn-period-calendar-table tbody tr.current-week-row td.cpwn-today-cell .cpwn-day-content {
|
||
background-color: var(--cpwn-today-highlight-color-themed);
|
||
}
|
||
|
||
body .cpwn-period-month-container.today-style-cell .cpwn-today-cell .cpwn-dots-container {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.cpwn-period-month-container.today-style-circle .cpwn-today-cell .cpwn-day-number {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
background-color: var(--cpwn-today-circle-color-themed);
|
||
z-index: 2;
|
||
border-radius: 50%;
|
||
width: var(--cpwn-today-highlight-size);
|
||
height: var(--cpwn-today-highlight-size);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.cpwn-period-month-container.today-style-number .cpwn-today-cell .cpwn-day-number {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
background-color: var(--cpwn-today-circle-color-themed);
|
||
border-radius: 6px;
|
||
padding: 0px 10px; /* Minimal padding for a tight fit */
|
||
display: flex;
|
||
align-items: center;
|
||
z-index: 2; /* Ensures it's drawn on top of the heatmap */
|
||
}
|
||
|
||
.cpwn-period-calendar-table td .cpwn-day-content.cpwn-heatmap-cell {
|
||
background-color: var(--cpwn-heatmap-color);
|
||
}
|
||
|
||
.cpwn-period-calendar-table .cpwn-pw-label-cell,
|
||
.cpwn-period-calendar-table .cpwn-week-number-cell {
|
||
font-weight: var(--cpwn-pw-column-font-weight);
|
||
font-size: var(--cpwn-header-font-size);
|
||
position: relative;
|
||
}
|
||
|
||
/* -- Period/Week Column Separator Line -- */
|
||
.cpwn-period-calendar-table tbody td.first-date-column::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 1px;
|
||
background-color: var(--cpwn-pw-separator-color);
|
||
z-index: 1;
|
||
}
|
||
|
||
.cpwn-week-dots-container {
|
||
position: absolute;
|
||
left: 0;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* -- Calendar Dots Color Variables -- */
|
||
.cpwn-calendar-dot {
|
||
width: var(--cpwn-calendar-dot-size);
|
||
height: var(--cpwn-calendar-dot-size);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.cpwn-ics-event-dot {
|
||
background-color: var(--cpwn-calendar-event-dot-color);
|
||
}
|
||
|
||
/* -- Calendar Layout Styles -- */
|
||
.cpwn-period-month-container.layout-spacious .cpwn-day-content {
|
||
height: 3.8em;
|
||
}
|
||
|
||
.cpwn-period-month-container.layout-normal .cpwn-day-content {
|
||
height: 3.0em;
|
||
}
|
||
|
||
.cpwn-period-month-container.layout-condensed .cpwn-day-content {
|
||
height: 2.8em; /* Even smaller height */
|
||
|
||
}
|
||
|
||
.cpwn-weekly-note-dot {
|
||
background-color: var(--cpwn-weekly-note-dot-color, var(--weekly-note-color, var(--text-muted)));
|
||
}
|
||
|
||
/* -- Calendar Day Content & Dots -- */
|
||
.cpwn-day-content {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
/* 2. The Day Number */
|
||
.cpwn-day-number {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
z-index: 1; /* Sits on top of the highlight circle */
|
||
font-size: var(--cpwn-calendar-day-number-font-size);
|
||
color: var(--cpwn-day-cell-font-color-themed);
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 3. The Dots Container (with dynamic bottom positioning) */
|
||
.cpwn-dots-container, .cpwn-week-dots-container {
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 3px;
|
||
z-index: 2; /* Sits on top of the day number */
|
||
}
|
||
|
||
/* These layout-specific classes now have full control and will work correctly. */
|
||
.cpwn-dots-container.layout-condensed,
|
||
.cpwn-week-dots-container.layout-condensed {
|
||
top: 26px;
|
||
}
|
||
|
||
.cpwn-dots-container.layout-normal,
|
||
.cpwn-week-dots-container.layout-normal {
|
||
top: 28px;
|
||
}
|
||
|
||
.cpwn-dots-container.layout-spacious,
|
||
.cpwn-week-dots-container.layout-spacious {
|
||
top: 34px;
|
||
}
|
||
|
||
/* 4. Ensure other layered items are also positioned absolutely */
|
||
.cpwn-badge-container {
|
||
position: absolute;
|
||
top: 2px;
|
||
right: 2px;
|
||
z-index: 3; /* Sits at the very top */
|
||
}
|
||
|
||
|
||
.cpwn-day-header-cell, .cpwn-pw-cell, .cpwn-week-number-cell {
|
||
/* Uses the general font size for labels */
|
||
font-size: var(--cpwn-calendar-label-font-size);
|
||
}
|
||
|
||
.cpwn-day-number-other-month {
|
||
color: var(--cpwn-other-month-font-color-themed);
|
||
}
|
||
|
||
.cpwn-period-calendar-table th, .cpwn-period-calendar-table .cpwn-pw-cell, .cpwn-period-calendar-table .cpwn-week-number-cell {
|
||
font-size: var(--cpwn-calendar-label-font-size);
|
||
}
|
||
|
||
/* -- Calendar Layout Styles -- */
|
||
.cpwn-period-month-container.layout-spacious .cpwn-dots-container {
|
||
padding-bottom: 10px; /* Creates space from the bottom edge */
|
||
}
|
||
|
||
.cpwn-period-month-container.layout-spacious .cpwn-dots-container:empty {
|
||
padding-top: var(--cpwn-calendar-dot-size);
|
||
}
|
||
|
||
.cpwn-period-month-container.layout-normal .cpwn-dots-container {
|
||
padding-bottom: 6px; /* Creates space from the bottom edge */
|
||
}
|
||
|
||
.cpwn-period-month-container.layout-condensed .cpwn-dots-container {
|
||
padding-bottom: 4px; /* Creates space from the bottom edge */
|
||
}
|
||
|
||
.cpwn-task-count-badge {
|
||
position: absolute;
|
||
top: 2px;
|
||
right: 3px;
|
||
z-index: 3;
|
||
width: 1.6em;
|
||
height: 1.6em;
|
||
border-radius: 50%;
|
||
background-color: var(--cpwn-task-badge-color);
|
||
color: var(--cpwn-task-badge-font-color);
|
||
font-size: var(--cpwn-task-badge-font-size);
|
||
font-weight: bold;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
line-height: 1; /* Prevents text from shifting vertically */
|
||
}
|
||
|
||
.cpwn-calendar-dot {
|
||
width: var(--cpwn-calendar-dot-size);
|
||
height: var(--cpwn-calendar-dot-size);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.cpwn-other-note-dot { background-color: var(--cpwn-other-note-dot-color); }
|
||
.cpwn-modified-file-dot { background-color: var(--cpwn-calendar-modified-dot-color); }
|
||
.cpwn-asset-dot { background-color: var(--cpwn-asset-dot-color); }
|
||
.cpwn-task-dot { background-color: var(--cpwn-task-dot-color); }
|
||
.cpwn-period-month-daily-note-dot { background-color: var(--cpwn-daily-note-dot-color, var(--text-accent)); }
|
||
.cpwn-period-month-daily-note-dot-other-month { opacity: 0.4; }
|
||
|
||
/* -- Tabs & Search Header -- */
|
||
.cpwn-tabs-content-wrapper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1 1 auto;
|
||
min-height: 0;
|
||
padding-bottom: 60px;
|
||
}
|
||
|
||
|
||
.cpwn-note-tab-header {
|
||
display: flex;
|
||
flex-shrink: 0;
|
||
width: 100%;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 6px;
|
||
gap: 8px;
|
||
}
|
||
|
||
.cpwn-tab-container {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.cpwn-note-tab {
|
||
position: relative;
|
||
flex: 0 1 auto;
|
||
text-align: center;
|
||
padding: 0.5rem 1rem;
|
||
cursor: pointer;
|
||
border-bottom: 2px solid transparent;
|
||
font-size: var(--cpwn-tab-title-font-size);
|
||
font-weight: var(--cpwn-tab-title-bold);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.cpwn-note-tab:hover { background-color: var(--background-modifier-hover); }
|
||
.cpwn-note-tab.active {
|
||
border-bottom-color: var(--cpwn-selected-tab-color);
|
||
}
|
||
|
||
.cpwn-note-tab.dragging {
|
||
opacity: 0.5;
|
||
cursor: grabbing;
|
||
}
|
||
|
||
.cpwn-note-tab.drag-over-indicator-before::before,
|
||
.cpwn-note-tab.drag-over-indicator-after::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 10%;
|
||
bottom: 10%;
|
||
width: 2px;
|
||
background-color: var(--cpwn-selected-tab-color);
|
||
}
|
||
|
||
.cpwn-note-tab.drag-over-indicator-before::before { left: 0; }
|
||
.cpwn-note-tab.drag-over-indicator-after::after { right: 0; }
|
||
.cpwn-search-wrapper {
|
||
flex-grow: 1;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
padding-right: 8px;
|
||
}
|
||
|
||
/* -- Mobile-Specific Tab Compaction -- */
|
||
body.is-mobile .cpwn-note-tab {
|
||
padding: 0.5rem 0.6rem; /* Reduced horizontal padding */
|
||
gap: 5px; /* Reduced gap between icon and text */
|
||
}
|
||
|
||
body.is-mobile .cpwn-tab-icon {
|
||
width: 18px; /* Smaller icon width */
|
||
height: 18px; /* Smaller icon height */
|
||
}
|
||
|
||
body.is-mobile .cpwn-pm-search-input {
|
||
flex-grow: 1; /* Allow search input to take more space */
|
||
}
|
||
|
||
/* -- Unified Search Input -- */
|
||
.cpwn-pm-search-container {
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
width: 100%;
|
||
}
|
||
|
||
.cpwn-pm-search-input {
|
||
background-color: var(--background-secondary);
|
||
border: 1px solid var(--background-modifier-border);
|
||
border-radius: var(--radius-s);
|
||
color: var(--cpwn-text-normal);
|
||
width: 100%;
|
||
padding: 4px 28px 4px 8px;
|
||
box-sizing: border-box;
|
||
line-height: var(--cpwn-line-height-normal);
|
||
}
|
||
|
||
.cpwn-pm-search-input:focus {
|
||
border-color: var(--interactive-accent);
|
||
box-shadow: 0 0 0 1px var(--interactive-accent);
|
||
}
|
||
|
||
.cpwn-search-action-btn {
|
||
flex: 0 0 auto;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 28px;
|
||
height: 28px;
|
||
margin-left: 6px;
|
||
border: 1px solid var(--background-modifier-border);
|
||
border-radius: var(--radius-s);
|
||
background: var(--interactive-normal);
|
||
color: var(--text-normal);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.cpwn-search-action-btn:hover {
|
||
background: var(--interactive-hover);
|
||
}
|
||
|
||
.cpwn-search-action-btn .svg-icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
|
||
.cpwn-add-todoist-task-icon {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 16px;
|
||
height: 16px;
|
||
font-size: 18px;
|
||
line-height: 1;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.cpwn-add-todoist-task-icon .svg-icon {
|
||
display: block;
|
||
}
|
||
|
||
.cpwn-pm-search-container.cpwn-has-search-action .cpwn-search-input-clear-btn {
|
||
right: 40px;
|
||
}
|
||
|
||
.cpwn-todoist-task-modal-root {
|
||
width: min(1050px, calc(100vw - 96px));
|
||
max-width: 100%;
|
||
}
|
||
|
||
.cpwn-todoist-task-modal-root textarea {
|
||
display: block;
|
||
width: 100%;
|
||
border: 0;
|
||
background-color: transparent;
|
||
box-shadow: none;
|
||
resize: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.cpwn-todoist-task-modal-root textarea:hover,
|
||
.cpwn-todoist-task-modal-root textarea:focus {
|
||
border: 0;
|
||
background-color: transparent;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.cpwn-todoist-task-name-input {
|
||
min-height: 42px;
|
||
overflow: hidden;
|
||
font-size: var(--font-ui-large);
|
||
font-weight: var(--font-semibold);
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.cpwn-todoist-task-description-input {
|
||
min-height: 32px;
|
||
overflow: hidden;
|
||
color: var(--text-muted);
|
||
font-size: var(--font-ui-medium);
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.cpwn-todoist-task-selectors {
|
||
margin-top: 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
}
|
||
|
||
.cpwn-todoist-task-selectors-group {
|
||
display: flex;
|
||
flex: 0 0 auto;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.cpwn-todoist-task-chip,
|
||
.cpwn-todoist-icon-button,
|
||
.cpwn-todoist-project-button {
|
||
height: 58px;
|
||
min-height: 0;
|
||
border: 1px solid var(--color-base-25);
|
||
border-radius: var(--radius-s);
|
||
background-color: transparent;
|
||
color: var(--text-muted);
|
||
box-shadow: none;
|
||
}
|
||
|
||
.cpwn-todoist-task-chip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
flex: 0 0 auto;
|
||
gap: 12px;
|
||
width: 205px;
|
||
padding: 0 18px;
|
||
}
|
||
|
||
.cpwn-todoist-chip-due,
|
||
.cpwn-todoist-chip-labels {
|
||
width: 205px;
|
||
}
|
||
|
||
.cpwn-todoist-chip-priority {
|
||
width: 210px;
|
||
}
|
||
|
||
.cpwn-todoist-chip-deadline {
|
||
width: 245px;
|
||
}
|
||
|
||
.cpwn-todoist-task-chip:focus-within,
|
||
.cpwn-todoist-task-chip:hover,
|
||
.cpwn-todoist-icon-button:hover,
|
||
.cpwn-todoist-project-button:hover {
|
||
border-color: var(--interactive-accent);
|
||
box-shadow: var(--box-shadow-hover);
|
||
}
|
||
|
||
.cpwn-todoist-task-icon {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex: 0 0 auto;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.cpwn-todoist-task-icon .svg-icon {
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
|
||
.cpwn-todoist-task-chip-input,
|
||
.cpwn-todoist-task-chip-select {
|
||
min-width: 0;
|
||
flex: 1 1 auto;
|
||
width: 1px;
|
||
height: 34px;
|
||
border: 0;
|
||
background: transparent;
|
||
color: var(--text-muted);
|
||
box-shadow: none;
|
||
font-size: var(--font-ui-medium);
|
||
font-weight: var(--font-medium);
|
||
padding: 0;
|
||
}
|
||
|
||
.cpwn-todoist-task-chip-input:hover,
|
||
.cpwn-todoist-task-chip-input:focus,
|
||
.cpwn-todoist-task-chip-select:hover,
|
||
.cpwn-todoist-task-chip-select:focus {
|
||
border: 0;
|
||
background: transparent;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.cpwn-todoist-task-chip-select {
|
||
appearance: auto;
|
||
}
|
||
|
||
.cpwn-todoist-icon-button {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex: 0 0 88px;
|
||
width: 88px;
|
||
padding: 0;
|
||
}
|
||
|
||
.cpwn-todoist-task-extra {
|
||
margin-top: 12px;
|
||
display: flex;
|
||
}
|
||
|
||
.cpwn-todoist-task-extra.is-hidden {
|
||
display: none;
|
||
}
|
||
|
||
.cpwn-todoist-task-extra .cpwn-todoist-task-chip {
|
||
width: 245px;
|
||
height: 52px;
|
||
}
|
||
|
||
.cpwn-todoist-task-notes ul {
|
||
margin: 22px 0 26px;
|
||
padding-inline-start: 32px;
|
||
color: var(--text-muted);
|
||
font-size: var(--font-ui-medium);
|
||
font-weight: var(--font-medium);
|
||
}
|
||
|
||
.cpwn-todoist-task-modal-root hr {
|
||
margin: 0 0 30px;
|
||
border-color: var(--color-base-25);
|
||
}
|
||
|
||
.cpwn-todoist-task-controls {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 24px;
|
||
}
|
||
|
||
.cpwn-todoist-project-button {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
flex: 0 0 208px;
|
||
gap: 12px;
|
||
width: 208px;
|
||
min-width: 0;
|
||
padding: 0 24px;
|
||
font-size: var(--font-ui-medium);
|
||
font-weight: var(--font-medium);
|
||
}
|
||
|
||
.cpwn-todoist-task-controls .task-creation-action {
|
||
display: flex;
|
||
align-items: center;
|
||
flex: 0 0 auto;
|
||
gap: 30px;
|
||
}
|
||
|
||
.cpwn-todoist-add-button-group {
|
||
display: flex;
|
||
flex: 0 0 auto;
|
||
gap: 0;
|
||
}
|
||
|
||
.cpwn-todoist-add-primary {
|
||
height: 42px;
|
||
border-top-right-radius: 0;
|
||
border-bottom-right-radius: 0;
|
||
}
|
||
|
||
.cpwn-todoist-add-menu {
|
||
height: 42px;
|
||
min-width: 64px;
|
||
border-top-left-radius: 0;
|
||
border-bottom-left-radius: 0;
|
||
border-left: 1px solid var(--background-modifier-border);
|
||
padding: 0 14px;
|
||
}
|
||
|
||
.cpwn-todoist-add-menu .cpwn-todoist-task-icon .svg-icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
@media (max-width: 700px) {
|
||
.cpwn-todoist-task-modal-root {
|
||
width: calc(100vw - 48px);
|
||
}
|
||
|
||
.cpwn-todoist-task-selectors,
|
||
.cpwn-todoist-task-controls {
|
||
align-items: stretch;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.cpwn-todoist-task-chip,
|
||
.cpwn-todoist-icon-button,
|
||
.cpwn-todoist-project-button {
|
||
width: 100%;
|
||
}
|
||
|
||
.cpwn-todoist-task-controls .task-creation-action {
|
||
justify-content: flex-end;
|
||
gap: 12px;
|
||
}
|
||
}
|
||
|
||
/* -- Scratchpad Content & Buttons -- */
|
||
.cpwn-scratchpad-wrapper {
|
||
flex: 1 1 auto;
|
||
display: grid;
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
.cpwn-scratch-content:focus {
|
||
border: none;
|
||
outline: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.cpwn-scratchpad-wrapper.markdown-preview-view {
|
||
overflow-wrap: break-word;
|
||
word-wrap: break-word;
|
||
word-break: break-all;
|
||
align-content: start;
|
||
padding: 15px;
|
||
}
|
||
|
||
.cpwn-scratchpad-wrapper.markdown-preview-view p {
|
||
margin-block-start: 0;
|
||
margin-block-end: 0.5em;
|
||
}
|
||
|
||
.cpwn-scratchpad-actions-container {
|
||
position: absolute;
|
||
top: 8px;
|
||
right: 8px;
|
||
z-index: 10;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
.cpwn-scratchpad-action-btn {
|
||
cursor: pointer;
|
||
background-color: var(--background-modifier-hover);
|
||
border: 1px solid var(--background-modifier-border);
|
||
border-radius: var(--radius-s);
|
||
padding: 4px;
|
||
line-height: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.cpwn-scratchpad-action-btn .svg-icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
|
||
.cpwn-cratchpad-action-btn:hover {
|
||
background-color: var(--background-modifier-border);
|
||
}
|
||
|
||
/* -- Scratchpad Textarea & Highlighter -- */
|
||
.cpwn-scratch-base {
|
||
margin: 0;
|
||
padding: 0.75rem 0.75rem 0.5rem 0.5rem;
|
||
border: none;
|
||
font-family: var(--cpwn-scratch-font-family);
|
||
font-size: var(--cpwn-scratch-font-size);
|
||
font-weight: var(--cpwn-scratch-bold);
|
||
line-height: 1.5;
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
height: 100%;
|
||
grid-area: 1 / 1;
|
||
overflow: auto;
|
||
}
|
||
|
||
.cpwn-scratch-highlighter {
|
||
z-index: 1;
|
||
color: transparent;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.cpwn-scratch-highlighter mark {
|
||
color: transparent;
|
||
background-color: var(--cpwn-scratchpad-highlight-color);
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.cpwn-scratch-content {
|
||
z-index: 2;
|
||
background-color: transparent;
|
||
resize: none;
|
||
}
|
||
|
||
.cpwn-scratch-content:hover {
|
||
background-color: transparent;
|
||
}
|
||
|
||
.cpwn-scratch-content::selection {
|
||
background-color: var(--cpwn-scratchpad-highlight-color);
|
||
}
|
||
|
||
/* -- Notes & Tasks List Styles -- */
|
||
.cpwn-notes-container, .cpwn-tasks-container {
|
||
overflow-y: auto;
|
||
flex: 1 1 auto;
|
||
min-height: 0;
|
||
padding: 4px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.cpwn-note-row, .cpwn-task-row {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 8px;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
outline: none;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.cpwn-note-row {
|
||
gap: 1em;
|
||
}
|
||
|
||
.cpwn-task-row {
|
||
gap: 0.5em;
|
||
}
|
||
|
||
.cpwn-task-row .cpwn-task-text > p {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.cpwn-task-text .cpwn-task-completed-text {
|
||
text-decoration: line-through;
|
||
opacity: 0.6;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
#notes-list-view .cpwn-note-row:hover,
|
||
#asset-list-view .cpwn-note-row:hover,
|
||
#pinned-notes-list .cpwn-note-row:hover,
|
||
.cpwn-tasks-container .cpwn-task-row:hover,
|
||
#notes-list-view .cpwn-note-row:focus,
|
||
#asset-list-view .cpwn-note-row:focus,
|
||
#pinned-notes-list .cpwn-note-row:focus,
|
||
.cpwn-tasks-container .cpwn-task-row:focus {
|
||
background-color: var(--cpwn-notes-hover-color);
|
||
}
|
||
|
||
|
||
/* Note Row Color Styles */
|
||
|
||
.cpwn-note-highlight-color-section {
|
||
margin-top: 400; /* remove extra gap above the title */
|
||
padding: 0 2px;
|
||
}
|
||
|
||
.cpwn-note-highlight-color-row {
|
||
display: flex;
|
||
gap: 6px;
|
||
padding: 0 2px 4px 2px; /* align circles horizontally with text */
|
||
margin-left: 18px; /* align circles vertically with text */
|
||
margin-bottom: 6px;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.cpwn-note-highlight-note-row.cpwn-note-highlight-color-row {
|
||
background-color: var(--cpwn-note-highlight-color);
|
||
}
|
||
|
||
.cpwn-note-highlight-note-row.cpwn-note-highlight-color-bar::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 4px;
|
||
bottom: 4px;
|
||
width: 5px;
|
||
border-radius: 999px;
|
||
background-color: var(--cpwn-note-highlight-color);
|
||
}
|
||
|
||
.cpwn-note-highlight-note-row.cpwn-note-highlight-color-border {
|
||
box-shadow: 0 0 0 2px var(--cpwn-note-highlight-color);
|
||
}
|
||
|
||
.cpwn-note-highlight-note-row {
|
||
position: relative;
|
||
border-radius: 8px;
|
||
transition: background-color 120ms ease, box-shadow 120ms ease;
|
||
}
|
||
|
||
|
||
/* left bar */
|
||
.cpwn-note-highlight-note-row.cpwn-note-highlight-color-bar::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 4px;
|
||
bottom: 4px;
|
||
width: 5px;
|
||
border-radius: 999px;
|
||
background-color: var(--cpwn-note-highlight-color);
|
||
}
|
||
|
||
/* border */
|
||
.cpwn-note-highlight-note-row.cpwn-note-highlight-color-border {
|
||
box-shadow: 0 0 0 2px var(--cpwn-note-highlight-color);
|
||
}
|
||
|
||
.cpwn-note-highlight-color-swatch {
|
||
position: relative;
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: 50%;
|
||
border: 1px solid rgba(0,0,0,0.35);
|
||
cursor: pointer;
|
||
box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
|
||
transition: transform 80ms ease, box-shadow 80ms ease, background-color 80ms ease;
|
||
}
|
||
|
||
/* ring for selected */
|
||
.cpwn-note-highlight-color-swatch.is-selected {
|
||
box-shadow: 0 0 0 2px var(--interactive-accent);
|
||
}
|
||
|
||
/* X overlay only when selected + hovered */
|
||
.cpwn-note-highlight-color-swatch.is-selected:hover::after {
|
||
content: '×';
|
||
position: absolute;
|
||
inset: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
text-shadow: 0 0 4px rgba(0,0,0,0.7);
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
.cpwn-note-status-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.cpwn-note-status-dot-created { background-color: var(--cpwn-note-created-color); }
|
||
.cpwn-note-status-dot-modified { background-color: var(--cpwn-note-modified-color); }
|
||
.cpwn-note-row .cpwn-note-title-wrapper {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 6px;
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.cpwn-note-row .cpwn-note-title {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
font-size: var(--cpwn-notes-font-size);
|
||
font-weight: var(--cpwn-notes-bold);
|
||
}
|
||
|
||
.cpwn-note-row .note-meta-container {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1em;
|
||
flex-shrink: 0;
|
||
margin-left: 1em;
|
||
}
|
||
|
||
.cpwn-note-row .note-file-size {
|
||
font-size: 0.8em;
|
||
color: var(--text-muted);
|
||
width: 65px;
|
||
text-align: right;
|
||
}
|
||
|
||
.cpwn-note-row .note-mod-date {
|
||
white-space: nowrap;
|
||
font-size: 0.8em;
|
||
color: var(--text-muted);
|
||
width: 85px;
|
||
text-align: right
|
||
}
|
||
|
||
/* -- Tasks Specific Styles -- */
|
||
.cpwn-task-group-container {
|
||
margin-bottom: 10px;
|
||
padding: 8px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
/* -- Popups & Tooltips -- */
|
||
/* Common base styles for popups */
|
||
.cpwn-other-notes-popup, .cpwn-custom-suggestion-container {
|
||
position: absolute;
|
||
z-index: 100;
|
||
background-color: var(--background-secondary);
|
||
border: 1px solid #4a4a4a;
|
||
border-radius: 15px;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
||
min-width: 450px;
|
||
max-width: 658px;
|
||
}
|
||
|
||
/* Main popup specific styles */
|
||
.cpwn-other-notes-popup {
|
||
padding: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
max-height: 250px; /* Increased slightly for mobile header */
|
||
z-index: 1000;
|
||
overflow: visible;
|
||
}
|
||
|
||
/* Popup header */
|
||
.cpwn-popup-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 8px 12px;
|
||
border-bottom: 1px solid var(--background-modifier-border);
|
||
flex-shrink: 0; /* Prevent header from shrinking */
|
||
cursor: pointer;
|
||
gap: 10px;
|
||
}
|
||
|
||
.cpwn-popup-header-title {
|
||
font-weight: normal;
|
||
color: var(--text-muted);
|
||
flex-grow: 1; /* Allow title to take available space */
|
||
flex-shrink: 1; /* Allow title to shrink if needed */
|
||
min-width: 0; /* Important for text-overflow to work with flex items */
|
||
white-space: nowrap; /* Prevent title from wrapping */
|
||
overflow: hidden; /* Hide overflow */
|
||
text-overflow: ellipsis; /* Add ellipsis for long titles */
|
||
font-size: var(--cpwn-other-note-popup-font-size);
|
||
/* max-width: 420px; */
|
||
|
||
}
|
||
|
||
.cpwn-popup-close-btn {
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 50%;
|
||
/* Default for DARK theme: Light grey circle */
|
||
background-color: #9c9b9b;
|
||
/* Default for DARK theme: Dark 'x' icon */
|
||
color: #383838;
|
||
transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
|
||
}
|
||
|
||
.cpwn-popup-close-btn:hover {
|
||
/* Hover for DARK theme: Even lighter circle */
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
/* -- Light Theme Overrides -- */
|
||
body.theme-light .cpwn-popup-close-btn {
|
||
/* Default for LIGHT theme: Dark grey circle */
|
||
background-color: #5c5c5c;
|
||
/* Default for LIGHT theme: White 'x' icon */
|
||
color: #ffffff;
|
||
}
|
||
|
||
body.theme-light .cpwn-popup-close-btn:hover {
|
||
/* Hover for LIGHT theme: Even darker circle */
|
||
background-color: #383838;
|
||
}
|
||
|
||
.cpwn-popup-close-btn .svg-icon {
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
|
||
/* Content wrapper for scrolling and padding */
|
||
.cpwn-popup-content-wrapper {
|
||
padding: 8px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
/* Suggestion container specific styles */
|
||
.cpwn-custom-suggestion-container {
|
||
z-index: 999;
|
||
margin-top: 4px;
|
||
padding: 8px;
|
||
max-height: 200px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.cpwn-other-notes-popup-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
padding: 12px 2px 8px 2px;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
white-space: normal;
|
||
word-break: break-word;
|
||
text-overflow: ellipsis;
|
||
font-size: var(--cpwn-other-note-popup-font-size);
|
||
}
|
||
|
||
.cpwn-other-notes-popup-item .cpwn-popup-file-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
margin-left: calc(8px); /* Push dot over by checkbox width + small gap */
|
||
}
|
||
|
||
.cpwn-other-notes-popup-item:hover {
|
||
background-color: var(--background-modifier-hover);
|
||
}
|
||
|
||
.cpwn-other-notes-popup-item .svg-icon {
|
||
flex-shrink: 0;
|
||
width: 1.2em;
|
||
height: 1.2em;
|
||
}
|
||
|
||
.cpwn-note-row .cpwn-note-status-dot,
|
||
.cpwn-other-notes-popup-item .cpwn-popup-file-dot,
|
||
.cpwn-other-notes-popup-item .cpwn-popup-asset-thumbnail {
|
||
margin-top: 5px;
|
||
align-self: flex-start;
|
||
}
|
||
|
||
.cpwn-note-row:hover {
|
||
background-color: var(--background-modifier-hover);
|
||
}
|
||
|
||
.cpwn-other-notes-popup-item p {
|
||
margin: 0;
|
||
}
|
||
.cpwn-popup-file-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.cpwn-custom-suggestion-item {
|
||
padding: 8px 12px;
|
||
cursor: pointer;
|
||
font-size: var(--cpwn-font-ui-small);
|
||
}
|
||
|
||
.cpwn-custom-suggestion-item:hover {
|
||
background-color: var(--background-modifier-hover);
|
||
}
|
||
|
||
.cpwn-setting-item-control {
|
||
position: relative;
|
||
}
|
||
|
||
.cpwn-note-title-wrapper:hover .tooltip,
|
||
.cpwn-note-title-cell:hover .tooltip,
|
||
.cpwn-task-text:hover .tooltip {
|
||
text-align: left;
|
||
padding: 6px 10px;
|
||
white-space: pre-wrap;
|
||
max-width: 400px;
|
||
transition-delay: 0.5s;
|
||
background-color: var(--background-secondary);
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
||
border-radius: 15px;
|
||
border: 1px solid #4a4a4a;
|
||
font-size: var(--cpwn-other-note-popup-font-size);
|
||
color: var(--cpwn-text-normal);
|
||
font-weight: normal;
|
||
}
|
||
|
||
/* -- Vertical View -- */
|
||
.cpwn-vertical-calendar-scroller {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.cpwn-vertical-month-wrapper {
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.cpwn-vertical-month-title {
|
||
font-size: var(--cpwn-main-month-year-title-font-size);
|
||
font-weight: var(--cpwn-main-month-title-weight);
|
||
background-color: var(--background-secondary);
|
||
color: var(--cpwn-month-color-themed);
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 10;
|
||
margin: 0.6rem 0;
|
||
height: 2rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.cpwn-theme-light .cpwn-vertical-month-title {
|
||
color: var(--cpwn-month-color-themed);
|
||
background-color: var(--cpwn-background-primary);
|
||
}
|
||
|
||
.cpwn-theme-dark .cpwn-vertical-month-title {
|
||
color: var(--cpwn-month-color-themed);
|
||
background-color: var(--background-secondary);
|
||
}
|
||
|
||
/* DEFAULT: Force White/Inherit structure */
|
||
.cpwn-vertical-title-hoverable .cpwn-month-title-month,
|
||
.cpwn-vertical-title-hoverable .cpwn-month-title-year {
|
||
color: inherit;
|
||
}
|
||
|
||
/* HOVER: Use the injected variables */
|
||
.cpwn-vertical-title-hoverable:hover .cpwn-month-title-month {
|
||
color: var(--cpwn-month-color-themed);
|
||
}
|
||
|
||
.cpwn-vertical-title-hoverable:hover .cpwn-month-title-year {
|
||
color: var(--cpwn-year-color-themed);
|
||
}
|
||
|
||
.cpwn-period-month-container.cpwn-vertical-view-active .cpwn-tabs-content-wrapper { display: none; }
|
||
.cpwn-period-month-container:not(.cpwn-vertical-view-active) .cpwn-vertical-calendar-scroller { display: none; }
|
||
/* -- Mobile-Specific Overrides -- */
|
||
.is-mobile .notes-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
table-layout: fixed;
|
||
}
|
||
|
||
.is-mobile .notes-table-row {
|
||
cursor: pointer;
|
||
border-bottom: 1px solid var(--background-modifier-border);
|
||
}
|
||
|
||
.is-mobile .notes-table .cpwn-note-title-cell, .is-mobile .notes-table .note-date-cell {
|
||
padding: 0.6rem 0.5rem;
|
||
vertical-align: top;
|
||
}
|
||
|
||
.is-mobile .notes-table .cpwn-note-title-cell {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
white-space: normal;
|
||
word-break: break-word;
|
||
font-size: var(--cpwn-notes-font-size);
|
||
font-weight: var(--cpwn-notes-bold);
|
||
}
|
||
|
||
.is-mobile .notes-table .note-date-cell {
|
||
width: 85px;
|
||
text-align: right;
|
||
white-space: nowrap;
|
||
font-size: 0.8em;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.is-mobile .cpwn-period-calendar-table th, .is-mobile .cpwn-period-calendar-table .cpwn-pw-label-cell {
|
||
/*font-size: 12px; */
|
||
font-size: calc(var(--cpwn-calendar-label-font-size) * 0.9);
|
||
padding: 0;
|
||
}
|
||
|
||
.is-mobile .cpwn-period-calendar-table .cpwn-day-number {
|
||
font-size: calc(var(--cpwn-calendar-day-number-font-size) * 0.9);
|
||
}
|
||
|
||
.cpwn-period-calendar-table .cpwn-pw-label-cell .cpwn-day-number,
|
||
.cpwn-period-calendar-table .cpwn-week-number-cell .cpwn-day-number {
|
||
font-size: inherit; /* Inherit the correct font size from the parent cell */
|
||
}
|
||
|
||
/* Default row height */
|
||
.cpwn-period-calendar-table tbody tr {
|
||
height: 36px;
|
||
min-height: 36px;
|
||
}
|
||
|
||
.cpwn-period-calendar-table tbody td {
|
||
min-height: 36px;
|
||
}
|
||
|
||
/* Adjust row height for condensed layout */
|
||
.cpwn-period-month-container.layout-condensed .cpwn-period-calendar-table tbody tr {
|
||
height: 30px;
|
||
min-height: 30px;
|
||
}
|
||
|
||
.cpwn-period-month-container.layout-condensed .cpwn-period-calendar-table tbody td {
|
||
min-height: 30px;
|
||
}
|
||
|
||
/* Adjust row height for spacious layout */
|
||
.cpwn-period-month-container.layout-spacious .cpwn-period-calendar-table tbody tr {
|
||
height: 40px;
|
||
min-height: 40px;
|
||
}
|
||
|
||
.cpwn-period-month-container.layout-spacious .cpwn-period-calendar-table tbody td {
|
||
min-height: 40px;
|
||
}
|
||
|
||
/* -- Misc -- */
|
||
.cpwn-period-month-container .svg-icon {
|
||
color: var(--cpwn-icon-color, currentColor);
|
||
}
|
||
|
||
/* -- Unified clear button for all search inputs -- */
|
||
.cpwn-search-input-clear-btn {
|
||
position: absolute;
|
||
right: 6px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
visibility: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 15px;
|
||
height: 15px;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
transition: background-color 0.1s ease-in-out;
|
||
background-color: #9c9b9b;
|
||
/* Color is now set directly on the icon rule below */
|
||
}
|
||
|
||
.cpwn-search-input-clear-btn:hover {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.cpwn-search-input-clear-btn .svg-icon {
|
||
width: 13px;
|
||
height: 13px;
|
||
/* FIX: Force the icon color to be dark */
|
||
color: #383838;
|
||
}
|
||
|
||
/* -- Light Theme Overrides -- */
|
||
body.theme-light .cpwn-search-input-clear-btn {
|
||
background-color: #5c5c5c;
|
||
}
|
||
|
||
body.theme-light .cpwn-search-input-clear-btn:hover {
|
||
background-color: #383838;
|
||
}
|
||
|
||
body.theme-light .cpwn-search-input-clear-btn .svg-icon {
|
||
/* FIX: Force the icon color to be white in the light theme */
|
||
color: #ffffff;
|
||
}
|
||
|
||
/* -- Task Header Icons -- */
|
||
.cpwn-task-group-header .icon {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
/* -- Tab Icons -- */
|
||
.cpwn-tab-icon {
|
||
width: 1.2em;
|
||
height: 1.2em;
|
||
}
|
||
.cpwn-note-tab {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5em;
|
||
}
|
||
|
||
/* -- Asset List Styles -- */
|
||
.cpwn-asset-thumbnail, .cpwn-popup-asset-thumbnail {
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: var(--radius-s);
|
||
object-fit: cover;
|
||
}
|
||
|
||
.cpwn-popup-asset-thumbnail {
|
||
width: 22px;
|
||
height: 22px;
|
||
}
|
||
|
||
.cpwn-asset-icon-container, .cpwn-asset-thumbnail-container {
|
||
width: 28px;
|
||
height: 28px;
|
||
flex-shrink: 0;
|
||
margin-right: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.cpwn-asset-icon-container .svg-icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
.cpwn-asset-action-icon {
|
||
position: relative;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 6px;
|
||
}
|
||
|
||
.cpwn-asset-action-icon > div {
|
||
position: absolute;
|
||
transition: opacity 0.2s ease-in-out;
|
||
}
|
||
|
||
.cpwn-asset-action-icon .svg-icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
|
||
.cpwn-asset-action-icon div:nth-child(2) {
|
||
opacity: 0;
|
||
}
|
||
|
||
.cpwn-note-row:hover .cpwn-asset-action-icon div:nth-child(1) {
|
||
opacity: 0;
|
||
}
|
||
|
||
.cpwn-note-row:hover .cpwn-asset-action-icon div:nth-child(2) {
|
||
opacity: 1;
|
||
}
|
||
|
||
.cpwn-asset-action-icon:hover .svg-icon {
|
||
color: var(--cpwn-text-error);
|
||
}
|
||
|
||
/* -- Asset Grid Styles -- */
|
||
.cpwn-note-list-wrapper.assets-grid-view {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||
gap: 16px;
|
||
padding-top: 8px;
|
||
}
|
||
|
||
.cpwn-asset-grid-item {
|
||
/* flex-basis: calc(50% - 8px); */
|
||
display: flex;
|
||
flex-direction: column;
|
||
cursor: pointer;
|
||
border-radius: 12px;
|
||
background-color: var(--background-secondary);
|
||
overflow: hidden;
|
||
border: 1px solid var(--background-modifier-border);
|
||
padding: 8px;
|
||
box-sizing: border-box; /* THIS IS THE CRITICAL MISSING LINE */
|
||
}
|
||
|
||
.cpwn-asset-grid-preview {
|
||
width: 100%;
|
||
aspect-ratio: 4 / 3;
|
||
background-color: var(--background-modifier-hover);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.cpwn-asset-grid-preview img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.cpwn-asset-grid-name {
|
||
padding: 8px 4px 0; /* Adjusted padding */
|
||
margin-top: 8px; /* Adds space between the image and text */
|
||
font-size: 0.9em;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
border-top: 1px solid var(--background-modifier-border);
|
||
}
|
||
|
||
.cpwn-asset-grid-item:hover {
|
||
background-color: var(--cpwn-notes-hover-color);
|
||
border-color: rgba(200, 200, 200, 0.75); /* A lighter, semi-transparent gray */
|
||
}
|
||
|
||
/* -- Settings Tabs -- */
|
||
.cpwn-period-settings-container {
|
||
display: flex;
|
||
height: 100%;
|
||
}
|
||
|
||
/* Base style for all navigation buttons in the settings panel */
|
||
.cpwn-period-settings-nav button {
|
||
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
|
||
}
|
||
|
||
/* Highlight style for the currently active settings tab button */
|
||
.cpwn-period-settings-nav button.is-active {
|
||
background-color: var(--interactive-accent);
|
||
color: var(--cpwn-text-on-accent); /* Standard Obsidian variable for contrast */
|
||
}
|
||
|
||
.cpwn-period-settings-container .setting-item-heading {
|
||
color: var(--cpwn-text-normal);
|
||
}
|
||
|
||
.cpwn-period-settings-nav {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding-right: 1.5rem;
|
||
border-right: 1px solid var(--background-modifier-border);
|
||
width: 160px;
|
||
flex-shrink: 0;
|
||
gap: 4px;
|
||
}
|
||
|
||
.cpwn-period-settings-nav-button {
|
||
background: none;
|
||
border: none;
|
||
text-align: left;
|
||
padding: 0.75rem 0.5rem;
|
||
margin-bottom: 0.25rem;
|
||
cursor: pointer;
|
||
border-radius: var(--radius-m);
|
||
color: var(--text-muted);
|
||
font-size: var(--cpwn-font-ui-small);
|
||
}
|
||
|
||
.cpwn-period-settings-nav-button:hover {
|
||
background-color: var(--background-modifier-hover);
|
||
color: var(--cpwn-text-normal);
|
||
}
|
||
|
||
.cpwn-period-settings-nav-button.is-active {
|
||
background-color: var(--interactive-accent);
|
||
color: var(--cpwn-text-on-accent);
|
||
font-weight: bold;
|
||
}
|
||
|
||
.cpwn-period-settings-content {
|
||
flex-grow: 1;
|
||
padding-left: 1.5rem;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.cpwn-period-settings-content > :first-child {
|
||
/* Remove the browser's default top margin from the header */
|
||
margin-top: 0;
|
||
padding-top: 6px;
|
||
}
|
||
|
||
.cpwn-popup-section-header {
|
||
font-size: 0.8em;
|
||
font-weight: bold;
|
||
color: var(--text-muted);
|
||
letter-spacing: 0.05em;
|
||
margin: 10px 8px 4px;
|
||
padding: 0;
|
||
}
|
||
|
||
.cpwn-popup-separator {
|
||
border-bottom: 1px solid var(--background-modifier-border);
|
||
margin: 6px 8px;
|
||
}
|
||
|
||
.cpwn-other-notes-popup .cpwn-popup-section-header:first-child {
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.cpwn-note-group-header {
|
||
font-size: 0.85em;
|
||
font-weight: bold;
|
||
color: var(--text-muted);
|
||
letter-spacing: 0.05em;
|
||
padding: 12px 4px 4px;
|
||
}
|
||
|
||
.cpwn-note-title-path-wrapper,
|
||
.cpwn-other-notes-popup-item .cpwn-note-title-path-wrapper {
|
||
flex-grow: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-width: 0;
|
||
}
|
||
|
||
.cpwn-note-row .cpwn-note-path,
|
||
.cpwn-other-notes-popup-item .cpwn-note-path {
|
||
font-size: 0.8em;
|
||
color: var(--text-muted);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.cpwn-other-notes-popup-item .note-icon {
|
||
flex-shrink: 0;
|
||
margin-left: 8px; /* Match checkbox width + small gap */
|
||
}
|
||
|
||
/* -- Note Group Collapse Styles -- */
|
||
.cpwn-note-group-container {
|
||
border: 1px solid var(--background-modifier-border); /* Adds a subtle, theme-aware border */
|
||
border-radius: var(--radius-l); /* Rounds the corners of the card */
|
||
padding: 0 8px 8px; /* Adds some internal spacing for the note list */
|
||
margin-bottom: 12px; /* Increases space between cards */
|
||
}
|
||
|
||
.cpwn-note-group-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
font-size: 0.85em;
|
||
font-weight: bold;
|
||
color: var(--text-muted);
|
||
letter-spacing: 0.05em;
|
||
padding: 12px 4px 4px;
|
||
}
|
||
|
||
.cpwn-note-group-header:hover {
|
||
color: var(--cpwn-text-normal);
|
||
}
|
||
|
||
.cpwn-note-group-header-content {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.cpwn-note-group-count {
|
||
font-size: 0.9em;
|
||
background-color: var(--background-modifier-border);
|
||
border-radius: 4px;
|
||
padding: 1px 5px;
|
||
}
|
||
|
||
.cpwn-note-group-collapse-icon .svg-icon {
|
||
transition: transform 0.2s ease-in-out;
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
|
||
.cpwn-note-group-container.cpwn-is-collapsed .cpwn-note-group-collapse-icon .svg-icon {
|
||
transform: rotate(-90deg);
|
||
}
|
||
|
||
.cpwn-note-list-wrapper {
|
||
overflow: hidden;
|
||
transition: max-height 0.3s ease-in-out, margin-top 0.3s ease-in-out;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.cpwn-note-group-container.cpwn-is-collapsed .cpwn-note-list-wrapper {
|
||
max-height: 0;
|
||
margin-top: 0;
|
||
}
|
||
|
||
/* -- Pull to Refresh Indicator -- */
|
||
.cpwn-pm-refresh-indicator {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--cpwn-icon-color);
|
||
z-index: 5;
|
||
opacity: 0;
|
||
transform: translateY(-50px) scale(0.7);
|
||
transition: transform 0.3s, opacity 0.3s;
|
||
}
|
||
|
||
.cpwn-pm-refresh-indicator.is-pulling {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.cpwn-pm-refresh-indicator.is-ready {
|
||
opacity: 1;
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
|
||
.cpwn-pm-refresh-indicator.is-refreshing .svg-icon {
|
||
animation: spin 1.2s linear infinite;
|
||
}
|
||
|
||
/* Re-use the spin animation from the refresh button */
|
||
@keyframes spin {
|
||
from { transform: rotate(0deg); }
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
/* -- Mobile Keyboard Handling -- */
|
||
.cpwn-scratch-content.is-editing-mobile {
|
||
padding-bottom: 45vh; /* 45% of the visible screen height */
|
||
}
|
||
|
||
/* ==========================================================================
|
||
WEEKEND/WEEK HIGHLIGHTING LOGIC
|
||
========================================================================== */
|
||
|
||
/* 1. Neutralize weekend shade inside the current week row */
|
||
.cpwn-period-calendar-table tbody tr.current-week-row {
|
||
--cpwn-weekend-shade-color-themed: transparent;
|
||
}
|
||
|
||
/* 2. Regular weekend shading for SUNDAY-START weeks */
|
||
.cpwn-period-month-container:not(.monday-start).weekend-shading-enabled:not(.has-pw-column):not(.has-week-numbers)
|
||
.cpwn-period-calendar-table tbody tr:not(.current-week-row) td:nth-child(1),
|
||
.cpwn-period-month-container:not(.monday-start).weekend-shading-enabled:not(.has-pw-column):not(.has-week-numbers)
|
||
.cpwn-period-calendar-table tbody tr:not(.current-week-row) td:nth-child(7),
|
||
.cpwn-period-month-container:not(.monday-start).weekend-shading-enabled.has-pw-column:not(.has-week-numbers)
|
||
.cpwn-period-calendar-table tbody tr:not(.current-week-row) td:nth-child(2),
|
||
.cpwn-period-month-container:not(.monday-start).weekend-shading-enabled.has-pw-column:not(.has-week-numbers)
|
||
.cpwn-period-calendar-table tbody tr:not(.current-week-row) td:nth-child(8),
|
||
.cpwn-period-month-container:not(.monday-start).weekend-shading-enabled.has-week-numbers:not(.has-pw-column)
|
||
.cpwn-period-calendar-table tbody tr:not(.current-week-row) td:nth-child(2),
|
||
.cpwn-period-month-container:not(.monday-start).weekend-shading-enabled.has-week-numbers:not(.has-pw-column)
|
||
.cpwn-period-calendar-table tbody tr:not(.current-week-row) td:nth-child(8),
|
||
.cpwn-period-month-container:not(.monday-start).weekend-shading-enabled.has-pw-column.has-week-numbers
|
||
.cpwn-period-calendar-table tbody tr:not(.current-week-row) td:nth-child(3),
|
||
.cpwn-period-month-container:not(.monday-start).weekend-shading-enabled.has-pw-column.has-week-numbers
|
||
.cpwn-period-calendar-table tbody tr:not(.current-week-row) td:nth-child(9) {
|
||
background-color: var(--cpwn-weekend-shade-color-themed);
|
||
}
|
||
|
||
/* 3. Weekend shading for MONDAY-START weeks */
|
||
.cpwn-period-month-container.monday-start.weekend-shading-enabled:not(.has-pw-column):not(.has-week-numbers)
|
||
.cpwn-period-calendar-table tbody tr:not(.current-week-row) td:nth-child(6),
|
||
.cpwn-period-month-container.monday-start.weekend-shading-enabled:not(.has-pw-column):not(.has-week-numbers)
|
||
.cpwn-period-calendar-table tbody tr:not(.current-week-row) td:nth-child(7),
|
||
.cpwn-period-month-container.monday-start.weekend-shading-enabled.has-pw-column:not(.has-week-numbers)
|
||
.cpwn-period-calendar-table tbody tr:not(.current-week-row) td:nth-child(7),
|
||
.cpwn-period-month-container.monday-start.weekend-shading-enabled.has-pw-column:not(.has-week-numbers)
|
||
.cpwn-period-calendar-table tbody tr:not(.current-week-row) td:nth-child(8),
|
||
.cpwn-period-month-container.monday-start.weekend-shading-enabled.has-week-numbers:not(.has-pw-column)
|
||
.cpwn-period-calendar-table tbody tr:not(.current-week-row) td:nth-child(7),
|
||
.cpwn-period-month-container.monday-start.weekend-shading-enabled.has-week-numbers:not(.has-pw-column)
|
||
.cpwn-period-calendar-table tbody tr:not(.current-week-row) td:nth-child(8),
|
||
.cpwn-period-month-container.monday-start.weekend-shading-enabled.has-pw-column.has-week-numbers
|
||
.cpwn-period-calendar-table tbody tr:not(.current-week-row) td:nth-child(8),
|
||
.cpwn-period-month-container.monday-start.weekend-shading-enabled.has-pw-column.has-week-numbers
|
||
.cpwn-period-calendar-table tbody tr:not(.current-week-row) td:nth-child(9) {
|
||
background-color: var(--cpwn-weekend-shade-color-themed);
|
||
}
|
||
|
||
/* 4. Make day-content transparent by default */
|
||
.cpwn-period-calendar-table .cpwn-day-content {
|
||
background: transparent;
|
||
}
|
||
|
||
/* 5. If a cell uses border styling (today/tasks), keep its background transparent */
|
||
.cpwn-period-calendar-table .cpwn-day-content[style*="border"] {
|
||
background: transparent;
|
||
}
|
||
|
||
/* This rule highlights the header cell itself and should work as intended. */
|
||
.cpwn-period-calendar-table th.column-hover {
|
||
background: var(--cpwn-row-highlight-color-themed);
|
||
border-top-left-radius: 6px;
|
||
border-top-right-radius: 6px;
|
||
}
|
||
|
||
/* This rule now targets the <td> element directly, just like the working row hover,
|
||
instead of the .cpwn-day-content div inside it. */
|
||
.cpwn-period-calendar-table td.column-hover {
|
||
background: var(--cpwn-row-highlight-color-themed);
|
||
}
|
||
|
||
/* Ensures individual date hover is always on top */
|
||
.cpwn-period-calendar-table td:not(.cpwn-pw-label-cell):not(.cpwn-week-number-cell):hover .cpwn-day-content {
|
||
background-color: var(--cpwn-date-cell-hover-color-themed);
|
||
}
|
||
|
||
/* 1. Base style for the permanent current week highlight */
|
||
.cpwn-period-calendar-table tr.current-week-row .cpwn-day-content {
|
||
background-color: var(--cpwn-row-highlight-color-themed);
|
||
}
|
||
|
||
.cpwn-period-calendar-table tr.current-week-row td {
|
||
background-color: var(--cpwn-row-highlight-color-themed);
|
||
}
|
||
.cpwn-period-calendar-table tr.row-hover:not(.current-week-row) td {
|
||
background-color: var(--cpwn-row-highlight-color-themed);
|
||
}
|
||
|
||
.cpwn-tab-order-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.cpwn-draggable-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 8px;
|
||
background-color: var(--background-secondary-alt);
|
||
border-radius: 6px;
|
||
border: 1px solid var(--background-modifier-border);
|
||
cursor: grab;
|
||
}
|
||
|
||
.cpwn-draggable-item.dragging {
|
||
opacity: 0.5;
|
||
background-color: var(--background-modifier-hover);
|
||
}
|
||
|
||
.cpwn-drag-handle {
|
||
margin-right: 12px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.cpwn-setting-spacer {
|
||
height: 20px; /* Or use margin-top, e.g., margin-top: 20px; */
|
||
}
|
||
|
||
.cpwn-note-group-header-content {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.cpwn-suggestion-content {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.cpwn-suggestion-color-dot {
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
border: 1px solid var(--background-modifier-border);
|
||
}
|
||
|
||
|
||
.cpwn-pinned-sort-indicator {
|
||
font-size: 0.85em;
|
||
color: var(--text-muted);
|
||
font-weight: normal;
|
||
margin-left: 6px;
|
||
/* Prevents the indicator from being selected as text when clicking */
|
||
user-select: none;
|
||
}
|
||
|
||
/* Hide drag handles by default in main UI */
|
||
.cpwn-note-row .cpwn-drag-handle {
|
||
display: none;
|
||
margin-right: 8px;
|
||
color: var(--text-muted);
|
||
cursor: grab;
|
||
}
|
||
|
||
/* Show drag handles when reorder mode is active */
|
||
.cpwn-pinned-notes-reorder-mode .cpwn-note-row .cpwn-drag-handle {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
/* Visual feedback during drag */
|
||
.cpwn-note-row.dragging {
|
||
opacity: 0.5;
|
||
background-color: var(--background-modifier-hover);
|
||
}
|
||
|
||
/* == -- Theme Settings Tab Layout -- */
|
||
/* Main container for each task group row */
|
||
.cpwn-preview.cpwn-task-group {
|
||
display: flex;
|
||
justify-content: space-between; /* Pushes the title and count apart */
|
||
align-items: center;
|
||
padding: 10px 14px; /* Adjust padding to match main UI */
|
||
margin-bottom: 8px; /* Space between rows */
|
||
border-radius: 8px; /* Slightly more rounded corners */
|
||
}
|
||
|
||
/* Wrapper for the icon and title to keep them together */
|
||
.cpwn-preview-task-content-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px; /* Space between the icon and the title text */
|
||
}
|
||
|
||
/* Style for the icon itself */
|
||
.cpwn-preview-task-icon .svg-icon {
|
||
width: 18px; /* Match icon size from main UI */
|
||
height: 18px;
|
||
stroke-width: 2.25; /* A good balance of boldness */
|
||
}
|
||
|
||
/* Style for the title text (e.g., "Overdue") */
|
||
.cpwn-preview-task-title {
|
||
font-size: var(--cpwn-task-heading-font-size);
|
||
}
|
||
|
||
.cpwn-theme-list-item:focus {
|
||
border: 1px solid var(--interactive-accent);
|
||
box-shadow: 0 0 5px var(--interactive-accent);
|
||
outline: none; /* Prevents the default browser outline */
|
||
}
|
||
|
||
/* 1. Main container for the entire Themes tab layout */
|
||
.cpwn-theme-settings-container {
|
||
display: flex;
|
||
gap: 20px;
|
||
align-items: flex-start; /* CRITICAL: Aligns the tops of both columns */
|
||
}
|
||
|
||
/* 2. Left column containing the list of themes */
|
||
.cpwn-theme-list-container {
|
||
flex: 1;
|
||
}
|
||
|
||
/* 3. Right column containing the live preview */
|
||
.cpwn-theme-preview-wrapper {
|
||
flex: 2;
|
||
position: sticky; /* Keeps preview visible on scroll */
|
||
top: 20px;
|
||
padding-left: 20px;
|
||
border-left: 1px solid var(--background-modifier-border);
|
||
}
|
||
|
||
/* 4. Align the titles of both columns */
|
||
.cpwn-theme-list-container > h3,
|
||
.cpwn-theme-preview-wrapper > h3 {
|
||
margin-top: 0;
|
||
margin-bottom: 12px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 5. Fix the large gap above the "October 2025" title */
|
||
.cpwn-theme-preview-pane .cpwn-preview-section-header {
|
||
margin-top: 0;
|
||
padding-top: 0;
|
||
}
|
||
.cpwn-theme-preview-pane .cpwn-preview-section-header h3 {
|
||
margin-top: 0;
|
||
}
|
||
|
||
/* Reduce the space below the task list wrapper in the preview */
|
||
.cpwn-theme-preview-pane .cpwn-preview-section-wrapper {
|
||
margin-bottom: 8px; /* Default is likely 20px or more */
|
||
}
|
||
|
||
/* Reduce the space above the "DOT COLOR KEY" title */
|
||
.cpwn-theme-preview-pane .cpwn-preview-dot-key-container {
|
||
margin-top: 10px; /* Default is likely 15px or more */
|
||
}
|
||
|
||
/* 6. General wrapper for sections inside the preview */
|
||
.cpwn-preview-section-wrapper {
|
||
margin-bottom: 15px;
|
||
padding: 10px;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
/* 7. NEW: Two-column layout for the dot color key */
|
||
.cpwn-preview-dot-key-container {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr); /* Creates two equal columns */
|
||
gap: 0 20px; /* 0px vertical gap, 20px horizontal gap */
|
||
margin-top: 15px;
|
||
padding-top: 0;
|
||
border-top: none; /* Explicitly removes the horizontal line */
|
||
}
|
||
|
||
.cpwn-preview-dot-key-container h5 {
|
||
grid-column: 1 / -1; /* Makes the "DOT COLOR KEY" title span both columns */
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
/* Styling for the list of theme files */
|
||
.cpwn-theme-list-item {
|
||
padding: 8px 12px;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
margin-bottom: 4px;
|
||
transition: background-color 0.2s ease, color 0.2s ease;
|
||
}
|
||
|
||
.cpwn-theme-list-item:hover {
|
||
background-color: var(--background-modifier-hover);
|
||
}
|
||
|
||
.cpwn-theme-list-item.is-active {
|
||
background-color: var(--interactive-accent);
|
||
color: var(--cpwn-text-on-accent);
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* -- Theme Preview -- */
|
||
/* Tab buttons for light/dark mode */
|
||
.cpwn-theme-preview-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
|
||
.cpwn-theme-preview-tabs button { padding: 6px 12px; border: none; border-radius: var(--radius-m); cursor: pointer; background-color: var(--background-modifier-hover); color: var(--text-muted); transition: background-color 0.2s ease; }
|
||
.cpwn-theme-preview-tabs button.is-active { background-color: var(--interactive-accent); color: var(--cpwn-text-on-accent); font-weight: 600; }
|
||
|
||
/* Main preview pane layout */
|
||
/*.cpwn-theme-preview-pane { padding: 15px; border-radius: 8px; border: 1px solid var(--background-modifier-border); }*/
|
||
.cpwn-theme-preview-pane {
|
||
min-height: 250px;
|
||
transition: background-color 0.2s ease, color 0.2s ease;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
|
||
.cpwn-theme-preview-tabs {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.cpwn-theme-preview-tabs button.is-active {
|
||
background-color: var(--interactive-accent);
|
||
color: var(--text-on-accent);
|
||
}
|
||
|
||
|
||
/* Inner wrappers for sections */
|
||
.cpwn-preview-section-wrapper { padding: 10px; border-radius: 6px; margin-bottom: 20px; }
|
||
|
||
/* Base styles for the preview grid container */
|
||
.cpwn-preview-calendar-grid {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.cpwn-preview-calendar-grid th {
|
||
font-weight: 600;
|
||
padding-bottom: 8px;
|
||
}
|
||
|
||
.cpwn-preview-calendar-grid td {
|
||
vertical-align: middle;
|
||
text-align: center;
|
||
height: 45px; /* Give the cell a fixed height */
|
||
}
|
||
|
||
.cpwn-preview-day-content {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.cpwn-preview-day-number {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
z-index: 1; /* Sits above the highlight */
|
||
|
||
font-weight: 500;
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* Style for the "today" highlight in the preview */
|
||
.cpwn-preview-day-number.today {
|
||
width: 2.2em;
|
||
height: 2.2em;
|
||
border-radius: 50%; /* Or 6px for a squircle */
|
||
|
||
/* Use flex to center the number text INSIDE the highlight */
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.cpwn-preview-dots-container {
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
top: 30px;
|
||
display: flex;
|
||
gap: 3px;
|
||
z-index: 2; /* Sits on top of the highlight */
|
||
}
|
||
|
||
/* Style for the individual dots in the preview */
|
||
.cpwn-preview-dot {
|
||
width: 4px;
|
||
height: 4px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
/* Tasks layout styles */
|
||
.cpwn-preview.cpwn-task-group { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-radius: 6px; font-weight: 500; margin-bottom: 6px; }
|
||
|
||
.is-mobile .cpwn-period-calendar-table tbody td.first-date-column::before {
|
||
display: none;
|
||
}
|
||
.is-mobile .cpwn-period-calendar-table tbody tr {
|
||
height: auto;
|
||
}
|
||
|
||
.cpwn-applied-theme-indicator .cpwn-setting-item-name {
|
||
color: var(--cpwn-text-normal);
|
||
}
|
||
|
||
.cpwn-applied-theme-indicator .cpwn-setting-item-description {
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.cpwn-preview-dot-key-container {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr); /* Creates two equal columns */
|
||
gap: 0 20px; /* 0px vertical gap, 20px horizontal gap */
|
||
margin-top: 15px;
|
||
padding-top: 0;
|
||
border-top: none; /* Ensures the line is removed */
|
||
}
|
||
|
||
.cpwn-preview-dot-key-container h5 {
|
||
font-weight: bold;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.cpwn-preview-dot-key-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.cpwn-preview-dot-key-swatch {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
margin-right: 8px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Organizes the header into a flexible container */
|
||
.cpwn-popup-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
/* Creates a vertical stack for the title and path */
|
||
.cpwn-popup-title-container {
|
||
flex-grow: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden; /* Prevents long text from breaking the layout */
|
||
margin-right: 10px; /* Adds space between the text and the close button */
|
||
}
|
||
|
||
/* Styles the new path element */
|
||
.cpwn-popup-header-path {
|
||
font-size: 0.8em; /* Smaller font for the path */
|
||
color: var(--text-muted); /* Uses the theme's muted text color */
|
||
white-space: nowrap; /* Prevents the path from wrapping */
|
||
overflow: hidden;
|
||
text-overflow: ellipsis; /* Adds "..." to very long paths */
|
||
}
|
||
|
||
/* In the File Info section, allow the path text to wrap */
|
||
.cpwn-other-notes-popup-item .cpwn-note-title-path-wrapper .cpwn-note-path {
|
||
white-space: normal; /* Allows text to wrap */
|
||
word-break: break-all; /* Breaks long paths without spaces */
|
||
}
|
||
|
||
/* Styles the container for the 'No backlinks' message and delete button */
|
||
.cpwn-other-notes-popup-item-actions {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 8px 12px;
|
||
background-color: var(--background-secondary-alt); /* A subtle background to distinguish it */
|
||
border-radius: 6px;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
/*
|
||
* Styles the "Delete File" button to be less intrusive.
|
||
* It uses theme variables for a consistent look and feel.
|
||
*/
|
||
.cpwn-other-notes-popup-item-actions button.mod-danger {
|
||
background-color: var(--background-modifier-hover);
|
||
border: 1px solid var(--background-modifier-border);
|
||
color: var(--text-muted);
|
||
font-size: 12px;
|
||
padding: 4px 10px;
|
||
border-radius: 5px;
|
||
margin-left: 16px; /* Adds space between the message and the button */
|
||
transition: all 0.2s ease-in-out;
|
||
}
|
||
|
||
/* Adds a more prominent style when hovering over the delete button */
|
||
.cpwn-other-notes-popup-item-actions button.mod-danger:hover {
|
||
background-color: var(--interactive-accent);
|
||
color: var(--cpwn-text-on-accent);
|
||
border-color: var(--interactive-accent);
|
||
}
|
||
|
||
/*
|
||
* Styles the wrapper for the icon and the "No backlinks" text.
|
||
* This ensures the icon and text are aligned and spaced correctly.
|
||
*/
|
||
.cpwn-other-notes-popup-item-actions > div {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px; /* Adds space between the icon and the text */
|
||
color: var(--text-muted); /* Uses a more subtle text color */
|
||
}
|
||
|
||
/* Ensures the full file path in the info section can wrap to multiple lines */
|
||
.cpwn-other-notes-popup-item .cpwn-note-title-path-wrapper .cpwn-note-path {
|
||
white-space: normal;
|
||
word-break: break-all;
|
||
}
|
||
|
||
/* Standard clickable cursor for the file info section */
|
||
.cpwn-other-notes-popup-item.is-clickable {
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Disable hover and pointer for calendar events */
|
||
.cpwn-other-notes-popup-item.cpwn-is-calendar-event {
|
||
cursor: default; /* Change from pointer to default cursor */
|
||
}
|
||
|
||
.cpwn-other-notes-popup-item.cpwn-is-calendar-event:hover {
|
||
background-color: transparent; /* Prevent hover background change */
|
||
}
|
||
|
||
/* Keep hover for regular notes/assets */
|
||
.cpwn-other-notes-popup-item:not(.cpwn-is-calendar-event):hover {
|
||
background-color: var(--background-modifier-hover);
|
||
}
|
||
|
||
.cpwn-popup-asset-thumbnail {
|
||
width: 22px;
|
||
height: 22px;
|
||
object-fit: cover;
|
||
border-radius: 4px;
|
||
margin-right: 8px; /* Adds space between thumbnail and text */
|
||
}
|
||
|
||
/* Adjust the main item layout to use flexbox */
|
||
.cpwn-other-notes-popup-item {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
/* -- Mobile-Specific Popup Styles -- */
|
||
@media only screen and (max-width: 600px) {
|
||
.cpwn-other-notes-popup {
|
||
/*
|
||
* Sizing:
|
||
* - Make it 90% of the viewport width.
|
||
* - Unset the fixed min-width from the desktop rule.
|
||
* - Ensure it doesn't get wider than 450px.
|
||
*/
|
||
width: 90vw;
|
||
min-width: unset;
|
||
max-width: 450px;
|
||
|
||
/* Positioning: Fix it to the bottom of the screen. */
|
||
position: fixed;
|
||
bottom: calc(8px + env(safe-area-inset-bottom));
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
|
||
/* Appearance: Style it like a modern mobile bottom sheet. */
|
||
max-height: 50vh; /* Prevents it from covering the whole screen. */
|
||
border-radius: 12px 12px 12px 12px; /* Rounds only the top corners. */
|
||
box-shadow: 0 -4px 16px rgba(0,0,0,0.2); /* Shadow to lift it off the page. */
|
||
|
||
/* Reset any desktop positioning styles. */
|
||
top: auto;
|
||
margin: 0;
|
||
}
|
||
|
||
/* Ensure the scrollable content area has appropriate padding. */
|
||
.cpwn-popup-content-wrapper {
|
||
padding: 8px 12px;
|
||
}
|
||
}
|
||
|
||
.cpwn-other-notes-popup.is-mobile-popup {
|
||
border-radius: 12px 12px 0 0; /* Rounded top corners */
|
||
box-shadow: 0 -4px 16px rgba(0,0,0,0.2); /* Shadow at the top */
|
||
border-top: 1px solid var(--background-modifier-border);
|
||
}
|
||
|
||
/* -- Popup Actions -- */
|
||
.cpwn-popup-actions-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 4px 8px;
|
||
margin-top: 4px;
|
||
border-top: 1px solid var(--background-modifier-border);
|
||
background-color: transparent;
|
||
}
|
||
|
||
.cpwn-popup-info-message {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px; /* Space between icon and text */
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
/* Ensure it also has no background */
|
||
background-color: transparent;
|
||
}
|
||
|
||
.cpwn-other-notes-popup-item {
|
||
background-color: transparent;
|
||
}
|
||
|
||
/* Style for the icon button itself */
|
||
.cpwn-popup-action-icon-btn {
|
||
cursor: pointer;
|
||
width: 28px;
|
||
height: 28px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50%;
|
||
transition: background-color 0.2s ease;
|
||
}
|
||
|
||
.cpwn-popup-action-icon-btn .svg-icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.cpwn-popup-action-icon-btn:hover {
|
||
background-color: var(--background-modifier-hover);
|
||
}
|
||
|
||
/* Specific danger state for delete */
|
||
.cpwn-popup-action-icon-btn.mod-danger:hover {
|
||
background-color: var(--cpwn-color-red);
|
||
}
|
||
|
||
.cpwn-popup-action-icon-btn.mod-danger:hover .svg-icon {
|
||
color: var(--cpwn-text-on-accent);
|
||
}
|
||
|
||
/* Style the header when reorder mode is active to give user feedback */
|
||
.cpwn-reorder-mode-active .cpwn-note-group-header-content {
|
||
background-color: var(--interactive-accent);
|
||
color: var(--cpwn-text-on-accent);
|
||
border-radius: 5px;
|
||
transition: background-color 0.3s ease;
|
||
}
|
||
|
||
/* By default, hide the drag handles on all note rows */
|
||
.cpwn-note-row .cpwn-drag-handle {
|
||
display: none;
|
||
}
|
||
|
||
/* Only show the drag handle when the container is in reorder mode */
|
||
.cpwn-reorder-mode-active .cpwn-note-row .cpwn-drag-handle {
|
||
display: flex;
|
||
}
|
||
|
||
/* -- Main Tab Scroller -- */
|
||
.cpwn-pm-tab-content {
|
||
flex: 1 1 auto;
|
||
min-height: 0;
|
||
overflow-y: auto; /* Enables vertical scrolling when content overflows */
|
||
}
|
||
|
||
/* -- Base Widget Container -- */
|
||
/* Defines the appearance and INTERNAL spacing of all widgets */
|
||
/* -- Main Dashboard Grid Layout -- */
|
||
.cpwn-pm-dashboard-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px; /* The space BETWEEN widgets */
|
||
|
||
/* -- side gaps -- */
|
||
padding: 0 4px; /* 16px padding on the left and right */
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* -- Base Widget Container Style -- */
|
||
/* This style applies to ALL widgets, both built-in and custom */
|
||
.cpwn-pm-widget-container {
|
||
box-sizing: border-box;
|
||
background-color: var(--background-secondary);
|
||
border: 1px solid var(--background-modifier-border);
|
||
border-radius: 8px;
|
||
padding: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.cpwn-pm-widget-mini {
|
||
width: calc(25% - 6px); /* 1/4 width, accounting for 16px gap */
|
||
}
|
||
|
||
.cpwn-pm-widget-small-medium { /* Use 'small-medium' as the key */
|
||
width: calc((100% - 16px) / 3); /* (2 * 8px = 16px) */
|
||
}
|
||
|
||
/* For 'small' widgets like Today, Tomorrow, Next 7, and Future/No Due */
|
||
.cpwn-pm-widget-small {
|
||
/* calc() subtracts half the gap to ensure two widgets fit perfectly on one row */
|
||
width: calc(50% - 4px);
|
||
}
|
||
|
||
/* For 'medium' full-width widgets like heatmaps */
|
||
.cpwn-pm-widget-medium {
|
||
width: 100%;
|
||
}
|
||
|
||
/* For 'large' full-width, extra-tall widgets like Task Status Overview */
|
||
.cpwn-pm-widget-large {
|
||
width: 100%;
|
||
/* min-height: 250px; */ /* Ensures a taller appearance */
|
||
|
||
}
|
||
|
||
.cpwn-pm-widget-container .cpwn-heatmap-container {
|
||
overflow-x: auto;
|
||
}
|
||
|
||
/* -- Responsive styles for mobile -- */
|
||
@media (max-width: 768px) {
|
||
/* On small screens, make all widgets stack vertically at full width */
|
||
/* .cpwn-pm-widget-small,
|
||
.cpwn-pm-widget-medium,
|
||
.cpwn-pm-widget-large {
|
||
width: 100%;
|
||
}*/
|
||
}
|
||
|
||
/* -- Grid Item Sizing -- */
|
||
/* This is the key rule: It makes any widget that is NOT a half-width summary widget span the full two columns. */
|
||
.cpwn-pm-dashboard-grid > .cpwn-pm-widget-container:not(.is.cpwn-summary-widget) {
|
||
grid-column: span 2;
|
||
}
|
||
|
||
/* -- Widget Header -- */
|
||
.cpwn-pm-widget-container h3 {
|
||
margin: 0 0 8px 0;
|
||
font-size: 0.8em;
|
||
font-weight: bold;
|
||
color: var(--text-muted);
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
/* Overdue Task Styling */
|
||
.cpwn-pm-progress-segment.overdue {
|
||
background-color: var(--cpwn-task-color-overdue);
|
||
}
|
||
|
||
.cpwn-legend-color-box.overdue {
|
||
background-color: var(--cpwn-task-color-overdue);
|
||
}
|
||
|
||
.cpwn-pm-legend-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: var(--font-ui-small);
|
||
margin: 0 8px;
|
||
}
|
||
|
||
.cpwn-pm-legend-color {
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 3px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.cpwn-pm-widget--pie .cpwn-pm-legend-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.cpwn-pm-widget--pie .cpwn-pm-legend-color {
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 4px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Heatmap Widget Styles */
|
||
.cpwn-pm-dashboard-grid .cpwn-heatmap-container {
|
||
display: flex;
|
||
gap: 0px;
|
||
overflow-x: auto;
|
||
padding: 4px 2px;
|
||
}
|
||
.cpwn-pm-dashboard-grid .cpwn-heatmap-container {
|
||
gap: 0;
|
||
padding-left: 0;
|
||
}
|
||
|
||
.cpwn-pm-dashboard-grid .cpwn-heatmap-day-labels {
|
||
padding-right: 4px; /* gives breathing room but keeps background under it */
|
||
}
|
||
|
||
.cpwn-pm-dashboard-grid .cpwn-heatmap-day-labels {
|
||
position: sticky;
|
||
left: 0;
|
||
z-index: 1;
|
||
background-color: var(--background-secondary);
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
padding: 24px 8px 4px 0;
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.cpwn-pm-dashboard-grid .cpwn-heatmap-day-labels span {
|
||
line-height: 1;
|
||
}
|
||
|
||
.cpwn-pm-dashboard-grid .cpwn-heatmap-grid {
|
||
display: grid;
|
||
grid-auto-flow: column;
|
||
grid-template-rows: auto repeat(7, 1fr);
|
||
grid-auto-columns: minmax(14px, 1fr);
|
||
gap: 4px;
|
||
overflow: visible;
|
||
}
|
||
|
||
.cpwn-pm-dashboard-grid .cpwn-heatmap-month-label {
|
||
white-space: nowrap;
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
align-self: end;
|
||
min-width: 60px;
|
||
text-align: center;
|
||
transition: all 0.1s ease-in-out;
|
||
}
|
||
|
||
.cpwn-pm-dashboard-grid .cpwn-heatmap-cell {
|
||
aspect-ratio: 1 / 1;
|
||
border-radius: 3px;
|
||
background-color: var(--background-modifier-border);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.cpwn-pm-dashboard-grid .cpwn-heatmap-current-month-label .cpwn-heatmap-month-prefix,
|
||
.cpwn-pm-dashboard-grid .cpwn-heatmap-current-month-label .cpwn-heatmap-date-suffix {
|
||
color: var(--text-accent);
|
||
font-weight: 700; /* Bolder font weight to make it stand out */
|
||
}
|
||
|
||
.cpwn-pm-dashboard-grid .cpwn-heatmap-cell.level-1 { background-color: #4A271E; }
|
||
.cpwn-pm-dashboard-grid .cpwn-heatmap-cell.level-2 { background-color: #D35400; }
|
||
.cpwn-pm-dashboard-grid .cpwn-heatmap-cell.level-3 { background-color: #F39C12; }
|
||
.cpwn-pm-dashboard-grid .cpwn-heatmap-cell.level-4 { background-color: #FFB74D; }
|
||
|
||
.cpwn-heatmap-month-label-container {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: flex-end;
|
||
white-space: nowrap;
|
||
|
||
font-size: 0.8em;
|
||
color: var(--text-muted);
|
||
|
||
/* -- FIX: Use a fixed width to prevent any layout shift -- */
|
||
width: 80px; /* Adjust if needed, but this is a safe value */
|
||
position: static;
|
||
left: auto;
|
||
transform: none; /* translateX(-50%);*/
|
||
}
|
||
|
||
.cpwn-heatmap-month-prefix {
|
||
display: inline-block;
|
||
}
|
||
|
||
.cpwn-heatmap-date-suffix {
|
||
display: inline-block;
|
||
padding-left: 0.25em;
|
||
color: var(--text-muted);
|
||
min-width: 2.8em; /* Reserve enough space for "23rd" etc. */
|
||
}
|
||
|
||
/* -- NEW: Bounding box highlight for the hovered cell -- */
|
||
.cpwn-heatmap-cell.is-hovered {
|
||
box-shadow: 0 0 0 2px var(--interactive-accent);
|
||
border-radius: 4px; /* Matches your existing cell style */
|
||
position: relative; /* Ensures the shadow is drawn correctly */
|
||
z-index: 1; /* Lifts the cell slightly to ensure the shadow is visible */
|
||
}
|
||
|
||
/* Default state for the total count - no pointer */
|
||
.cpwn-heatmap-total-count {
|
||
cursor: default;
|
||
text-decoration: none;
|
||
font-size: 0.9em;
|
||
font-weight: normal;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* This rule ONLY applies when a link exists, adding the hand pointer and underline */
|
||
.cpwn-heatmap-total-count.is-clickable {
|
||
cursor: pointer;
|
||
text-decoration: underline;
|
||
text-underline-offset: 3px;
|
||
}
|
||
|
||
/* Optional: Add a hover effect only when it's clickable */
|
||
.cpwn-heatmap-total-count.is-clickable:hover {
|
||
color: var(--text-accent);
|
||
}
|
||
|
||
/* Change cursor to a hand pointer for interactive heatmap cells */
|
||
.cpwn-heatmap-cell.is-interactive:hover {
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Task Bar Chart Widgets */
|
||
.cpwn-pm-bar-chart-widget {
|
||
display: grid;
|
||
grid-template-columns: 1fr auto;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.cpwn-pm-bar-label {
|
||
grid-column: 1;
|
||
font-size: 0.9em;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.cpwn-pm-bar-display-value {
|
||
grid-column: 2;
|
||
justify-self: end;
|
||
font-size: 0.9em;
|
||
font-weight: 500;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.cpwn-pm-bar-track {
|
||
grid-column: 1 / 3;
|
||
grid-row: 2;
|
||
height: 8px;
|
||
background-color: var(--background-modifier-border);
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.cpwn-pm-bar-fill {
|
||
height: 100%;
|
||
border-radius: 4px;
|
||
transition: width 0.5s ease-in-out;
|
||
}
|
||
|
||
/* Dashboard Heatmap Highlights */
|
||
.cpwn-heatmap-cell.cpwn-heatmap-today-cell {
|
||
border: 1px solid var(--interactive-accent);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.cpwn-content-heatmap-cell-box {
|
||
border-radius: 8px;
|
||
/* box-sizing: border-box; */
|
||
}
|
||
|
||
.cpwn-heatmap-cell.cpwn-heatmap-current-week-cell {
|
||
background-color: rgba(128, 128, 128, 0.1);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
body.theme-dark .cpwn-heatmap-cell.cpwn-heatmap-current-week-cell {
|
||
background-color: rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
.cpwn-heatmap-day-labels .cpwn-heatmap-today-label,
|
||
.cpwn-heatmap-month-label.cpwn-heatmap-current-month-label {
|
||
color: var(--text-accent);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.cpwn-pm-draggable-widget-list {
|
||
contain: layout style paint;
|
||
will-change: transform;
|
||
}
|
||
|
||
.cpwn-pm-draggable-widget-item.dragging {
|
||
opacity: 0.5;
|
||
transform: rotate(2deg);
|
||
transition: none;
|
||
}
|
||
|
||
|
||
.cpwn-preview-task-title-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
flex: 1;
|
||
min-height: 30px;
|
||
}
|
||
|
||
.cpwn-preview-task-icon {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.cpwn-preview-task-title {
|
||
flex: 1;
|
||
}
|
||
|
||
.cpwn-preview-collapse-icon {
|
||
flex-shrink: 0;
|
||
margin-left: auto;
|
||
}
|
||
|
||
|
||
/* Progress Bar Widgets */
|
||
.cpwn-pm-progress-bar {
|
||
display: flex;
|
||
width: 100%;
|
||
height: 24px;
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
background-color: var(--background-modifier-border);
|
||
}
|
||
|
||
.cpwn-pm-progress-segment {
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--text-normal);
|
||
font-weight: 600;
|
||
font-size: 0.9em;
|
||
transition: width 0.3s ease-in-out;
|
||
}
|
||
|
||
.cpwn-pm-progress-segment.incomplete {
|
||
background-color: var(--cpwn-task-color-open);
|
||
}
|
||
|
||
.cpwn-pm-progress-segment.completed {
|
||
background-color: var(--cpwn-task-color-completed);
|
||
}
|
||
|
||
.cpwn-pm-progress-legend {
|
||
display: flex;
|
||
gap: 16px;
|
||
margin-top: 8px;
|
||
font-size: 0.8em;
|
||
}
|
||
|
||
.cpwn-legend-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.cpwn-legend-color-box {
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.cpwn-legend-color-box.incomplete {
|
||
background-color: var(--cpwn-task-color-open);
|
||
}
|
||
|
||
.cpwn-legend-color-box.completed {
|
||
background-color: var(--cpwn-task-color-completed);
|
||
}
|
||
|
||
/* Draggable List for Settings */
|
||
.cpwn-pm-draggable-widget-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
}
|
||
|
||
.cpwn-pm-draggable-widget-item {
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: var(--background-secondary);
|
||
border: 1px solid var(--background-modifier-border);
|
||
border-radius: var(--radius-m);
|
||
user-select: none;
|
||
}
|
||
|
||
.cpwn-pm-drag-handle {
|
||
padding: 10px;
|
||
cursor: grab;
|
||
color: var(--cpwn-text-faint);
|
||
}
|
||
|
||
.cpwn-pm-setting-wrapper {
|
||
flex-grow: 1;
|
||
}
|
||
|
||
.cpwn-pm-setting-wrapper .setting-item {
|
||
padding: 8px 8px;
|
||
border: none;
|
||
}
|
||
|
||
.cpwn-pm-setting-wrapper .setting-item-info {
|
||
width: 100%;
|
||
}
|
||
|
||
.cpwn-pm-draggable-widget-item.dragging {
|
||
opacity: 0.5;
|
||
background: var(--cpwn-background-modifier-accent);
|
||
}
|
||
|
||
.cpwn-pm-drag-placeholder {
|
||
background-color: var(--background-modifier-hover);
|
||
border: 2px dashed var(--background-modifier-border);
|
||
border-radius: var(--radius-m);
|
||
margin: 5px 0;
|
||
}
|
||
|
||
.cpwn-pm-progress-segment.is-interactive:hover {
|
||
cursor: pointer;
|
||
filter: brightness(1.2); /* Optional: makes the bar slightly brighter on hover */
|
||
}
|
||
|
||
.cpwn-pm-heatmap-config-box {
|
||
border: 1px solid var(--background-modifier-border);
|
||
border-radius: var(--radius-l); /* Uses Obsidian's large radius for a nice card look */
|
||
padding: 16px;
|
||
margin-bottom: 20px;
|
||
background-color: var(--background-secondary); /* A slightly different background to stand out */
|
||
}
|
||
|
||
/* Add a title style for inside the box */
|
||
.cpwn-pm-heatmap-config-box h2 {
|
||
margin-top: 10px;
|
||
margin-bottom: 10px;
|
||
padding-bottom: 10px;
|
||
border-bottom: none;
|
||
}
|
||
|
||
.cpwn-pm-folder-exclusion-container {
|
||
margin-top: 16px;
|
||
padding-top: 16px;
|
||
border-top: 1px solid var(--background-modifier-border);
|
||
}
|
||
|
||
.cpwn-pm-widget-header {
|
||
cursor: default;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px; /* Creates space between the icon and title */
|
||
}
|
||
|
||
.cpwn-pm-widget-header .cpwn-heatmap-collapse-icon,
|
||
.cpwn-pm-widget-header h3,
|
||
.cpwn-pm-widget-header .cpwn-heatmap-total-count.is-clickable {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.cpwn-pm-widget-header .cpwn-heatmap-collapse-icon:hover,
|
||
.cpwn-pm-widget-header .cpwn-widget-toggle-icon:hover,
|
||
.cpwn-pm-widget-header h3:hover,
|
||
.cpwn-pm-widget-header .cpwn-heatmap-total-count.is-clickable:hover {
|
||
color: var(--text-accent);
|
||
}
|
||
|
||
.cpwn-heatmap-collapse-icon {
|
||
cursor: pointer;
|
||
color: var(--text-muted);
|
||
transition: transform 0.2s ease-in-out;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: -8px;
|
||
margin-right: 3px;
|
||
margin-left: -3px;
|
||
}
|
||
|
||
.cpwn-pm-widget-container.cpwn-is-collapsed .cpwn-heatmap-collapse-icon {
|
||
transform: rotate(-90deg);
|
||
}
|
||
|
||
.cpwn-pm-widget-container.cpwn-is-collapsed .cpwn-heatmap-container {
|
||
display: none;
|
||
}
|
||
|
||
.cpwn-pm-widget-header h3 {
|
||
cursor: pointer;
|
||
/* THE FIX: Pushes the title to the left, leaving space on the right */
|
||
margin-right: auto;
|
||
}
|
||
|
||
/* -- New styles for 2-state summary widgets -- */
|
||
.cpwn-pm-widget-container.is.cpwn-summary-widget .cpwn-pm-widget-header {
|
||
display: flex;
|
||
/* This is the key: it forces all items to align to their vertical centers. */
|
||
align-items: center;
|
||
gap: 6px;
|
||
cursor: pointer;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.cpwn-summary-toggle-icon {
|
||
color: var(--text-muted);
|
||
transition: transform 0.2s ease-in-out;
|
||
/* We also make the icon a flex container to center the SVG within it */
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
/* A fixed size helps maintain consistent spacing */
|
||
width: 18px;
|
||
height: 18px;
|
||
margin-top: -8px;
|
||
margin-right: 3px;
|
||
margin-left: -3px;
|
||
}
|
||
|
||
.cpwn-is-mini .cpwn-pm-progress-legend {
|
||
display: none;
|
||
}
|
||
|
||
.cpwn-is-mini .cpwn-summary-toggle-icon {
|
||
transform: rotate(-90deg); /* Points Left */
|
||
}
|
||
|
||
.cpwn-is-minimised .bar-and.cpwn-legend-wrapper {
|
||
display: none;
|
||
}
|
||
|
||
.cpwn-is-minimised .cpwn-summary-toggle-icon {
|
||
transform: rotate(180deg); /* Points Up */
|
||
}
|
||
|
||
/* -- Styles for Collapsible Widgets -- */
|
||
.cpwn-pm-widget-header {
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0px;
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.cpwn-widget-toggle-icon {
|
||
color: var(--text-muted);
|
||
transition: transform 0.2s ease-in-out;
|
||
}
|
||
|
||
.cpwn-is-collapsed .cpwn-widget-content-wrapper {
|
||
display: none;
|
||
}
|
||
|
||
.cpwn-pm-widget-container.collapsed .cpwn-widget-toggle-icon {
|
||
transform: rotate(-90deg); /* Points left */
|
||
}
|
||
|
||
.cpwn-pm-composite-bar-wrapper {
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.cpwn-pm-composite-bar-label {
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
margin-bottom: 4px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.cpwn-pm-widget-container.is.cpwn-summary-widget {
|
||
gap: 0px;
|
||
min-height: 80px;
|
||
justify-content: center;
|
||
}
|
||
|
||
.cpwn-pm-widget-container.is.cpwn-summary-widget .cpwn-task-group-empty-message {
|
||
/* Centers the 'No tasks' message perfectly in the middle of the widget */
|
||
text-align: center;
|
||
flex-grow: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.cpwn-pm-dashboard-grid {
|
||
align-items: stretch;
|
||
}
|
||
|
||
.cpwn-pm-widget-container.is.cpwn-summary-widget.cpwn-is-minimised {
|
||
padding-bottom: 4px;
|
||
gap: 0;
|
||
}
|
||
|
||
.cpwn-pm-widget-container.is.cpwn-summary-widget.cpwn-is-minimised .cpwn-pm-widget-header {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.cpwn-pm-widget-container.cpwn-is-collapsed {
|
||
padding-bottom: 4px;
|
||
}
|
||
|
||
.cpwn-pm-widget-container.cpwn-is-collapsed .cpwn-pm-widget-header {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.cpwn-pm-progress-segment.in-progress {
|
||
background-color: var(--task-color-inprogress);
|
||
}
|
||
.cpwn-legend-color-box.in-progress {
|
||
background-color: var(--task-color-inprogress);
|
||
}
|
||
|
||
.cpwn-pm-progress-segment.no-due {
|
||
background-color: var(--background-modifier-border);
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.cpwn-legend-color-box.no-due {
|
||
background-color: var(--background-modifier-border);
|
||
}
|
||
|
||
/* -- Task Group Collapse Styles -- */
|
||
.cpwn-task-row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
padding: 12px 10px 8px 5px; /* Increase from 4px to 10px for top/bottom padding */
|
||
}
|
||
|
||
.cpwn-task-group-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
font-size: var(--cpwn-task-heading-font-size);
|
||
}
|
||
|
||
.cpwn-task-group-header-content {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.cpwn-task-group-collapse-icon .svg-icon {
|
||
transition: transform 0.3s ease-in-out;
|
||
}
|
||
|
||
.cpwn-task-group-container.cpwn-is-collapsed .cpwn-task-group-collapse-icon .svg-icon {
|
||
transform: rotate(-180deg);
|
||
}
|
||
|
||
.cpwn-task-list-wrapper {
|
||
transition: height 0.35s ease-in-out, opacity 0.35s ease-in-out;
|
||
overflow: hidden;
|
||
opacity: 1;
|
||
height: var(--cpwn-task-list-height, auto);
|
||
}
|
||
|
||
.cpwn-task-group-container.cpwn-is-collapsed .cpwn-task-list-wrapper {
|
||
height: 0;
|
||
opacity: 0;
|
||
}
|
||
|
||
.cpwn-task-group-empty-message {
|
||
font-style: italic;
|
||
color: var(--text-muted);
|
||
padding: 4px 0;
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
.cpwn-task-row .cpwn-task-text {
|
||
flex-grow: 1;
|
||
font-size: var(--cpwn-task-text-font-size);
|
||
}
|
||
|
||
.cpwn-task-row.cpwn-task-truncate .cpwn-task-text-markdown {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: block;
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* Also ensure the rendered paragraph inside MarkdownRenderer inherits this behavior */
|
||
.cpwn-task-row.cpwn-task-truncate .cpwn-task-text p {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
margin: 0;
|
||
}
|
||
|
||
/* When full text mode is enabled, ensure wrapping */
|
||
.cpwn-tasks-container.show-full-text .cpwn-task-row .cpwn-task-text {
|
||
white-space: normal;
|
||
word-break: break-word;
|
||
}
|
||
|
||
/* Add this rule to handle the paragraph inside */
|
||
.cpwn-other-notes-popup-item .cpwn-task-text > p {
|
||
width: 100%;
|
||
margin: 0;
|
||
}
|
||
|
||
.cpwn-other-notes-popup-item .cpwn-task-checkbox-symbol {
|
||
margin-top: 2px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.cpwn-task-text.completed {
|
||
opacity: 0.6;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.cpwn-tasks-container.show-full-text .cpwn-task-row {
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.cpwn-tasks-container.show-full-text .cpwn-task-text {
|
||
white-space: normal;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.cpwn-tasks-container.show-full-text .cpwn-task-row .cpwn-task-checkbox {
|
||
margin-top: 2px;
|
||
}
|
||
|
||
/* Container for task checkbox */
|
||
.cpwn-task-checkbox-symbol {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 1.4em;
|
||
height: 1.4em;
|
||
position: relative;
|
||
flex-shrink: 0;
|
||
margin: 2px 0 0 0;
|
||
padding: 0;
|
||
}
|
||
|
||
/* Hide everything except the checkbox */
|
||
.cpwn-task-checkbox-symbol .cpwn-task-list-item {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.cpwn-task-checkbox-symbol li.cpwn-task-list-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
|
||
/* Hide the text content after the checkbox */
|
||
.cpwn-task-checkbox-symbol .cpwn-task-list-item-checkbox ~ * {
|
||
display: none;
|
||
}
|
||
|
||
.cpwn-task-checkbox-symbol .cpwn-task-list-item-checkbox {
|
||
margin: 0;
|
||
|
||
}
|
||
.cpwn-asset-grid-preview img {
|
||
object-fit: contain;
|
||
}
|
||
|
||
.cpwn-note-group-container {
|
||
overflow: visible;
|
||
max-height: none;
|
||
}
|
||
|
||
.cpwn-asset-grid-preview img {
|
||
object-fit: contain;
|
||
}
|
||
.cpwn-pinned-notes-empty-message {
|
||
padding: 24px;
|
||
text-align: center;
|
||
font-style: italic;
|
||
color: var(--text-muted);
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
.cpwn-pinned-notes-empty-message code {
|
||
font-style: normal;
|
||
font-size: 1.1em;
|
||
}
|
||
body.is-mobile .cpwn-tabs-content-wrapper {
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.cpwn-pm-stat-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 1.5rem 1rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.cpwn-pm-stat-card-value {
|
||
font-size: 2.5rem;
|
||
font-weight: 600;
|
||
line-height: 1;
|
||
color: var(--cpwn-text-normal);
|
||
}
|
||
|
||
.cpwn-pm-stat-card-label {
|
||
font-size: 0.9rem;
|
||
color: var(--text-muted);
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
/* -- KPI Stat Card -- */
|
||
.cpwn-pm-kpi-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100%;
|
||
}
|
||
|
||
.cpwn-pm-kpi-value {
|
||
font-size: 3.5rem;
|
||
font-weight: 700;
|
||
line-height: 1;
|
||
color: var(--cpwn-text-normal);
|
||
}
|
||
|
||
.cpwn-pm-widget-title {
|
||
margin: 0 0 16px 0;
|
||
font-size: 0.9em;
|
||
font-weight: 600;
|
||
letter-spacing: 0.05em;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* -- Axis Labels -- */
|
||
.cpwn-pm-axis-label {
|
||
position: absolute;
|
||
color: var(--cpwn-text-faint);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.cpwn-pm-axis-label.x-axis {
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.cpwn-pm-axis-label.y-axis {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: -20px;
|
||
transform: translateY(-50%) rotate(-90deg);
|
||
color: var(--cpwn-text-faint);
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* For Line Charts ONLY */
|
||
.cpwn-pm-css-chart-container.cpwn-chart-type-line {
|
||
position: relative;
|
||
}
|
||
|
||
.cpwn-chart-type-line .cpwn-pm-axis-label.y-axis {
|
||
left: -35px; /* Position outside the reserved margin */
|
||
top: 50%;
|
||
transform: translateY(-50%) rotate(-90deg);
|
||
}
|
||
|
||
.cpwn-chart-type-line .cpwn-pm-axis-label.x-axis {
|
||
bottom: -28px; /* Position outside the reserved margin */
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
/* For Cumulative Charts ONLY */
|
||
.cpwn-pm-css-chart-container.cpwn-chart-type-cumulative {
|
||
position: relative;
|
||
}
|
||
|
||
.cpwn-chart-type-cumulative .cpwn-pm-axis-label.y-axis {
|
||
left: -35px;
|
||
top: 50%;
|
||
transform: translateY(-50%) rotate(-90deg);
|
||
}
|
||
|
||
.cpwn-chart-type-cumulative .cpwn-pm-axis-label.x-axis {
|
||
bottom: -28px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
/* Ensure chart SVG/divs respect the new padding */
|
||
.cpwn-pm-line-chart, .cpwn-pm-bar-chart {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.cpwn-pm-line-chart .hover-line {
|
||
stroke: var(--cpwn-text-faint);
|
||
stroke-width: 1px;
|
||
stroke-dasharray: 3, 3;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.cpwn-pm-line-chart .hover-point {
|
||
fill: var(--cpwn-background-primary);
|
||
stroke-width: 2;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* -- START: Nicer Tooltip Styling -- */
|
||
.cpwn-pm-line-chart .tooltip-group {
|
||
pointer-events: none;
|
||
}
|
||
|
||
.cpwn-pm-line-chart .tooltip-rect {
|
||
fill: #1C1C1E; /* Dark background like in the image */
|
||
stroke: rgba(255, 255, 255, 0.1); /* Subtle border */
|
||
rx: 6;
|
||
ry: 6;
|
||
opacity: 0.95;
|
||
}
|
||
|
||
.cpwn-pm-line-chart .tooltip-text {
|
||
font-family: var(--cpwn-font-interface);
|
||
font-size: var(--cpwn-font-ui-small);
|
||
fill: #FFFFFF; /* White text */
|
||
}
|
||
|
||
.cpwn-pm-line-chart .tooltip-value-label {
|
||
fill: #EAEAEA; /* Light grey for the label part */
|
||
font-weight: 500;
|
||
}
|
||
|
||
.cpwn-pm-line-chart .tooltip-value {
|
||
fill: #FFFFFF; /* White for the value part */
|
||
font-weight: 700; /* Bolder value */
|
||
}
|
||
|
||
/* Line Chart (SVG) Styles */
|
||
.cpwn-pm-line-chart {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.cpwn-pm-line-chart .grid-line {
|
||
stroke: var(--background-modifier-border);
|
||
stroke-width: 1;
|
||
stroke-dasharray: 2, 2;
|
||
}
|
||
|
||
.cpwn-pm-line-chart .cpwn-axis-label {
|
||
font-size: 14px;
|
||
fill: var(--text-muted);
|
||
}
|
||
|
||
.cpwn-pm-line-chart .cpwn-small-axis-label {
|
||
font-size: 14px;
|
||
fill: var(--text-muted);
|
||
}
|
||
|
||
.cpwn-pm-line-chart .line-path {
|
||
fill: none;
|
||
stroke-width: 3.5; /* Slightly thicker line */
|
||
stroke-linecap: round;
|
||
stroke-linejoin: round;
|
||
}
|
||
|
||
.cpwn-pm-line-chart .line-path-projection-line {
|
||
fill: none;
|
||
stroke-width: 1.75px;
|
||
stroke-dasharray: 5,5;
|
||
transition: stroke-width 0.2s ease-in-out;
|
||
|
||
}
|
||
|
||
.cpwn-pm-line-chart .data-point {
|
||
stroke-width: 2;
|
||
}
|
||
|
||
/* -- Widget Builder Modal -- */
|
||
.cpwn-pm-widget-builder-modal .cpwn-modal-content {
|
||
padding-bottom: 50px; /* Space for fixed footer buttons */
|
||
}
|
||
|
||
.cpwn-pm-widget-empty-full {
|
||
min-height: 85px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.cpwn-pm-flex-setting .cpwn-setting-item-control {
|
||
display: flex;
|
||
gap: 8px;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.cpwn-pm-flex-setting .cpwn-setting-item-control .cpwn-setting-item-control {
|
||
flex-grow: 1;
|
||
}
|
||
|
||
.cpwn-pm-flex-setting .cpwn-setting-item-control input[type="text"] {
|
||
width: 60px;
|
||
text-align: center;
|
||
}
|
||
.cpwn-pm-date-range-extras {
|
||
padding-left: 20px;
|
||
border-left: 2px solid var(--background-modifier-border);
|
||
margin-left: 10px;
|
||
}
|
||
|
||
/* -- Dashboard Widget Styles -- */
|
||
.cpwn-widget-header {
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.cpwn-widget-title {
|
||
margin-right: auto;
|
||
/* This is the key fix: It removes extra vertical space around the text,
|
||
allowing for precise alignment with the icon. */
|
||
line-height: 1;
|
||
font-size: 0.8em;
|
||
font-weight: 600;
|
||
letter-spacing: 0.05em;
|
||
color: var(--text-muted);
|
||
padding-bottom: 16px;
|
||
}
|
||
|
||
/* 1. Reset the bottom padding on the title when collapsed so it doesn't push "up" */
|
||
.cpwn-pm-widget-container.collapsed .cpwn-widget-title,
|
||
.cpwn-pm-widget-container.cpwn-is-mini .cpwn-widget-title {
|
||
padding-bottom: 0;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* 2. Ensure the header itself has equal top/bottom padding */
|
||
.cpwn-pm-widget-container.collapsed .cpwn-pm-widget-header,
|
||
.cpwn-pm-widget-container.cpwn-is-mini .cpwn-pm-widget-header {
|
||
padding-top: 0px; /* Adjust this value to increase/decrease total height */
|
||
padding-bottom: 0px; /* Must match padding-top for perfect centering */
|
||
margin-bottom: 0; /* Remove external spacing */
|
||
min-height: unset; /* Allow it to shrink to fit content */
|
||
height: auto;
|
||
}
|
||
|
||
/* 3. Remove any fixed height on the container itself in these states */
|
||
.cpwn-pm-widget-container.collapsed,
|
||
.cpwn-pm-widget-container.cpwn-is-mini {
|
||
min-height: unset;
|
||
height: auto;
|
||
padding-bottom: 0px;
|
||
}
|
||
|
||
.cpwn-pm-widget-container.cpwn-is-mini {
|
||
min-height: unset;
|
||
height: auto;
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
/* -- Toggle/Collapse Icon -- */
|
||
.cpwn-widget-toggle-icon {
|
||
color: var(--text-muted);
|
||
transition: transform 0.2s ease-in-out;
|
||
/* We also make the icon a flex container to center the SVG within it */
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
/* A fixed size helps maintain consistent spacing */
|
||
width: 18px;
|
||
height: 18px;
|
||
margin-top: -8px;
|
||
margin-right: 3px;
|
||
margin-left: -3px;
|
||
|
||
}
|
||
|
||
.cpwn-modal-button-container {
|
||
display: flex;
|
||
justify-content: space-between; /* Pushes left and right apart */
|
||
align-items: center;
|
||
margin-top: 20px;
|
||
padding-top: 20px;
|
||
border-top: 1px solid var(--background-modifier-border);
|
||
}
|
||
|
||
.cpwn-modal-button-group-right {
|
||
display: flex;
|
||
gap: 10px; /* Space between Cancel and Save */
|
||
}
|
||
|
||
|
||
.cpwn-widget-toggle-icon .svg-icon {
|
||
width: 18px;
|
||
height: 18px;
|
||
transition: transform 0.2s ease-in-out;
|
||
}
|
||
|
||
.cpwn-widget-container.collapsed .cpwn-widget-toggle-icon {
|
||
transform: rotate(-90deg);
|
||
}
|
||
|
||
.cpwn-widget-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex-grow: 1;
|
||
min-height: 0;
|
||
|
||
transition: max-height 0.3s ease-out, opacity 0.2s ease-in-out, padding 0.3s ease-out;
|
||
}
|
||
|
||
.cpwn-pm-widget-header {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.cpwn-summary-toggle-icon:hover {
|
||
color: var(--interactive-accent);
|
||
}
|
||
|
||
.cpwn-pm-section-collapse-icon:hover {
|
||
color: var(--interactive-accent);
|
||
}
|
||
.cpwn-pm-section-name:hover {
|
||
color: var(--interactive-accent);
|
||
}
|
||
|
||
/* This is the new footer container that holds the axis label and legend. */
|
||
.cpwn-pm-chart-footer {
|
||
display: flex;
|
||
flex-direction: column; /* Stacks children vertically */
|
||
align-items: center; /* Centers them horizontally */
|
||
gap: 0px; /* Space between axis label and legend */
|
||
margin-top: 0px;
|
||
padding-top: 0px; /* Space between chart and footer content */
|
||
flex-shrink: 0; /* Prevents footer from shrinking */
|
||
}
|
||
|
||
/* A new, non-conflicting class for the axis label in the footer. */
|
||
.cpwn-pm-axis-label-footer {
|
||
color: var(--cpwn-text-faint);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.cpwn-axis-label.cpwn-year-label {
|
||
font-size: 0.8em;
|
||
fill: var(--text-muted);
|
||
}
|
||
|
||
/* Ensure the legend wraps nicely and is centered. */
|
||
.cpwn-pm-chart-legend {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 8px 16px; /* 8px vertical gap, 16px horizontal gap */
|
||
width: 100%;
|
||
}
|
||
|
||
.cpwn-pm-widget-container.collapsed .cpwn-widget-content {
|
||
max-height: 0;
|
||
opacity: 0;
|
||
margin-top: 0;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.cpwn-widget-content canvas {
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
/* -- Custom Chart Legend -- */
|
||
.cpwn-pm.cpwn-legend-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: var(--cpwn-font-ui-small);
|
||
margin: 0 8px;
|
||
}
|
||
|
||
.cpwn-pm.cpwn-legend-color {
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 3px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* -- Padding Removal -- */
|
||
.cpwn-widget-content {
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
}
|
||
|
||
.cpwn-pm-axis-label.x-axis {
|
||
color: var(--cpwn-text-faint);
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* -- Custom Color Picker Setting -- */
|
||
.cpwn-pm-color-setting-container {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
width: 100%;
|
||
}
|
||
|
||
.cpwn-pm-color-swatch {
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 50%;
|
||
border: 0px;
|
||
cursor: pointer;
|
||
flex-shrink: 0;
|
||
background-color: transparent;
|
||
-webkit-appearance: none; /* Remove default system styling */
|
||
-moz-appearance: none;
|
||
appearance: none;
|
||
}
|
||
|
||
.cpwn-pm-opacity-slider {
|
||
flex-grow: 1;
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
height: 4px;
|
||
background: var(--background-modifier-border);
|
||
outline: none;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.cpwn-pm-opacity-slider::-webkit-slider-thumb {
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
width: 16px;
|
||
height: 16px;
|
||
background: var(--cpwn-text-on-accent);
|
||
cursor: pointer;
|
||
border-radius: 50%;
|
||
border: 2px solid var(--background-secondary);
|
||
}
|
||
|
||
.cpwn-pm-opacity-slider::-moz-range-thumb {
|
||
width: 16px;
|
||
height: 16px;
|
||
background: var(--cpwn-text-on-accent);
|
||
cursor: pointer;
|
||
border-radius: 50%;
|
||
border: 2px solid var(--background-secondary);
|
||
}
|
||
|
||
.cpwn-pm-color-actions .cpwn-setting-item-control {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.cpwn-pm-color-setting-container {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
flex-grow: 1;
|
||
}
|
||
|
||
.cpwn-pm-opacity-slider {
|
||
width: 100%;
|
||
}
|
||
|
||
/* This targets the internal color picker UI provided by the browser */
|
||
.cpwn-pm-color-swatch::-webkit-color-swatch {
|
||
border-radius: 50%;
|
||
border: none;
|
||
}
|
||
.cpwn-pm-color-swatch::-moz-color-swatch {
|
||
border-radius: 50%;
|
||
border: none;
|
||
}
|
||
|
||
.cpwn-pm-inline-color-picker input[type="color"] {
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 50%;
|
||
border: 2px solid var(--background-modifier-border);
|
||
cursor: pointer;
|
||
-webkit-appearance: none;
|
||
-moz-appearance: none;
|
||
appearance: none;
|
||
background-color: transparent;
|
||
padding: 0;
|
||
margin-left: 8px; /* Add some space from the previous control */
|
||
}
|
||
|
||
.cpwn-pm-inline-color-picker input[type="color"]::-webkit-color-swatch {
|
||
border-radius: 50%;
|
||
border: none;
|
||
}
|
||
|
||
.cpwn-pm-inline-color-picker input[type="color"]::-moz-color-swatch {
|
||
border-radius: 50%;
|
||
border: none;
|
||
}
|
||
|
||
.cpwn-widget-title:hover {
|
||
color: var(--text-accent);
|
||
}
|
||
|
||
/* ==========================================================================
|
||
Project Metrics: Universal Tooltip for All Charts
|
||
========================================================================== */
|
||
|
||
/* This is the main container for the tooltip, created in the document body. */
|
||
.cpwn-pm-chart-tooltip {
|
||
position: fixed; /* Positions relative to the viewport, not a parent container */
|
||
z-index: 99999; /* Ensures it's on top of all other elements */
|
||
|
||
/* Appearance */
|
||
background-color: var(--background-secondary);
|
||
border: 1px solid var(--background-modifier-border-hover);
|
||
border-radius: 8px;
|
||
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
|
||
|
||
/* Hide it by default */
|
||
opacity: 0;
|
||
pointer-events: none; /* Prevents the tooltip from interfering with mouse events */
|
||
|
||
/* Smooth transition for appearing/disappearing */
|
||
transition: opacity 0.2s, transform 0.2s;
|
||
|
||
/* Prevents content from breaking onto new lines */
|
||
white-space: nowrap;
|
||
|
||
/* Remove padding to allow for internal structured content */
|
||
padding: 0;
|
||
overflow: hidden; /* Ensures the border-radius is applied to the content */
|
||
}
|
||
|
||
/* Title section of the tooltip */
|
||
.cpwn-pm-chart-tooltip .cpwn-pm-tooltip-title {
|
||
font-weight: bold;
|
||
font-size: var(--cpwn-font-ui-small); /* Larger font size */
|
||
padding: 10px 14px; /* More padding */
|
||
border-bottom: 1px solid var(--background-modifier-border);
|
||
}
|
||
|
||
/* Content section of the tooltip */
|
||
.cpwn-pm-chart-tooltip .cpwn-pm-tooltip-content {
|
||
font-size: var(--cpwn-font-ui-small);
|
||
padding: 10px 14px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
/* An individual item within the tooltip's content */
|
||
.cpwn-pm-chart-tooltip .cpwn-pm-tooltip-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
/* The small color swatch next to the text */
|
||
.cpwn-pm-chart-tooltip .cpwn-pm-tooltip-color {
|
||
width: 14px;
|
||
height: 14px;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
/* ==========================================================================
|
||
Project Metrics: Pie Chart Widget
|
||
========================================================================== */
|
||
.cpwn-pm-widget-pie {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 12px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.cpwn-pm-widget-pie .cpwn-pm-pie-chart-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
/* Pie Chart Size Differentiation */
|
||
.cpwn-pm-widget-medium .cpwn-pm-widget-pie {
|
||
max-height: 150px; /* Default for medium */
|
||
}
|
||
.cpwn-pm-widget-medium .cpwn-pm-widget-pie .cpwn-pm-pie-chart {
|
||
/*min-height: 150px;*/
|
||
max-height: 175px;
|
||
}
|
||
|
||
|
||
.cpwn-pm-widget-large .cpwn-pm-widget-pie {
|
||
max-height: 260px; /* Taller for large */
|
||
}
|
||
|
||
/* Make sure the pie itself scales appropriately */
|
||
.cpwn-pm-widget-large .cpwn-pm-widget-pie .cpwn-pm-pie-chart {
|
||
/* min-height: 220px;*/
|
||
max-height: 260px;
|
||
}
|
||
|
||
/* -- LAYOUTS -- */
|
||
/* Side-by-side for 'right' legend */
|
||
.cpwn-pm-widget-pie.cpwn-legend-right .cpwn-pm-pie-chart-wrapper {
|
||
flex-direction: row;
|
||
}
|
||
|
||
/* Side-by-side for 'right' legend */
|
||
.cpwn-pm-widget-pie.cpwn-legend-left .cpwn-pm-pie-chart-wrapper {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
/* Stacked for 'top' or 'bottom' legend */
|
||
.cpwn-pm-widget-pie.cpwn-legend-top .cpwn-pm-pie-chart-wrapper {
|
||
flex-direction: column-reverse;
|
||
}
|
||
.cpwn-pm-widget-pie.cpwn-legend-bottom .cpwn-pm-pie-chart-wrapper {
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* -- SIZING -- */
|
||
.cpwn-pm-widget-pie .cpwn-pm-pie-chart {
|
||
flex: 1 1 60%;
|
||
aspect-ratio: 1 / 1;
|
||
min-width: 50px;
|
||
min-height: 50px;
|
||
}
|
||
|
||
.cpwn-pm-widget-pie .cpwn-pm-pie-chart svg {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: visible;
|
||
}
|
||
|
||
.cpwn-pm-widget-pie .cpwn-pm-chart-legend {
|
||
flex: 1 1 40%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
/* -- Items inside legend -- */
|
||
.cpwn-pm-widget-pie .cpwn-pm.cpwn-legend-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.cpwn-pm-widget-pie .cpwn-pm.cpwn-legend-color {
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 4px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* ==========================================================================
|
||
Project Metrics: Radar Chart Widget
|
||
========================================================================== */
|
||
.cpwn-pm-radar-chart {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.cpwn-pm-radar-chart .grid-line {
|
||
opacity: 1;
|
||
}
|
||
|
||
.cpwn-pm-radar-chart .cpwn-axis-label {
|
||
font-size: 12px;
|
||
fill: var(--text-muted);
|
||
}
|
||
|
||
.cpwn-pm-radar-chart path {
|
||
transition: opacity 0.2s ease;
|
||
}
|
||
|
||
.cpwn-pm-radar-chart path:hover {
|
||
opacity: 0.4;
|
||
}
|
||
|
||
.cpwn-pm-radar-chart line {
|
||
opacity: 0.2; /* Makes solid lines brighter */
|
||
stroke: var--text-muted;
|
||
stroke-width: 1;
|
||
}
|
||
|
||
/* ==========================================================================
|
||
Project Metrics: Vertical Bar Chart Widget
|
||
========================================================================== */
|
||
/* -- Final Bar Chart Widget CSS -- */
|
||
|
||
/* Base container for the entire chart */
|
||
.cpwn-pm-css-chart-container.cpwn-chart-type-bar-horizontal {
|
||
padding: 10px; /* Optional: Add some padding around the whole widget */
|
||
}
|
||
|
||
/* Main flex container for the list of bars or groups */
|
||
.cpwn-pm-bar-chart-horizontal {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0; /* Gaps are handled by margins for better control */
|
||
}
|
||
|
||
/* Container for each group section */
|
||
.cpwn-pm-bar-chart-group {
|
||
margin-bottom: 16px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px solid var(--background-modifier-border);
|
||
}
|
||
|
||
/* Remove border and extra margin from the very last group */
|
||
.cpwn-pm-bar-chart-group:last-child {
|
||
border-bottom: none;
|
||
margin-bottom: 0;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
/* Group label text (e.g., "Angela") */
|
||
.cpwn-pm-bar-chart-group-label {
|
||
font-size: 1em;
|
||
font-weight: 600;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
/* Main container for a single metric's bar and labels */
|
||
.cpwn-pm-task-status-widget {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-bottom: 4px; /* Space between metrics within a group */
|
||
}
|
||
|
||
.cpwn-pm-bar-chart-group .cpwn-pm-task-status-widget:last-of-type {
|
||
margin-bottom: 0; /* No margin on the last metric in a group */
|
||
}
|
||
|
||
/* Row containing the text label and value */
|
||
.cpwn-pm-task-status-top-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 4px; /* Space between the text and the bar below it */
|
||
}
|
||
|
||
/* Text label for the metric (e.g., "Created", "Completed") */
|
||
.cpwn-pm-task-status-label {
|
||
font-size: 0.9em;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* Numeric value for the metric */
|
||
.cpwn-pm-task-status-value {
|
||
font-size: 0.9em;
|
||
color: var(--cpwn-text-normal);
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* Container for the bar elements */
|
||
.cpwn-pm-task-status-bar-container {
|
||
width: 100%;
|
||
}
|
||
|
||
/* The background track of the bar */
|
||
.cpwn-pm-task-status-bar-track {
|
||
width: 100%;
|
||
height: 6px; /* Sets the thickness of the bar */
|
||
background-color: var(--background-secondary-alt);
|
||
border-radius: 3px;
|
||
overflow: hidden; /* Ensures the fill stays within the rounded corners */
|
||
}
|
||
|
||
/* The colored "fill" part of the bar */
|
||
.cpwn-pm-task-status-bar-fill {
|
||
height: 100%;
|
||
border-radius: 3px;
|
||
transition: width 0.4s ease-in-out; /* Smooth animation for width changes */
|
||
}
|
||
|
||
/* Add to your styles.css file */
|
||
.cpwn-pm-settings-sub-nav {
|
||
display: flex;
|
||
gap: 8px; /* Adds space between tab buttons */
|
||
margin-bottom: 15px;
|
||
}
|
||
.cpwn-pm-settings-sub-nav button.is-active {
|
||
background-color: var(--interactive-accent);
|
||
color: var(--cpwn-text-on-accent);
|
||
}
|
||
|
||
.cpwn-template-picker-modal {
|
||
width: 520px;
|
||
max-width: 90vw;
|
||
max-height: 60vh;
|
||
}
|
||
|
||
.cpwn-template-picker-modal .cpwn-modal-content {
|
||
overflow-x: hidden;
|
||
max-height: 70vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.cpwn-template-grid {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.cpwn-template-card {
|
||
border: 1px solid var(--background-modifier-border);
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
cursor: pointer;
|
||
transition: transform 0.2s;
|
||
}
|
||
|
||
.cpwn-template-card:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.cpwn-template-preview {
|
||
margin-bottom: 12px;
|
||
height: 120px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: var(--background-secondary);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.cpwn-mini-chart {
|
||
max-width: 100%;
|
||
}
|
||
|
||
.cpwn-template-card h3 {
|
||
margin: 0 0 8px 0;
|
||
}
|
||
|
||
.cpwn-template-desc {
|
||
font-size: 0.9em;
|
||
color: var(--text-muted);
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.cpwn-pm-custom-widget-icon {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
margin-right: 8px;
|
||
margin-left: 8px;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.cpwn-pm-custom-widget-icon svg {
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
|
||
.cpwn-pm-kpi-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center; /* Or 'flex-start' if you prefer left-alignment */
|
||
gap: 10px; /* Adjust the space between the icon and the number */
|
||
}
|
||
|
||
.cpwn-pm-kpi-icon .svg-icon { /* Target the icon that Obsidian creates */
|
||
display: flex;
|
||
width: 28px; /* Adjust size as needed */
|
||
height: 28px;
|
||
align-items: center;
|
||
color: var(--text-muted); /* Or let it inherit color */
|
||
}
|
||
|
||
.cpwn-pm-kpi-value {
|
||
font-size: 2.5em; /* Example size */
|
||
font-weight: bold;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* ============================== */
|
||
/* SECTION HEADERS - SETTINGS VIEW */
|
||
/* ============================== */
|
||
|
||
/* Section header item in settings list */
|
||
.cpwn-pm-section-header-item {
|
||
background-color: var(--background-secondary-alt);
|
||
border-left: 3px solid var(--interactive-accent);
|
||
}
|
||
|
||
/* Indented widget items in settings list */
|
||
.cpwn-pm-indented-item {
|
||
margin-left: 30px;
|
||
border-left: 2px solid var(--background-modifier-border);
|
||
padding-left: 10px;
|
||
}
|
||
|
||
/* Icon preview in settings */
|
||
.cpwn-pm-section-icon-preview {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
}
|
||
|
||
/* ============================== */
|
||
/* SECTION HEADERS - DASHBOARD VIEW */
|
||
/* ============================== */
|
||
|
||
/* Section header in the actual dashboard */
|
||
.cpwn-pm-section-header {
|
||
width: 100%;
|
||
grid-column: 1 / -1; /* Spans all columns in the grid */
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0px;
|
||
padding: 2px 2px;
|
||
cursor: pointer;
|
||
border-radius: 6px;
|
||
margin-bottom: 0px;
|
||
background-color: var(--background-secondary);
|
||
transition: background-color 0.2s ease;
|
||
}
|
||
|
||
.cpwn-pm-section-header.is-aligned-right {
|
||
flex-direction: row-reverse;
|
||
}
|
||
.cpwn-pm-section-header-title {
|
||
flex-grow: 1; /* Allows the title to fill the available space */
|
||
}
|
||
|
||
.cpwn-pm-section-header:hover {
|
||
background-color: var(--background-secondary-alt);
|
||
}
|
||
|
||
|
||
.cpwn-pm-section-collapse-icon {
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
align-self: center;
|
||
}
|
||
|
||
.cpwn-pm-section-collapse-icon svg {
|
||
width: 18px;
|
||
height: 18px;
|
||
transition: transform 0.2s ease-in-out;
|
||
}
|
||
|
||
.cpwn-pm-section-icon {
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.cpwn-pm-section-icon svg {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
.cpwn-pm-section-name {
|
||
/* flex-grow: 1; */
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* Container & Layout */
|
||
.cpwn-container-with-statusbar {
|
||
padding-bottom: var(--status-bar-height);
|
||
}
|
||
|
||
/* Progress Segments */
|
||
.cpwn-pm-progress-segment {
|
||
background-color: var(--cpwn-segment-bg-color);
|
||
width: var(--cpwn-segment-width);
|
||
}
|
||
|
||
/* Calendar Grid */
|
||
.cpwn-calendar-label-row {
|
||
grid-row: 1;
|
||
}
|
||
|
||
.cpwn-calendar-day-cell {
|
||
box-sizing: border-box;
|
||
grid-column: var(--col-index);
|
||
grid-row: var(--row-index);
|
||
}
|
||
|
||
/* Heatmap */
|
||
.cpwn-heatmap-cell {
|
||
background-color: var(--cpwn-heatmap-color);
|
||
border: var(--heatmap-border);
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* Note Dots */
|
||
.cpwn-daily-note-dot {
|
||
background-color: var(--daily-note-color);
|
||
}
|
||
|
||
|
||
/* Section Headers */
|
||
.cpwn-section-header {
|
||
display: flex;
|
||
align-items: middle;
|
||
gap: 6px;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.cpwn-section-header-center {
|
||
justify-content: center;
|
||
}
|
||
|
||
.cpwn-section-header-right {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.cpwn-section-icon-left {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
/* Section Name/Title */
|
||
.cpwn-section-name {
|
||
flex-grow: 1;
|
||
text-align: var(--text-align);
|
||
color: var(--text-color);
|
||
font-weight: var(--font-weight);
|
||
font-style: var(--font-style);
|
||
font-size: var(--font-size);
|
||
}
|
||
|
||
/* KPI Icons */
|
||
.cpwn-kpi-icon svg {
|
||
color: inherit; /* SVG inherits from parent */
|
||
}
|
||
/* Task Layout */
|
||
.cpwn-task-row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 10px;
|
||
padding: 12px 10px 8px 5px;
|
||
}
|
||
/*
|
||
.cpwn-task-checkbox-symbol {
|
||
flex-shrink: 0;
|
||
margin-left: -4px;
|
||
margin-top: 4px;
|
||
}
|
||
*/
|
||
.cpwn-task-text {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
/* Interaction States */
|
||
.cpwn-clickable {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.cpwn-hidden {
|
||
display: none;
|
||
}
|
||
|
||
.cpwn-visible {
|
||
display: block;
|
||
}
|
||
|
||
.cpwn-highlighted {
|
||
background-color: var(--highlight-color);
|
||
}
|
||
|
||
/* Hover Effects */
|
||
.cpwn-hover-fade {
|
||
opacity: var(--hover-opacity);
|
||
transition: opacity 0.2s;
|
||
}
|
||
|
||
/* Pull-to-Refresh Animation */
|
||
.cpwn-pull-indicator {
|
||
transform: var(--pull-transform);
|
||
transition: transform 0.2s;
|
||
}
|
||
|
||
/* Context Menu */
|
||
.cpwn-context-menu {
|
||
position: fixed;
|
||
box-sizing: border-box;
|
||
max-height: 45vh;
|
||
width: var(--menu-width);
|
||
top: var(--menu-top);
|
||
left: var(--menu-left);
|
||
bottom: var(--menu-bottom);
|
||
visibility: visible;
|
||
}
|
||
|
||
/* Progress Bars */
|
||
.cpwn-progress-bar {
|
||
width: var(--progress-width);
|
||
}
|
||
|
||
/* Tab Content */
|
||
.cpwn-tab-scratch {
|
||
display: var(--tab-scratch-display, none);
|
||
}
|
||
|
||
.cpwn-tab-notes {
|
||
display: var(--tab-notes-display, none);
|
||
}
|
||
|
||
/* Search Clear Button */
|
||
.cpwn-search-clear {
|
||
visibility: var(--clear-visibility, hidden);
|
||
}
|
||
|
||
/* Fade Transitions */
|
||
.cpwn-fade-enter {
|
||
opacity: 0;
|
||
transition: opacity 0.2s;
|
||
}
|
||
|
||
.cpwn-fade-visible {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* Chart Container */
|
||
.cpwn-pm-css-chart-container {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.cpwn-pm-css-chart-container svg {
|
||
overflow: visible;
|
||
width: 100%;
|
||
font-family: var(--font-ui);
|
||
}
|
||
|
||
/* Grid Lines */
|
||
.cpwn-chart-grid-line {
|
||
stroke: var(--background-modifier-border);
|
||
stroke-width: 1px;
|
||
}
|
||
|
||
|
||
.cpwn-chart-line-stroke {
|
||
fill: none;
|
||
stroke: var(--interactive-accent);
|
||
stroke-width: 2px;
|
||
}
|
||
|
||
/* Data Points */
|
||
.cpwn-chart-dot {
|
||
fill: var(--interactive-accent);
|
||
stroke: var(--background-primary);
|
||
stroke-width: 1px;
|
||
transition: r 0.2s ease;
|
||
}
|
||
|
||
/* Hit Targets (Invisible) */
|
||
.cpwn-chart-hit-target {
|
||
fill: transparent;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Axis Labels */
|
||
.cpwn-axis-label {
|
||
font-size: 8px;
|
||
fill: var(--text-muted);
|
||
text-anchor: middle;
|
||
}
|
||
|
||
|
||
/* Tooltip */
|
||
.cpwn-chart-tooltip {
|
||
position: absolute;
|
||
z-index: var(--layer-tooltip);
|
||
pointer-events: none;
|
||
padding: 4px 8px;
|
||
background-color: var(--background-modifier-message);
|
||
color: var(--text-normal);
|
||
border-radius: var(--radius-s);
|
||
font-size: var(--font-ui-smaller);
|
||
box-shadow: var(--shadow-s);
|
||
display: none;
|
||
}
|
||
|
||
/* Goal Row Layout */
|
||
.cpwn-goal-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 6px;
|
||
padding: 2px 0;
|
||
}
|
||
|
||
/* Left Section (Icon + Text) */
|
||
.cpwn-goal-left {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-grow: 1;
|
||
min-width: 0; /* Allows text truncation if needed */
|
||
}
|
||
|
||
/* Icon Styling */
|
||
.cpwn-goal-icon {
|
||
margin-right: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.cpwn-goal-icon.is-completed {
|
||
color: var(--text-success);
|
||
}
|
||
|
||
.cpwn-goal-icon.is-incomplete {
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* Text Container */
|
||
.cpwn-goal-text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.cpwn-goal-title {
|
||
font-weight: var(--font-ui-small);
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
.cpwn-goal-progress {
|
||
font-size: var(--font-ui-smaller);
|
||
}
|
||
|
||
/* Right Section (Points) */
|
||
.cpwn-goal-right {
|
||
white-space: nowrap;
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.cpwn-goal-points {
|
||
font-weight: bold;
|
||
font-size: var(--font-ui-small);
|
||
color: var(--text-accent);
|
||
}
|
||
|
||
.cpwn-goal-list-left .cpwn-goal-row:first-child {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
/* --- Daily Goals Widget Split Layout --- */
|
||
.cpwn-goal-split-container {
|
||
display: grid;
|
||
grid-template-columns: 1fr 80px; /* List takes available space, Level takes fixed 80px */
|
||
gap: 12px;
|
||
align-items: center;
|
||
}
|
||
|
||
/* Left List Styling */
|
||
.cpwn-goal-list-left {
|
||
display: flex;
|
||
flex-direction: column;
|
||
/*gap: 6px;*/
|
||
}
|
||
|
||
.cpwn-goal-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 2px 0;
|
||
}
|
||
|
||
.cpwn-goal-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
overflow: hidden; /* Prevent text overflow */
|
||
}
|
||
|
||
.cpwn-goal-title-row {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 6px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.cpwn-goal-title {
|
||
font-size: 0.95em;
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
.cpwn-goal-count-inline {
|
||
font-size: 0.85em;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.cpwn-goal-right {
|
||
margin-left: 8px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.cpwn-goal-points {
|
||
font-weight: bold;
|
||
font-size: 0.9em;
|
||
}
|
||
.cpwn-points-pos { color: var(--text-accent); }
|
||
.cpwn-points-neg { color: var(--text-error); }
|
||
|
||
/* Right Level Styling */
|
||
.cpwn-goal-level-right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
}
|
||
|
||
.cpwn-level-circle-wrapper {
|
||
position: relative;
|
||
width: 60px;
|
||
height: 60px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.cpwn-level-icon-inner {
|
||
position: absolute;
|
||
color: var(--text-normal);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.cpwn-level-icon-inner svg {
|
||
width: 34px;
|
||
height: 34px;
|
||
}
|
||
|
||
.cpwn-level-title-text {
|
||
font-size: 0.75em;
|
||
color: var(--text-muted);
|
||
margin-top: 6px;
|
||
line-height: 1.1;
|
||
max-width: 80px;
|
||
}
|
||
|
||
.cpwn-level-circle-wrapper svg circle:nth-child(2) {
|
||
transition: stroke-dashoffset 0.5s ease;
|
||
/* Ensure the stroke color is visible */
|
||
stroke: var(--text-accent);
|
||
/* Ensure it's on top */
|
||
z-index: 2;
|
||
}
|
||
|
||
/* Goal progress tooltip, styled like a mini popup window */
|
||
.cpwn-goal-tooltip {
|
||
position: fixed;
|
||
z-index: 9999;
|
||
max-width: min(360px, 90vw); /* Never exceed 90% of screen width */
|
||
padding: 10px 12px;
|
||
border-radius: 8px;
|
||
background-color: var(--background-primary);
|
||
border: 1px solid var(--background-modifier-border);
|
||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
|
||
color: var(--text-normal);
|
||
font-size: 12px;
|
||
line-height: 1.4;
|
||
opacity: 0;
|
||
transition: opacity 0.15s ease-out;
|
||
pointer-events: none;
|
||
white-space: normal;
|
||
}
|
||
|
||
/* NEW: Mobile-Specific Override */
|
||
@media screen and (max-width: 480px) {
|
||
.cpwn-goal-tooltip {
|
||
/* Force it to be centered at the bottom of the viewport */
|
||
top: auto; /* Ignore JS top */
|
||
bottom: 20px; /* Stick to bottom with padding */
|
||
left: 50%; /* Center horizontally */
|
||
transform: translateX(-50%); /* Perfect centering */
|
||
|
||
/* Ensure width is safe */
|
||
width: 90vw;
|
||
max-width: 360px;
|
||
|
||
/* Add a backdrop shadow to make it pop over content */
|
||
box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
|
||
}
|
||
}
|
||
|
||
|
||
/* Optional: reuse popup font/spacing feel */
|
||
.cpwn-goal-tooltip-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
/* Wrapper for the mini ring */
|
||
.cpwn-goal-tooltip-ring-wrapper {
|
||
position: relative;
|
||
width: 28px;
|
||
height: 28px;
|
||
flex-shrink: 0;
|
||
}
|
||
.cpwn-goal-tooltip-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* Performance state icon (color set inline from JS) */
|
||
.cpwn-goal-tooltip-icon-perf {
|
||
opacity: 0.9;
|
||
}
|
||
|
||
/* Level icon uses the progress accent colour */
|
||
.cpwn-goal-tooltip-icon-level {
|
||
/* Bigger icon in the popup */
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 999px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
/* Progress value (0–100) comes from JS; default to 0 */
|
||
--cpwn-goal-progress: 0;
|
||
|
||
/* Outer ring: accent for [0, progress], dull border after that */
|
||
background:
|
||
conic-gradient(
|
||
var(--text-accent)
|
||
0deg
|
||
calc(var(--cpwn-goal-progress) * 3.6deg),
|
||
var(--background-modifier-border)
|
||
calc(var(--cpwn-goal-progress) * 3.6deg)
|
||
360deg
|
||
),
|
||
radial-gradient(
|
||
farthest-side,
|
||
var(--background-primary) 70%,
|
||
transparent 71%
|
||
);
|
||
|
||
/* Make sure the inner circle stays the background color, ring outside */
|
||
background-origin: border-box;
|
||
background-clip: border-box, padding-box;
|
||
}
|
||
|
||
|
||
/* Center the Lucide icon over the SVG ring */
|
||
.cpwn-goal-tooltip-ring-icon {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* Make the Lucide glyph itself clearly visible inside the ring */
|
||
.cpwn-goal-tooltip-ring-icon svg {
|
||
width: 14px;
|
||
height: 14px;
|
||
stroke: var(--text-normal);
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
.cpwn-goal-tooltip-title {
|
||
font-weight: 600;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.cpwn-goal-tooltip-body {
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.cpwn-goal-tooltip-line-strong {
|
||
font-weight: 500;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.cpwn-goal-tooltip-line {
|
||
color: var(--text-muted);
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.cpwn-goal-tooltip-spacer {
|
||
height: 4px;
|
||
}
|
||
|
||
.cpwn-goal-tooltip-spacer-large {
|
||
height: 8px; /* gap between “Nice and steady…” and “At this pace…” */
|
||
}
|
||
|
||
/* Weekday pill selector in GoalEditModal */
|
||
.cpwn-goal-days-picker {
|
||
display: inline-flex;
|
||
border-radius: 999px;
|
||
overflow: hidden; /* clip inner corners */
|
||
background-color: var(--background-modifier-border);
|
||
}
|
||
|
||
/* Each day cell: larger tap target */
|
||
.cpwn-goal-day {
|
||
padding: 6px 16px; /* bigger horizontally and vertically */
|
||
min-width: 28px; /* wider cells */
|
||
text-align: center;
|
||
font-size: 12px; /* larger letter */
|
||
letter-spacing: 0.06em;
|
||
cursor: pointer;
|
||
color: var(--text-muted);
|
||
background-color: transparent;
|
||
border-right: 1px solid rgba(0, 0, 0, 0.25);
|
||
}
|
||
|
||
/* Make the very first cell visually round on the left */
|
||
.cpwn-goal-day:first-child {
|
||
border-top-left-radius: 999px;
|
||
border-bottom-left-radius: 999px;
|
||
}
|
||
|
||
/* Make the very last cell visually round on the right */
|
||
.cpwn-goal-day:last-child {
|
||
border-top-right-radius: 999px;
|
||
border-bottom-right-radius: 999px;
|
||
border-right: none;
|
||
}
|
||
|
||
/* Active days: Obsidian accent, but keep corner rounding from above */
|
||
.cpwn-goal-day.is-active {
|
||
background-color: var(--interactive-accent);
|
||
color: var(--text-on-accent, #fff);
|
||
}
|
||
|
||
.cpwn-level-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-top: 6px;
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
.cpwn-level-table th,
|
||
.cpwn-level-table td {
|
||
padding: 4px 6px;
|
||
}
|
||
|
||
.cpwn-level-table tr:nth-child(even) {
|
||
background-color: var(--background-secondary-alt);
|
||
}
|
||
|
||
.cpwn-level-icon svg {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
|
||
.cpwn-goal-item .setting-item {
|
||
border-top: none;
|
||
border-bottom: none;
|
||
padding: 0; /* Remove default padding if it's too large */
|
||
}
|
||
|
||
/* Dim the entire row */
|
||
.cpwn-goal-item.cpwn-goal-inactive {
|
||
opacity: 0.5;
|
||
filter: grayscale(100%);
|
||
}
|
||
|
||
/* Style the "Rest" icon */
|
||
.cpwn-goal-item.cpwn-goal-inactive .cpwn-goal-icon {
|
||
color: var(--text-muted);
|
||
cursor: default;
|
||
}
|
||
|
||
/* Style the "OFF" badge */
|
||
.cpwn-goal-rest-badge {
|
||
font-size: 0.7em;
|
||
font-weight: bold;
|
||
color: var(--text-muted);
|
||
border: 1px solid var(--text-muted);
|
||
border-radius: 4px;
|
||
padding: 2px 6px;
|
||
margin-left: auto; /* Push to the right */
|
||
}
|
||
|
||
/* Condensed Daily Goal Widget Layout */
|
||
.cpwn-goal-split-container.condensed {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 10px;
|
||
}
|
||
|
||
.cpwn-goal-summary-large {
|
||
font-size: 2em;
|
||
font-weight: bold;
|
||
line-height: 1;
|
||
}
|
||
|
||
.cpwn-goal-summary-sub {
|
||
font-size: 0.8em;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* The larger font size for the condensed chart */
|
||
.cpwn-axis-label-large {
|
||
font-size: 16px; /* Larger font */
|
||
fill: var(--text-muted);
|
||
}
|
||
|
||
/* Vacation Text */
|
||
.cpwn-summary-vacation {
|
||
font-size: 0.9em;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* Large Numbers (e.g. "1/3") */
|
||
.cpwn-summary-large {
|
||
font-size: 2.2em;
|
||
font-weight: bold;
|
||
line-height: 1;
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
.cpwn-summary-icon-rest {
|
||
display: flex;
|
||
justify-content: center; /* Center horizontally */
|
||
margin-top: 10px;
|
||
margin-bottom: 2px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.cpwn-summary-icon-rest svg {
|
||
width: 44px;
|
||
height: 44px;
|
||
}
|
||
|
||
/* Subtext (e.g. "goals met" or "2 off today") */
|
||
.cpwn-summary-sub {
|
||
padding-top: 10px;
|
||
font-size: 0.6em;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.cpwn-header-alert-icon {
|
||
margin-left: 10px;
|
||
vertical-align: middle;
|
||
display: inline-flex; /* Important for alignment */
|
||
align-items: center;
|
||
height: 1em;
|
||
position: relative;
|
||
color: var(--text-muted);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.cpwn-header-alert-icon.is-alerting {
|
||
color: var(--text-error);
|
||
animation: cpwn-bell-shake 2s infinite;
|
||
}
|
||
|
||
/* Simple shake animation */
|
||
@keyframes cpwn-bell-shake {
|
||
0% { transform: rotate(0); }
|
||
10% { transform: rotate(15deg); }
|
||
20% { transform: rotate(-15deg); }
|
||
30% { transform: rotate(10deg); }
|
||
40% { transform: rotate(-10deg); }
|
||
50% { transform: rotate(0); }
|
||
100% { transform: rotate(0); }
|
||
}
|
||
|
||
/* Colors for priorities */
|
||
.cpwn-priority-icon[data-priority="0"] { color: var(--text-error); } /* Red */
|
||
.cpwn-priority-icon[data-priority="1"] { color: var(--text-error); } /* Orange */
|
||
.cpwn-priority-icon[data-priority="2"] { color: var(--text-muted); } /* Grey */
|
||
.cpwn-priority-icon[data-priority="4"] { color: var(--text-accent); } /* Blue/Green */
|
||
.cpwn-priority-icon[data-priority="5"] { color: var(--text-faint); } /* Faint */
|
||
|
||
/* --- Task Priority & Content Layout --- */
|
||
|
||
/* Main wrapper for Icon + Text + Alert Badge */
|
||
.cpwn-task-content-wrapper {
|
||
display: inline-flex;
|
||
align-items: flex-start; /* Aligns icon with text baseline perfectly */
|
||
gap: 4px; /* Space between icon and text */
|
||
width: 100%; /* Ensure it takes full width */
|
||
min-width: 0; /* Flexbox fix for text overflow */
|
||
}
|
||
|
||
/* Container for the Priority Icon */
|
||
.cpwn-priority-icon-container {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
align-self: flex-start; /* Center icon vertically relative to the line height */
|
||
margin-top: 3px;
|
||
flex-shrink: 0; /* Never squish the icon */
|
||
height: 1em; /* Match text size */
|
||
color: var(--text-muted); /* Default color fallback */
|
||
}
|
||
|
||
/* The actual SVG Icon */
|
||
.cpwn-priority-icon {
|
||
flex-shrink: 0;
|
||
/* margin-right: 4px; */
|
||
}
|
||
|
||
/* The Text Container (holds the Markdown) */
|
||
.cpwn-task-text-markdown {
|
||
flex: 1; /* Take up remaining space */
|
||
min-width: 0;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* Fix Markdown <p> tags causing new lines */
|
||
.cpwn-task-text-markdown p {
|
||
margin: 0;
|
||
display: inline; /* Forces paragraph to behave like a span */
|
||
}
|
||
|
||
/* Alert Badge Styling */
|
||
.cpwn-task-alert-badge {
|
||
gap: 4px;
|
||
margin-left: 6px;
|
||
margin-right: 5px;
|
||
flex-shrink: 0;
|
||
color: var(--text-accent);
|
||
display: inline-flex;
|
||
align-self: flex-start;
|
||
margin-top: 3px;
|
||
}
|
||
.cpwn-task-alert-badge svg {
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
|
||
.cpwn-alert-time-text {
|
||
font-size: 0.85em;
|
||
line-height: 1;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
/* Ensure tags align with the title text */
|
||
.cpwn-tags-container {
|
||
margin-left: 0;
|
||
padding-left: 0;
|
||
}
|
||
|
||
/* Hide content for ALL minimized states */
|
||
.cpwn-pm-widget-container.cpwn-is-mini .cpwn-widget-content,
|
||
.cpwn-pm-widget-container.cpwn-is-collapsed .cpwn-widget-content,
|
||
.cpwn-pm-widget-container.collapsed .cpwn-widget-content {
|
||
display: none;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.cpwn-pm-css-chart-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%; /* Ensure it fills the widget */
|
||
}
|
||
|
||
/* Ensure SVG shrinks to fit if legend is present */
|
||
.cpwn-pm-line-chart {
|
||
flex: 1;
|
||
min-height: 0; /* Crucial for flex children to shrink */
|
||
width: 100%;
|
||
}
|
||
|
||
/* Prevent legend from shrinking */
|
||
.cpwn-pm-chart-legend {
|
||
flex-shrink: 0;
|
||
margin-top: 8px; /* Add breathing room */
|
||
}
|
||
|
||
|
||
/* ============================================================
|
||
TASK LAYOUT SYSTEM (FINAL & CONSOLIDATED)
|
||
============================================================ */
|
||
/* --- Flexible Task Grid Architecture --- */
|
||
|
||
/* 1. Main Grid Container */
|
||
.cpwn-task-grid {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
align-items: center; /* Vertically center items in their rows */
|
||
padding: 4px 0;
|
||
}
|
||
|
||
.cpwn-task-checkbox + .cpwn-task-content {
|
||
margin-left: var(--task-checkbox-gap, 8px);
|
||
}
|
||
|
||
/* 2. Generic Area Containers */
|
||
/* Matches any div starting with cpwn-area- */
|
||
div[class^="cpwn-area-"] {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
min-width: 0; /* CRITICAL: prevents flex items from overflowing parent */
|
||
}
|
||
|
||
/* 3. Alignment & Flow Helpers */
|
||
.cpwn-align-right {
|
||
justify-content: flex-end;
|
||
text-align: right;
|
||
flex-wrap: wrap; /* Allows metadata to wrap on small screens */
|
||
}
|
||
|
||
.cpwn-align-center {
|
||
justify-content: center;
|
||
}
|
||
|
||
.cpwn-flow-column {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
/* 4. Component Styles */
|
||
/* Checkbox */
|
||
.cpwn-task-checkbox {
|
||
width: 16px;
|
||
height: 16px;
|
||
border: 1px solid var(--checkbox-border-color, var(--text-muted));
|
||
border-radius: 3px;
|
||
cursor: pointer;
|
||
transition: background-color 0.2s ease;
|
||
margin-top: 2px; /* Optical alignment with text */
|
||
margin-right: 0;
|
||
}
|
||
|
||
.cpwn-task-checkbox.is-checked {
|
||
background-color: var(--interactive-accent);
|
||
border-color: var(--interactive-accent);
|
||
}
|
||
|
||
/* Title */
|
||
.cpwn-task-title {
|
||
color: var(--text-normal);
|
||
word-break: break-word;
|
||
}
|
||
|
||
.cpwn-task-title.is-completed {
|
||
text-decoration: line-through;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* Priority */
|
||
.cpwn-task-priority {
|
||
font-weight: bold;
|
||
margin-right: 2px;
|
||
color: var(--text-error); /* Default to red/alert color for high priority */
|
||
}
|
||
|
||
.cpwn-task-tag-pill {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
line-height: 1;
|
||
white-space: nowrap;
|
||
margin-bottom: 0;
|
||
padding: 2px 6px;
|
||
border-radius: 12px; /* Default radius */
|
||
font-size: var(--font-ui-smaller);
|
||
}
|
||
|
||
/* Due date meta */
|
||
.cpwn-meta-item.cpwn-due-date {
|
||
color: var(--cpwn-task-due-text-color, var(--text-muted));
|
||
}
|
||
|
||
/* Alert time meta */
|
||
.cpwn-meta-item.cpwn-alert,
|
||
.cpwn-alert-time-text {
|
||
color: var(--cpwn-task-alert-text-color, var(--text-accent));
|
||
}
|
||
|
||
.cpwn-tag-container {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 4px;
|
||
}
|
||
|
||
/* Metadata Items (Dates, Alerts) */
|
||
.cpwn-meta-item {
|
||
font-size: 0.7em;
|
||
color: var(--text-muted);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.cpwn-meta-icon {
|
||
display: inline-flex; /* Use inline-flex to shrink-wrap the icon */
|
||
align-items: center; /* Vertically center the SVG inside the span */
|
||
justify-content: center; /* Horizontally center if width > SVG width */
|
||
line-height: 0; /* Kill line-height so it doesn't push text down */
|
||
vertical-align: middle; /* Helps align with adjacent text */
|
||
margin: 0; /* Remove accidental margins */
|
||
padding: 0; /* Remove accidental padding */
|
||
}
|
||
|
||
.cpwn-meta-icon svg {
|
||
display: block; /* Removes extra space below SVG */
|
||
width: 14px; /* Force consistent size */
|
||
height: 14px;
|
||
}
|
||
|
||
/* Icons and Spacers */
|
||
.cpwn-icon-item {
|
||
display: flex;
|
||
align-items: center;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.cpwn-icon-item svg {
|
||
width: 12px;
|
||
height: 12px;
|
||
}
|
||
|
||
.cpwn-layout-spacer {
|
||
display: inline-block;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Text Styles */
|
||
.cpwn-text-muted { color: var(--text-muted); }
|
||
.cpwn-text-accent { color: var(--text-accent); }
|
||
.cpwn-text-error { color: var(--text-error); }
|
||
|
||
/* Grid Spacing Fixes */
|
||
.cpwn-task-grid-container {
|
||
width: 100%;
|
||
padding: 8px 4px; /* Restore some padding */
|
||
margin: 0;
|
||
}
|
||
|
||
.cpwn-task-grid {
|
||
width: 100%;
|
||
}
|
||
|
||
/* Remove default Markdown paragraph margins inside title */
|
||
.cpwn-task-title-wrapper p {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.cpwn-todoist-task-description {
|
||
display: block;
|
||
margin-top: 2px;
|
||
color: var(--text-muted);
|
||
font-size: 0.92em;
|
||
line-height: 1.35;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.cpwn-todoist-task-description p {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
/* Ensure icons inherit text color from parent */
|
||
.cpwn-text-muted,
|
||
.cpwn-text-muted .svg-icon {
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.cpwn-text-accent,
|
||
.cpwn-text-accent .svg-icon {
|
||
color: var(--text-accent);
|
||
}
|
||
|
||
.cpwn-text-error,
|
||
.cpwn-text-error .svg-icon {
|
||
color: var(--text-error);
|
||
}
|
||
|
||
/* Font Sizes */
|
||
.cpwn-font-tiny { font-size: 10px; line-height: 1.2; }
|
||
.cpwn-font-small { font-size: var(--font-ui-smaller); }
|
||
.cpwn-font-medium { font-size: var(--font-ui-small); }
|
||
.cpwn-font-normal { font-size: var(--font-text); }
|
||
.cpwn-font-large { font-size: var(--font-ui-large); }
|
||
|
||
/* Fix Icon Sizes */
|
||
.cpwn-alert-badge .svg-icon {
|
||
flex-shrink: 0;
|
||
|
||
}
|
||
|
||
.cpwn-nested-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-width: 0;
|
||
}
|
||
|
||
/* Gap between Checkbox and Content (the yellow box) */
|
||
.cpwn-area-content {
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.cpwn-layout-tags-new-line .cpwn-area-content {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
/* Control subgrid behavior */
|
||
.cpwn-subgrid-container {
|
||
width: 100%;
|
||
}
|
||
|
||
/* Vertical gap for items stacked inside a subgrid area (title vs tags) */
|
||
.cpwn-sub-area-title {
|
||
gap: 4px;
|
||
}
|
||
|
||
/* --- FIX: Tags & Meta Alignment --- */
|
||
|
||
/* Force tags container to flow horizontally and wrap */
|
||
.cpwn-tags-container {
|
||
display: inline-flex; /* Critical for same-line layout */
|
||
flex-wrap: wrap;
|
||
white-space: normal;
|
||
align-items: center;
|
||
gap: 4px;
|
||
flex-shrink: 1;
|
||
text-overflow: ellipsis;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
|
||
/* Ensure the Meta area inside the subgrid handles alignment correctly */
|
||
.cpwn-sub-area-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
width: 100%;
|
||
}
|
||
|
||
/* Ensure subgrid items align to the top */
|
||
.cpwn-subgrid-container {
|
||
align-items: start;
|
||
}
|
||
|
||
/* Force the meta row in the subgrid to stay on one line */
|
||
.cpwn-sub-area-meta {
|
||
flex-wrap: nowrap;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
}
|
||
|
||
|
||
.cpwn-task-grid,
|
||
.cpwn-subgrid-container {
|
||
width: 100%;
|
||
min-width: 0;
|
||
}
|
||
|
||
/* Ensure flex containers wrap when told to */
|
||
[class*="cpwn-area-"],
|
||
[class*="cpwn-sub-area-"] {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Ensure all containers inside the task content area align left */
|
||
.cpwn-task-content .cpwn-nested-container {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
/* 1. The Truncation Class */
|
||
.cpwn-truncate-text {
|
||
white-space: nowrap; /* Force single line */
|
||
overflow: hidden; /* Hide what doesn't fit */
|
||
text-overflow: ellipsis; /* ADD THE ... DOTS */
|
||
|
||
display: block; /* Needed for ellipsis */
|
||
max-width: 100%; /* Must be constrained */
|
||
}
|
||
|
||
/* 2. Handle Markdown Paragraphs inside */
|
||
/* Obsidian renders text in <p>, so we must apply styles there too */
|
||
.cpwn-truncate-text p {
|
||
margin: 0;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* The direct parent (likely your task title wrapper or grid cell)
|
||
needs this to stop it from expanding infinitely. */
|
||
.cpwn-task-title-wrapper {
|
||
min-width: 0; /* Allows flex/grid item to shrink below content size */
|
||
overflow: hidden; /* Ensures child truncation works */
|
||
}
|
||
|
||
/* ==========================================
|
||
Custom Layout Builder Modal Styles
|
||
========================================== */
|
||
|
||
/* Main Modal Container */
|
||
.cpwn-layout-builder .cpwn-builder-container {
|
||
display: flex;
|
||
gap: 20px;
|
||
min-height: 450px;
|
||
}
|
||
|
||
/* Left Sidebar (Item Palette) */
|
||
.cpwn-layout-builder .cpwn-builder-sidebar {
|
||
width: 220px;
|
||
border-right: 1px solid var(--background-modifier-border);
|
||
padding-right: 15px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.cpwn-builder-sidebar h4 {
|
||
margin-top: 0;
|
||
margin-bottom: 10px;
|
||
color: var(--text-muted);
|
||
font-size: 13px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
/* Draggable Items in Sidebar */
|
||
.cpwn-draggable-item {
|
||
padding: 10px;
|
||
background-color: var(--interactive-normal);
|
||
border: 1px solid var(--background-modifier-border);
|
||
border-radius: 6px;
|
||
cursor: grab;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
font-size: 13px;
|
||
transition: background-color 0.1s, border-color 0.1s;
|
||
}
|
||
|
||
.cpwn-draggable-item:hover {
|
||
background-color: var(--interactive-hover);
|
||
border-color: var(--interactive-accent);
|
||
}
|
||
|
||
.cpwn-draggable-item:active {
|
||
cursor: grabbing;
|
||
}
|
||
|
||
.cpwn-item-icon {
|
||
color: var(--text-muted);
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
/* Right Side (Canvas) */
|
||
.cpwn-builder-canvas {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
/* Row Container Wrapper */
|
||
.cpwn-row-container {
|
||
background-color: var(--background-primary-alt);
|
||
border: 1px solid var(--background-modifier-border);
|
||
border-radius: 8px;
|
||
padding: 12px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
/* Row Header & Controls Area */
|
||
.cpwn-row-header-controls {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-bottom: 8px;
|
||
margin-bottom: 4px;
|
||
border-bottom: 1px solid var(--background-modifier-border);
|
||
}
|
||
|
||
.cpwn-row-label {
|
||
font-weight: 600;
|
||
font-size: 11px;
|
||
text-transform: uppercase;
|
||
color: var(--text-muted);
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
/* Alignment Dropdown Container */
|
||
.cpwn-align-controls {
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
}
|
||
|
||
/* Alignment Select Dropdowns */
|
||
.cpwn-align-select {
|
||
background-color: var(--interactive-normal);
|
||
border: 1px solid var(--background-modifier-border);
|
||
border-radius: 4px;
|
||
padding: 2px 8px;
|
||
font-size: 11px;
|
||
color: var(--text-normal);
|
||
cursor: pointer;
|
||
height: 26px;
|
||
line-height: 1;
|
||
outline: none;
|
||
}
|
||
|
||
.cpwn-align-select:hover {
|
||
border-color: var(--interactive-accent);
|
||
}
|
||
|
||
.cpwn-align-select:focus {
|
||
border-color: var(--interactive-accent);
|
||
box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2);
|
||
}
|
||
|
||
/* The Actual Drop Zone Box */
|
||
.cpwn-drop-zone {
|
||
min-height: 52px;
|
||
align-content: center;
|
||
background-color: var(--background-primary);
|
||
border: 2px dashed var(--background-modifier-border);
|
||
border-radius: 6px;
|
||
padding: 8px 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.cpwn-drop-zone .cpwn-placed-item.dragging {
|
||
opacity: 0.3;
|
||
border: 2px solid var(--interactive-accent);
|
||
background-color: transparent;
|
||
color: transparent;
|
||
}
|
||
|
||
.cpwn-drop-zone.cpwn-drag-over {
|
||
border-color: var(--interactive-accent);
|
||
background-color: var(--background-secondary);
|
||
border-style: solid; /* Changes from dashed to solid on hover for feedback */
|
||
transform: scale(1.01); /* Subtle "pop" effect */
|
||
}
|
||
|
||
.cpwn-item-separator {
|
||
min-width: 24px;
|
||
justify-content: center;
|
||
background-color: var(--background-secondary);
|
||
border: 1px solid var(--background-modifier-border);
|
||
padding: 2px 8px;
|
||
}
|
||
|
||
/* Items Placed Inside Rows */
|
||
.cpwn-placed-item {
|
||
background-color: var(--interactive-accent);
|
||
color: var(--text-on-accent);
|
||
padding: 4px 12px;
|
||
border-radius: 14px;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
|
||
transition: opacity 0.1s;
|
||
}
|
||
|
||
.cpwn-placed-item:hover {
|
||
opacity: 0.85;
|
||
}
|
||
|
||
/* Special Styling for Spacer Item in Builder */
|
||
.cpwn-placed-item.cpwn-item-spacer {
|
||
background-color: transparent;
|
||
color: var(--text-muted);
|
||
border: 1px dashed var(--text-muted);
|
||
font-style: italic;
|
||
flex-grow: 1;
|
||
justify-content: center;
|
||
min-width: 60px;
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* ==========================================
|
||
NEW STYLE POPOVER & TRANSPARENCY SLIDER
|
||
========================================== */
|
||
|
||
/* Main Popup Container */
|
||
.cpwn-popup {
|
||
background-color: var(--background-primary);
|
||
border: 1px solid var(--background-modifier-border);
|
||
border-radius: 8px;
|
||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); /* Stronger shadow for floating feel */
|
||
padding: 12px;
|
||
width: 260px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
font-size: var(--font-ui-small);
|
||
z-index: var(--layer-popover);
|
||
animation: popover-fade-in 0.1s ease-out;
|
||
}
|
||
|
||
@keyframes popover-fade-in {
|
||
from { opacity: 0; transform: scale(0.95); }
|
||
to { opacity: 1; transform: scale(1); }
|
||
}
|
||
|
||
/* Section Headers */
|
||
.cpwn-custom-layout-section-header {
|
||
font-weight: 600;
|
||
color: var(--text-muted);
|
||
margin-bottom: 6px;
|
||
font-size: 11px;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
/* Button Groups (Segmented Controls) */
|
||
.cpwn-btn-group {
|
||
display: flex;
|
||
background-color: var(--background-secondary);
|
||
padding: 3px;
|
||
border-radius: 6px;
|
||
gap: 2px;
|
||
border: 1px solid var(--background-modifier-border);
|
||
}
|
||
|
||
.cpwn-btn-group button {
|
||
flex: 1;
|
||
background: transparent;
|
||
border: none;
|
||
box-shadow: none;
|
||
color: var(--text-normal);
|
||
padding: 4px 8px;
|
||
font-size: 11px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
transition: all 0.1s ease;
|
||
}
|
||
|
||
.cpwn-btn-group button:hover {
|
||
background-color: var(--background-modifier-hover);
|
||
}
|
||
|
||
.cpwn-btn-group button.is-active {
|
||
background-color: var(--interactive-accent);
|
||
color: var(--text-on-accent);
|
||
font-weight: 500;
|
||
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
/* Color & Opacity Row */
|
||
.cpwn-color-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
background: var(--background-secondary);
|
||
padding: 8px;
|
||
border-radius: 6px;
|
||
border: 1px solid var(--background-modifier-border);
|
||
}
|
||
|
||
/* Color Preview Circle */
|
||
.cpwn-color-preview {
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 50%;
|
||
border: 2px solid var(--background-modifier-border);
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
transition: transform 0.1s;
|
||
}
|
||
|
||
.cpwn-color-preview:hover {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
/* Slider Container */
|
||
.cpwn-slider-container {
|
||
flex-grow: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* The Range Input (Slider) */
|
||
.cpwn-slider {
|
||
/*-webkit-appearance: none;*/
|
||
width: 100%;
|
||
height: 4px;
|
||
background: linear-gradient(to right, var(--background-modifier-border), var(--text-normal));
|
||
border-radius: 2px;
|
||
outline: none;
|
||
cursor: pointer;
|
||
margin: 0;
|
||
}
|
||
|
||
.cpwn-slider::-webkit-slider-thumb {
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
width: 16px;
|
||
height: 16px;
|
||
background: var(--interactive-accent);
|
||
border-radius: 50%;
|
||
border: 2px solid var(--background-primary);
|
||
cursor: pointer;
|
||
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
/* Footer Buttons */
|
||
.cpwn-footer {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 8px;
|
||
margin-top: 4px;
|
||
border-top: 1px solid var(--background-modifier-border);
|
||
padding-top: 10px;
|
||
}
|
||
|
||
.cpwn-footer button {
|
||
padding: 4px 12px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.cpwn-btn-danger {
|
||
background-color: transparent;
|
||
color: var(--text-error);
|
||
border: 1px solid var(--text-error);
|
||
}
|
||
|
||
.cpwn-btn-danger:hover {
|
||
background-color: var(--background-modifier-error);
|
||
color: var(--text-on-accent);
|
||
}
|
||
|
||
/* ==========================================
|
||
Task List Renderer Styles (SCOPED)
|
||
========================================== */
|
||
|
||
/* 1. Ensure the custom layout row allows stretching */
|
||
.cpwn-nested-container {
|
||
display: flex;
|
||
width: 100%;
|
||
padding-left: 0; /* Reset padding */
|
||
margin-left: 0;
|
||
align-items: center; /* Ensure vertical center */
|
||
}
|
||
|
||
/* 2. Reset margins on the first item to prevent indentation */
|
||
.cpwn-nested-container > :first-child {
|
||
margin-left: 0;
|
||
}
|
||
|
||
/* 3. Hide empty spans that might cause gaps */
|
||
.cpwn-nested-container > span:empty {
|
||
display: none;
|
||
}
|
||
|
||
/* 4. FORCE Spacer to work, but only inside these specific rows */
|
||
.cpwn-nested-container > .cpwn-layout-spacer {
|
||
flex-grow: 1;
|
||
width: auto;
|
||
min-width: 0;
|
||
display: flex;
|
||
}
|
||
|
||
/* 5. Protect right-aligned items from shrinking */
|
||
.cpwn-nested-container > .cpwn-alert-item,
|
||
.cpwn-nested-container > .cpwn-due-date {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Builder Preview Colors - Logic for Chip Display */
|
||
|
||
/* Accent Color Override */
|
||
.cpwn-placed-item.cpwn-item-color-accent {
|
||
background-color: var(--background-primary);
|
||
border: 1px solid var(--interactive-accent);
|
||
color: var(--text-accent);
|
||
}
|
||
|
||
/* Muted Color Override */
|
||
.cpwn-placed-item.cpwn-item-color-muted {
|
||
background-color: var(--background-primary);
|
||
border: 1px solid var(--text-muted);
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* Custom Hex Override */
|
||
.cpwn-placed-item[style*="color:"] {
|
||
background-color: var(--background-primary);
|
||
border: 1px solid var(--background-modifier-border);
|
||
}
|
||
|
||
.cpwn-draggable-item.is-used {
|
||
opacity: 0.6;
|
||
background-color: var(--background-modifier-form-field);
|
||
}
|
||
|
||
|
||
.cpwn-item-used-indicator {
|
||
margin-left: auto;
|
||
color: var(--text-success);
|
||
opacity: 0.8;
|
||
}
|
||
.cpwn-item-used-indicator svg {
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
|
||
.cpwn-date-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
flex-wrap: nowrap; /* Force single line */
|
||
white-space: nowrap;
|
||
line-height: 1;
|
||
gap: 4px;
|
||
flex-shrink: 0; /* Prevent squishing */
|
||
}
|
||
|
||
/* Icon Container */
|
||
.cpwn-date-badge .cpwn-meta-icon {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 0.85em; /* or 0.85em, adjust to taste */
|
||
width: 0.85em;
|
||
flex-shrink: 0; /* Icon must not shrink */
|
||
}
|
||
|
||
/* SVG Inside Icon */
|
||
.cpwn-date-badge .cpwn-meta-icon svg {
|
||
width: 100%;
|
||
height: 100%;
|
||
stroke-width: 2px;
|
||
display: block; /* Removes weird baseline gaps */
|
||
}
|
||
|
||
/* Shared layout for all badge-like items */
|
||
.cpwn-recurrence,
|
||
.cpwn-depends-on,
|
||
.cpwn-task-id,
|
||
.cpwn-task-source {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
line-height: 1;
|
||
white-space: nowrap;
|
||
flex-wrap: nowrap;
|
||
}
|
||
|
||
/* Icon sizing for all these items */
|
||
.cpwn-recurrence .cpwn-meta-icon,
|
||
.cpwn-depends-on .cpwn-meta-icon,
|
||
.cpwn-task-id .cpwn-meta-icon,
|
||
.cpwn-task-source .cpwn-meta-icon {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 1em;
|
||
width: 1em;
|
||
}
|
||
|
||
/* Specific override for Source icon size if you really need 1.15em */
|
||
.cpwn-task-source .cpwn-meta-icon {
|
||
height: 1.15em;
|
||
width: 1.15em;
|
||
}
|
||
|
||
/* Link Styling */
|
||
.cpwn-source-link {
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Base Spacer */
|
||
.cpwn-layout-spacer {
|
||
/* Default legacy behavior (fixed width) */
|
||
display: inline-block;
|
||
flex-grow: 0;
|
||
}
|
||
|
||
/* Flexible Spacer State */
|
||
.cpwn-layout-spacer.is-flexible {
|
||
display: flex;
|
||
flex-grow: 1;
|
||
width: auto;
|
||
min-width: 10px;
|
||
}
|
||
|
||
/* Style for priority-colored checkboxes */
|
||
.cpwn-task-checkbox.is-colored-priority {
|
||
/* Force the browser to use our custom color for the "checked" background */
|
||
accent-color: var(--checkbox-color);
|
||
|
||
/* Override Obsidian's default border for the unchecked state */
|
||
border-color: var(--checkbox-color);
|
||
}
|
||
|
||
/* Optional: Add a subtle background tint when unchecked (if desired) */
|
||
.cpwn-task-checkbox.is-colored-priority:not(:checked) {
|
||
background-color: color-mix(in srgb, var(--checkbox-color), transparent 90%);
|
||
}
|
||
|
||
/* Optional: Ensure the checkmark remains visible/white if your colors are dark */
|
||
.cpwn-task-checkbox.is-colored-priority:checked {
|
||
border-color: var(--checkbox-color);
|
||
}
|
||
|
||
|
||
/* --- ISOLATED SWIPEABLE WIDGET STYLES --- */
|
||
.cpwn-swipe-wrapper {
|
||
position: relative;
|
||
height: 220px;
|
||
width: 100%; /* Match parent width */
|
||
display: block; /* Ensure block layout */
|
||
overflow: hidden;
|
||
background-color: var(--background-secondary);
|
||
border-radius: var(--radius-m);
|
||
}
|
||
|
||
.cpwn-swipe-axis {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
z-index: 10;
|
||
background-color: var(--background-secondary);
|
||
}
|
||
|
||
.cpwn-swipe-axis-left {
|
||
left: 0;
|
||
width: 35px;
|
||
border-right: 1px solid var(--background-modifier-border);
|
||
}
|
||
|
||
.cpwn-swipe-axis-right {
|
||
right: 0;
|
||
width: 40px;
|
||
border-left: 1px solid var(--background-modifier-border);
|
||
}
|
||
|
||
.cpwn-swipe-scroll-container {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 35px; /* Match left axis */
|
||
right: 40px; /* Match right axis */
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
white-space: nowrap;
|
||
cursor: grab;
|
||
user-select: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
.cpwn-swipe-chart-inner {
|
||
height: 100%;
|
||
display: inline-block;
|
||
}
|
||
|
||
/* Axis Labels */
|
||
.cpwn-swipe-label {
|
||
position: absolute;
|
||
transform: translateY(-50%);
|
||
font-size: 9px;
|
||
line-height: 1;
|
||
}
|
||
|
||
.cpwn-swipe-axis-left .cpwn-swipe-label {
|
||
right: 4px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.cpwn-swipe-axis-right .cpwn-swipe-label {
|
||
left: 4px;
|
||
color: var(--text-accent);
|
||
}
|
||
|
||
/* Chart Styles */
|
||
.cpwn-swipe-total-line {
|
||
stroke: var(--text-accent);
|
||
stroke-width: 2px;
|
||
stroke-dasharray: 4, 4;
|
||
fill: none;
|
||
}
|
||
|
||
.cpwn-swipe-daily-line {
|
||
stroke: var(--interactive-accent);
|
||
stroke-width: 2px;
|
||
fill: none;
|
||
}
|
||
|
||
.cpwn-swipe-date-label {
|
||
text-anchor: middle;
|
||
font-size: 10px;
|
||
fill: var(--text-muted);
|
||
}
|
||
|
||
/* --- Container & Wrapper --- */
|
||
.cpwn-pm-widget-swipeable {
|
||
width: 100%;
|
||
display: block;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* --- The Month Pill --- */
|
||
.cpwn-month-label {
|
||
position: absolute;
|
||
top: 0px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 20;
|
||
|
||
/* Typography */
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: var(--text-muted);
|
||
white-space: nowrap;
|
||
user-select: none;
|
||
|
||
/* Box Model */
|
||
/*background: var(--background-primary);*/
|
||
background-color: rgba(var(--background-primary), 0.05);
|
||
backdrop-filter: blur(2px);
|
||
|
||
border: 1px solid var(--background-modifier-border);
|
||
border-radius: 12px;
|
||
padding: 4px 12px;
|
||
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
|
||
|
||
/* Interaction */
|
||
pointer-events: auto;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
/* Hover state (Replaces the JS mouseenter/mouseleave events) */
|
||
.cpwn-month-label:hover {
|
||
color: var(--text-accent);
|
||
border-color: var(--text-accent);
|
||
}
|
||
|
||
/* --- Tooltip --- */
|
||
.cpwn-chart-tooltip {
|
||
position: absolute;
|
||
display: none;
|
||
z-index: 100;
|
||
background: var(--background-secondary);
|
||
border: 1px solid var(--background-modifier-border);
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
||
padding: 4px 8px;
|
||
border-radius: 4px;
|
||
font-size: 11px;
|
||
pointer-events: none;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.cpwn-chart-tooltip-date {
|
||
font-weight: bold;
|
||
margin-bottom: 2px;
|
||
border-bottom: 1px solid var(--background-modifier-border);
|
||
}
|
||
|
||
/* --- Axes --- */
|
||
.cpwn-swipe-axis-left,
|
||
.cpwn-swipe-axis-right {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
z-index: 10;
|
||
/*background: var(--background-primary);*/
|
||
cursor: help;
|
||
}
|
||
|
||
.cpwn-swipe-axis-left {
|
||
left: 0;
|
||
border-right: 1px solid var(--background-modifier-border);
|
||
}
|
||
|
||
.cpwn-swipe-axis-right {
|
||
right: 0;
|
||
border-left: 1px solid var(--background-modifier-border);
|
||
}
|
||
|
||
/* Axis Ticks */
|
||
.cpwn-axis-tick {
|
||
position: absolute;
|
||
width: 100%;
|
||
font-size: 10px;
|
||
color: var(--text-muted);
|
||
padding-left: 4px;
|
||
padding-right: 4px;
|
||
}
|
||
|
||
/* --- Scroll Container --- */
|
||
.cpwn-swipe-scroll-container {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
z-index: 1;
|
||
scroll-behavior: auto;
|
||
}
|
||
|
||
/* --- SVG Elements --- */
|
||
.cpwn-swipe-hit-rect {
|
||
fill: transparent;
|
||
cursor: crosshair;
|
||
}
|
||
|
||
.cpwn-swipe-day-text {
|
||
font-size: 10px;
|
||
fill: var(--text-muted);
|
||
text-anchor: middle;
|
||
}
|
||
.cpwn-tooltip-detail {
|
||
font-size: 10px;
|
||
margin-top: 1px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
.cpwn-tooltip-bonus {
|
||
color: var(--color-green, #4caf50);
|
||
}
|
||
|
||
.cpwn-tooltip-streak {
|
||
color: var(--color-orange, #ff9800);
|
||
}
|
||
|
||
.cpwn-vacation-banner {
|
||
text-align: center; /* Centers the text horizontally */
|
||
width: 100%; /* Ensures the container spans full width */
|
||
display: block; /* Ensures it takes up its own line */
|
||
margin: 2px 0; /* Add some breathing room */
|
||
font-size: 0.8em;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.cpwn-chart-status-bands rect {
|
||
pointer-events: none; /* Ensure the mouse still hits the hitRects */
|
||
}
|
||
|
||
/* Vacation Band */
|
||
.cpwn-chart-status-bands [status="vacation"] {
|
||
fill: var(--interactive-accent);
|
||
opacity: 0.1;
|
||
}
|
||
|
||
/* Inactive Band */
|
||
.cpwn-chart-status-bands [status="inactive"] {
|
||
fill: var(--text-muted);
|
||
opacity: 0.05;
|
||
}
|
||
|
||
.modal.cpwn-custom-layout-modal {
|
||
width: 32vw; /* Or use 80vw for responsive width */
|
||
max-width: 90vw;
|
||
}
|
||
|
||
/* Ensure the nested container doesn't force a block break */
|
||
.cpwn-nested-container.is-flow {
|
||
display: inline;
|
||
}
|
||
|
||
|
||
/* 1. Ensure the flow area can wrap and break long text correctly */
|
||
.is-flow {
|
||
flex-wrap: wrap;
|
||
word-break: break-word;
|
||
}
|
||
|
||
/* 2. Allow badges to follow text flow while keeping internal icon/text aligned */
|
||
.is-flow .cpwn-recurrence,
|
||
.is-flow .cpwn-date-badge,
|
||
.is-flow .cpwn-layout-separator {
|
||
display: inline-flex; /* NOT display: inline */
|
||
white-space: nowrap; /* Keep 'every week...' from breaking internally */
|
||
}
|
||
|
||
.is-flow .cpwn-date-badge,
|
||
.is-flow .cpwn-recurrence {
|
||
display: inline-flex;
|
||
vertical-align: middle; /* Or baseline, overridden by JS */
|
||
}
|
||
|
||
/* 3. Ensure icons sit correctly on the text baseline */
|
||
.is-flow .cpwn-meta-icon {
|
||
display: inline-flex;
|
||
vertical-align: middle;
|
||
margin-right: 4px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 4. Ensure the task title wrapper plays nice with others in the flex row */
|
||
.is-flow .cpwn-task-title-wrapper {
|
||
display: inline;
|
||
flex: 0 1 auto;
|
||
width: auto;
|
||
margin-right: 4px;
|
||
}
|
||
|
||
|
||
|
||
/* --- TASK SCORECARD WIDGET --- */
|
||
|
||
|
||
/* Main Container - Ensures it follows your bounding box rules */
|
||
.cpwn-task-scorecard-widget {
|
||
padding: 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
width: 100%;
|
||
}
|
||
|
||
/* KPI Card Grid (Top Row) */
|
||
.cpwn-scorecard-kpi-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
gap: 8px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.cpwn-scorecard-kpi {
|
||
border: 1px solid var(--background-modifier-border);
|
||
padding: 10px 6px;
|
||
border-radius: 8px;
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
.cpwn-scorecard-kpi:hover {
|
||
background: var(--background-modifier-hover);
|
||
border-color: var(--interactive-accent);
|
||
}
|
||
|
||
.cpwn-scorecard-kpi-value {
|
||
font-size: 28px;
|
||
font-weight: 800;
|
||
line-height: 1;
|
||
margin-bottom: 6px;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.cpwn-scorecard-kpi-label {
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.1em;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* Active Breakdown (Middle List) */
|
||
.cpwn-scorecard-breakdown {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
.cpwn-scorecard-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 6px 8px;
|
||
background: var(--background-primary);
|
||
border-radius: 6px;
|
||
border: 1px solid transparent;
|
||
}
|
||
|
||
.cpwn-scorecard-item:hover {
|
||
border-color: var(--background-modifier-border);
|
||
}
|
||
|
||
.cpwn-scorecard-item-label {
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
.cpwn-scorecard-item-pill {
|
||
padding: 2px 10px;
|
||
border-radius: 6px;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
color: #ffffff; /* Contrast for colored pills */
|
||
min-width: 32px;
|
||
text-align: center;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
/* Progress Section (Bottom Bar) */
|
||
.cpwn-scorecard-progress {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.cpwn-scorecard-progress-text {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
color: var(--text-muted);
|
||
margin-bottom: 8px;
|
||
text-align: left;
|
||
}
|
||
|
||
.cpwn-scorecard-bar {
|
||
height: 18px;
|
||
background: var(--background-modifier-border);
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.cpwn-scorecard-fill {
|
||
height: 100%;
|
||
border-radius: 6px;
|
||
transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
||
background: var(--interactive-accent);
|
||
box-shadow: 0 0 10px var(--interactive-accent-hover);
|
||
}
|
||
|
||
|
||
/* styles.css */
|
||
.cpwn-integrated-bar {
|
||
position: relative;
|
||
height: 28px; /* Thicker for text */
|
||
background-color: var(--background-modifier-border);
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.cpwn-integrated-fill {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
height: 100%;
|
||
transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||
/* Subtle glow on the leading edge */
|
||
box-shadow: 2px 0 8px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
.cpwn-integrated-text {
|
||
position: relative;
|
||
z-index: 2;
|
||
font-size: var(--font-adaptive-small);
|
||
/* Uses the standard UI font weight */
|
||
font-weight: var(--font-medium);
|
||
/* Standard text color that adapts to light/dark mode */
|
||
color: var(--text-normal);
|
||
/* This ensures the text "pops" against the green bar regardless of theme */
|
||
text-shadow: 0 1px 1px var(--background-primary);
|
||
pointer-events: none;
|
||
display: flex;
|
||
gap: 4px;
|
||
}
|
||
|
||
.cpwn-label-bold {
|
||
/* Use Obsidian's bold weight variable */
|
||
font-weight: var(--font-bold);
|
||
/* High contrast text variable intended for colored backgrounds */
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
.cpwn-label-dim {
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
/* --- Segmented Progress Bar Widget --- */
|
||
.cpwn-progress-segmented-bar {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 28px; /* Standard Obsidian widget height */
|
||
background-color: var(--background-modifier-border);
|
||
border-radius: 6px;
|
||
display: flex;
|
||
overflow: hidden; /* Fixes the "vertical beam" glitch */
|
||
border: 1px solid var(--background-modifier-border);
|
||
box-sizing: border-box;
|
||
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
/* Glossy highlight effect (Makes it look premium) */
|
||
.cpwn-progress-segmented-bar::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0; left: 0; right: 0; bottom: 50%;
|
||
background: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
|
||
pointer-events: none;
|
||
z-index: 6;
|
||
}
|
||
|
||
.cpwn-progress-segmented-bar-segment {
|
||
height: 100%;
|
||
min-height: unset;
|
||
max-height: 28px; /* Safety constraint */
|
||
flex-shrink: 0;
|
||
transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||
border-right: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
/* Text Overlay Styling */
|
||
.cpwn-progress-segmented-bar-text-overlay {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 10;
|
||
pointer-events: none;
|
||
font-size: var(--font-adaptive-small);
|
||
font-weight: 500;
|
||
color: var(--text-normal);
|
||
gap: 4px;
|
||
/* Essential for readability over multi-colored segments */
|
||
text-shadow: 0 1px 2px var(--background-primary);
|
||
}
|
||
|
||
/* Main Grid Layout */
|
||
.cpwn-kpi-grid {
|
||
display: grid;
|
||
/* 2 columns by default, responsive */
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 9px;
|
||
width: 100%;
|
||
}
|
||
|
||
/* Card Container */
|
||
.cpwn-kpi-card {
|
||
background-color: var(--background-primary-alt);
|
||
border: 1px solid var(--background-modifier-border);
|
||
border-radius: 6px;
|
||
padding: 12px 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center; /* Center content vertically */
|
||
align-items: flex-start; /* Align text to left */
|
||
min-height: 80px;
|
||
position: relative;
|
||
transition: background-color 0.2s;
|
||
}
|
||
|
||
.cpwn-kpi-card:hover {
|
||
background-color: var(--background-secondary);
|
||
}
|
||
|
||
/* Label Styling - Uppercase, Muted, Professional */
|
||
.cpwn-kpi-card .kpi-label {
|
||
font-size: 0.7rem;
|
||
/* text-transform: uppercase;*/
|
||
letter-spacing: 0.05em;
|
||
color: var(--text-muted);
|
||
margin-bottom: 6px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* Value Row - Holds Icon and Number */
|
||
.cpwn-kpi-card .kpi-value-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
/* The Big Number */
|
||
.cpwn-kpi-card .kpi-value {
|
||
font-size: 1.4rem;
|
||
font-weight: 700;
|
||
color: var(--text-normal);
|
||
line-height: 1.2;
|
||
}
|
||
|
||
/* The Icon - Subtle visual cue */
|
||
.cpwn-kpi-card .kpi-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--text-muted); /* Default neutral color */
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.cpwn-kpi-card .kpi-icon svg {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
|
||
/* --- Status Colors (Applied to Icon Only) --- */
|
||
|
||
/* Good Status (e.g., On-Time Rate > 90%) */
|
||
.cpwn-kpi-card.status-good .kpi-icon {
|
||
color: var(--color-green);
|
||
}
|
||
|
||
/* Bad Status (e.g., Longest Overdue > 7 days) */
|
||
.cpwn-kpi-card.status-bad .kpi-icon {
|
||
color: var(--color-red);
|
||
}
|
||
|
||
/* Mobile Responsiveness */
|
||
@media (max-width: 400px) {
|
||
.cpwn-kpi-grid {
|
||
grid-template-columns: 1fr; /* Stack vertically on very small screens */
|
||
}
|
||
}
|
||
|
||
/* Tooltip Indicator - Subtle underline appears on hover */
|
||
.cpwn-kpi-card {
|
||
cursor: help; /* Changes cursor to indicate more info is available */
|
||
}
|
||
|
||
.cpwn-kpi-card:hover {
|
||
background-color: var(--background-secondary);
|
||
border-color: var(--interactive-accent); /* Subtle accent on hover */
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
/* Tag Heatmap Settings Icon */
|
||
.cpwn-heatmap-settings-icon {
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-left: auto;
|
||
margin-right: 8px;
|
||
opacity: 0.6;
|
||
transition: opacity 0.2s;
|
||
}
|
||
|
||
.cpwn-heatmap-settings-icon:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
.cpwn-heatmap-settings-icon.is-active {
|
||
opacity: 1;
|
||
color: var(--interactive-accent);
|
||
}
|
||
|
||
.cpwn-heatmap-settings-icon .svg-icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
/* Tag Heatmap Settings Container - Horizontal Layout */
|
||
.cpwn-heatmap-settings-container {
|
||
padding: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: auto;
|
||
max-height: 250px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.cpwn-settings-tabs {
|
||
display: flex;
|
||
gap: 0;
|
||
border-bottom: 2px solid var(--background-modifier-border);
|
||
flex-shrink: 0;
|
||
padding: 0 8px;
|
||
background: var(--background-primary);
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.cpwn-settings-tab {
|
||
padding: 8px 16px;
|
||
background: none;
|
||
border: none;
|
||
border-bottom: 2px solid transparent;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
color: var(--text-muted);
|
||
transition: all 0.2s;
|
||
margin-bottom: -2px;
|
||
}
|
||
|
||
.cpwn-settings-tab:hover {
|
||
color: var(--text-normal);
|
||
background: var(--background-modifier-hover);
|
||
}
|
||
|
||
.cpwn-settings-tab.is-active {
|
||
color: var(--interactive-accent);
|
||
border-bottom-color: var(--interactive-accent);
|
||
}
|
||
|
||
/* Action buttons in tab bar */
|
||
.cpwn-settings-action-buttons {
|
||
display: flex;
|
||
gap: 6px;
|
||
margin-left: auto;
|
||
padding: 4px 0;
|
||
}
|
||
|
||
.cpwn-settings-action-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
background: var(--background-modifier-hover);
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.cpwn-settings-action-btn:hover {
|
||
background: var(--background-modifier-border);
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
.cpwn-settings-action-btn.cpwn-save-btn {
|
||
background: var(--interactive-accent);
|
||
color: var(--text-on-accent);
|
||
}
|
||
|
||
.cpwn-settings-action-btn.cpwn-save-btn:hover {
|
||
opacity: 0.9;
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.cpwn-settings-action-btn .svg-icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
|
||
.cpwn-settings-tab-content {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 0 12px;
|
||
min-height: 100px;
|
||
}
|
||
|
||
/* Horizontal Row Layout */
|
||
.cpwn-setting-row {
|
||
display: flex;
|
||
gap: 12px;
|
||
}
|
||
|
||
.cpwn-setting-item {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.cpwn-flex-grow {
|
||
flex: 1;
|
||
}
|
||
|
||
.cpwn-setting-label {
|
||
font-weight: 500;
|
||
margin-bottom: 6px;
|
||
padding-top: 6px;
|
||
font-size: 12px;
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
.cpwn-setting-sublabel {
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.cpwn-setting-description {
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
margin-bottom: 10px;
|
||
line-height: 1.4;
|
||
padding: 3px 10px;
|
||
background: var(--background-secondary);
|
||
border-radius: 4px;
|
||
border-left: 2px solid var(--interactive-accent);
|
||
}
|
||
|
||
.cpwn-setting-item input[type="text"] {
|
||
width: 100%;
|
||
padding: 6px 8px;
|
||
border: 1px solid var(--background-modifier-border);
|
||
border-radius: 4px;
|
||
background: var(--background-primary);
|
||
color: var(--text-normal);
|
||
font-size: 12px;
|
||
transition: border-color 0.2s;
|
||
}
|
||
|
||
.cpwn-setting-item input[type="text"]:focus {
|
||
outline: none;
|
||
border-color: var(--interactive-accent);
|
||
box-shadow: 0 0 0 1px var(--interactive-accent);
|
||
}
|
||
|
||
/* Color Picker - Inline */
|
||
.cpwn-color-picker-inline {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.cpwn-color-picker-inline input[type="color"] {
|
||
width: 60px;
|
||
height: 32px;
|
||
padding: 2px;
|
||
border: 2px solid var(--background-modifier-border);
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
transition: transform 0.2s;
|
||
}
|
||
|
||
.cpwn-color-picker-inline input[type="color"]:hover {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.cpwn-setting-checkbox-label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
}
|
||
|
||
.cpwn-setting-checkbox-label:hover {
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
.cpwn-setting-checkbox-label input[type="checkbox"] {
|
||
cursor: pointer;
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
|
||
.cpwn-setting-checkbox-label span {
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* Tag Input Section */
|
||
.cpwn-add-tag-input-section {
|
||
min-width: 200px;
|
||
max-width: 250px;
|
||
}
|
||
|
||
.cpwn-add-tag-input-wrapper {
|
||
display: flex;
|
||
gap: 6px;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.cpwn-tag-input {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.cpwn-add-tag-input-wrapper button {
|
||
padding: 6px 12px;
|
||
flex-shrink: 0;
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* Tag Pills - Inline Layout */
|
||
.cpwn-tag-pill-list-inline {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px;
|
||
padding: 8px;
|
||
background: var(--background-secondary);
|
||
border-radius: 4px;
|
||
min-height: 44px;
|
||
max-height: 90px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.cpwn-tag-pill {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
padding: 4px 8px;
|
||
background: var(--interactive-accent);
|
||
color: var(--text-on-accent);
|
||
border-radius: 12px;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
transition: all 0.2s;
|
||
height: fit-content;
|
||
}
|
||
|
||
.cpwn-tag-pill:hover {
|
||
opacity: 0.9;
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.cpwn-tag-pill-text {
|
||
line-height: 1;
|
||
}
|
||
|
||
.cpwn-tag-pill-remove {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 14px;
|
||
height: 14px;
|
||
cursor: pointer;
|
||
border-radius: 50%;
|
||
transition: background-color 0.2s;
|
||
}
|
||
|
||
.cpwn-tag-pill-remove:hover {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.cpwn-tag-pill-remove .svg-icon {
|
||
width: 10px;
|
||
height: 10px;
|
||
color: currentColor;
|
||
}
|
||
|
||
.cpwn-tag-empty-state {
|
||
width: 100%;
|
||
text-align: center;
|
||
color: var(--text-muted);
|
||
font-size: 11px;
|
||
font-style: italic;
|
||
padding: 8px;
|
||
}
|
||
|
||
/* Frontmatter Fields */
|
||
.cpwn-frontmatter-fields {
|
||
margin-top: 6px;
|
||
margin-left: 24px;
|
||
}
|
||
|
||
.cpwn-frontmatter-input {
|
||
font-family: var(--font-monospace);
|
||
font-size: 11px;
|
||
}
|
||
|
||
.cpwn-setting-help {
|
||
margin: 10px 0 16px;
|
||
padding: 12px 14px;
|
||
border: 1px solid var(--background-modifier-border);
|
||
border-radius: 6px;
|
||
background: var(--background-secondary);
|
||
color: var(--text-normal);
|
||
font-size: 13px;
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.cpwn-setting-help h3 {
|
||
margin: 0 0 8px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.cpwn-setting-help p {
|
||
margin: 8px 0;
|
||
}
|
||
|
||
.cpwn-setting-help ol {
|
||
margin: 8px 0;
|
||
padding-left: 22px;
|
||
}
|