stylesheet.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: 20em;
}
.timepp-menu .view-box-content {
    background: rgba(125, 125, 125, .15);
    border: 1px rgba(125, 125, 125, .15);
    border-radius: 2px;
    padding: .7em;
}

.timepp-menu .view-clear-tasks .view-box-content {
    border: 1px #e74f4f;
}

.timepp-menu StEntry {
    width: 22em;
}

/* 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;
}

.multiline-entry-scrollbox StEntry {
    padding: .3em 1em;
}

.timepp-menu .numpicker {
    padding: 0px 2px 0px 8px;
    spacing: 2px;
    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: 2px;
}

.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 {
    height: 37px;

    /* slider trough */
    -barlevel-height: 3px;
    -barlevel-background-color: rgba(255, 255, 255, 0.2);
    -barlevel-border-width: 0;
    -barlevel-border-color: rgba(255, 255, 255, 0.2);

    /* fill style */
    -barlevel-active-background-color: #5a94dc;
    -barlevel-active-border-color: #5a94dc;

    /* overfill style (red in this case) */
    -barlevel-overdrive-color: red;
    -barlevel-overdrive-border-color: red;
    -barlevel-overdrive-separator-width: 1px;

    /* slider handler */
    -slider-handle-radius: 6px;
    -slider-handle-border-width: 1px;
    -slider-handle-border-color: #5a94dc;

    color: #5a94dc;
}

.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;
    box-shadow: none;
    background-color: rgba(255, 255, 255, .2);
    border-radius: 2px;
    width: 22em;
    padding: .4em 1em;
    font-weight: bold;
    color: #fff;
    caret-color: #fff;
    selected-color: #000;
    selection-background-color: #fff;
}

.timepp-fullscreen StEntry:focus {
    color: #fff;
    outline: 0;
    border: 0;
    box-shadow: none;
    border-image: none;
    background-color: rgba(255, 255, 255, .5);
}

.timepp-fullscreen StEntry:focus .hint-text,
.timepp-fullscreen StEntry .hint-text {
    color: rgba(255, 255, 255, .6);
}

.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 .view-task-editor {
    spacing: .7em;
}

.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: #D6740B; }
.timepp-menu .todo-section .task-item.C { border-color: #5a94dc; }
.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: #D6740B; }
.timepp-menu .todo-section .task-item.C .priority-label { color: #5a94dc; }
.timepp-menu .todo-section .task-item.D .priority-label { color: #38ae72; }

.timepp-menu .todo-section .task-item-content {
    spacing: .3em;
}

.timepp-menu .todo-section .priority-label { font-weight: bold; }
.timepp-menu .todo-section .description-label {}
.timepp-menu .todo-section .date-label {}
.timepp-menu .todo-section .todotxt-extension-dates { font-weight: bold; }

.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;
    spacing: .7em;
}

.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: .2em;
}

.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);
}