diff --git a/src/gtk3/widgets/_checkboxes.scss b/src/gtk3/widgets/_checkboxes.scss index 62adbe9..f6eba2a 100644 --- a/src/gtk3/widgets/_checkboxes.scss +++ b/src/gtk3/widgets/_checkboxes.scss @@ -1,81 +1,84 @@ @charset "UTF-8"; /************************* * Check and Radio items * *************************/ @each $s,$as in ('','-unchecked'), (':hover', '-unchecked-hover'), (':active', '-unchecked-active'), (':backdrop', '-unchecked-backdrop'), (':checked', '-checked-active'), (':checked:hover', '-checked-hover'), (':checked:active', '-checked-active'), (':backdrop:checked', '-checked-backdrop') { .view.content-view.check#{$s}:not(list) { -gtk-icon-shadow: none; -gtk-icon-source: -gtk-scaled(url("../assets/check-selectionmode#{$as}.png"), url("../assets/check-selectionmode#{$as}@2.png")); background-color: transparent; } } checkbutton.text-button, radiobutton.text-button { // this is for a nice focus on check and radios text padding: 2px 0; outline-offset: 0; label:not(:only-child) { &:first-child { margin-left: 4px; } &:last-child { margin-right: 4px; } } + &:active check, &:active radio { + -gtk-icon-transform: translate(1px,1px); + } } @each $a in ('check','radio') { #{$a} { margin: 0 4px; &:only-child { margin: 0; } min-height: 18px; min-width: 18px; //border: none; animation: none; background-color: transparent; -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-unchecked.png"), url("../assets/#{$a}-unchecked@2.png")); @each $s,$as in ('hover','-hover'), ('active','-active'), ('disabled','-insensitive'), ('backdrop','-backdrop'), ('backdrop:disabled','-backdrop-insensitive') { &:#{$s} { -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-unchecked#{$as}.png"), url("../assets/#{$a}-unchecked#{$as}@2.png")); } &:checked { -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-checked-active.png"), url("../assets/#{$a}-checked-active@2.png")); &:#{$s} { -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-checked#{$as}.png"), url("../assets/#{$a}-checked#{$as}@2.png")); } } &:indeterminate { -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-mixed-active.png"), url("../assets/#{$a}-mixed-active@2.png")); &:#{$s} { -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-mixed#{$as}.png"), url("../assets/#{$a}-mixed#{$as}@2.png")); } } } menu menuitem & { margin: 0; // this is a workaround for a menu check/radio size allocation issue min-height: 18px; min-width: 18px; background-color: transparent; box-shadow: none; -gtk-icon-shadow: none; animation: none; &:hover { -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-unchecked.png"), url("../assets/#{$a}-unchecked@2.png")); } &:checked:hover { -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-checked-active.png"), url("../assets/#{$a}-checked-active@2.png")); } &:indeterminate:hover { -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-mixed-active.png"), url("../assets/#{$a}-mixed-active@2.png")); } } } } diff --git a/src/gtk3/widgets/_menus.scss b/src/gtk3/widgets/_menus.scss index 865ed18..5866749 100644 --- a/src/gtk3/widgets/_menus.scss +++ b/src/gtk3/widgets/_menus.scss @@ -1,253 +1,259 @@ @charset "UTF-8"; /********* * Menus * *********/ menubar, .menubar { -GtkWidget-window-dragging: true; padding: 0px; box-shadow: none; border-style: none; background-color: w_color(normal); &:backdrop { background-color: backdrop(w_color(normal)); } > menuitem { min-height: 16px; padding: 4px 6px; &:hover { //Seems like it :hover even with keyboard focus background-color: b_color(active); color: b_color(active-text); } &:disabled { color: insensitive(w_color(text)); box-shadow: none; &:backdrop { background-color: backdrop(w_color(normal)); color: backdrop(insensitive(w_color(text))); } } &:backdrop { background-color: backdrop(w_color(normal)); color: backdrop(w_color(text)); } } } menu, .menu { padding: 0px; background-color: $menu_color; border: 0px solid transparent; // FIXME workaround for libreoffice gtk3, should be a border //border: 1px solid $border_color; // adds borders in a non composited env box-shadow: inset 0px 0px 0px 1px $border_color; border-radius: $r; .csd & { //background-color: transparent; border: 0px solid; border-radius: $r; //box-shadow: 0px 0px 0px 1px $border_color, 2px 2px 2px 1px rgba(0, 0, 0, 0.1); } // axes borders in a composited env separator { color: $border_color; margin-top: 3px; margin-bottom: 3px; } menuitem { text-shadow: none; min-height: 16px; min-width: 40px; padding: 4px 4px; &:hover { color: b_color(active-text); background-color: b_color(active); } &:disabled { color: insensitive(w_color(text)); &:backdrop { color: backdrop(insensitive(w_color(text))); } } &:backdrop, &:backdrop:hover { color: backdrop(w_color(text)); background-color: backdrop(w_color(normal)); } // 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-start-symbolic'); margin-right: 10px; } } } // overflow arrows > arrow { @include button(undecorated); min-height: 16px; min-width: 16px; padding: 4px; background-color: transparent; border-radius: 0; &.top { margin-top: -6px; border: none; -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); } &.bottom { margin-bottom: -6px; border: none; -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } &:hover { color: b_color(hover); } &:active { color: b_color(active)} &:backdrop { background-color: backdrop($menu_color); } &:disabled { color: transparent; background-color: transparent; border-color: transparent ; } } } menuitem { accelerator { color: gtkalpha(currentColor,0.55); } check, radio { min-height: 18px; min-width: 18px; &:dir(ltr) { margin-right: 6px; } &:dir(rtl) { margin-left: 6px; } } + &:active check, &:active radio { + -gtk-icon-transform: translate(1px,1px); + } } /*************** * Popovers * ***************/ /* menu buttons */ modelbutton.flat, .menuitem.button.flat { min-height: 16px; padding: 4px 8px; @extend %undecorated_button; color: w_color(text); &:hover { background-color: b_color(active); color: b_color(active-text) } &:selected { background-color: b_color(active); color: b_color(active-text) } &:backdrop, &:backdrop:hover { @extend %undecorated_button; color: backdrop(w_color(text)); } check:hover {-gtk-icon-source: -gtk-scaled(url("../assets/check-unchecked.png"), url("../assets/check-unchecked@2.png"));} radio:hover {-gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked.png"), url("../assets/radio-unchecked@2.png"));} check:checked:hover {-gtk-icon-source: -gtk-scaled(url("../assets/check-checked-active.png"), url("../assets/check-checked-active@2.png"));} radio:checked:hover {-gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-active.png"), url("../assets/radio-checked-active@2.png"));} check:indeterminate:hover {-gtk-icon-source: -gtk-scaled(url("../assets/check-mixed.png"), url("../assets/check-mixed@2.png"));} radio:indeterminate:hover {-gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed.png"), url("../assets/radio-mixed@2.png"));} // FIXME: remove the following when the checks/radios rewrite lands check:last-child, radio:last-child { margin-right: 0px; } check:first-child, radio:first-child { margin-left: 0px; } + &:active check, &:active radio { + -gtk-icon-transform: translate(1px,1px); + } } modelbutton.flat arrow { background: none; &:hover { background: none; } &.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } &.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } } popover.background { padding: 0px; border: 1px solid $border_color; border-radius: 3px; background-color: w_color(normal); box-shadow: 0 2px 3px transparentize(black, 0.1); &:backdrop { box-shadow: none; } > list, > .view, > toolbar { border-style: none; background-color: transparent; } .csd &, & { &.touch-selection, &.magnifier { @extend %osd; border: 1px solid $border_color; button { @extend %button }; } &.osd { @extend %osd; } } separator { margin: 3px; } list separator { margin: 0px; } checkbutton, radiobutton { @extend modelbutton.flat; } } // .scale-popup .button, // .scale-popup .button.flat { // +/- buttons on GtkVolumeButton popup // @extend %undecorated_button; // background-color: transparent; // padding: 5px; // color: w_color(text); // &:hover { // @extend %undecorated_button; // color: b_color(hover); // } // &:active { // color: b_color(active); // } // &:insensitive { // color: insensitive(w_color(text)); // } // &:backdrop { // color: backdrop(w_color(text)); // &:insensitive { // color: backdrop(insensitive(w_color(text))); // } // } // } GtkVolumeButton.button { padding: 5px; }