NicoHood
7 years ago
commit
574a4c06af
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,608 @@
|
||||
// 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; }
|
||||
}
|
||||
Loading…
Reference in new issue