/* TODO: figure out how to share this file between the bUI sandbox and the bPort app */ /* Bulma BW Theme Apply this theme by adding either data-theme="bw" or the class "theme-bw" to an element, for example: or
*/ /* First, force the light color scheme and base colors on the host element … */ [data-theme='bw'], .theme-bw { /* Instruct browsers to use light styling for built–in controls */ color-scheme: light; background-color: var(--bulma-background); color: var(--bulma-body-color); } /* … and also force these values on the html element in case dark mode defaults are applied there */ [data-theme='bw'] html, .theme-bw html { color-scheme: light; background-color: var(--bulma-background); color: var(--bulma-body-color); } /* Define custom properties (variables) on the host element */ [data-theme='bw'], .theme-bw { /* Tell browsers this page uses a light color scheme so that auto dark-mode styling (especially on form controls) is disabled */ color-scheme: light; --bulma-body-overflow-y: auto; /* Primary Colors */ --bulma-primary: #b0de4a; --bulma-primary-dark: #90b63c; --bulma-primary-light: #c2e774; /* Link/Secondary Colors */ --bulma-link: #14bdeb; --bulma-link-hover: rgb(20, 189, 235); --bulma-link-focus: rgb(20, 189, 235); --bulma-link-active: rgb(20, 189, 235); /* State Colors */ --bulma-info: #0c96bd; --bulma-success: #6db22d; --bulma-warning: #ffaa00; --bulma-danger: #df2935; /* Grey Scale */ --bulma-grey-darker: #2a2e37; --bulma-grey-dark: #3d4451; --bulma-grey: #7a7a7a; --bulma-grey-light: #b5b5b5; --bulma-grey-lighter: #e2e8f0; /* Background Colors */ --bulma-white: #ffffff; --bulma-background: #ffffff; --bulma-scheme-main: #ffffff; --bulma-scheme-main-bis: #f1f4f9; --bulma-scheme-main-ter: #e2e8f0; /* Text Colors */ --bulma-text: #1f2937; --bulma-text-strong: #1f2937; --bulma-text-light: #4a5568; /* Custom Colors */ --bulma-success-muted: #ddeccf; /* Component Colors */ --bulma-body-color: var(--bulma-text); --bulma-strong-color: var(--bulma-text-strong); /* Derived Colors */ --bulma-primary-invert: #000000; --bulma-link-invert: #ffffff; } /* Next, override any dark–mode media query styling */ @media (prefers-color-scheme: dark) { [data-theme='bw'], .theme-bw, [data-theme='bw'] html, .theme-bw html, [data-theme='bw'] body, .theme-bw body { color-scheme: light !important; background-color: var(--bulma-background) !important; color: var(--bulma-body-color) !important; } /* Also force form controls to appear light */ [data-theme='bw'] input, .theme-bw input, [data-theme='bw'] textarea, .theme-bw textarea, [data-theme='bw'] select, .theme-bw select { background-color: var(--bulma-white) !important; color: var(--bulma-text) !important; border-color: var(--bulma-grey-light) !important; } } /* Apply theme variables to Bulma classes */ [data-theme='bw'] .is-primary, .theme-bw .is-primary { background-color: var(--bulma-primary) !important; color: var(--bulma-primary-invert) !important; } [data-theme='bw'] .is-link, .theme-bw .is-link { background-color: var(--bulma-link) !important; color: var(--bulma-link-invert) !important; } [data-theme='bw'] .is-info, .theme-bw .is-info { background-color: var(--bulma-info) !important; color: #ffffff !important; } [data-theme='bw'] .is-success, .theme-bw .is-success { background-color: var(--bulma-success) !important; color: #ffffff !important; } [data-theme='bw'] .is-warning, .theme-bw .is-warning { background-color: var(--bulma-warning) !important; color: rgba(0, 0, 0, 0.7) !important; } [data-theme='bw'] .is-danger, .theme-bw .is-danger { background-color: var(--bulma-danger) !important; color: #ffffff !important; } /* For input elements, override the background color to be transparent and add a red border */ [data-theme='bw'] input.is-danger, .theme-bw input.is-danger, [data-theme='bw'] textarea.is-danger, .theme-bw textarea.is-danger { background-color: transparent !important; border: 1px solid var(--bulma-danger) !important; color: var(--bulma-text) !important; } [data-theme='bw'] .radio.is-danger, .theme-bw .radio.is-danger { background-color: transparent !important; color: 1px solid var(--bulma-danger) !important; } [data-theme='bw'] .has-text-primary, .theme-bw .has-text-primary { color: var(--bulma-primary) !important; } [data-theme='bw'] .has-text-link, .theme-bw .has-text-link { color: var(--bulma-link) !important; } [data-theme='bw'] .has-background-success-muted, .theme-bw .has-background-success-muted { background-color: var(--bulma-success-muted) !important; } /* Text colors for body and strong elements */ [data-theme='bw'] body, .theme-bw body { color: var(--bulma-body-color); background-color: var(--bulma-background); } [data-theme='bw'] strong, .theme-bw strong { color: var(--bulma-strong-color); } /* Hide the hidden canvas element (used by pdf.js for example) */ [data-theme='bw'] .hiddenCanvasElement, .theme-bw .hiddenCanvasElement { display: none; } /* Menu component overrides */ [data-theme='bw'] .menu-label, .theme-bw .menu-label { color: var(--bulma-text-light) !important; } [data-theme='bw'] .menu-list a, .theme-bw .menu-list a { color: var(--bulma-text) !important; background-color: transparent !important; } [data-theme='bw'] .menu-list a:hover, .theme-bw .menu-list a:hover { background-color: var(--bulma-scheme-main-ter) !important; color: var(--bulma-text-strong) !important; } [data-theme='bw'] .menu-list a.is-active, .theme-bw .menu-list a.is-active { background-color: var(--bulma-link) !important; color: var(--bulma-link-invert) !important; } /* Card component overrides */ [data-theme='bw'] .card, .theme-bw .card { background-color: var(--bulma-scheme-main) !important; color: var(--bulma-text) !important; } [data-theme='bw'] .card-header, .theme-bw .card-header { background-color: var(--bulma-scheme-main-bis) !important; border-bottom: 1px solid var(--bulma-scheme-main-ter) !important; } [data-theme='bw'] .card-footer, .theme-bw .card-footer { background-color: var(--bulma-scheme-main-bis) !important; border-top: 1px solid var(--bulma-scheme-main-ter) !important; } /* Navbar component overrides */ [data-theme='bw'] .navbar, .theme-bw .navbar { background-color: var(--bulma-scheme-main) !important; color: var(--bulma-text) !important; } [data-theme='bw'] .navbar-item, .theme-bw .navbar-item, [data-theme='bw'] .navbar-link, .theme-bw .navbar-link { color: var(--bulma-text) !important; } [data-theme='bw'] .navbar-dropdown, .theme-bw .navbar-dropdown { background-color: var(--bulma-scheme-main) !important; border-top: 1px solid var(--bulma-scheme-main-ter) !important; } /* Table component overrides */ [data-theme='bw'] .table, .theme-bw .table { background-color: var(--bulma-scheme-main) !important; color: var(--bulma-text) !important; } [data-theme='bw'] .table th, .theme-bw .table th { color: var(--bulma-text-strong) !important; } [data-theme='bw'] .table tr:hover, .theme-bw .table tr:hover { background-color: var(--bulma-scheme-main-bis) !important; } [data-theme='bw'] .table.is-striped tbody tr:not(.is-selected):nth-child(even), .theme-bw .table.is-striped tbody tr:not(.is-selected):nth-child(even) { background-color: var(--bulma-scheme-main-bis) !important; } /* Panel component overrides */ [data-theme='bw'] .panel, .theme-bw .panel { background-color: var(--bulma-scheme-main) !important; color: var(--bulma-text) !important; } [data-theme='bw'] .panel-heading, .theme-bw .panel-heading { background-color: var(--bulma-scheme-main-bis) !important; color: var(--bulma-text-strong) !important; } [data-theme='bw'] .panel-block, .theme-bw .panel-block { color: var(--bulma-text) !important; border-color: var(--bulma-scheme-main-ter) !important; } /* Modal component overrides */ [data-theme='bw'] .modal-background, .theme-bw .modal-background { background-color: rgba(0, 0, 0, 0.5) !important; /* This one can stay dark */ } [data-theme='bw'] .modal-card-head, .theme-bw .modal-card-head, [data-theme='bw'] .modal-card-foot, .theme-bw .modal-card-foot { background-color: var(--bulma-scheme-main-bis) !important; } [data-theme='bw'] .modal-card-body, .theme-bw .modal-card-body { background-color: var(--bulma-scheme-main) !important; color: var(--bulma-text) !important; } /* Dropdown component overrides */ [data-theme='bw'] .dropdown-content, .theme-bw .dropdown-content { background-color: var(--bulma-scheme-main) !important; box-shadow: 0 0.5em 1em -0.125em rgba(0, 0, 0, 0.1) !important; } [data-theme='bw'] .dropdown-item, .theme-bw .dropdown-item { color: var(--bulma-text) !important; } [data-theme='bw'] .dropdown-item:hover, .theme-bw .dropdown-item:hover { background-color: var(--bulma-scheme-main-ter) !important; color: var(--bulma-text-strong) !important; } /* Tabs component overrides */ [data-theme='bw'] .tabs a, .theme-bw .tabs a { color: var(--bulma-text) !important; border-bottom-color: var(--bulma-scheme-main-ter) !important; } [data-theme='bw'] .tabs a:hover, .theme-bw .tabs a:hover { border-bottom-color: var(--bulma-text-strong) !important; color: var(--bulma-text-strong) !important; } [data-theme='bw'] .tabs li.is-active a, .theme-bw .tabs li.is-active a { border-bottom-color: var(--bulma-link) !important; color: var(--bulma-link) !important; } /* Message component overrides */ [data-theme='bw'] .message, .theme-bw .message { background-color: var(--bulma-scheme-main-bis) !important; } [data-theme='bw'] .message-header, .theme-bw .message-header { color: var(--bulma-scheme-main) !important; } [data-theme='bw'] .message-body, .theme-bw .message-body { border-color: var(--bulma-scheme-main-ter) !important; color: var(--bulma-text) !important; } /* Pagination component overrides */ [data-theme='bw'] .pagination-link, .theme-bw .pagination-link, [data-theme='bw'] .pagination-previous, .theme-bw .pagination-previous, [data-theme='bw'] .pagination-next, .theme-bw .pagination-next { background-color: var(--bulma-scheme-main) !important; border-color: var(--bulma-scheme-main-ter) !important; color: var(--bulma-text) !important; } [data-theme='bw'] .pagination-link.is-current, .theme-bw .pagination-link.is-current { background-color: var(--bulma-link) !important; border-color: var(--bulma-link) !important; color: var(--bulma-link-invert) !important; } /* Breadcrumb component overrides */ [data-theme='bw'] .breadcrumb a, .theme-bw .breadcrumb a { color: var(--bulma-link) !important; } [data-theme='bw'] .breadcrumb li.is-active a, .theme-bw .breadcrumb li.is-active a { color: var(--bulma-text) !important; } /* Fix for code elements */ [data-theme='bw'] pre, .theme-bw pre, [data-theme='bw'] code, .theme-bw code { background-color: var(--bulma-scheme-main-ter) !important; color: var(--bulma-text) !important; } /* Additional form elements */ [data-theme='bw'] .select select, .theme-bw .select select { background-color: var(--bulma-white) !important; color: var(--bulma-text) !important; border-color: var(--bulma-grey-light) !important; } [data-theme='bw'] .checkbox, .theme-bw .checkbox, [data-theme='bw'] .radio, .theme-bw .radio { color: var(--bulma-text) !important; } /* Progress bar */ [data-theme='bw'] progress, .theme-bw progress { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; background-color: var(--bulma-scheme-main-ter) !important; }