gtk 3.20: Menu and paned fix. (#311)
* * Menu and paned fix. * * popover menu transition fix. * * popover and menuitem separator fix. * * Re-enabled code. * * Menu list (gedit) fix style. Other fix. * * Text warning fix. * * Text warning fix. Space fix...pull/317/head
parent
a7fcd6b7b5
commit
06ae107d92
|
@ -6,30 +6,32 @@
|
||||||
**********/
|
**********/
|
||||||
|
|
||||||
@include exports("menubar") {
|
@include exports("menubar") {
|
||||||
.menubar, menubar {
|
menubar, .menubar {
|
||||||
-GtkWidget-window-dragging: true;
|
-GtkWidget-window-dragging: true;
|
||||||
|
|
||||||
|
padding: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
background-color: $menubar_bg_color;
|
background-color: $menubar_bg_color;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
|
//box-shadow: inset 0 -1px shade($menubar_bg_color, .9);
|
||||||
color: $menubar_fg_color;
|
color: $menubar_fg_color;
|
||||||
|
|
||||||
|
> menuitem {
|
||||||
&.menuitem, .menuitem, menuitem {
|
min-height: 16px;
|
||||||
padding: $spacing ($spacing * 2);
|
padding: $spacing ($spacing * 2);
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
color: $menu_fg_color;
|
color: $menubar_fg_color;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: mix($menu_bg_color, $menu_fg_color, .21);
|
border-color: mix($menubar_bg_color, $menubar_fg_color, .21);
|
||||||
background-color: mix($menu_bg_color, $menu_fg_color, .21);
|
background-color: mix($menubar_bg_color, $menubar_fg_color, .21);
|
||||||
background-image: none;
|
background-image: none;
|
||||||
color: shade($menu_fg_color, 1.08);
|
color: shade($menubar_fg_color, 1.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
*:hover { color: shade($menu_fg_color, 1.08); }
|
*:hover { color: shade($menubar_fg_color, 1.08); }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -40,58 +42,28 @@
|
||||||
*******/
|
*******/
|
||||||
|
|
||||||
@include exports("menu") {
|
@include exports("menu") {
|
||||||
* {
|
menu, .menu {
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
combobox {
|
|
||||||
&.menu, .menu, menu {
|
|
||||||
background-color: $menu_bg_color;
|
|
||||||
margin: $spacing;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#toolbar-popup, menu {
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
background-color: $menu_bg_color;
|
background-color: $menu_bg_color;
|
||||||
color: $menu_fg_color;
|
color: $menu_fg_color;
|
||||||
|
|
||||||
&:checked { background-color: $selected_bg_color; }
|
.csd & { border: 0; } // axes borders in a composited env
|
||||||
|
|
||||||
button {
|
&:selected { background-color: $selected_bg_color; }
|
||||||
&, &:hover, &:active, &:active *:disabled, &:disabled {
|
|
||||||
border-width: 0;
|
separator {
|
||||||
background-color: transparent;
|
padding: 0;
|
||||||
background-image: none;
|
border-style: none;
|
||||||
}
|
background-color: shade($menu_bg_color, ($contrast + .1));
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
menuitem window decoration {
|
menuitem {
|
||||||
box-shadow: 0 2px 3px rgba(0,0,0,.2);
|
min-height: 16px;
|
||||||
}
|
min-width: 40px;
|
||||||
|
padding: $spacing;
|
||||||
.context-menu { font: initial; }
|
|
||||||
|
|
||||||
.menuitem, menuitem {
|
|
||||||
&, menu & {
|
|
||||||
margin: $spacing;
|
|
||||||
padding: $spacing 8px;
|
|
||||||
border: 0;
|
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background-color: transparent;
|
|
||||||
background-image: none;
|
|
||||||
|
|
||||||
-GtkMenuItem-arrow-scaling: .5;
|
|
||||||
|
|
||||||
menu &:last-child {
|
|
||||||
padding-bottom: 8px;
|
|
||||||
}
|
|
||||||
menu &:first-child {
|
|
||||||
padding-top: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active, &:hover {
|
&:active, &:hover {
|
||||||
border: 0;
|
border: 0;
|
||||||
|
@ -103,51 +75,88 @@
|
||||||
*:active, *:hover { color: $selected_fg_color; }
|
*:active, *:hover { color: $selected_fg_color; }
|
||||||
|
|
||||||
&:disabled, *:disabled { color: mix($menu_fg_color, $menu_bg_color, .5); }
|
&:disabled, *:disabled { color: mix($menu_fg_color, $menu_bg_color, .5); }
|
||||||
|
|
||||||
|
// submenu indicators
|
||||||
|
arrow {
|
||||||
|
min-height: 16px;
|
||||||
|
min-width: 16px;
|
||||||
|
|
||||||
|
&:dir(ltr) {
|
||||||
|
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:dir(rtl) {
|
||||||
|
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.button, &.button.flat {
|
||||||
|
&, &:focus, &:active, &:disabled, &:active:disabled {
|
||||||
|
background-color: transparent;
|
||||||
|
background-image: none;
|
||||||
|
border: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
color: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover, &:focus:hover, &:active:hover, &:selected {
|
||||||
|
background-image: none;
|
||||||
|
background-color: $selected_bg_color;
|
||||||
|
color: $selected_fg_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
calendar {
|
||||||
|
&:inconsistent { color: mix($menu_fg_color, $menu_bg_color, .5); }
|
||||||
|
|
||||||
|
.button {
|
||||||
|
border-style: none;
|
||||||
|
background-color: transparent;
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.check, &.radio {
|
// overflow arrows
|
||||||
&, &:focus, &:hover, &:disabled { background-image: none; }
|
> arrow {
|
||||||
|
//@include button(undecorated);
|
||||||
|
|
||||||
&, &:focus, &:hover, &:active, &:disabled {
|
min-height: 16px;
|
||||||
border-style: none;
|
min-width: 16px;
|
||||||
|
padding: $spacing;
|
||||||
|
background-color: $menu_bg_color;
|
||||||
|
border-radius: 0;
|
||||||
|
|
||||||
|
&.top {
|
||||||
|
margin-top: -6px;
|
||||||
|
border-bottom: 1px solid mix($fg_color, $base_color, .1);
|
||||||
|
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
|
||||||
|
}
|
||||||
|
|
||||||
|
&.bottom {
|
||||||
|
margin-bottom: -6px;
|
||||||
|
border-top: 1px solid mix($fg_color, $base_color, .1);
|
||||||
|
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover { background-color: mix($fg_color, $base_color, .1); }
|
||||||
|
|
||||||
|
&:backdrop { background-color: $backdrop_menu_color; }
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
color: transparent;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
border-color: transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&.separator {
|
.context-menu { font: initial; }
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
border-style: none;
|
menuitem {
|
||||||
color: shade($menu_bg_color, ($contrast + .1));
|
accelerator {
|
||||||
}
|
|
||||||
|
|
||||||
&.button, &.button.flat {
|
|
||||||
&, &:focus, &:active, &:disabled, &:active:disabled {
|
|
||||||
background-color: transparent;
|
|
||||||
background-image: none;
|
|
||||||
border: 0;
|
|
||||||
box-shadow: none;
|
|
||||||
color: currentColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover, &:focus:hover, &:active:hover, &:selected {
|
|
||||||
background-image: none;
|
|
||||||
background-color: $selected_bg_color;
|
|
||||||
color: $selected_fg_color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
calendar {
|
|
||||||
&:indeterminate { color: mix($menu_fg_color, $menu_bg_color, .5); }
|
|
||||||
|
|
||||||
.button {
|
|
||||||
border-style: none;
|
|
||||||
background-color: transparent;
|
|
||||||
background-image: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.accelerator {
|
|
||||||
color: alpha($menu_fg_color, .6);
|
color: alpha($menu_fg_color, .6);
|
||||||
|
|
||||||
&:hover { color: alpha($selected_fg_color, .8); }
|
&:hover { color: alpha($selected_fg_color, .8); }
|
||||||
|
@ -155,6 +164,18 @@
|
||||||
&:disabled { color: alpha(mix($menu_fg_color, $menu_bg_color, .5), .4); }
|
&:disabled { color: alpha(mix($menu_fg_color, $menu_bg_color, .5), .4); }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
check, radio {
|
||||||
|
min-height: 16px;
|
||||||
|
min-width: 16px;
|
||||||
|
|
||||||
|
&:dir(ltr) { margin-right: 7px; }
|
||||||
|
&:dir(rtl) { margin-left: 7px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
window decoration {
|
||||||
|
box-shadow: 0 2px 3px alpha($black, .2);
|
||||||
|
}
|
||||||
|
|
||||||
entry { @include entry($menu_bg_color, $menu_fg_color); }
|
entry { @include entry($menu_bg_color, $menu_fg_color); }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -204,13 +225,28 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
view, .view, list {
|
treeview.view {
|
||||||
background-color: shade($menu_bg_color, ($contrast + .5));
|
&:hover, &:selected, &:selected:focus, &:backdrop:selected, &:backdrop:selected:focus { border-top-color: $selected_bg_color; }
|
||||||
background-image: none;
|
|
||||||
color: $menu_fg_color;
|
&, &:backdrop { border-top-color: shade($menu_bg_color, ($contrast + .4)); }
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-row, list row {
|
view, .view, list {
|
||||||
|
&:hover {
|
||||||
|
background-image: none;
|
||||||
|
background-color: $selected_bg_color;
|
||||||
|
color: $selected_fg_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&, &:backdrop {
|
||||||
|
background-color: shade($menu_bg_color, ($contrast + .5));
|
||||||
|
background-image: none;
|
||||||
|
color: $menu_fg_color;
|
||||||
|
border-color: border_normal($menu_bg_color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
list row {
|
||||||
&, & .button {
|
&, & .button {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
|
@ -234,14 +270,6 @@
|
||||||
button { @include button($menu_bg_color, $menu_fg_color); }
|
button { @include button($menu_bg_color, $menu_fg_color); }
|
||||||
|
|
||||||
> list, > view, > toolbar { background-color: transparent; }
|
> list, > view, > toolbar { background-color: transparent; }
|
||||||
|
|
||||||
separator {
|
|
||||||
border: 0;
|
|
||||||
background-color: transparent;
|
|
||||||
color: alpha($menu_bg_color, .5);
|
|
||||||
font-size: 80%;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
modelbutton {
|
modelbutton {
|
||||||
|
@ -269,5 +297,11 @@
|
||||||
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
|
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.flat {
|
||||||
|
&, &:hover {
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -86,32 +86,70 @@
|
||||||
|
|
||||||
@include exports("paned") {
|
@include exports("paned") {
|
||||||
paned {
|
paned {
|
||||||
-GtkPaned-handle-size: 1;
|
> separator {
|
||||||
-gtk-icon-source: none;
|
min-width: 1px;
|
||||||
|
min-height: 1px;
|
||||||
|
-gtk-icon-source: none; // defeats the ugly default handle decoration
|
||||||
|
border-style: none; // just to be sure
|
||||||
|
background-color: transparent;
|
||||||
|
// workaround, using background istead of a border since the border will get rendered twice (?)
|
||||||
|
background-image: image(shade($bg_color, .9));
|
||||||
|
background-size: 1px 1px;
|
||||||
|
|
||||||
margin: 0 $spacing;
|
&:selected { background-image: image($selected_bg_color); } // FIXME is this needed?
|
||||||
|
|
||||||
|
&:backdrop { background-image: image($backdrop_borders_color); }
|
||||||
|
|
||||||
|
&.wide {
|
||||||
|
min-width: 5px;
|
||||||
|
min-height: 5px;
|
||||||
|
background-color: $bg_color;
|
||||||
|
background-image: image(border_normal($bg_color)), image(border_normal($bg_color));
|
||||||
|
background-size: 1px 1px, 1px 1px;
|
||||||
|
|
||||||
|
&:backdrop {
|
||||||
|
background-color: $backdrop_bg_color;
|
||||||
|
background-image: image($backdrop_borders_color),
|
||||||
|
image($backdrop_borders_color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.horizontal > separator {
|
||||||
|
background-repeat: repeat-y;
|
||||||
|
|
||||||
|
&:dir(ltr) {
|
||||||
|
margin: 0 -8px 0 0;
|
||||||
|
padding: 0 8px 0 0;
|
||||||
|
background-position: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:dir(rtl) {
|
||||||
|
margin: 0 0 0 -8px;
|
||||||
|
padding: 0 0 0 8px;
|
||||||
|
background-position: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.wide {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background-repeat: repeat-y, repeat-y;
|
||||||
|
background-position: left, right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.vertical > separator {
|
||||||
|
margin: 0 0 -8px 0;
|
||||||
|
padding: 0 0 8px 0;
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
background-position: top;
|
||||||
|
|
||||||
|
&.wide {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background-repeat: repeat-x, repeat-x;
|
||||||
|
background-position: bottom, top;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
paned:dir(rtl) {
|
|
||||||
margin-right: 0;
|
|
||||||
margin-left: $spacing;
|
|
||||||
}
|
|
||||||
|
|
||||||
paned .pane-separator { background-color: shade($bg_color, .9); }
|
|
||||||
|
|
||||||
paned.wide {
|
|
||||||
-GtkPaned-handle-size: 4;
|
|
||||||
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
paned.wide .pane-separator {
|
|
||||||
background-color: transparent;
|
|
||||||
border-style: none solid;
|
|
||||||
border-color: shade($bg_color, .9);
|
|
||||||
border-width: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
paned.wide.vertical .pane-separator { border-style: solid none; }
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -47,6 +47,7 @@
|
||||||
border: 1px solid darken($selected_bg_color, 10%);
|
border: 1px solid darken($selected_bg_color, 10%);
|
||||||
background-color: transparentize(darken($selected_bg_color, 10%), 0.8);
|
background-color: transparentize(darken($selected_bg_color, 10%), 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
treeview entry {
|
treeview entry {
|
||||||
&.flat, & {
|
&.flat, & {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
@ -56,6 +57,7 @@
|
||||||
&:focus { border-color: $selected_bg_color; }
|
&:focus { border-color: $selected_bg_color; }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
%column_header_button {
|
%column_header_button {
|
||||||
padding: 0 6px;
|
padding: 0 6px;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
@ -82,6 +84,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
treeview.view {
|
treeview.view {
|
||||||
-GtkTreeView-grid-line-width: 1;
|
-GtkTreeView-grid-line-width: 1;
|
||||||
-GtkTreeView-grid-line-pattern: '';
|
-GtkTreeView-grid-line-pattern: '';
|
||||||
|
@ -127,6 +130,7 @@
|
||||||
border-left-color: mix($backdrop_fg_color, $backdrop_bg_color, .5);
|
border-left-color: mix($backdrop_fg_color, $backdrop_bg_color, .5);
|
||||||
border-top: $backdrop_bg_color;
|
border-top: $backdrop_bg_color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:drop(active) {
|
&:drop(active) {
|
||||||
border-style: solid none;
|
border-style: solid none;
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
|
|
Loading…
Reference in New Issue