Polished timer and UI
This commit is contained in:
129
styles.css
129
styles.css
@@ -53,6 +53,98 @@
|
||||
background-color: var(--background-modifier-error-hover);
|
||||
}
|
||||
|
||||
.taskweaver-active-timer {
|
||||
background: linear-gradient(135deg, var(--background-secondary) 0%, var(--background-primary-alt) 100%);
|
||||
border: 2px solid var(--interactive-accent);
|
||||
border-radius: var(--radius-l);
|
||||
padding: var(--size-4-4);
|
||||
margin-bottom: var(--size-4-4);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.taskweaver-active-timer-header {
|
||||
text-align: center;
|
||||
margin-bottom: var(--size-4-2);
|
||||
}
|
||||
|
||||
.taskweaver-active-timer-label {
|
||||
font-size: var(--font-ui-smaller);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: var(--text-muted);
|
||||
font-weight: var(--font-semibold);
|
||||
}
|
||||
|
||||
.taskweaver-active-timer-title {
|
||||
text-align: center;
|
||||
font-size: var(--font-ui-large);
|
||||
font-weight: var(--font-semibold);
|
||||
color: var(--text-normal);
|
||||
margin-bottom: var(--size-4-3);
|
||||
}
|
||||
|
||||
.taskweaver-active-timer-display {
|
||||
text-align: center;
|
||||
font-size: 48px;
|
||||
font-family: var(--font-monospace);
|
||||
font-weight: var(--font-bold);
|
||||
color: var(--interactive-accent);
|
||||
margin: var(--size-4-4) 0;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.taskweaver-active-timer-controls {
|
||||
display: flex;
|
||||
gap: var(--size-4-2);
|
||||
justify-content: center;
|
||||
margin-top: var(--size-4-3);
|
||||
}
|
||||
|
||||
.taskweaver-timer-control-btn {
|
||||
padding: var(--size-4-2) var(--size-4-4);
|
||||
border: none;
|
||||
border-radius: var(--radius-m);
|
||||
cursor: pointer;
|
||||
font-size: var(--font-ui-medium);
|
||||
font-weight: var(--font-semibold);
|
||||
transition: all 0.2s;
|
||||
flex: 1;
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
.taskweaver-timer-control-btn.pause {
|
||||
background-color: var(--color-orange);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.taskweaver-timer-control-btn.pause:hover {
|
||||
background-color: var(--color-orange);
|
||||
opacity: 0.8;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.taskweaver-timer-control-btn.stop {
|
||||
background-color: var(--background-modifier-error);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.taskweaver-timer-control-btn.stop:hover {
|
||||
background-color: var(--background-modifier-error);
|
||||
opacity: 0.8;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.taskweaver-timer-control-btn.complete {
|
||||
background-color: var(--color-green);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.taskweaver-timer-control-btn.complete:hover {
|
||||
background-color: var(--color-green);
|
||||
opacity: 0.8;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.taskweaver-category {
|
||||
margin-bottom: var(--size-4-3);
|
||||
background-color: var(--background-secondary);
|
||||
@@ -123,32 +215,47 @@
|
||||
gap: var(--size-4-1);
|
||||
}
|
||||
|
||||
.taskweaver-timer {
|
||||
.taskweaver-task-running {
|
||||
opacity: 0.6;
|
||||
background-color: var(--background-primary-alt) !important;
|
||||
}
|
||||
|
||||
.taskweaver-timer-small {
|
||||
font-family: var(--font-monospace);
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-ui-smaller);
|
||||
min-width: 70px;
|
||||
min-width: 60px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.taskweaver-timer-btn,
|
||||
.taskweaver-start-btn {
|
||||
background-color: var(--interactive-accent);
|
||||
color: var(--text-on-accent);
|
||||
border: none;
|
||||
border-radius: var(--radius-s);
|
||||
padding: var(--size-2-1) var(--size-4-2);
|
||||
cursor: pointer;
|
||||
font-size: var(--font-ui-small);
|
||||
transition: all 0.2s;
|
||||
font-weight: var(--font-semibold);
|
||||
}
|
||||
|
||||
.taskweaver-start-btn:hover {
|
||||
background-color: var(--interactive-accent-hover);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.taskweaver-delete-btn {
|
||||
background: transparent;
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
border-radius: var(--radius-s);
|
||||
padding: var(--size-2-1) var(--size-2-3);
|
||||
cursor: pointer;
|
||||
font-size: var(--font-ui-small);
|
||||
color: var(--text-normal);
|
||||
font-size: var(--font-ui-smaller);
|
||||
color: var(--text-muted);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.taskweaver-timer-btn:hover {
|
||||
background-color: var(--interactive-accent);
|
||||
color: var(--text-on-accent);
|
||||
border-color: var(--interactive-accent);
|
||||
}
|
||||
|
||||
.taskweaver-delete-btn:hover {
|
||||
background-color: var(--background-modifier-error);
|
||||
color: var(--text-on-accent);
|
||||
|
||||
Reference in New Issue
Block a user