dot/.local/share/gnome-shell/extensions/timepp@zagortenay333/stylesheet.css

887 lines
20 KiB
CSS

/* =====================================================================
* @@@ Panel Items
* ===================================================================== */
.timepp-panel-box .timer-panel-item {}
.timepp-panel-box .stopwatch-panel-item {}
.timepp-panel-box .pomo-panel-item {}
.timepp-panel-box .alarm-panel-item {}
.timepp-panel-box .todo-panel-item {}
.timepp-panel-box .unicon-panel-item {}
.timepp-panel-box-content {}
.timepp-panel-box .panel-button { margin-right: 2px; }
.timepp-panel-box .panel-button:last-child { margin-right: 0; }
.timepp-panel-box .panel-button-content {
spacing: 6px;
padding: 0 8px;
}
.timepp-panel-box .system-status-icon {
padding: 0;
margin: 0;
}
/*
* The 'on' selector is added when a timer is running in the corresponding
* section. I.e., the timer/stopwatch/pomodoro are running, at least one alarm
* is turned on, and time is tracked on at least one task in the todo.
*/
.timepp-panel-box .on StLabel,
.timepp-panel-box .on StIcon {
color: #f47e00;
}
/* The 'done' selector is added to the todo item when all tasks are done. */
.timepp-panel-box .todo-panel-item.done StLabel,
.timepp-panel-box .todo-panel-item.done StIcon {
color: #38ae72;
}
/* These custom css properties only work on this selector */
.timepp-custom-css-root {
/* global */
-timepp-link-color: #0f79ff;
/* todo section */
-timepp-context-color: #f47e00;
-timepp-project-color: #38ae72;
-timepp-due-date-color: #e74f4f;
-timepp-rec-date-color: #f47e00;
-timepp-defer-date-color: #5a94dc;
/* stats view */
-timepp-axes-color: rgba(255, 255, 255, 1);
-timepp-y-label-color: rgba(255, 255, 255, 1);
-timepp-x-label-color: rgba(255, 255, 255, 1);
-timepp-rulers-color: rgba(255, 255, 255, .15);
-timepp-proj-vbar-color: rgba(56, 174, 114, .8);
-timepp-task-vbar-color: rgba(231, 79, 79, .8);
-timepp-vbar-bg-color: rgba(255, 255, 255, .1);
-timepp-heatmap-selected-color: yellow;
-timepp-heatmap-color-A: #acd5f2;
-timepp-heatmap-color-B: #7fa8c9;
-timepp-heatmap-color-C: #527ba0;
-timepp-heatmap-color-D: #254e77;
-timepp-heatmap-color-E: #1c3a59;
-timepp-heatmap-color-F: rgba(255, 255, 255, .2);
}
/* =====================================================================
* @@@ General
* ===================================================================== */
.timepp-menu {} /* use this selector to override .popup-menu */
.timepp-menu StIcon {
icon-size: 16px;
}
.timepp-content-box {
min-width: 22em;
}
.timepp-menu .section {}
.timepp-menu .timepp-menu-item {
padding: .7em 2em;
}
.timepp-menu .section .header {
font-weight: bold;
}
.timepp-menu .section .header * {
spacing: .7em;
}
.timepp-menu .view-box {
padding: .4em 1.2em;
min-width: 22em;
spacing: .7em;
}
.timepp-menu .view-clear-tasks .view-box-content {
border: 1px #e74f4f;
}
.timepp-menu StEntry {
width: 22em;
}
.timepp-menu .view-box-content {
background: rgba(125, 125, 125, .15);
border: 1px rgba(125, 125, 125, .15);
border-radius: 2px;
padding: .7em;
spacing: .7em;
}
/* Used in view-boxes */
.timepp-menu .row {
padding: .7em 1.4em;
spacing: 1em;
}
.timepp-menu .row.days { /* example in alarms editor */
spacing: .1em;
}
.timepp-menu .button.day {
padding-right: .7em;
padding-left: .7em;
}
.timepp-menu .close-icon:hover,
.timepp-menu .close-icon:focus {
color: #e74f4f;
}
.timepp-menu .radiobutton StBin {
background-image: url('data/img/radiobutton.svg');
height: 16px;
width: 16px;
}
.timepp-menu .radiobutton:checked StBin {
background-image: url('data/img/radiobutton-checked.svg');
}
.timepp-separator {
min-height: 2em;
}
.timepp-menu .icon-box-group {
spacing: 2em;
}
.timepp-menu .icon-box,
.timepp-menu .btn-box {
spacing: .5em;
}
.multiline-entry-scrollbox {
max-width: 12em;
}
.timepp-menu .numpicker {
padding: 4px 6px 4px 12px;
spacing: 4px;
min-height: 32px; /* two 16px icons stacked on top of each other */
}
.timepp-menu .numpicker StLabel {
text-shadow: 0 0 transparent;
}
.numpicker-counter,
.numpicker-arrow-box {
padding: 4px;
}
.numpicker-arrow {}
.timepp-menu .slider:focus,
.timepp-menu StButton:focus .toggle-switch {
outline: 2px rgba(255, 255, 255, .5);
}
.numpicker-arrow:focus StIcon,
.numpicker-arrow:hover StIcon,
.timepp-menu StIcon:focus,
.timepp-menu StIcon:hover {
color: #5a94dc;
}
/* =====================================================================
* @@@ Fullscreen Interface (general)
* ===================================================================== */
.timepp-fullscreen {
background-color: rgba(0, 0, 0, .9);
color: white;
}
.timepp-fullscreen .content {}
.timepp-fullscreen .top-box {}
.timepp-fullscreen .top-box > * { /* top/center/right boxes */
spacing: 1em;
min-height: 4em;
}
.timepp-fullscreen .top-box > * > * {
padding-right: 1em;
padding-left: 1em;
}
.timepp-fullscreen .middle-box,
.timepp-fullscreen .bottom-box {
padding: 1.2em;
}
.timepp-fullscreen .slider {
min-height: 37px;
-slider-height: 0;
-slider-background-color: transparent;
-slider-active-background-color: transparent;
-slider-border-color: rgba(255, 255, 255, 0.2);
-slider-active-border-color: #5a94dc;
-slider-border-width: 3px;
-slider-handle-radius: 6px;
color: #5a94dc;
border-image: none;
border: 0;
}
.timepp-fullscreen *:focus {
outline: 2px rgba(255, 255, 255, .5);
}
.timepp-fullscreen StIcon {
icon-size: 16px;
}
.timepp-fullscreen StButton:checked StIcon,
.timepp-fullscreen StButton:hover StIcon {
color: #5a94dc;
}
.timepp-fullscreen .close-icon StIcon {
icon-size: 32px;
}
.timepp-fullscreen .close-icon:hover StIcon {
color: #e74f4f;
}
.timepp-fullscreen StEntry {
border: 0;
border-image: none;
background-color: rgba(255, 255, 255, .2);
border-radius: 2px;
padding: 0;
width: 22em;
padding: .4em 1em;
font-weight: bold;
color: #fff;
caret-color: #fff;
selected-color: #000;
selection-background-color: #fff;
}
.timepp-fullscreen StEntry:focus {
outline: 0;
background-color: rgba(255, 255, 255, .5);
}
.timepp-fullscreen StEntry StIcon {
color: #fff;
margin-right: .4em;
}
.timepp-fullscreen StScrollBar {
padding: 0;
}
.timepp-fullscreen StScrollView.vfade StScrollBar {
margin-left: 12px;
padding: 0;
}
.timepp-fullscreen StScrollBar StButton#hhandle,
.timepp-fullscreen StScrollBar StButton#vhandle {
border-image: none;
background-color: rgba(255, 255, 255, .2);
border-radius: 2px;
}
.timepp-fullscreen StScrollBar StButton#hhandle:active,
.timepp-fullscreen StScrollBar StButton#vhandle:active,
.timepp-fullscreen StScrollBar StButton#hhandle:hover,
.timepp-fullscreen StScrollBar StButton#vhandle:hover {
background-color: rgba(255, 255, 255, .5);
}
.timepp-fullscreen .btn-box {
spacing: .7em;
}
.timepp-fullscreen .button {
border-image: none;
box-shadow: none;
border: 0;
background-color: rgba(255, 255, 255, .2);
color: white;
font-size: 18px;
font-weight: bold;
border-radius: 2px;
padding: .7em 2em;
-natural-hpadding: 2em;
-st-natural-width: 6em;
}
.timepp-fullscreen .button:hover {
outline: none;
background-color: rgba(255, 255, 255, .5);
}
.timepp-fullscreen .date-picker {
font-weight: bold;
font-size: 14px;
spacing: .7em;
}
.timepp-fullscreen .date-picker-item {
background-color: rgba(255, 255, 255, .2);
border-radius: 2px;
min-width: 5em;
spacing: .3em;
}
.timepp-fullscreen .date-picker-item .arrow-btn:first-child {
padding: .1em .7em .1em .7em;
}
.timepp-fullscreen .date-picker-item .arrow-btn:last-child {
padding: 0 .7em .1em .7em;
}
.timepp-fullscreen .date-picker-item > StLabel {
padding: 0 0 0 .7em;
}
.timepp-fullscreen .date-picker-item .arrow-btn StIcon {
icon-size: 16px;
}
.timepp-fullscreen .date-picker-item .arrow-btn:hover {
color: #5a94dc;
}
/* =====================================================================
* @@@ Timer
* ===================================================================== */
.timepp-menu .timer-section {}
.timepp-menu .timer-section .timer-preset-item {
background: rgba(125, 125, 125, .15);
border-radius: 2px;
border-left-width: 3px;
padding: 9px 9px 9px 6px;
min-width: 240px;
spacing: .4em;
}
.timepp-menu .timer-section .timer-preset-item-default {
background: rgba(130, 130, 130, .3);
}
.timepp-menu .timer-section .timer-preset-item-default-indicator-label {
color: #38ae72;
}
.timepp-fullscreen.timer-expired {
background-color: rgba(226, 43, 43, .9);
}
.timepp-fullscreen.timer-stopped .banner-label {
color: rgba(255, 255, 255, .3);
}
.timepp-fullscreen.timer-expired .close-icon:hover StIcon {
color: rgba(0, 0, 0, .5);
}
.timepp-fullscreen .pause-icon,
.timepp-menu .header .pause-icon {
color: #f47e00;
}
/* =====================================================================
* @@@ Stopwatch
* ===================================================================== */
.timepp-menu .stopwatch-section {}
.timepp-menu .stopwatch-section .btn-reset {}
.timepp-menu .stopwatch-section .btn-lap {}
.timepp-menu .stopwatch-section .btn-start {}
.timepp-menu .stopwatch-section .btn-stop {}
.timepp-menu .stopwatch-section .laps-box {}
.timepp-fullscreen .laps-scrollview {
margin: 1em 0 1em 4em;
font-size: 30px;
}
.timepp-fullscreen .laps-scrollview StScrollBar {
margin-left: 3em;
}
/* =====================================================================
* @@@ Pomodoro
* ===================================================================== */
.timepp-menu .pomo-section {}
.timepp-menu .pomo-section .header {
spacing: .7em;
}
.timepp-menu .pomo-section .btn-new {}
.timepp-menu .pomo-section .btn-break {}
.timepp-menu .pomo-section .btn-start {}
.timepp-menu .pomo-section .btn-stop {}
.timepp-fullscreen.pomo-running .close-icon:hover StIcon,
.timepp-fullscreen.pomo-short-break .close-icon:hover StIcon,
.timepp-fullscreen.pomo-long-break .close-icon:hover StIcon {
color: rgba(0, 0, 0, .5);
}
.timepp-menu .pomo-section .pomo-counter {
color: #38ae72;
font-weight: bold;
}
.timepp-menu .pomo-section .pomo-phase-label {
}
.timepp-fullscreen .pomo-phase-label {
font-size: 32px;
}
.timepp-fullscreen.pomo-stopped .banner-label {
color: rgba(255, 255, 255, .3);
}
.timepp-fullscreen.pomo-running {
background-color: rgba(226, 43, 43, .9);
}
.timepp-fullscreen.pomo-long-break,
.timepp-fullscreen.pomo-short-break {
background-color: rgba(0, 154, 75, .9);
}
.timepp-fullscreen.pomo-running .button,
.timepp-fullscreen.pomo-long-break .button,
.timepp-fullscreen.pomo-short-break .button {
background-color: rgba(0, 0, 0, .3);
}
.timepp-fullscreen.pomo-running .button:hover,
.timepp-fullscreen.pomo-long-break .button:hover,
.timepp-fullscreen.pomo-short-break .button:hover {
background-color: rgba(0, 0, 0, .7);
}
.timepp-fullscreen.pomo-stopped {}
/* =====================================================================
* @@@ Alarms
* ===================================================================== */
.timepp-menu .alarm-section {}
.timepp-menu .alarms-container {}
.timepp-menu .alarm-section .alarms-content-box {
spacing: .4em;
}
.timepp-menu .alarm-section .btn-delete {}
.timepp-menu .alarm-section .btn-dismiss {}
.timepp-menu .alarm-section .btn-ok {}
.timepp-menu .alarm-section .numpicker-box {}
.timepp-menu .alarm-section .numpicker-box {}
.timepp-menu .alarm-section .day.button {}
.timepp-menu .alarm-section .day.button:active {
color: #5a94dc;
}
.timepp-menu .alarm-section .entry-container {}
.timepp-menu .alarm-section .add-alarm:hover,
.timepp-menu .alarm-section .add-alarm:focus {
color: #5a94dc;
}
.timepp-menu .alarm-section .alarm-item.active {
border-color: #f47e00;
}
.timepp-menu .alarm-section .alarm-item {
background: rgba(125, 125, 125, .15);
border-radius: 2px;
border-left-width: 3px;
padding: 9px 9px 9px 6px;
min-width: 240px;
}
.timepp-menu .alarm-section .alarm-item .view-box {
padding: 0;
}
.timepp-menu .alarm-section .alarm-item .view-box .popup-menu-item {
padding-left: 0;
padding-right: 0;
}
.timepp-menu .alarm-section .alarm-item-content {}
.timepp-menu .alarm-section .alarm-item-header {}
.timepp-menu .alarm-section .alarm-item-message {
padding-top: .4em;
}
.timepp-fullscreen.alarm {
background-color: rgba(226, 43, 43, .9);
}
.timepp-fullscreen.alarm .close-icon:hover StIcon {
color: rgba(0, 0, 0, .5);
}
.timepp-fullscreen.alarm StScrollBar StButton#hhandle,
.timepp-fullscreen.alarm StScrollBar StButton#vhandle {
border-image: none;
background-color: rgba(0, 0, 0, .3);
border-radius: 2px;
}
.timepp-fullscreen.alarm StScrollBar StButton#hhandle:active,
.timepp-fullscreen.alarm StScrollBar StButton#vhandle:active,
.timepp-fullscreen.alarm StScrollBar StButton#hhandle:hover,
.timepp-fullscreen.alarm StScrollBar StButton#vhandle:hover {
background-color: rgba(0, 0, 0, .7);
}
.timepp-fullscreen.alarm .button {
background-color: rgba(0, 0, 0, .3);
}
.timepp-fullscreen.alarm .button:hover {
background-color: rgba(0, 0, 0, .7);
}
.timepp-fullscreen .main-title {
font-size: 32px;
padding-bottom: 2em;
}
.timepp-fullscreen .alarm-cards-container {
spacing: 1em;
}
.timepp-fullscreen .alarm-card {
width: 24em;
padding: 1em;
background-color: rgba(0, 0, 0, .3);
border-radius: 2px;
}
.timepp-fullscreen .alarm-card .title {
font-weight: bold;
font-size: 16px;
}
.timepp-fullscreen .alarm-card .body {
margin-top: 1em;
font-size: 14px;
}
/* =====================================================================
* @@@ Todo
* ===================================================================== */
.timepp-menu .todo-section .add-task { font-weight: bold; }
.timepp-menu .todo-section .pin-icon.active,
.timepp-menu .todo-section .tracker-pause-icon,
.timepp-menu .todo-section .sort-icon.active,
.timepp-menu .todo-section .filter-icon.active {
color: #f47e00;
}
.timepp-menu .todo-section .settings-content-box {}
.timepp-menu .todo-section .tasks-container {}
.timepp-menu .todo-section .tasks-content-box { spacing: .5em; }
.timepp-menu .todo-section .task-item {
padding: .6em;
background: rgba(125, 125, 125, .15);
border-radius: 2px;
border-left-width: 3px;
border-color: rgba(125, 125, 125, .7);
/*
* .task-item will have a single capital letter A-Z selector based on
* priority, or the selector 'completed' if it's checked away.
* E.g., task-item.completed, task-item.A, task-item.D, etc...
*/
/*
* .task-item will have the 'hidden-task' selector if it has the 'h:1'
* (hidden) extension.
*/
}
.timepp-menu .todo-section .task-item.hidden-task {
background: rgba(15, 15, 15, .25);
border-color: transparent;
}
.timepp-menu .todo-section .task-item.completed {
border-color: transparent;
}
.timepp-menu .todo-section .task-item.A { border-color: #e74f4f; }
.timepp-menu .todo-section .task-item.B { border-color: #f47e00; }
.timepp-menu .todo-section .task-item.C { border-color: #8b5bff; }
.timepp-menu .todo-section .task-item.D { border-color: #38ae72; }
.timepp-menu .todo-section .task-item.A .priority-label { color: #e74f4f; }
.timepp-menu .todo-section .task-item.B .priority-label { color: #f47e00; }
.timepp-menu .todo-section .task-item.C .priority-label { color: #8b5bff; }
.timepp-menu .todo-section .task-item.D .priority-label { color: #38ae72; }
.timepp-menu .todo-section .task-item-content {
spacing: .3em;
}
.timepp-menu .todo-section .description-label {}
.timepp-menu .todo-section .date-label {}
.timepp-menu .todo-section .priority-label { font-weight: bold; }
.timepp-menu .todo-section .todotxt-extension-dates { color: #000; }
.timepp-menu .todo-section .delete-completed-tasks {
font-weight: bold;
color: #e74f4f;
}
.timepp-menu .todo-section .task-item StButton:hover,
.timepp-menu .todo-section .task-item StButton:focus,
.timepp-menu .todo-section .add-task:hover,
.timepp-menu .todo-section .add-task:focus {
color: #5a94dc;
}
.timepp-menu .todo-section .task-item-header { spacing: .4em; }
.timepp-menu .todo-section .view-default .view-box-content {
background: transparent;
border: 0;
padding: 0;
}
.timepp-menu .todo-section .view-default {
}
.timepp-menu .todo-section .view-default.one-column .kanban-column {
background: transparent;
border: 0;
padding: 0;
}
.timepp-menu .todo-section .kanban-column {
background: rgba(125, 125, 125, .15);
border: 1px rgba(125, 125, 125, .15);
padding: .5em;
border-radius: 2px;
min-height: 20em;
}
.timepp-menu .todo-section .kanban-column.collapsed {
padding: 0 1em 0 1em;
}
.timepp-menu .todo-section .kanban-column.collapsed .collapse-icon {
/* padding-right will act like padding-bottom in this case */
padding-right: .7em;
}
.timepp-menu .todo-section .kanban-switcher-item,
.timepp-menu .todo-section .file-switcher-item {
background: rgba(125, 125, 125, .15);
border-radius: 2px;
border-left-width: 3px;
padding: 9px 9px 9px 6px;
min-width: 240px;
max-width: 600px;
spacing: .4em;
}
.timepp-menu .todo-section .kanban-switcher-item-title,
.timepp-menu .todo-section .file-switcher-item-title {
font-weight: bold;
}
.timepp-menu .todo-section .file-switcher-item-check-icon.active {
color: #38ae72;
}
.timepp-menu .todo-section .archive-completed-tasks-label {}
.timepp-menu .todo-section .stats-window {
max-width: 600px;
}
.timepp-menu .todo-section .stats-item-title {}
.timepp-menu .todo-section .stats-item-body {
padding-left: 3em;
}
.timepp-menu .todo-section .loading-msg {
font-weight: bold;
}
.timepp-menu .todo-section .filter-settings-sector {
spacing: 0;
}
.timepp-menu .todo-section .filter-window-item {
padding-top: .7em;
padding-bottom: .7em;
max-width: 32em;
}
.timepp-menu .todo-section .sort-items-box {
padding: .5em 0;
spacing: .7em;
}
.timepp-menu .todo-section .completion-box {
spacing: .2em;
}
.timepp-menu .todo-section .link:focus StLabel,
.timepp-menu .todo-section .link:hover StLabel {
color: #5a94dc;
text-decoration: underline;
}
.timepp-hot-mode-type-menu,
.timepp-hot-mode-range-menu {
margin-top: .7em;
}
.timepp-fullscreen.stats .navbar {
padding: 0;
}
.timepp-fullscreen.stats .navbar StButton {
min-width: 4em;
}
.timepp-fullscreen.stats .navbar StButton:checked StIcon {
color: #f47e00;
}
.timepp-fullscreen.stats .graph-tooltip {
background: rgba(70, 80, 80, .9);
border-radius: 2px;
max-width: 500px;
max-height: 350px;
padding: .7em 1em;
font-weight: bold;
}
.timepp-fullscreen.stats .heatmap-icon:checked StIcon {
color: #f47e00;
}
.timepp-fullscreen.stats .heatmap-graph {
margin-bottom: 1.2em;
}
.timepp-fullscreen.stats .sum-stats-card {
max-width: 20em;
margin-left: 2em;
font-size: 14px;
}
.timepp-fullscreen.stats .sum-stats-card StScrollView:first-child {
max-height: 30em;
}
.timepp-fullscreen.stats .hot-mode-control-box {
font-weight: bold;
font-size: 14px;
min-height: 2.5em;
spacing: 7em;
}
.timepp-fullscreen.stats .hot-mode-control-box .button {
font-size: 14px;
padding: .6em 2em;
-natural-hpadding: 1em;
-st-natural-width: 3em;
}
.timepp-fullscreen.stats .hot-mode-control-box .btn-box,
.timepp-fullscreen.stats .custom-date-range-box {
spacing: .7em;
}
.timepp-fullscreen.stats .custom-date-range-box .btn-ok {
margin-left: 3em;
}
.timepp-fullscreen.stats .custom-date-range-box > StLabel { /* ellipses */
font-size: 20px;
font-weight: bold;
}
.timepp-fullscreen.stats .search-results-box {
spacing: 7em;
}
.timepp-fullscreen.stats .search-results-box StBoxLayout {
spacing: 2em;
}
.timepp-fullscreen.stats .search-results-label-tasks,
.timepp-fullscreen.stats .search-results-label-projects {
padding: 0 1em;
font-size: 20px;
font-weight: bold;
}
.timepp-fullscreen.stats .search-results-label-tasks {
color: #e74f4f;
}
.timepp-fullscreen.stats .search-results-label-projects {
color: #38ae72;
}
.timepp-fullscreen.stats .search-results-box .search-result-item {
background-color: rgba(255, 255, 255, .2);
border-radius: 2px;
font-weight: bold;
width: 26em;
padding: 1em;
margin-left: 22px; /* compensate for the hbar */
}
.timepp-fullscreen.stats .search-results-box .search-result-item:selected {
background-color: rgba(255, 255, 255, .5);
}