mirror of
https://github.com/johannesjo/super-productivity.git
synced 2026-08-01 20:12:11 +00:00
refactor: simplify css variables
This commit is contained in:
Johannes Millan
parent
b56d4e21b1
commit
5a399300e5
92 changed files with 510 additions and 528 deletions
|
|
@ -13,8 +13,8 @@
|
|||
margin: 0;
|
||||
padding: 20px;
|
||||
/* Use injected CSS variables for theming */
|
||||
background: var(--theme-bg, transparent);
|
||||
color: var(--theme-text-color, #ccc);
|
||||
background: var(--bg, transparent);
|
||||
color: var(--text-color, #ccc);
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
|
||||
.test-section {
|
||||
margin-bottom: 20px;
|
||||
border-left: 2px solid var(--theme-divider-color, #666);
|
||||
border-left: 2px solid var(--divider-color, #666);
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -46,16 +46,16 @@
|
|||
|
||||
button {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--theme-divider-color, #666);
|
||||
background: var(--theme-card-bg, transparent);
|
||||
color: var(--theme-text-color, #ccc);
|
||||
border: 1px solid var(--divider-color, #666);
|
||||
background: var(--card-bg, transparent);
|
||||
color: var(--text-color, #ccc);
|
||||
font-size: 12px;
|
||||
font-family: monospace;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: var(--theme-select-hover-bg, rgba(255, 255, 255, 0.1));
|
||||
background: var(--select-hover-bg, rgba(255, 255, 255, 0.1));
|
||||
border-color: var(--c-primary, #999);
|
||||
}
|
||||
|
||||
|
|
@ -72,14 +72,14 @@
|
|||
}
|
||||
|
||||
.console {
|
||||
background: var(--theme-card-bg, rgba(0, 0, 0, 0.3));
|
||||
color: var(--theme-text-color, #ccc);
|
||||
background: var(--card-bg, rgba(0, 0, 0, 0.3));
|
||||
color: var(--text-color, #ccc);
|
||||
padding: 10px;
|
||||
font-size: 11px;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
margin-top: 20px;
|
||||
border: 1px solid var(--theme-divider-color, #333);
|
||||
border: 1px solid var(--divider-color, #333);
|
||||
}
|
||||
|
||||
.console-entry {
|
||||
|
|
@ -95,13 +95,13 @@
|
|||
}
|
||||
|
||||
.console-entry.info {
|
||||
color: var(--theme-text-color-muted, #999);
|
||||
color: var(--text-color-muted, #999);
|
||||
}
|
||||
|
||||
.api-info {
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid var(--theme-divider-color, #333);
|
||||
border-bottom: 1px solid var(--divider-color, #333);
|
||||
}
|
||||
|
||||
.api-list {
|
||||
|
|
@ -113,9 +113,9 @@
|
|||
|
||||
.api-item {
|
||||
padding: 4px 8px;
|
||||
border: 1px solid var(--theme-divider-color, #444);
|
||||
border: 1px solid var(--divider-color, #444);
|
||||
font-size: 11px;
|
||||
color: var(--theme-text-color-muted, #999);
|
||||
color: var(--text-color-muted, #999);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -526,47 +526,47 @@
|
|||
<div style="padding: 20px; font-family: monospace;">
|
||||
<h3 style="margin: 0 0 15px 0;">Theme Variables</h3>
|
||||
<table style="width: 100%; border-collapse: collapse;">
|
||||
<tr style="border-bottom: 1px solid var(--theme-divider-color, #333);">
|
||||
<tr style="border-bottom: 1px solid var(--divider-color, #333);">
|
||||
<td style="padding: 8px;">Dark Theme</td>
|
||||
<td style="padding: 8px; text-align: right;">${themeInfo.isDarkTheme ? 'Yes' : 'No'}</td>
|
||||
</tr>
|
||||
<tr style="border-bottom: 1px solid var(--theme-divider-color, #333);">
|
||||
<tr style="border-bottom: 1px solid var(--divider-color, #333);">
|
||||
<td style="padding: 8px;">Primary Color</td>
|
||||
<td style="padding: 8px; text-align: right;">
|
||||
<span style="display: inline-block; width: 20px; height: 20px; background: ${themeInfo.primaryColor}; vertical-align: middle; margin-right: 8px; border: 1px solid var(--theme-divider-color, #333);"></span>
|
||||
<span style="display: inline-block; width: 20px; height: 20px; background: ${themeInfo.primaryColor}; vertical-align: middle; margin-right: 8px; border: 1px solid var(--divider-color, #333);"></span>
|
||||
${themeInfo.primaryColor}
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="border-bottom: 1px solid var(--theme-divider-color, #333);">
|
||||
<tr style="border-bottom: 1px solid var(--divider-color, #333);">
|
||||
<td style="padding: 8px;">Accent Color</td>
|
||||
<td style="padding: 8px; text-align: right;">
|
||||
<span style="display: inline-block; width: 20px; height: 20px; background: ${themeInfo.accentColor}; vertical-align: middle; margin-right: 8px; border: 1px solid var(--theme-divider-color, #333);"></span>
|
||||
<span style="display: inline-block; width: 20px; height: 20px; background: ${themeInfo.accentColor}; vertical-align: middle; margin-right: 8px; border: 1px solid var(--divider-color, #333);"></span>
|
||||
${themeInfo.accentColor}
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="border-bottom: 1px solid var(--theme-divider-color, #333);">
|
||||
<tr style="border-bottom: 1px solid var(--divider-color, #333);">
|
||||
<td style="padding: 8px;">Warn Color</td>
|
||||
<td style="padding: 8px; text-align: right;">
|
||||
<span style="display: inline-block; width: 20px; height: 20px; background: ${themeInfo.warnColor}; vertical-align: middle; margin-right: 8px; border: 1px solid var(--theme-divider-color, #333);"></span>
|
||||
<span style="display: inline-block; width: 20px; height: 20px; background: ${themeInfo.warnColor}; vertical-align: middle; margin-right: 8px; border: 1px solid var(--divider-color, #333);"></span>
|
||||
${themeInfo.warnColor}
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="border-bottom: 1px solid var(--theme-divider-color, #333);">
|
||||
<tr style="border-bottom: 1px solid var(--divider-color, #333);">
|
||||
<td style="padding: 8px;">Background</td>
|
||||
<td style="padding: 8px; text-align: right;">
|
||||
<span style="display: inline-block; width: 20px; height: 20px; background: ${themeInfo.backgroundColor}; vertical-align: middle; margin-right: 8px; border: 1px solid var(--theme-divider-color, #333);"></span>
|
||||
<span style="display: inline-block; width: 20px; height: 20px; background: ${themeInfo.backgroundColor}; vertical-align: middle; margin-right: 8px; border: 1px solid var(--divider-color, #333);"></span>
|
||||
${themeInfo.backgroundColor}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding: 8px;">Text Color</td>
|
||||
<td style="padding: 8px; text-align: right;">
|
||||
<span style="display: inline-block; width: 20px; height: 20px; background: ${themeInfo.textColor}; vertical-align: middle; margin-right: 8px; border: 1px solid var(--theme-divider-color, #333);"></span>
|
||||
<span style="display: inline-block; width: 20px; height: 20px; background: ${themeInfo.textColor}; vertical-align: middle; margin-right: 8px; border: 1px solid var(--divider-color, #333);"></span>
|
||||
${themeInfo.textColor}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p style="margin-top: 15px; font-size: 12px; color: var(--theme-text-color-muted, #999);">
|
||||
<p style="margin-top: 15px; font-size: 12px; color: var(--text-color-muted, #999);">
|
||||
Plugins automatically receive all CSS variables from the host application, allowing seamless theme integration.
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
/*
|
||||
/*
|
||||
* Procrastination Buster Plugin Styles
|
||||
* Simplified structure following KISS principles
|
||||
*/
|
||||
|
|
@ -11,7 +11,7 @@ body {
|
|||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: transparent;
|
||||
color: var(--theme-text-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.app {
|
||||
|
|
@ -23,12 +23,12 @@ body {
|
|||
|
||||
/* Common card styles */
|
||||
.card {
|
||||
background: var(--theme-card-bg);
|
||||
background: var(--card-bg);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
border: 2px solid var(--theme-extra-border-color);
|
||||
border: 2px solid var(--extra-border-color);
|
||||
}
|
||||
|
||||
.card-clickable:hover {
|
||||
|
|
@ -41,7 +41,7 @@ body {
|
|||
|
||||
/* Common text styles */
|
||||
.text-muted {
|
||||
color: var(--theme-text-color-muted);
|
||||
color: var(--text-color-muted);
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
|
|
@ -195,8 +195,8 @@ body {
|
|||
margin-top: 1rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: transparent;
|
||||
border: 1px solid var(--theme-extra-border-color);
|
||||
color: var(--theme-text-color-muted);
|
||||
border: 1px solid var(--extra-border-color);
|
||||
color: var(--text-color-muted);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
|
@ -247,8 +247,8 @@ body {
|
|||
|
||||
.graph-item {
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--theme-card-bg);
|
||||
border: 1px solid var(--theme-extra-border-color);
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--extra-border-color);
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
|
|
@ -256,7 +256,7 @@ body {
|
|||
|
||||
.sync-icon {
|
||||
font-size: 1.2rem;
|
||||
color: var(--theme-text-color-muted);
|
||||
color: var(--text-color-muted);
|
||||
}
|
||||
|
||||
/* Action buttons */
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@
|
|||
|
||||
/* Light mode (default) */
|
||||
:root {
|
||||
--text-color: var(--theme-text-color);
|
||||
--border-color: var(--theme-separator-color);
|
||||
--text-color: var(--text-color);
|
||||
--border-color: var(--separator-color);
|
||||
--primary-color: var(--c-primary);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
transition: var(--transition-enter);
|
||||
border-bottom: 1px solid transparent;
|
||||
|
||||
border-color: var(--theme-extra-border-color);
|
||||
border-color: var(--extra-border-color);
|
||||
|
||||
&.isNotScrolled {
|
||||
border-color: transparent !important;
|
||||
|
|
@ -95,7 +95,7 @@ mat-sidenav-container {
|
|||
mat-sidenav ::ng-deep .mat-drawer-inner-container {
|
||||
@include scrollYImportant();
|
||||
|
||||
background: var(--theme-sidebar-bg);
|
||||
background: var(--sidebar-bg);
|
||||
}
|
||||
|
||||
mat-sidenav {
|
||||
|
|
|
|||
|
|
@ -28,6 +28,6 @@
|
|||
border-top-right-radius: var(--card-border-radius);
|
||||
box-shadow: var(--whiteframe-shadow-1dp);
|
||||
|
||||
background: var(--theme-bg-lighter);
|
||||
color: var(--theme-text-color-less-intense);
|
||||
background: var(--bg-lighter);
|
||||
color: var(--text-color-less-intense);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -76,8 +76,8 @@ import { KeyboardConfig } from '../../../features/config/keyboard-config.model';
|
|||
|
||||
&::after {
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px -2px 3px 0px var(--theme-separator-alpha);
|
||||
background: var(--theme-sidebar-bg);
|
||||
box-shadow: 0px -2px 3px 0px var(--separator-alpha);
|
||||
background: var(--sidebar-bg);
|
||||
content: '';
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -194,8 +194,8 @@ button.isActive2 {
|
|||
pointer-events: none;
|
||||
bottom: calc(var(--s) * -0.25);
|
||||
|
||||
background: var(--theme-bg-lighter);
|
||||
color: var(--theme-text-color-most-intense);
|
||||
background: var(--bg-lighter);
|
||||
color: var(--text-color-most-intense);
|
||||
}
|
||||
|
||||
.pomodoro-controls {
|
||||
|
|
@ -264,7 +264,7 @@ button.isActive2 {
|
|||
display: none;
|
||||
}
|
||||
|
||||
background: var(--theme-bg-lighter);
|
||||
background: var(--bg-lighter);
|
||||
|
||||
.title {
|
||||
max-width: 250px;
|
||||
|
|
@ -344,8 +344,8 @@ button.isActive2 {
|
|||
|
||||
&::after {
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px -2px 3px 0px var(--theme-separator-alpha);
|
||||
background: var(--theme-sidebar-bg);
|
||||
box-shadow: 0px -2px 3px 0px var(--separator-alpha);
|
||||
background: var(--sidebar-bg);
|
||||
content: '';
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
|
|
@ -441,8 +441,8 @@ button.isActive2 {
|
|||
}
|
||||
|
||||
@include darkTheme() {
|
||||
background: var(--theme-bg-lighter);
|
||||
color: var(--theme-text-color);
|
||||
background: var(--bg-lighter);
|
||||
color: var(--text-color);
|
||||
|
||||
&:hover {
|
||||
background: var(--dark8);
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
|
||||
// Active button styles
|
||||
button.active {
|
||||
background-color: var(--theme-sidebar-bg);
|
||||
background-color: var(--sidebar-bg);
|
||||
|
||||
&.isCustomized {
|
||||
background-color: var(--c-accent);
|
||||
|
|
|
|||
|
|
@ -209,8 +209,8 @@ import { Subscription } from 'rxjs';
|
|||
z-index: 4;
|
||||
pointer-events: none;
|
||||
bottom: calc(var(--s) * -0.25);
|
||||
background: var(--theme-bg-lighter);
|
||||
color: var(--theme-text-color-most-intense);
|
||||
background: var(--bg-lighter);
|
||||
color: var(--text-color-most-intense);
|
||||
}
|
||||
|
||||
.pomodoro-controls {
|
||||
|
|
@ -273,7 +273,7 @@ import { Subscription } from 'rxjs';
|
|||
pointer-events: none;
|
||||
transition: var(--transition-standard);
|
||||
display: flex;
|
||||
background: var(--theme-bg-lighter);
|
||||
background: var(--bg-lighter);
|
||||
|
||||
@media (max-width: 599px) {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -17,15 +17,15 @@
|
|||
font-size: 10px;
|
||||
min-width: 18px;
|
||||
padding: 1px 4px 0;
|
||||
border: 1px solid var(--theme-extra-border-color);
|
||||
border: 1px solid var(--extra-border-color);
|
||||
border-radius: 12px;
|
||||
margin-right: -49px;
|
||||
|
||||
// avoid affecting drag handle
|
||||
pointer-events: none;
|
||||
|
||||
border-color: var(--theme-extra-border-color);
|
||||
background: var(--theme-bg-lighter);
|
||||
border-color: var(--extra-border-color);
|
||||
background: var(--bg-lighter);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -101,7 +101,7 @@ section {
|
|||
position: relative;
|
||||
|
||||
&:after {
|
||||
border-bottom: 1px solid var(--theme-divider-color);
|
||||
border-bottom: 1px solid var(--divider-color);
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: var(--s2);
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@
|
|||
}
|
||||
|
||||
.content-wrapper {
|
||||
border: 1px 0 solid var(--theme-divider-color);
|
||||
background-color: var(--theme-banner-bg);
|
||||
border: 1px 0 solid var(--divider-color);
|
||||
background-color: var(--banner-bg);
|
||||
}
|
||||
|
||||
.inner-content-wrapper {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
:host {
|
||||
//border: 1px solid var(--color-overlay-light-20);
|
||||
border: 1px solid var(--theme-extra-border-color);
|
||||
border: 1px solid var(--extra-border-color);
|
||||
border-radius: 8px;
|
||||
min-height: 200px;
|
||||
min-width: 280px;
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
min-height: 300px;
|
||||
}
|
||||
|
||||
border-color: var(--theme-extra-border-color);
|
||||
border-color: var(--extra-border-color);
|
||||
|
||||
planner-task {
|
||||
margin-bottom: 8px;
|
||||
|
|
@ -78,7 +78,7 @@ header {
|
|||
border-radius: 8px;
|
||||
min-height: 100px;
|
||||
flex-grow: 1;
|
||||
//border-color: var(--theme-extra-border-color);
|
||||
//border-color: var(--extra-border-color);
|
||||
}
|
||||
|
||||
.empty {
|
||||
|
|
@ -117,15 +117,15 @@ header {
|
|||
line-height: 1;
|
||||
text-align: center;
|
||||
padding: 1px 2px 0;
|
||||
border: 1px solid var(--theme-extra-border-color);
|
||||
border: 1px solid var(--extra-border-color);
|
||||
border-radius: var(--card-border-radius);
|
||||
white-space: nowrap;
|
||||
|
||||
// avoid affecting drag handle
|
||||
pointer-events: none;
|
||||
|
||||
border-color: var(--theme-extra-border-color);
|
||||
background: var(--theme-bg-lighter);
|
||||
border-color: var(--extra-border-color);
|
||||
background: var(--bg-lighter);
|
||||
|
||||
::ng-deep span {
|
||||
font-size: 10px;
|
||||
|
|
|
|||
|
|
@ -9,14 +9,14 @@
|
|||
.row {
|
||||
display: flex;
|
||||
margin-bottom: var(--s3);
|
||||
border: 1px solid var(--theme-extra-border-color);
|
||||
border: 1px solid var(--extra-border-color);
|
||||
padding: 8px;
|
||||
box-shadow: var(--whiteframe-shadow-2dp);
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
|
||||
background: var(--theme-bg-slightly-lighter);
|
||||
border-color: var(--theme-extra-border-color);
|
||||
background: var(--bg-slightly-lighter);
|
||||
border-color: var(--extra-border-color);
|
||||
|
||||
@include mq(component) {
|
||||
margin-bottom: 0;
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
flex-wrap: nowrap;
|
||||
padding-top: var(--s2);
|
||||
padding-bottom: var(--s);
|
||||
border-top: 1px solid var(--theme-extra-border-color);
|
||||
border-top: 1px solid var(--extra-border-color);
|
||||
|
||||
&:first-of-type {
|
||||
border-top: none !important;
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
padding-top: var(--s3);
|
||||
margin: var(--s) calc(var(--s) * -3) var(--s);
|
||||
font-size: 22px;
|
||||
border-top: 1px solid var(--theme-extra-border-color);
|
||||
border-top: 1px solid var(--extra-border-color);
|
||||
}
|
||||
|
||||
.simple-counter {
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@
|
|||
margin-top: 1px;
|
||||
font-size: 12px;
|
||||
|
||||
color: var(--theme-text-color-most-intense);
|
||||
color: var(--text-color-most-intense);
|
||||
}
|
||||
|
||||
::ng-deep .issue-provider-drag-preview {
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@
|
|||
|
||||
background: var(--task-c-bg);
|
||||
|
||||
color: var(--theme-text-color);
|
||||
border-color: var(--theme-extra-border-color);
|
||||
color: var(--text-color);
|
||||
border-color: var(--extra-border-color);
|
||||
|
||||
&.isDone {
|
||||
opacity: 0.7;
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ h4 {
|
|||
margin-top: 1px;
|
||||
font-size: 12px;
|
||||
|
||||
color: var(--theme-text-color-most-intense);
|
||||
color: var(--text-color-most-intense);
|
||||
}
|
||||
|
||||
.provider-items {
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
.tpl hr {
|
||||
margin-bottom: 32px;
|
||||
|
||||
border-color: var(--theme-separator-color);
|
||||
border-color: var(--separator-color);
|
||||
}
|
||||
|
||||
.sub-section-heading {
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
display: flex;
|
||||
padding: 12px 0;
|
||||
border-radius: 4px;
|
||||
border-bottom: 1px dashed var(--theme-extra-border-color);
|
||||
border-bottom: 1px dashed var(--extra-border-color);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
|
|
|
|||
|
|
@ -14,9 +14,9 @@
|
|||
display: flex;
|
||||
margin-bottom: var(--s);
|
||||
padding-top: var(--s);
|
||||
border-top: 1px dashed var(--theme-extra-border-color);
|
||||
border-top: 1px dashed var(--extra-border-color);
|
||||
|
||||
border-color: var(--theme-extra-border-color);
|
||||
border-color: var(--extra-border-color);
|
||||
|
||||
.author-avatar {
|
||||
margin-right: var(--s);
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
|
||||
pre {
|
||||
overflow: auto;
|
||||
border: 1px dashed var(--theme-extra-border-color);
|
||||
border: 1px dashed var(--extra-border-color);
|
||||
padding: var(--s);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,9 +23,9 @@
|
|||
display: flex;
|
||||
margin-bottom: var(--s);
|
||||
padding-top: var(--s);
|
||||
border-top: 1px dashed var(--theme-extra-border-color);
|
||||
border-top: 1px dashed var(--extra-border-color);
|
||||
|
||||
border-color: var(--theme-extra-border-color);
|
||||
border-color: var(--extra-border-color);
|
||||
|
||||
&.isLastComment {
|
||||
border-top: 0 !important;
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
|
||||
pre {
|
||||
overflow: auto;
|
||||
border: 1px dashed var(--theme-extra-border-color);
|
||||
border: 1px dashed var(--extra-border-color);
|
||||
padding: var(--s);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,9 +16,9 @@
|
|||
display: flex;
|
||||
margin-bottom: var(--s);
|
||||
padding-top: var(--s);
|
||||
border-top: 1px dashed var(--theme-extra-border-color);
|
||||
border-top: 1px dashed var(--extra-border-color);
|
||||
|
||||
border-color: var(--theme-extra-border-color);
|
||||
border-color: var(--extra-border-color);
|
||||
|
||||
.author-avatar {
|
||||
margin-right: var(--s);
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
|
||||
pre {
|
||||
overflow: auto;
|
||||
border: 1px dashed var(--theme-extra-border-color);
|
||||
border: 1px dashed var(--extra-border-color);
|
||||
padding: var(--s);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,9 +25,9 @@
|
|||
display: flex;
|
||||
margin-bottom: var(--s);
|
||||
padding-top: var(--s);
|
||||
border-top: 1px dashed var(--theme-extra-border-color);
|
||||
border-top: 1px dashed var(--extra-border-color);
|
||||
|
||||
border-color: var(--theme-extra-border-color);
|
||||
border-color: var(--extra-border-color);
|
||||
|
||||
.author-avatar {
|
||||
margin-right: var(--s);
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
|
||||
pre {
|
||||
overflow: auto;
|
||||
border: 1px dashed var(--theme-extra-border-color);
|
||||
border: 1px dashed var(--extra-border-color);
|
||||
padding: var(--s);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
padding: var(--s2);
|
||||
border-radius: var(--card-border-radius);
|
||||
|
||||
background: var(--theme-bg-lighter);
|
||||
background: var(--bg-lighter);
|
||||
}
|
||||
|
||||
mat-form-field {
|
||||
|
|
|
|||
|
|
@ -38,8 +38,8 @@
|
|||
background: transparent;
|
||||
|
||||
border: 1px solid;
|
||||
color: var(--theme-improvement-text);
|
||||
border-color: var(--theme-improvement-border);
|
||||
color: var(--improvement-text);
|
||||
border-color: var(--improvement-border);
|
||||
|
||||
&:active {
|
||||
box-shadow: var(--whiteframe-shadow-2dp);
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
z-index: 1;
|
||||
transform-origin: center center;
|
||||
|
||||
color: var(--theme-improvement-button-text);
|
||||
color: var(--improvement-button-text);
|
||||
|
||||
&.dismiss {
|
||||
transform: translateX(-11px);
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@
|
|||
|
||||
background: var(--standard-note-bg);
|
||||
color: var(--standard-note-fg);
|
||||
border-color: var(--theme-extra-border-color);
|
||||
border-color: var(--extra-border-color);
|
||||
}
|
||||
|
||||
.markdown-unparsed,
|
||||
|
|
@ -127,7 +127,7 @@
|
|||
align-items: center;
|
||||
transition: var(--transition-standard);
|
||||
cursor: move;
|
||||
border-top: 1px dashed var(--theme-extra-border-color);
|
||||
border-top: 1px dashed var(--extra-border-color);
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
.form-ctrl-wrapper {
|
||||
margin: 0 16px;
|
||||
margin-top: 16px;
|
||||
//border-top: 1px solid var(--theme-separator-color);
|
||||
//border-top: 1px solid var(--separator-color);
|
||||
}
|
||||
|
||||
.press-enter-msg {
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
white-space: nowrap;
|
||||
transform: translateX(-50%);
|
||||
|
||||
background: var(--theme-bg-lighter);
|
||||
background: var(--bg-lighter);
|
||||
}
|
||||
|
||||
:host ::ng-deep mat-month-view .mat-calendar-body-today {
|
||||
|
|
@ -89,14 +89,14 @@
|
|||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: var(--theme-text-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.quick-access {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
border-bottom: 1px solid var(--theme-extra-border-color);
|
||||
border-bottom: 1px solid var(--extra-border-color);
|
||||
height: 48px;
|
||||
|
||||
> button {
|
||||
|
|
@ -110,6 +110,6 @@
|
|||
}
|
||||
|
||||
button + button {
|
||||
border-left: 1px solid var(--theme-extra-border-color);
|
||||
border-left: 1px solid var(--extra-border-color);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
flex-direction: row;
|
||||
padding-top: var(--s-quarter);
|
||||
padding-bottom: var(--s-quarter);
|
||||
border: 1px solid var(--theme-separator-color);
|
||||
border: 1px solid var(--separator-color);
|
||||
border-radius: var(--task-border-radius);
|
||||
opacity: 0.9;
|
||||
min-height: var(--planner-item-height);
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
border-color: var(--theme-extra-border-color);
|
||||
border-color: var(--extra-border-color);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--c-accent);
|
||||
|
|
|
|||
|
|
@ -12,13 +12,13 @@
|
|||
flex-direction: row;
|
||||
padding-top: var(--s-quarter);
|
||||
padding-bottom: var(--s-quarter);
|
||||
border: 1px solid var(--theme-separator-color);
|
||||
border: 1px solid var(--separator-color);
|
||||
border-radius: var(--task-border-radius);
|
||||
opacity: 0.9;
|
||||
cursor: pointer;
|
||||
min-height: var(--planner-item-height);
|
||||
|
||||
border-color: var(--theme-extra-border-color);
|
||||
border-color: var(--extra-border-color);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--c-primary);
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
align-items: stretch;
|
||||
@include grabCursor();
|
||||
|
||||
color: var(--theme-text-color);
|
||||
color: var(--text-color);
|
||||
background: var(--task-c-bg);
|
||||
|
||||
&.isDone {
|
||||
|
|
@ -228,12 +228,12 @@
|
|||
line-height: 1;
|
||||
text-align: center;
|
||||
padding: 1px 2px 0;
|
||||
border: 1px solid var(--theme-extra-border-color);
|
||||
border: 1px solid var(--extra-border-color);
|
||||
border-radius: var(--card-border-radius);
|
||||
|
||||
// avoid affecting drag handle
|
||||
pointer-events: none;
|
||||
background: var(--theme-bg-lighter);
|
||||
background: var(--bg-lighter);
|
||||
}
|
||||
|
||||
.original-time-remaining {
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@
|
|||
//border-top: 1px solid;
|
||||
//border-bottom: 1px solid;
|
||||
|
||||
//border-color: var(--theme-extra-border-color);
|
||||
//background: var(--theme-bg-lighter);
|
||||
//border-color: var(--extra-border-color);
|
||||
//background: var(--bg-lighter);
|
||||
}
|
||||
|
||||
.start-date {
|
||||
|
|
|
|||
|
|
@ -15,9 +15,9 @@
|
|||
|
||||
h2 {
|
||||
margin: var(--s3) 0 var(--s);
|
||||
border-bottom: 1px solid var(--theme-extra-border-color);
|
||||
border-bottom: 1px solid var(--extra-border-color);
|
||||
|
||||
border-color: var(--theme-extra-border-color);
|
||||
border-color: var(--extra-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@
|
|||
// NOTE: to be consistent with scheduled event
|
||||
margin-bottom: 6px;
|
||||
|
||||
color: var(--theme-text-color);
|
||||
background: var(--theme-bg-lightest);
|
||||
color: var(--text-color);
|
||||
background: var(--bg-lightest);
|
||||
|
||||
&.isEditMode {
|
||||
pointer-events: auto;
|
||||
|
|
|
|||
|
|
@ -17,13 +17,13 @@
|
|||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: var(--margin-bottom);
|
||||
border: 1px solid var(--theme-separator-color);
|
||||
border: 1px solid var(--separator-color);
|
||||
//box-shadow: var(--whiteframe-shadow-1dp);
|
||||
background: var(--theme-card-bg);
|
||||
color: var(--theme-text-color);
|
||||
background: var(--card-bg);
|
||||
color: var(--text-color);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border-left: 3px solid var(--project-color, var(--theme-separator-color));
|
||||
border-left: 3px solid var(--project-color, var(--separator-color));
|
||||
user-select: none;
|
||||
// has to be for after elements
|
||||
overflow: visible !important;
|
||||
|
|
@ -133,8 +133,8 @@
|
|||
border-style: dashed;
|
||||
border-left-style: solid;
|
||||
|
||||
//border-color: var(--theme-separator-color);
|
||||
background: var(--theme-bg-lighter);
|
||||
//border-color: var(--separator-color);
|
||||
background: var(--bg-lighter);
|
||||
|
||||
> * {
|
||||
opacity: 0.7;
|
||||
|
|
@ -145,7 +145,7 @@
|
|||
:host.CalendarEvent {
|
||||
border-left-width: 1px;
|
||||
|
||||
border-left-color: var(--theme-extra-border-color);
|
||||
border-left-color: var(--extra-border-color);
|
||||
}
|
||||
|
||||
:host-context(.is-not-dragging) :host.CalendarEvent:hover {
|
||||
|
|
@ -209,7 +209,7 @@
|
|||
}
|
||||
|
||||
.time-badge {
|
||||
color: var(--theme-text-color);
|
||||
color: var(--text-color);
|
||||
border-color: var(--c-primary);
|
||||
//color: var(--c-primary);
|
||||
}
|
||||
|
|
@ -231,7 +231,7 @@
|
|||
height: 13px;
|
||||
text-align: center;
|
||||
padding: 1px;
|
||||
border: 1px solid var(--theme-extra-border-color);
|
||||
border: 1px solid var(--extra-border-color);
|
||||
border-radius: var(--card-border-radius);
|
||||
|
||||
@include mq(xs, max) {
|
||||
|
|
@ -239,9 +239,9 @@
|
|||
height: 11px;
|
||||
}
|
||||
|
||||
color: var(--theme-text-color);
|
||||
border-color: var(--theme-extra-border-color);
|
||||
background: var(--theme-bg-lighter);
|
||||
color: var(--text-color);
|
||||
border-color: var(--extra-border-color);
|
||||
background: var(--bg-lighter);
|
||||
|
||||
:host.very-short-event & {
|
||||
//bottom: 4px
|
||||
|
|
@ -319,13 +319,13 @@
|
|||
min-width: 14px;
|
||||
width: auto;
|
||||
font-weight: 900;
|
||||
border: 1px solid var(--theme-text-color-muted);
|
||||
border: 1px solid var(--text-color-muted);
|
||||
border-top-width: 3px;
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
|
||||
color: var(--theme-text-color-muted);
|
||||
border-color: var(--theme-text-color-muted);
|
||||
color: var(--text-color-muted);
|
||||
border-color: var(--text-color-muted);
|
||||
|
||||
@include mq(xs, max) {
|
||||
border-radius: 1px;
|
||||
|
|
@ -396,7 +396,7 @@
|
|||
:host.SplitTaskPlannedForDay,
|
||||
:host.Task,
|
||||
:host.SplitTask {
|
||||
background: var(--theme-bg-lightest);
|
||||
background: var(--bg-lightest);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
grid-template-rows: auto repeat(var(--nr-of-weeks), 1fr);
|
||||
gap: 1px;
|
||||
height: calc(100vh - 120px);
|
||||
background: var(--theme-grid-color);
|
||||
background: var(--grid-color);
|
||||
|
||||
.cdk-drag-dragging {
|
||||
z-index: 1000;
|
||||
|
|
@ -23,9 +23,9 @@
|
|||
text-align: center;
|
||||
font-weight: 600;
|
||||
padding: 6px;
|
||||
background: var(--theme-bg);
|
||||
color: var(--theme-text-color);
|
||||
border: 1px solid var(--theme-grid-color);
|
||||
background: var(--bg);
|
||||
color: var(--text-color);
|
||||
border: 1px solid var(--grid-color);
|
||||
grid-row: 1;
|
||||
|
||||
@include mq(xs, max) {
|
||||
|
|
@ -57,8 +57,8 @@
|
|||
}
|
||||
|
||||
.month-day-cell {
|
||||
background: var(--theme-bg);
|
||||
border: 1px solid var(--theme-grid-color);
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--grid-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 80px;
|
||||
|
|
@ -105,7 +105,7 @@
|
|||
|
||||
&.other-month {
|
||||
opacity: 0.4;
|
||||
background: var(--theme-bg-lighter);
|
||||
background: var(--bg-lighter);
|
||||
}
|
||||
|
||||
&.today {
|
||||
|
|
@ -129,7 +129,7 @@
|
|||
|
||||
// Hover effect
|
||||
&:hover {
|
||||
background: var(--theme-bg-lighter);
|
||||
background: var(--bg-lighter);
|
||||
}
|
||||
|
||||
// Drag over effect
|
||||
|
|
@ -144,7 +144,7 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--theme-grid-color);
|
||||
border-bottom: 1px solid var(--grid-color);
|
||||
|
||||
@include mq(xs, max) {
|
||||
padding: 4px;
|
||||
|
|
|
|||
|
|
@ -37,14 +37,14 @@
|
|||
align-self: end;
|
||||
font-size: 80%;
|
||||
position: relative;
|
||||
color: var(--theme-text-color-muted);
|
||||
color: var(--text-color-muted);
|
||||
padding-right: 6px;
|
||||
line-height: 1.2;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.col {
|
||||
border-left: 1px solid var(--theme-grid-color);
|
||||
border-left: 1px solid var(--grid-color);
|
||||
grid-row: 1 / span var(--schedule-total-rows);
|
||||
grid-column: span 1;
|
||||
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
|
||||
.row {
|
||||
grid-column: 2 / -1;
|
||||
border-top: 1px solid var(--theme-grid-color);
|
||||
border-top: 1px solid var(--grid-color);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
|
@ -114,7 +114,7 @@
|
|||
border: 2px solid var(--c-warn);
|
||||
box-shadow: var(--whiteframe-shadow-6dp);
|
||||
border-radius: 4px;
|
||||
background: var(--theme-bg);
|
||||
background: var(--bg);
|
||||
|
||||
@media (min-height: 1000px) {
|
||||
max-height: 200px;
|
||||
|
|
@ -149,15 +149,15 @@
|
|||
.work-end,
|
||||
.work-start {
|
||||
scroll-margin-top: 80px;
|
||||
border-top: 2px dashed var(--theme-separator-color);
|
||||
border-top: 2px dashed var(--separator-color);
|
||||
min-width: 100px;
|
||||
grid-column: 2 / -1;
|
||||
position: relative;
|
||||
color: var(--theme-text-color);
|
||||
color: var(--text-color);
|
||||
|
||||
&:hover {
|
||||
z-index: 22;
|
||||
border-color: var(--theme-text-color-most-intense);
|
||||
border-color: var(--text-color-most-intense);
|
||||
}
|
||||
|
||||
> div {
|
||||
|
|
@ -169,7 +169,7 @@
|
|||
line-height: 1;
|
||||
padding: 2px 8px;
|
||||
margin-bottom: -6px;
|
||||
background: var(--theme-bg);
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.is-dragging & {
|
||||
|
|
|
|||
|
|
@ -13,19 +13,19 @@ header {
|
|||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-top: 1px solid var(--theme-extra-border-color);
|
||||
border-bottom: 1px solid var(--theme-extra-border-color);
|
||||
border-top: 1px solid var(--extra-border-color);
|
||||
border-bottom: 1px solid var(--extra-border-color);
|
||||
box-shadow: var(--whiteframe-shadow-1dp);
|
||||
z-index: 10;
|
||||
color: var(--theme-text-color);
|
||||
background: var(--theme-bg-lighter);
|
||||
color: var(--text-color);
|
||||
background: var(--bg-lighter);
|
||||
}
|
||||
|
||||
.main-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-bottom: 1px solid var(--theme-extra-border-color);
|
||||
border-bottom: 1px solid var(--extra-border-color);
|
||||
}
|
||||
|
||||
.days {
|
||||
|
|
@ -42,7 +42,7 @@ header {
|
|||
.day {
|
||||
line-height: 32px;
|
||||
font-size: 18px;
|
||||
border-left: 1px solid var(--theme-extra-border-color);
|
||||
border-left: 1px solid var(--extra-border-color);
|
||||
|
||||
@include mq(xs, max) {
|
||||
font-size: 14px;
|
||||
|
|
|
|||
|
|
@ -60,8 +60,8 @@
|
|||
pointer-events: none;
|
||||
bottom: calc(-1 * var(--s-quarter));
|
||||
|
||||
background: var(--theme-bg-lighter);
|
||||
color: var(--theme-text-color-most-intense);
|
||||
background: var(--bg-lighter);
|
||||
color: var(--text-color-most-intense);
|
||||
|
||||
.wrapper:hover .stopwatch & {
|
||||
opacity: 0;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
width: 100%;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
color: var(--theme-text-color);
|
||||
color: var(--text-color);
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid transparent;
|
||||
height: 40px;
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
&:hover,
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-bottom-color: var(--theme-extra-border-color);
|
||||
border-bottom-color: var(--extra-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
|
||||
color: var(--theme-text-color-less-intense);
|
||||
color: var(--text-color-less-intense);
|
||||
}
|
||||
|
||||
.tag-title {
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
font-size: 12px;
|
||||
line-height: 1;
|
||||
|
||||
color: var(--theme-text-color-muted);
|
||||
color: var(--text-color-muted);
|
||||
|
||||
//// hide inside add task bar for smaller screens
|
||||
///* TODO(mdc-migration): The following rule targets internal classes of autocomplete that may no longer apply for the MDC version.*/
|
||||
|
|
|
|||
|
|
@ -40,22 +40,22 @@
|
|||
width: 100%;
|
||||
position: relative;
|
||||
border-radius: var(--card-border-radius);
|
||||
background: var(--theme-bg);
|
||||
background: var(--bg);
|
||||
|
||||
// 58 overlay 53 normal
|
||||
background-color: var(--theme-bg-lighter);
|
||||
color: var(--theme-text-color-most-intense);
|
||||
background-color: var(--bg-lighter);
|
||||
color: var(--text-color-most-intense);
|
||||
|
||||
&.isElevated {
|
||||
background-color: var(--theme-bg-lightest);
|
||||
color: var(--theme-text-color-most-intense);
|
||||
background-color: var(--bg-lightest);
|
||||
color: var(--text-color-most-intense);
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
color: var(--theme-text-color-most-intense);
|
||||
color: var(--text-color-most-intense);
|
||||
}
|
||||
|
||||
input {
|
||||
|
|
@ -106,13 +106,13 @@
|
|||
padding: 0 var(--s2);
|
||||
height: var(--short-syntax-bar-height);
|
||||
line-height: var(--short-syntax-bar-height);
|
||||
border-top: 1px dashed var(--theme-extra-border-color);
|
||||
border-top: 1px dashed var(--extra-border-color);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
|
||||
border-color: var(--theme-extra-border-color);
|
||||
color: var(--theme-text-color-muted);
|
||||
border-color: var(--extra-border-color);
|
||||
color: var(--text-color-muted);
|
||||
}
|
||||
|
||||
.info-text {
|
||||
|
|
@ -124,7 +124,7 @@
|
|||
&.add-existing {
|
||||
font-weight: bold;
|
||||
|
||||
color: var(--theme-text-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
> mat-icon {
|
||||
|
|
@ -133,8 +133,8 @@
|
|||
}
|
||||
|
||||
.separator-box {
|
||||
border-right: 1px dashed var(--theme-extra-border-color);
|
||||
border-left: 1px dashed var(--theme-extra-border-color);
|
||||
border-right: 1px dashed var(--extra-border-color);
|
||||
border-left: 1px dashed var(--extra-border-color);
|
||||
|
||||
border-color: var(--theme-extra-border-color);
|
||||
border-color: var(--extra-border-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@
|
|||
max-height: 75vh;
|
||||
min-width: 340px;
|
||||
|
||||
background: var(--theme-bg-lightest) !important;
|
||||
border: 4px solid var(--theme-bg-lightest);
|
||||
background: var(--bg-lightest) !important;
|
||||
border: 4px solid var(--bg-lightest);
|
||||
|
||||
@include mq(xxxs) {
|
||||
min-width: 380px;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
.task {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--theme-extra-border-color);
|
||||
border-bottom: 1px solid var(--extra-border-color);
|
||||
padding: var(--s);
|
||||
padding-left: 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -28,9 +28,9 @@
|
|||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
color: var(--theme-text-color-less-intense);
|
||||
background-color: var(--theme-attachment-bg);
|
||||
border: 1px solid var(--theme-attachment-border);
|
||||
color: var(--text-color-less-intense);
|
||||
background-color: var(--attachment-bg);
|
||||
border: 1px solid var(--attachment-border);
|
||||
|
||||
//.controls,
|
||||
> a:focus + .controls,
|
||||
|
|
@ -125,10 +125,10 @@
|
|||
opacity: 0;
|
||||
border-width: 0;
|
||||
|
||||
background: var(--theme-attachment-control-bg);
|
||||
border-color: var(--theme-attachment-control-border);
|
||||
background: var(--attachment-control-bg);
|
||||
border-color: var(--attachment-control-border);
|
||||
&:hover {
|
||||
background: var(--theme-attachment-control-hover-bg);
|
||||
background: var(--attachment-control-hover-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -210,7 +210,7 @@
|
|||
background: var(--c-warn) !important;
|
||||
|
||||
mat-icon {
|
||||
color: var(--theme-card-bg) !important;
|
||||
color: var(--card-bg) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
.quick-access {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
border-bottom: 1px solid var(--theme-extra-border-color);
|
||||
border-bottom: 1px solid var(--extra-border-color);
|
||||
height: 48px;
|
||||
|
||||
> button {
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
}
|
||||
|
||||
button + button {
|
||||
border-left: 1px solid var(--theme-extra-border-color) !important;
|
||||
border-left: 1px solid var(--extra-border-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
|
||||
.box {
|
||||
@include lightTheme {
|
||||
border-color: var(--theme-extra-border-color);
|
||||
border-color: var(--extra-border-color);
|
||||
bottom: 0;
|
||||
top: -1px;
|
||||
}
|
||||
|
|
@ -83,8 +83,8 @@
|
|||
//border-color: $dark-theme-separator-color;
|
||||
}
|
||||
@include lightTheme {
|
||||
background: var(--theme-card-bg);
|
||||
border-color: var(--theme-extra-border-color);
|
||||
background: var(--card-bg);
|
||||
border-color: var(--extra-border-color);
|
||||
//border-color: $light-theme-separator-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -94,11 +94,11 @@ mat-expansion-panel::ng-deep .mat-expansion-panel-header:not(.mat-expanded),
|
|||
&:hover,
|
||||
&:focus {
|
||||
:host-context(.isNoTouchOnly.isLightTheme) & {
|
||||
background: var(--theme-bg-darker);
|
||||
background: var(--bg-darker);
|
||||
}
|
||||
|
||||
:host-context(.isNoTouchOnly.isDarkTheme) & {
|
||||
background: var(--theme-bg-lightest);
|
||||
background: var(--bg-lightest);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -143,7 +143,7 @@ mat-expansion-panel::ng-deep .mat-expansion-panel-header:not(.mat-expanded),
|
|||
.panel-content-wrapper {
|
||||
margin: 0 var(--s) var(--s);
|
||||
display: block;
|
||||
color: var(--theme-text-color-less-intense);
|
||||
color: var(--text-color-less-intense);
|
||||
&::ng-deep inline-markdown {
|
||||
&.isFocused {
|
||||
border-color: transparent;
|
||||
|
|
@ -156,11 +156,11 @@ mat-expansion-panel::ng-deep .mat-expansion-panel-header:not(.mat-expanded),
|
|||
transition: var(--transition-standard);
|
||||
|
||||
@include lightTheme {
|
||||
background: var(--theme-bg-lightest);
|
||||
background: var(--bg-lightest);
|
||||
//border: 1px solid $light-theme-extra-border-color;
|
||||
}
|
||||
@include darkTheme() {
|
||||
background: var(--theme-bg-lightest);
|
||||
background: var(--bg-lightest);
|
||||
box-shadow: var(--whiteframe-shadow-1dp);
|
||||
}
|
||||
}
|
||||
|
|
@ -209,11 +209,11 @@ mat-expansion-panel::ng-deep .mat-expansion-panel-header:not(.mat-expanded),
|
|||
cursor: default;
|
||||
}
|
||||
|
||||
color: var(--theme-text-color);
|
||||
color: var(--text-color);
|
||||
|
||||
&.--estimate {
|
||||
progress-bar {
|
||||
background: var(--theme-extra-border-color);
|
||||
background: var(--extra-border-color);
|
||||
}
|
||||
|
||||
&:hover progress-bar {
|
||||
|
|
@ -277,7 +277,7 @@ mat-expansion-panel::ng-deep .mat-expansion-panel-header:not(.mat-expanded),
|
|||
// width: 32px;
|
||||
//}
|
||||
|
||||
color: var(--theme-task-detail-value-color);
|
||||
color: var(--task-detail-value-color);
|
||||
|
||||
> * {
|
||||
flex-grow: 1;
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ progress-bar {
|
|||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
|
||||
background: var(--theme-card-bg);
|
||||
background: var(--card-bg);
|
||||
//border-bottom: 1px solid var(--c-primary);
|
||||
|
||||
@include mq(xs) {
|
||||
|
|
@ -58,7 +58,7 @@ progress-bar {
|
|||
padding-bottom: 4px;
|
||||
margin-top: 0;
|
||||
|
||||
color: var(--theme-text-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -90,7 +90,7 @@ progress-bar {
|
|||
padding: var(--s);
|
||||
opacity: 0.5;
|
||||
text-align: center;
|
||||
color: var(--theme-text-color-muted);
|
||||
color: var(--text-color-muted);
|
||||
}
|
||||
|
||||
.drag-over-msg {
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
transform: translate(-50%, 0);
|
||||
width: 90%;
|
||||
|
||||
color: var(--theme-text-color-muted);
|
||||
color: var(--text-color-muted);
|
||||
}
|
||||
|
||||
.expand-tasks-btn {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
.summary-table {
|
||||
width: 100%;
|
||||
|
||||
background: var(--theme-card-bg);
|
||||
background: var(--card-bg);
|
||||
|
||||
tr {
|
||||
height: 36px !important;
|
||||
|
|
@ -14,10 +14,10 @@
|
|||
td {
|
||||
text-align: center;
|
||||
|
||||
color: var(--theme-text-color-muted);
|
||||
color: var(--text-color-muted);
|
||||
|
||||
inline-input {
|
||||
color: var(--theme-text-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
flex-wrap: wrap;
|
||||
border-bottom: 2px solid;
|
||||
|
||||
border-color: var(--theme-extra-border-color);
|
||||
border-color: var(--extra-border-color);
|
||||
|
||||
mat-icon {
|
||||
margin: 0 var(--s-half);
|
||||
|
|
|
|||
|
|
@ -13,13 +13,13 @@
|
|||
|
||||
&:before {
|
||||
content: '';
|
||||
border-left: var(--theme-hover-controls-border);
|
||||
border-left: var(--hover-controls-border);
|
||||
width: 1px;
|
||||
height: 90%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 5%;
|
||||
opacity: var(--theme-hover-controls-border-opacity);
|
||||
opacity: var(--hover-controls-border-opacity);
|
||||
|
||||
:host-context([dir='rtl']) & {
|
||||
right: 0;
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@
|
|||
// NOTE: needs to come first to be overwritten by :host.isCurrent
|
||||
// NOTE: needs to be very light, because we're on a lighter background for the dark theme
|
||||
:host-context(.isDarkTheme) {
|
||||
color: var(--theme-text-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
:host-context(.isDarkTheme).isSelected,
|
||||
:host-context(.isDarkTheme).isCurrent {
|
||||
color: var(--theme-text-color-most-intense);
|
||||
color: var(--text-color-most-intense);
|
||||
}
|
||||
|
||||
:host {
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
display: block;
|
||||
position: relative;
|
||||
|
||||
color: var(--theme-text-color);
|
||||
color: var(--text-color);
|
||||
|
||||
&.isSelected {
|
||||
z-index: var(--z-is-selected-host);
|
||||
|
|
@ -195,7 +195,7 @@
|
|||
|
||||
::ng-deep .box {
|
||||
@include lightTheme {
|
||||
border-color: var(--theme-extra-border-color);
|
||||
border-color: var(--extra-border-color);
|
||||
bottom: 0;
|
||||
top: -1px;
|
||||
}
|
||||
|
|
@ -849,7 +849,7 @@ progress-bar {
|
|||
line-height: 1;
|
||||
text-align: center;
|
||||
padding: 1px 2px 0;
|
||||
border: 1px solid var(--theme-extra-border-color);
|
||||
border: 1px solid var(--extra-border-color);
|
||||
border-radius: var(--card-border-radius);
|
||||
white-space: nowrap;
|
||||
background: #fff;
|
||||
|
|
@ -858,8 +858,8 @@ progress-bar {
|
|||
pointer-events: none;
|
||||
|
||||
@include darkTheme() {
|
||||
border-color: var(--theme-extra-border-color);
|
||||
background: var(--theme-bg-lighter);
|
||||
border-color: var(--extra-border-color);
|
||||
background: var(--bg-lighter);
|
||||
}
|
||||
|
||||
::ng-deep span {
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ h2 {
|
|||
margin-top: var(--s2);
|
||||
//text-align: left;
|
||||
font-size: 16px;
|
||||
//border-bottom: 1px solid var(--theme-extra-border-color);
|
||||
//border-bottom: 1px solid var(--extra-border-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -292,7 +292,7 @@ h2 {
|
|||
color: #333;
|
||||
|
||||
@include darkTheme() {
|
||||
color: var(--theme-text-color-most-intense);
|
||||
color: var(--text-color-most-intense);
|
||||
font-weight: 500;
|
||||
text-shadow:
|
||||
0 0 2px black,
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
bottom: 0;
|
||||
z-index: -1;
|
||||
|
||||
background: var(--theme-select-hover-bg);
|
||||
background: var(--select-hover-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -126,7 +126,7 @@
|
|||
}
|
||||
|
||||
tr:first-of-type td {
|
||||
border: 1px solid var(--theme-extra-border-color);
|
||||
border: 1px solid var(--extra-border-color);
|
||||
}
|
||||
|
||||
th {
|
||||
|
|
@ -168,7 +168,7 @@
|
|||
top: 0;
|
||||
border: 1px solid;
|
||||
|
||||
border-color: var(--theme-options-border-color);
|
||||
border-color: var(--options-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
}
|
||||
|
||||
.year {
|
||||
border-top: 1px dashed var(--theme-separator-color);
|
||||
border-top: 1px dashed var(--separator-color);
|
||||
|
||||
&-title {
|
||||
margin-top: var(--s3);
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
.month {
|
||||
margin-top: calc(3 * var(--s));
|
||||
margin-bottom: 0;
|
||||
border-top: 1px dashed var(--theme-separator-color);
|
||||
border-top: 1px dashed var(--separator-color);
|
||||
padding-top: var(--s2);
|
||||
|
||||
&-title {
|
||||
|
|
@ -123,10 +123,10 @@
|
|||
> td {
|
||||
// bold without respacing
|
||||
text-shadow: 0.01px 0 0.01px;
|
||||
background: var(--theme-card-bg);
|
||||
background: var(--card-bg);
|
||||
box-shadow: var(--whiteframe-shadow-2dp);
|
||||
|
||||
background-color: var(--theme-bg-lighter);
|
||||
background-color: var(--bg-lighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,14 +14,14 @@
|
|||
}
|
||||
|
||||
.config-section {
|
||||
border: 1px solid var(--theme-divider-color);
|
||||
border: 1px solid var(--divider-color);
|
||||
break-inside: avoid;
|
||||
margin-bottom: 10px;
|
||||
border-radius: var(--card-border-radius);
|
||||
background: var(--theme-card-bg);
|
||||
background: var(--card-bg);
|
||||
|
||||
background-color: var(--theme-card-bg);
|
||||
//background-color: var(--theme-bg-slightly-lighter);
|
||||
background-color: var(--card-bg);
|
||||
//background-color: var(--bg-slightly-lighter);
|
||||
|
||||
.md-title {
|
||||
margin-top: 0;
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
::ng-deep .isExpanded .collapsible-header {
|
||||
font-weight: bold;
|
||||
|
||||
border-color: var(--theme-extra-border-color);
|
||||
border-color: var(--extra-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,15 +9,15 @@ $summary-point-inner-margin: var(--s);
|
|||
|
||||
::ng-deep {
|
||||
.mat-mdc-tab .mdc-tab__text-label {
|
||||
//color: var(--theme-text-color);
|
||||
//color: var(--text-color);
|
||||
//font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .mat-mdc-tab-list {
|
||||
border-bottom: 1px solid var(--theme-separator-color);
|
||||
border-bottom: 1px solid var(--separator-color);
|
||||
|
||||
border-color: var(--theme-separator-color);
|
||||
border-color: var(--separator-color);
|
||||
}
|
||||
|
||||
::ng-deep .mat-mdc-tab-labels {
|
||||
|
|
@ -138,7 +138,7 @@ $summary-point-inner-margin: var(--s);
|
|||
height: $this-ico-size;
|
||||
display: block;
|
||||
font-size: $this-ico-size;
|
||||
color: var(--yellow);
|
||||
color: var(--sun-yellow);
|
||||
//transform-origin: center center;
|
||||
animation: success-animation-sun #{$this-ani-style};
|
||||
backface-visibility: hidden;
|
||||
|
|
@ -181,9 +181,9 @@ $summary-point-inner-margin: var(--s);
|
|||
overflow: visible !important;
|
||||
transition: var(--transition-standard);
|
||||
|
||||
//background: var(--theme-bg);
|
||||
//background: var(--bg);
|
||||
//box-shadow: var(--whiteframe-shadow-1dp);
|
||||
border: 1px solid var(--theme-extra-border-color);
|
||||
border: 1px solid var(--extra-border-color);
|
||||
|
||||
&,
|
||||
> * {
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@
|
|||
}
|
||||
|
||||
.config-section {
|
||||
border: 1px solid var(--theme-divider-color);
|
||||
border: 1px solid var(--divider-color);
|
||||
break-inside: avoid;
|
||||
margin-bottom: 10px;
|
||||
border-radius: var(--card-border-radius);
|
||||
background: var(--theme-card-bg);
|
||||
background: var(--card-bg);
|
||||
|
||||
background-color: var(--theme-card-bg);
|
||||
background-color: var(--card-bg);
|
||||
|
||||
.md-title {
|
||||
margin-top: 0;
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
::ng-deep .isExpanded .collapsible-header {
|
||||
font-weight: bold;
|
||||
|
||||
border-color: var(--theme-extra-border-color);
|
||||
border-color: var(--extra-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
}
|
||||
|
||||
.archive-icon {
|
||||
color: var(--theme-text-color-muted);
|
||||
color: var(--text-color-muted);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@
|
|||
}
|
||||
|
||||
.config-section {
|
||||
border: 1px solid var(--theme-divider-color);
|
||||
border: 1px solid var(--divider-color);
|
||||
break-inside: avoid;
|
||||
margin-bottom: 10px;
|
||||
border-radius: var(--card-border-radius);
|
||||
background: var(--theme-card-bg);
|
||||
background: var(--card-bg);
|
||||
|
||||
background-color: var(--theme-card-bg);
|
||||
background-color: var(--card-bg);
|
||||
|
||||
.md-title {
|
||||
margin-top: 0;
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
::ng-deep .isExpanded .collapsible-header {
|
||||
font-weight: bold;
|
||||
|
||||
border-color: var(--theme-extra-border-color);
|
||||
border-color: var(--extra-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -72,8 +72,8 @@ import { BreakpointObserver } from '@angular/cdk/layout';
|
|||
border-top-right-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
box-shadow: 0px -2px 3px 0px var(--theme-separator-alpha);
|
||||
background: var(--theme-sidebar-bg);
|
||||
box-shadow: 0px -2px 3px 0px var(--separator-alpha);
|
||||
background: var(--sidebar-bg);
|
||||
content: '';
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -59,12 +59,12 @@
|
|||
// spyOn(window, 'getComputedStyle').and.returnValue({
|
||||
// getPropertyValue: (prop: string) => {
|
||||
// const values: { [key: string]: string } = {
|
||||
// '--theme-bg': '#ffffff',
|
||||
// '--theme-text-color': '#000000',
|
||||
// '--theme-card-bg': '#f5f5f5',
|
||||
// '--theme-divider-color': '#e0e0e0',
|
||||
// '--theme-select-hover-bg': '#eeeeee',
|
||||
// '--theme-text-color-muted': '#666666',
|
||||
// '--bg': '#ffffff',
|
||||
// '--text-color': '#000000',
|
||||
// '--card-bg': '#f5f5f5',
|
||||
// '--divider-color': '#e0e0e0',
|
||||
// '--select-hover-bg': '#eeeeee',
|
||||
// '--text-color-muted': '#666666',
|
||||
// '--c-primary': '#2196f3',
|
||||
// '--c-accent': '#ff4081',
|
||||
// '--c-warn': '#f44336',
|
||||
|
|
@ -72,13 +72,13 @@
|
|||
// '--color-danger': '#f44336',
|
||||
// '--color-warning': '#ff9800',
|
||||
// '--is-rtl': '0',
|
||||
// '--theme-primary-bg': '#e3f2fd',
|
||||
// '--theme-primary-color': '#1976d2',
|
||||
// '--theme-link-color': '#2196f3',
|
||||
// '--theme-border-radius': '4px',
|
||||
// '--theme-transition': '0.3s ease',
|
||||
// '--primary-bg': '#e3f2fd',
|
||||
// '--primary-color': '#1976d2',
|
||||
// '--link-color': '#2196f3',
|
||||
// '--border-radius': '4px',
|
||||
// '--transition': '0.3s ease',
|
||||
// '--font-family': 'Roboto, sans-serif',
|
||||
// '--theme-error-color': '#f44336',
|
||||
// '--error-color': '#f44336',
|
||||
// };
|
||||
// // eslint-enable @typescript-eslint/naming-convention
|
||||
// return values[prop] || '';
|
||||
|
|
@ -91,12 +91,12 @@
|
|||
//
|
||||
// const css = createPluginCssInjection();
|
||||
//
|
||||
// expect(css).toContain('--theme-bg: #ffffff');
|
||||
// expect(css).toContain('--theme-text-color: #000000');
|
||||
// expect(css).toContain('--bg: #ffffff');
|
||||
// expect(css).toContain('--text-color: #000000');
|
||||
// expect(css).toContain('--is-dark-theme: 0');
|
||||
// expect(css).toContain('background: transparent');
|
||||
// expect(css).toContain('--theme-primary-bg: #e3f2fd');
|
||||
// expect(css).toContain('--theme-link-color: #2196f3');
|
||||
// expect(css).toContain('--primary-bg: #e3f2fd');
|
||||
// expect(css).toContain('--link-color: #2196f3');
|
||||
// expect(css).toContain('font-family: Roboto, sans-serif');
|
||||
// });
|
||||
//
|
||||
|
|
@ -115,12 +115,12 @@
|
|||
//
|
||||
// // Check for all CSS variables
|
||||
// const expectedVars = [
|
||||
// '--theme-bg',
|
||||
// '--theme-text-color',
|
||||
// '--theme-card-bg',
|
||||
// '--theme-divider-color',
|
||||
// '--theme-select-hover-bg',
|
||||
// '--theme-text-color-muted',
|
||||
// '--bg',
|
||||
// '--text-color',
|
||||
// '--card-bg',
|
||||
// '--divider-color',
|
||||
// '--select-hover-bg',
|
||||
// '--text-color-muted',
|
||||
// '--c-primary',
|
||||
// '--c-accent',
|
||||
// '--c-warn',
|
||||
|
|
@ -128,13 +128,13 @@
|
|||
// '--color-danger',
|
||||
// '--color-warning',
|
||||
// '--is-rtl',
|
||||
// '--theme-primary-bg',
|
||||
// '--theme-primary-color',
|
||||
// '--theme-link-color',
|
||||
// '--theme-border-radius',
|
||||
// '--theme-transition',
|
||||
// '--primary-bg',
|
||||
// '--primary-color',
|
||||
// '--link-color',
|
||||
// '--border-radius',
|
||||
// '--transition',
|
||||
// '--font-family',
|
||||
// '--theme-error-color',
|
||||
// '--error-color',
|
||||
// '--is-dark-theme',
|
||||
// ];
|
||||
//
|
||||
|
|
@ -151,7 +151,7 @@
|
|||
// expect(css).toContain('padding: 8px');
|
||||
// expect(css).toContain('background: transparent');
|
||||
// expect(css).toContain('font-family: Roboto, sans-serif');
|
||||
// expect(css).toContain('color: var(--theme-text-color)');
|
||||
// expect(css).toContain('color: var(--text-color)');
|
||||
// });
|
||||
// });
|
||||
//
|
||||
|
|
|
|||
|
|
@ -34,16 +34,16 @@ export const createPluginCssInjection = (): string => {
|
|||
return `
|
||||
<style id="injected-theme-vars">
|
||||
:root {
|
||||
--theme-bg: ${getVar('--theme-bg')};
|
||||
--theme-bg-darker: ${getVar('--theme-bg-darker')};
|
||||
--theme-text-color: ${getVar('--theme-text-color')};
|
||||
--theme-text-color-less-intense: ${getVar('--theme-text-color-less-intense')};
|
||||
--theme-text-color-muted: ${getVar('--theme-text-color-muted')};
|
||||
--theme-card-bg: ${getVar('--theme-card-bg')};
|
||||
--theme-divider-color: ${getVar('--theme-divider-color')};
|
||||
--theme-extra-border-color: ${getVar('--theme-extra-border-color')};
|
||||
--theme-select-hover-bg: ${getVar('--theme-select-hover-bg')};
|
||||
--theme-text-color-muted: ${getVar('--theme-text-color-muted')};
|
||||
--bg: ${getVar('--bg')};
|
||||
--bg-darker: ${getVar('--bg-darker')};
|
||||
--text-color: ${getVar('--text-color')};
|
||||
--text-color-less-intense: ${getVar('--text-color-less-intense')};
|
||||
--text-color-muted: ${getVar('--text-color-muted')};
|
||||
--card-bg: ${getVar('--card-bg')};
|
||||
--divider-color: ${getVar('--divider-color')};
|
||||
--extra-border-color: ${getVar('--extra-border-color')};
|
||||
--select-hover-bg: ${getVar('--select-hover-bg')};
|
||||
--text-color-muted: ${getVar('--text-color-muted')};
|
||||
--c-primary: ${getVar('--c-primary')};
|
||||
--c-accent: ${getVar('--c-accent')};
|
||||
--c-warn: ${getVar('--c-warn')};
|
||||
|
|
@ -51,42 +51,42 @@ export const createPluginCssInjection = (): string => {
|
|||
--color-danger: ${getVar('--color-danger')};
|
||||
--color-warning: ${getVar('--color-warning')};
|
||||
--is-dark-theme: ${isDarkTheme ? '1' : '0'};
|
||||
--theme-scrollbar-thumb: ${getVar('--theme-scrollbar-thumb')};
|
||||
--theme-scrollbar-thumb-hover: ${getVar('--theme-scrollbar-thumb-hover')};
|
||||
--theme-scrollbar-track: ${getVar('--theme-scrollbar-track')};
|
||||
--scrollbar-thumb: ${getVar('--scrollbar-thumb')};
|
||||
--scrollbar-thumb-hover: ${getVar('--scrollbar-thumb-hover')};
|
||||
--scrollbar-track: ${getVar('--scrollbar-track')};
|
||||
}
|
||||
|
||||
body {
|
||||
background: transparent;
|
||||
color: var(--theme-text-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
|
||||
/* Custom scrollbar styles for plugins */
|
||||
:root {
|
||||
scrollbar-color: var(--theme-scrollbar-thumb) var(--theme-scrollbar-track);
|
||||
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--theme-scrollbar-track);
|
||||
background: var(--scrollbar-track);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--theme-scrollbar-thumb);
|
||||
background: var(--scrollbar-thumb);
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--theme-scrollbar-thumb-hover);
|
||||
background: var(--scrollbar-thumb-hover);
|
||||
}
|
||||
</style>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ $z-this-backdrop: calc(var(--z-task-side-bar-over) - 1);
|
|||
//border: 1px solid;
|
||||
//border-right: 0;
|
||||
//border-bottom: 0;
|
||||
//box-shadow: 0px 8px 10px -5px var(--color-overlay-dark-20), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px var(--theme-divider-color) !important;
|
||||
//box-shadow: 0px 8px 10px -5px var(--color-overlay-dark-20), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px var(--divider-color) !important;
|
||||
|
||||
@include mq(sm, max) {
|
||||
// NOTE: prevents overlapping with nav when open
|
||||
|
|
@ -46,8 +46,8 @@ $z-this-backdrop: calc(var(--z-task-side-bar-over) - 1);
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
background: var(--theme-selected-task-bg-color);
|
||||
//border-color: var(--theme-extra-border-color);
|
||||
background: var(--selected-task-bg-color);
|
||||
//border-color: var(--extra-border-color);
|
||||
|
||||
:host.isOver & {
|
||||
position: fixed;
|
||||
|
|
@ -115,12 +115,12 @@ $z-this-backdrop: calc(var(--z-task-side-bar-over) - 1);
|
|||
outline: none;
|
||||
}
|
||||
|
||||
color: var(--theme-text-color);
|
||||
background: var(--theme-bg-lightest);
|
||||
border-color: var(--theme-extra-border-color);
|
||||
color: var(--text-color);
|
||||
background: var(--bg-lightest);
|
||||
border-color: var(--extra-border-color);
|
||||
|
||||
@include mq(xs) {
|
||||
background: var(--theme-bg-slightly-lighter);
|
||||
background: var(--bg-slightly-lighter);
|
||||
}
|
||||
|
||||
:host.isOver.isOpen & {
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@ $z-this-side: calc(#{$z-this-content} + 2);
|
|||
z-index: 2;
|
||||
display: flex;
|
||||
|
||||
background: var(--theme-bg-darker);
|
||||
background: var(--bg-darker);
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
|
|
@ -138,10 +138,10 @@ $z-this-side: calc(#{$z-this-content} + 2);
|
|||
outline: none;
|
||||
}
|
||||
|
||||
color: var(--theme-text-color);
|
||||
background: var(--theme-close-btn-bg);
|
||||
border-color: var(--theme-close-btn-border);
|
||||
color: var(--text-color);
|
||||
background: var(--close-btn-bg);
|
||||
border-color: var(--close-btn-border);
|
||||
@include mq(xs) {
|
||||
background: var(--theme-bg-slightly-lighter);
|
||||
background: var(--bg-slightly-lighter);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
margin-top: -2px;
|
||||
height: 40px;
|
||||
|
||||
color: var(--theme-text-color);
|
||||
color: var(--text-color);
|
||||
|
||||
mat-icon {
|
||||
font-size: 22px;
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@
|
|||
.content {
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
color: var(--theme-text-color-more-intense);
|
||||
background-color: var(--theme-bg-lightest);
|
||||
color: var(--text-color-more-intense);
|
||||
background-color: var(--bg-lightest);
|
||||
textarea,
|
||||
.markdown-preview {
|
||||
position: absolute;
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
left: 50%;
|
||||
border-left: 2px solid;
|
||||
|
||||
border-color: var(--theme-extra-border-color);
|
||||
border-color: var(--extra-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ $this-dot-size: 14px;
|
|||
-webkit-user-select: none; /* Safari */
|
||||
width: $this-size + $this-margin * 2;
|
||||
min-width: $this-size + $this-margin * 2;
|
||||
color: var(--theme-text-color);
|
||||
color: var(--text-color);
|
||||
&.is-dragging .circle {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
|
@ -84,7 +84,7 @@ $this-dot-size: 14px;
|
|||
left: $this-circle-width;
|
||||
bottom: $this-circle-width;
|
||||
border-radius: 100%;
|
||||
background: var(--theme-bg-darker);
|
||||
background: var(--bg-darker);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
|
|
@ -101,7 +101,7 @@ $this-dot-size: 14px;
|
|||
}
|
||||
|
||||
.dot {
|
||||
box-shadow: 1px 1px 1px var(--theme-separator-alpha);
|
||||
box-shadow: 1px 1px 1px var(--separator-alpha);
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
border-radius: 100%;
|
||||
|
|
@ -148,7 +148,7 @@ $this-stroke-width: 4px;
|
|||
|
||||
// actual handle
|
||||
&:after {
|
||||
box-shadow: 1px 1px 2px var(--theme-separator-alpha);
|
||||
box-shadow: 1px 1px 2px var(--separator-alpha);
|
||||
content: '';
|
||||
top: -$this-handle-size * 0.5 + $this-circle-width * 0.5;
|
||||
background: $this-handle-color;
|
||||
|
|
@ -195,8 +195,8 @@ $this-stroke-width: 4px;
|
|||
border-bottom-right-radius: 20px;
|
||||
background-color: transparent;
|
||||
|
||||
caret-color: var(--theme-text-color-most-intense);
|
||||
color: var(--theme-text-color-most-intense);
|
||||
caret-color: var(--text-color-most-intense);
|
||||
color: var(--text-color-most-intense);
|
||||
|
||||
&:focus {
|
||||
@include inlineEditElevation();
|
||||
|
|
|
|||
|
|
@ -39,8 +39,8 @@ input {
|
|||
transform: translate(-50%, -50%) scaleX(0);
|
||||
opacity: 0;
|
||||
//transition: var(--transition-fast);
|
||||
background: var(--theme-card-bg);
|
||||
color: var(--theme-text-color);
|
||||
background: var(--card-bg);
|
||||
color: var(--text-color);
|
||||
padding: var(--s-half) var(--s-half);
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
.circle-bg {
|
||||
fill: none;
|
||||
stroke: var(--theme-progress-bg);
|
||||
stroke: var(--progress-bg);
|
||||
stroke-width: 2.8;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
border: 1px solid transparent;
|
||||
transition: var(--transition-leave);
|
||||
|
||||
caret-color: var(--theme-text-color-most-intense);
|
||||
caret-color: var(--text-color-most-intense);
|
||||
|
||||
&:focus {
|
||||
outline: none !important;
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
outline: none;
|
||||
// NOTE: needed to overwrite color for current task
|
||||
|
||||
color: var(--theme-text-color-most-intense);
|
||||
color: var(--text-color-most-intense);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@
|
|||
margin: 0;
|
||||
padding: 20px;
|
||||
/* Use injected CSS variables for theming */
|
||||
background: var(--theme-bg, transparent);
|
||||
color: var(--theme-text-color, #ccc);
|
||||
background: var(--bg, transparent);
|
||||
color: var(--text-color, #ccc);
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
|
||||
.test-section {
|
||||
margin-bottom: 20px;
|
||||
border-left: 2px solid var(--theme-divider-color, #666);
|
||||
border-left: 2px solid var(--divider-color, #666);
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -46,16 +46,16 @@
|
|||
|
||||
button {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--theme-divider-color, #666);
|
||||
background: var(--theme-card-bg, transparent);
|
||||
color: var(--theme-text-color, #ccc);
|
||||
border: 1px solid var(--divider-color, #666);
|
||||
background: var(--card-bg, transparent);
|
||||
color: var(--text-color, #ccc);
|
||||
font-size: 12px;
|
||||
font-family: monospace;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: var(--theme-select-hover-bg, rgba(255, 255, 255, 0.1));
|
||||
background: var(--select-hover-bg, rgba(255, 255, 255, 0.1));
|
||||
border-color: var(--c-primary, #999);
|
||||
}
|
||||
|
||||
|
|
@ -72,14 +72,14 @@
|
|||
}
|
||||
|
||||
.console {
|
||||
background: var(--theme-card-bg, rgba(0, 0, 0, 0.3));
|
||||
color: var(--theme-text-color, #ccc);
|
||||
background: var(--card-bg, rgba(0, 0, 0, 0.3));
|
||||
color: var(--text-color, #ccc);
|
||||
padding: 10px;
|
||||
font-size: 11px;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
margin-top: 20px;
|
||||
border: 1px solid var(--theme-divider-color, #333);
|
||||
border: 1px solid var(--divider-color, #333);
|
||||
}
|
||||
|
||||
.console-entry {
|
||||
|
|
@ -95,13 +95,13 @@
|
|||
}
|
||||
|
||||
.console-entry.info {
|
||||
color: var(--theme-text-color-muted, #999);
|
||||
color: var(--text-color-muted, #999);
|
||||
}
|
||||
|
||||
.api-info {
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid var(--theme-divider-color, #333);
|
||||
border-bottom: 1px solid var(--divider-color, #333);
|
||||
}
|
||||
|
||||
.api-list {
|
||||
|
|
@ -113,9 +113,9 @@
|
|||
|
||||
.api-item {
|
||||
padding: 4px 8px;
|
||||
border: 1px solid var(--theme-divider-color, #444);
|
||||
border: 1px solid var(--divider-color, #444);
|
||||
font-size: 11px;
|
||||
color: var(--theme-text-color-muted, #999);
|
||||
color: var(--text-color-muted, #999);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -526,47 +526,47 @@
|
|||
<div style="padding: 20px; font-family: monospace;">
|
||||
<h3 style="margin: 0 0 15px 0;">Theme Variables</h3>
|
||||
<table style="width: 100%; border-collapse: collapse;">
|
||||
<tr style="border-bottom: 1px solid var(--theme-divider-color, #333);">
|
||||
<tr style="border-bottom: 1px solid var(--divider-color, #333);">
|
||||
<td style="padding: 8px;">Dark Theme</td>
|
||||
<td style="padding: 8px; text-align: right;">${themeInfo.isDarkTheme ? 'Yes' : 'No'}</td>
|
||||
</tr>
|
||||
<tr style="border-bottom: 1px solid var(--theme-divider-color, #333);">
|
||||
<tr style="border-bottom: 1px solid var(--divider-color, #333);">
|
||||
<td style="padding: 8px;">Primary Color</td>
|
||||
<td style="padding: 8px; text-align: right;">
|
||||
<span style="display: inline-block; width: 20px; height: 20px; background: ${themeInfo.primaryColor}; vertical-align: middle; margin-right: 8px; border: 1px solid var(--theme-divider-color, #333);"></span>
|
||||
<span style="display: inline-block; width: 20px; height: 20px; background: ${themeInfo.primaryColor}; vertical-align: middle; margin-right: 8px; border: 1px solid var(--divider-color, #333);"></span>
|
||||
${themeInfo.primaryColor}
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="border-bottom: 1px solid var(--theme-divider-color, #333);">
|
||||
<tr style="border-bottom: 1px solid var(--divider-color, #333);">
|
||||
<td style="padding: 8px;">Accent Color</td>
|
||||
<td style="padding: 8px; text-align: right;">
|
||||
<span style="display: inline-block; width: 20px; height: 20px; background: ${themeInfo.accentColor}; vertical-align: middle; margin-right: 8px; border: 1px solid var(--theme-divider-color, #333);"></span>
|
||||
<span style="display: inline-block; width: 20px; height: 20px; background: ${themeInfo.accentColor}; vertical-align: middle; margin-right: 8px; border: 1px solid var(--divider-color, #333);"></span>
|
||||
${themeInfo.accentColor}
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="border-bottom: 1px solid var(--theme-divider-color, #333);">
|
||||
<tr style="border-bottom: 1px solid var(--divider-color, #333);">
|
||||
<td style="padding: 8px;">Warn Color</td>
|
||||
<td style="padding: 8px; text-align: right;">
|
||||
<span style="display: inline-block; width: 20px; height: 20px; background: ${themeInfo.warnColor}; vertical-align: middle; margin-right: 8px; border: 1px solid var(--theme-divider-color, #333);"></span>
|
||||
<span style="display: inline-block; width: 20px; height: 20px; background: ${themeInfo.warnColor}; vertical-align: middle; margin-right: 8px; border: 1px solid var(--divider-color, #333);"></span>
|
||||
${themeInfo.warnColor}
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="border-bottom: 1px solid var(--theme-divider-color, #333);">
|
||||
<tr style="border-bottom: 1px solid var(--divider-color, #333);">
|
||||
<td style="padding: 8px;">Background</td>
|
||||
<td style="padding: 8px; text-align: right;">
|
||||
<span style="display: inline-block; width: 20px; height: 20px; background: ${themeInfo.backgroundColor}; vertical-align: middle; margin-right: 8px; border: 1px solid var(--theme-divider-color, #333);"></span>
|
||||
<span style="display: inline-block; width: 20px; height: 20px; background: ${themeInfo.backgroundColor}; vertical-align: middle; margin-right: 8px; border: 1px solid var(--divider-color, #333);"></span>
|
||||
${themeInfo.backgroundColor}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding: 8px;">Text Color</td>
|
||||
<td style="padding: 8px; text-align: right;">
|
||||
<span style="display: inline-block; width: 20px; height: 20px; background: ${themeInfo.textColor}; vertical-align: middle; margin-right: 8px; border: 1px solid var(--theme-divider-color, #333);"></span>
|
||||
<span style="display: inline-block; width: 20px; height: 20px; background: ${themeInfo.textColor}; vertical-align: middle; margin-right: 8px; border: 1px solid var(--divider-color, #333);"></span>
|
||||
${themeInfo.textColor}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p style="margin-top: 15px; font-size: 12px; color: var(--theme-text-color-muted, #999);">
|
||||
<p style="margin-top: 15px; font-size: 12px; color: var(--text-color-muted, #999);">
|
||||
Plugins automatically receive all CSS variables from the host application, allowing seamless theme integration.
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ body {
|
|||
Roboto,
|
||||
sans-serif;
|
||||
background: transparent;
|
||||
color: var(--theme-text-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
.app {
|
||||
min-height: 100vh;
|
||||
|
|
@ -19,12 +19,12 @@ body {
|
|||
padding: 1rem;
|
||||
}
|
||||
.card {
|
||||
background: var(--theme-card-bg);
|
||||
background: var(--card-bg);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px #0000001a;
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
border: 2px solid var(--theme-extra-border-color);
|
||||
border: 2px solid var(--extra-border-color);
|
||||
}
|
||||
.card-clickable:hover {
|
||||
transition: transform 0.2s;
|
||||
|
|
@ -34,7 +34,7 @@ body {
|
|||
cursor: pointer;
|
||||
}
|
||||
.text-muted {
|
||||
color: var(--theme-text-color-muted);
|
||||
color: var(--text-color-muted);
|
||||
}
|
||||
.text-primary {
|
||||
color: var(--c-primary);
|
||||
|
|
@ -155,8 +155,8 @@ body {
|
|||
margin-top: 1rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: transparent;
|
||||
border: 1px solid var(--theme-extra-border-color);
|
||||
color: var(--theme-text-color-muted);
|
||||
border: 1px solid var(--extra-border-color);
|
||||
color: var(--text-color-muted);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
|
@ -197,15 +197,15 @@ body {
|
|||
}
|
||||
.graph-item {
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--theme-card-bg);
|
||||
border: 1px solid var(--theme-extra-border-color);
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--extra-border-color);
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.sync-icon {
|
||||
font-size: 1.2rem;
|
||||
color: var(--theme-text-color-muted);
|
||||
color: var(--text-color-muted);
|
||||
}
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -918,7 +918,7 @@
|
|||
Roboto,
|
||||
sans-serif;
|
||||
background: transparent;
|
||||
color: var(--theme-text-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
.app {
|
||||
min-height: 100vh;
|
||||
|
|
@ -927,12 +927,12 @@
|
|||
padding: 1rem;
|
||||
}
|
||||
.card {
|
||||
background: var(--theme-card-bg);
|
||||
background: var(--card-bg);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px #0000001a;
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
border: 2px solid var(--theme-extra-border-color);
|
||||
border: 2px solid var(--extra-border-color);
|
||||
}
|
||||
.card-clickable:hover {
|
||||
transition: transform 0.2s;
|
||||
|
|
@ -942,7 +942,7 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
.text-muted {
|
||||
color: var(--theme-text-color-muted);
|
||||
color: var(--text-color-muted);
|
||||
}
|
||||
.text-primary {
|
||||
color: var(--c-primary);
|
||||
|
|
@ -1063,8 +1063,8 @@
|
|||
margin-top: 1rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: transparent;
|
||||
border: 1px solid var(--theme-extra-border-color);
|
||||
color: var(--theme-text-color-muted);
|
||||
border: 1px solid var(--extra-border-color);
|
||||
color: var(--text-color-muted);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
|
@ -1105,15 +1105,15 @@
|
|||
}
|
||||
.graph-item {
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--theme-card-bg);
|
||||
border: 1px solid var(--theme-extra-border-color);
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--extra-border-color);
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.sync-icon {
|
||||
font-size: 1.2rem;
|
||||
color: var(--theme-text-color-muted);
|
||||
color: var(--text-color-muted);
|
||||
}
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@
|
|||
|
||||
/* Light mode (default) */
|
||||
:root {
|
||||
--text-color: var(--theme-text-color);
|
||||
--border-color: var(--theme-separator-color);
|
||||
--text-color: var(--text-color);
|
||||
--border-color: var(--separator-color);
|
||||
--primary-color: var(--c-primary);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@
|
|||
--color-warning: #ff9800;
|
||||
--color-danger: #f44336;
|
||||
--success-green: #4fa758;
|
||||
--yellow: #fff400;
|
||||
--sun-yellow: #fff400;
|
||||
|
||||
// -----------------------------
|
||||
// Dark Theme Elevation Colors
|
||||
|
|
@ -303,11 +303,11 @@
|
|||
// -----------------------------
|
||||
// Common Alpha Values
|
||||
// -----------------------------
|
||||
--theme-border-alpha: 0.12;
|
||||
--theme-overlay-alpha: 0.1;
|
||||
--theme-separator-alpha: 0.3;
|
||||
--theme-muted-alpha: 0.6;
|
||||
--theme-intense-alpha: 0.9;
|
||||
--border-alpha: 0.12;
|
||||
--overlay-alpha: 0.1;
|
||||
--separator-alpha: 0.3;
|
||||
--muted-alpha: 0.6;
|
||||
--intense-alpha: 0.9;
|
||||
}
|
||||
|
||||
// ===============================
|
||||
|
|
@ -319,42 +319,42 @@
|
|||
// -----------------------------
|
||||
body {
|
||||
// Background colors
|
||||
--theme-bg: #f8f8f7;
|
||||
--theme-bg-darker: rgb(235, 235, 235);
|
||||
--theme-bg-drag-col: rgb(242, 242, 242);
|
||||
--theme-bg-slightly-lighter: var(--theme-bg);
|
||||
--theme-bg-lighter: var(--theme-bg);
|
||||
--theme-bg-lightest: var(--theme-bg);
|
||||
--theme-bg-super-light: var(--theme-bg);
|
||||
--theme-card-bg: #ffffff;
|
||||
--theme-sidebar-bg: var(--theme-bg);
|
||||
--bg: #f8f8f7;
|
||||
--bg-darker: rgb(235, 235, 235);
|
||||
--bg-drag-col: rgb(242, 242, 242);
|
||||
--bg-slightly-lighter: var(--bg);
|
||||
--bg-lighter: var(--bg);
|
||||
--bg-lightest: var(--bg);
|
||||
--bg-super-light: var(--bg);
|
||||
--card-bg: #ffffff;
|
||||
--sidebar-bg: var(--bg);
|
||||
|
||||
// Text colors
|
||||
--theme-text-color: rgb(44, 44, 44);
|
||||
--theme-text-color-less-intense: rgba(44, 44, 44, 0.9);
|
||||
--theme-text-color-muted: rgba(44, 44, 44, 0.6);
|
||||
--theme-text-color-more-intense: var(--theme-text-color);
|
||||
--theme-text-color-most-intense: rgb(0, 0, 0);
|
||||
--text-color: rgb(44, 44, 44);
|
||||
--text-color-less-intense: rgba(44, 44, 44, 0.9);
|
||||
--text-color-muted: rgba(44, 44, 44, 0.6);
|
||||
--text-color-more-intense: var(--text-color);
|
||||
--text-color-most-intense: rgb(0, 0, 0);
|
||||
|
||||
// Selected task
|
||||
--theme-selected-task-bg-color: #fff;
|
||||
--selected-task-bg-color: #fff;
|
||||
|
||||
// Borders and separators
|
||||
--theme-extra-border-color: #dddddd;
|
||||
--theme-separator-color: #d0d0d0;
|
||||
--theme-divider-color: rgba(0, 0, 0, 0.12);
|
||||
--extra-border-color: #dddddd;
|
||||
--separator-color: #d0d0d0;
|
||||
--divider-color: rgba(0, 0, 0, 0.12);
|
||||
|
||||
// Backdrop
|
||||
--c-backdrop: var(--color-overlay-dark-60);
|
||||
|
||||
// Note colors
|
||||
--standard-note-bg: #ffffff;
|
||||
--standard-note-fg: var(--theme-text-color);
|
||||
--standard-note-fg: var(--text-color);
|
||||
--standard-note-bg-hovered: var(--standard-note-bg);
|
||||
|
||||
// Task colors
|
||||
--task-c-bg: #fff;
|
||||
--task-c-selected-bg: var(--theme-selected-task-bg-color);
|
||||
--task-c-selected-bg: var(--selected-task-bg-color);
|
||||
--sub-task-c-bg: var(--task-c-bg);
|
||||
--sub-task-c-bg-done: var(--task-c-bg);
|
||||
--task-c-bg-done: var(--task-c-bg);
|
||||
|
|
@ -367,63 +367,54 @@ body {
|
|||
--task-selected-shadow: var(--whiteframe-shadow-3dp);
|
||||
|
||||
// Scrollbar colors
|
||||
--theme-scrollbar-thumb: #888;
|
||||
--theme-scrollbar-thumb-hover: #555;
|
||||
--theme-scrollbar-track: #f1f1f1;
|
||||
--scrollbar-thumb: #888;
|
||||
--scrollbar-thumb-hover: #555;
|
||||
--scrollbar-track: #f1f1f1;
|
||||
|
||||
// Chip colors
|
||||
--theme-chip-outline-color: rgba(125, 125, 125, 0.4);
|
||||
--chip-outline-color: rgba(125, 125, 125, 0.4);
|
||||
|
||||
// Progress circle
|
||||
--theme-progress-bg: rgba(127, 127, 127, 0.2);
|
||||
--progress-bg: rgba(127, 127, 127, 0.2);
|
||||
|
||||
// Close button
|
||||
--theme-close-btn-bg: var(--theme-bg-darker);
|
||||
--theme-close-btn-border: var(--theme-divider-color);
|
||||
--close-btn-bg: var(--bg-darker);
|
||||
--close-btn-border: var(--divider-color);
|
||||
|
||||
// Banner
|
||||
--theme-banner-bg: var(--theme-card-bg);
|
||||
--banner-bg: var(--card-bg);
|
||||
|
||||
// Improvement banner
|
||||
--theme-improvement-text: rgba(44, 44, 44, 1);
|
||||
--theme-improvement-border: var(--color-overlay-light-33);
|
||||
--theme-improvement-button-text: rgba(44, 44, 44, 1);
|
||||
--improvement-text: rgba(44, 44, 44, 1);
|
||||
--improvement-border: var(--color-overlay-light-33);
|
||||
--improvement-button-text: rgba(44, 44, 44, 1);
|
||||
|
||||
// Select/Options
|
||||
--theme-select-hover-bg: var(--color-overlay-dark-10);
|
||||
--theme-options-border-color: var(--color-overlay-dark-10);
|
||||
--select-hover-bg: var(--color-overlay-dark-10);
|
||||
--options-border-color: var(--color-overlay-dark-10);
|
||||
|
||||
// Attachments
|
||||
--theme-attachment-bg: var(--theme-card-bg);
|
||||
--theme-attachment-border: var(--theme-extra-border-color);
|
||||
--theme-attachment-control-bg: var(--color-overlay-light-40);
|
||||
--theme-attachment-control-border: var(--color-overlay-light-50);
|
||||
--theme-attachment-control-hover-bg: var(--color-overlay-light-90);
|
||||
--attachment-bg: var(--card-bg);
|
||||
--attachment-border: var(--extra-border-color);
|
||||
--attachment-control-bg: var(--color-overlay-light-40);
|
||||
--attachment-control-border: var(--color-overlay-light-50);
|
||||
--attachment-control-hover-bg: var(--color-overlay-light-90);
|
||||
|
||||
// Hover controls
|
||||
--theme-hover-controls-border: 1px solid;
|
||||
--theme-hover-controls-border-opacity: 0.5;
|
||||
--hover-controls-border: 1px solid;
|
||||
--hover-controls-border-opacity: 0.5;
|
||||
|
||||
// Task detail item
|
||||
--theme-task-detail-value-color: rgba(
|
||||
--task-detail-value-color: rgba(
|
||||
var(--palette-foreground-secondary-text),
|
||||
var(--palette-foreground-secondary-text-alpha, 1)
|
||||
);
|
||||
|
||||
// Grid colors
|
||||
--theme-grid-color: #dadce0;
|
||||
|
||||
// Date-time picker colors
|
||||
--owl-text-color-strong: var(--color-overlay-dark-90);
|
||||
--owl-text-color: rgba(0, 0, 0, 0.75);
|
||||
--owl-text-color-less-intense: var(--color-overlay-dark-50);
|
||||
--owl-text-color-muted: rgba(0, 0, 0, 0.15);
|
||||
--owl-light-selected-bg: rgb(238, 238, 238);
|
||||
--owl-divider-color: rgba(0, 0, 0, 0.12);
|
||||
--owl-inp-bg-color: rgba(0, 0, 0, 0.04);
|
||||
--grid-color: #dadce0;
|
||||
|
||||
// Special colors overrides for light theme
|
||||
--yellow: #ffc107;
|
||||
--sun-yellow: #ffc107;
|
||||
|
||||
// Transition duration overrides for light theme
|
||||
--transition-duration-s: 180ms;
|
||||
|
|
@ -436,29 +427,29 @@ body {
|
|||
// -----------------------------
|
||||
body.isDarkTheme {
|
||||
// Background colors
|
||||
--theme-bg: var(--dark0);
|
||||
--theme-bg-darker: var(--dark0);
|
||||
--theme-bg-slightly-lighter: var(--dark4);
|
||||
--theme-bg-lighter: var(--dark12);
|
||||
--theme-bg-lightest: var(--dark24);
|
||||
--theme-bg-super-light: #616161;
|
||||
--theme-card-bg: var(--dark2);
|
||||
--theme-sidebar-bg: var(--dark8);
|
||||
--bg: var(--dark0);
|
||||
--bg-darker: var(--dark0);
|
||||
--bg-slightly-lighter: var(--dark4);
|
||||
--bg-lighter: var(--dark12);
|
||||
--bg-lightest: var(--dark24);
|
||||
--bg-super-light: #616161;
|
||||
--card-bg: var(--dark2);
|
||||
--sidebar-bg: var(--dark8);
|
||||
|
||||
// Text colors
|
||||
--theme-text-color: rgb(235, 235, 235);
|
||||
--theme-text-color-less-intense: rgba(235, 235, 235, 0.9);
|
||||
--theme-text-color-muted: rgba(235, 235, 235, 0.6);
|
||||
--theme-text-color-more-intense: rgb(245, 245, 245);
|
||||
--theme-text-color-most-intense: rgb(255, 255, 255);
|
||||
--text-color: rgb(235, 235, 235);
|
||||
--text-color-less-intense: rgba(235, 235, 235, 0.9);
|
||||
--text-color-muted: rgba(235, 235, 235, 0.6);
|
||||
--text-color-more-intense: rgb(245, 245, 245);
|
||||
--text-color-most-intense: rgb(255, 255, 255);
|
||||
|
||||
// Selected task
|
||||
--theme-selected-task-bg-color: var(--dark6);
|
||||
--selected-task-bg-color: var(--dark6);
|
||||
|
||||
// Borders and separators
|
||||
--theme-extra-border-color: rgba(255, 255, 255, 0.12);
|
||||
--theme-separator-color: rgba(255, 255, 255, 0.1);
|
||||
--theme-divider-color: rgba(255, 255, 255, 0.12);
|
||||
--extra-border-color: rgba(255, 255, 255, 0.12);
|
||||
--separator-color: rgba(255, 255, 255, 0.1);
|
||||
--divider-color: rgba(255, 255, 255, 0.12);
|
||||
|
||||
// Backdrop
|
||||
--c-backdrop: var(--color-overlay-dark-60);
|
||||
|
|
@ -483,52 +474,43 @@ body.isDarkTheme {
|
|||
--task-selected-shadow: var(--whiteframe-shadow-4dp);
|
||||
|
||||
// Scrollbar colors
|
||||
--theme-scrollbar-thumb: #333;
|
||||
--theme-scrollbar-thumb-hover: #444;
|
||||
--theme-scrollbar-track: #222;
|
||||
--scrollbar-thumb: #333;
|
||||
--scrollbar-thumb-hover: #444;
|
||||
--scrollbar-track: #222;
|
||||
|
||||
// Grid colors
|
||||
--theme-grid-color: var(--color-overlay-light-10);
|
||||
|
||||
// Date-time picker colors
|
||||
--owl-text-color-strong: var(--color-overlay-light-90);
|
||||
--owl-text-color: rgba(255, 255, 255, 0.75);
|
||||
--owl-text-color-less-intense: var(--color-overlay-light-50);
|
||||
--owl-text-color-muted: rgba(255, 255, 255, 0.15);
|
||||
--owl-light-selected-bg: rgba(49, 49, 49, 1);
|
||||
--owl-divider-color: rgba(255, 255, 255, 0.12);
|
||||
--owl-inp-bg-color: rgba(255, 255, 255, 0.08);
|
||||
--grid-color: var(--color-overlay-light-10);
|
||||
|
||||
// Chip colors
|
||||
--theme-chip-outline-color: rgba(125, 125, 125, 0.4);
|
||||
--chip-outline-color: rgba(125, 125, 125, 0.4);
|
||||
|
||||
// Close button
|
||||
--theme-close-btn-bg: var(--theme-bg-lightest);
|
||||
--theme-close-btn-border: var(--theme-extra-border-color);
|
||||
--close-btn-bg: var(--bg-lightest);
|
||||
--close-btn-border: var(--extra-border-color);
|
||||
|
||||
// Banner
|
||||
--theme-banner-bg: var(--theme-bg-lightest);
|
||||
--banner-bg: var(--bg-lightest);
|
||||
|
||||
// Improvement banner
|
||||
--theme-improvement-text: var(--theme-text-color-most-intense);
|
||||
--theme-improvement-border: var(--color-overlay-light-33);
|
||||
--theme-improvement-button-text: white;
|
||||
--improvement-text: var(--text-color-most-intense);
|
||||
--improvement-border: var(--color-overlay-light-33);
|
||||
--improvement-button-text: white;
|
||||
|
||||
// Select/Options
|
||||
--theme-select-hover-bg: var(--color-overlay-light-10);
|
||||
--theme-options-border-color: var(--color-overlay-light-10);
|
||||
--select-hover-bg: var(--color-overlay-light-10);
|
||||
--options-border-color: var(--color-overlay-light-10);
|
||||
|
||||
// Attachments
|
||||
--theme-attachment-bg: var(--theme-bg-lighter);
|
||||
--theme-attachment-border: transparent;
|
||||
--theme-attachment-control-bg: var(--color-overlay-dark-40);
|
||||
--theme-attachment-control-border: var(--color-overlay-dark-50);
|
||||
--theme-attachment-control-hover-bg: var(--color-overlay-dark-90);
|
||||
--attachment-bg: var(--bg-lighter);
|
||||
--attachment-border: transparent;
|
||||
--attachment-control-bg: var(--color-overlay-dark-40);
|
||||
--attachment-control-border: var(--color-overlay-dark-50);
|
||||
--attachment-control-hover-bg: var(--color-overlay-dark-90);
|
||||
|
||||
// Hover controls
|
||||
--theme-hover-controls-border: none;
|
||||
--theme-hover-controls-border-opacity: 0;
|
||||
--hover-controls-border: none;
|
||||
--hover-controls-border-opacity: 0;
|
||||
|
||||
// Task detail item
|
||||
--theme-task-detail-value-color: rgba(255, 255, 255, 0.7);
|
||||
--task-detail-value-color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
--mdc-chip-container-shape-radius: 4px !important;
|
||||
--mdc-chip-elevated-container-color: transparent !important;
|
||||
//--mdc-chip-outline-color: var(--mdc-chip-outline-color, var(--mat-sys-outline)) !important;
|
||||
--mdc-chip-outline-color: var(--theme-chip-outline-color) !important;
|
||||
--mdc-chip-outline-color: var(--chip-outline-color) !important;
|
||||
--mdc-chip-outline-width: 1px !important;
|
||||
}
|
||||
|
||||
|
|
@ -182,7 +182,7 @@ mat-icon.mat-icon[svgicon] {
|
|||
cursor: grabbing !important;
|
||||
}
|
||||
|
||||
background: var(--theme-bg-lightest) !important;
|
||||
background: var(--bg-lightest) !important;
|
||||
}
|
||||
|
||||
.cdk-drag-placeholder {
|
||||
|
|
@ -218,7 +218,7 @@ mat-icon.mat-icon[svgicon] {
|
|||
}
|
||||
|
||||
task.cdk-drag-preview .box {
|
||||
background: var(--theme-bg-lightest) !important;
|
||||
background: var(--bg-lightest) !important;
|
||||
}
|
||||
|
||||
// MAT TOOLTIP
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
z-index: 9999999999999;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
background: var(--theme-card-bg);
|
||||
background: var(--card-bg);
|
||||
max-width: 90%;
|
||||
overflow: auto;
|
||||
user-select: auto;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
pre {
|
||||
overflow: auto;
|
||||
border: 1px dashed var(--theme-extra-border-color);
|
||||
border: 1px dashed var(--extra-border-color);
|
||||
padding: var(--s);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
.mention-menu {
|
||||
box-shadow: var(--whiteframe-shadow-4dp);
|
||||
|
||||
background: var(--theme-bg-lightest) !important;
|
||||
background: var(--bg-lightest) !important;
|
||||
}
|
||||
|
||||
.mention-item {
|
||||
color: var(--theme-text-color) !important;
|
||||
color: var(--text-color) !important;
|
||||
}
|
||||
|
||||
.mention-active > a {
|
||||
background: var(--c-primary) !important;
|
||||
color: var(--theme-text-color-most-intense) !important;
|
||||
color: var(--text-color-most-intense) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
@include mq(xs) {
|
||||
font-size: var(--planner-font-size);
|
||||
}
|
||||
color: var(--theme-text-color-muted);
|
||||
color: var(--text-color-muted);
|
||||
|
||||
mat-icon {
|
||||
vertical-align: middle;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import '../mixins/media-queries';
|
||||
|
||||
@mixin _scrollBarStyles() {
|
||||
scrollbar-color: var(--theme-scrollbar-thumb) var(--theme-scrollbar-track);
|
||||
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
||||
scrollbar-width: 4px;
|
||||
|
||||
::-webkit-scrollbar {
|
||||
|
|
@ -11,19 +11,19 @@
|
|||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--theme-scrollbar-track);
|
||||
background: var(--scrollbar-track);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--theme-scrollbar-thumb);
|
||||
background: var(--scrollbar-thumb);
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--theme-scrollbar-thumb-hover);
|
||||
background: var(--scrollbar-thumb-hover);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,13 +13,13 @@
|
|||
}
|
||||
|
||||
.shepherd-text kbd {
|
||||
background-color: var(--theme-bg-lightest);
|
||||
background-color: var(--bg-lightest);
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--theme-extra-border-color);
|
||||
border: 1px solid var(--extra-border-color);
|
||||
box-shadow:
|
||||
0 1px 1px var(--color-overlay-dark-20),
|
||||
0 2px 0 0 var(--color-overlay-light-70) inset;
|
||||
color: var(--theme-text-color);
|
||||
color: var(--text-color);
|
||||
display: inline-block;
|
||||
font-size: 0.85em;
|
||||
font-weight: 700;
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
|
||||
color: var(--theme-text-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.shepherd-element {
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
visibility: hidden;
|
||||
width: 100%;
|
||||
|
||||
background: var(--theme-bg-lightest) !important;
|
||||
background: var(--bg-lightest) !important;
|
||||
|
||||
.material-icons {
|
||||
vertical-align: middle;
|
||||
|
|
@ -100,7 +100,7 @@
|
|||
content: '';
|
||||
transform: rotate(45deg);
|
||||
|
||||
background: var(--theme-bg-lightest) !important;
|
||||
background: var(--bg-lightest) !important;
|
||||
}
|
||||
|
||||
.shepherd-footer button + button {
|
||||
|
|
@ -128,7 +128,7 @@
|
|||
}
|
||||
|
||||
.shepherd-has-title .shepherd-content .shepherd-header {
|
||||
background: var(--theme-bg-lighter);
|
||||
background: var(--bg-lighter);
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
|
|
@ -186,7 +186,7 @@
|
|||
|
||||
.shepherd-element.shepherd-has-title[data-popper-placement^='bottom']
|
||||
> .shepherd-arrow:before {
|
||||
background-color: var(--theme-bg-lighter);
|
||||
background-color: var(--bg-lighter);
|
||||
}
|
||||
|
||||
.shepherd-target-click-disabled.shepherd-enabled.shepherd-target,
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ div.material-table {
|
|||
box-shadow: $this-table-shadow;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
background-color: var(--theme-card-bg);
|
||||
background-color: var(--card-bg);
|
||||
|
||||
&,
|
||||
* {
|
||||
|
|
@ -64,9 +64,9 @@ div.material-table {
|
|||
}
|
||||
|
||||
.isDarkTheme & {
|
||||
background: var(--theme-card-bg);
|
||||
background: var(--card-bg);
|
||||
// NOTE: because we're on a lighter background
|
||||
color: var(--theme-text-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.isDarkTheme &._no-elevation {
|
||||
|
|
@ -103,11 +103,11 @@ div.material-table {
|
|||
text-align: left;
|
||||
|
||||
.isLightTheme & {
|
||||
border-color: var(--theme-extra-border-color);
|
||||
border-color: var(--extra-border-color);
|
||||
}
|
||||
|
||||
.isDarkTheme & {
|
||||
border-color: var(--theme-extra-border-color);
|
||||
border-color: var(--extra-border-color);
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
//$shadow-edit-on-click-light: 0 0 4px 0 var(--color-overlay-dark-80), var(--whiteframe-shadow-14dp);
|
||||
//$shadow-edit-on-click-dark: 0 0 4px 0 var(--theme-bg)-lightest, var(--whiteframe-shadow-14dp);
|
||||
//$shadow-edit-on-click-dark: 0 0 4px 0 var(--bg)-lightest, var(--whiteframe-shadow-14dp);
|
||||
$shadow-edit-on-click-dark: var(--whiteframe-shadow-15dp);
|
||||
$shadow-edit-on-click-light: var(--whiteframe-shadow-7dp);
|
||||
|
||||
@mixin inlineEditElevation {
|
||||
border-radius: var(--card-border-radius);
|
||||
background: var(--theme-card-bg);
|
||||
background: var(--card-bg);
|
||||
box-shadow: var(--whiteframe-shadow-7dp);
|
||||
color: var(--theme-text-color-most-intense);
|
||||
color: var(--text-color-most-intense);
|
||||
border: 1px solid var(--c-accent);
|
||||
//border: 1px solid var(--theme-extra-border-color);
|
||||
//border: 1px solid var(--extra-border-color);
|
||||
|
||||
@include darkTheme() {
|
||||
background: var(--dark24);
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
box-shadow: var(--shadow-card-shadow);
|
||||
transition: var(--transition-fast);
|
||||
transition-property: transform, box-shadow;
|
||||
//border: 1px solid var(--theme-grid-color);
|
||||
//border: 1px solid var(--grid-color);
|
||||
|
||||
background: var(--standard-note-bg);
|
||||
color: var(--standard-note-fg);
|
||||
|
|
|
|||
|
|
@ -41,42 +41,42 @@
|
|||
}
|
||||
|
||||
@mixin standardThemeTextColor {
|
||||
color: var(--theme-text-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
@mixin standardThemeTextColorLessIntense {
|
||||
color: var(--theme-text-color-less-intense);
|
||||
color: var(--text-color-less-intense);
|
||||
}
|
||||
|
||||
@mixin standardThemeTextColorMostIntense {
|
||||
color: var(--theme-text-color-most-intense);
|
||||
color: var(--text-color-most-intense);
|
||||
}
|
||||
|
||||
@mixin extraBorder($sideSuffix: '') {
|
||||
#{'border'+$sideSuffix}: 1px solid var(--theme-extra-border-color);
|
||||
#{'border'+$sideSuffix}: 1px solid var(--extra-border-color);
|
||||
}
|
||||
|
||||
// e.g. cards and tasks
|
||||
@mixin layerTextAndBgHigher {
|
||||
color: var(--theme-text-color-less-intense);
|
||||
background-color: var(--theme-bg-lighter);
|
||||
color: var(--text-color-less-intense);
|
||||
background-color: var(--bg-lighter);
|
||||
}
|
||||
|
||||
// e.g. nested cards / tabs etc
|
||||
@mixin layerTextAndBgHighest {
|
||||
// NOTE: needs to be more intense than light color, because we have a lighter background
|
||||
color: var(--theme-text-color-more-intense);
|
||||
background-color: var(--theme-bg-lightest);
|
||||
color: var(--text-color-more-intense);
|
||||
background-color: var(--bg-lightest);
|
||||
}
|
||||
|
||||
@mixin dividerBorderColor($border-width: 0 0 1px 0, $is-global: false) {
|
||||
border-style: solid;
|
||||
border-width: $border-width;
|
||||
border-color: var(--theme-divider-color);
|
||||
border-color: var(--divider-color);
|
||||
}
|
||||
|
||||
@mixin flatBox($is-global: false) {
|
||||
border:
|
||||
1px,
|
||||
$is-global solid var(--theme-divider-color);
|
||||
$is-global solid var(--divider-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -57,11 +57,11 @@ body {
|
|||
}
|
||||
|
||||
&.isLightTheme {
|
||||
color: var(--theme-text-color);
|
||||
background: var(--theme-bg);
|
||||
color: var(--text-color);
|
||||
background: var(--bg);
|
||||
|
||||
&.isDisableBackgroundGradient {
|
||||
background: var(--theme-bg);
|
||||
background: var(--bg);
|
||||
//&:before {
|
||||
// display: block;
|
||||
// opacity: .3;
|
||||
|
|
@ -75,17 +75,17 @@ body {
|
|||
180deg,
|
||||
mat-css-vars.mat-css-color(100, 1) 0%,
|
||||
mat-css-vars.mat-css-color(50, 1) 140px,
|
||||
var(--theme-bg) 100%
|
||||
var(--bg) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&.isDarkTheme {
|
||||
color: var(--theme-text-color);
|
||||
background: var(--theme-bg);
|
||||
color: var(--text-color);
|
||||
background: var(--bg);
|
||||
|
||||
&.isDisableBackgroundGradient {
|
||||
background: var(--theme-bg);
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
&:before {
|
||||
|
|
@ -176,12 +176,12 @@ img {
|
|||
* {
|
||||
--scrollbar-width: thin;
|
||||
--scrollbar-width-legacy: 4px;
|
||||
--scrollbar-color-thumb: var(--theme-scrollbar-thumb);
|
||||
--scrollbar-color-track: var(--theme-scrollbar-track);
|
||||
--scrollbar-color-thumb: var(--scrollbar-thumb);
|
||||
--scrollbar-color-track: var(--scrollbar-track);
|
||||
|
||||
.isDarkTheme & {
|
||||
--scrollbar-color-thumb: var(--theme-scrollbar-thumb);
|
||||
--scrollbar-color-track: var(--theme-scrollbar-track);
|
||||
--scrollbar-color-thumb: var(--scrollbar-thumb);
|
||||
--scrollbar-color-track: var(--scrollbar-track);
|
||||
}
|
||||
|
||||
/* Modern browsers with `scrollbar-*` support */
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@
|
|||
@include mat-css-vars.init-material-css-vars();
|
||||
|
||||
.bg-card {
|
||||
background: var(--theme-card-bg);
|
||||
background: var(--card-bg);
|
||||
|
||||
.isDarkTheme & {
|
||||
background: var(--theme-card-bg);
|
||||
background: var(--card-bg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
}
|
||||
|
||||
// Helper to create CSS variable with fallback
|
||||
// Usage: @include css-var(color, --theme-text-color, var(--theme-text-color-most-intense));
|
||||
// Usage: @include css-var(color, --text-color, var(--text-color-most-intense));
|
||||
@mixin css-var($property, $var, $fallback: null) {
|
||||
@if $fallback {
|
||||
#{$property}: var(#{$var}, #{$fallback});
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
}
|
||||
|
||||
// Helper to define CSS variables with light/dark theme support
|
||||
// Usage: @include theme-var(--my-color, var(--theme-text-color-most-intense), var(--theme-card-bg));
|
||||
// Usage: @include theme-var(--my-color, var(--text-color-most-intense), var(--card-bg));
|
||||
@mixin theme-var($var-name, $light-value, $dark-value) {
|
||||
body {
|
||||
#{$var-name}: #{$light-value};
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
}
|
||||
|
||||
// Helper to convert RGBA with opacity to CSS variables
|
||||
// Usage: @include rgba-var(border-color, --theme-text-color-rgb, 0.5);
|
||||
// Usage: @include rgba-var(border-color, --text-color-rgb, 0.5);
|
||||
@mixin rgba-var($property, $rgb-var, $opacity) {
|
||||
#{$property}: rgba(var(#{$rgb-var}), #{$opacity});
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue