mirror of
https://github.com/horst3180/arc-theme.git
synced 2024-10-27 19:04:02 +00:00
906add80b4
* Change the workspace switcher styling on Budgie * Add Raven top padding so that the buttons are seperated from the panel Before the buttons were directly under the panel, which looked kinda buggy, because people are used to the fact that buttons have some space around.
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 $panel_bg;
|
|
|
|
.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 darken($panel_bg, 5%);
|
|
|
|
.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: darken($panel_bg, 5%); }
|
|
}
|
|
|
|
.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: $container_padding 0 0 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; }
|
|
}
|