Teamwork.com Sprucely Branding by sprucelydesigned

/* ==UserStyle==
@name         Teamwork.com Sprucely Branding
@version      20250313.22.44
@namespace    https://userstyles.world/user/sprucelydesigned
@description  Custom branding for Sprucely Designed's internal support and project tooling.
@author       sprucelydesigned
@license      GPLv3
==/UserStyle== */

@-moz-document domain("team.sprucely.net") {
/* Sprucely Branding */
/* Global Variables for Repeated Styles */
:root {
    /* Branding Colors */
    --primary-color: #415e85;
    /* Main branding color */
    --primary-hover-color: #418580;
    /* Hover state for primary color */
    --secondary-color: #e3ecf8;
    /* Light secondary color */
    --secondary-hover-color: #cfdbe9;
    /* Hover state for secondary color */
    --button-text-color: #ffffff;
    /* Button text color */
    --sidebar-icon-color-surface: #e3ecf8;
    --sidebar-selected-color: #e3ecf8;
    /* Selected item color in sidebar */
    --sidebar-hover-bg-color: #242736;
    /* Hover background for sidebar */
    --sidebar-focus-bg-color: #8f9fe7;
    /* Focus background for sidebar */
    --sidebar-notification-badge-color: #ff61c7;
    /* Sidebar notification badge */
    --sidebar-profile-color: #e3ecf8;
    --sidebar-profile-subtle-color: #e3ecf8;

    /* Typography */
    --font-primary: "Nunito", sans-serif;
    --font-secondary: "Paytone One", sans-serif;
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Borders and Shadows */
    --border-radius-small: 8px;
    --border-radius-medium: 12px;
    --border-radius-large: 16px;
    --shadow-soft: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.2);

    /* Accessibility Focus States */
    --focus-ring-color: #418580;
    --focus-ring-width: 2px;
}

/* Global Styles for Branding */
/* Typography */
body {
    font-family: var(--font-primary);
    color: var(--primary-color) !important;
}

/* Headings */
h1,
h2:not(.subject-cell__subject-title, .new-subject-cell__subject-title),
.w-toolbar.pageHeader > .tw-toolbar-title > span,
header > span.project-list-main--header-title {
    font-family: var(--font-secondary);
    color: var(--primary-color) !important;
    font-weight: var(--font-weight-regular) !important;
}

h3,
h4,
h5,
h6 {
    font-family: var(--font-primary);
    color: var(--primary-color) !important;
}

/* Links */
a {
    color: var(--primary-color);
}
a:hover,
a:focus {
    color: var(--primary-hover-color);
}

/* Logo */
#app .desk-logo svg {
    display: none;
}
#app .desk-logo {
    background-image: url(https://www.sprucely.net/wp-content/uploads/2025/03/sprucely-icon-color-light.svg);
    background-position: center;
    background-repeat: no-repeat;
}

#app,
:root {
    /* Button Styles */
    --lsds-c-button-color-bg-primary-default: var(--primary-color) !important;
    /* Primary button background */
    --lsds-c-button-color-bg-primary-hover: var(--primary-hover-color);
    /* Hover state */
    --lsds-c-button-color-bg-secondary-default: var(--secondary-color);
    /* Secondary button background */
    --lsds-c-button-color-text-primary-default: var(--button-text-color);
    /* Button text color */
    --lsds-c-button-color-text-secondary-default: var(--primary-color) !important;
    --btn-text-color-hover: var(--button-text-color);
    --lsds-a-color-action-primary-default: var(--primary-color);
    --lsds-a-color-action-primary-hover: var(--primary-hover-color);
    --lsds-a-color-action-primary-pressed: var(--primary-hover-color);

    /* Typography */
    --lsds-g-font-family-default: var(--font-primary);
    --lsds-g-font-weight-regular: var(--font-weight-regular);
    --lsds-g-font-weight-semibold: var(--font-weight-semibold);
    --lsds-a-typography-heading-1-font-family: var(--font-secondary);
    --lsds-a-typography-heading-1-font-size: 32px;
    --lsds-a-typography-heading-1-line-height: 1.2;
    --lsds-a-color-text-default: var(--primary-color);
    /* Default text color */
    /* Borders */
    --lsds-g-border-rounded-pill: var(--border-radius-small);
    --lsds-g-border-rounded-circle: var(--border-radius-small);

    /* Backgrounds */
    --lsds-a-color-background-default: var(--secondary-color) !important;
    /* Page background */
    --lsds-a-color-background-hover: var(--secondary-hover-color);
    /* Hover state */
    --lsds-a-color-surface-dark: var(--primary-color) !important;
    --lsds-g-palette-white: var(--secondary-color);

    /* Sidebar-Specific Styles */
    --lsds-c-sidebar-drawer-color-surface: var(--primary-color) !important;
    --lsds-c-sidebar-drawer-icon-color-on-surface: var(--sidebar-icon-color-surface);
    --lsds-c-sidebar-drawer-icon-color-on-selected: var(--sidebar-selected-color);
    --lsds-c-sidebar-drawer-list-item-color-on-selected: var(--sidebar-selected-color);
    --lsds-c-sidebar-drawer-list-item-background-color-on-hover: var(--sidebar-hover-bg-color);
    --lsds-c-sidebar-drawer-list-item-background-color-on-focus: var(--sidebar-focus-bg-color);
    --lsds-c-sidebar-drawer-notifications-badge-color-surface: var(--sidebar-notification-badge-color);
    --lsds-c-sidebar-drawer-profile-color-on-surface: var(--sidebar-profile-color);
    --lsds-c-sidebar-drawer-profile-color-on-surface-subtle: var(--sidebar-profile-subtle-color);
    --lsds-c-sidebar-drawer-list-item-color-on-hover: var(--sidebar-selected-color);
}

/* Sidebar */
.app-sidebar {
    background-color: var(--secondary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Hide Individual Inboxes Feature */
#app .individual-inboxes-heading,
#app .add-inbox-btn-container {
    display: none;
}

.tickets {
    --lsds-a-color-background-default: initial;
}

#app button.time-tracking__btn.secondary {
    background-color: var(--primary-color);
}
#app button.time-tracking__btn:hover.secondary,
#app .time-tracking__time-log.secondary {
    background-color: var(--primary-hover-color);
}
#app button.btn.btn--weight-light.btn--size-default.btn--clr-primary.btn--clr-text-default.ticket-status-button {
    background-color: var(--primary-hover-color)!important;
}
}