computer-playbook/roles/web-app-taiga/templates/style.css.j2

:host,
:root {
  --infinito-taiga-canvas: var(--color-01-90);
  --infinito-taiga-surface: rgba(var(--color-rgb-01-86), 0.96);
  --infinito-taiga-surface-strong: rgba(var(--color-rgb-01-82), 0.98);
  --infinito-taiga-surface-soft: rgba(var(--color-rgb-01-79), 0.94);
  --infinito-taiga-surface-card: rgba(var(--color-rgb-01-84), 0.92);
  --infinito-taiga-surface-card-hover: rgba(var(--color-rgb-01-80), 0.94);
  --infinito-taiga-overlay: rgba(var(--color-rgb-01-93), 0.78);
  --infinito-taiga-border: rgba(var(--color-rgb-01-55), 0.30);
  --infinito-taiga-border-strong: rgba(var(--color-rgb-01-45), 0.48);
  --infinito-taiga-line: rgba(var(--color-rgb-01-25), 0.18);
  --infinito-taiga-shadow: 0 18px 40px rgba(var(--color-rgb-01-01), 0.08);
  --infinito-taiga-glow: 0 0 0 1px rgba(var(--color-rgb-01-45), 0.08), 0 18px 40px rgba(var(--color-rgb-01-01), 0.06);
  --infinito-taiga-heading: var(--color-01-18);
  --infinito-taiga-text: var(--color-01-22);
  --infinito-taiga-text-soft: var(--color-01-34);
  --infinito-taiga-text-muted: var(--color-01-46);
  --infinito-taiga-link: var(--color-01-35);
  --infinito-taiga-link-hover: var(--color-01-25);
  --infinito-taiga-warm: var(--color-01-42);
  --infinito-taiga-warm-hover: var(--color-01-32);
  --infinito-taiga-cool: var(--color-01-40);
  --infinito-taiga-cool-hover: var(--color-01-30);
  --infinito-taiga-success: var(--color-01-38);
  --infinito-taiga-success-hover: var(--color-01-28);
  --infinito-taiga-danger: var(--color-07-55);
  --infinito-taiga-danger-hover: var(--color-07-62);
  --infinito-taiga-badge: var(--color-01-40);
  --infinito-taiga-badge-soft: rgba(var(--color-rgb-01-40), 0.16);

  --color-01-solid-primary: var(--infinito-taiga-cool);
  --color-01-link-primary: var(--infinito-taiga-link);
  --color-01-link-tertiary: var(--infinito-taiga-link-hover);
  --color-01-gray100: var(--color-01-93);
  --color-01-gray200: var(--color-01-87);
  --color-01-gray300: var(--color-01-78);
  --color-01-gray400: var(--color-01-62);
  --color-01-black600: var(--color-01-38);
  --color-01-black700: var(--color-01-30);
  --color-01-black800: var(--color-01-18);
  --color-01-black900: var(--color-01-10);
  --color-01-black: var(--color-01-03);
  --color-01-white: var(--color-01-99);
}

div.master,
.blocked-project-detail,
.transfer-project {
  background:
    radial-gradient(circle at top right, rgba(var(--color-rgb-01-72), 0.08), transparent 30%),
    linear-gradient(
      {{ CSS_GRADIENT_ANGLE }}deg,
      rgba(var(--color-rgb-01-90), 0.98),
      rgba(var(--color-rgb-01-88), 0.97),
      rgba(var(--color-rgb-01-92), 0.94)
    );
  color: var(--infinito-taiga-text);
}

.wrapper,
.main,
.profile .main,
section.main.kanban {
  background-color: transparent;
  color: var(--infinito-taiga-text);
}

div.master h1,
div.master h2,
div.master h3,
div.master h4,
div.master h5,
div.master h6 {
  color: var(--infinito-taiga-heading);
}

div.master h1 a,
div.master h2 a,
div.master h3 a,
div.master h4 a,
div.master h5 a,
div.master h6 a,
div.master a,
div.master a:visited {
  color: var(--infinito-taiga-link);
}

div.master a:hover,
div.master a:visited:hover,
.btn-link:hover,
.btn-link[variant="icon"]:hover {
  color: var(--infinito-taiga-link-hover);
}

div.master hr,
.profile-bar .profile-stats,
.profile-timeline,
.profile-timeline .activity-item,
.project-details .get-feedback,
.project-details .looking-for-people,
.transfer-project-detail,
.project-list-wrapper .dropdown-project-list-ul {
  border-color: var(--infinito-taiga-line);
}

.menu-secondary,
.menu-secondary li,
.menu-secondary .settings-nav,
.menu-tertiary {
  background:
    linear-gradient(
      {{ CSS_GRADIENT_ANGLE }}deg,
      rgba(var(--color-rgb-01-84), 0.96),
      rgba(var(--color-rgb-01-86), 0.97),
      rgba(var(--color-rgb-01-88), 0.98)
    );
  color: var(--infinito-taiga-text-soft);
}

.menu-secondary,
.menu-tertiary {
  border-right: 1px solid var(--infinito-taiga-border);
  box-shadow: inset -1px 0 0 rgba(var(--color-rgb-01-01), 0.06);
}

.menu-secondary li a,
.menu-tertiary ul li a {
  color: var(--infinito-taiga-text-soft);
}

.menu-secondary li:hover,
.menu-secondary li:hover a,
.menu-tertiary ul li:hover,
.menu-tertiary ul li:hover a {
  background: rgba(var(--color-rgb-01-45), 0.12);
  color: var(--infinito-taiga-heading);
}

.menu-secondary li .active,
.menu-secondary li .active:hover {
  background: rgba(var(--color-rgb-01-82), 0.98);
  box-shadow: inset 3px 0 0 var(--infinito-taiga-cool);
}

.menu-secondary li .active a,
.menu-secondary li .active:hover a,
.menu-tertiary ul li.active a,
.menu-tertiary ul li.active a:hover {
  background: transparent;
  color: var(--infinito-taiga-link);
}

.menu-tertiary ul li.active {
  background: rgba(var(--color-rgb-01-45), 0.14);
}

.project-list-wrapper .project-list-title,
.project-values-title,
.home-wrapper .title-bar,
div.kanban-header,
.kanban-table-header .task-colum-name {
  background:
    linear-gradient(
      {{ CSS_GRADIENT_ANGLE }}deg,
      rgba(var(--color-rgb-01-75), 0.95),
      rgba(var(--color-rgb-01-78), 0.98),
      rgba(var(--color-rgb-01-82), 0.97)
    );
  border: 1px solid var(--infinito-taiga-border);
  box-shadow: var(--infinito-taiga-glow);
  color: var(--infinito-taiga-heading);
}

.project-list-wrapper .project-list-title h1,
.project-values-title h2,
.discover-results-header h2,
.discover-results-header .title,
section.kanban h1,
section.kanban h2 {
  color: var(--infinito-taiga-heading);
}

.discover-header form,
.dropdown-project-list .navbar-dropdown,
.lightbox section,
.lightbox form,
.home-project,
.project-list-wrapper .list-itemtype-project,
.project-list-wrapper .gu-mirror,
.single-project,
.highlighted-project,
.featured-project,
.profile-bar,
.project-details .project-details-form-data,
.project-details .project-details-image,
.profile-timeline,
.notification-light {
  background:
    linear-gradient(
      {{ CSS_GRADIENT_ANGLE }}deg,
      rgba(var(--color-rgb-01-84), 0.97),
      rgba(var(--color-rgb-01-86), 0.96),
      rgba(var(--color-rgb-01-88), 0.94)
    );
  border: 1px solid var(--infinito-taiga-border);
  box-shadow: var(--infinito-taiga-shadow);
  color: var(--infinito-taiga-text);
}

.dropdown-project-list .navbar-dropdown:after {
  border-bottom-color: rgba(var(--color-rgb-01-84), 0.97);
}

.dropdown-project-list .navbar-dropdown:before {
  border-bottom-color: rgba(var(--color-rgb-01-55), 0.22);
}

.project-list-wrapper .list-itemtype-project:hover,
.lightbox-select-user .user-list-single.selected,
.lightbox-select-user .user-list-single:hover,
.lightbox-create-edit .pop-users .user-list-single.selected,
.lightbox-create-edit .pop-users .user-list-single:hover,
.ticket-user-list .user-list-single:hover:not(.read-only),
.dropdown-project-list .dropdown-project-list-link.active,
.dropdown-project-list .dropdown-project-list-link:hover,
.create-project-selector li:hover {
  background: rgba(var(--color-rgb-01-45), 0.12);
  border-color: rgba(var(--color-rgb-01-45), 0.34);
}

.project-list-wrapper .gu-transit {
  background: rgba(var(--color-rgb-01-45), 0.14);
  border: 1px dashed var(--infinito-taiga-border-strong);
}

.project-list-wrapper .help-area,
.project-details .private-or-public,
.transfer-project-statistics .transfer-project-members,
.transfer-project-statistics .transfer-project-private,
.profile-bar h2,
.profile-bar .username,
.profile-bar .location,
.profile-timeline .activity-item .activity-date,
.profile-timeline .activity-item .activity-info,
.discover-header .project-number,
.discover-results-header svg,
.dropdown-project-list .dropdown-project-list-desc {
  color: var(--infinito-taiga-text-muted);
}

.project-details .private-or-public svg,
.transfer-project-statistics svg,
.discover-results-header svg,
.discover-header .search-button,
.dropdown-project-list .dropdown-project-list-projects .icon-folder svg,
.project-list-wrapper .icon-badge,
.featured-project .project-card-header .icon-badge,
.highlighted-project .project-logo .icon-badge,
.home-project .project-card-header .icon-badge,
.single-project .involved-team .icon-badge,
.table-team .icon-badge {
  fill: var(--infinito-taiga-cool);
  stroke: var(--infinito-taiga-cool);
}

.dropdown-project-list .dropdown-project-list-ul {
  border-bottom-color: rgba(var(--color-rgb-01-45), 0.32);
}

.dropdown-project-list .dropdown-project-list-projects,
.dropdown-project-list .create-project-btn span,
.dropdown-project-list h2,
.dropdown-project-list .see-more-projects-btn {
  color: var(--infinito-taiga-heading);
}

.dropdown-project-list .dropdown-project-list-projects span {
  color: var(--infinito-taiga-link);
}

.dropdown-project-list .dropdown-project-list-link.active,
.dropdown-project-list .dropdown-project-list-link:hover {
  color: var(--infinito-taiga-link);
}

.dropdown-project-list:hover .dropdown-project-list-projects,
.dropdown-project-list.active .dropdown-project-list-projects {
  background: rgba(var(--color-rgb-01-45), 0.12);
}

.dropdown-project-list:hover .dropdown-project-list-projects span,
.dropdown-project-list.active .dropdown-project-list-projects span {
  color: var(--infinito-taiga-link);
}

.dropdown-project-list .create-project-btn svg {
  fill: var(--infinito-taiga-cool);
  stroke: var(--infinito-taiga-cool);
}

.dropdown-project-list .create-project-btn:hover span,
.dropdown-project-list .create-project-btn:hover svg {
  color: var(--infinito-taiga-heading);
  fill: var(--infinito-taiga-heading);
  stroke: var(--infinito-taiga-heading);
}

div.master input[type="date"],
div.master input[type="email"],
div.master input[type="number"],
div.master input[type="password"],
div.master input[type="search"],
div.master input[type="text"],
div.master input[type="url"],
div.master select,
div.master textarea,
.discover-header input[type="text"],
.lightbox-generic-bulk .bulk-status-selector {
  background:
    linear-gradient(
      {{ CSS_GRADIENT_ANGLE }}deg,
      rgba(var(--color-rgb-01-88), 0.96),
      rgba(var(--color-rgb-01-90), 0.94),
      rgba(var(--color-rgb-01-92), 0.92)
    );
  border: 2px solid var(--infinito-taiga-border-strong);
  color: var(--infinito-taiga-text);
  box-shadow: inset 0 1px 0 rgba(var(--color-rgb-01-01), 0.04);
}

div.master input[type="date"]::-webkit-input-placeholder,
div.master input[type="email"]::-webkit-input-placeholder,
div.master input[type="number"]::-webkit-input-placeholder,
div.master input[type="password"]::-webkit-input-placeholder,
div.master input[type="search"]::-webkit-input-placeholder,
div.master input[type="text"]::-webkit-input-placeholder,
div.master input[type="url"]::-webkit-input-placeholder,
div.master select::-webkit-input-placeholder,
div.master textarea::-webkit-input-placeholder,
input.ng-empty::placeholder,
.ng-empty::placeholder {
  color: rgba(var(--color-rgb-01-35), 0.62);
}

div.master input[type="date"]::-moz-placeholder,
div.master input[type="email"]::-moz-placeholder,
div.master input[type="number"]::-moz-placeholder,
div.master input[type="password"]::-moz-placeholder,
div.master input[type="search"]::-moz-placeholder,
div.master input[type="text"]::-moz-placeholder,
div.master input[type="url"]::-moz-placeholder,
div.master select::-moz-placeholder,
div.master textarea::-moz-placeholder {
  color: rgba(var(--color-rgb-01-35), 0.62);
}

div.master input[type="date"]:focus,
div.master input[type="email"]:focus,
div.master input[type="number"]:focus,
div.master input[type="password"]:focus,
div.master input[type="search"]:focus,
div.master input[type="text"]:focus,
div.master input[type="url"]:focus,
div.master select:focus,
div.master textarea:focus,
.discover-header input[type="text"]:focus,
.lightbox-generic-bulk .bulk-status-selector.active {
  border-color: var(--infinito-taiga-cool);
  box-shadow:
    inset 0 1px 0 rgba(var(--color-rgb-01-01), 0.04),
    0 0 0 3px rgba(var(--color-rgb-01-40), 0.18);
  outline: 0;
}

div.master input[type="date"].checksley-error,
div.master input[type="email"].checksley-error,
div.master input[type="number"].checksley-error,
div.master input[type="password"].checksley-error,
div.master input[type="search"].checksley-error,
div.master input[type="text"].checksley-error,
div.master input[type="url"].checksley-error,
div.master select.checksley-error,
div.master textarea.checksley-error {
  border-color: rgba(var(--color-rgb-07-55), 0.42);
}

div.master input[type="date"].checksley-error:focus,
div.master input[type="email"].checksley-error:focus,
div.master input[type="number"].checksley-error:focus,
div.master input[type="password"].checksley-error:focus,
div.master input[type="search"].checksley-error:focus,
div.master input[type="text"].checksley-error:focus,
div.master input[type="url"].checksley-error:focus,
div.master select.checksley-error:focus,
div.master textarea.checksley-error:focus {
  border-color: var(--infinito-taiga-danger);
  box-shadow:
    inset 0 1px 0 rgba(var(--color-rgb-01-01), 0.04),
    0 0 0 3px rgba(var(--color-rgb-07-55), 0.18);
}

.discover-header .search-button:hover,
.discover-search .discover-header .search-button:hover {
  fill: var(--infinito-taiga-link-hover);
}

.btn-big,
.btn-board,
.btn-filter,
.btn-icon,
.btn-small,
.button-green,
.button-primary,
.button-secondary,
.button-gray,
.button-gray-light,
.button-red,
.button-red-light {
  border: 1px solid transparent;
  box-shadow: 0 10px 24px rgba(var(--color-rgb-01-01), 0.06);
}

.btn-big,
.btn-board,
.btn-filter,
.btn-icon,
.btn-small {
  background:
    linear-gradient(
      {{ CSS_GRADIENT_ANGLE }}deg,
      var(--color-01-62),
      var(--infinito-taiga-warm),
      var(--color-01-58)
    );
  color: var(--color-01-99);
}

.btn-big:hover,
.btn-board:hover,
.btn-filter:hover,
.btn-icon:hover,
.btn-small:hover,
.btn-big[variant="secondary"]:hover,
.btn-board[variant="secondary"]:hover,
.btn-filter[variant="secondary"]:hover,
.btn-icon[variant="secondary"]:hover,
.btn-small[variant="secondary"]:hover {
  background:
    linear-gradient(
      {{ CSS_GRADIENT_ANGLE }}deg,
      var(--infinito-taiga-warm),
      var(--infinito-taiga-warm-hover),
      var(--color-01-48)
    );
  color: var(--color-01-99);
}

.btn-small[variant="primary"],
.btn-big[variant="primary"],
.btn-board[variant="primary"],
.btn-filter[variant="primary"],
.btn-icon[variant="primary"],
.button-green,
.button-primary {
  background:
    linear-gradient(
      {{ CSS_GRADIENT_ANGLE }}deg,
      var(--color-01-48),
      var(--infinito-taiga-success),
      var(--color-01-44)
    );
  border: 1px solid var(--infinito-taiga-border);
  color: var(--color-01-99);
}

.btn-small[variant="primary"]:hover,
.btn-big[variant="primary"]:hover,
.btn-board[variant="primary"]:hover,
.btn-filter[variant="primary"]:hover,
.btn-icon[variant="primary"]:hover,
.button-green:hover,
.button-primary:hover {
  background:
    linear-gradient(
      {{ CSS_GRADIENT_ANGLE }}deg,
      var(--infinito-taiga-success),
      var(--infinito-taiga-success-hover),
      var(--color-01-34)
    );
  color: var(--color-01-99);
}

.btn-small[variant="secondary"],
.btn-big[variant="secondary"],
.btn-board[variant="secondary"],
.btn-filter[variant="secondary"],
.btn-icon[variant="secondary"],
.button-secondary,
.button-gray,
.button-gray-light {
  background:
    linear-gradient(
      {{ CSS_GRADIENT_ANGLE }}deg,
      rgba(var(--color-rgb-01-78), 0.96),
      rgba(var(--color-rgb-01-82), 0.97),
      rgba(var(--color-rgb-01-85), 0.98)
    );
  border-color: rgba(var(--color-rgb-01-55), 0.34);
  color: var(--infinito-taiga-text);
}

.btn-small[variant="destructive"],
.btn-big[variant="destructive"],
.btn-board[variant="destructive"],
.btn-filter[variant="destructive"],
.btn-icon[variant="destructive"],
.button-red,
.button-red-light {
  background:
    linear-gradient(
      {{ CSS_GRADIENT_ANGLE }}deg,
      var(--color-07-45),
      var(--infinito-taiga-danger),
      var(--color-07-62)
    );
  border: 1px solid var(--infinito-taiga-border);
  color: var(--color-01-99);
}

.btn-small[variant="destructive"]:hover,
.btn-big[variant="destructive"]:hover,
.btn-board[variant="destructive"]:hover,
.btn-filter[variant="destructive"]:hover,
.btn-icon[variant="destructive"]:hover,
.button-red:hover,
.button-red-light:hover {
  background:
    linear-gradient(
      {{ CSS_GRADIENT_ANGLE }}deg,
      var(--infinito-taiga-danger),
      var(--infinito-taiga-danger-hover),
      var(--color-07-68)
    );
  color: var(--color-01-99);
}

.btn-big:disabled,
.btn-board:disabled,
.btn-filter:disabled,
.btn-icon:disabled,
.btn-small:disabled,
.button-green[disabled],
.button-primary[disabled],
.button-secondary[disabled],
.button-gray[disabled],
.button-gray-light[disabled],
.button-red[disabled],
.button-red-light[disabled],
.button.disabled,
.button[disabled],
.disabled.button-green,
.disabled.button-primary,
.disabled.button-secondary,
.disabled.button-gray,
.disabled.button-gray-light,
.disabled.button-red,
.disabled.button-red-light {
  background: rgba(var(--color-rgb-01-80), 0.8);
  border-color: rgba(var(--color-rgb-01-65), 0.24);
  color: rgba(var(--color-rgb-01-35), 0.5);
  box-shadow: none;
}

.btn-link,
.btn-link[variant="icon"],
.project-details .use-default-image,
.project-details .delete-project,
.lightbox-sprint-add-edit .delete-sprint,
.transfer-project-comment-link,
.lightbox-select-user .add-comment a {
  color: var(--infinito-taiga-link);
}

.btn-link tg-svg,
.btn-link[variant="icon"] tg-svg {
  fill: currentColor;
}

.lightbox {
  background: var(--infinito-taiga-overlay);
  color: var(--infinito-taiga-text);
}

.lightbox h2,
.lightbox-generic-error h2,
.lightbox-generic-loading h2,
.lightbox-generic-success h2 {
  color: var(--infinito-taiga-heading);
}

.lightbox .close,
.lightbox-select-user .add-comment .icon-close,
.transfer-project-comment-header .icon-close {
  color: var(--infinito-taiga-text-muted);
}

.lightbox-select-user .add-comment .icon-close,
.transfer-project-comment-header .icon-close {
  fill: currentColor;
}

.lightbox-generic-bulk .bulk-status-option-wrapper {
  background: var(--infinito-taiga-surface-strong);
  border: 1px solid var(--infinito-taiga-border);
  box-shadow: var(--infinito-taiga-shadow);
}

.lightbox-generic-bulk .bulk-status-option,
.lightbox-generic-bulk .bulk-status-option.selected {
  color: var(--infinito-taiga-link);
}

.lightbox-generic-bulk .bulk-status-option:hover {
  background: rgba(var(--color-rgb-01-45), 0.12);
}

.lightbox-generic-form .existing-or-new-selector input + label,
.lightbox-relate-to-epic .related-with-selector input + label {
  background: rgba(var(--color-rgb-01-78), 0.7);
  border: 1px solid rgba(var(--color-rgb-01-60), 0.3);
  color: var(--infinito-taiga-text-soft);
}

.lightbox-generic-form .existing-or-new-selector input + label:hover,
.lightbox-relate-to-epic .related-with-selector input + label:hover {
  background: rgba(var(--color-rgb-01-45), 0.18);
}

.lightbox-generic-form .existing-or-new-selector input:checked + label,
.lightbox-relate-to-epic .related-with-selector input:checked + label {
  background: var(--infinito-taiga-cool);
  color: var(--color-01-99);
}

.notification-message-success {
  background:
    linear-gradient(
      {{ CSS_GRADIENT_ANGLE }}deg,
      rgba(var(--color-rgb-01-44), 0.96),
      rgba(var(--color-rgb-01-40), 0.98),
      rgba(var(--color-rgb-01-36), 0.96)
    );
  border: 1px solid var(--infinito-taiga-border);
  box-shadow: var(--infinito-taiga-shadow);
}

.notification-message-success .warning,
.notification-message-error .warning,
.notification-light .warning,
.notification-light,
.notification-light p {
  color: var(--color-01-99);
}

.notification-message-error {
  background:
    linear-gradient(
      {{ CSS_GRADIENT_ANGLE }}deg,
      rgba(var(--color-rgb-07-45), 0.96),
      rgba(var(--color-rgb-07-55), 0.98),
      rgba(var(--color-rgb-07-60), 0.95)
    );
  border: 1px solid var(--infinito-taiga-border);
}

.notification-message-error .icon-error,
.notification-message-error .icon-close,
.notification-light .close svg {
  fill: currentColor;
}

.notification-light {
  background:
    linear-gradient(
      {{ CSS_GRADIENT_ANGLE }}deg,
      rgba(var(--color-rgb-01-82), 0.96),
      rgba(var(--color-rgb-01-85), 0.98),
      rgba(var(--color-rgb-01-88), 0.92)
    );
}

.project-details .project-details-image .image,
.single-project .project-logo img,
.highlighted-project .project-logo img {
  border: 1px solid rgba(var(--color-rgb-01-01), 0.08);
  box-shadow: var(--infinito-taiga-shadow);
}

.profile-bar .profile-edition {
  background: rgba(var(--color-rgb-01-90), 0.72);
}

.profile-bar .flag path,
.profile-bar .location path,
.project-details .get-feedback-inner svg,
.project-details .looking-for-people-selector svg {
  fill: var(--infinito-taiga-text-muted);
}

.project-values-settings svg.icon-trash,
.profile-bar .flag:hover path,
.lightbox-sprint-add-edit .delete-sprint:hover,
.lightbox-sprint-add-edit .delete-sprint:hover .icon,
.project-details .use-default-image:hover,
.project-details .delete-project:hover {
  color: var(--infinito-taiga-danger);
  fill: var(--infinito-taiga-danger);
}

.kanban.swimlane .kanban-header {
  background: none;
  border: 0;
  box-shadow: none;
}

.kanban-filter tg-filter {
  border-color: var(--infinito-taiga-border-strong);
}

div.master .detail-header,
div.master .detail-title-wrapper,
div.master .sprint-table,
div.master .backlog-table-header,
div.master .backlog-table-body,
div.master .sprint-header,
div.master .burndown-graph-container {
  background: transparent;
  color: var(--infinito-taiga-text);
}

div.master .detail-header h2,
div.master .detail-title-wrapper h2,
div.master .sprint-header h2,
div.master .backlog-table-header h2 {
  color: var(--infinito-taiga-heading);
}

div.master p,
div.master span,
div.master label,
div.master .e2e-backlog-table,
div.master .detail-body-content,
div.master .sprint-summary-data,
div.master .summary-stats {
  color: var(--infinito-taiga-text);
}

div.master .user-story-data,
div.master .task-data,
div.master .issue-data,
div.master .card-data,
div.master .us-ref,
div.master .card-title {
  color: var(--infinito-taiga-text);
}

div.master .dropdown-user,
div.master .popover,
div.master .dropdown-menu {
  background:
    linear-gradient(
      {{ CSS_GRADIENT_ANGLE }}deg,
      rgba(var(--color-rgb-01-86), 0.98),
      rgba(var(--color-rgb-01-88), 0.97),
      rgba(var(--color-rgb-01-90), 0.96)
    );
  color: var(--infinito-taiga-text);
  border: 1px solid var(--infinito-taiga-border);
}

div.master .dropdown-user a,
div.master .popover a,
div.master .dropdown-menu a {
  color: var(--infinito-taiga-link);
}