Created
August 29, 2024 20:54
-
-
Save passatgt/87f5b177a69a8f3ae462b36100b11f33 to your computer and use it in GitHub Desktop.
Changing Listmonk admin blue color to your own brand color
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| --primary-color: #35c287; | |
| --primary-color-opaque: #35c287 40; | |
| --primary-color-light: #35c287 80; | |
| } | |
| html a, html .button.is-ghost, html .button.is-ghost:hover, html .button.is-ghost.is-hovered, html .breadcrumb a, html .menu-list a.is-active, html .panel-list a:hover, html .panel-block.is-active .panel-icon, html .navbar-item.is-tab.is-active, html .carousel-arrow .icon, html .copy-text:hover, html .autocomplete a.dropdown-item:hover, html .autocomplete .dropdown .dropdown-menu .has-link a:hover, html .dropdown .dropdown-menu .has-link .autocomplete a:hover, html .autocomplete a.dropdown-item.is-hovered, html .autocomplete .dropdown .dropdown-menu .has-link a.is-hovered, html .dropdown .dropdown-menu .has-link .autocomplete a.is-hovered, html section.lists .view:hover, html .log-view .lines .timestamp, html a.navbar-item:focus, html a.navbar-item:focus-within, html a.navbar-item:hover, html a.navbar-item.is-active, html .navbar-link:focus, html .navbar-link:focus-within, html .navbar-link:hover, html .navbar-link.is-active, html .tabs li.is-active a, html .b-steps .steps .step-items .step-item.is-active .step-marker, html .b-table .table .chevron-cell > a { | |
| color: var(--primary-color); | |
| } | |
| html .button.is-primary:hover, html .table td.is-selected, html .table th.is-selected, html .table tr.is-selected, html a.dropdown-item.is-active, html .dropdown .dropdown-menu .has-link a.is-active, html button.dropdown-item.is-active, html .pagination-link.is-current, html .tabs.is-toggle li.is-active a, html .carousel .carousel-indicator .indicator-item.is-active .indicator-style, html .carousel .carousel-indicator .indicator-item .indicator-style:hover, html .b-clockpicker .card-header, html .b-clockpicker .b-clockpicker-face:after, html .b-clockpicker .b-clockpicker-face-hand, html .datepicker .datepicker-table .datepicker-body .datepicker-cell.is-selected, html .datepicker .datepicker-table .datepicker-body .datepicker-cell.is-selected.is-first-selected, html .datepicker .datepicker-table .datepicker-body .datepicker-cell.is-selected.is-last-selected, html .b-radio.radio input[type=radio] + .check:before, html .b-radio.radio input[type=radio]:checked + .check, html .b-clockpicker .b-clockpicker-face-number.active, html .b-steps .steps .step-items .step-item.is-previous .step-marker, html .switch input[type=checkbox]:checked + .check .switch:hover input[type=checkbox]:checked + .check, html .tox.tox-silver-sink .tox-button:not(.tox-button--secondary):not(.tox-button--naked), html .button.is-primary, html .b-checkbox.checkbox input[type=checkbox]:checked + .check.is-primary, html .b-tabs .tabs.is-toggle li a:focus, html .b-clockpicker-body .b-clockpicker-btn:hover, html .b-clockpicker-body .b-clockpicker-btn.active, html .b-checkbox.checkbox input[type=checkbox]:checked + .check, html .b-checkbox.checkbox input[type=checkbox]:indeterminate + .check, html .switch.is-outlined input[type=checkbox]:checked + .check:before { | |
| background-color: var(--primary-color); | |
| } | |
| html .navbar-item.is-tab:focus, html .navbar-item.is-tab:hover, html .navbar-item.is-tab.is-active, html .tabs li.is-active a, html .b-tabs .tabs li a:focus { | |
| border-bottom-color: var(--primary-color); | |
| } | |
| html .select select:focus, html .taginput .taginput-container.is-focusable:focus, html .textarea:focus, html .input:focus, html .select select.is-focused, html .taginput .is-focused.taginput-container.is-focusable, html .is-focused.textarea, html .is-focused.input, html .select select:active, html .taginput .taginput-container.is-focusable:active, html .textarea:active, html .input:active, html .select select.is-active, html .taginput .is-active.taginput-container.is-focusable, html .is-active.textarea, html .is-active.input, html .select:not(.is-multiple):not(.is-loading):after, html .navbar-link:not(.is-arrowless):after, html .pagination-link.is-current, html .tabs.is-toggle li.is-active a, html .b-checkbox.checkbox input[type=checkbox]:checked + .check, html .b-checkbox.checkbox input[type=checkbox]:indeterminate + .check, html .b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled) + .check, html .b-clockpicker .b-clockpicker-face-hand, html .b-radio.radio:hover input[type=radio]:not(:disabled) + .check, html .b-steps .steps .step-items .step-item.is-active .step-marker, html .switch.is-outlined input[type=checkbox]:checked + .check, html .switch.is-outlined:hover input[type=checkbox]:checked + .check, html .b-table .table:focus, html .b-tabs .tabs.is-toggle li a:focus .b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled) + .check.is-primary:hover, html .b-checkbox.checkbox input[type=checkbox]:checked + .check.is-primary, html .carousel .carousel-indicator .indicator-item .indicator-style .autocomplete .dropdown-content, html .carousel-arrow .icon:hover { | |
| border-color: var(--primary-color); | |
| } | |
| html .button:focus:not(:active), html .button.is-focused:not(:active), html .select select:focus, html .taginput .taginput-container.is-focusable:focus, html .textarea:focus, html .input:focus, html .select select.is-focused, html .taginput .is-focused.taginput-container.is-focusable, html .is-focused.textarea, html .is-focused.input, html .select select:active, html .taginput .taginput-container.is-focusable:active, html .textarea:active, html .input:active, html .select select.is-active, html .taginput .is-active.taginput-container.is-focusable, html .is-active.textarea, html .is-active.input, html .b-clockpicker .dropdown .input[readonly]:focus, html .b-clockpicker .dropdown .input[readonly].is-focused, html .b-clockpicker .dropdown .input[readonly]:active, html .b-clockpicker .dropdown .input[readonly].is-active, html .b-clockpicker .dropdown-trigger .input[readonly]:focus, html .b-clockpicker .dropdown-trigger .input[readonly].is-focused, html .b-clockpicker .dropdown-trigger .input[readonly]:active, html .b-clockpicker .dropdown-trigger .input[readonly].is-active, html .datepicker .dropdown .input[readonly]:focus, html .datepicker .dropdown .input[readonly].is-focused, html .datepicker .dropdown .input[readonly]:active, html .datepicker .dropdown .input[readonly].is-active, html .datepicker .dropdown-trigger .input[readonly]:focus, html .datepicker .dropdown-trigger .input[readonly].is-focused, html .datepicker .dropdown-trigger .input[readonly]:active, html .datepicker .dropdown-trigger .input[readonly].is-active, html .b-table .table:focus, html .timepicker .dropdown .input[readonly]:focus, html .timepicker .dropdown .input[readonly].is-focused, html .timepicker .dropdown .input[readonly]:active, html .timepicker .dropdown .input[readonly].is-active, html .timepicker .dropdown-trigger .input[readonly]:focus, html .timepicker .dropdown-trigger .input[readonly].is-focused, html .timepicker .dropdown-trigger .input[readonly]:active, html .timepicker .dropdown-trigger .input[readonly].is-active { | |
| box-shadow: 0 0 0 0.125em var(--primary-color-opaque); | |
| } | |
| html .b-tooltip.is-top .tooltip-content:before { | |
| border-top: 5px solid var(--primary-color); | |
| } | |
| html .b-tooltip.is-right .tooltip-content:before, html .b-sidebar .menu-list .router-link-exact-active { | |
| border-right: 5px solid var(--primary-color); | |
| } | |
| html .b-tooltip.is-bottom .tooltip-content:before { | |
| border-bottom: 5px solid var(--primary-color); | |
| } | |
| html .b-tooltip.is-left .tooltip-content:before { | |
| border-left: 5px solid var(--primary-color); | |
| } | |
| html .panel-block.is-active { | |
| border-left-color: var(--primary-color); | |
| } | |
| html .b-checkbox.checkbox input[type=checkbox]:focus:checked + .check, html .b-radio.radio input[type=radio]:focus:checked + .check, html .switch input[type=checkbox]:focus:checked + .check, html .switch input[type=checkbox]:active:checked + .check { | |
| box-shadow: 0 0 0.5em var(--primary-color); | |
| } | |
| html svg.b-colorpicker-triangle .hue-range-thumb:focus, html svg.b-colorpicker-triangle .sl-range-thumb:focus, html div.b-colorpicker-square .colorpicker-square-slider-hue .hue-range-thumb:focus, html div.b-colorpicker-square .colorpicker-square-slider-sl .sl-range-thumb:focus, html .b-colorpicker-alpha-slider .alpha-range-thumb:focus { | |
| box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px var(--primary-color), 0 0 0 0.125em var(--primary-color-opaque); | |
| } | |
| html a.box:hover, html .notices a.toast:hover, html .c3 a.c3-tooltip:hover, html section.dashboard a.tile.notification:hover, html .tox.tox-silver-sink a.tox-dialog:hover, html a.box:focus, html .notices a.toast:focus, html .c3 a.c3-tooltip:focus, html section.dashboard a.tile.notification:focus, html .tox.tox-silver-sink a.tox-dialog:focus { | |
| box-shadow: 0 0.5em 1em -0.125em #0a0a0a 1a, 0 0 0 1px var(--primary-color); | |
| } | |
| html a.box:active, html .notices a.toast:active, html .c3 a.c3-tooltip:active, html section.dashboard a.tile.notification:active, html .tox.tox-silver-sink a.tox-dialog:active { | |
| box-shadow: inset 0 1px 2px #0a0a0a 33, 0 0 0 1px var(--primary-color); | |
| } | |
| @media screen and (min-width: 1024px) { | |
| html .navbar.is-transparent .navbar-dropdown a.navbar-item.is-active, html .navbar-dropdown a.navbar-item.is-active { | |
| color: var(--primary-color); | |
| } | |
| } | |
| html svg.b-colorpicker-triangle .hue-range-thumb:focus, html svg.b-colorpicker-triangle .sl-range-thumb:focus, html div.b-colorpicker-square .colorpicker-square-slider-hue .hue-range-thumb:focus, html div.b-colorpicker-square .colorpicker-square-slider-sl .sl-range-thumb:focus, html .b-colorpicker-alpha-slider .alpha-range-thumb:focus { | |
| box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px var(--primary-color), 0 0 0 0.125em var(--primary-color-opaque); | |
| } | |
| html .datepicker .datepicker-table .datepicker-body .datepicker-cell.is-selected.is-within-selected { | |
| background-color: var(--primary-color-light); | |
| } | |
| html .b-steps .steps .step-items .step-item:before, html .b-steps .steps .step-items .step-item:after { | |
| background: linear-gradient(to left, #dbdbdb 50%, var(--primary-color) 50%); | |
| } | |
| html .b-steps.is-vertical > .steps .step-items .step-item:before, html .b-steps.is-vertical > .steps .step-items .step-item:after { | |
| background: linear-gradient(to top, #dbdbdb 50%, var(--primary-color) 50%); | |
| } | |
| html .b-table .table tr.is-selected .checkbox input:checked + .check { | |
| background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%2335C287' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center; | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Simply change the variables at the top. Theres an SVG fill in line 67 that you also need to change.