Created
February 23, 2024 16:32
-
-
Save lupuionut/bb29ea4485857fcb5817bcc868aff397 to your computer and use it in GitHub Desktop.
githubdark.css
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 { | |
| --inherit-base-theme: true; | |
| --primary: #595959; | |
| --back: #0d1117; | |
| --font: #eff0f1; | |
| --font-hint: #898b8d; | |
| --button-back: #30353a; | |
| --button-border: #6b6f73; | |
| --button-radius: 2dp; | |
| --base-horizontal-padding: 5dp; | |
| --base-vertical-padding: 5dp; | |
| --border-width: 1dp; | |
| --list-back: #0d1117; | |
| --separator: #30363d; | |
| --item-hover: #1f6feb; | |
| --scroll-button: #6b6d6f; | |
| --slider-back: #676a6e; | |
| --slider-button: #4d4d4d; | |
| --slider-border: #787b80; | |
| --scrollbar-border: #373a3d; | |
| --scrollbar-button: #4d4d4d; | |
| --scrollbar-hback: #ffffff; | |
| --tab-back: #0d1117; | |
| --tab-line: #30363d; | |
| --tab-active: #0d1117; | |
| --tab-hover: #161b22; | |
| --tab-close: #909396; | |
| --tab-close-hover: #ffffff; | |
| --icon: #b6bbc2; | |
| --icon-active: white; | |
| --icon-back-hover: #eff0f1; | |
| --icon-line-hover: #3d4246; | |
| --icon-back-alert: #e49aa2; | |
| --menu-back: #161b22; | |
| --menu-font: #fbf1c7; | |
| --menu-border: #616569; | |
| --menu-font-active: white; | |
| --menu-font-disabled: #6e7275; | |
| --win-icon: #dbdbdd; | |
| --floating-icon: #eff0f188; | |
| --term-back-color: #1e2127; | |
| --term-font-color: #abb2bf; | |
| --highlight-primary: #FFFFFF7A; | |
| --disabled-color: #727679; | |
| --disabled-border: #43474c; | |
| droppable-hovering-color: #FFFFFF20; | |
| } | |
| pushbutton::icon, | |
| selectbutton::icon, | |
| tableview::cell::icon, | |
| treeview::cell::icon, | |
| treeview::cell::expander, | |
| listview::cell::icon, | |
| Menu::Item:selected, | |
| Menu::CheckBox:selected, | |
| Menu::SubMenu:selected, | |
| Menu::RadioButton:selected, | |
| Menu::Item:hover > Menu::Item::text, | |
| Menu::Item:hover > Menu::Item::shortcut, | |
| Menu::CheckBox:hover > Menu::CheckBox::text, | |
| Menu::CheckBox:hover > Menu::CheckBox::shortcut, | |
| Menu::RadioButton:hover > Menu::RadioButton::text, | |
| Menu::RadioButton:hover > Menu::RadioButton::shortcut, | |
| Menu::SubMenu:hover > Menu::SubMenu::text, | |
| Menu::item:hover > Menu::Item::icon, | |
| Menu::SubMenu:hover > Menu::SubMenu::icon, | |
| Menu::item:hover > Menu::CheckBox::icon, | |
| Menu::item:hover > Menu::RadioButton::icon, | |
| PushButton:pressed > PushButton::icon, | |
| SelectButton:pressed > SelectButton::icon, | |
| SelectButton:selected > SelectButton::icon, | |
| SelectButton:selected:pressed > SelectButton::icon, | |
| tableview::row:selected tableview::cell::text, | |
| treeview::row:selected treeview::cell::text, | |
| listview::row:selected listview::cell::text, | |
| tableview::row:selected tableview::cell::icon, | |
| treeview::row:selected treeview::cell::icon, | |
| listview::row:selected listview::cell::icon, | |
| tableview::row:selected tableview::cell::expander, | |
| treeview::row:selected treeview::cell::expander, | |
| listview::row:selected listview::cell::expander, | |
| tableview::row:hover tableview::cell::text, | |
| treeview::row:hover treeview::cell::text, | |
| listview::row:hover listview::cell::text, | |
| tableview::row:hover tableview::cell::icon, | |
| treeview::row:hover treeview::cell::icon, | |
| listview::row:hover listview::cell::icon, | |
| tableview::row:hover tableview::cell::expander, | |
| treeview::row:hover treeview::cell::expander, | |
| listview::row:hover listview::cell::expander, | |
| tableview::header::column:hover, | |
| treeview::header::column:hover, | |
| listview::header::column:hover { | |
| color: var(--font); | |
| tint: var(--font); | |
| } | |
| CheckBox, | |
| ComboBox, | |
| ComboBox::DropDownList::ListBox::item, | |
| DropDownList, | |
| DropDownList::ListBox::item, | |
| ListBox::item, | |
| Menu::item::text, | |
| Menu::item::shortcut, | |
| Menu::SubMenu, | |
| PushButton, | |
| RadioButton, | |
| SelectButton, | |
| SpinBox::input, | |
| Tab, | |
| TextEdit, | |
| TextInput, | |
| TextInputPassword, | |
| TextView, | |
| Tooltip, | |
| MenuBar::button, | |
| Window::title, | |
| ListView::cell, | |
| tableview::cell::text, | |
| treeview::cell::text, | |
| listview::cell::text { | |
| color: var(--font); | |
| } | |
| TextView, | |
| TextEdit, | |
| TextInput, | |
| TextInputPassword, | |
| ComboBox::DropDownList, | |
| SpinBox::input, { | |
| selection-back-color: var(--primary); | |
| } | |
| PushButton, | |
| SelectButton, | |
| DropDownList { | |
| padding-left: var(--base-horizontal-padding); | |
| padding-right: var(--base-horizontal-padding); | |
| padding-top: var(--base-vertical-padding); | |
| padding-bottom: var(--base-vertical-padding); | |
| background-color: var(--button-back); | |
| border-color: var(--button-border); | |
| border-radius: var(--button-radius); | |
| border-width: var(--border-width); | |
| transition: all 0.125s cubic-bezier(0.77, 0.77, 0.38, 0.38); | |
| } | |
| DropDownList, | |
| ComboBox::DropDownList { | |
| max-visible-items: 6; | |
| } | |
| PushButton:hover, | |
| PushButton:focus, | |
| DropDownList:hover, | |
| DropDownList:focus, | |
| SelectButton:hover, | |
| SelectButton:focus, | |
| ComboBox:hover, | |
| ComboBox:focus { | |
| border-color: var(--primary); | |
| } | |
| PushButton:pressed, | |
| SelectButton:pressed, | |
| SelectButton:selected, | |
| SelectButton:selected:pressed { | |
| background-color: var(--primary); | |
| } | |
| pushbutton:disabled, | |
| selectbutton:disabled { | |
| color: var(--disabled-color); | |
| border-color: var(--disabled-border); | |
| } | |
| PushButton::icon, | |
| SelectButton::icon, | |
| TableView::cell::icon, | |
| TreeView::cell::icon, | |
| TreeView::cell::expander, | |
| ListView::cell::icon { | |
| margin-right: 4dp; | |
| } | |
| CheckBox::active, | |
| CheckBox::inactive { | |
| width: 12dp; | |
| height: 12dp; | |
| border-width: 1dp; | |
| border-radius: var(--button-radius); | |
| } | |
| CheckBox::inactive { | |
| border-color: var(--button-border); | |
| } | |
| CheckBox:hover CheckBox::inactive { | |
| border-color: var(--primary); | |
| } | |
| CheckBox::active { | |
| border-color: var(--primary); | |
| background-image: rectangle(solid, var(--primary)); | |
| background-size: 70% 70%; | |
| background-position: center; | |
| } | |
| tableview::row:selected CheckBox::active, | |
| treeview::row:selected CheckBox::active, | |
| listview::row:selected CheckBox::active { | |
| border-color: var(--highlight-primary); | |
| background-image: rectangle(solid, var(--highlight-primary)); | |
| } | |
| RadioButton::active, | |
| RadioButton::inactive { | |
| width: 12dp; | |
| height: 12dp; | |
| border-width: 1dp; | |
| border-radius: 100%; | |
| } | |
| RadioButton::inactive { | |
| border-color: var(--button-border); | |
| } | |
| RadioButton:hover RadioButton::inactive { | |
| border-color: var(--primary); | |
| } | |
| RadioButton::active { | |
| border-color: var(--primary); | |
| background-image: circle(solid, var(--primary)); | |
| background-size: 8dp 8dp; | |
| background-position: 6dp 6dp; | |
| } | |
| ListBox, | |
| DropDownList::ListBox, | |
| ComboBox::DropDownList::ListBox, | |
| Table, | |
| ListView { | |
| background-color: var(--list-back); | |
| border-color: var(--button-border); | |
| border-radius: var(--button-radius); | |
| border-width: var(--border-width); | |
| transition: all 0.15; | |
| } | |
| ListBox::item { | |
| padding-left: 4dp; | |
| background-color: transparent; | |
| background-image: linear-gradient( to right, var(--list-back), var(--separator) ), linear-gradient( to right, var(--separator), var(--list-back) ); | |
| background-size: 50% 1dp, 50% 1dp; | |
| background-position: left bottom, right bottom; | |
| } | |
| ListView::row { | |
| background-color: transparent; | |
| background-image: linear-gradient( to right, var(--list-back), var(--separator) ), linear-gradient( to right, var(--separator), var(--list-back) ); | |
| background-size: 50% 1dp, 50% 1dp; | |
| background-position: left bottom, right bottom; | |
| } | |
| ListView::cell { | |
| padding-left: 4dp; | |
| min-icon-size: 16dp 16dp; | |
| } | |
| ListBox:hover, | |
| ListView:hover { | |
| border-color: var(--primary); | |
| } | |
| ListBox::item:hover, | |
| ListView::row:hover { | |
| background-color: var(--item-hover); | |
| } | |
| ListBox::item:selected, | |
| ListView::row:selected { | |
| background-color: var(--primary); | |
| } | |
| DropDownList::ListBox::item, | |
| ComboBox::DropDownList::ListBox::item { | |
| padding-left: 4dp; | |
| } | |
| DropDownList::ListBox::item:hover, | |
| DropDownList::ListBox::item:selected, | |
| ComboBox::DropDownList::ListBox::item:hover, | |
| ComboBox::DropDownList::ListBox::item:selected { | |
| background-color: var(--primary); | |
| } | |
| TextInput, | |
| TextInputPassword { | |
| padding-left: var(--base-horizontal-padding); | |
| padding-right: var(--base-horizontal-padding); | |
| padding-top: var(--base-vertical-padding); | |
| padding-bottom: var(--base-vertical-padding); | |
| background-color: var(--list-back); | |
| border-color: var(--button-border); | |
| border-radius: var(--button-radius); | |
| border-width: var(--border-width); | |
| hint-color: var(--font-hint); | |
| transition: all 0.15; | |
| } | |
| ComboBox { | |
| background-color: var(--list-back); | |
| border-color: var(--button-border); | |
| border-radius: var(--button-radius); | |
| border-width: var(--border-width); | |
| transition: all 0.15; | |
| } | |
| ComboBox::DropDownList { | |
| padding-left: var(--base-horizontal-padding); | |
| padding-right: var(--base-horizontal-padding); | |
| padding-top: var(--base-vertical-padding); | |
| padding-bottom: var(--base-vertical-padding); | |
| } | |
| TextInputPassword:hover, | |
| TextInputPassword:focus, | |
| TextInput:hover, | |
| TextInput:focus, | |
| SpinBox:hover, | |
| SpinBox:focus { | |
| border-color: var(--primary); | |
| } | |
| SpinBox { | |
| background-color: var(--list-back); | |
| border-color: var(--button-border); | |
| border-radius: var(--button-radius); | |
| border-width: var(--border-width); | |
| transition: all 0.15; | |
| } | |
| SpinBox::input { | |
| padding-left: var(--base-horizontal-padding); | |
| padding-right: var(--base-horizontal-padding); | |
| padding-top: var(--base-vertical-padding); | |
| padding-bottom: var(--base-vertical-padding); | |
| } | |
| SpinBox::input, | |
| SpinBox::input::hover, | |
| SpinBox::input::focus { | |
| border-width: 0dp; | |
| border-color: transparent; | |
| } | |
| SpinBox::btnup, | |
| SpinBox::btndown { | |
| width: 13dp; | |
| height: 13dp; | |
| } | |
| TextEdit { | |
| background-color: var(--list-back); | |
| border-color: var(--button-border); | |
| border-radius: var(--button-radius); | |
| border-width: var(--border-width); | |
| padding-left: var(--base-horizontal-padding); | |
| padding-right: var(--base-horizontal-padding); | |
| padding-top: var(--base-vertical-padding); | |
| padding-bottom: var(--base-vertical-padding); | |
| transition: all 0.15; | |
| } | |
| TextEdit:focus, | |
| TextEdit:hover { | |
| border-color: var(--primary); | |
| } | |
| Tooltip { | |
| padding-left: var(--base-horizontal-padding); | |
| padding-right: var(--base-horizontal-padding); | |
| padding-top: var(--base-vertical-padding); | |
| padding-bottom: var(--base-vertical-padding); | |
| background-color: var(--button-back); | |
| border-color: var(--button-border); | |
| border-radius: var(--button-radius); | |
| border-width: var(--border-width); | |
| overflow: hidden; | |
| } | |
| Slider { | |
| min-width: 16dp; | |
| min-height: 16dp; | |
| half-slider: true; | |
| } | |
| Slider::vback { | |
| background-color: var(--slider-back); | |
| border-radius: 4dp; | |
| min-width: 8dp; | |
| transition: all 0.15s; | |
| } | |
| Slider::hback { | |
| background-color: var(--slider-back); | |
| border-radius: 4dp; | |
| min-width: 64dp; | |
| min-height: 8dp; | |
| transition: all 0.15s; | |
| } | |
| Slider::vbutton, | |
| Slider::hbutton { | |
| background-color: var(--slider-button); | |
| border-color: var(--slider-border); | |
| border-width: 1dp; | |
| border-radius: 100%; | |
| min-width: 16dp; | |
| min-height: 16dp; | |
| } | |
| Slider::vbutton:hover, | |
| Slider::vbutton:focus, | |
| Slider::hbutton:hover, | |
| Slider::hbutton:focus { | |
| border-color: var(--primary); | |
| } | |
| ScrollBar { | |
| scrollbar-style: no-buttons; | |
| min-width: 20dp; | |
| min-height: 18dp; | |
| } | |
| ScrollBar::hback { | |
| min-height: 6dp; | |
| border-radius: 3dp; | |
| background-color: transparent; | |
| } | |
| ScrollBar::vback { | |
| min-width: 10dp; | |
| border-radius: 3dp; | |
| background-color: transparent; | |
| } | |
| ScrollBar::vslider { | |
| padding-top: 4dp; | |
| padding-bottom: 4dp; | |
| } | |
| ScrollBar::hslider { | |
| padding-left: 4dp; | |
| padding-right: 4dp; | |
| } | |
| ScrollBar::hslider, | |
| ScrollBar::vslider { | |
| border-width: 1dp; | |
| border-color: var(--scrollbar-border); | |
| transition: all 0.15s; | |
| } | |
| ScrollBar::hbutton { | |
| min-width: 12dp; | |
| min-height: 6dp; | |
| background-color: var(--scrollbar-button); | |
| border-radius: 3dp; | |
| border-width: 0dp; | |
| transition: all 0.15s; | |
| } | |
| ScrollBar::vbutton { | |
| min-width: 6dp; | |
| min-height: 12dp; | |
| background-color: var(--scrollbar-button); | |
| border-radius: 3dp; | |
| border-width: 0dp; | |
| transition: all 0.15s; | |
| } | |
| ScrollBar::hslider:hover ScrollBar::hback, | |
| ScrollBar::vslider:hover ScrollBar::vback { | |
| background-color: var(--scrollbar-hback-hover); | |
| } | |
| ScrollBar::vslider:hover ScrollBar::vbutton, | |
| ScrollBar::vbutton:hover, | |
| ScrollBar::hslider:hover ScrollBar::hbutton, | |
| ScrollBar::hbutton:hover { | |
| background-color: var(--primary); | |
| } | |
| ProgressBar { | |
| min-height: 9dp; | |
| } | |
| ProgressBar::filler { | |
| border-radius: 4dp; | |
| background-color: var(--primary); | |
| } | |
| TabWidget { | |
| tab-height: 24dp; | |
| gravity: left|bottom; | |
| } | |
| TabWidget::TabBar { | |
| background-image: rectangle(solid, var(--tab-line)); | |
| background-size: 100% 1dp; | |
| background-position-y: bottom; | |
| } | |
| Tab { | |
| background-color: var(--tab-back); | |
| border-left-color: transparent; | |
| border-right-color: transparent; | |
| border-top-color: transparent; | |
| background-image: rectangle(solid, var(--tab-line)); | |
| background-size: 100% 9dp; | |
| background-position-y: bottom; | |
| height: 24dp; | |
| transition: background-color 0.15s; | |
| } | |
| Tab:hover { | |
| background-color: var(--tab-hover); | |
| } | |
| Tab::text { | |
| padding-left: 4dp; | |
| padding-right: 4dp; | |
| padding-bottom: 2dp; | |
| padding-top: 1dp; | |
| } | |
| Tab:selected { | |
| background-image: rectangle(solid, transparent); | |
| background-size: 100% 1dp; | |
| background-position-y: bottom; | |
| background-color: var(--tab-active); | |
| border-left-color: var(--tab-line); | |
| border-right-color: var(--tab-line); | |
| border-top-color: var(--tab-line); | |
| border-left-width: 1dp; | |
| border-right-width: 1dp; | |
| border-top-width: 1dp; | |
| border-top-left-radius: 2dp; | |
| border-top-right-radius: 2dp; | |
| } | |
| Tab:selected:hover { | |
| background-color: var(--tab-active); | |
| } | |
| tab::icon { | |
| margin-left: 2dp; | |
| margin-right: 2dp; | |
| } | |
| Tab::close { | |
| width: 10dp; | |
| height: 10dp; | |
| border-radius: 5dp; | |
| /*background-color: var(--tab-close); | |
| foreground-image: poly(line, var(--icon-line-hover), "0dp 0dp, 5dp 5dp"), poly(line, var(--icon-line-hover), "5dp 0dp, 0dp 5dp"); | |
| foreground-position: 2.5dp 2.5dp, 2.5dp 2.5dp;*/ | |
| foreground-image: url("data:image/svg,<svg width='16' height='16' viewBox='0 0 16 16'><path fill='#ffffff' fill-rule='evenodd' d='M 2.3432061,13.657206 A 8.0002061,8.0002061 0 1 1 13.657206,2.3432061 8.0002061,8.0002061 0 0 1 2.3432061,13.657206 Z m 3.687,-8.6869999 a 0.75,0.75 0 0 0 -1.06,1.06 l 1.97,1.97 -1.97,1.97 a 0.75,0.75 0 1 0 1.06,1.0599999 l 1.97,-1.9699999 1.97,1.9699999 A 0.75,0.75 0 1 0 11.030206,9.9702061 l -1.9699999,-1.97 1.9699999,-1.97 a 0.75,0.75 0 1 0 -1.0599999,-1.06 l -1.97,1.97 z' /></svg>"); | |
| foreground-tint: var(--tab-close); | |
| foreground-size: 10dp 10dp; | |
| margin-right: 4dp; | |
| transition: all 0.15s; | |
| } | |
| Tab::close:hover { | |
| /*background-color: var(--tab-close-hover);*/ | |
| foreground-tint: var(--tab-close-hover); | |
| } | |
| Loader { | |
| fill-color: var(--primary); | |
| } | |
| CodeEditor > Loader { | |
| background-color: #0000002d; | |
| radius: 32dp; | |
| outline-thickness: 6dp; | |
| } | |
| Window::close { | |
| width: 12dp; | |
| height: 12dp; | |
| border-radius: 6dp; | |
| background-color: var(--icon-back-hover); | |
| foreground-image: poly(line, var(--icon-line-hover), "0dp 0dp, 6dp 6dp"), poly(line, var(--icon-line-hover), "6dp 0dp, 0dp 6dp"); | |
| foreground-position: 3dp 3dp, 3dp 3dp; | |
| transition: all 0.15s; | |
| } | |
| Window::close:hover { | |
| background-color: var(--icon-back-alert); | |
| } | |
| Window::maximize { | |
| width: 12dp; | |
| height: 12dp; | |
| border-radius: 6dp; | |
| background-color: transparent; | |
| foreground-image: poly(line, var(--win-icon), "0dp 4dp, 4dp 0dp"), poly(line, var(--win-icon), "4dp 0dp, 8dp 4dp"); | |
| foreground-position: 2dp 4dp, 2dp 4dp; | |
| transition: all 0.15s; | |
| } | |
| Window::maximize:hover { | |
| background-color: var(--icon-back-hover); | |
| foreground-image: poly(line, var(--icon-line-hover), "0dp 4dp, 4dp 0dp"), poly(line, var(--icon-line-hover), "4dp 0dp, 8dp 4dp"); | |
| } | |
| Window::minimize { | |
| width: 12dp; | |
| height: 12dp; | |
| border-radius: 6dp; | |
| background-color: transparent; | |
| foreground-image: poly(line, var(--win-icon), "0dp 0dp, 4dp 4dp"), poly(line, var(--win-icon), "4dp 4dp, 8dp 0dp"); | |
| foreground-position: 2dp 4dp, 2dp 4dp; | |
| transition: all 0.15s; | |
| } | |
| Window::minimize:hover { | |
| background-color: var(--icon-back-hover); | |
| foreground-image: poly(line, var(--icon-line-hover), "0dp 0dp, 4dp 4dp"), poly(line, var(--icon-line-hover), "4dp 4dp, 8dp 0dp"); | |
| } | |
| Window { | |
| background-color: var(--back); | |
| window-border-size: 2dp 2dp; | |
| window-titlebar-size: 24dp 24dp; | |
| window-buttons-offset: -6dp 0dp; | |
| window-buttons-separation: 8dp; | |
| window-flags: shadow; | |
| } | |
| Window::decoration { | |
| background-color: var(--back); | |
| } | |
| Window::border::left, | |
| Window::border::right { | |
| background-color: var(--back); | |
| } | |
| Window::border::bottom { | |
| background-color: var(--back); | |
| } | |
| DropDownList { | |
| foreground-image: poly(line, var(--icon), "-8dp 0dp, -12dp 3dp"), poly(line, var(--icon), "-16dp 0dp, -12dp 3dp"); | |
| foreground-position-x: right, right; | |
| foreground-position-y: center, center; | |
| } | |
| DropDownList:hover, | |
| DropDownList:focus { | |
| foreground-image: poly(line, var(--icon-active), "-8dp 0dp, -12dp 3dp"), poly(line, var(--icon-active), "-16dp 0dp, -12dp 3dp"); | |
| } | |
| ComboBox::Button { | |
| width: 24dp; | |
| height: 16dp; | |
| foreground-image: poly(line, var(--icon), "-8dp 0dp, -12dp 3dp"), poly(line, var(--icon), "-16dp 0dp, -12dp 3dp"); | |
| foreground-position-x: right, right; | |
| foreground-position-y: center, center; | |
| } | |
| ComboBox::Button:focus, | |
| ComboBox::Button:hover { | |
| foreground-image: poly(line, var(--icon-active), "-8dp 0dp, -12dp 3dp"), poly(line, var(--icon-active), "-16dp 0dp, -12dp 3dp"); | |
| } | |
| SpinBox::btndown { | |
| width: 16dp; | |
| height: 12dp; | |
| foreground-image: poly(line, var(--icon), "1dp 4dp, 5dp 7dp"), poly(line, var(--icon), "5dp 7dp, 9dp 4dp"); | |
| } | |
| SpinBox::btndown:hover { | |
| foreground-image: poly(line, var(--primary), "1dp 4dp, 5dp 7dp"), poly(line, var(--primary), "5dp 7dp, 9dp 4dp"); | |
| } | |
| SpinBox::btnup { | |
| width: 16dp; | |
| height: 12dp; | |
| foreground-image: poly(line, var(--icon), "1dp 7dp, 5dp 4dp"), poly(line, var(--icon), "5dp 4dp, 9dp 7dp"); | |
| } | |
| SpinBox::btnup:hover { | |
| foreground-image: poly(line, var(--primary), "1dp 7dp, 5dp 4dp"), poly(line, var(--primary), "5dp 4dp, 9dp 7dp"); | |
| } | |
| MenuBar { | |
| height: 24dp; | |
| background-color: var(--back); | |
| } | |
| Menu, | |
| PopUpMenu { | |
| background-color: var(--menu-back); | |
| color: var(--menu-font); | |
| min-width: 150dp; | |
| min-icon-size: 12dp 12dp; | |
| border-width: 1dp; | |
| border-color: var(--menu-border); | |
| } | |
| MenuBar::Button { | |
| padding-left: 4dp; | |
| padding-right: 4dp; | |
| min-height: 24dp; | |
| } | |
| MenuBar::Button:hover { | |
| background-color: var(--primary); | |
| } | |
| Menu::Item, | |
| Menu::CheckBox, | |
| Menu::Separator, | |
| Menu::SubMenu, | |
| Menu::RadioButton { | |
| padding-left: 6dp; | |
| padding-top: 2dp; | |
| padding-bottom: 2dp; | |
| background-color: transparent; | |
| } | |
| Menu::Item:selected, | |
| Menu::CheckBox:selected, | |
| Menu::SubMenu:selected, | |
| Menu::RadioButton:selected { | |
| background-color: var(--primary); | |
| } | |
| Menu::Item::text, | |
| Menu::CheckBox::text, | |
| Menu::SubMenu::text, | |
| Menu::RadioButton::text { | |
| padding-right: 8dp; | |
| color: var(--menu-font); | |
| } | |
| Menu::Item::shortcut, | |
| Menu::CheckBox::shortcut, | |
| Menu::RadioButton::shortcut { | |
| padding-left: 48dp; | |
| padding-right: 8dp; | |
| color: var(--menu-font); | |
| } | |
| Menu::Item:disabled > Menu::Item::text, | |
| Menu::Item:disabled > Menu::Item::shortcut, | |
| Menu::Item:disabled > Menu::Item::icon, | |
| Menu::CheckBox:disabled > Menu::CheckBox::text, | |
| Menu::CheckBox:disabled > Menu::CheckBox::shortcut, | |
| Menu::CheckBox:disabled > Menu::CheckBox::icon, | |
| Menu::RadioButton:disabled > Menu::RadioButton::text, | |
| Menu::RadioButton:disabled > Menu::RadioButton::shortcut, | |
| Menu::RadioButton:disabled > Menu::RadioButton::icon, | |
| Menu::SubMenu:disabled > Menu::SubMenu::text, | |
| Menu::SubMenu:disabled > Menu::SubMenu::icon { | |
| color: var(--menu-font-disabled); | |
| tint: var(--menu-font-disabled); | |
| } | |
| Menu::Item:hover > Menu::Item::text, | |
| Menu::CheckBox:hover > Menu::Item::text, | |
| Menu::RadioButton:hover > Menu::Item::text, | |
| Menu::SubMenu:hover > Menu::Item::text, | |
| ListBox::item:hover { | |
| color: var(--menu-font-active); | |
| } | |
| Menu::Separator { | |
| height: 3dp; | |
| background-color: var(--button-back); | |
| background-image: rectangle(solid, var(--button-border)); | |
| background-size: 100% 1dp; | |
| background-position: center; | |
| } | |
| Menu::SubMenu::Arrow { | |
| width: 16dp; | |
| height: 16dp; | |
| margin-right: 1dp; | |
| foreground-image: poly(line, var(--icon), "5dp 3dp, 10dp 8dp"), poly(line, var(--icon), "5dp 13dp, 10dp 8dp"); | |
| } | |
| Menu::Item::icon, | |
| Menu::SubMenu::icon, | |
| Menu::CheckBox::icon, | |
| Menu::RadioButton::icon { | |
| margin-right: 4dp; | |
| tint: var(--font); | |
| } | |
| Menu::CheckBox::icon { | |
| max-width: 12dp; | |
| max-height: 12dp; | |
| border-width: 1dp; | |
| border-color: var(--button-border); | |
| border-radius: var(--button-radius); | |
| background-image: none; | |
| background-color: var(--menu-back); | |
| } | |
| Menu::CheckBox::icon:selected { | |
| border-color: var(--primary); | |
| background-image: rectangle(solid, var(--primary)); | |
| background-size: 70% 70%; | |
| background-position: center; | |
| } | |
| Menu::RadioButton::icon { | |
| max-width: 12dp; | |
| max-height: 12dp; | |
| border-width: 1dp; | |
| border-color: var(--button-border); | |
| border-radius: 100%; | |
| background-image: none; | |
| background-color: var(--menu-back); | |
| } | |
| Menu::RadioButton::icon:selected { | |
| border-color: var(--primary); | |
| background-image: circle(solid, var(--primary)); | |
| background-size: 8dp 8dp; | |
| background-position: 6dp 6dp; | |
| } | |
| ListBox > ScrollBar, | |
| TextEdit > ScrollBar, | |
| Table > ScrollBar { | |
| background-color: var(--list-back); | |
| } | |
| Splitter::separator { | |
| background-color: var(--back); | |
| } | |
| Splitter::separator:selected, | |
| Splitter::separator:hover { | |
| background-color: var(--primary); | |
| } | |
| tableview::header, | |
| listview::header { | |
| background-color: var(--back); | |
| } | |
| tableview::header::column, | |
| treeview::header::column, | |
| listview::header::column { | |
| background-color: var(--back); | |
| border-right-color: var(--tab-line); | |
| border-right-width: 1dp; | |
| border-bottom-color: var(--tab-line); | |
| border-bottom-width: 1dp; | |
| border-type: inside; | |
| color: var(--font); | |
| padding: 2dp 6dp 2dp 6dp; | |
| transition: all 0.125s; | |
| text-align: left; | |
| } | |
| tableview::header::column:hover, | |
| treeview::header::column:hover, | |
| listview::header::column:hover { | |
| background-color: var(--tab-hover); | |
| } | |
| tableview::row, | |
| treeview::row { | |
| background-color: var(--list-back); | |
| } | |
| tableview::row:hover, | |
| treeview::row:hover { | |
| background-color: var(--tab-hover); | |
| } | |
| tableview::row:selected, | |
| treeview::row:selected { | |
| background-color: var(--primary); | |
| } | |
| tableview::cell, | |
| treeview::cell { | |
| padding-left: 6dp; | |
| padding-right: 6dp; | |
| min-icon-size: 16dp 16dp; | |
| } | |
| treeview::cell::expander { | |
| min-size: 16dp 16dp; | |
| } | |
| TreeView, | |
| TableView { | |
| background-color: var(--list-back); | |
| } | |
| TreeView > ScrollBar, | |
| TableView > ScrollBar { | |
| background-color: var(--list-back); | |
| } | |
| tableview::header::column::arrow-up, | |
| treeview::header::column::arrow-up, | |
| listview::header::column::arrow-up { | |
| width: 16dp; | |
| height: 12dp; | |
| foreground-image: poly(line, var(--icon), "1dp 4dp, 5dp 7dp"), poly(line, var(--icon), "5dp 7dp, 9dp 4dp"); | |
| } | |
| tableview::header::column::arrow-down, | |
| treeview::header::column::arrow-down, | |
| listview::header::column::arrow-down { | |
| width: 16dp; | |
| height: 12dp; | |
| foreground-image: poly(line, var(--icon), "1dp 7dp, 5dp 4dp"), poly(line, var(--icon), "5dp 4dp, 9dp 7dp"); | |
| } | |
| ScrollBarMini { | |
| scrollbar-style: no-buttons; | |
| min-width: 4dp; | |
| min-height: 4dp; | |
| } | |
| ScrollBarMini::hback { | |
| min-height: 4dp; | |
| border-radius: 2dp; | |
| background-color: transparent; | |
| } | |
| ScrollBarMini::vback { | |
| min-width: 4dp; | |
| border-radius: 2dp; | |
| background-color: transparent; | |
| } | |
| ScrollBarMini::hslider, | |
| ScrollBarMini::vslider { | |
| border-width: 1dp; | |
| border-color: var(--scrollbar-border); | |
| transition: all 0.15s; | |
| } | |
| ScrollBarMini::hbutton { | |
| min-width: 4dp; | |
| min-height: 4dp; | |
| background-color: var(--scrollbar-button); | |
| border-radius: 2dp; | |
| border-width: 0dp; | |
| transition: all 0.15s; | |
| } | |
| ScrollBarMini::vbutton { | |
| min-width: 4dp; | |
| min-height: 4dp; | |
| background-color: var(--scrollbar-button); | |
| border-radius: 2dp; | |
| border-width: 0dp; | |
| transition: all 0.15s; | |
| } | |
| ScrollBarMini::vslider:hover ScrollBar::vbutton, | |
| ScrollBarMini::vbutton:hover, | |
| ScrollBarMini::hslider:hover ScrollBar::hbutton, | |
| ScrollBarMini::hbutton:hover { | |
| background-color: var(--primary); | |
| } | |
| .appbackground { | |
| background-color: var(--back); | |
| } | |
| #code_container Tab:selected { | |
| color: #fefefe; | |
| border-bottom-color:#f78166; | |
| border-bottom-width:2dp; | |
| } | |
| Tab:not(:selected) { | |
| color: #7d858f; | |
| } | |
| tab::icon { | |
| tint: var(--icon); | |
| } | |
| tab:selected > tab::icon, | |
| tab:not(:selected):hover > tab::icon { | |
| tint: var(--menu-font-active); | |
| } | |
| console { | |
| background-color: var(--term-back-color); | |
| color: var(--term-font-color); | |
| padding: 2dp; | |
| font-size: 11dp; | |
| border-bottom-color: var(--separator); | |
| border-bottom-width: var(--border-width); | |
| } | |
| @media (prefers-color-scheme: light) { | |
| :root { | |
| --primary: #3daee9; | |
| --back: #eff0f1; | |
| --font: #232627; | |
| --font-hint: #232627; | |
| --button-back: #fcfcfc; | |
| --button-border: #b3b4b5; | |
| --button-radius: 2dp; | |
| --base-horizontal-padding: 5dp; | |
| --base-vertical-padding: 5dp; | |
| --border-width: 1dp; | |
| --list-back: #ffffff; | |
| --separator: #cbcdcd; | |
| --item-hover: #93cee9; | |
| --scroll-button: #cbcdcd; | |
| --slider-back: #e9e9e9; | |
| --slider-button: #cbcdcd; | |
| --slider-border: #e6e6e6; | |
| --scrollbar-border: #e6e6e6; | |
| --scrollbar-button: #cbcdcd; | |
| --scrollbar-hback-hover: #e9e9e9; | |
| --tab-back: #eff0f1; | |
| --tab-line: #e6e6e6; | |
| --tab-active: #fcfcfc; | |
| --tab-hover: #93cee9; | |
| --tab-close: #e6e6e6; | |
| --tab-close-hover: #e49aa2; | |
| --icon: #232627; | |
| --icon-active: #3daee9; | |
| --icon-back-hover: #e6e6e6; | |
| --icon-line-hover: #232627; | |
| --icon-back-alert: #e49aa2; | |
| --menu-back: #eff0f1; | |
| --menu-font: #232627; | |
| --menu-border: #b3b4b5; | |
| --menu-font-active: #fcfcfc; | |
| --menu-font-disabled: #a8a9aa; | |
| --win-icon: #232627; | |
| --floating-icon: #cbcdcd; | |
| --term-back-color: #eff0f1; | |
| --term-font-color: #232627; | |
| --disabled-color: #727679; | |
| --disabled-border: #d3d4d5; | |
| droppable-hovering-color: #00000020; | |
| } | |
| Menu::Item:selected, | |
| Menu::CheckBox:selected, | |
| Menu::SubMenu:selected, | |
| Menu::RadioButton:selected, | |
| Menu::Item:hover > Menu::Item::text, | |
| Menu::Item:hover > Menu::Item::shortcut, | |
| Menu::CheckBox:hover > Menu::CheckBox::text, | |
| Menu::CheckBox:hover > Menu::CheckBox::shortcut, | |
| Menu::RadioButton:hover > Menu::RadioButton::text, | |
| Menu::RadioButton:hover > Menu::RadioButton::shortcut, | |
| Menu::SubMenu:hover > Menu::SubMenu::text, | |
| Menu::item:hover > Menu::Item::icon, | |
| Menu::SubMenu:hover > Menu::SubMenu::icon, | |
| Menu::item:hover > Menu::CheckBox::icon, | |
| Menu::item:hover > Menu::RadioButton::icon, | |
| PushButton:pressed > PushButton::icon, | |
| SelectButton:pressed > SelectButton::icon, | |
| SelectButton:selected > SelectButton::icon, | |
| SelectButton:selected:pressed > SelectButton::icon, | |
| tableview::row:selected tableview::cell::text, | |
| treeview::row:selected treeview::cell::text, | |
| listview::row:selected listview::cell::text, | |
| tableview::row:selected tableview::cell::icon, | |
| treeview::row:selected treeview::cell::icon, | |
| listview::row:selected listview::cell::icon, | |
| tableview::row:selected tableview::cell::expander, | |
| treeview::row:selected treeview::cell::expander, | |
| listview::row:selected listview::cell::expander, | |
| tableview::row:selected tableview::cell checkbox, | |
| treeview::row:selected treeview::cell checkbox, | |
| listview::row:selected listview::cell checkbox, | |
| tableview::row:hover tableview::cell::text, | |
| treeview::row:hover treeview::cell::text, | |
| listview::row:hover listview::cell::text, | |
| tableview::row:hover tableview::cell::icon, | |
| treeview::row:hover treeview::cell::icon, | |
| listview::row:hover listview::cell::icon, | |
| tableview::row:hover tableview::cell::expander, | |
| treeview::row:hover treeview::cell::expander, | |
| listview::row:hover listview::cell::expander, | |
| tableview::row:hover tableview::cell checkbox, | |
| treeview::row:hover treeview::cell checkbox, | |
| listview::row:hover listview::cell checkbox, | |
| tableview::header::column:hover, | |
| treeview::header::column:hover, | |
| listview::header::column:hover { | |
| color: var(--menu-font-active); | |
| tint: var(--menu-font-active); | |
| } | |
| Tab:selected, | |
| Tab:hover, | |
| Tab:pressed { | |
| color: var(--font); | |
| } | |
| Tab:not(:selected):hover { | |
| color: var(--menu-font-active); | |
| } | |
| tab::icon, | |
| tab:selected > tab::icon, { | |
| tint: var(--icon); | |
| } | |
| tab:not(:selected):hover > tab::icon { | |
| tint: var(--menu-font-active); | |
| } | |
| } | |
| @media screen and (min-pixel-density: 1.1) and (max-pixel-density: 1.99) { | |
| Menu::Separator { | |
| height: 3px; | |
| background-size: 100% 1px; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment