moment.team by emsixteen

/* ==UserStyle==
@name         moment.team
@version      20211203.08.48
@namespace    userstyles.world/user/emsixteen
@description  Trying to improve the usability, appearance and clarity of Moment.
@author       emsixteen
@license      No License
==/UserStyle== */

@-moz-document url-prefix("app.moment.team"), domain("moment.team"), regexp("(.*\\.)?moment\\.team.*") {
:root {
    --block-padding-step: 1.5rem;
    --card-radius: 10px;
    --btn-radius: 5px;
    --grey-50: #F9FAFB;
    --grey-100: #F3F4F6;
    --grey-200: #E5E7EB;
    --grey-300: #D1D5DB;
    --grey-400: #9CA3AF;
    --grey-500: #6B7280;
    --grey-600: #4B5563;
    --grey-700: #374151;
    --grey-800: #1F2937;
    --grey-900: #111827;
    --blue-50: #EFF6FF;
    --blue-100: #DBEAFE;
    --blue-200: #BFDBFE;
    --blue-300: #93C5FD;
    --blue-400: #60A5FA;
    --blue-500: #3B82F6;
    --blue-600: #2563EB;
    --blue-700: #1D4ED8;
    --blue-800: #1E40AF;
    --blue-900: #1E3A8A;
    --red-50: #FEF2F2;
    --red-100: #FEE2E2;
    --red-200: #FECACA;
    --red-300: #FCA5A5;
    --red-400: #F87171;
    --red-500: #EF4444;
    --red-600: #DC2626;
    --red-700: #B91C1C;
    --red-800: #991B1B;
    --red-900: #7F1D1D;
    --green-50: #ECFDF5;
    --green-100: #D1FAE5;
    --green-200: #A7F3D0;
    --green-300: #6EE7B7;
    --green-400: #34D399;
    --green-500: #10B981;
    --green-600: #059669;
    --green-700: #047857;
    --green-800: #065F46;
    --green-900: #064E3B;
    --color-authentic-style: var(--blue-900);
    --color-blue: var(--blue-900);
    --color-deep-blue-light: var(--blue-100);
}


/** --------------------------------------------------
 * These styles are in the shadow DOM and need these to work:
 * - TamperMonkey (not GreaseMonkey or Firemonkey), and
 * - https://greasyfork.org/en/scripts/424030-stylus-shadow-dom-support/code
 */
.panel-body {
    padding: var(--block-padding-step);
}

.panel.panel-default.panel-material > .panel-heading,
.issue-page .task-header .task-header-top {
    height: auto;
    border-color: var(--blue-900);
    background-color: var(--blue-100);
    color: var(--blue-900);
}

/* Paddings ------------------------------------------ */
.issue-page.row > [class^="col-"] {
    padding-right: var(--block-padding-step);
    padding-left: var(--block-padding-step);
}

[class^="col"] > .task-header {
    padding-right: var(--block-padding-step);
    padding-left: var(--block-padding-step);
}

.row {
    margin-left: calc(-1 * var(--block-padding-step));
    margin-right: calc(-1 * var(--block-padding-step));
}

.task-header-top.row > .col-md-12 {
    padding-left: 0;
    padding-right: 0;
}

.issue-page .task-header .task-header-top {
    margin-bottom: .5em;
    padding: 1em;
}

/* Typography */
.panel-title {
    font-size: .875rem;
    line-height: 2;
}

.text-danger,
.timeGrid.gridEditor .lines .line.summary.delta .entry .minus,
.timeGrid.gridEditor .lines .line.summary.delta .sum .minus,
.timeGrid.gridEditor .lines .line.summary.delta .title .minus {
    color: var(--red-600);
}

.timeGrid.gridEditor .lines .line.header .entry.holiday {
    color: var(--grey-300);
}

.timeGrid.gridEditor .lines .line.summary.delta .entry .plus,
.timeGrid.gridEditor .lines .line.summary.delta .sum .plus,
.timeGrid.gridEditor .lines .line.summary.delta .title .plus {
    color: var(--green-600);
}

/* Make editable sections look editable.. -------------- */
.inline-editable,
[class*="inline-editable"]:not(.panel-body) {
    outline: 1px dashed;
    outline-offset: 2px;
    outline-color: var(--red-300);
    margin: 2px;
}

/* Inputs and interactables ---------------------------- */
.issue-page .task-header .task-header-top input:checked + .slider {
    background-color: var(--green-500);
}

.fa-trash-o {
    color: var(--red-500);
}

.tags-chooser > .tags-chooser-tag {
    display: inline-block;
}

/* Buttons --------------------------------------------- */
.panel-body .btn:not(.no-padding):not(#deleteButton) {
    background: var(--blue-100);
    border: 1px solid var(--blue-300);
    padding: .5em 1em !important;
    border-radius: var(--btn-radius);
    font-size: .875rem;
    color: var(--blue-900);
}

.panel-body .btn:not(.no-padding):not(#deleteButton):hover {
    background-color: var(--blue-200);
    color: var(--blue-600);
    text-decoration: none;
}

.ant-btn-primary,
.ant-btn-primary,
.tb-btn-group .btn-default.active,
.btn-primary,
.btn-info {
    background-color: var(--blue-700);
    border-color: var(--blue-700);
}

.ant-btn-primary:hover,
.ant-btn-primary:focus,
.btn-primary:hover,
.btn-info:hover,
.btn-primary:focus,
.btn-info:focus,
.btn-primary.focus,
.btn-info.focus,
.btn-primary:active,
.btn-info:active,
.btn-primary.active,
.btn-info.active,
.open > .dropdown-toggle.btn-primary,
.open > .dropdown-toggle.btn-info {
    background-color: var(--blue-800);
    border-color: var(--blue-800);
}

.issues-list .issues-window .vertical-toggler .toggler-button,
.gu-mirror .issues-window .vertical-toggler .toggler-button {
    background-color: var(--blue-100);
    border: 1px solid var(--blue-200);
    color: var(--blue-400);
}

.issues-list .issues-window .vertical-toggler .toggler-button:hover,
.gu-mirror .issues-window .vertical-toggler .toggler-button:hover {
    background-color: var(--blue-200);
    border: 1px solid var(--blue-300);
    color: var(--blue-600);
}

.issues-list .issues-window .vertical-toggler,
.gu-mirror .issues-window .vertical-toggler {
    border-top-color: var(--grey-300);
}

.btn-success {
    background-color: var(--green-100);
    color: var(--green-900);
    border-color: var(--green-400);
}

.btn-success:hover {
    background-color: var(--green-200);
    color: var(--green-900);
    border-color: var(--green-500);
}

/* Timer */
#timerContainer {
    bottom: .5rem;
    right: 1.5rem;
    border-radius: var(--card-radius);
    overflow: hidden;
    border: 1px solid var(--blue-700);
    box-shadow: none;
}

#timerContainer .timer-box-header {
    background: var(--blue-700);
    color: var(--blue-50);
    box-sizing: border-box;
    border-radius: 0;
    box-shadow: none;
}

#timerContainer .timer-box-body {
    padding: 1em;
    box-sizing: border-box;
    border: 0;
    text-align: center;
    background-color: var(--grey-200);
    box-shadow: none;
}

#timerContainer .timer-box-body .time-container {
    padding: .25rem 1rem 1rem 1rem;
}

#timerAction {
    background-color: var(--green-500);
    border: 1px solid var(--green-600);
}

#timerAction:hover {
    background-color: var(--green-700);
    border: 1px solid var(--green-800);
}

#stop {
    background-color: var(--red-500);
    border: 1px solid var(--red-600);
}

#stop:hover {
    background-color: var(--red-700);
    border: 1px solid var(--red-800);
}

#timerContainer .btn {
    color: #fff;
    border-radius: var(--btn-radius);
}

/* Footer */
.application-footer {
    height: min-content;
    background: var(--blue-50);
    padding: 0;
    margin: 0;
    display: none;
}

.application-footer .ant-col {
    margin-bottom: 0;
    padding: .25em;
}

/* Issues (oppgaver) list ------------------------------- */
.issues-list .sorted-issues-list,
.gu-mirror .sorted-issues-list {
    height: 100%;
}

.sorted-issues-list > div {
    margin-left: .5em;
    margin-right: .5em;
}

.sorted-issues-list > div > .panel.panel-default.panel-material {
    border-radius: var(--btn-radius);
    overflow: hidden;
}

.issues-list #tagsContainer:empty {
    display: none!important;
}

.issues-list #tagsContainer,
.gu-mirror #tagsContainer {
    background-color: var(--grey-100);
    border: 1px solid var(--grey-300);
    border-radius: var(--btn-radius);
    padding: .25em 0 .25em .75em;
    font-size: 12px;
    color: var(--grey-700);
    font-weight: bold;
    pointer-events: none;
}

.issues-list #tagsContainer span,
.gu-mirror #tagsContainer span {
    font-weight: normal;
}

.issues-list .sorted-issues-list .load-status-msg,
.gu-mirror .sorted-issues-list .load-status-msg {
    background-color: var(--green-100);
    display: inline-block;
    margin: 0 auto;
    width: auto;
}

/* Time grid --------------------------------------------- */
.timeGrid.gridEditor .lines .line .today {
    background-color: var(--green-50);
}

/* Task board -------------------------------------------- */
.tags-chooser > .tags-chooser-tag {
    margin-right: 1em;
    margin-bottom: .5em;
}

.issues-list .details-container {
    color: var(--grey-600);
}

.issues-list .details-container a {
    color: var(--grey-600);
    text-decoration: 1px dotted underline;
    text-decoration-color: var(--blue-500);
}

/* --------------------------------------------------------
    Colour coding due dates etc 
    - div# specifics needed because of inputs on task board
 */
div#dueDate,
div#progress {
    text-align: center;
    padding: .1em;
    margin-top: .25em;
    min-width: min-content;
}

div#dueDate:not(.text-danger),
div#progress:not(.text-danger) {
    color: var(--green-600);
    background: var(--green-50);
    border: 1px solid var(--green-200);
}

div#dueDate.text-danger,
div#progress.text-danger {
    color: var(--red-600);
    background: var(--red-50);
    border: 1px solid var(--red-200);
}

/* File upload box */
.fileUpload {
    background: var(--green-50);
    border-color: var(--green-600);
    color: var(--green-600);
}

/* Task progress bar */
.progress-bar-success {
    background-color: var(--green-500);
    box-shadow: none;
}

.progress-bar-danger {
    background-color: var(--red-500);
    box-shadow: none;
}

/* Sidebar menu -------------------------------------------- */
aside.ant-pro-sider .ant-menu {
    background: var(--grey-900)!important;
}

/* Top level title div, text then inside */
aside.ant-pro-sider .ant-menu .ant-menu-submenu-title {
    background: var(--grey-800);
    border-bottom: 1px solid var(--grey-700);
}

.ant-pro-sider .ant-menu-sub.ant-menu-inline > .ant-menu-item,
.ant-pro-sider .ant-menu-sub.ant-menu-inline > .a...