hueman-cli 0.2.0__py3-none-any.whl

hueman/templates/qutebrowser_hteam.user.js.j2

@@ -0,0 +1,962 @@
+// ==UserScript==
+// @name         hteam.mx theme
+// @description  Generated by hueman from the active palette. Do not edit by hand.
+// @match        *://hteam.mx/*
+// @match        *://www.hteam.mx/*
+// @run-at       document-start
+// ==/UserScript==
+
+// Scope (see @match above): the whole site. The landing page, the dashboard and the app
+// sections (/operations/, ...) are served from the same host. Dashboard rules are keyed on
+// app-only classes (.main-navbar, .main-sidebar, .main-content, ...) so they cannot match
+// the landing. The Board (/boards/...) and Operations (/operations/) sections follow the
+// Dashboard rules and are keyed on their own structure (#root-board, .dataTables_wrapper).
+
+{%- macro rgb(h) -%}
+{{ ('0x' ~ h[1:3]) | int(0, 16) }}, {{ ('0x' ~ h[3:5]) | int(0, 16) }}, {{ ('0x' ~ h[5:7]) | int(0, 16) }}
+{%- endmacro %}
+
+(function () {
+  // The landing is a static Bootstrap 5 / MDB page with mostly hardcoded
+  // colors, so every override uses !important to beat the site stylesheet.
+  // Background images and gradients (.home-bg, .bg-2, .footer-bgr) are left
+  // alone: only background-color is touched on surfaces.
+  const CSS = `
+/* MDB custom properties reassigned to the active palette. */
+:root,
+html,
+body {
+  color-scheme: dark !important;
+  --mdb-body-bg: {{ background }} !important;
+  --mdb-body-bg-rgb: {{ rgb(background) }} !important;
+  --mdb-body-color: {{ foreground }} !important;
+  --mdb-body-color-rgb: {{ rgb(foreground) }} !important;
+  --mdb-primary: {{ primary }} !important;
+  --mdb-primary-rgb: {{ rgb(primary) }} !important;
+  --mdb-secondary: {{ secondary }} !important;
+  --mdb-secondary-rgb: {{ rgb(secondary) }} !important;
+  --mdb-success: {{ success }} !important;
+  --mdb-success-rgb: {{ rgb(success) }} !important;
+  --mdb-danger: {{ alert }} !important;
+  --mdb-danger-rgb: {{ rgb(alert) }} !important;
+  --mdb-warning: {{ warning }} !important;
+  --mdb-warning-rgb: {{ rgb(warning) }} !important;
+  --mdb-info: {{ secondary }} !important;
+  --mdb-info-rgb: {{ rgb(secondary) }} !important;
+  /* .text-dark reads --mdb-dark-rgb, so it maps to the foreground; .bg-dark is overridden explicitly below. */
+  --mdb-dark: {{ foreground }} !important;
+  --mdb-dark-rgb: {{ rgb(foreground) }} !important;
+  --mdb-light: {{ background_alt }} !important;
+  --mdb-light-rgb: {{ rgb(background_alt) }} !important;
+}
+
+/* Page canvas and base text. */
+html,
+body {
+  background-color: {{ background }} !important;
+  color: {{ foreground }} !important;
+}
+
+/* Headings and dark-text utilities. */
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6,
+.t1, .text-dark, .section-title {
+  color: {{ foreground }} !important;
+}
+.text-muted, .blockquote-footer, .link-disabled {
+  color: {{ foreground }}b3 !important;
+}
+
+/* Links. Only unclassed anchors, so styled links keep their own rules. */
+a:not([class]), .link-primary {
+  color: {{ primary }} !important;
+}
+.primary-underlined-link {
+  color: {{ foreground }} !important;
+  border-bottom-color: {{ primary }} !important;
+}
+.primary-underlined-link::after {
+  background: {{ primary }} !important;
+}
+
+/* Navbar (fixed top, .navbar-light). */
+#navigation,
+.navbar-light {
+  background-color: {{ background_alt }} !important;
+  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .45) !important;
+}
+.navbar-light .navbar-brand,
+.navbar-light .navbar-brand:hover,
+.navbar-light .navbar-brand:focus {
+  color: {{ foreground }} !important;
+}
+.navbar-light .navbar-nav .nav-link,
+.nav-page {
+  color: {{ foreground }}b3 !important;
+}
+.navbar-light .navbar-nav .nav-link:hover,
+.navbar-light .navbar-nav .nav-link:focus,
+.navbar-light .navbar-nav .active > .nav-link,
+.navbar-light .navbar-nav .nav-link.active {
+  color: {{ primary }} !important;
+}
+.navbar-light .navbar-toggler {
+  color: {{ foreground }} !important;
+  border-color: {{ muted }} !important;
+}
+.navbar-light .navbar-toggler-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='{{ foreground | replace('#', '%23') }}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
+}
+
+/* Light surface utilities. */
+.bg-white, .bg-light {
+  background-color: {{ background_alt }} !important;
+}
+.bg-dark {
+  background-color: {{ background }} !important;
+}
+.bg-primary, .bg-primary-color {
+  background-color: {{ primary }} !important;
+}
+.border, .border-top, .border-bottom {
+  border-color: {{ muted }} !important;
+}
+
+/* Cards, service boxes and service items. */
+.card, .service .service-box, .dropdown-menu, .list-group-item {
+  background-color: {{ background_alt }} !important;
+  border-color: {{ muted }} !important;
+  color: {{ foreground }} !important;
+}
+.service-2 .service-item {
+  border-color: {{ muted }} !important;
+}
+.service .service-box .service-item i,
+.li-icon {
+  color: {{ primary }} !important;
+}
+.service-2 .service-item i {
+  color: {{ background }} !important;
+}
+.service-2 .service-item .planning { background: {{ primary }} !important; }
+.service-2 .service-item .goal_tracking { background: {{ secondary }} !important; }
+.service-2 .service-item .results { background: {{ success }} !important; }
+.service-2 .service-item:hover i.planning { background: {{ background }} !important; color: {{ primary }} !important; }
+.service-2 .service-item:hover i.goal_tracking { background: {{ background }} !important; color: {{ secondary }} !important; }
+.service-2 .service-item:hover i.results { background: {{ background }} !important; color: {{ success }} !important; }
+
+/* Pricing blocks. */
+.pricing-block,
+.pricing-block ul {
+  border-color: {{ muted }} !important;
+}
+.pricing-standard-block,
+.pricing-enterprise-block {
+  background-color: {{ background_alt }} !important;
+  color: {{ foreground }} !important;
+}
+.pricing-pyme-block {
+  background-color: {{ primary }} !important;
+  color: {{ background }} !important;
+}
+.pricing-pyme-block:hover, .pricing-pyme-block.active,
+.pricing-enterprise-block:hover, .pricing-enterprise-block.active {
+  background: {{ secondary }} !important;
+  color: {{ background }} !important;
+}
+.price-header .solicited,
+.pricing-block:hover .solicited {
+  background-image: none !important;
+  background-color: {{ primary }} !important;
+  border-color: {{ primary }} !important;
+  color: {{ background }} !important;
+}
+
+/* Buttons. */
+.btn-primary,
+.btn-info {
+  background-color: {{ primary }} !important;
+  border-color: {{ primary }} !important;
+  color: {{ background }} !important;
+}
+.btn-primary:hover, .btn-primary:focus,
+.btn-info:hover, .btn-info:focus {
+  background-color: {{ primary }}d9 !important;
+  border-color: {{ primary }} !important;
+  color: {{ background }} !important;
+}
+.btn-secondary,
+.btn-light {
+  background-color: {{ background_alt }} !important;
+  border-color: {{ muted }} !important;
+  color: {{ foreground }} !important;
+}
+.btn-secondary:hover, .btn-light:hover {
+  border-color: {{ primary }} !important;
+  color: {{ primary }} !important;
+}
+.btn-outline-primary {
+  color: {{ primary }} !important;
+  border-color: {{ primary }} !important;
+}
+.btn-outline-primary:hover {
+  background-color: {{ primary }} !important;
+  color: {{ background }} !important;
+}
+
+/* Form controls. */
+.form-control, .form-select, textarea, select, input {
+  background-color: {{ background_alt }} !important;
+  color: {{ foreground }} !important;
+  border-color: {{ muted }} !important;
+}
+.form-control:focus, .form-select:focus {
+  border-color: {{ primary }} !important;
+}
+::placeholder {
+  color: {{ foreground }}99 !important;
+}
+
+/* Modals. */
+.modal-content {
+  background-color: {{ background_alt }} !important;
+  color: {{ foreground }} !important;
+  border-color: {{ muted }} !important;
+}
+.modal-header, .modal-footer {
+  border-color: {{ muted }} !important;
+}
+.modal .close, .modal .btn-close {
+  color: {{ foreground }} !important;
+  text-shadow: none !important;
+}
+.modal .btn-close {
+  filter: invert(1) !important;
+}
+
+/* Footer: only the color; footer-bg.png stays. */
+.footer-section {
+  background-color: {{ background_alt }} !important;
+  color: {{ foreground }} !important;
+}
+.footer-menu a,
+.footer-main .block-2 ul li a {
+  color: {{ foreground }}b3 !important;
+}
+.footer-menu a:hover,
+.footer-main .block-2 ul li a:hover {
+  color: {{ primary }} !important;
+}
+.footer-main .block-2 h6, .footer-main .block-2 .h6 {
+  color: {{ foreground }} !important;
+}
+
+/* ==========================================================================
+   Dashboard (logged-in app, Stisla-based admin template).
+   Every selector is prefixed with "body" so it out-ranks the app stylesheet
+   (same !important weight, but loaded later in the cascade).
+   ========================================================================== */
+
+/* Dashboard: base text and links. App text colors are hardcoded greys. */
+body .main-content,
+body .main-content .table,
+body .main-content .card .card-body {
+  color: {{ foreground }} !important;
+}
+body .main-content a:not(.btn):not(.dropdown-item),
+body a.blue_link {
+  color: {{ primary }} !important;
+}
+body .main-content a:not(.btn):hover {
+  color: {{ primary }}d9 !important;
+}
+body .text-dark,
+body .text-dark-all *,
+body .text-dark-all *:before,
+body .text-dark-all *:after {
+  color: {{ foreground }} !important;
+}
+body .text-primary,
+body .text-primary-all * {
+  color: {{ primary }} !important;
+}
+body .text-info,
+body .text-info-all * {
+  color: {{ secondary }} !important;
+}
+body .section .section-title,
+body .section .section-header h1 {
+  color: {{ foreground }} !important;
+}
+body .section .section-title:before {
+  background-color: {{ primary }} !important;
+}
+
+/* Dashboard: top header (.navbar-bg is the white strip behind .main-navbar). */
+body .navbar-bg {
+  background-color: {{ background_alt }} !important;
+  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .45) !important;
+}
+body .main-navbar,
+body .main-navbar .navbar-nav {
+  background-color: transparent !important;
+}
+body .main-navbar .nav-link,
+body .main-navbar .nav-link.nav-link-user,
+body .main-navbar .navbar-brand,
+body .main-navbar .brand_name,
+body .main-navbar .bars_icon,
+body .main-navbar .svg-inline--fa {
+  color: {{ foreground }} !important;
+}
+body .main-navbar .nav-link:hover,
+body .main-navbar .nav-link:focus,
+body .main-navbar .nav-link:hover .svg-inline--fa,
+body .main-navbar .nav-link.beep .svg-inline--fa {
+  color: {{ primary }} !important;
+}
+
+/* Dashboard: sidebar (container, toggle, brand/customer picker, section labels, items). */
+body .main-sidebar,
+body .main-sidebar #sidebar-wrapper {
+  background-color: {{ background_alt }} !important;
+  box-shadow: 4px 0 12px 0 rgba(0, 0, 0, .35) !important;
+}
+body .main-sidebar .sidebar-brand a,
+body .main-sidebar .bars_icon,
+body .main-sidebar .bars_icon_expand {
+  color: {{ foreground }} !important;
+}
+body .main-sidebar .sidebar-menu li.menu-header {
+  color: {{ foreground }}99 !important;
+}
+body .main-sidebar .sidebar-menu li a {
+  color: {{ foreground }}cc !important;
+}
+body .main-sidebar .sidebar-menu li a:hover {
+  background-color: {{ background }} !important;
+  color: {{ primary }} !important;
+}
+/* Active item: solid primary, same treatment as .btn-primary. Covers the
+   mini-sidebar variant, whose rules use !important on box-shadow/background. */
+body .main-sidebar .sidebar-menu li.active a,
+body .main-sidebar .sidebar-menu li.active a:hover,
+body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a {
+  background-color: {{ primary }} !important;
+  color: {{ background }} !important;
+  box-shadow: none !important;
+}
+body .main-sidebar .sidebar-menu li ul.dropdown-menu,
+body .main-sidebar .sidebar-menu li.active ul.dropdown-menu {
+  background-color: {{ background_alt }} !important;
+}
+body .main-sidebar .sidebar-menu li ul.dropdown-menu li a {
+  color: {{ foreground }}b3 !important;
+}
+
+/* Dashboard: cards. Header title color and the colored top rule. */
+body .card .card-header {
+  border-bottom-color: {{ muted }} !important;
+}
+body .card .card-header h4,
+body .card.card-statistic-1 .card-header h4,
+body .card.card-statistic-2 .card-header h4,
+body .card.card-statistic-1 .card-body,
+body .card.card-statistic-2 .card-body {
+  color: {{ foreground }} !important;
+}
+body .card.card-primary { border-top-color: {{ primary }} !important; }
+body .card.card-info,
+body .card.card-secondary,
+body .card.card-dark { border-top-color: {{ muted }} !important; }
+body .card .card-stats .card-stats-title,
+body .card-comment,
+body .card-header-board,
+body ul .card-board-issue {
+  background-color: {{ background_alt }} !important;
+  color: {{ foreground }} !important;
+  border-color: {{ muted }} !important;
+}
+
+/* Dashboard: buttons. The app adds a light-blue box-shadow glow to .btn-primary. */
+body .btn-primary,
+body .btn-primary.disabled,
+body .btn-primary:focus,
+body .btn-primary:active,
+body .btn-primary:hover,
+body .card .card-header h4 + .card-header-action .btn.active,
+body .card .card-header h4 + .card-header-form .btn.active {
+  background-color: {{ primary }} !important;
+  border-color: {{ primary }} !important;
+  color: {{ background }} !important;
+  box-shadow: none !important;
+}
+body .btn-primary:hover,
+body .btn-primary:focus,
+body .btn-primary:active {
+  background-color: {{ primary }}d9 !important;
+}
+body .btn-outline-success { color: {{ success }} !important; border-color: {{ success }} !important; }
+body .btn-outline-success:hover { background-color: {{ success }} !important; color: {{ background }} !important; }
+
+/* Dashboard: progress bars. Track darker than the card; fill primary.
+   .bg-success / .bg-danger fills stay semantic. */
+body .progress {
+  background-color: {{ background }} !important;
+  border: 1px solid {{ muted }} !important;
+}
+body .progress-bar,
+body .progress-bar.bg-primary {
+  background-color: {{ primary }} !important;
+}
+body .progress-bar.bg-success { background-color: {{ success }} !important; }
+
+/* Dashboard: tables (header band, row dividers, boxed counters). */
+body .table td,
+body .table th,
+body .table thead th,
+body .table.table-bordered td,
+body .table.table-bordered th {
+  border-color: {{ muted }} !important;
+}
+body .table:not(.table-sm) thead th,
+body .table thead th {
+  background-color: {{ background }} !important;
+  color: {{ foreground }} !important;
+}
+body .table-striped tbody tr:nth-of-type(odd) {
+  background-color: {{ foreground }}0d !important;
+}
+body .table-hover tbody tr:hover,
+body:not(.nohover) .table_body .tr_group:hover {
+  background-color: {{ foreground }}14 !important;
+  color: {{ foreground }} !important;
+}
+body table.widgetTable tr td.box {
+  border-color: {{ muted }} !important;
+}
+body hr,
+body .dropdown-divider {
+  border-color: {{ muted }} !important;
+}
+
+/* Dashboard: dropdown menus and notification lists in the header. */
+body .dropdown-list .dropdown-item,
+body .dropdown-item {
+  color: {{ foreground }} !important;
+  border-bottom-color: {{ muted }} !important;
+}
+body .dropdown-list .dropdown-item .dropdown-item-desc,
+body .dropdown-list .dropdown-item .dropdown-item-desc b,
+body .dropdown-header {
+  color: {{ foreground }} !important;
+}
+body .dropdown-list .dropdown-item.dropdown-item-unread {
+  background-color: {{ background }} !important;
+}
+body .dropdown-item:hover,
+body a.dropdown-item:focus,
+body a.dropdown-item:active,
+body a.dropdown-item.active,
+body .dropdown-list .dropdown-item:focus {
+  background-color: {{ background }} !important;
+  color: {{ primary }} !important;
+}
+body .dropdown-list .dropdown-list-content:not(.is-end):after {
+  background-image: none !important;
+}
+/* selectric (customer picker in the sidebar). */
+body .selectric,
+body .selectric-items {
+  background: {{ background }} !important;
+  border-color: {{ muted }} !important;
+}
+body .selectric .label,
+body .selectric-items li {
+  color: {{ foreground }} !important;
+}
+body .selectric-items li.highlighted,
+body .selectric-items li:hover {
+  background: {{ background_alt }} !important;
+}
+
+/* Dashboard: footer. */
+body .main-footer {
+  background-color: transparent !important;
+  color: {{ foreground }}b3 !important;
+  border-top-color: {{ muted }} !important;
+}
+
+/* Dashboard: Google Charts (SVG). Only text, white backgrounds and the grey
+   gridline/axis fills are touched; data series colors are left alone. */
+body #projectsChart svg text,
+body .google-visualization-tooltip text {
+  fill: {{ foreground }} !important;
+}
+body #projectsChart svg rect[fill="#ffffff"],
+body #projectsChart svg rect[fill="#fff"] {
+  fill: transparent !important;
+}
+body #projectsChart svg rect[fill="#cccccc"],
+body #projectsChart svg rect[fill="#ebebeb"],
+body #projectsChart svg rect[fill="#e6e6e6"] {
+  fill: {{ muted }} !important;
+}
+body #projectsChart svg path[stroke="#cccccc"],
+body #projectsChart svg path[stroke="#333333"],
+body #projectsChart svg line {
+  stroke: {{ muted }} !important;
+}
+body .google-visualization-tooltip {
+  background-color: {{ background_alt }} !important;
+  border-color: {{ muted }} !important;
+  color: {{ foreground }} !important;
+}
+
+/* Dashboard: custom scrollbar (nicescroll sets inline colors). */
+body .nicescroll-cursors {
+  background-color: {{ muted }} !important;
+  border-color: {{ background_alt }} !important;
+}
+
+/* ==========================================================================
+   App canvas (shared by the Board and Operations pages).
+   The app stylesheets paint several wrappers with light colors.
+   ========================================================================== */
+body #app,
+body .main-wrapper,
+body .main-content,
+body .main-content > section.section,
+body .main-content .section-body {
+  background-color: {{ background }} !important;
+}
+
+/* ==========================================================================
+   Board (/boards/...): React + MUI app mounted in #root-board.
+   MUI classes are emotion-hashed, so only stable class names are used:
+   .view-wrapper, .board-header, .board-dad, .board-list, .card-body-board,
+   .card-board-list, .card-board-issue and MUI's own Mui* names.
+   Surface hierarchy: canvas and columns use background, column headers and
+   cards use background_alt. Column top status borders are never touched.
+   Labels (.MuiChip-colorDefault) and priority icons keep the app colors.
+   ========================================================================== */
+body #root-board,
+body #root-board .App,
+body #root-board .view-wrapper,
+body #root-board .board-header,
+body #root-board .board-dad {
+  background-color: {{ background }} !important;
+  color: {{ foreground }} !important;
+}
+
+/* Board: breadcrumb bar with the back arrow. */
+body #root-board .MuiBreadcrumbs-root,
+body #root-board .MuiBreadcrumbs-li p,
+body #root-board .MuiBreadcrumbs-separator {
+  color: {{ foreground }}b3 !important;
+}
+body #root-board .MuiBreadcrumbs-li a {
+  color: {{ primary }} !important;
+}
+body #root-board .board-header .MuiSvgIcon-root:not(.primary-icon) {
+  color: {{ foreground }}b3 !important;
+}
+body #root-board .board-header .MuiIconButton-colorPrimary,
+body #root-board .board-header .MuiIconButton-colorPrimary .MuiSvgIcon-root,
+body #root-board .board-header .primary-icon {
+  color: {{ primary }} !important;
+}
+body #root-board .board-header .settings-button {
+  background-color: transparent !important;
+  border-color: transparent !important;
+}
+
+/* Board: columns. Paper and scroll body use the canvas color; the body border
+   (sides and bottom only, it has no top border) is the neutral palette border. */
+body #root-board .board-list,
+body #root-board .card-body-board,
+body #root-board .card-board-list {
+  background-color: {{ background }} !important;
+  background-image: none !important;
+  color: {{ foreground }} !important;
+}
+body #root-board .card-body-board {
+  border-color: {{ muted }} !important;
+}
+body #root-board .card-body-board::-webkit-scrollbar-thumb {
+  background: {{ muted }} !important;
+}
+
+/* Board: cards sit one step above the column. */
+body #root-board li.card-board-issue {
+  background-color: {{ background_alt }} !important;
+  border-color: {{ muted }} !important;
+  color: {{ foreground }} !important;
+  box-shadow: none !important;
+}
+
+/* Board: search or filter field and its button. */
+body #root-board .MuiInputBase-root {
+  background-color: {{ background_alt }} !important;
+  color: {{ foreground }} !important;
+  border-color: {{ muted }} !important;
+  box-shadow: inset 0 0 0 1px {{ muted }} !important;
+  border-radius: 4px !important;
+}
+body #root-board .MuiInputBase-root:focus-within {
+  box-shadow: inset 0 0 0 1px {{ primary }} !important;
+}
+body #root-board .MuiInputBase-input {
+  background-color: transparent !important;
+  color: {{ foreground }} !important;
+  caret-color: {{ primary }} !important;
+  -webkit-text-fill-color: {{ foreground }} !important;
+}
+body #root-board .MuiInputBase-input::placeholder {
+  color: {{ foreground }} !important;
+  opacity: .6 !important;
+  -webkit-text-fill-color: {{ foreground }}99 !important;
+}
+body #root-board .MuiButton-outlined {
+  background-color: {{ background_alt }} !important;
+  border-color: {{ muted }} !important;
+  color: {{ foreground }} !important;
+}
+body #root-board .MuiButton-outlined:hover {
+  border-color: {{ primary }} !important;
+  color: {{ primary }} !important;
+}
+body #root-board .MuiButton-outlined.Mui-disabled {
+  background-color: {{ background_alt }} !important;
+  border-color: {{ muted }} !important;
+  color: {{ foreground }}80 !important;
+}
+
+/* Board: assignee / working pills (MuiChip-colorWorking, size medium). The
+   status hue is kept as a border accent only. */
+body #root-board .MuiChip-colorWorking {
+  background-color: {{ background }} !important;
+  border: 1px solid {{ success }} !important;
+  color: {{ foreground }} !important;
+}
+body #root-board .MuiChip-colorWorking .MuiChip-label {
+  color: {{ foreground }} !important;
+}
+
+/* Board: app-defined dropdown menu (Board.css .Menu / .MenuItem). */
+body .Menu {
+  background-color: {{ background_alt }} !important;
+  border-color: {{ muted }} !important;
+  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .45) !important;
+}
+body .MenuItem {
+  background-color: transparent !important;
+  color: {{ foreground }} !important;
+}
+body .MenuItem:hover,
+body .MenuItem:focus,
+body .MenuItem.open {
+  background-color: {{ background }} !important;
+  color: {{ primary }} !important;
+}
+
+/* ==========================================================================
+   Operation board (/operations/<id>/board/). Same React + MUI app as the
+   Board, scoped by #root-board. Covers: collapsed column strips
+   (.board-list-collapsed), header icon buttons (.icon-button,
+   .settings-button), the Board / Details / Advertisements tabs
+   (.views-toolbar, #headerTabs) and the outer frame of the filter field.
+   Status pills (.rotated_list_label) and strip top borders keep their hues.
+   ========================================================================== */
+
+/* Operation board: collapsed column strips. The site sets a light
+   background-color with !important on the strip and #333 text on its
+   children; the card count is the h6 inside a.hiden_options. */
+body #root-board .board-list-collapsed,
+body #root-board .board-list-collapsed .card-body-collapsed {
+  background-color: {{ background }} !important;
+  background-image: none !important;
+  border-color: {{ muted }} !important;
+  color: {{ foreground }}b3 !important;
+}
+body #root-board .board-list-collapsed .card-header-board {
+  background-color: {{ background_alt }} !important;
+  border-bottom-color: {{ muted }} !important;
+}
+body #root-board .board-list-collapsed .btn-chevron,
+body #root-board .board-list-collapsed .btn-chevron:focus,
+body #root-board .board-list-collapsed .btn-chevron:active {
+  background-color: transparent !important;
+  color: {{ foreground }}b3 !important;
+}
+body #root-board .board-list-collapsed .btn-chevron:hover {
+  background-color: {{ foreground }}14 !important;
+}
+body #root-board .board-list-collapsed .MuiSvgIcon-root,
+body #root-board .board-list-collapsed .hiden_options,
+body #root-board .board-list-collapsed .hiden_options h6 {
+  color: {{ foreground }}b3 !important;
+}
+
+/* Operation board: header icon buttons (list, edit, settings). */
+body #root-board .board-header a.icon-button,
+body #root-board .board-header a.settings-button {
+  background-color: {{ background_alt }} !important;
+  border: 1px solid {{ muted }} !important;
+  box-shadow: none !important;
+}
+body #root-board .board-header a.icon-button .MuiSvgIcon-root,
+body #root-board .board-header a.settings-button .MuiSvgIcon-root {
+  color: {{ primary }} !important;
+}
+body #root-board .board-header a.icon-button:hover,
+body #root-board .board-header a.icon-button:focus,
+body #root-board .board-header a.icon-button:active,
+body #root-board .board-header a.settings-button:hover,
+body #root-board .board-header a.settings-button:focus,
+body #root-board .board-header a.settings-button:active {
+  background-color: {{ primary }} !important;
+  border-color: {{ primary }} !important;
+}
+body #root-board .board-header a.icon-button:hover .MuiSvgIcon-root,
+body #root-board .board-header a.icon-button:focus .MuiSvgIcon-root,
+body #root-board .board-header a.settings-button:hover .MuiSvgIcon-root,
+body #root-board .board-header a.settings-button:focus .MuiSvgIcon-root {
+  color: {{ background }} !important;
+}
+
+/* Operation board: Board / Details / Advertisements tab group. The active
+   tab is a.tab-link-active (the site colors it #009ce4). */
+body #root-board .views-toolbar {
+  background-color: transparent !important;
+  border-color: {{ muted }} !important;
+}
+body #root-board .views-toolbar a,
+body #root-board .views-toolbar a h6 {
+  color: {{ foreground }} !important;
+}
+body #root-board .views-toolbar a {
+  border-radius: 30px !important;
+}
+body #root-board .views-toolbar a:hover,
+body #root-board .views-toolbar a:hover h6 {
+  color: {{ primary }} !important;
+}
+body #root-board .views-toolbar a.tab-link-active,
+body #root-board .views-toolbar a.tab-link-active h6,
+body #root-board .views-toolbar a.tab-link-active:hover,
+body #root-board .views-toolbar a.tab-link-active:hover h6 {
+  background-color: {{ primary }} !important;
+  color: {{ background }} !important;
+}
+
+/* Operation board: outer frame of the filter field. The white frame is a
+   hashed MUI Box that wraps the input group; it is located structurally. */
+body #root-board .board-header .MuiBox-root:has(> .MuiGrid-container .MuiInputBase-root) {
+  background-color: transparent !important;
+  border-color: {{ muted }} !important;
+  box-shadow: none !important;
+}
+body #root-board .board-header .MuiBox-root:has(> .MuiGrid-container .MuiInputBase-root):focus-within {
+  border-color: {{ primary }} !important;
+}
+
+/* ==========================================================================
+   Operations / DataTables (/operations/). Scoped by .dataTables_wrapper,
+   #operationsTable, .radio_priority and the .section-header band, all taken
+   from the page structure, so other pages are not affected.
+   ========================================================================== */
+
+/* Operations: title row, back arrow and breadcrumb. */
+body .main-content .section .section-header {
+  background-color: transparent !important;
+  border-color: {{ muted }} !important;
+  box-shadow: none !important;
+}
+body .section-header .arrow_to_left,
+body .section-header-back a {
+  color: {{ primary }} !important;
+}
+body .section-header-breadcrumb .breadcrumb-item,
+body .section-header-breadcrumb .breadcrumb-item.active {
+  color: {{ foreground }}b3 !important;
+}
+body .section-header-breadcrumb .breadcrumb-item a {
+  color: {{ primary }} !important;
+}
+body .section-header-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
+  color: {{ foreground }}80 !important;
+}
+
+/* Operations: the filters + table card. */
+body .main-content .section-body > .card {
+  background-color: {{ background_alt }} !important;
+  border-color: {{ muted }} !important;
+  box-shadow: none !important;
+}
+body .main-content .section-body > .card.card-primary {
+  border-top: 2px solid {{ primary }} !important;
+}
+body .main-content .section-body > .card > .card-header,
+body .main-content .section-body > .card > .card-body {
+  background-color: transparent !important;
+  border-color: {{ muted }} !important;
+}
+
+/* Operations: radios (.custom-radio). Control circle, checked fill and dot. */
+body .custom-control-label {
+  color: {{ foreground }} !important;
+}
+body .custom-radio .custom-control-label::before {
+  background-color: {{ background }} !important;
+  border-color: {{ muted }} !important;
+  box-shadow: none !important;
+}
+body .custom-radio .custom-control-input:checked ~ .custom-control-label::before,
+body .custom-radio .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
+  border-color: {{ primary }} !important;
+}
+body .custom-radio .custom-control-input:checked ~ .custom-control-label::before {
+  background-color: {{ primary }} !important;
+}
+body .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{{ background | replace('#', '%23') }}'/%3e%3c/svg%3e") !important;
+}
+
+/* Operations: header buttons ("Tasks list" outlined, "New" filled). */
+body .card-header .btn-outline-primary,
+body .card-header .btn-outline-primary.disabled {
+  background-color: transparent !important;
+  border-color: {{ primary }} !important;
+  color: {{ primary }} !important;
+  box-shadow: none !important;
+}
+body .btn-outline-primary:hover,
+body .btn-outline-primary:focus,
+body .btn-outline-primary:active,
+body .card-header .btn-outline-primary:hover {
+  background-color: {{ primary }} !important;
+  border-color: {{ primary }} !important;
+  color: {{ background }} !important;
+}
+body .card .card-header .card-header-action .btn.btn-primary {
+  background-color: {{ primary }} !important;
+  border-color: {{ primary }} !important;
+  color: {{ background }} !important;
+  box-shadow: none !important;
+}
+
+/* DataTables: length select, search input, info text. */
+body .dataTables_wrapper,
+body .dataTables_wrapper label,
+body .dataTables_wrapper .dataTables_info {
+  color: {{ foreground }} !important;
+}
+body .dataTables_wrapper .dataTables_info {
+  color: {{ foreground }}b3 !important;
+}
+body .dataTables_wrapper select,
+body .dataTables_wrapper input[type="search"],
+body .dataTables_wrapper .form-control,
+body .dataTables_wrapper .custom-select {
+  background-color: {{ background }} !important;
+  border-color: {{ muted }} !important;
+  color: {{ foreground }} !important;
+}
+body .dataTables_wrapper .custom-select {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='{{ foreground | replace('#', '%23') }}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") !important;
+}
+body .dataTables_wrapper select:focus,
+body .dataTables_wrapper input[type="search"]:focus {
+  border-color: {{ primary }} !important;
+}
+
+/* DataTables: table. The app also forces white cells with !important. */
+body .dataTables_wrapper table.dataTable,
+body .dataTables_wrapper table.dataTable tbody tr,
+body .dataTables_wrapper table.dataTable tbody td,
+body .dataTables_wrapper table.dataTable tbody th {
+  background-color: transparent !important;
+  color: {{ foreground }} !important;
+}
+body .dataTables_wrapper table.dataTable thead th,
+body .dataTables_wrapper table.dataTable thead td {
+  background-color: {{ background }} !important;
+  color: {{ foreground }} !important;
+  border-bottom: 1px solid {{ muted }} !important;
+}
+body .dataTables_wrapper table.dataTable td,
+body .dataTables_wrapper table.dataTable th {
+  border-color: {{ muted }} !important;
+}
+body .dataTables_wrapper table.dataTable.no-footer {
+  border-bottom: 1px solid {{ muted }} !important;
+}
+body .dataTables_wrapper table.dataTable tbody tr.odd {
+  background-color: {{ foreground }}0a !important;
+}
+body .dataTables_wrapper table.dataTable tbody tr:hover,
+body .dataTables_wrapper table.dataTable tbody tr:hover > td {
+  background-color: {{ foreground }}14 !important;
+}
+body .dataTables_wrapper table.dataTable tbody td a {
+  color: {{ primary }} !important;
+}
+body .dataTables_wrapper table.dataTable tbody td a:hover {
+  color: {{ primary }}d9 !important;
+}
+
+/* DataTables: pagination (Bootstrap 4 .page-item / .page-link). */
+body .dataTables_wrapper .page-item .page-link {
+  background-color: {{ background }} !important;
+  border-color: {{ muted }} !important;
+  color: {{ foreground }} !important;
+  box-shadow: none !important;
+}
+body .dataTables_wrapper .page-item .page-link:hover {
+  background-color: {{ background_alt }} !important;
+  border-color: {{ primary }} !important;
+  color: {{ primary }} !important;
+}
+body .dataTables_wrapper .page-item.active .page-link,
+body .dataTables_wrapper .page-item.active .page-link:hover {
+  background-color: {{ primary }} !important;
+  border-color: {{ primary }} !important;
+  color: {{ background }} !important;
+}
+body .dataTables_wrapper .page-item.disabled .page-link,
+body .dataTables_wrapper .page-item.disabled .page-link:hover {
+  background-color: {{ background }} !important;
+  border-color: {{ muted }} !important;
+  color: {{ foreground }}59 !important;
+  opacity: 1 !important;
+}
+
+/* Operations: footer strip (copyright, badge, version). */
+body footer.main-footer,
+body footer.main-footer > .row,
+body footer.main-footer > .row > div {
+  background-color: {{ background_alt }} !important;
+  color: {{ foreground }}b3 !important;
+  border-color: {{ muted }} !important;
+}
+body footer.main-footer a:not(.btn) {
+  color: {{ primary }} !important;
+}
+`;
+
+  const inject = () => {
+    const style = document.createElement('style');
+    style.id = 'theme-hteam';
+    style.textContent = CSS;
+    (document.head || document.documentElement).appendChild(style);
+  };
+  // At document-start the root element may not exist yet; wait for it.
+  if (document.documentElement) {
+    inject();
+  } else {
+    new MutationObserver((_, obs) => {
+      if (document.documentElement) { obs.disconnect(); inject(); }
+    }).observe(document, { childList: true });
+  }
+})();