mirror of
https://github.com/horst3180/arc-theme.git
synced 2024-10-27 19:04:02 +00:00
609 lines
12 KiB
SCSS
609 lines
12 KiB
SCSS
// main container
|
|
.budgie-container { background-color: transparent; }
|
|
|
|
$menuitem_size: 28px;
|
|
$medium_size: 32px;
|
|
$large_size: 44px;
|
|
$container_padding: 6px;
|
|
$z-depth-2: rgba(0, 0, 0, 0.28);
|
|
$z-depth-4: rgba(0, 0, 0, 0.34);
|
|
|
|
*:drop(active):focus,
|
|
*:drop(active) {
|
|
box-shadow: inset 0 0 0 1px $selected_bg_color
|
|
}
|
|
|
|
.budgie-panel {
|
|
// solid-mode
|
|
// always use dark-color of dark variant
|
|
background-color: $panel_bg;
|
|
color: white;
|
|
font-weight: normal;
|
|
|
|
// used to indicate unread notifications
|
|
.alert { color: $suggested_color; }
|
|
|
|
&:backdrop {
|
|
color: white;
|
|
background-color: $panel_bg;
|
|
}
|
|
|
|
// transparent-mode
|
|
&.transparent {
|
|
background-color: gtkopacity($panel_bg, 0.4);
|
|
color: white;
|
|
|
|
}
|
|
|
|
button {
|
|
@extend button;
|
|
|
|
min-height: 16px;
|
|
min-width: 16px;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
&.horizontal button { padding: 0 4px; }
|
|
|
|
&.vertical button { padding: 4px 0; }
|
|
|
|
separator { background-color: gtkopacity($fg_color, 0.4); }
|
|
|
|
&.vertical #tasklist-button { min-height: 32px; }
|
|
|
|
.end-region {
|
|
background-color: rgba(0,0,0,0.3);
|
|
border-radius: 0px;
|
|
separator { background-color: transparentize(white, 0.85); }
|
|
label {
|
|
font-weight: 700;
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.budgie-panel {
|
|
button.flat.launcher {
|
|
padding: 0;
|
|
border-radius: 0;
|
|
border: none;
|
|
background-image: radial-gradient(circle farthest-corner at center,
|
|
gtkalpha($fg_color, 0) 100%,
|
|
transparent 0%),
|
|
image(gtkalpha($fg_color, 0));
|
|
background-position: center center;
|
|
|
|
> image {
|
|
opacity: 0.87;
|
|
}
|
|
|
|
&:hover {
|
|
-gtk-icon-effect: highlight;
|
|
|
|
> image { opacity: 1.0; }
|
|
}
|
|
&:active {
|
|
> image { opacity: 1.0; }
|
|
}
|
|
&:checked {
|
|
background-color: transparent;
|
|
&:hover { -gtk-icon-effect: highlight; }
|
|
|
|
> image { opacity: 1.0; }
|
|
}
|
|
}
|
|
|
|
.unpinned button.flat.launcher,
|
|
.pinned button.flat.launcher.running {
|
|
&:hover { -gtk-icon-effect: highlight; }
|
|
|
|
> image {
|
|
background-size: 2px 2px;
|
|
background-repeat: no-repeat;
|
|
opacity: 1.0;
|
|
}
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:checked {
|
|
> image { background-image: none; }
|
|
}
|
|
}
|
|
}
|
|
|
|
// draw underscores and dots
|
|
@each $position, $_line in (top, 0 2px),
|
|
(bottom, 0 -2px),
|
|
(left, 2px 0),
|
|
(right, -2px 0) {
|
|
.#{$position} .budgie-panel {
|
|
button#tasklist-button,
|
|
button.flat.launcher {
|
|
&:hover {
|
|
box-shadow: inset #{$_line} gtkalpha($fg_color, 0.4);
|
|
background-color: gtkopacity($fg_color, 0.4);
|
|
border: none;
|
|
}
|
|
&:active,
|
|
&:checked {
|
|
box-shadow: inset #{$_line} $selected_bg_color;
|
|
}
|
|
}
|
|
|
|
.unpinned button.flat.launcher,
|
|
.pinned button.flat.launcher.running {
|
|
> image {
|
|
background-image: image($selected_bg_color);
|
|
background-position: #{$position} center;
|
|
}
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:checked {
|
|
box-shadow: inset #{$_line} $selected_bg_color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@each $along_side, $opp_side in (top, bottom),
|
|
(bottom, top),
|
|
(left, right),
|
|
(right, left) {
|
|
// panel shadow styling
|
|
.#{$along_side} .shadow-block {
|
|
background-color: transparent;
|
|
background-image: linear-gradient(to #{$opp_side},
|
|
gtkalpha(#000000, 0.23),
|
|
gtkalpha(#000000, 0.08),
|
|
transparent);
|
|
}
|
|
}
|
|
|
|
// budgie specific popover widgets
|
|
.budgie-popover {
|
|
border-style: none;
|
|
border-width: 1px;
|
|
border-color: $z-depth-2;
|
|
border-radius: 1px;
|
|
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.28);
|
|
background-color: $bg_color;
|
|
|
|
.container { padding: 2px; }
|
|
|
|
border { border: none; }
|
|
|
|
list { background-color: transparent; }
|
|
|
|
row {
|
|
padding: 0;
|
|
|
|
&:hover { box-shadow: none; }
|
|
}
|
|
|
|
&:not(.budgie-menu) button.flat:not(.image-button) {
|
|
min-height: $menuitem_size;
|
|
padding: 0 8px;
|
|
color: $fg_color;
|
|
font-weight: normal;
|
|
|
|
&:disabled { color: $insensitive_fg_color; }
|
|
}
|
|
|
|
&.budgie-menu {
|
|
.container { padding: 0; }
|
|
}
|
|
|
|
&.user-menu {
|
|
.container { padding: 8px; }
|
|
|
|
separator { margin: 4px 0; }
|
|
}
|
|
|
|
&.sound-popover {
|
|
separator { margin: 3px 0; }
|
|
}
|
|
|
|
&.night-light-indicator {
|
|
.container { padding: 8px; }
|
|
}
|
|
|
|
&.places-menu {
|
|
.container { padding: 8px; }
|
|
|
|
.places-list:not(.always-expand) {
|
|
margin-top: 4px;
|
|
padding-top: 4px;
|
|
border-top: 1px solid $borders_color;
|
|
}
|
|
|
|
// I guess this really should be hard-coded as well as other dim-labels.
|
|
.alternative-label {
|
|
padding: 3px;
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
|
|
&.workspace-popover {
|
|
.container { padding: 2px 8px 8px; }
|
|
|
|
separator { margin: 4px 0; }
|
|
|
|
flowboxchild { padding: 0; }
|
|
}
|
|
}
|
|
|
|
// main menu styling
|
|
.workspace-switcher {
|
|
.workspace-layout {
|
|
border: 0 solid $bg_color;
|
|
|
|
.top &,
|
|
.bottom & {
|
|
&:dir(ltr) { border-left-width: 1px; }
|
|
|
|
&:dir(rtl) { border-right-width: 1px; }
|
|
}
|
|
|
|
.left &,
|
|
.right & { border-top-width: 1px; }
|
|
}
|
|
|
|
.workspace-item,
|
|
.workspace-add-button {
|
|
border: 0 solid $bg_color;
|
|
|
|
.top &,
|
|
.bottom & {
|
|
&:dir(ltr) { border-right-width: 1px; }
|
|
|
|
&:dir(rtl) { border-left-width: 1px; }
|
|
}
|
|
|
|
.left &,
|
|
.right & { border-bottom-width: 1px; }
|
|
}
|
|
|
|
.workspace-item {
|
|
|
|
&.current-workspace { background-color: $bg_color; }
|
|
}
|
|
|
|
.workspace-add-button {
|
|
&:hover { box-shadow: none; }
|
|
|
|
&:active { background-image: none; }
|
|
|
|
&:active image { margin: 1px 0 -1px; }
|
|
}
|
|
|
|
.workspace-icon-button {
|
|
.budgie-panel & { // to overwrite the .budgie-panel button style below
|
|
min-height: 24px;
|
|
min-width: 24px;
|
|
padding: 0;
|
|
border-radius: 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Budgie Menu
|
|
.budgie-menu {
|
|
&.background {
|
|
padding: 0;
|
|
background-color: $base_color;
|
|
}
|
|
|
|
scrollbar,
|
|
entry.search { background-color: transparent; }
|
|
|
|
entry.search {
|
|
border-style: none;
|
|
border-bottom: 1px solid $borders_color;
|
|
border-radius: 1px;
|
|
box-shadow: none;
|
|
font-size: 120%;
|
|
padding-top: 6px;
|
|
padding-bottom: 6px;
|
|
}
|
|
|
|
button {
|
|
@extend row.activatable;
|
|
|
|
min-height: 32px;
|
|
padding: 0 8px;
|
|
border-radius: 0;
|
|
color: $fg_color;
|
|
font-weight: normal;
|
|
|
|
}
|
|
|
|
row {
|
|
padding: 0;
|
|
|
|
&:hover { box-shadow: none; }
|
|
}
|
|
}
|
|
|
|
// Menu Button
|
|
button.budgie-menu-launcher {
|
|
// padding: 0 2px;
|
|
color: $base_bg_color;
|
|
border: none;
|
|
|
|
&:hover {
|
|
background-color: gtkopacity($fg_color, 0.4);
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
// User Menu
|
|
popover.background.user-menu {
|
|
padding: 8px;
|
|
|
|
.content-box { background-color: transparent; }
|
|
|
|
separator { margin: 4px 0; }
|
|
|
|
row {
|
|
padding: 0;
|
|
box-shadow: none;
|
|
background-image: none;
|
|
}
|
|
}
|
|
|
|
// Raven Trigger
|
|
button.raven-trigger {
|
|
color: white;
|
|
border: none;
|
|
|
|
&:hover {
|
|
background-color: gtkopacity($fg_color, 0.4);
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
// Places Menu
|
|
popover.background.places-menu {
|
|
padding: 8px;
|
|
|
|
// FIXME: untested
|
|
.message-bar {
|
|
// margin-bottom: 4px;
|
|
}
|
|
|
|
.name-button.text-button {
|
|
// padding: 4px 8px;
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
|
|
image {
|
|
&:dir(ltr) { margin-right: 8px - 5px; }
|
|
&:dir(rtl) { margin-left: 8px - 5px; }
|
|
}
|
|
}
|
|
|
|
// FIXME: untested
|
|
.unmount-button {
|
|
// padding: ($medium_size - 24px) / 2;
|
|
}
|
|
|
|
.places-section-header > image {
|
|
&:dir(ltr) { margin: 0 8px - 10px 0 8px - 3px; }
|
|
&:dir(rtl) { margin: 0 8px - 3px 0 8px - 10px; }
|
|
}
|
|
|
|
.places-list {
|
|
margin-top: 4px;
|
|
padding-top: 4px;
|
|
border-top: 1px solid $borders_color;
|
|
background-color: transparent;
|
|
}
|
|
|
|
row {
|
|
padding: 0;
|
|
box-shadow: none;
|
|
background-image: none;
|
|
}
|
|
|
|
// FIXME: untested
|
|
.unlock-area {
|
|
entry {
|
|
}
|
|
|
|
button {
|
|
}
|
|
}
|
|
}
|
|
|
|
frame.raven-frame > border {
|
|
border-style: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
// Raven
|
|
.raven {
|
|
background-color: $bg_color;
|
|
color: $fg_color;
|
|
padding: 0;
|
|
border: none;
|
|
|
|
.raven-header {
|
|
min-height: $medium_size;
|
|
padding: 3px;
|
|
|
|
&.top {
|
|
padding: 2px 0;
|
|
background-color: $bg_color;
|
|
color: $fg_color;
|
|
|
|
stackswitcher button {
|
|
margin: -$container_padding 0;
|
|
min-height: $medium_size;
|
|
}
|
|
|
|
}
|
|
|
|
&.bottom { border-top: 1px solid $borders_color; }
|
|
}
|
|
|
|
viewport.frame .raven-header { margin-top: -8px; }
|
|
|
|
.raven-background {
|
|
border-style: solid none;
|
|
border-width: 1px;
|
|
border-color: $borders_color;
|
|
background-color: $base_color;
|
|
|
|
// &.middle { border-bottom-style: none; } // applet background between two headers
|
|
|
|
}
|
|
|
|
scrolledwindow.raven-background { border-bottom-style: none; }
|
|
|
|
.powerstrip button {
|
|
margin: 2px 0 1px;
|
|
padding: ($large_size - 24px) / 2;
|
|
}
|
|
|
|
.option-subtitle { font-size: smaller; }
|
|
}
|
|
|
|
// Calendar
|
|
calendar.raven-calendar {
|
|
// padding: 3px;
|
|
border-style: none;
|
|
background-color: transparent;
|
|
|
|
&:selected {
|
|
border-radius: 2px;
|
|
background-color: $bg_color;
|
|
}
|
|
}
|
|
|
|
// MPRIS Applet
|
|
.raven-mpris {
|
|
background-color: rgba($bg_color, 0.8);
|
|
color: $fg_color;
|
|
|
|
label { min-height: 24px; }
|
|
|
|
}
|
|
|
|
// Notifications
|
|
.budgie-notification-window {
|
|
background-color: transparent;
|
|
color: $osd_fg_color;
|
|
border-radius: 2px;
|
|
// draw actual backgrounds
|
|
.drop-shadow { background-color: $osd_bg_color; }
|
|
}
|
|
|
|
.budgie-notification {
|
|
.notification-title { font-size: 110%; color: $osd_fg_color; }
|
|
.notification-body { @extend .dim-label; color: $osd_fg_color; }
|
|
background-color: $osd_bg_color;
|
|
color: $osd_fg_color;
|
|
}
|
|
|
|
// On Screen Display in Budgie
|
|
.budgie-osd-window {
|
|
@extend .budgie-notification-window;
|
|
}
|
|
|
|
// Internal part of the OSD
|
|
.budgie-osd {
|
|
@extend .budgie-notification;
|
|
.budgie-osd-text { font-size: 120%; }
|
|
}
|
|
|
|
// Alt+tab switcher in Budgie
|
|
.budgie-switcher-window {
|
|
@extend .budgie-notification;
|
|
|
|
.drop-shadow {
|
|
margin: 8px 8px 16px; // reserve area for shadows
|
|
border-radius: 2px;
|
|
background-color: $osd_bg_color;
|
|
box-shadow: $z-depth-2;
|
|
label.budgie-switcher-title {
|
|
color: $osd_fg_color;
|
|
&:dir(ltr) { padding: 0 0 0 6px; }
|
|
&:dir(rtl) { padding: 0 6px 0 0; }
|
|
}
|
|
}
|
|
}
|
|
|
|
// Internal part of the Switcher
|
|
.budgie-switcher {
|
|
@extend .budgie-notification;
|
|
}
|
|
|
|
.drop-shadow {
|
|
margin: 5px 9px;
|
|
padding: 3px;
|
|
border-radius: 2px;
|
|
box-shadow: none;
|
|
background-color: $bg_color;
|
|
|
|
.linked > button { border-radius: 2px; }
|
|
}
|
|
|
|
%budgie_dialog {
|
|
border-radius: 2px;
|
|
background-color: $bg_color;
|
|
|
|
decoration { border-radius: 2px; }
|
|
}
|
|
|
|
// Session Dialog
|
|
.budgie-session-dialog {
|
|
@extend %budgie_dialog;
|
|
|
|
label:not(:last-child),
|
|
.dialog-title { font-size: 120%; }
|
|
|
|
.linked.horizontal > button {
|
|
padding: 8px 16px;
|
|
border-top: 1px solid $borders_color;
|
|
border-radius: 0;
|
|
|
|
&:first-child { border-bottom-left-radius: 2px; }
|
|
|
|
&:last-child { border-bottom-right-radius: 2px; }
|
|
}
|
|
}
|
|
|
|
// PolKit Dialog
|
|
.budgie-polkit-dialog {
|
|
@extend %budgie_dialog;
|
|
|
|
.message { color: $fg_color; }
|
|
|
|
.failure { color: $destructive_color; }
|
|
}
|
|
|
|
// Run Dialog
|
|
.budgie-run-dialog {
|
|
@extend %budgie_dialog;
|
|
|
|
background-color: $base_color;
|
|
border-style: none;
|
|
|
|
entry.search {
|
|
font-size: 120%;
|
|
box-shadow: none;
|
|
background-color: transparent;
|
|
border-style: none;
|
|
border-bottom: 1px solid $borders_color;
|
|
border-radius: 1px;
|
|
padding-top: 6px;
|
|
padding-bottom: 6px;
|
|
}
|
|
|
|
list .dim-label { opacity: 1; }
|
|
|
|
scrolledwindow { border-top: 1px solid $borders_color; }
|
|
}
|