mirror of
https://github.com/johannesjo/super-productivity.git
synced 2026-07-18 00:46:45 +00:00
1ee9d7f566
Rename the "overlay indicator" feature to "task widget" across the entire codebase for clearer naming. Includes file renames, config key migration, IPC event rename, and translation key updates. Migration handles old persisted data from both the `overlayIndicator` config key and the deprecated `misc.isOverlayIndicatorEnabled` field. The `taskWidget` type is made optional in GlobalConfigState to prevent Typia auto-fix from overwriting migrated values during upgrade.
169 lines
3 KiB
CSS
169 lines
3 KiB
CSS
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Open Sans', sans-serif;
|
|
overflow: hidden;
|
|
background: transparent;
|
|
user-select: none;
|
|
-webkit-context-menu: none;
|
|
--scale: 1;
|
|
--opacity: 0.95;
|
|
}
|
|
|
|
body,
|
|
body * {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* ── Main container ── */
|
|
#task-widget-container {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100vh;
|
|
padding: calc(4px * var(--scale));
|
|
background-color: rgba(255, 255, 255, var(--opacity));
|
|
border-radius: calc(8px * var(--scale));
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
transition:
|
|
background-color 0.3s,
|
|
color 0.3s;
|
|
-webkit-app-region: drag;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
#task-widget-container {
|
|
background-color: rgba(32, 32, 32, var(--opacity));
|
|
color: #e0e0e0;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
|
|
}
|
|
}
|
|
|
|
/* ── Content area ── */
|
|
#content {
|
|
flex: 1;
|
|
padding: 0 calc(8px * var(--scale));
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
#task-title {
|
|
font-size: calc(20px * var(--scale));
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: #333;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
#task-title {
|
|
color: #e0e0e0;
|
|
}
|
|
}
|
|
|
|
#time-display {
|
|
font-size: calc(20px * var(--scale));
|
|
font-weight: 600;
|
|
font-variant-numeric: tabular-nums;
|
|
color: #666;
|
|
margin-left: auto;
|
|
padding-left: calc(8px * var(--scale));
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
#time-display {
|
|
color: #aaa;
|
|
}
|
|
}
|
|
|
|
/* ── Mode-specific colors ── */
|
|
.mode-pomodoro #time-display {
|
|
color: #dc3545;
|
|
}
|
|
.mode-focus #time-display {
|
|
color: #007bff;
|
|
}
|
|
.mode-task #time-display {
|
|
color: #28a745;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.mode-pomodoro #time-display {
|
|
color: #ff6b7a;
|
|
}
|
|
.mode-focus #time-display {
|
|
color: #5cb3ff;
|
|
}
|
|
.mode-task #time-display {
|
|
color: #5dd66f;
|
|
}
|
|
}
|
|
|
|
/* ── Show-main button ── */
|
|
#show-main {
|
|
width: calc(32px * var(--scale));
|
|
height: calc(32px * var(--scale));
|
|
min-width: 20px;
|
|
min-height: 20px;
|
|
border: none;
|
|
background: rgba(0, 0, 0, 0.05);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
color: #666;
|
|
font-size: calc(12px * var(--scale));
|
|
transition: all 0.2s;
|
|
-webkit-app-region: no-drag;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
#show-main {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: #aaa;
|
|
}
|
|
}
|
|
|
|
#show-main:hover {
|
|
background: rgba(0, 0, 0, 0.1);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
#show-main:hover {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
}
|
|
|
|
#show-main:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
/* ── Responsive width breakpoints ── */
|
|
.size-tiny #task-title {
|
|
display: none;
|
|
}
|
|
|
|
.size-tiny #show-main {
|
|
display: none;
|
|
}
|
|
|
|
.size-tiny #task-widget-container {
|
|
justify-content: center;
|
|
}
|
|
|
|
.size-tiny #content {
|
|
padding: 0 calc(4px * var(--scale));
|
|
justify-content: center;
|
|
}
|
|
|
|
.size-tiny #time-display {
|
|
margin-left: 0;
|
|
padding-left: 0;
|
|
}
|