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