Last active
March 7, 2026 20:04
-
-
Save KevinNitroG/8fe249116629c58c3a98bdf20dc176be to your computer and use it in GitHub Desktop.
UIT catppuccin userstyle, made by sonnet 4.6
This file contains hidden or 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
| /* ==UserStyle== | |
| @name Moodle Quiz Catppuccin | |
| @namespace github.com/catppuccin/userstyles/styles/moodle-quiz | |
| @homepageURL https://gist.github.com/KevinNitroG/8fe249116629c58c3a98bdf20dc176be | |
| @version 2000.01.01 | |
| @updateURL https://gist.github.com/KevinNitroG/8fe249116629c58c3a98bdf20dc176be/raw/courses.user.less | |
| @supportURL https://gist.github.com/KevinNitroG/8fe249116629c58c3a98bdf20dc176be | |
| @description Soothing pastel theme for Moodle Quiz (mod/quiz) | |
| @author Catppuccin | |
| @license MIT | |
| @preprocessor less | |
| @var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] | |
| @var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] | |
| @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] | |
| ==/UserStyle== */ | |
| @import "https://userstyles.catppuccin.com/lib/lib.less"; | |
| @-moz-document domain("courses.uit.edu.vn") { | |
| :root { | |
| @media (prefers-color-scheme: light) { | |
| #catppuccin(@lightFlavor) !important; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| #catppuccin(@darkFlavor) !important; | |
| } | |
| } | |
| #catppuccin(@flavor) { | |
| #lib.palette(); | |
| #lib.defaults(); | |
| @white: if(@flavor = latte, @base, @text); | |
| @black: if(@flavor = latte, @text, @base); | |
| /* ================================================================ | |
| GLOBAL PAGE SHELL | |
| ================================================================ */ | |
| body, | |
| #page, | |
| #page-content, | |
| #region-main, | |
| .path-mod-quiz { | |
| background-color: @base !important; | |
| color: @text !important; | |
| } | |
| a { | |
| color: @accent !important; | |
| } | |
| a:hover { | |
| color: lighten(@accent, 8%) !important; | |
| } | |
| a:visited { | |
| color: darken(@accent, 8%) !important; | |
| } | |
| /* ================================================================ | |
| NAVBAR / HEADER | |
| ================================================================ */ | |
| header.navbar, | |
| .navbar, | |
| nav.navbar { | |
| background-color: @mantle !important; | |
| border-color: @surface0 !important; | |
| color: @text !important; | |
| a, | |
| a:visited { | |
| color: @subtext1 !important; | |
| } | |
| a:hover { | |
| color: @accent !important; | |
| } | |
| } | |
| /* ================================================================ | |
| GENERAL BOX / CARDS | |
| ================================================================ */ | |
| .generalbox, | |
| .box, | |
| .card, | |
| .panel, | |
| .block { | |
| background-color: @surface0 !important; | |
| border-color: @surface1 !important; | |
| color: @text !important; | |
| } | |
| /* ================================================================ | |
| FORMS & INPUTS | |
| ================================================================ */ | |
| input, | |
| textarea, | |
| select, | |
| .form-control { | |
| background-color: @surface1 !important; | |
| border-color: @surface2 !important; | |
| color: @text !important; | |
| } | |
| input:focus, | |
| textarea:focus, | |
| select:focus, | |
| .form-control:focus { | |
| border-color: @accent !important; | |
| box-shadow: 0 0 0 2px fade(@accent, 30%) !important; | |
| outline: none !important; | |
| } | |
| input[type="submit"], | |
| input[type="button"], | |
| button, | |
| .btn { | |
| background-color: @surface1 !important; | |
| border-color: @surface2 !important; | |
| color: @text !important; | |
| } | |
| input[type="submit"]:hover, | |
| input[type="button"]:hover, | |
| button:hover, | |
| .btn:hover { | |
| background-color: @surface2 !important; | |
| border-color: @accent !important; | |
| color: @text !important; | |
| } | |
| .btn-primary { | |
| background-color: @accent !important; | |
| border-color: @accent !important; | |
| color: @base !important; | |
| } | |
| .btn-primary:hover { | |
| background-color: darken(@accent, 8%) !important; | |
| } | |
| /* ================================================================ | |
| TABLES | |
| ================================================================ */ | |
| table, | |
| .generaltable { | |
| background-color: @surface0 !important; | |
| border-color: @surface1 !important; | |
| color: @text !important; | |
| } | |
| table th, | |
| .generaltable th, | |
| table thead th { | |
| background-color: @mantle !important; | |
| border-color: @surface1 !important; | |
| color: @subtext1 !important; | |
| } | |
| table td, | |
| .generaltable td { | |
| border-color: @surface1 !important; | |
| color: @text !important; | |
| } | |
| table tbody tr:nth-child(even), | |
| .generaltable tbody tr:nth-child(even) { | |
| background-color: @surface1 !important; | |
| } | |
| table tbody tr:hover, | |
| .generaltable tbody tr:hover { | |
| background-color: @surface2 !important; | |
| } | |
| /* ================================================================ | |
| QUIZ ATTEMPT & REVIEW | |
| ================================================================ */ | |
| .path-mod-quiz .statedetails { | |
| color: @subtext0 !important; | |
| } | |
| #page-mod-quiz-attempt .mod_quiz-blocked_question_warning .que .formulation, | |
| #page-mod-quiz-review .mod_quiz-blocked_question_warning .que .formulation { | |
| background: @surface1 !important; | |
| border-color: @surface2 !important; | |
| color: @subtext0 !important; | |
| } | |
| #page-mod-quiz-attempt #connection-ok { | |
| background-color: @green !important; | |
| color: @crust !important; | |
| box-shadow: 5px 5px 20px 0 @mantle !important; | |
| } | |
| #page-mod-quiz-attempt #connection-error { | |
| background-color: @red !important; | |
| color: @crust !important; | |
| box-shadow: 5px 5px 20px 0 @mantle !important; | |
| } | |
| .generalbox#passwordbox { | |
| background-color: @surface0 !important; | |
| border-color: @surface1 !important; | |
| } | |
| /* ================================================================ | |
| QUESTION NAVIGATION BLOCK | |
| ================================================================ */ | |
| #quiznojswarning { | |
| color: @red !important; | |
| } | |
| .path-mod-quiz #mod_quiz_navblock h3.mod_quiz-section-heading { | |
| color: @subtext1 !important; | |
| } | |
| /* qnbutton base */ | |
| .path-mod-quiz .qnbutton { | |
| background: @surface0 !important; | |
| border-color: @surface2 !important; | |
| color: @text !important; | |
| } | |
| .path-mod-quiz .qnbutton:visited:hover, | |
| .path-mod-quiz .qnbutton:link:hover { | |
| border-color: @accent !important; | |
| color: @accent !important; | |
| } | |
| /* current page */ | |
| .path-mod-quiz .qnbutton.thispage { | |
| border-color: @accent !important; | |
| } | |
| .path-mod-quiz .qnbutton.thispage .thispageholder { | |
| border-color: @accent !important; | |
| } | |
| /* states */ | |
| .path-mod-quiz .qnbutton.blocked, | |
| .path-mod-quiz .qnbutton.notyetanswered, | |
| .path-mod-quiz .qnbutton.requiresgrading, | |
| .path-mod-quiz .qnbutton.invalidanswer { | |
| background-color: @surface0 !important; | |
| color: @subtext0 !important; | |
| } | |
| .path-mod-quiz .qnbutton.blocked { | |
| color: @overlay1 !important; | |
| } | |
| .path-mod-quiz .qnbutton.correct { | |
| background-color: fade(@green, 25%) !important; | |
| color: @green !important; | |
| } | |
| .path-mod-quiz .qnbutton.correct .trafficlight { | |
| border-bottom-color: @green !important; | |
| } | |
| .path-mod-quiz .qnbutton.partiallycorrect { | |
| background-color: fade(@yellow, 25%) !important; | |
| color: @yellow !important; | |
| } | |
| .path-mod-quiz .qnbutton.notanswered, | |
| .path-mod-quiz .qnbutton.incorrect { | |
| background-color: fade(@red, 25%) !important; | |
| color: @red !important; | |
| } | |
| .path-mod-quiz .qnbutton.notanswered .trafficlight, | |
| .path-mod-quiz .qnbutton.incorrect .trafficlight { | |
| border-top-color: @red !important; | |
| } | |
| /* ================================================================ | |
| COUNTDOWN TIMER | |
| ================================================================ */ | |
| #quiz-timer { | |
| background-color: @surface0 !important; | |
| border-color: @surface1 !important; | |
| color: @text !important; | |
| } | |
| #quiz-time-left { | |
| color: @accent !important; | |
| } | |
| #quiz-timer.timeleft15 { | |
| background: @surface0 !important; | |
| } | |
| #quiz-timer.timeleft14 { | |
| background: mix(@red, @surface0, 6%) !important; | |
| } | |
| #quiz-timer.timeleft13 { | |
| background: mix(@red, @surface0, 12%) !important; | |
| } | |
| #quiz-timer.timeleft12 { | |
| background: mix(@red, @surface0, 18%) !important; | |
| } | |
| #quiz-timer.timeleft11 { | |
| background: mix(@red, @surface0, 24%) !important; | |
| } | |
| #quiz-timer.timeleft10 { | |
| background: mix(@red, @surface0, 30%) !important; | |
| } | |
| #quiz-timer.timeleft9 { | |
| background: mix(@red, @surface0, 38%) !important; | |
| } | |
| #quiz-timer.timeleft8 { | |
| background: mix(@red, @surface0, 46%) !important; | |
| } | |
| #quiz-timer.timeleft7 { | |
| background: mix(@red, @surface0, 54%) !important; | |
| } | |
| #quiz-timer.timeleft6 { | |
| background: mix(@red, @surface0, 62%) !important; | |
| } | |
| #quiz-timer.timeleft5 { | |
| background: mix(@red, @surface0, 70%) !important; | |
| } | |
| #quiz-timer.timeleft4 { | |
| background: mix(@red, @surface0, 78%) !important; | |
| } | |
| #quiz-timer.timeleft3 { | |
| background: mix(@red, @surface0, 86%) !important; | |
| } | |
| #quiz-timer.timeleft2 { | |
| background: mix(@red, @surface0, 92%) !important; | |
| } | |
| #quiz-timer.timeleft1 { | |
| background: mix(@red, @surface0, 97%) !important; | |
| } | |
| #quiz-timer.timeleft0 { | |
| background: @red !important; | |
| color: @crust !important; | |
| } | |
| /* ================================================================ | |
| QUIZ VIEW | |
| ================================================================ */ | |
| #page-mod-quiz-view table.quizattemptsummary tr.bestrow td, | |
| body.path-mod-quiz .gradedattempt, | |
| body.path-mod-quiz table tbody tr.gradedattempt > td { | |
| border-color: @sapphire !important; | |
| background-color: fade(@sapphire, 15%) !important; | |
| } | |
| table.quizattemptsummary .noreviewmessage { | |
| color: @overlay1 !important; | |
| } | |
| #page-mod-quiz-view .generalbox#feedback { | |
| background-color: @surface0 !important; | |
| border-color: @surface1 !important; | |
| } | |
| #page-mod-quiz-view .generalbox#feedback h2, | |
| #page-mod-quiz-view .generalbox#feedback h3 { | |
| color: @text !important; | |
| } | |
| #page-mod-quiz-view .generalbox#feedback .overriddennotice { | |
| color: @subtext0 !important; | |
| } | |
| /* ================================================================ | |
| QUIZ REVIEW SUMMARY TABLE | |
| ================================================================ */ | |
| table.quizreviewsummary th.cell { | |
| background-color: @mantle !important; | |
| color: @subtext1 !important; | |
| border-color: @surface1 !important; | |
| } | |
| table.quizreviewsummary td.cell { | |
| background-color: @surface0 !important; | |
| color: @text !important; | |
| border-color: @surface1 !important; | |
| } | |
| /* ================================================================ | |
| QUIZ REPORT | |
| ================================================================ */ | |
| #page-mod-quiz-report .dubious { | |
| background-color: fade(@red, 20%) !important; | |
| color: @text !important; | |
| } | |
| #page-mod-quiz-report .highlight { | |
| border-color: @sapphire !important; | |
| background-color: fade(@sapphire, 15%) !important; | |
| } | |
| #page-mod-quiz-report .negcovar { | |
| border-color: @pink !important; | |
| } | |
| #page-mod-quiz-report #cachingnotice { | |
| background-color: @surface1 !important; | |
| border-color: @surface2 !important; | |
| color: @subtext0 !important; | |
| } | |
| #page-mod-quiz-report tr.lastrowforattempt { | |
| border-bottom-color: @surface2 !important; | |
| } | |
| #page-mod-quiz-report table#attempts td { | |
| border-color: @surface1 !important; | |
| } | |
| #page-mod-quiz-report table#attempts .header { | |
| background-color: @mantle !important; | |
| color: @subtext1 !important; | |
| } | |
| /* ================================================================ | |
| QUIZ EDIT PAGE | |
| ================================================================ */ | |
| #page-mod-quiz-edit .statusdisplay { | |
| background-color: fade(@yellow, 15%) !important; | |
| border-color: fade(@yellow, 30%) !important; | |
| color: @text !important; | |
| } | |
| #page-mod-quiz-edit .paging { | |
| background-color: @surface1 !important; | |
| color: @subtext0 !important; | |
| } | |
| #page-mod-quiz-edit .slotnumber { | |
| background-color: @surface2 !important; | |
| color: @text !important; | |
| } | |
| #page-mod-quiz-edit .section-heading .instancesectioncontainer h3 { | |
| color: @overlay1 !important; | |
| } | |
| #page-mod-quiz-edit ul.slots li.section li.activity { | |
| background-color: @surface0 !important; | |
| border-color: @surface1 !important; | |
| } | |
| #page-mod-quiz-edit ul.slots li.section .content { | |
| background-color: @mantle !important; | |
| } | |
| #page-mod-quiz-edit | |
| ul.slots | |
| li.section | |
| li.activity | |
| .instancemaxmarkcontainer { | |
| background-color: @surface1 !important; | |
| border-color: @surface2 !important; | |
| } | |
| #page-mod-quiz-edit #categoryquestions .questionname, | |
| #page-mod-quiz-edit | |
| ul.slots | |
| li.activity | |
| div.activityinstance | |
| .questionname { | |
| color: @subtext1 !important; | |
| } | |
| #page-mod-quiz-edit | |
| ul.slots | |
| li.activity | |
| div.activityinstance | |
| .questiontext { | |
| color: @subtext0 !important; | |
| } | |
| #page-mod-quiz-edit .section .activity .actions { | |
| background-color: @surface1 !important; | |
| } | |
| .mod_quiz_qbank_dialogue .questionbankloading { | |
| background-color: fade(@base, 80%) !important; | |
| color: @text !important; | |
| } | |
| /* ================================================================ | |
| CATEGORY QUESTIONS TABLE | |
| ================================================================ */ | |
| #categoryquestions > tbody > tr:nth-of-type(even) { | |
| background-color: @surface1 !important; | |
| } | |
| #categoryquestions > tbody > tr:nth-of-type(even).highlight { | |
| background-color: fade(@green, 20%) !important; | |
| } | |
| #categoryquestions .header { | |
| background-color: @mantle !important; | |
| color: @subtext1 !important; | |
| } | |
| /* ================================================================ | |
| QUESTION CONTAINER | |
| ================================================================ */ | |
| .que { | |
| background-color: @surface0 !important; | |
| border-color: @surface1 !important; | |
| color: @text !important; | |
| } | |
| .que .info { | |
| background-color: @mantle !important; | |
| border-color: @surface1 !important; | |
| color: @subtext1 !important; | |
| } | |
| .que .formulation { | |
| background-color: @surface1 !important; | |
| border-color: @surface2 !important; | |
| color: @text !important; | |
| } | |
| .que .correct .formulation { | |
| border-left: 4px solid @green !important; | |
| } | |
| .que .partiallycorrect .formulation { | |
| border-left: 4px solid @yellow !important; | |
| } | |
| .que .incorrect .formulation { | |
| border-left: 4px solid @red !important; | |
| } | |
| /* ================================================================ | |
| ALERTS / NOTICES | |
| ================================================================ */ | |
| .alert-success, | |
| .notifysuccess { | |
| background-color: fade(@green, 20%) !important; | |
| border-color: @green !important; | |
| color: @green !important; | |
| } | |
| .alert-warning { | |
| background-color: fade(@yellow, 20%) !important; | |
| border-color: @yellow !important; | |
| color: @yellow !important; | |
| } | |
| .alert-danger, | |
| .notifyerror, | |
| .notifyproblem { | |
| background-color: fade(@red, 20%) !important; | |
| border-color: @red !important; | |
| color: @red !important; | |
| } | |
| .alert-info { | |
| background-color: fade(@blue, 20%) !important; | |
| border-color: @blue !important; | |
| color: @blue !important; | |
| } | |
| /* ================================================================ | |
| BREADCRUMB | |
| ================================================================ */ | |
| .breadcrumb, | |
| ol.breadcrumb { | |
| background-color: @mantle !important; | |
| } | |
| .breadcrumb-item a, | |
| ol.breadcrumb li a { | |
| color: @accent !important; | |
| } | |
| .breadcrumb-item.active, | |
| ol.breadcrumb li.active { | |
| color: @subtext0 !important; | |
| } | |
| .breadcrumb-item + .breadcrumb-item::before, | |
| ol.breadcrumb li + li::before { | |
| color: @overlay0 !important; | |
| } | |
| /* ================================================================ | |
| SIDEBAR BLOCKS | |
| ================================================================ */ | |
| .block .card-body, | |
| .block-region .block { | |
| background-color: @surface0 !important; | |
| border-color: @surface1 !important; | |
| } | |
| .block .card-header, | |
| .block .header { | |
| background-color: @mantle !important; | |
| color: @subtext1 !important; | |
| border-color: @surface1 !important; | |
| } | |
| /* ================================================================ | |
| MODALS | |
| ================================================================ */ | |
| .modal-content, | |
| .moodle-dialogue-base .moodle-dialogue-wrap { | |
| background-color: @surface0 !important; | |
| border-color: @surface1 !important; | |
| color: @text !important; | |
| } | |
| .modal-header, | |
| .moodle-dialogue-base .moodle-dialogue-hd { | |
| background-color: @mantle !important; | |
| border-color: @surface1 !important; | |
| color: @text !important; | |
| } | |
| .modal-footer { | |
| background-color: @mantle !important; | |
| border-color: @surface1 !important; | |
| } | |
| .modal-backdrop { | |
| background-color: @crust !important; | |
| } | |
| /* ================================================================ | |
| PROGRESS BAR | |
| ================================================================ */ | |
| .progress { | |
| background-color: @surface1 !important; | |
| } | |
| .progress-bar { | |
| background-color: @accent !important; | |
| color: @base !important; | |
| } | |
| /* ================================================================ | |
| SCROLLBARS (Webkit) | |
| ================================================================ */ | |
| ::-webkit-scrollbar { | |
| width: 10px; | |
| height: 10px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: @mantle !important; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: @surface2 !important; | |
| border-radius: 5px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: @overlay0 !important; | |
| } | |
| /* ================================================================ | |
| SELECTION | |
| ================================================================ */ | |
| ::selection { | |
| background-color: fade(@accent, 25%) !important; | |
| color: @text !important; | |
| } | |
| } | |
| } |
This file contains hidden or 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
| /* ==UserStyle== | |
| @name UIT | |
| @namespace github.com/catppuccin/userstyles/styles/uit-student | |
| @homepageURL https://gist.github.com/KevinNitroG/8fe249116629c58c3a98bdf20dc176be | |
| @version 2000.01.01 | |
| @updateURL https://gist.github.com/KevinNitroG/8fe249116629c58c3a98bdf20dc176be/raw/uit.user.less | |
| @supportURL https://gist.github.com/KevinNitroG/8fe249116629c58c3a98bdf20dc176be | |
| @description Soothing pastel theme for UIT | |
| @author Catppuccin | |
| @license MIT | |
| @preprocessor less | |
| @var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] | |
| @var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] | |
| @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] | |
| ==/UserStyle== */ | |
| @import "https://userstyles.catppuccin.com/lib/lib.less"; | |
| @-moz-document domain("student.uit.edu.vn"), | |
| domain("ctsv.uit.edu.vn/*"), | |
| domain("drl.uit.edu.vn/*") { | |
| :root { | |
| @media (prefers-color-scheme: light) { | |
| #catppuccin(@lightFlavor) !important; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| #catppuccin(@darkFlavor) !important; | |
| } | |
| } | |
| #catppuccin(@flavor) { | |
| #lib.palette(); | |
| #lib.defaults(); | |
| @white: if(@flavor = latte, @base, @text); | |
| @black: if(@flavor = latte, @text, @base); | |
| /* ================================================================ | |
| CSS CUSTOM PROPERTIES (Bootstrap + Drupal variables) | |
| ================================================================ */ | |
| &, | |
| :root { | |
| --bs-body-bg: @base; | |
| --bs-body-color: @text; | |
| --bs-emphasis-color: @text; | |
| --bs-secondary-bg: @mantle; | |
| --bs-tertiary-bg: @surface0; | |
| --bs-secondary-color: @subtext0; | |
| --bs-tertiary-color: @subtext1; | |
| --bs-border-color: @surface1; | |
| --bs-border-color-translucent: fade(@surface2, 70%); | |
| --bs-link-color: @accent; | |
| --bs-link-color-rgb: red(@accent), green(@accent), blue(@accent); | |
| --bs-link-hover-color: lighten(@accent, 8%); | |
| --bs-primary: @accent; | |
| --bs-primary-rgb: red(@accent), green(@accent), blue(@accent); | |
| --bs-secondary: @subtext0; | |
| --bs-success: @green; | |
| --bs-info: @blue; | |
| --bs-warning: @yellow; | |
| --bs-danger: @red; | |
| --bs-light: @surface0; | |
| --bs-dark: @mantle; | |
| --bs-heading-color: @text; | |
| --bs-card-bg: @surface0; | |
| --bs-card-border-color: @surface1; | |
| --bs-card-cap-bg: @mantle; | |
| --bs-nav-link-color: @subtext1; | |
| --bs-nav-link-hover-color: @accent; | |
| --bs-navbar-color: @subtext1; | |
| --bs-navbar-hover-color: @accent; | |
| --bs-navbar-active-color: @accent; | |
| --bs-navbar-bg: @mantle; | |
| --bs-navbar-border-color: @surface0; | |
| --bs-dropdown-bg: @surface0; | |
| --bs-dropdown-border-color: @surface1; | |
| --bs-dropdown-color: @text; | |
| --bs-dropdown-link-color: @text; | |
| --bs-dropdown-link-hover-bg: @surface1; | |
| --bs-dropdown-link-hover-color: @text; | |
| --bs-dropdown-link-active-bg: @accent; | |
| --bs-dropdown-link-active-color: @base; | |
| --bs-input-bg: @surface1; | |
| --bs-input-color: @text; | |
| --bs-input-border-color: @surface2; | |
| --bs-input-focus-border-color: @accent; | |
| --bs-form-check-input-bg: @surface1; | |
| --bs-table-bg: @surface0; | |
| --bs-table-striped-bg: @surface1; | |
| --bs-table-hover-bg: @surface2; | |
| --bs-table-border-color: @surface1; | |
| --bs-table-color: @text; | |
| --bs-modal-bg: @surface0; | |
| --bs-modal-header-bg: @mantle; | |
| --bs-modal-border-color: @surface1; | |
| --bs-pagination-bg: @surface0; | |
| --bs-pagination-color: @subtext1; | |
| --bs-pagination-border-color: @surface1; | |
| --bs-pagination-hover-bg: @surface1; | |
| --bs-pagination-hover-color: @text; | |
| --bs-pagination-active-bg: @accent; | |
| --bs-pagination-active-color: @base; | |
| --bs-pagination-disabled-bg: @surface0; | |
| --bs-pagination-disabled-color: @overlay0; | |
| --bs-badge-color: @base; | |
| --bs-breadcrumb-divider-color: @overlay0; | |
| --bs-breadcrumb-active-color: @subtext0; | |
| --bs-tooltip-bg: @overlay0; | |
| --bs-tooltip-color: @text; | |
| --bs-popover-bg: @surface0; | |
| --bs-popover-border-color: @surface1; | |
| --bs-popover-header-bg: @mantle; | |
| --bs-popover-body-color: @text; | |
| --bs-toast-bg: @surface0; | |
| --bs-toast-border-color: @surface1; | |
| --bs-toast-header-bg: @mantle; | |
| --bs-progress-bg: @surface1; | |
| --bs-progress-bar-bg: @accent; | |
| --bs-list-group-bg: @surface0; | |
| --bs-list-group-border-color: @surface1; | |
| --bs-list-group-color: @text; | |
| --bs-list-group-hover-bg: @surface1; | |
| --bs-list-group-active-bg: @accent; | |
| --bs-list-group-active-color: @base; | |
| --bs-accordion-bg: @surface0; | |
| --bs-accordion-border-color: @surface1; | |
| --bs-accordion-btn-bg: @surface0; | |
| --bs-accordion-btn-color: @text; | |
| --bs-accordion-active-bg: @surface1; | |
| --bs-accordion-active-color: @text; | |
| } | |
| /* ================================================================ | |
| BODY / PAGE SHELL | |
| ================================================================ */ | |
| body, | |
| html, | |
| #page-wrapper, | |
| #page, | |
| .page-wrapper, | |
| main, | |
| .main-container, | |
| .region-content, | |
| [role="main"] { | |
| background-color: @base !important; | |
| color: @text !important; | |
| } | |
| /* ================================================================ | |
| TYPOGRAPHY | |
| ================================================================ */ | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6 { | |
| color: @text !important; | |
| } | |
| p, | |
| li, | |
| td, | |
| th, | |
| label, | |
| span { | |
| color: inherit; | |
| } | |
| a { | |
| color: @accent !important; | |
| } | |
| a:hover { | |
| color: lighten(@accent, 8%) !important; | |
| text-decoration: underline; | |
| } | |
| a:visited { | |
| color: darken(@accent, 8%) !important; | |
| } | |
| small, | |
| .text-muted, | |
| .help-block { | |
| color: @subtext0 !important; | |
| } | |
| /* ================================================================ | |
| DRUPAL ADMIN TOOLBAR / TOPBAR | |
| ================================================================ */ | |
| #toolbar-administration, | |
| .toolbar-bar, | |
| .toolbar-tray, | |
| #toolbar-bar { | |
| background-color: @crust !important; | |
| border-color: @surface0 !important; | |
| color: @text !important; | |
| a, | |
| .toolbar-item { | |
| color: @subtext1 !important; | |
| } | |
| a:hover, | |
| .toolbar-item:hover { | |
| color: @accent !important; | |
| background-color: @surface0 !important; | |
| } | |
| .toolbar-item.is-active { | |
| color: @accent !important; | |
| background-color: @surface1 !important; | |
| } | |
| } | |
| .toolbar-tray-horizontal ul li > a, | |
| .toolbar-tray-horizontal ul li > button { | |
| color: @subtext1 !important; | |
| &:hover { | |
| background-color: @surface1 !important; | |
| color: @text !important; | |
| } | |
| } | |
| /* ================================================================ | |
| BOOTSTRAP NAVBAR | |
| ================================================================ */ | |
| .navbar, | |
| .navbar-default, | |
| nav.navbar { | |
| background-color: @mantle !important; | |
| border-color: @surface0 !important; | |
| } | |
| .navbar-brand, | |
| .navbar-nav > li > a, | |
| .nav-link { | |
| color: @subtext1 !important; | |
| } | |
| .navbar-brand:hover, | |
| .navbar-nav > li > a:hover, | |
| .nav-link:hover { | |
| color: @accent !important; | |
| } | |
| .navbar-nav > li.active > a, | |
| .navbar-nav > .active > a, | |
| .nav-link.active { | |
| color: @accent !important; | |
| background-color: @surface0 !important; | |
| } | |
| .navbar-toggler { | |
| border-color: @surface2 !important; | |
| color: @text !important; | |
| } | |
| .navbar-toggler-icon { | |
| filter: if(@flavor = latte, none, invert(1)); | |
| } | |
| /* ================================================================ | |
| DRUPAL MAIN MENU / MENUS | |
| ================================================================ */ | |
| .menu--main, | |
| .menu--account, | |
| .nav-tabs, | |
| nav > ul, | |
| .nav-primary { | |
| background-color: transparent !important; | |
| } | |
| .menu--main .nav-link, | |
| .menu--main a, | |
| .nav-tabs .nav-link { | |
| color: @subtext1 !important; | |
| } | |
| .menu--main .nav-link:hover, | |
| .menu--main a:hover, | |
| .nav-tabs .nav-link:hover { | |
| color: @accent !important; | |
| background-color: @surface0 !important; | |
| } | |
| .nav-tabs .nav-link.active, | |
| .nav-tabs .nav-item.show .nav-link { | |
| background-color: @surface0 !important; | |
| border-color: @surface1 @surface1 @surface0 !important; | |
| color: @accent !important; | |
| } | |
| .nav-tabs { | |
| border-bottom-color: @surface1 !important; | |
| } | |
| /* ================================================================ | |
| DRUPAL SIDEBAR / BLOCKS | |
| ================================================================ */ | |
| .region-sidebar-first, | |
| .region-sidebar-second, | |
| aside, | |
| .block, | |
| .card { | |
| background-color: @surface0 !important; | |
| border-color: @surface1 !important; | |
| color: @text !important; | |
| } | |
| .block__title, | |
| .card-header, | |
| .panel-heading { | |
| background-color: @mantle !important; | |
| color: @text !important; | |
| border-bottom-color: @surface1 !important; | |
| } | |
| .card-body { | |
| background-color: @surface0 !important; | |
| color: @text !important; | |
| } | |
| /* ================================================================ | |
| DRUPAL MESSAGES / ALERTS | |
| ================================================================ */ | |
| .messages--status, | |
| .alert-success, | |
| .status-messages { | |
| background-color: fade(@green, 15%) !important; | |
| border-color: @green !important; | |
| color: @green !important; | |
| } | |
| .messages--warning, | |
| .alert-warning { | |
| background-color: fade(@yellow, 15%) !important; | |
| border-color: @yellow !important; | |
| color: @yellow !important; | |
| } | |
| .messages--error, | |
| .alert-danger { | |
| background-color: fade(@red, 15%) !important; | |
| border-color: @red !important; | |
| color: @red !important; | |
| } | |
| .alert-info, | |
| .messages--info { | |
| background-color: fade(@blue, 15%) !important; | |
| border-color: @blue !important; | |
| color: @blue !important; | |
| } | |
| .messages .messages__icon { | |
| fill: currentColor !important; | |
| } | |
| /* ================================================================ | |
| DRUPAL BREADCRUMB | |
| ================================================================ */ | |
| .breadcrumb, | |
| nav[aria-label="Breadcrumb"], | |
| .breadcrumbs { | |
| background-color: @mantle !important; | |
| border-color: @surface1 !important; | |
| } | |
| .breadcrumb-item a, | |
| .breadcrumbs a { | |
| color: @accent !important; | |
| } | |
| .breadcrumb-item.active, | |
| .breadcrumb-item + .breadcrumb-item::before { | |
| color: @overlay0 !important; | |
| } | |
| /* ================================================================ | |
| FORMS & INPUTS | |
| ================================================================ */ | |
| .form-control, | |
| input[type="text"], | |
| input[type="email"], | |
| input[type="password"], | |
| input[type="search"], | |
| input[type="number"], | |
| input[type="url"], | |
| input[type="tel"], | |
| input[type="date"], | |
| textarea, | |
| select { | |
| background-color: @surface1 !important; | |
| border-color: @surface2 !important; | |
| color: @text !important; | |
| } | |
| .form-control:focus, | |
| input:focus, | |
| textarea:focus, | |
| select:focus { | |
| background-color: @surface1 !important; | |
| border-color: @accent !important; | |
| box-shadow: 0 0 0 0.2rem fade(@accent, 25%) !important; | |
| color: @text !important; | |
| outline: none !important; | |
| } | |
| input::placeholder, | |
| textarea::placeholder { | |
| color: @subtext0 !important; | |
| opacity: 1 !important; | |
| } | |
| .form-label, | |
| label { | |
| color: @subtext1 !important; | |
| } | |
| .form-check-input { | |
| background-color: @surface1 !important; | |
| border-color: @surface2 !important; | |
| } | |
| .form-check-input:checked { | |
| background-color: @accent !important; | |
| border-color: @accent !important; | |
| } | |
| .form-select { | |
| background-color: @surface1 !important; | |
| border-color: @surface2 !important; | |
| color: @text !important; | |
| } | |
| /* ================================================================ | |
| BUTTONS | |
| ================================================================ */ | |
| .btn, | |
| button, | |
| input[type="submit"], | |
| input[type="button"], | |
| input[type="reset"] { | |
| background-color: @surface1 !important; | |
| border-color: @surface2 !important; | |
| color: @text !important; | |
| } | |
| .btn:hover, | |
| button:hover { | |
| background-color: @surface2 !important; | |
| border-color: @accent !important; | |
| } | |
| .btn-primary { | |
| background-color: @accent !important; | |
| border-color: @accent !important; | |
| color: @base !important; | |
| } | |
| .btn-primary:hover { | |
| background-color: darken(@accent, 8%) !important; | |
| border-color: darken(@accent, 8%) !important; | |
| } | |
| .btn-secondary { | |
| background-color: @surface2 !important; | |
| border-color: @overlay0 !important; | |
| color: @text !important; | |
| } | |
| .btn-success { | |
| background-color: @green !important; | |
| border-color: @green !important; | |
| color: @crust !important; | |
| } | |
| .btn-danger { | |
| background-color: @red !important; | |
| border-color: @red !important; | |
| color: @crust !important; | |
| } | |
| .btn-warning { | |
| background-color: @yellow !important; | |
| border-color: @yellow !important; | |
| color: @crust !important; | |
| } | |
| .btn-info { | |
| background-color: @blue !important; | |
| border-color: @blue !important; | |
| color: @crust !important; | |
| } | |
| .btn-outline-primary { | |
| border-color: @accent !important; | |
| color: @accent !important; | |
| } | |
| .btn-outline-primary:hover { | |
| background-color: @accent !important; | |
| color: @base !important; | |
| } | |
| .btn-link { | |
| color: @accent !important; | |
| } | |
| /* ================================================================ | |
| TABLES | |
| ================================================================ */ | |
| table, | |
| .table { | |
| color: @text !important; | |
| border-color: @surface1 !important; | |
| } | |
| table thead, | |
| .table thead, | |
| .table > thead { | |
| background-color: @mantle !important; | |
| color: @subtext1 !important; | |
| } | |
| table thead th, | |
| .table thead th { | |
| border-color: @surface2 !important; | |
| color: @subtext1 !important; | |
| } | |
| table tbody, | |
| .table tbody { | |
| background-color: @surface0 !important; | |
| } | |
| table tbody tr:nth-child(even), | |
| .table-striped > tbody > tr:nth-child(even) { | |
| background-color: @surface1 !important; | |
| } | |
| table tbody tr:hover, | |
| .table-hover tbody tr:hover { | |
| background-color: @surface2 !important; | |
| } | |
| table td, | |
| table th, | |
| .table td, | |
| .table th { | |
| border-color: @surface1 !important; | |
| color: @text !important; | |
| } | |
| /* Drupal views table */ | |
| .views-table, | |
| .view-content table { | |
| background-color: @surface0 !important; | |
| } | |
| .views-table thead th { | |
| background-color: @mantle !important; | |
| color: @subtext1 !important; | |
| } | |
| /* ================================================================ | |
| DRUPAL PAGER / PAGINATION | |
| ================================================================ */ | |
| .pager__items, | |
| .pagination { | |
| background-color: transparent !important; | |
| } | |
| .pager__item a, | |
| .page-link { | |
| background-color: @surface0 !important; | |
| border-color: @surface1 !important; | |
| color: @accent !important; | |
| } | |
| .pager__item a:hover, | |
| .page-link:hover { | |
| background-color: @surface1 !important; | |
| color: @text !important; | |
| } | |
| .pager__item--current .page-link, | |
| .page-item.active .page-link { | |
| background-color: @accent !important; | |
| border-color: @accent !important; | |
| color: @base !important; | |
| } | |
| .page-item.disabled .page-link { | |
| background-color: @surface0 !important; | |
| color: @overlay0 !important; | |
| border-color: @surface1 !important; | |
| } | |
| /* ================================================================ | |
| DRUPAL TABS (local tasks) | |
| ================================================================ */ | |
| .tabs--primary, | |
| .tabs, | |
| ul.tabs { | |
| background-color: transparent !important; | |
| border-bottom: 2px solid @surface1 !important; | |
| } | |
| .tabs__tab, | |
| .tabs .tab, | |
| ul.tabs li { | |
| background-color: @surface0 !important; | |
| border-color: @surface1 !important; | |
| } | |
| .tabs__tab a, | |
| ul.tabs li a { | |
| color: @subtext1 !important; | |
| background-color: @surface0 !important; | |
| } | |
| .tabs__tab a:hover, | |
| ul.tabs li a:hover { | |
| color: @accent !important; | |
| background-color: @surface1 !important; | |
| } | |
| .tabs__tab.is-active a, | |
| ul.tabs li.active a, | |
| .tabs__tab--active a { | |
| color: @accent !important; | |
| background-color: @mantle !important; | |
| border-bottom-color: @mantle !important; | |
| } | |
| /* ================================================================ | |
| DRUPAL HEADER REGION | |
| ================================================================ */ | |
| header, | |
| .header, | |
| .site-header, | |
| #header, | |
| [role="banner"] { | |
| background-color: @mantle !important; | |
| border-bottom: 1px solid @surface0 !important; | |
| color: @text !important; | |
| } | |
| .site-name a, | |
| .logo a { | |
| color: @text !important; | |
| } | |
| /* ================================================================ | |
| DRUPAL FOOTER | |
| ================================================================ */ | |
| footer, | |
| .footer, | |
| .site-footer, | |
| #footer, | |
| [role="contentinfo"] { | |
| background-color: @crust !important; | |
| border-top: 1px solid @surface0 !important; | |
| color: @subtext0 !important; | |
| } | |
| footer a, | |
| .footer a { | |
| color: @accent !important; | |
| } | |
| /* ================================================================ | |
| DRUPAL VIEWS / CONTENT LISTINGS | |
| ================================================================ */ | |
| .view, | |
| .views-row, | |
| .views-element-container { | |
| background-color: @base !important; | |
| color: @text !important; | |
| } | |
| .views-field-title a { | |
| color: @accent !important; | |
| } | |
| .views-exposed-form { | |
| background-color: @surface0 !important; | |
| border-color: @surface1 !important; | |
| padding: 1em; | |
| border-radius: 4px; | |
| } | |
| /* ================================================================ | |
| DRUPAL NODES / ARTICLE | |
| ================================================================ */ | |
| article, | |
| .node, | |
| .node--type-page, | |
| .node--type-article { | |
| background-color: @surface0 !important; | |
| border-color: @surface1 !important; | |
| color: @text !important; | |
| } | |
| .node__title a, | |
| article h2 a { | |
| color: @accent !important; | |
| } | |
| .node__meta, | |
| .submitted, | |
| .field--name-created { | |
| color: @subtext0 !important; | |
| } | |
| /* ================================================================ | |
| DRUPAL SEARCH | |
| ================================================================ */ | |
| .search-form, | |
| .search-block-form { | |
| background-color: @surface0 !important; | |
| } | |
| .search-form input[type="search"], | |
| input.form-search { | |
| background-color: @surface1 !important; | |
| border-color: @surface2 !important; | |
| color: @text !important; | |
| } | |
| .search-results .search-result__title a { | |
| color: @accent !important; | |
| } | |
| .search-results .search-result__snippet { | |
| color: @subtext0 !important; | |
| } | |
| /* ================================================================ | |
| DROPDOWN MENUS | |
| ================================================================ */ | |
| .dropdown-menu { | |
| background-color: @surface0 !important; | |
| border-color: @surface1 !important; | |
| color: @text !important; | |
| } | |
| .dropdown-item { | |
| color: @text !important; | |
| } | |
| .dropdown-item:hover, | |
| .dropdown-item:focus { | |
| background-color: @surface1 !important; | |
| color: @text !important; | |
| } | |
| .dropdown-item.active, | |
| .dropdown-item:active { | |
| background-color: @accent !important; | |
| color: @base !important; | |
| } | |
| .dropdown-divider { | |
| border-color: @surface2 !important; | |
| } | |
| .dropdown-header { | |
| color: @subtext0 !important; | |
| } | |
| /* ================================================================ | |
| MODALS | |
| ================================================================ */ | |
| .modal-content { | |
| background-color: @surface0 !important; | |
| border-color: @surface1 !important; | |
| } | |
| .modal-header { | |
| background-color: @mantle !important; | |
| border-bottom-color: @surface1 !important; | |
| color: @text !important; | |
| } | |
| .modal-footer { | |
| background-color: @mantle !important; | |
| border-top-color: @surface1 !important; | |
| } | |
| .modal-title { | |
| color: @text !important; | |
| } | |
| .modal-backdrop { | |
| background-color: @crust !important; | |
| } | |
| .btn-close { | |
| filter: if(@flavor = latte, none, invert(1) brightness(1.5)); | |
| } | |
| /* ================================================================ | |
| BADGES | |
| ================================================================ */ | |
| .badge, | |
| .label { | |
| color: @base !important; | |
| } | |
| .badge.bg-primary, | |
| .badge-primary { | |
| background-color: @accent !important; | |
| } | |
| .badge.bg-success, | |
| .badge-success { | |
| background-color: @green !important; | |
| } | |
| .badge.bg-danger, | |
| .badge-danger { | |
| background-color: @red !important; | |
| } | |
| .badge.bg-warning, | |
| .badge-warning { | |
| background-color: @yellow !important; | |
| } | |
| .badge.bg-info, | |
| .badge-info { | |
| background-color: @blue !important; | |
| } | |
| .badge.bg-secondary, | |
| .badge-secondary { | |
| background-color: @subtext0 !important; | |
| } | |
| .badge.bg-dark, | |
| .badge-dark { | |
| background-color: @mantle !important; | |
| color: @text !important; | |
| } | |
| .badge.bg-light, | |
| .badge-light { | |
| background-color: @surface1 !important; | |
| color: @text !important; | |
| } | |
| /* ================================================================ | |
| PROGRESS BAR | |
| ================================================================ */ | |
| .progress { | |
| background-color: @surface1 !important; | |
| } | |
| .progress-bar { | |
| background-color: @accent !important; | |
| color: @base !important; | |
| } | |
| .progress-bar-success { | |
| background-color: @green !important; | |
| } | |
| .progress-bar-warning { | |
| background-color: @yellow !important; | |
| } | |
| .progress-bar-danger { | |
| background-color: @red !important; | |
| } | |
| .progress-bar-info { | |
| background-color: @blue !important; | |
| } | |
| /* ================================================================ | |
| ACCORDION | |
| ================================================================ */ | |
| .accordion-item { | |
| background-color: @surface0 !important; | |
| border-color: @surface1 !important; | |
| } | |
| .accordion-header { | |
| background-color: @surface0 !important; | |
| } | |
| .accordion-button { | |
| background-color: @surface0 !important; | |
| color: @text !important; | |
| } | |
| .accordion-button:not(.collapsed) { | |
| background-color: @surface1 !important; | |
| color: @accent !important; | |
| box-shadow: inset 0 -1px 0 @surface2 !important; | |
| } | |
| .accordion-body { | |
| background-color: @surface0 !important; | |
| color: @text !important; | |
| } | |
| /* ================================================================ | |
| LIST GROUP | |
| ================================================================ */ | |
| .list-group-item { | |
| background-color: @surface0 !important; | |
| border-color: @surface1 !important; | |
| color: @text !important; | |
| } | |
| .list-group-item:hover { | |
| background-color: @surface1 !important; | |
| } | |
| .list-group-item.active, | |
| .list-group-item.active:hover { | |
| background-color: @accent !important; | |
| border-color: @accent !important; | |
| color: @base !important; | |
| } | |
| .list-group-item-primary { | |
| background-color: fade(@accent, 20%) !important; | |
| color: @text !important; | |
| } | |
| .list-group-item-success { | |
| background-color: fade(@green, 20%) !important; | |
| color: @text !important; | |
| } | |
| .list-group-item-warning { | |
| background-color: fade(@yellow, 20%) !important; | |
| color: @text !important; | |
| } | |
| .list-group-item-danger { | |
| background-color: fade(@red, 20%) !important; | |
| color: @text !important; | |
| } | |
| /* ================================================================ | |
| TOOLTIPS & POPOVERS | |
| ================================================================ */ | |
| .tooltip-inner { | |
| background-color: @overlay0 !important; | |
| color: @text !important; | |
| } | |
| .tooltip-arrow::before { | |
| border-top-color: @overlay0 !important; | |
| } | |
| .popover { | |
| background-color: @surface0 !important; | |
| border-color: @surface1 !important; | |
| } | |
| .popover-header { | |
| background-color: @mantle !important; | |
| border-bottom-color: @surface1 !important; | |
| color: @text !important; | |
| } | |
| .popover-body { | |
| color: @text !important; | |
| } | |
| /* ================================================================ | |
| TOAST | |
| ================================================================ */ | |
| .toast { | |
| background-color: @surface0 !important; | |
| border-color: @surface1 !important; | |
| } | |
| .toast-header { | |
| background-color: @mantle !important; | |
| border-bottom-color: @surface1 !important; | |
| color: @text !important; | |
| } | |
| .toast-body { | |
| color: @text !important; | |
| } | |
| /* ================================================================ | |
| SPINNER / LOADERS | |
| ================================================================ */ | |
| .spinner-border, | |
| .spinner-grow { | |
| color: @accent !important; | |
| } | |
| /* ================================================================ | |
| HORIZONTAL RULE / DIVIDERS | |
| ================================================================ */ | |
| hr { | |
| border-color: @surface1 !important; | |
| } | |
| /* ================================================================ | |
| CODE BLOCKS | |
| ================================================================ */ | |
| code, | |
| kbd, | |
| samp, | |
| pre { | |
| background-color: @mantle !important; | |
| color: @pink !important; | |
| border-color: @surface1 !important; | |
| } | |
| pre { | |
| background-color: @mantle !important; | |
| color: @text !important; | |
| } | |
| /* ================================================================ | |
| DRUPAL-SPECIFIC: Student info / profile | |
| ================================================================ */ | |
| .profile, | |
| .user-profile, | |
| .views-row--student, | |
| .student-info, | |
| .daa-student { | |
| background-color: @surface0 !important; | |
| border-color: @surface1 !important; | |
| color: @text !important; | |
| } | |
| /* Academic score tables (điểm, transcript) */ | |
| .diem, | |
| .diem-table, | |
| .score-table, | |
| table[class*="diem"], | |
| table[class*="score"] { | |
| background-color: @surface0 !important; | |
| } | |
| /* Highlight passing grades */ | |
| td.pass, | |
| td.passed, | |
| .grade-pass { | |
| color: @green !important; | |
| } | |
| /* Highlight failing grades */ | |
| td.fail, | |
| td.failed, | |
| .grade-fail { | |
| color: @red !important; | |
| } | |
| /* DAA schedule / timetable */ | |
| .timetable, | |
| .schedule, | |
| .lich, | |
| table[class*="lich"], | |
| table[class*="tiet"] { | |
| background-color: @surface0 !important; | |
| border-color: @surface1 !important; | |
| } | |
| .timetable th, | |
| .schedule th { | |
| background-color: @mantle !important; | |
| color: @subtext1 !important; | |
| } | |
| /* ================================================================ | |
| SCROLLBARS (Webkit) | |
| ================================================================ */ | |
| ::-webkit-scrollbar { | |
| width: 10px; | |
| height: 10px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: @mantle !important; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: @surface2 !important; | |
| border-radius: 5px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: @overlay0 !important; | |
| } | |
| /* ================================================================ | |
| SELECTION | |
| ================================================================ */ | |
| ::selection { | |
| background-color: fade(@accent, 25%) !important; | |
| color: @text !important; | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment