mirror of
https://github.com/EliverLara/Nordic.git
synced 2026-08-24 10:04:25 -05:00
feat(cinnamon)!: Add styles for new menu design in cinnamon v6.6
This commit is contained in:
EliverLara
+159
-1
@@ -69,7 +69,7 @@ stage {
|
||||
selection-background-color: $selected_bg_color;
|
||||
selected-color: $selected_fg_color;
|
||||
transition-duration: 300ms;
|
||||
border-radius: 3px;
|
||||
border-radius: 6px;
|
||||
|
||||
@include entry(normal);
|
||||
|
||||
@@ -1445,6 +1445,164 @@ StScrollBar {
|
||||
.menu-context-menu {
|
||||
}
|
||||
|
||||
// New menu (since Cinnamon 6.6)
|
||||
|
||||
$appmenu_small_padding: 5px;
|
||||
$appmenu_padding: 10px;
|
||||
$appmenu_large_padding: 15px;
|
||||
$base_padding: 7px;
|
||||
$radius: 6px;
|
||||
|
||||
%appmenu_button {
|
||||
padding: $base_padding;
|
||||
spacing: 5px;
|
||||
border-radius: $radius;
|
||||
}
|
||||
.appmenu {
|
||||
|
||||
// this can be used to color the entire menu background but we aren't using it here
|
||||
&-background {
|
||||
// using this to override the default padding on menus so widgets can span edge
|
||||
// to edge. The side effect is that some of our internal container widgets
|
||||
// will need to have a border-radius added to them or the corners will poke out
|
||||
// the edges of the menu.
|
||||
.popup-menu-content { padding: 0; }
|
||||
}
|
||||
|
||||
&-main-box {
|
||||
spacing: $appmenu_padding;
|
||||
}
|
||||
|
||||
&-right-box {
|
||||
spacing: $appmenu_small_padding;
|
||||
padding: $appmenu_padding $appmenu_padding;
|
||||
}
|
||||
|
||||
&-categories-applications-box {
|
||||
spacing: $appmenu_large_padding;
|
||||
|
||||
&:top {
|
||||
// Extra padding at the top of the categories/apps
|
||||
// when the search box is at the bottom
|
||||
padding-top: $appmenu_small_padding;
|
||||
}
|
||||
}
|
||||
|
||||
&-applications-box {
|
||||
// Extra gap between the highlighted app and the scroll handle
|
||||
padding-right: $appmenu_small_padding;
|
||||
}
|
||||
|
||||
&-search-box {
|
||||
spacing: $appmenu_padding;
|
||||
}
|
||||
|
||||
&-sidebar {
|
||||
padding: $appmenu_large_padding 0px;
|
||||
background-color: darken($base_color, 3%);
|
||||
border-radius: $radius 0 0 0;
|
||||
@at-root .menu-top #{&} { border-radius: 0 0 0 $radius; }
|
||||
@at-root .menu-bottom #{&} { border-radius: $radius 0 0 0; }
|
||||
@at-root .menu-left #{&} { border-radius: 0; }
|
||||
@at-root .menu-right #{&} { border-radius: 0; }
|
||||
border-right-width: 1px;
|
||||
border-color: $borders_color;
|
||||
|
||||
&-user-box {
|
||||
.user-widget-label {
|
||||
@extend %title_4;
|
||||
color: $fg_color;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.appmenu-system-button {
|
||||
background-color: lighten($button_bg, 5%);
|
||||
border: none;
|
||||
&-lock:hover { background-color: lighten($button_bg, 15%); }
|
||||
&-logout:hover { background-color: lighten($button_bg, 15%); }
|
||||
&-shutdown { color: white; background-color: $destructive_color; }
|
||||
&-shutdown:hover { color: white; background-color: lighten($destructive_color, 5%); }
|
||||
}
|
||||
}
|
||||
|
||||
&-system-box {
|
||||
spacing: $appmenu_padding;
|
||||
}
|
||||
|
||||
&-sidebar-button {
|
||||
@extend %appmenu_button;
|
||||
|
||||
padding: 4px $base_padding;
|
||||
margin: 0 $appmenu_padding;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($button_bg, 5%);
|
||||
border-color: $borders_color;
|
||||
}
|
||||
}
|
||||
|
||||
&-system-button {
|
||||
padding: $base_padding * 1.2;
|
||||
border: 1px solid $borders_color;
|
||||
border-radius: 9999px;
|
||||
background-color: lighten($button_bg, 5%);
|
||||
// &-shutdown { color: white; background-color: $osd_destructive_color; }
|
||||
// &-lock:hover { background-color: lighten($bg_color2, 10%); }
|
||||
// &-logout:hover { background-color: lighten($bg_color2, 10%); }
|
||||
// &-shutdown:hover { color: white; background-color: lighten($osd_destructive_color, 5%); }
|
||||
}
|
||||
|
||||
&-application-button {
|
||||
@extend %appmenu_button;
|
||||
|
||||
&-label { padding: 0; }
|
||||
&-description {
|
||||
@extend %caption;
|
||||
color: $insensitive_fg_color;
|
||||
}
|
||||
|
||||
&:highlighted { font-weight: bold; }
|
||||
|
||||
&-selected {
|
||||
@extend %appmenu_button;
|
||||
background-color: lighten($button_bg, 5%);
|
||||
|
||||
&:highlighted { font-weight: bold; }
|
||||
}
|
||||
}
|
||||
|
||||
&-category-button {
|
||||
@extend %appmenu_button;
|
||||
|
||||
&-label { padding: 0; }
|
||||
|
||||
&:hover { background-color: lighten($button_bg, 5%); }
|
||||
|
||||
&-selected {
|
||||
@extend %appmenu_button;
|
||||
|
||||
background-color: lighten($button_bg, 5%);
|
||||
}
|
||||
|
||||
&-greyed {
|
||||
@extend %appmenu_button;
|
||||
color: $insensitive_fg_color;
|
||||
font-style: italic;
|
||||
|
||||
StIcon { opacity: 0.5; }
|
||||
}
|
||||
}
|
||||
|
||||
&-search-entry-icon {
|
||||
icon-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
#appmenu-search-entry {
|
||||
@extend %entry;
|
||||
}
|
||||
|
||||
//
|
||||
// OSD
|
||||
//
|
||||
|
||||
@@ -73,28 +73,28 @@ stage {
|
||||
border: 1px solid rgba(20, 23, 28, 0.4);
|
||||
background-color: rgba(93, 105, 129, 0.25); }
|
||||
|
||||
.popup-menu #notification StEntry, #menu-search-entry, .run-dialog-entry, .prompt-dialog-password-entry {
|
||||
.popup-menu #notification StEntry, #menu-search-entry, #appmenu-search-entry, .run-dialog-entry, .prompt-dialog-password-entry {
|
||||
padding: 7px;
|
||||
caret-size: 1px;
|
||||
selection-background-color: #8fbcbb;
|
||||
selected-color: #2e3440;
|
||||
transition-duration: 300ms;
|
||||
border-radius: 3px;
|
||||
border-radius: 6px;
|
||||
color: #d8dee9;
|
||||
background-color: #3b4252;
|
||||
border: 1px solid #1f232b;
|
||||
box-shadow: inset 0 2px 4px rgba(59, 66, 82, 0.05); }
|
||||
.popup-menu #notification StEntry:focus, #menu-search-entry:focus, .run-dialog-entry:focus, .prompt-dialog-password-entry:focus, .popup-menu #notification StEntry:hover, #menu-search-entry:hover, .run-dialog-entry:hover, .prompt-dialog-password-entry:hover {
|
||||
.popup-menu #notification StEntry:focus, #menu-search-entry:focus, #appmenu-search-entry:focus, .run-dialog-entry:focus, .prompt-dialog-password-entry:focus, .popup-menu #notification StEntry:hover, #menu-search-entry:hover, #appmenu-search-entry:hover, .run-dialog-entry:hover, .prompt-dialog-password-entry:hover {
|
||||
color: #d8dee9;
|
||||
background-color: #3b4252;
|
||||
border: 1px solid #8fbcbb;
|
||||
box-shadow: inset 0 2px 4px rgba(59, 66, 82, 0.05); }
|
||||
.popup-menu #notification StEntry:insensitive, #menu-search-entry:insensitive, .run-dialog-entry:insensitive, .prompt-dialog-password-entry:insensitive {
|
||||
.popup-menu #notification StEntry:insensitive, #menu-search-entry:insensitive, #appmenu-search-entry:insensitive, .run-dialog-entry:insensitive, .prompt-dialog-password-entry:insensitive {
|
||||
color: rgba(216, 222, 233, 0.45);
|
||||
background-color: #3f4757;
|
||||
border-color: 1px solid #2f3542;
|
||||
box-shadow: inset 0 2px 4px rgba(63, 71, 87, 0.05); }
|
||||
.popup-menu #notification StEntry StIcon.capslock-warning, #menu-search-entry StIcon.capslock-warning, .run-dialog-entry StIcon.capslock-warning, .prompt-dialog-password-entry StIcon.capslock-warning {
|
||||
.popup-menu #notification StEntry StIcon.capslock-warning, #menu-search-entry StIcon.capslock-warning, #appmenu-search-entry StIcon.capslock-warning, .run-dialog-entry StIcon.capslock-warning, .prompt-dialog-password-entry StIcon.capslock-warning {
|
||||
icon-size: 16px;
|
||||
warning-color: #c3674a;
|
||||
padding: 0 4px; }
|
||||
@@ -1146,6 +1146,93 @@ StScrollBar {
|
||||
color: #d8dee9; }
|
||||
|
||||
/* Context menu (at the moment only for favorites) */
|
||||
.appmenu-sidebar-button, .appmenu-application-button, .appmenu-application-button-selected, .appmenu-category-button, .appmenu-category-button-selected, .appmenu-category-button-greyed {
|
||||
padding: 7px;
|
||||
spacing: 5px;
|
||||
border-radius: 6px; }
|
||||
|
||||
.appmenu-background .popup-menu-content {
|
||||
padding: 0; }
|
||||
.appmenu-main-box {
|
||||
spacing: 10px; }
|
||||
.appmenu-right-box {
|
||||
spacing: 5px;
|
||||
padding: 10px 10px; }
|
||||
.appmenu-categories-applications-box {
|
||||
spacing: 15px; }
|
||||
.appmenu-categories-applications-box:top {
|
||||
padding-top: 5px; }
|
||||
.appmenu-applications-box {
|
||||
padding-right: 5px; }
|
||||
.appmenu-search-box {
|
||||
spacing: 10px; }
|
||||
.appmenu-sidebar {
|
||||
padding: 15px 0px;
|
||||
background-color: #353b49;
|
||||
border-radius: 6px 0 0 0;
|
||||
border-right-width: 1px;
|
||||
border-color: #1f232b; }
|
||||
.menu-top .appmenu-sidebar {
|
||||
border-radius: 0 0 0 6px; }
|
||||
.menu-bottom .appmenu-sidebar {
|
||||
border-radius: 6px 0 0 0; }
|
||||
.menu-left .appmenu-sidebar {
|
||||
border-radius: 0; }
|
||||
.menu-right .appmenu-sidebar {
|
||||
border-radius: 0; }
|
||||
.appmenu-sidebar-user-box .user-widget-label {
|
||||
color: #d8dee9;
|
||||
text-align: center; }
|
||||
.appmenu-sidebar .appmenu-system-button {
|
||||
background-color: #4a5367;
|
||||
border: none; }
|
||||
.appmenu-sidebar .appmenu-system-button-lock:hover {
|
||||
background-color: #5f6b84; }
|
||||
.appmenu-sidebar .appmenu-system-button-logout:hover {
|
||||
background-color: #5f6b84; }
|
||||
.appmenu-sidebar .appmenu-system-button-shutdown {
|
||||
color: white;
|
||||
background-color: #b84f59; }
|
||||
.appmenu-sidebar .appmenu-system-button-shutdown:hover {
|
||||
color: white;
|
||||
background-color: #bf616a; }
|
||||
.appmenu-system-box {
|
||||
spacing: 10px; }
|
||||
.appmenu-sidebar-button {
|
||||
padding: 4px 7px;
|
||||
margin: 0 10px; }
|
||||
.appmenu-sidebar-button:hover {
|
||||
background-color: #4a5367;
|
||||
border-color: #1f232b; }
|
||||
.appmenu-system-button {
|
||||
padding: 8.4px;
|
||||
border: 1px solid #1f232b;
|
||||
border-radius: 9999px;
|
||||
background-color: #4a5367; }
|
||||
.appmenu-application-button-label {
|
||||
padding: 0; }
|
||||
.appmenu-application-button-description {
|
||||
color: rgba(216, 222, 233, 0.45); }
|
||||
.appmenu-application-button:highlighted {
|
||||
font-weight: bold; }
|
||||
.appmenu-application-button-selected {
|
||||
background-color: #4a5367; }
|
||||
.appmenu-application-button-selected:highlighted {
|
||||
font-weight: bold; }
|
||||
.appmenu-category-button-label {
|
||||
padding: 0; }
|
||||
.appmenu-category-button:hover {
|
||||
background-color: #4a5367; }
|
||||
.appmenu-category-button-selected {
|
||||
background-color: #4a5367; }
|
||||
.appmenu-category-button-greyed {
|
||||
color: rgba(216, 222, 233, 0.45);
|
||||
font-style: italic; }
|
||||
.appmenu-category-button-greyed StIcon {
|
||||
opacity: 0.5; }
|
||||
.appmenu-search-entry-icon {
|
||||
icon-size: 1em; }
|
||||
|
||||
.info-osd {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
@@ -1621,7 +1708,7 @@ StScrollBar {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border-radius: 0px; }
|
||||
|
||||
.dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description, .message-dialog-content .message-dialog-caption, .run-dialog-description, .prompt-dialog-error-label, .prompt-dialog-info-label, .prompt-dialog-null-label {
|
||||
.appmenu-application-button-description, .dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description, .message-dialog-content .message-dialog-caption, .run-dialog-description, .prompt-dialog-error-label, .prompt-dialog-info-label, .prompt-dialog-null-label {
|
||||
font-weight: 400;
|
||||
font-size: 0.818em; }
|
||||
|
||||
@@ -1629,7 +1716,7 @@ StScrollBar {
|
||||
font-weight: 800;
|
||||
font-size: 1.364em; }
|
||||
|
||||
.message-dialog-content .message-dialog-title.lightweight, .media-keys-osd, .workspace-switch-osd {
|
||||
.appmenu-sidebar-user-box .user-widget-label, .message-dialog-content .message-dialog-title.lightweight, .media-keys-osd, .workspace-switch-osd {
|
||||
font-weight: 700;
|
||||
font-size: 1.182em; }
|
||||
|
||||
|
||||
+94
-7
@@ -73,28 +73,28 @@ stage {
|
||||
border: 1px solid rgba(20, 23, 28, 0.4);
|
||||
background-color: rgba(93, 105, 129, 0.25); }
|
||||
|
||||
.popup-menu #notification StEntry, #menu-search-entry, .run-dialog-entry, .prompt-dialog-password-entry {
|
||||
.popup-menu #notification StEntry, #menu-search-entry, #appmenu-search-entry, .run-dialog-entry, .prompt-dialog-password-entry {
|
||||
padding: 7px;
|
||||
caret-size: 1px;
|
||||
selection-background-color: #8fbcbb;
|
||||
selected-color: #2e3440;
|
||||
transition-duration: 300ms;
|
||||
border-radius: 3px;
|
||||
border-radius: 6px;
|
||||
color: #d8dee9;
|
||||
background-color: #3b4252;
|
||||
border: 1px solid #1f232b;
|
||||
box-shadow: inset 0 2px 4px rgba(59, 66, 82, 0.05); }
|
||||
.popup-menu #notification StEntry:focus, #menu-search-entry:focus, .run-dialog-entry:focus, .prompt-dialog-password-entry:focus, .popup-menu #notification StEntry:hover, #menu-search-entry:hover, .run-dialog-entry:hover, .prompt-dialog-password-entry:hover {
|
||||
.popup-menu #notification StEntry:focus, #menu-search-entry:focus, #appmenu-search-entry:focus, .run-dialog-entry:focus, .prompt-dialog-password-entry:focus, .popup-menu #notification StEntry:hover, #menu-search-entry:hover, #appmenu-search-entry:hover, .run-dialog-entry:hover, .prompt-dialog-password-entry:hover {
|
||||
color: #d8dee9;
|
||||
background-color: #3b4252;
|
||||
border: 1px solid #8fbcbb;
|
||||
box-shadow: inset 0 2px 4px rgba(59, 66, 82, 0.05); }
|
||||
.popup-menu #notification StEntry:insensitive, #menu-search-entry:insensitive, .run-dialog-entry:insensitive, .prompt-dialog-password-entry:insensitive {
|
||||
.popup-menu #notification StEntry:insensitive, #menu-search-entry:insensitive, #appmenu-search-entry:insensitive, .run-dialog-entry:insensitive, .prompt-dialog-password-entry:insensitive {
|
||||
color: rgba(216, 222, 233, 0.45);
|
||||
background-color: #3f4757;
|
||||
border-color: 1px solid #2f3542;
|
||||
box-shadow: inset 0 2px 4px rgba(63, 71, 87, 0.05); }
|
||||
.popup-menu #notification StEntry StIcon.capslock-warning, #menu-search-entry StIcon.capslock-warning, .run-dialog-entry StIcon.capslock-warning, .prompt-dialog-password-entry StIcon.capslock-warning {
|
||||
.popup-menu #notification StEntry StIcon.capslock-warning, #menu-search-entry StIcon.capslock-warning, #appmenu-search-entry StIcon.capslock-warning, .run-dialog-entry StIcon.capslock-warning, .prompt-dialog-password-entry StIcon.capslock-warning {
|
||||
icon-size: 16px;
|
||||
warning-color: #c3674a;
|
||||
padding: 0 4px; }
|
||||
@@ -1146,6 +1146,93 @@ StScrollBar {
|
||||
color: #d8dee9; }
|
||||
|
||||
/* Context menu (at the moment only for favorites) */
|
||||
.appmenu-sidebar-button, .appmenu-application-button, .appmenu-application-button-selected, .appmenu-category-button, .appmenu-category-button-selected, .appmenu-category-button-greyed {
|
||||
padding: 7px;
|
||||
spacing: 5px;
|
||||
border-radius: 6px; }
|
||||
|
||||
.appmenu-background .popup-menu-content {
|
||||
padding: 0; }
|
||||
.appmenu-main-box {
|
||||
spacing: 10px; }
|
||||
.appmenu-right-box {
|
||||
spacing: 5px;
|
||||
padding: 10px 10px; }
|
||||
.appmenu-categories-applications-box {
|
||||
spacing: 15px; }
|
||||
.appmenu-categories-applications-box:top {
|
||||
padding-top: 5px; }
|
||||
.appmenu-applications-box {
|
||||
padding-right: 5px; }
|
||||
.appmenu-search-box {
|
||||
spacing: 10px; }
|
||||
.appmenu-sidebar {
|
||||
padding: 15px 0px;
|
||||
background-color: #353b49;
|
||||
border-radius: 6px 0 0 0;
|
||||
border-right-width: 1px;
|
||||
border-color: #1f232b; }
|
||||
.menu-top .appmenu-sidebar {
|
||||
border-radius: 0 0 0 6px; }
|
||||
.menu-bottom .appmenu-sidebar {
|
||||
border-radius: 6px 0 0 0; }
|
||||
.menu-left .appmenu-sidebar {
|
||||
border-radius: 0; }
|
||||
.menu-right .appmenu-sidebar {
|
||||
border-radius: 0; }
|
||||
.appmenu-sidebar-user-box .user-widget-label {
|
||||
color: #d8dee9;
|
||||
text-align: center; }
|
||||
.appmenu-sidebar .appmenu-system-button {
|
||||
background-color: #4a5367;
|
||||
border: none; }
|
||||
.appmenu-sidebar .appmenu-system-button-lock:hover {
|
||||
background-color: #5f6b84; }
|
||||
.appmenu-sidebar .appmenu-system-button-logout:hover {
|
||||
background-color: #5f6b84; }
|
||||
.appmenu-sidebar .appmenu-system-button-shutdown {
|
||||
color: white;
|
||||
background-color: #b84f59; }
|
||||
.appmenu-sidebar .appmenu-system-button-shutdown:hover {
|
||||
color: white;
|
||||
background-color: #bf616a; }
|
||||
.appmenu-system-box {
|
||||
spacing: 10px; }
|
||||
.appmenu-sidebar-button {
|
||||
padding: 4px 7px;
|
||||
margin: 0 10px; }
|
||||
.appmenu-sidebar-button:hover {
|
||||
background-color: #4a5367;
|
||||
border-color: #1f232b; }
|
||||
.appmenu-system-button {
|
||||
padding: 8.4px;
|
||||
border: 1px solid #1f232b;
|
||||
border-radius: 9999px;
|
||||
background-color: #4a5367; }
|
||||
.appmenu-application-button-label {
|
||||
padding: 0; }
|
||||
.appmenu-application-button-description {
|
||||
color: rgba(216, 222, 233, 0.45); }
|
||||
.appmenu-application-button:highlighted {
|
||||
font-weight: bold; }
|
||||
.appmenu-application-button-selected {
|
||||
background-color: #4a5367; }
|
||||
.appmenu-application-button-selected:highlighted {
|
||||
font-weight: bold; }
|
||||
.appmenu-category-button-label {
|
||||
padding: 0; }
|
||||
.appmenu-category-button:hover {
|
||||
background-color: #4a5367; }
|
||||
.appmenu-category-button-selected {
|
||||
background-color: #4a5367; }
|
||||
.appmenu-category-button-greyed {
|
||||
color: rgba(216, 222, 233, 0.45);
|
||||
font-style: italic; }
|
||||
.appmenu-category-button-greyed StIcon {
|
||||
opacity: 0.5; }
|
||||
.appmenu-search-entry-icon {
|
||||
icon-size: 1em; }
|
||||
|
||||
.info-osd {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
@@ -1621,7 +1708,7 @@ StScrollBar {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border-radius: 0px; }
|
||||
|
||||
.dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description, .message-dialog-content .message-dialog-caption, .run-dialog-description, .prompt-dialog-error-label, .prompt-dialog-info-label, .prompt-dialog-null-label {
|
||||
.appmenu-application-button-description, .dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description, .message-dialog-content .message-dialog-caption, .run-dialog-description, .prompt-dialog-error-label, .prompt-dialog-info-label, .prompt-dialog-null-label {
|
||||
font-weight: 400;
|
||||
font-size: 0.818em; }
|
||||
|
||||
@@ -1629,7 +1716,7 @@ StScrollBar {
|
||||
font-weight: 800;
|
||||
font-size: 1.364em; }
|
||||
|
||||
.message-dialog-content .message-dialog-title.lightweight, .media-keys-osd, .workspace-switch-osd {
|
||||
.appmenu-sidebar-user-box .user-widget-label, .message-dialog-content .message-dialog-title.lightweight, .media-keys-osd, .workspace-switch-osd {
|
||||
font-weight: 700;
|
||||
font-size: 1.182em; }
|
||||
|
||||
|
||||
Reference in New Issue
Block a user