diff --git a/src/CMakeLists.txt b/src/CMakeLists.txt --- a/src/CMakeLists.txt +++ b/src/CMakeLists.txt @@ -14,18 +14,16 @@ set(THEME_DIR "${PROJECT_BINARY_DIR}/${THEME_NAME}") set(${THEME_NAME}_TARGETS "${THEME_DIR}/gtk-2.0/gtkrc" - "${THEME_DIR}/gtk-3.18/gtk.css" - "${THEME_DIR}/gtk-3.20/gtk.css" + "${THEME_DIR}/gtk-3.0/gtk.css" PARENT_SCOPE ) endfunction() gen_targets(Breeze) gen_targets(Breeze-Dark) list(APPEND Breeze_TARGETS - "${PROJECT_BINARY_DIR}/Breeze/gtk-3.18/gtk-dark.css" - "${PROJECT_BINARY_DIR}/Breeze/gtk-3.20/gtk-dark.css" + "${PROJECT_BINARY_DIR}/Breeze/gtk-3.0/gtk-dark.css" ) add_custom_command( @@ -40,8 +38,7 @@ OUTPUT ${Breeze_TARGETS} DEPENDS ${SOURCES} COMMAND ./build_theme.sh -c Breeze -t "${PROJECT_BINARY_DIR}/Breeze" -r "${BREEZE_COLOR_INSTALL_ROOT}" - COMMAND cp gtk-dark-3.18.css "${PROJECT_BINARY_DIR}/Breeze/gtk-3.18/gtk-dark.css" - COMMAND cp gtk-dark-3.20.css "${PROJECT_BINARY_DIR}/Breeze/gtk-3.20/gtk-dark.css" + COMMAND cp gtk-dark-3.0.css "${PROJECT_BINARY_DIR}/Breeze/gtk-3.0/gtk-dark.css" WORKING_DIRECTORY "${PROJECT_SOURCE_DIR}/src" ) add_custom_target(Breeze ALL DEPENDS ${Breeze_TARGETS}) diff --git a/src/build_theme.sh b/src/build_theme.sh --- a/src/build_theme.sh +++ b/src/build_theme.sh @@ -3,7 +3,7 @@ # Usage: create_folders create_folders () { - for j in gtk-2.0 gtk-3.18 gtk-3.20; do + for j in gtk-2.0 gtk-3.0; do if ! [ -d "$1/$j" ]; then mkdir -p "$1/$j" fi @@ -28,7 +28,7 @@ fi echo "Installing into ${THEME_INSTALL_TARGET}" mkdir -p "${THEME_INSTALL_TARGET}" - for dir in assets gtk-2.0 gtk-3.18 gtk-3.20; do + for dir in assets gtk-2.0 gtk-3.0; do if [ -d "${THEME_INSTALL_TARGET}/$dir" ]; then rm -rf "${THEME_INSTALL_TARGET:?}/$dir" fi @@ -44,8 +44,7 @@ cp -R gtk2/* "${THEME_BUILD_DIR}/gtk-2.0/" python3 render_assets.py -c "$1" -a "${THEME_BUILD_DIR}/assets" \ -g "${THEME_BUILD_DIR}/gtk-2.0" -G "${THEME_BUILD_DIR}" -b "$4" - build_sass gtk318/gtk.scss "${THEME_BUILD_DIR}/gtk-3.18/gtk.css" "${THEME_BUILD_DIR}" - build_sass gtk320/gtk.scss "${THEME_BUILD_DIR}/gtk-3.20/gtk.css" "${THEME_BUILD_DIR}" + build_sass gtk3/gtk.scss "${THEME_BUILD_DIR}/gtk-3.0/gtk.css" "${THEME_BUILD_DIR}" rm -f "${THEME_BUILD_DIR}/_global.scss" install_theme "${THEME_BUILD_DIR}" "$2" "$3" } diff --git a/src/gtk-dark-3.20.css b/src/gtk-dark-3.0.css rename from src/gtk-dark-3.20.css rename to src/gtk-dark-3.0.css diff --git a/src/gtk-dark-3.18.css b/src/gtk-dark-3.18.css deleted file mode 100644 --- a/src/gtk-dark-3.18.css +++ /dev/null @@ -1 +0,0 @@ -@import url("../../Breeze-Dark/gtk-3.18/gtk.css"); diff --git a/src/gtk318/gtk.scss b/src/gtk3/gtk.scss rename from src/gtk318/gtk.scss rename to src/gtk3/gtk.scss diff --git a/src/gtk320/widgets/_app_notifications.scss b/src/gtk3/widgets/_app_notifications.scss rename from src/gtk320/widgets/_app_notifications.scss rename to src/gtk3/widgets/_app_notifications.scss diff --git a/src/gtk320/widgets/_base.scss b/src/gtk3/widgets/_base.scss rename from src/gtk320/widgets/_base.scss rename to src/gtk3/widgets/_base.scss diff --git a/src/gtk320/widgets/_button.scss b/src/gtk3/widgets/_button.scss rename from src/gtk320/widgets/_button.scss rename to src/gtk3/widgets/_button.scss diff --git a/src/gtk320/widgets/_calendar.scss b/src/gtk3/widgets/_calendar.scss rename from src/gtk320/widgets/_calendar.scss rename to src/gtk3/widgets/_calendar.scss diff --git a/src/gtk320/widgets/_checkboxes.scss b/src/gtk3/widgets/_checkboxes.scss rename from src/gtk320/widgets/_checkboxes.scss rename to src/gtk3/widgets/_checkboxes.scss diff --git a/src/gtk320/widgets/_color_chooser.scss b/src/gtk3/widgets/_color_chooser.scss rename from src/gtk320/widgets/_color_chooser.scss rename to src/gtk3/widgets/_color_chooser.scss diff --git a/src/gtk320/widgets/_dialogs.scss b/src/gtk3/widgets/_dialogs.scss rename from src/gtk320/widgets/_dialogs.scss rename to src/gtk3/widgets/_dialogs.scss diff --git a/src/gtk320/widgets/_entry.scss b/src/gtk3/widgets/_entry.scss rename from src/gtk320/widgets/_entry.scss rename to src/gtk3/widgets/_entry.scss diff --git a/src/gtk320/widgets/_headerbar.scss b/src/gtk3/widgets/_headerbar.scss rename from src/gtk320/widgets/_headerbar.scss rename to src/gtk3/widgets/_headerbar.scss diff --git a/src/gtk320/widgets/_infobar.scss b/src/gtk3/widgets/_infobar.scss rename from src/gtk320/widgets/_infobar.scss rename to src/gtk3/widgets/_infobar.scss diff --git a/src/gtk320/widgets/_link.scss b/src/gtk3/widgets/_link.scss rename from src/gtk320/widgets/_link.scss rename to src/gtk3/widgets/_link.scss diff --git a/src/gtk320/widgets/_lists.scss b/src/gtk3/widgets/_lists.scss rename from src/gtk320/widgets/_lists.scss rename to src/gtk3/widgets/_lists.scss diff --git a/src/gtk320/widgets/_menus.scss b/src/gtk3/widgets/_menus.scss rename from src/gtk320/widgets/_menus.scss rename to src/gtk3/widgets/_menus.scss diff --git a/src/gtk320/widgets/_misc.scss b/src/gtk3/widgets/_misc.scss rename from src/gtk320/widgets/_misc.scss rename to src/gtk3/widgets/_misc.scss diff --git a/src/gtk320/widgets/_notebook.scss b/src/gtk3/widgets/_notebook.scss rename from src/gtk320/widgets/_notebook.scss rename to src/gtk3/widgets/_notebook.scss diff --git a/src/gtk320/widgets/_overshoot.scss b/src/gtk3/widgets/_overshoot.scss rename from src/gtk320/widgets/_overshoot.scss rename to src/gtk3/widgets/_overshoot.scss diff --git a/src/gtk320/widgets/_pathbar.scss b/src/gtk3/widgets/_pathbar.scss rename from src/gtk320/widgets/_pathbar.scss rename to src/gtk3/widgets/_pathbar.scss diff --git a/src/gtk320/widgets/_progressbar.scss b/src/gtk3/widgets/_progressbar.scss rename from src/gtk320/widgets/_progressbar.scss rename to src/gtk3/widgets/_progressbar.scss diff --git a/src/gtk320/widgets/_scale.scss b/src/gtk3/widgets/_scale.scss rename from src/gtk320/widgets/_scale.scss rename to src/gtk3/widgets/_scale.scss diff --git a/src/gtk320/widgets/_scrollbar.scss b/src/gtk3/widgets/_scrollbar.scss rename from src/gtk320/widgets/_scrollbar.scss rename to src/gtk3/widgets/_scrollbar.scss diff --git a/src/gtk320/widgets/_sidebar.scss b/src/gtk3/widgets/_sidebar.scss rename from src/gtk320/widgets/_sidebar.scss rename to src/gtk3/widgets/_sidebar.scss diff --git a/src/gtk320/widgets/_spinbutton.scss b/src/gtk3/widgets/_spinbutton.scss rename from src/gtk320/widgets/_spinbutton.scss rename to src/gtk3/widgets/_spinbutton.scss diff --git a/src/gtk320/widgets/_switch.scss b/src/gtk3/widgets/_switch.scss rename from src/gtk320/widgets/_switch.scss rename to src/gtk3/widgets/_switch.scss diff --git a/src/gtk320/widgets/_toolbar.scss b/src/gtk3/widgets/_toolbar.scss rename from src/gtk320/widgets/_toolbar.scss rename to src/gtk3/widgets/_toolbar.scss diff --git a/src/gtk320/widgets/_tooltips.scss b/src/gtk3/widgets/_tooltips.scss rename from src/gtk320/widgets/_tooltips.scss rename to src/gtk3/widgets/_tooltips.scss diff --git a/src/gtk320/widgets/_treeview.scss b/src/gtk3/widgets/_treeview.scss rename from src/gtk320/widgets/_treeview.scss rename to src/gtk3/widgets/_treeview.scss diff --git a/src/gtk320/widgets/_window_decorations.scss b/src/gtk3/widgets/_window_decorations.scss rename from src/gtk320/widgets/_window_decorations.scss rename to src/gtk3/widgets/_window_decorations.scss diff --git a/src/gtk318/widgets/_app_notifications.scss b/src/gtk318/widgets/_app_notifications.scss deleted file mode 100644 --- a/src/gtk318/widgets/_app_notifications.scss +++ /dev/null @@ -1,45 +0,0 @@ -@charset "UTF-8"; - -/********************* - * App Notifications * - *********************/ - -.app-notification, -.app-notification.frame { - @extend %osd; - padding: 10px; - border-top-width: 0px; - border-radius: 0px 0px 3px 3px; - &:backdrop { background-image: none; } - .button { - @include button(normal); - &.flat { - @extend %undecorated_button; - icon-shadow: none; - text-shadow: none; - &:hover { - @extend %undecorated_button; - color: b_color(hover); - } - &:active { - @extend %undecorated_button; - color: b_color(active); - } - &:backdrop, - &:insensitive, - &:backdrop:insensitive { @extend %undecorated_button; } - } - &:hover { @include button(hover); } - &:active, - &:checked, - &:backdrop:active, - &:backdrop:checked { - @include button(active); - } - &:insensitive, - &:backdrop:insensitive { - @include button(insensitive); - } - &:backdrop { @include button(backdrop); } - } -} diff --git a/src/gtk318/widgets/_base.scss b/src/gtk318/widgets/_base.scss deleted file mode 100644 --- a/src/gtk318/widgets/_base.scss +++ /dev/null @@ -1,210 +0,0 @@ -@charset "UTF-8"; - -@function gtkalpha($c,$a) { - @return unquote("alpha(#{$c},#{$a})"); -} - -$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); - -* { - padding: 0; - -GtkToolButton-icon-spacing: 4; - -GtkTextView-error-underline-color: $error_color; - - -GtkButton-child-displacement-x: 0; - -GtkButton-child-displacement-y: 0; - - -GtkCheckButton-indicator-size: 18; - -GtkCheckMenuItem-indicator-size: 18; - - // The size for scrollbars. The slider is 2px smaller, but we keep it - // up so that the whole area is sensitive to button presses for the - // slider. The stepper button is larger in both directions, the slider - // only in the width - - -GtkScrolledWindow-scrollbar-spacing: 0; - -GtkScrolledWindow-scrollbars-within-bevel: 1; - - -GtkToolItemGroup-expander-size: 11; - -GtkExpander-expander-size: 16; - -GtkTreeView-expander-size: 11; - - -GtkTreeView-horizontal-separator: 4; - - -GtkMenu-horizontal-padding: 0; - -GtkMenu-vertical-padding: 0; - - -GtkWidget-link-color: $link_color; - -GtkWidget-visited-link-color: $link_visited_color; - - -GtkWidget-focus-padding: 2; // FIXME: do we still need these? - -GtkWidget-focus-line-width: 1; // - - -GtkWidget-text-handle-width: 20; - -GtkWidget-text-handle-height: 20; - - -GtkDialog-button-spacing: 4; - -GtkDialog-action-area-border: 0; - - -GtkStatusbar-shadow-type: none; - - outline-width: 0px; -} - - -/*************** - * Base States * - ***************/ - -.background { - color: w_color(text); - background-color: w_color(normal); - - &:backdrop { - text-shadow: none; - icon-shadow: none; - color: backdrop(w_color(text)); - background-color: backdrop(w_color(normal)); - } -} - -/* - These wildcard seems unavoidable, need to investigate. - Wildcards are bad and troublesome, use them with care, - or better, just don't. - Everytime a wildcard is used a kitten dies, painfully. -*/ - -*:insensitive { - -gtk-image-effect: dim; -} - -.gtkstyle-fallback { - background-color: w_color(normal); - color: w_color(text); - &:prelight { - background-color: lighten(w_color(normal), 10%); - color: w_color(text); - } - &:active { - background-color: darken(w_color(normal), 10%); - color: w_color(text); - } - &:insensitive { - background-color: insensitive(w_color(normal)); - color: insensitive(w_color(text)); - } - &:selected { - background-color: s_color(normal); - color: s_color(text); - } -} - -.view { - color: v_color(text); - background-color: v_color(normal); - - &:backdrop { - color: backdrop(v_color(text)); - background-color: backdrop(v_color(normal)); - } - - &:selected { - border-radius: $r; - @extend %selected_items; - } - - &:insensitive { - color: insensitive(v_color(text)); - } -} - -.rubberband { - border: 1px solid s_color(normal); - background-color: transparentize(s_color(normal),0.8); - &:backdrop { - border-color: backdrop(s_color(normal)); - background-color: backdrop(transparentize(s_color(normal),0.8)); - } -} - -.label { - &.separator { - color: w_color(text); - @extend .dim-label; - &:backdrop { color: backdrop(w_color(text)); } - } - &:selected, - &:selected:focus, - &:selected:hover { - @extend %selected_items; - } - &:insensitive { - color: insensitive(w_color(text)); - &:backdrop { color: backdrop(insensitive(w_color(text))); } - } -} - -.dim-label { - opacity: 0.5; - text-shadow: none; -} - -GtkAssistant { - .sidebar { - background-color: v_color(text); - border-top: 1px solid $border_color; - &:dir(ltr) { border-right: 1px solid $border_color; } - &:dir(rtl) { border-left: 1px solid $border_color; } - &:backdrop { - background-color: backdrop(v_color(text)); - border-color: backdrop($border_color); - } - } - &.csd .sidebar { border-top-style: none; } - .sidebar .label { - padding: 6px 12px; - } - .sidebar .label.highlight { - background-color: mix(v_color(normal), v_color(text), 80%); - } -} - -GtkTextView { // This will get overridden by .view, needed by gedit line numbers - background-color: mix(w_color(normal), v_color(normal), 50%); - &:backdrop { background-color: backdrop(mix(w_color(normal), v_color(normal), 50%)); } - &:insensitive { - color: insensitive(v_color(text)); - } -} - -.grid-child { - padding: 3px; - border-radius: $r; - &:selected { - @extend %selected_items; - } -} - -%osd, .osd { - color: w_color(text); - border: 1px solid w_color(normal); - background-color: transparentize(w_color(normal),0.2); - background-clip: padding-box; - box-shadow: none; - text-shadow: none; - icon-shadow: none; - &:backdrop { - color: backdrop(w_color(text)); - background-color: backdrop(transparentize(w_color(normal),0.2)); - } -} - -%selected_items { - background-color: s_color(normal); - color: s_color(text); - &:backdrop { - background-color: backdrop(s_color(backdrop)); - color: backdrop(v_color(normal)); - } -} diff --git a/src/gtk318/widgets/_button.scss b/src/gtk318/widgets/_button.scss deleted file mode 100644 --- a/src/gtk318/widgets/_button.scss +++ /dev/null @@ -1,461 +0,0 @@ -@charset "UTF-8"; - - -// buttons - -@mixin button($t, $c:b_color(normal), $tc:b_color(text)) { -// -// Button drawing function -// -// $t: button type, -// $c: base button color for colored* types -// $tc: optional text color for colored* types -// $edge: set to none to not draw the bottom edge or specify a color to not -// use the default one -// -// possible $t values: -// normal, hover, active, insensitive, insensitive-active, -// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active, -// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated -// - - @if $t==normal { - // - // normal button - // - box-shadow: 1px 1px 1px rgba(0,0,0,0.2); - text-shadow: none; - icon-shadow: none; - - color: $tc; - border-color: if($c!=b_color(normal), $c, $border_color); - background-image: button_gradient($c, normal); - } - - @else if $t==hover { - // - // hovered button - // - color: $tc; - border-color: if($c!=b_color(normal), $c, b_color(hover)); - } - - @else if $t==active { - // - // pushed button - // - color: if($tc==b_color(text),b_color(active-text), $tc); - border-color: if($c!=b_color(normal), $c, b_color(active)); - background-image: if($c!=b_color(normal), button_gradient($c, active), - button_gradient(b_color(active),active)); - } - - @else if $t==active-hover { - // - // - // - color: $tc; - border-color: if($c!=b_color(normal), transparentize($c, 0.5), b_color(hover)); - background-image: if($c!=b_color(normal), button_gradient(transparentize($c, 0.5),active), - button_gradient(b_color(hover),active)); - } - - @else if $t==insensitive { - // - // insensitive button - // - color: if($tc!=b_color(text),insensitive($tc),insensitive(b_color(text))); - border-color: if($c!=b_color(normal), insensitive($c), insensitive($border_color)); - background-image: if($c!=b_color(normal), button_gradient(insensitive($c), normal), - button_gradient(insensitive(b_color(normal)), normal)); - > .label { color: inherit; } - } - - @else if $t==insensitive-active { - // - // insensitive pushed button - // - color: if($tc!=b_color(text), insensitive($tc), insensitive(b_color(active-text))); - border-color: insensitive(b_color(active)); - background-image: if($c!=b_color(normal), button_gradient(insensitive($c), active), - button_gradient(insensitive(b_color(active)),active)); - > .label { color: inherit; } - } - - @else if $t==backdrop { - // - // backdrop button - // - color: backdrop($tc); - border-color: backdrop($border_color); - background-image: button_gradient(backdrop($c), normal); - } - - @else if $t==backdrop-active { - // - // backdrop pushed button - // - color: if($tc!=b_color(text), backdrop($tc), backdrop(b_color(active-text))); - border-color: if($c!=b_color(normal), backdrop($c), backdrop(b_color(active))); - background-image: if($c!=b_color(normal), button_gradient(backdrop($c), active), - button_gradient(backdrop(b_color(active)),active)); - } - - @else if $t==backdrop-insensitive { - // - // backdrop insensitive button - // - color: backdrop(insensitive($tc)); - border-color: if($c!=b_color(normal), backdrop(insensitive($c)), backdrop(insensitive($border_color))); - background-image: button_gradient(backdrop(insensitive($c))); - > .label { color: inherit; } - } - - @else if $t==backdrop-insensitive-active { - // - // backdrop insensitive pushed button - // - color: if($c!=b_color(normal), backdrop(insensitive($tc)), backdrop(insensitive(b_color(active-text)))); - border-color: if($c!=b_color(normal), backdrop(insensitive($c)), backdrop(insensitive(b_color(active)))); - background-image: if($c!=b_color(normal), button_gradient(backdrop(insensitive($c)), active), - button_gradient(backdrop(insensitive(b_color(active))),active)); - > .label { color: inherit; } - } - - @else if $t==undecorated { - // - // reset - // - border-color: transparentize(white,1); //FIXME needed? - background-color: transparent; - background-image: none; - box-shadow:none; - color: $tc; - - text-shadow: none; - icon-shadow: none; - } -} - -/*********** - * Buttons * - ***********/ - -// stuff for .needs-attention -$_dot_color: b_color(active); -@keyframes needs_attention { - from { - background-image: -gtk-gradient(radial, - center center, 0, - center center, 0.01, - to($_dot_color), - to(transparent)); - } - to { - background-image: -gtk-gradient(radial, - center center, 0, - center center, 0.5, - to(s_color(normal)), - to(transparent)); - } -} - -%buttons { - - $_button_transition: all 200ms $ease-out-quad; - - border: 1px solid; - border-radius: $r; - padding: 6px; - background-clip: border-box; - transition: $_button_transition; - @include button(normal); - &.flat { - @include button(undecorated); - // to avoid adiacent buttons borders clashing when transitioning, the transition on the normal state is set - // to none, while it's added back in the hover state, so the button decoration will fade in on hover, but - // it won't fade out when the pointer leave the button allocation area. To make the transition more evident - // in this case the duration is increased. - transition: none; - &:hover { - transition: $_button_transition; - transition-duration: 500ms; - &:active { transition: $_button_transition; } - } - &:checked { background-color: $border_color;} - } - &:hover { - @include button(hover); - -gtk-image-effect: highlight; // Do we want this? - } - &:active, &:checked { - @include button(active); - transition-duration: 50ms; - &:hover { - @include button(active-hover); - } - } - &:backdrop { - @include button(backdrop); - -gtk-image-effect: none; - &:active, &:checked { - @include button(backdrop-active); - } - &:insensitive { - @include button(backdrop-insensitive); - } - &:insensitive:active, &:insensitive:checked { - @include button(backdrop-insensitive-active); - } - } - &.flat:backdrop { - -gtk-image-effect: none; - @include button(undecorated); - color: backdrop(b_color(text)); - } - &.flat:insensitive { - @include button(undecorated); - color: insensitive(b_color(text)); - } - &.flat:backdrop:insensitive { - @include button(undecorated); - color: backdrop(insensitive(b_color(text))); - } - &:insensitive { - @include button(insensitive); - &:active, &:checked { - @include button(insensitive-active); - } - } -} - -.button { - @extend %buttons; - &.osd { - @extend %buttons; - } - //overlay / OSD style - .osd & { - @extend %buttons; - } - - // Suggested and Destructive Action buttons - @each $b_type, $button_color in (suggested-action, b_color(active)), - (destructive-action, $error_color) { - &.#{$b_type}, - &.#{$b_type}.osd & { - @include button(normal, $button_color, b_color(active-text)); - &.flat { - @include button(undecorated); - color: $button_color; - } - &:hover { @include button(hover, $button_color, white); } //FIXME no hardcoded colors - &:active, &:checked { @include button(active, $button_color, white); } - &:backdrop, &.flat:backdrop { - @include button(backdrop, $button_color, white); - &:active, &:checked { - @include button(backdrop-active, $button_color, white); - } - &:insensitive { - @include button(backdrop-insensitive); - &:active, &:checked { - @include button(backdrop-insensitive-active, $button_color, white); - } - } - } - &.flat:backdrop, &.flat:insensitive, &.flat:backdrop:insensitive { - @include button(undecorated); - color: transparentize($button_color, 0.2); - } - &:insensitive { - @include button(insensitive); - &:active, &:checked { - @include button(insensitive-active, $button_color, white); - } - } - } - } - - &.image-button { padding: 6px; } - - &.text-button { - padding: 6px - } - - &.text-button.image-button { - // those buttons needs uneven horizontal padding, we want the icon side - // to have the image-button padding, while the text side the text-button - // one, so we're adding the missing padding to the label depending on - // its position inside the button - padding: 6px; // same as .button - .label:first-child { padding-left: 8px; } - .label:last-child { padding-right: 8px; } - } - - .stack-switcher > & { - // to position the needs attention dot, padding is added to the button - // child, a label needs just lateral padding while an icon needs vertical - // padding added too. - > .label { - padding-left: 6px; // label padding - padding-right: 6px; // - } - > GtkImage { - padding-left: 6px; // image padding - padding-right: 6px; // - padding-top: 3px; // - padding-bottom: 3px; // - } - &.text-button { - padding: 6px; // needed or it will get overridden - } - &.image-button { - // we want image buttons to have a 1:1 aspect ratio, so compensation - // of the padding added to the GtkImage is needed - padding: 3px 0px; - } - &.needs-attention > .label, - &.needs-attention > GtkImage { @extend %needs_attention; } - &.needs-attention:active > .label, - &.needs-attention:active > GtkImage, - &.needs-attention:checked > .label, - &.needs-attention:checked > GtkImage { - animation: none; - background-image: none; - } - } - - //inline-toolbar buttons - .inline-toolbar &, .inline-toolbar &:backdrop { - border-radius: $r; - border-width: 1px; - @extend %linked; - } - - .primary-toolbar & { icon-shadow: none; } - - .linked > &, - .linked > &:hover, - .linked > &:active, - .linked > &:checked, - .linked > &:backdrop { @extend %linked; } - - .linked.vertical > &, - .linked.vertical > &:hover, - .linked.vertical > &:active, - .linked.vertical > &:checked, - .linked.vertical > &:backdrop { @extend %linked_vertical; } -} - -/************** - * ComboBoxes * - **************/ -GtkComboBox { - > .button { padding: 5px 4px; } // Otherwise combos - // are bigger then - // buttons - -GtkComboBox-arrow-scaling: 0.5; - -GtkComboBox-shadow-type: none; - -// box-shadow: 0 1px $borders_edge; - - - &:insensitive { - color: insensitive(b_color(text)); - text-shadow: none; - icon-shadow: none; - } - &:backdrop { - color: backdrop(b_color(text)); - text-shadow: none; - icon-shadow: none; - } - &:backdrop:insensitive { - color: backdrop(insensitive(b_color(text))); - } - .menuitem { text-shadow: none; } - .separator.vertical { - // always disable separators - -GtkWidget-wide-separators: true; - } - &.combobox-entry .entry { @extend %linked; } - &.combobox-entry .button, &.combobox-entry .button:backdrop { - // It is needed to specify the backdrop button or it gets overridden - @extend %linked; - } -} - -%needs_attention { - animation: needs_attention 150ms ease-in; - $_dot_shadow: b_color(text); - $_dot_shadow_r: 0.5; - background-image: -gtk-gradient(radial, - center center, 0, - center center, 0.5, - to($_dot_color), - to(transparent)), - -gtk-gradient(radial, - center center, 0, - center center, $_dot_shadow_r, - to($_dot_shadow), - to(transparent)); - background-size: 6px 6px, 6px 6px; - background-repeat: no-repeat; - background-position: right 3px, right 4px; - &:backdrop {background-size: 6px 6px, 0 0;} - &:dir(rtl) { - background-position: left 3px, left 4px; - } -} - -%linked_middle { - border-radius: $r; - &:dir(rtl) { - border-radius: $r; // needed when including %linked_middle:dir(rtl) - } -} - -%linked { - @extend %linked_middle; - &:first-child { - border-radius: $r; - border-style: solid; - } - &:last-child { - border-radius: $r; - &:dir(rtl) { } - } - &:only-child { - border-radius: $r; - border-style: solid; - } -} - -%linked_vertical_middle { - border-style: solid; - border-radius: $r; -} - -%linked_vertical{ - @extend %linked_vertical_middle; - &:first-child { - border-radius: $r; - } - &:last-child { - border-radius: $r; - border-style: solid; - } - &:only-child { - border-radius: $r; - border-style: solid; - } -} - -%undecorated_button { - border-color: transparent; - background-color: transparent; - background-image: none; - box-shadow:none; - text-shadow: none; - icon-shadow: none; -} diff --git a/src/gtk318/widgets/_calendar.scss b/src/gtk318/widgets/_calendar.scss deleted file mode 100644 --- a/src/gtk318/widgets/_calendar.scss +++ /dev/null @@ -1,66 +0,0 @@ -@charset "UTF-8"; - -/************ - * Calendar * - ***********/ -GtkCalendar { - color: v_color(text); - border: 1px solid $border_color; - background-color: v_color(normal); - &:selected { - background-color: $border_color; - } - &:insensitive { - color: insensitive(v_color(text)); - } - - &.header { - border: 1px solid $border_color; - border-radius: 0; - color: v_color(text); - - &:backdrop { - color: backdrop(v_color(text)); - border-color: backdrop($border_color); - } - - &:insensitive { - color: insensitive(v_color(text)); - } - } - - &.button { - @extend %undecorated_button; - color: b_color(text); - - &:hover { - @extend %undecorated_button; - color: b_color(hover); - } - &:active { - @extend %undecorated_button; - color: b_color(active); - } - &:backdrop { - @extend %undecorated_button; - color: backdrop(b_color(text)); - } - } - - &:inconsistent, - &.highlight { - color: transparentize(v_color(text),0.5); - } - - &:inconsistent:backdrop, - &.highlight:backdrop { - color: backdrop(transparentize(v_color(text),0.5)); - } - - - &:backdrop { - color: backdrop(v_color(text)); - border-color: backdrop($border_color); - background-color: backdrop(v_color(normal)); - } -} diff --git a/src/gtk318/widgets/_checkboxes.scss b/src/gtk318/widgets/_checkboxes.scss deleted file mode 100644 --- a/src/gtk318/widgets/_checkboxes.scss +++ /dev/null @@ -1,85 +0,0 @@ -@charset "UTF-8"; - -/************************* - * Check and Radio items * - *************************/ - -// draw regular check and radio items using our PNG assets -// all assets are rendered from assets.svg. never add pngs directly - -@each $w,$a in ('check', 'check'), - ('radio','radio') { - - //standard checks and radios - @each $s,$as in ('','-unchecked'), - (':hover', '-unchecked-hover'), - (':active', '-unchecked-active'), - (':insensitive','-unchecked-insensitive'), - (':backdrop', '-unchecked-backdrop'), - (':backdrop:insensitive', '-unchecked-backdrop-insensitive'), - (':inconsistent', '-mixed-active'), - (':inconsistent:hover', '-mixed-hover'), - (':inconsistent:selected', '-mixed-active'), - (':inconsistent:backdrop', '-mixed-backdrop'), - (':inconsistent:insensitive', '-mixed-insensitive'), - (':inconsistent:insensitive:backdrop', '-mixed-backdrop-insensitive'), - (':checked', '-checked-active'), - (':checked:insensitive','-checked-insensitive'), - (':checked:hover', '-checked-hover'), - (':checked:active', '-checked-active'), - (':backdrop:checked', '-checked-backdrop'), - (':backdrop:checked:insensitive', '-checked-backdrop-insensitive') { - .#{$w}#{$s} { - -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}#{$as}.png"), url("../assets/#{$a}#{$as}@2.png")); - icon-shadow: none; - } - } - @each $ms, $ma in ('', '-unchecked'), - (':active', '-checked-active'), - (':checked', '-checked-active'), - (':inconsistent','-mixed-active') { - - .menu .menuitem.#{$w}#{$ms}, - .popover .button.flat.#{$w}#{$ms} { - &:hover { - -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}#{$ma}.png"), url("../assets/#{$a}#{$ma}@2.png")); - } - } - } -} - -//treeview and list-rows -.view.check, .view.radio, -.list-row .check, list-row .radio { - icon-shadow: none; - &:selected, &:hover { icon-shadow: none; } -} - -//selection-mode -@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} { - icon-shadow: none; - -gtk-icon-source: -gtk-scaled(url("../assets/check-selectionmode#{$as}.png"), - url("../assets/check-selectionmode#{$as}@2.png")); - background-color: transparent; - } -} - -GtkCheckButton.text-button, GtkRadioButton.text-button { - // this is for a nice focus on check and radios text - padding: 1px 2px 4px; - outline-offset: 0; - &:insensitive, - &:insensitive:active, - &:insensitive:inconsistent { - color: insensitive(b_color(text)); - &:backdrop { color: backdrop(insensitive(b_color(text))); } - } -} diff --git a/src/gtk318/widgets/_color_chooser.scss b/src/gtk318/widgets/_color_chooser.scss deleted file mode 100644 --- a/src/gtk318/widgets/_color_chooser.scss +++ /dev/null @@ -1,98 +0,0 @@ -@charset "UTF-8"; - -/***************** - * Color Chooser * - *****************/ - -GtkColorSwatch { -// take care of colorswatches on selected elements - :selected & { - box-shadow: none; - &.overlay, &.overlay:hover { - border-color: s_color(text); - } - } - - &:selected { box-shadow: none; } - - &.top, - &.bottom, - &.left, &:first-child:not(.overlay):not(.top), - &.right, &:last-child:not(.overlay):not(.bottom), - &:only-child:not(.overlay), - &.top > .overlay, - &.bottom > .overlay, - &:first-child:not(.top) > .overlay, - &:last-child:not(.bottom) > .overlay, - &:only-child > .overlay { border-radius: $r; } - - // hover effect - &:hover, - &:hover:selected { - background-image: linear-gradient(135deg, transparentize(white, 0.3), - transparentize(white, 1) 50%); - box-shadow: inset 0 1px transparentize(white, 0.6); - &.color-dark { // swatches with colors with luminosity lower than 50% get the color-dark class - background-image: linear-gradient(135deg, transparentize(white, 0.5), - transparentize(white, 1) 50%); - } - } - &:backdrop, - &:backdrop:selected - &.color-dark:backdrop, - &.color-dark:backdrop:selected { - background-image: none; - box-shadow: none; - } - - // no hover effect for the colorswatch in the color editor - GtkColorEditor & { - border-radius: $r; // same radius as the entry - &:hover { - background-image: none; - box-shadow: none; - } - &:backdrop { box-shadow: none; } - } - - // indicator and keynav outline colors - &.color-dark { - color: white; - outline-color: transparentize(black, 0.7); - &:backdrop { color: transparentize(white, 0.7); } - } - &.color-light { - color: black; - outline-color: transparentize(white, 0.5); - &:backdrop { color: transparentize(black, 0.7); } - } - - // border color - &.overlay, - &.overlay:selected { - border: 1px solid $border_color; - &:hover { border-color: b_color(hover); } - } - - // make the add color button looks like, well, a button - &#add-color-button { - border-style: solid; // the borders are drawn by the overlay for standard colorswatches to have them semi - border-width: 1px; // translucent on the colored background, here it's not necessary so they need to be set - @include button(normal); - &:hover { @include button(hover); } - &:backdrop { @include button(backdrop); } - .overlay { @include button(undecorated); } // reset the overlay to not cover the button style underneat - } -} - -GtkColorButton.button { - padding: 5px; // Uniform padding on the GtkColorButton - - GtkColorSwatch:first-child:last-child { // :first-child:last-child for a specificity bump, it gets overridden by the - // colorpicker style, otherwise - border-radius: 0; - box-shadow: none; - &:insensitive, - &:backdrop { box-shadow: none; } - } -} diff --git a/src/gtk318/widgets/_dialogs.scss b/src/gtk318/widgets/_dialogs.scss deleted file mode 100644 --- a/src/gtk318/widgets/_dialogs.scss +++ /dev/null @@ -1,36 +0,0 @@ -@charset "UTF-8"; - -/*********** - * Dialogs * - ***********/ - -// .message-dialog .dialog-action-area .button { -// //padding: 8px; -// } - -.message-dialog { // Message Dialog styling - -GtkDialog-button-spacing: 8; - -GtkDialog-action-area-border: 8; - &.background { background-color: w_color(normal); } - &:backdrop { background-color: backdrop(w_color(normal))} - .titlebar { - box-shadow: none; - } -} - -GtkFileChooserDialog { - .search-bar { - background-color: w_color(normal); - border-color: w_color(normal); - box-shadow: none; - &:backdrop { - background-color: backdrop(w_color(normal)); - border-color: backdrop(w_color(normal)); - color: backdrop(w_color(text)); - } - } - .dialog-action-box { - border-top: 1px solid $border_color; - &:backdrop { border-top-color: backdrop($border_color); } - } -} diff --git a/src/gtk318/widgets/_entry.scss b/src/gtk318/widgets/_entry.scss deleted file mode 100644 --- a/src/gtk318/widgets/_entry.scss +++ /dev/null @@ -1,119 +0,0 @@ -@charset "UTF-8"; - -@mixin entry($t, $fc:v_color(active)) { -// -// Entries drawing function -// -// $t: entry type -// $fc: focus color -// $edge: set to none to not draw the bottom edge or specify a color to not -// use the default one -// -// possible $t values: -// normal, focus, insensitive, backdrop, backdrop-insensitive, osd, osd-focus, osd-backdrop; -// - @if $t==normal { - color: v_color(text); - border-color: $border_color; - background-color: v_color(normal); - box-shadow: none; - } - - @if $t==focus { - border-color: $fc; - } - - @if $t==insensitive { - color: insensitive(v_color(text)); - border-color: insensitive($border_color); - background-color: insensitive(v_color(normal)); - } - - @if $t==backdrop { - color: backdrop(v_color(text)); - border-color: backdrop($border_color); - background-color: backdrop(v_color(normal)); - } - - @if $t==backdrop-insensitive { - color: backdrop(insensitive(v_color(text))); - border-color: backdrop(insensitive($border_color)); - background-color: backdrop(insensitive(v_color(normal))); - } -} - -/**************** - * Text Entries * - ****************/ - -.entry { - border: 1px solid; - padding: 5px 8px 5px; - - &.image { // icons inside the entry - &.left { padding-left: 0; } - &.right { padding-right: 0; } - } - - border-radius: $r; - transition: all 200ms $ease-out-quad; - @include entry(normal); - - &.flat, &.flat:focus { - padding: 2px; - @include entry(normal); - border: none; - border-radius: 0; - } - - &:focus { @include entry(focus); } - &:insensitive { @include entry(insensitive); } - &:backdrop { @include entry(backdrop); } - &:backdrop:insensitive { @include entry(backdrop-insensitive); } - - &:selected, - &:selected:focus { - @extend %selected_items; - } - - &.progressbar { - margin: 1px; - border-radius: 0; - border-width: 0 0 2px; - border-color: s_color(normal); - border-style: solid; - background-image: none; - background-color: transparent; - box-shadow: none; - &:backdrop { - background-color: transparent; - border-color: backdrop(s_color(backdrop)); - } - } - - @each $e_type, $e_color in (error, $error_color), - (warning, $warning_color) { - &.#{$e_type} { - color: $e_color; - border-color: $e_color; - background-color: transparentize($e_color, 0.5); - &:focus { - @include entry(focus, $e_color); - background-color: transparentize($e_color, 0.5); - } - &:selected, &:selected:focus { background-color: $e_color; } - &:backdrop { - color: backdrop($e_color); - border-color: backdrop($e_color); - background-color: backdrop(transparentize($e_color, 0.5)); - } - } - } - - &.image { // entry icons colors - color: mix(w_color(text),v_color(text), 80%); - &:hover { color: b_color(hover); } - &:active { color: b_color(active); } - &:backdrop { color: backdrop(mix(w_color(text), v_color(text), 80%)); } - } -} diff --git a/src/gtk318/widgets/_headerbar.scss b/src/gtk318/widgets/_headerbar.scss deleted file mode 100644 --- a/src/gtk318/widgets/_headerbar.scss +++ /dev/null @@ -1,159 +0,0 @@ -@charset "UTF-8"; - -/*************** - * Header bars * - ***************/ - -.titlebar, -.header-bar { - transition: none; - padding: 4px 6px; - border-width: 0px 0px 1px 0px; - border-radius: 3px 3px 0px 0px; - border-style: solid; - border-color: $border_color; - color: t_color(text); - background-image: linear-gradient(to bottom,t_color(background-light),t_color(background)); - &:backdrop { - border-color: transparent; - background-image: none; - background-color: t_color(backdrop-background); - color: t_color(backdrop-text); - box-shadow: none; - } -.path-bar .button { - color: t_color(text); - } -.button { - transition: none; - @include button(undecorated, $tc: t_color(text)); - - &.flat { - @include button(undecorated,$tc: t_color(text)); - } - &:hover { - @include button(hover, $tc: t_color(text)); - &:backdrop { border-color: t_color(backdrop-background); } - } - &:active, &:checked { - @include button(active); - &:hover { - @include button(active-hover); - } - &:backdrop { - background-image: none; - background-color: t_color(backdrop-background); - border-color: t_color(backdrop-background); - color: t_color(backdrop-text); - } - } - - &.suggested-action { - @extend %suggested-action; - } - - &:backdrop { - background-color: t_color(backdrop-background); - color: t_color(backdrop-text); - } - - &.flat:backdrop, &.flat:backdrop:insensitive, &:insensitive:backdrop { - background-image: none; - background-color: t_color(backdrop-background); - color: t_color(backdrop-text); - border-color: transparent; - } - &.flat:insensitive { - @extend %undecorated_button;; - color: insensitive(t_color(text)); - } - &:insensitive { - background-color: transparent; - background-image: none; - color: insensitive(t_color(text)); - &:active, &:checked { - @include button(insensitive-active); - } - } -} - - .title { - font-weight: normal; - padding: 0px 12px; - } - - .subtitle { - font-size: smaller; - padding: 0 12px; - @extend .dim-label; - } - - .header-bar-separator, - & > GtkBox > .separator.vertical { - -GtkWidget-wide-separators: true; - -GtkWidget-separator-width: 1px; - border-width: 0px; - background-color: t_color(background); - border-color: t_color(background); - &:backdrop { - background-color: t_color(backdrop-background); - border-color: t_color(backdrop-background); - } - } - &.selection-mode { - - @extend .info; - - &.suggested-action { - @extend %suggested-action; - } - - .subtitle:link { @extend *:link:selected; } - - .selection-menu { - padding-left: 10px; - padding-right: 10px; - - GtkArrow { -GtkArrow-arrow-scaling: 1; } - - .arrow { - -gtk-icon-source: -gtk-icontheme('arrow-down'); - icon-shadow: none; - } - } - } - - .tiled &, .maximized & { - border-radius: 0; // squared corners when the window is max'd or tiled - } - - &.default-decoration { - padding: 4px; - .button { padding: 5px; } - } -} - -%suggested-action { - background-image: none; - background-color: b_color(active); - &:hover { - background-color: b_color(hover); - color: b_color(text) - } - &:insensitive { - background-color: transparent; - background-image: none; - color: insensitive(t_color(text)); - &:active, &:checked { - @include button(insensitive-active); - } - } - &:backdrop { - background-color: t_color(backdrop-background); - border-color: transparent; - color: t_color(backdrop-text); - &:insensitive { - color: insensitive(t_color(backdrop-text)); - } - } -} diff --git a/src/gtk318/widgets/_infobar.scss b/src/gtk318/widgets/_infobar.scss deleted file mode 100644 --- a/src/gtk318/widgets/_infobar.scss +++ /dev/null @@ -1,68 +0,0 @@ -@charset "UTF-8"; - -/************** - * GtkInfoBar * - **************/ -GtkInfoBar { - border-style: none; - border-bottom: 1px solid $border_color; - background-color: w_color(normal); - background-image: none; - &:backdrop {border-bottom: 1px solid backdrop($border_color);} -} - -.info, -.question, -.warning, -.error { - background-color: w_color(normal); - background-image: none; - color: $warning_color; - text-shadow: none; - &:backdrop { - background-color: backdrop(w_color(normal)); - color: backdrop($warning_color); - } - .button { - box-shadow: none; - background-image:none; - background-color: transparentize($warning_color, 0.5); - border-color: transparentize($warning_color, 0.5); - color: b_color(text); - &:hover { - background-color: transparentize($warning_color, 0.75); - border-color: $warning_color; - } - &:active, &:checked { - background-image: button_gradient($warning_color); - color: w_color(normal); - border-color: $warning_color; - } - &:insensitive { - background-color: insensitive(transparentize($warning_color, 0.5)); - border-color: insensitive(transparentize($warning_color, 0.5)); - color: insensitive(b_color(text)); - } - &:backdrop { - background-color: backdrop(transparentize($warning_color, 0.5)); - border-color: backdrop(transparentize($warning_color, 0.5)); - color: backdrop(b_color(text)); - &:active, &:checked { - background-image: button_gradient(backdrop($warning_color)); - color: backdrop(w_color(normal)); - border-color: backdrop($warning_color); - } - &:insensitive { - background-color: backdrop(insensitive(transparentize($warning_color, 0.5))); - border-color: backdrop(insensitive(transparentize($warning_color, 0.5))); - color: backdrop(insensitive(b_color(text))); - } - &:insensitive:active, - &:insensitive:checked { - background-image: button_gradient(backdrop(insensitive($warning_color))); - color: backdrop(insensitive(w_color(normal))); - border-color: backdrop(insensitive($warning_color)); - } - } - } -} diff --git a/src/gtk318/widgets/_link.scss b/src/gtk318/widgets/_link.scss deleted file mode 100644 --- a/src/gtk318/widgets/_link.scss +++ /dev/null @@ -1,42 +0,0 @@ -@charset "UTF-8"; - -/********* - * Links * - *********/ - -*:link { - color: $link_color; - &:visited { - color: $link_visited_color; - *:selected & { color: mix(s_color(text), s_color(normal), 60%); } - } - &:hover { - color: lighten($link_color,10%); - *:selected & { color: mix(s_color(text), s_color(normal), 90%); } - } - &:active { - color: $link_color; - *:selected & { color: mix(s_color(text), s_color(normal), 80%); } - } - &:backdrop, &:backdrop:hover, &:backdrop:hover:selected { - color: backdrop(s_color(backdrop)); - } - &:selected, *:selected & { - color: mix(s_color(text), s_color(normal), 80%); - } -} - -.button:link, .button:visited { - @extend %undecorated_button; - @extend *:link; - text-shadow: none; - &:hover, &:active, &:checked { - @extend %undecorated_button; - text-shadow: none; - } - &:backdrop { - @extend %undecorated_button; //This shouldn't be needed but avoids - //a weird transition which for some reason - //makes borders blink on hover - } -} diff --git a/src/gtk318/widgets/_lists.scss b/src/gtk318/widgets/_lists.scss deleted file mode 100644 --- a/src/gtk318/widgets/_lists.scss +++ /dev/null @@ -1,106 +0,0 @@ -@charset "UTF-8"; - -/********* - * Lists * - *********/ - -.list, .list-row { - background-color: w_color(normal); - color: w_color(text); - border-width: 0px; - &:backdrop { - background-color: backdrop(w_color(normal)); - color: backdrop(w_color(text)); - } -} - -.list-row, -.grid-child { - padding: 0px 2px; - border-style: solid; - border-width: 0px; - border-color: w_color(normal); -} - -.list-row.button, -.list-row.button:backdrop, -.list-row.button:backdrop:active, -.list-row.button:backdrop:checked, -.list-row.button:backdrop:insensitive, -.list-row.button:backdrop:insensitive:active, -.list-row.button:backdrop:insensitive:checked, -.list-row.button:insensitive:active, -.list-row.button:insensitive:checked { - // reset button inherited stuff - @extend %undecorated_button; - background-color: transparentize(v_color(normal),1); // for the transition - border-style: none; // I need no borders here - border-radius: 0; // and no rounded corners - box-shadow: none; // and no box-shadow - -} - -.list-row.button { - background-color: w_color(normal); - &:hover { - background-color: transparentize(b_color(hover), 0.75); - } - &:active { - background-color: s_color(normal); - box-shadow: none; - } - &:selected { - &:active { box-shadow: none; } - background-color: s_color(normal); - &:hover { - @include button(active-hover); - } - &:backdrop { - background-color: backdrop(s_color(backdrop)); - } - } - &:backdrop { background-color: backdrop(w_color(normal));} -} - -.list-row:selected { - @extend %selected_items; - .button { - @include button(normal); - &.flat { - @include button(undecorated); - } - &:hover { - @include button(hover); - } - &:active, &:checked { - @include button(active); - } - &:backdrop, &.flat:backdrop { - @include button(backdrop); - &:active, &:checked { - @include button(backdrop-active); - } - &:insensitive { - @include button(backdrop-insensitive); - &:active, &:checked { - @include button(backdrop-insensitive-active); - } - } - } - &.flat:backdrop { - background-color: backdrop(w_color(normal)); - color: backdrop(w_color(text)); - border-color: transparent; - } - &:insensitive { - @include button(insensitive); - &:active, &:checked { @include button(insensitive-active); } - } - } -} - -// transition -.list-row, list-row.button { - transition: all 300ms $ease-out-quad; - &:hover { transition: none; } -} diff --git a/src/gtk318/widgets/_menus.scss b/src/gtk318/widgets/_menus.scss deleted file mode 100644 --- a/src/gtk318/widgets/_menus.scss +++ /dev/null @@ -1,160 +0,0 @@ -@charset "UTF-8"; - -/********* - * Menus * - *********/ - /* menu buttons */ - .menuitem.button.flat { - @extend %undecorated_button; - color: w_color(text); - &:hover { background-color: b_color(hover); } - &:selected { - background-color: b_color(active); - color: b_color(active-text) - } - &:backdrop, &:backdrop:hover { - @extend %undecorated_button; - color: backdrop(w_color(text)); - } - } - -.menubar { - -GtkWidget-window-dragging: true; - padding: 0px; - box-shadow: none; - background-color: w_color(normal); - &:backdrop { - background-color: backdrop(w_color(normal)); - } - & > .menuitem { - padding: 6px 8px; - &:hover { //Seems like it :hover even with keyboard focus - background-color: b_color(active); - color: b_color(active-text); - } - &:insensitive { - 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 { - padding: 0px; - background-color: $menu_color; - border: 1px solid $border_color; // adds borders in a non composited env - border-radius: $r; - .csd & { border: 1px solid $border_color; } // axes borders in a composited env - .separator {color: $border_color;} - .menuitem { - text-shadow: none; - padding: 4px 4px; - &:hover { - color: b_color(active-text); - background-color: b_color(active); - } - &:insensitive { - 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 { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');} - &.arrow:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } - } -} - -.menuitem .accelerator { color: gtkalpha(currentColor,0.5); } -/*************** - * Popovers * - ***************/ - -.popover { - margin: 10px; - padding: 0px; - border: 1px solid $border_color; - border-radius: 3px; - background-color: $menu_color; - - box-shadow: 0 2px 3px transparentize(black, 0.2); - - &:backdrop { - box-shadow: none; - } - - > .list, - > .view, - > .toolbar, - &.osd > .toolbar { - border-style: none; - background-color: transparent; - } - .button.flat { - border-radius: 0px; - color: w_color(text); - .label { padding: 4px 0px; } - &:hover, - &:checked:hover { - background-image: none; - background-color: b_color(active); - color: b_color(active-text); - transition: none; - } - - &:backdrop { - background-color: transparent; - color: backdrop(w_color(text)); - } - } - - &.osd { @extend %osd; } - -} - -//touch selection handlebars for the Popover.osd above -.entry.cursor-handle, -.cursor-handle { - background-color: transparent; - background-image: none; - box-shadow: none; - border-style: none; - &.top { -gtk-icon-source: -gtk-icontheme('selection-start-symbolic'); } - &.bottom { -gtk-icon-source: -gtk-icontheme('selection-end-symbolic'); } -} - -.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; } diff --git a/src/gtk318/widgets/_misc.scss b/src/gtk318/widgets/_misc.scss deleted file mode 100644 --- a/src/gtk318/widgets/_misc.scss +++ /dev/null @@ -1,112 +0,0 @@ -@charset "UTF-8"; - -/******** - * Misc * - ********/ - -/********** -* Frames * -**********/ -.frame { - border: 1px solid $border_color; - &.flat { border-style: none; } - padding: 0; - &.action-bar { - padding: 6px; - border-width: 1px 0 0; - &:backdrop {border-color: backdrop($border_color);} - } - &:backdrop {border-color: backdrop($border_color);} -} - -GtkScrolledWindow { - GtkViewport.frame { // avoid double borders when viewport inside - // scrolled window - border-style: none; - } -} - -//vbox and hbox separators -.separator { - // always disable separators - //-GtkWidget-wide-separators: true; - color: transparent; -&.vertical { - color: $border_color; - &:backdrop { color: backdrop($border_color); } - } - // Font and File button separators - GtkFileChooserButton &.vertical, - GtkFontButton &.vertical { - // always disable separators - -GtkWidget-wide-separators: true; - } -} - -/************* -* Expanders * -*************/ - -.expander { - -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); - &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } - &:hover { color: lighten(w_color(text),30%); } //only lightens the arrow - &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } -} - -/********* -* Paned * -*********/ - -GtkPaned { // this is for the standard paned separator - - -GtkPaned-handle-size: 1; // sets separator width - - -gtk-icon-source: none; // removes handle decoration - margin: 0 8px 8px 0; // drag area of the separator, not a real margin - &:dir(rtl) { - margin-right: 0; - margin-left: 8px; - } - .pane-separator { - background-color: $border_color; - &:backdrop { - background-color: backdrop($border_color); - } - } -} - -GtkPaned.wide { // this is for the paned with wide separator - -GtkPaned-handle-size: 5; // wider separator here - margin: 0; // no need of the invisible drag area so, reset margin - .pane-separator { - background-color: transparent; - border-style: none; - // border-color: $borders_color; - // border-width: 1px; - } - &.vertical .pane-separator { border-style: none;} - .pane-separator:backdrop { border-color: transparent; } -} - -/********************* -* Spinner Animation * -*********************/ - -@keyframes spin { - to { -gtk-icon-transform: rotate(1turn); } -} - -.spinner { - background-image: none; - background-color: blue; - opacity: 0; // non spinning spinner makes no sense - -gtk-icon-source: -gtk-icontheme('process-working-symbolic'); - &:active { - opacity: 1; - animation: spin 1s linear infinite; - &:insensitive { - opacity: 0.5; - } - } -} diff --git a/src/gtk318/widgets/_notebook.scss b/src/gtk318/widgets/_notebook.scss deleted file mode 100644 --- a/src/gtk318/widgets/_notebook.scss +++ /dev/null @@ -1,193 +0,0 @@ -@charset "UTF-8"; - -/***************** - * Notebooks and * - * Tabs * - *****************/ - -.notebook { - // Through me you go to the grief wracked city; - // Through me you go to everlasting pain; - // Through me you go a pass among lost souls. - // ... - // Abandon all hope — Ye Who Enter Here - - -GtkNotebook-initial-gap: 0; - -GtkNotebook-arrow-spacing: 5; - -GtkNotebook-tab-curvature: 0; - -GtkNotebook-tab-overlap: 1; - -GtkNotebook-has-tab-gap: false; - -GtkWidget-focus-padding: 0; - -GtkWidget-focus-line-width: 0; - transition: all 200ms $ease-out-quad; - background-color: $menu_color; - &:backdrop {background-color: backdrop($menu_color)} - - &.frame { - border: 1px solid $border_color; - // FIXME doesn't work - &.top { border-top-width: 0; } - &.bottom { border-bottom-width: 0; } - &.right { border-right-width: 0; } - &.left { border-left-width: 0; } - &:backdrop { border-color: backdrop($border_color); } - } - &.header { - background-color: w_color(normal); - padding-top: 4px; - - //this is the shading of the header behind the tabs - &.frame { - border-style: none; - } - &.top { - box-shadow: inset 0 -1px $border_color; // border - &:backdrop { box-shadow: inset 0 -1px backdrop($border_color); } - } - &.bottom { - box-shadow: inset 0 1px $border_color; - &:backdrop { box-shadow: inset 0 1px backdrop($border_color); } - } - &.right { - box-shadow: inset 1px 0 $border_color; - &:backdrop { box-shadow: inset 1px 0 backdrop($border_color); } - } - &.left { - box-shadow: inset -1px 0 $border_color; - &:backdrop { box-shadow: inset -1px 0 backdrop($border_color); } - } - &:backdrop { - background-color: backdrop(w_color(normal)); - } - } - - tab { - border: 1px solid transparentize(w_color(text), 0.8); - background-color: transparentize(w_color(text), 0.8); - background-clip: padding-box; - &:backdrop {background-color: backdrop(transparentize(w_color(text), 0.8));} - //FIXME: we get double border in some cases, not considering the broken - //notebook content frame... - padding: 8px; - &.reorderable-page { - background-color: w_color(normal); - &.top, &.bottom { - padding-left: 12px; // for a nicer close button - padding-right: 6px; // placement - padding-bottom: 8px; - } - } - - @each $_tab, $_border, $_radius in (top,bottom,3px 3px 0px 0px), - (bottom,top,0px 0px 3px 3px), - (left,right, 3px 0px 0px 3px), - (right,left, 0px 3px 3px 0px) { - &.#{$_tab} { - border-radius: #{$_radius}; - border-#{$_border}-color: transparent; - &:active, &.active-page { - border-color: $border_color; - border-#{$_border}-color: $menu_color; - background-color: $menu_color; - &:backdrop { - border-color: backdrop($border_color); - border-#{$_border}-color: backdrop($menu_color); - background-color: backdrop($menu_color); - } - } - } - } - - //here's the interesting stuff - &:hover, &.prelight-page { - background-color: transparentize(s_color(normal), 0.8); - border-color: transparentize(s_color(normal), 0.8); - } - - @each $_tab, $_border, $_shadow1 in (top, right, -3px 0px 0px 0px), - (bottom, right, -3px 0px 0px 0px), - (left, bottom, 0px -3px 0px 0px), - (right, bottom, 0px -3px 0px 0px) { - &.reorderable-page.#{$_tab} { - border-width: 3px; - border-style: solid; - border-color: transparent; - background-color: w_color(normal); - background-clip: padding-box; - border-#{$_border}-width: 1px; - border-#{$_border}-color: $border_color; - box-shadow: inset #{$_shadow1} w_color(normal); - &:hover, &.prelight-page { - box-shadow: inset 0px -3px 0px 0px transparentize(s_color(normal),0.8), inset $_shadow1 w_color(normal); - } - &:active, &.active-page { - box-shadow: inset 0px -3px 0px 0px s_color(normal), inset $_shadow1 w_color(normal); - &:backdrop { - background-color: backdrop(w_color(normal)); - border-color: transparent; - border-#{$_border}-color: backdrop($border_color); - box-shadow:none; - } - } - &:backdrop { - background-color: backdrop(w_color(normal)); - border-#{$_border}-color: backdrop($border_color); - box-shadow:none; - } - } - } - .label { //tab text - padding: 0 2px; // needed for a nicer focus ring - color: w_color(text); - &:backdrop { color: backdrop(w_color(text)); } - &:insensitive { color: insensitive(w_color(text)); } - } - .button { //tab close button - padding: 0px; - border: 1px solid transparent; - border-radius: 50%; - background-image: none; - background-color: $border_color; - box-shadow: none; - icon-shadow: none; - transition: none; - color: w_color(normal); - &:hover { - background-color: $error_color; - border-color: transparent; - background-image: none; - box-shadow: none; - } - &:active { - color: w_color(normal); - border-color: transparent; - background-image: none; - box-shadow: none; - } - &:backdrop { - color: backdrop(w_color(normal)); - background-color: backdrop($border_color); - } - & > GtkImage { - padding: 0px; - } - } - .button .active-page, .button.active-page { //not working - background-color: $error_color; - } - } - &.arrow { - color: w_color(text); - &:hover { 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))); - } - } - } -} diff --git a/src/gtk318/widgets/_overshoot.scss b/src/gtk318/widgets/_overshoot.scss deleted file mode 100644 --- a/src/gtk318/widgets/_overshoot.scss +++ /dev/null @@ -1,111 +0,0 @@ -@charset "UTF-8"; - -@mixin overshoot($p, $t:normal, $c:w_color(text)) { -// -// overshoot -// -// $p: position -// $t: type -// $c: base color -// -// possible $p values: -// top, bottom, right, left -// -// possible $t values: -// normal, backdrop -// - - $_small_gradient_length: 5%; - $_big_gradient_length: 100%; - - $_position: center top; - $_small_gradient_size: 100% $_small_gradient_length; - $_big_gradient_size: 100% $_big_gradient_length; - - @if $p==bottom { - $_position: center bottom; - $_linear_gradient_direction: to top; - } - - @else if $p==right { - $_position: right center; - $_small_gradient_size: $_small_gradient_length 100%; - $_big_gradient_size: $_big_gradient_length 100%; - } - - @else if $p==left { - $_position: left center; - $_small_gradient_size: $_small_gradient_length 100%; - $_big_gradient_size: $_big_gradient_length 100%; - } - - $_small_gradient_color: $c; - $_big_gradient_color: $c; - - @if $c==w_color(text) { - $_small_gradient_color: darken($border_color, 10%); - $_big_gradient_color: w_color(text); - - @if $t==backdrop { $_small_gradient_color: backdrop($border_color); } - } - - $_small_gradient: -gtk-gradient(radial, - $_position, 0, - $_position, 0.5, - to($_small_gradient_color), - to(transparentize($_small_gradient_color, 1))); - - $_big_gradient: -gtk-gradient(radial, - $_position, 0, - $_position, 0.6, - from(transparentize($_big_gradient_color, 0.93)), - to(transparentize($_big_gradient_color, 1))); - - @if $t==normal { - background-image: $_small_gradient, $_big_gradient; - background-size: $_small_gradient_size, $_big_gradient_size; - } - - @else if $t==backdrop { - background-image: $_small_gradient; - background-size: $_small_gradient_size; - } - - background-repeat: no-repeat; - background-position: $_position; - - background-color: transparent; // reset some properties to be sure to not inherit them somehow - border: none; // - box-shadow: none; // -} - -/* Decouple the font of context menus from their entry/textview */ -.touch-selection, -.context-menu { - font: initial; -} - -.monospace { - font: Monospace; -} - -// This is used by GtkScrolledWindow, when content is touch-dragged past boundaries. -// This draws a box on top of the content, the size changes programmatically. -.overshoot { - &.top { - @include overshoot(top); - &:backdrop { @include overshoot(top, backdrop); } - } - &.bottom { - @include overshoot(bottom); - &:backdrop { @include overshoot(bottom, backdrop); } - } - &.left { - @include overshoot(left); - &:backdrop { @include overshoot(left, backdrop); } - } - &.right { - @include overshoot(right); - &:backdrop { @include overshoot(right, backdrop); } - } -} diff --git a/src/gtk318/widgets/_pathbar.scss b/src/gtk318/widgets/_pathbar.scss deleted file mode 100644 --- a/src/gtk318/widgets/_pathbar.scss +++ /dev/null @@ -1,27 +0,0 @@ -@charset "UTF-8"; - -/************ - * Pathbars * - ************/ - -.path-bar .button { - @include button(undecorated); - padding: 4px 8px; - color: w_color(text); - &:hover {border-color: b_color(hover); } - &:active, &:checked { - background-color: $border_color; - } - &:first-child { padding-left: 8px; } - &:last-child { padding-right: 8px; } - &:only-child { - padding-left: 12px; - padding-right: 12px; - } - - // the following is for spacing the icon and the label inside the home button - .label:last-child { padding-left: 2px; } - .label:first-child { padding-right: 2px; } - .label:only-child { padding-right: 0; padding-left: 0; } - GtkImage { padding-top: 1px; } -} diff --git a/src/gtk318/widgets/_progressbar.scss b/src/gtk318/widgets/_progressbar.scss deleted file mode 100644 --- a/src/gtk318/widgets/_progressbar.scss +++ /dev/null @@ -1,144 +0,0 @@ -@charset "UTF-8"; - -/***************** - * Progress bars * - *****************/ - -GtkProgressBar { - padding: 0; - font-size: smaller; - color: transparentize(b_color(text),0.7); - box-shadow: none; // here ot it gets - &:backdrop { color: backdrop(transparentize(b_color(text),0.7))} // clipped - - &.osd { - -GtkProgressBar-xspacing: 0; - -GtkProgressBar-yspacing: 0; - -GtkProgressBar-min-horizontal-bar-height: 3; - } - &.trough { // background - border: 1px solid transparent; - border-radius: $r; - background-color: transparentize(b_color(text),0.7); - &.osd { - border: 1px solid transparent; - border-radius: $r; - background-color: transparentize(b_color(text),0.7); - &:backdrop { - background-color: backdrop(transparentize(b_color(text),0.7)); - } - } - &:backdrop { - background-color: backdrop(transparentize(b_color(text),0.7)); - } - } -} - -// moving bit -.progressbar { - background-color: s_color(normal); - border: 1px solid s_color(normal); - border-radius: 0px; - box-shadow: none; //needed for clipping - &.left { - border-top-left-radius: $r; - border-bottom-left-radius: $r; - } - &.right { - border-top-right-radius: $r; - border-bottom-right-radius: $r; - } - &.left.right { - box-shadow: none; - } - &.vertical { - - &.bottom { - border-bottom-left-radius: $r; - border-bottom-right-radius: $r; - box-shadow: none; - } - &.top { - border-top-left-radius: $r; - border-top-right-radius: $r; - } - } - - &.osd { - background-image: none; - background-color: s_color(normal); - border: 1px solid s_color(normal); - border-radius: $r; - &:backdrop { - background-color: backdrop(s_color(backdrop)); - border-color: backdrop(s_color(backdrop)); - } - } - &:backdrop { - background-color: backdrop(s_color(backdrop)); - border-color: backdrop(s_color(backdrop)); - } -} - -/************* - * Level Bar * - *************/ - -.level-bar.vertical { - -GtkLevelBar-min-block-width: 6; - -GtkLevelBar-min-block-height: 34; -} - -.level-bar { - box-shadow: none; // needs to be set here to avoid clipping - -GtkLevelBar-min-block-width: 34; - -GtkLevelBar-min-block-height: 6; - &.vertical { - -GtkLevelBar-min-block-width: 6; - -GtkLevelBar-min-block-height: 34; - } - &.trough { - border: 1px solid transparent; - padding: 3px; - border-radius: $r; - background-color: transparent;; - } - &.fill-block { - // FIXME: it would be nice to set make fill blocks bigger, but we'd need - // :nth-child working on discrete indicators - border: 1px solid s_color(normal); - background-color: s_color(normal); - box-shadow: none; - border-radius: $r; - - &.indicator-discrete { - &.horizontal { margin: 0 1px; } - &.vertical { margin: 1px 0; } - } - &.level-high { - border-color: $success_color; - background-color: $success_color; - &:backdrop { - background-color: backdrop($success_color); - border-color: backdrop($success_color); - } - } - &.level-low { - border-color: $warning_color; - background-color: $warning_color; - &:backdrop { - background-color: backdrop($warning_color); - border-color: backdrop($warning_color); - }; - } - &.empty-fill-block { - background-color: transparentize(b_color(text),0.7); - border-color: transparent; - box-shadow: none; - } - &:backdrop { - border-color: backdrop(s_color(backdrop)); - background-color: backdrop(s_color(backdrop)); - } - } -} diff --git a/src/gtk318/widgets/_scale.scss b/src/gtk318/widgets/_scale.scss deleted file mode 100644 --- a/src/gtk318/widgets/_scale.scss +++ /dev/null @@ -1,89 +0,0 @@ -@charset "UTF-8"; - -/************ - * GtkScale * - ************/ -.scale, -.scale.scale-has-marks-above.scale-has-marks-below, -.scale.vertical.scale-has-marks-above.scale-has-marks-below { - -GtkScale-slider-length: 18; - -GtkRange-slider-width: 18; - -GtkRange-trough-border: 2; - - &.fine-tune { - &.trough { - margin: 8px; - border-radius: $r; - } - } - - &.slider { - background-color: b_color(normal); - border: 1px solid $border_color; - border-radius: 50%; - box-shadow: none; - &:hover { - border-style: solid; - border-width: 2px; - border-color: b_color(hover); - border-radius: 50%; // needed for double marks scales - &:backdrop { - background-color: backdrop(b_color(normal)); - border-color: backdrop(b_color(hover)); - } - } - &:insensitive { - border-style: solid; // needed for double marks scales or they'll get - border-radius: 50%; // overridden - background-color: insensitive(b_color(normal)); - border-color: insensitive($border_color); - &:backdrop { - background-color: backdrop(insensitive(b_color(normal))); - border-color: backdrop(insensitive($border_color)); - } - } - &:active { - border: 2px solid b_color(active); - &:backdrop { - background-color: backdrop(b_color(normal)); - border-color: backdrop(b_color(active)); - } - } - &:backdrop { - background-color: backdrop(b_color(normal)); - border-color: backdrop($border_color); - } - } - &.trough { - margin: 9px; - border: 1px solid transparentize(b_color(text),0.7); - border-radius: $r; - background-color: transparentize(b_color(text),0.7); - box-shadow: none; - &.highlight { - background-color: s_color(normal); - border-color: s_color(normal); - &.vertical { - background-color: s_color(normal); - border-color: s_color(normal); - } - &:backdrop { - background-color: backdrop(s_color(backdrop)); - border-color: backdrop(s_color(backdrop)); - } - } - &:insensitive, &.vertical:insensitive { - border-color: mix(insensitive(b_color(text)), w_color(normal), 70%); - background-color: mix(insensitive(b_color(text)), w_color(normal), 70%); - box-shadow: none; - &:backdrop { - background-color: mix(backdrop(insensitive(b_color(text))), w_color(normal), 70%); - border-color: mix(backdrop(insensitive(b_color(text))), w_color(normal), 70%); - } - } - &:backdrop { - background-color: backdrop(transparentize(b_color(text),0.7)); - border-color: backdrop(transparentize(b_color(text),0.7)); - } - } -} diff --git a/src/gtk318/widgets/_scrollbar.scss b/src/gtk318/widgets/_scrollbar.scss deleted file mode 100644 --- a/src/gtk318/widgets/_scrollbar.scss +++ /dev/null @@ -1,93 +0,0 @@ -@charset "UTF-8"; - -@mixin _border($name, $width: 1px 1px 2px 1px, $image-width: 2 2 3 2 / 2px 2px 3px 2px) { - border-image: -gtk-scaled(url("../assets/#{$name}.png"),url("../assets/#{$name}@2.png")) $image-width stretch; - border-width: $width; - border-style: solid; - border-color: transparent; -} - -$scrollbar_color: transparentize(v_color(text),0.5); -$trough_color: transparentize(w_color(text),0.7); - -/************** - * Scrollbars * - **************/ - -.scrollbar { - -GtkRange-trough-border: 0; - -GtkScrollbar-has-backward-stepper: false; - -GtkScrollbar-has-forward-stepper: false; - -GtkRange-slider-width: 10px; - -GtkScrollbar-min-slider-length: 64; - -GtkRange-stepper-spacing: 0; - -GtkRange-trough-under-steppers: 1; - - .button { - @extend %undecorated_button; - color: b_color(text); - &:hover { - @extend %undecorated_button; - color: b_color(hover); - } - &:insensitive { color: insensitive(b_color(text)); } - &:backdrop { - @extend %undecorated_button; - color: backdrop(b_color(text)); - &:insensitive {color: backdrop(insensitive(b_color(text)));} - @extend %undecorated_button; - } - } - - // Overlay Scrollbars - &.dragging, // if this isn't set, the scrollbars don't update their size correctly - &.hovering { opacity: 0.9910; } // probably a gtk bug - &.overlay-indicator:not(.dragging):not(.hovering) { opacity: 0.999; } // - - - &.overlay-indicator:not(.dragging):not(.hovering) { - -GtkRange-slider-width: 10px; - -GtkScrollbar-has-backward-stepper: false; - -GtkScrollbar-has-forward-stepper: false; - - .slider { - margin: 2px; - border: 5px solid transparent; - border-radius: 8px; - background-color: $scrollbar_color; - &:backdrop { background-color: backdrop($scrollbar_color); } - } - - .trough { - border: none; - background: none; - } - } - - &.trough { - margin: 2px; - border: 5px solid transparent; - border-radius: 8px; - background-color: transparent; - &:backdrop { background-color: backdrop($trough_color); } - } - &.slider { - margin: 2px; - border: 5px solid transparent; - border-radius: 8px; - background-color: $scrollbar_color; - &:hover { background-color: b_color(hover); } - &:active { background-color: b_color(active);} - &:insensitive { background-color: insensitive($scrollbar_color); } - &:backdrop { background-color: backdrop($trough_color); } - &:backdrop:insensitive { background-color: backdrop(insensitive($scrollbar_color)); } - } -} - - -.scrollbars-junction, -.scrollbars-junction.frame { // the small square between two scrollbars - border-color: transparent; - background-color: transparent; - border-image: none; -} diff --git a/src/gtk318/widgets/_sidebar.scss b/src/gtk318/widgets/_sidebar.scss deleted file mode 100644 --- a/src/gtk318/widgets/_sidebar.scss +++ /dev/null @@ -1,74 +0,0 @@ -@charset "UTF-8"; - -/*********** - * Sidebar * - ***********/ - -.sidebar, -.sidebar .view { - border: none; - background-color: w_color(normal); - &:selected { - @extend %selected_items; - } - &:backdrop { background-color: backdrop(w_color(normal))} -} - -GtkSidebarRow { - // Needs overriding of the GtkListBoxRow padding - &.list-row { - padding: 0px; - } - // Using margins/padding directly in the SidebarRow - // will make the animation of the new bookmark row jump - .sidebar-revealer { - padding: 4px 14px 4px 12px; - } - .sidebar-icon { - - &:dir(ltr) { padding-right: 8px; } - &:dir(rtl) { padding-left: 8px; } - } - .sidebar-label { - &:dir(ltr) { padding-right: 2px; } - &:dir(rtl) { padding-left: 2px; } - } -} - -// Places sidebar is a special case, since the view here have to look like chrome not content, so we override text color -GtkPlacesSidebar.sidebar .view { -// color: w_color(text); -// background-color: transparent; - &:insensitive { color: insensitive(w_color(text)); } - &:backdrop { - color: backdrop(w_color(text)); - &:insensitive { color: backdrop(insensitive(w_color(text))); } - } - &:selected { @extend %selected_items; } - .separator, - .separator:backdrop { @extend .separator; } - .image { // icons color - color: w_color(text); - &:selected { - color: s_color(text); - &:backdrop { color: backdrop(w_color(text)); } - } - &:insensitive { color: insensitive(w_color(text)); } - &:backdrop { - color: backdrop(w_color(text)); - &:insensitive { color: backdrop(insensitive(w_color(text))); } - } - } -} - -.sidebar-item { - padding: 10px 4px; - > .label { - padding-left: 6px; - padding-right: 6px; - } - &.needs-attention > .label { - @extend %needs_attention; - background-size: 6px 6px, 0 0; - } -} diff --git a/src/gtk318/widgets/_spinbutton.scss b/src/gtk318/widgets/_spinbutton.scss deleted file mode 100644 --- a/src/gtk318/widgets/_spinbutton.scss +++ /dev/null @@ -1,127 +0,0 @@ -@charset "UTF-8"; - -/***************** - * GtkSpinButton * - *****************/ - -.spinbutton { - .button { - @extend %spinbutton; - } - .osd & { - .button { - @extend %spinbutton; - &:last-child { border-radius: 0 3px 3px 0; } - &:dir(rtl):first-child { border-radius: 3px 0 0 3px; } - } - } - &.vertical, &.vertical:dir(rtl) { //FIXME: try using linking templates for vertically linked stuff - .button { - padding-top: 5px; // Same vertical padding as image-buttons - padding-bottom: 5px; // - &:first-child { - @extend %top_button; - @include button(normal); - &:active { - @extend %top_button; - @include button(active); - } - &:hover { - @extend %top_button; - @include button(hover); - } - &:insensitive { - @extend %top_button; - @include button(insensitive); - } - &:backdrop { - @extend %top_button; - @include button(backdrop); - } - } - &:last-child { - @extend %bottom_button; - @include button(normal); - &:active { - @extend %bottom_button; - @include button(active); - } - &:hover { - @extend %bottom_button; - @include button(hover); - } - &:insensitive { - @extend %bottom_button; - @include button(insensitive); - } - &:backdrop { - @extend %bottom_button; - @include button(backdrop); - } - } - &:backdrop:insensitive { - @include button(backdrop-insensitive); - } - } - &.entry { - // we should remove the bottom edge hilight here, but seems - // like buttons are on top of it so it doesn't show up - border-radius: 0px; - padding-left: 0px; - padding-right: 0px; - &:insensitive { background-color: insensitive(v_color(normal));} - } - } - GtkTreeView & { - &.entry, &.entry:focus { - padding: 1px; - border-width: 1px 0; - border-color: v_color(active); - border-radius: 0; - box-shadow: none; - - } - } -} - -%spinbutton { - background-image: none; - background-color: transparent; - border-style: none none none solid; - border-color: transparentize($border_color, 0.7); - color: b_color(text); - border-radius: 0; - box-shadow: none; - &:dir(rtl) { border-style: none solid none none; } - &:hover { - color: b_color(hover); - } - &:insensitive { - color: insensitive(b_color(text)); - border-color: insensitive(transparentize($border_color, 0.7)); - } - &:active { - color: b_color(active); - } - &:backdrop { - color: backdrop(b_color(text)); - border-color: backdrop(transparentize($border_color, 0.7)); - background-color: transparent; - } - &:backdrop:insensitive { - background-image: none; - color: backdrop(insensitive(b_color(text))); - border-style: none none none solid; // It is needed or it gets overridden - border-color: backdrop(insensitive(transparentize($border_color, 0.7))); - &:dir(rtl) { border-style: none solid none none; } - } -} - -%top_button { - border-radius: 3px 3px 0 0; - border-style: solid solid none solid; -} -%bottom_button { - border-radius: 0 0 3px 3px; - border-style: none solid solid solid; -} diff --git a/src/gtk318/widgets/_switch.scss b/src/gtk318/widgets/_switch.scss deleted file mode 100644 --- a/src/gtk318/widgets/_switch.scss +++ /dev/null @@ -1,69 +0,0 @@ -@charset "UTF-8"; - -/********** - * Switch * - **********/ - -GtkSwitch { - -GtkSwitch-slider-width: 24px; - -GtkSwitch-slider-height: 24px; - font-weight: bold; - font-size: smaller; - outline-offset: 0px; - color: transparent; - box-shadow: none; // needs to be set here - // otherwise it gets - // clipped - &.trough { - // similar to the .scale - border: 0px solid; - border-radius: 12px; - background-image: none; - background-color: transparentize(b_color(text),0.7); - text-shadow: none; - &:active { - background-color: s_color(normal); - box-shadow: none; - text-shadow: none; - } - &:backdrop { - background-color: backdrop(transparentize(b_color(text),0.7)); - } - - } - - &.slider { - border: 1px solid; - border-radius: 11px; - background-color: w_color(normal); - border-color: $border_color; - &:hover { - box-shadow: none; - border-color: b_color(hover); - background-color: w_color(normal); - } - &:active { - border-color: b_color(active); - &:hover { border-color: b_color(hover)} - } - &:insensitive { background-color: insensitive(w_color(normal)); } - &:backdrop { - background-color: backdrop(w_color(normal)); - &:insensitive { - background-color: backdrop(insensitive(w_color(normal))); - } - } - } - .header-bar & { - &.trough { - &:backdrop { - background-color:transparent; - } - } - &.slider { - &:backdrop { - background-color: t_color(backdrop-text); - } - } - } -} diff --git a/src/gtk318/widgets/_toolbar.scss b/src/gtk318/widgets/_toolbar.scss deleted file mode 100644 --- a/src/gtk318/widgets/_toolbar.scss +++ /dev/null @@ -1,48 +0,0 @@ -@charset "UTF-8"; - -/************ - * Toolbars * - ************/ -.toolbar, -.primary-toolbar { - -GtkWidget-window-dragging: true; - padding: 4px; - background-color: w_color(normal); - &:backdrop { - background-color: backdrop(w_color(normal)); - box-shadow: none; - } - .osd &, &.osd { - padding: 13px; - border: none; - border-radius: $r; - background-color: w_color(normal); - &:backdrop { - border-color: backdrop($border_color); - background-color: backdrop(w_color(normal)); - box-shadow: none; - } - } -} - -//searchbar, location-bar & inline-toolbar -.inline-toolbar { - @extend .toolbar; - @extend %inset-bar; - border-width: 0px 0px 1px 0px; - padding: 3px; - border-radius: 0; -} -.search-bar, .location-bar { - @extend .toolbar; - @extend %inset-bar; - border-width: 0px 0px 1px 0px; - padding: 3px; -} - -%inset-bar { - border-style: solid; - border-color: $border_color; - text-shadow: none; - background-color: w_color(normal); -} diff --git a/src/gtk318/widgets/_tooltips.scss b/src/gtk318/widgets/_tooltips.scss deleted file mode 100644 --- a/src/gtk318/widgets/_tooltips.scss +++ /dev/null @@ -1,30 +0,0 @@ -@charset "UTF-8"; - -/************ - * Tooltips * - ************/ - -.tooltip { - &.background { - // background-color needs to be set this way otherwise it gets drawn twice - // see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details. - background-color: tooltip(background); - background-clip: padding-box; - } - - color: tooltip(text); - padding: 4px; /* not working */ - border-radius: 5px; - box-shadow: none; // otherwise it gets inherited by windowframe.csd - text-shadow: none; - border: 1px solid tooltip(border); - &.window-frame.csd { - background-color: transparent; - } -} - -.tooltip * { //Yeah this is ugly - padding: 4px; - background-color: transparent; - color: inherit; // just to be sure -} diff --git a/src/gtk318/widgets/_treeview.scss b/src/gtk318/widgets/_treeview.scss deleted file mode 100644 --- a/src/gtk318/widgets/_treeview.scss +++ /dev/null @@ -1,138 +0,0 @@ -@charset "UTF-8"; - - - -/************** - * Tree Views * - **************/ -GtkTreeView.view { - -GtkTreeView-grid-line-width: 0; - -GtkTreeView-grid-line-pattern: ''; - -GtkTreeView-tree-line-width: 1; - -GtkTreeView-tree-line-pattern: ''; - -GtkTreeView-expander-size: 16; - - border-left-color: $border_color; // this is actually the tree lines color, - border-top-color: transparent; // while this is the grid lines color, better then nothing - - &:selected { border-radius: 0; } // rest border radius in lists - - &:selected { - background-color: s_color(normal); - border-left-color: s_color(text); - border-top-color: s_color(text); // doesn't work unfortunatelly - } - &:backdrop:selected { - background-color: backdrop(s_color(backdrop)); - border-left-color: backdrop(s_color(text)); - border-top-color: backdrop(s_color(text)); - } - - &:insensitive { - color: insensitive($border_color); - &:selected { - color: insensitive(s_color(text)); - &:backdrop { color: backdrop(insensitive(s_color(text))); } - } - &:backdrop { color: backdrop(insensitive($border_color)); } - } - &.separator { - color: $border_color; - } - &.separator:backdrop { - color: backdrop($border_color); - } - - &:backdrop { - border-left-color: backdrop($border_color); - } - - &.dnd { - border-style: solid none; - border-width: 1px; - border-color: b_color(hover); - } - - &.expander { - -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); - color: v_color(text); - &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl');} - &:hover { color: b_color(hover); } - &:selected { color: s_color(text); } - &:checked { - -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); - &:selected { color: s_color(text); } - &:backdrop { color: backdrop(v_color(normal)); } - } - &:backdrop { color: backdrop(v_color(text)); } - } -} - -column-header { - .button { - @extend %column_header_button; - color: b_color(text); - background-color: b_color(normal); - text-shadow: none; - box-shadow: none; - &:hover { - @extend %column_header_button; - color: b_color(text); - background-color: transparentize(b_color(hover), 0.5); - box-shadow: none; - transition: none; //I shouldn't need this - } - &:active { - @extend %column_header_button; - color: b_color(text); - background-color: transparentize(b_color(hover), 0.5); - transition: none; //I shouldn't need this - } - &.dnd { - @extend column-header.button.dnd; - } - } - &:last-child .button, - &:last-child .button:backdrop, // set :backdrop too or the border will be visibile there - &:last-child.button, - &:last-child.button:backdrop { //treeview-like derived widgets in Banshee and Evolution - border-right-style: none; - } -} - -column-header.button.dnd { // for treeview-like derive widgets - transition: none; - color: s_color(normal); - box-shadow: none; - &:active { @extend column-header.button.dnd; } - &:selected { @extend column-header.button.dnd; } - &:hover { @extend column-header.button.dnd; } -} - -%column_header_button { - padding: 6px; - border-style: none solid solid none; - border-radius: 0; - background-image: none; - border-color: $border_color; - text-shadow: none; - &:insensitive { - border-color: insensitive($border_color); - color: insensitive(b_color(text)); - background-color: insensitive(b_color(normal)); - background-image: none; - } - &:backdrop { - border-color: backdrop($border_color); - border-style: none solid solid none; - color: backdrop(b_color(text)); - background-image: none; - background-color: backdrop(b_color(normal)); - &:insensitive { - border-color: backdrop(insensitive($border_color)); - background-image: none; - background-color: backdrop(insensitive(b_color(normal))); - color: backdrop(insensitive(b_color(text))); - } - } -} diff --git a/src/gtk318/widgets/_window_decorations.scss b/src/gtk318/widgets/_window_decorations.scss deleted file mode 100644 --- a/src/gtk318/widgets/_window_decorations.scss +++ /dev/null @@ -1,176 +0,0 @@ -@charset "UTF-8"; - -/********************** - * Window Decorations * - *********************/ - -.window-frame { - - //border: 1px solid transparent; - border-radius: $r; - box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.5); - - // FIXME rationalize window-frame shadows - - /* this is used for the resize cursor area */ - margin: 10px; - - &:backdrop { - box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.5); - } - &.tiled { - border-radius: 0; - } - &.popup { - border-radius: $r; - box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1) - } - // server-side decorations as used by mutter - &.ssd { - box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.1); - } - &.csd { - border-radius: $r; - &.popup { - box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1) - } - &.tooltip { - box-shadow: none; - } - &.message-dialog { - box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.5) - } - } - &.solid-csd { - border-radius: 0; - margin: 0px; - background-color: t_color(background-light); - border: none; - box-shadow: none; - } -} - -// Window Close button -.header-bar .button.titlebutton, -.titlebar .button.titlebutton { - @extend %undecorated_button; - padding: 0px; - &:hover, - &:active, - &:checked, - &:backdrop, - &:active:hover { @extend %undecorated_button; transition: none;} - - &.close { - padding: 1px; - color: transparent; - border-image: none; - box-shadow: none; - background-position: center; - background-repeat: no-repeat; - background-image: -gtk-scaled(url('../assets/titlebutton-close.png'),url('../assets/titlebutton-close@2.png')); - } - &.close:hover { - border-color: transparent; - background-color: transparent; - background-image: -gtk-scaled(url('../assets/titlebutton-close-hover.png'),url('../assets/titlebutton-close-hover@2.png')); - } - &.close:active { - border-color: transparent; - background-color: transparent; - background-image: -gtk-scaled(url('../assets/titlebutton-close-active.png'),url('../assets/titlebutton-close-active@2.png')); - } - &.close:backdrop { - border-color: transparent; - background-color: transparent; - background-image: -gtk-scaled(url('../assets/titlebutton-close-backdrop.png'),url('../assets/titlebutton-close-backdrop@2.png')); - } - - &.maximize { - padding: 1px; - color: transparent; - border-image: none; - box-shadow: none; - background-position: center; - background-repeat: no-repeat; - background-image: -gtk-scaled(url('../assets/titlebutton-maximize.png'),url('../assets/titlebutton-maximize@2.png')); - } - &.maximize:hover { - border-color: transparent; - background-color: transparent; - background-image: -gtk-scaled(url('../assets/titlebutton-maximize-hover.png'),url('../assets/titlebutton-maximize-hover@2.png')); - } - &.maximize:active { - border-color: transparent; - background-color: transparent; - background-image: -gtk-scaled(url('../assets/titlebutton-maximize-active.png'),url('../assets/titlebutton-maximize-active@2.png')); - } - &.maximize:backdrop { - border-color: transparent; - background-color: transparent; - background-image: -gtk-scaled(url('../assets/titlebutton-maximize-backdrop.png'),url('../assets/titlebutton-maximize-backdrop@2.png')); - } - - &.minimize { - padding: 1px; - color: transparent; - border-image: none; - box-shadow: none; - background-position: center; - background-repeat: no-repeat; - background-image: -gtk-scaled(url('../assets/titlebutton-minimize.png'),url('../assets/titlebutton-minimize@2.png')); - } - &.minimize:hover { - border-color: transparent; - background-color: transparent; - background-image: -gtk-scaled(url('../assets/titlebutton-minimize-hover.png'),url('../assets/titlebutton-minimize-hover@2.png')); - } - &.minimize:active { - border-color: transparent; - background-color: transparent; - background-image: -gtk-scaled(url('../assets/titlebutton-minimize-active.png'),url('../assets/titlebutton-minimize-active@2.png')); - } - &.minimize:backdrop { - border-color: transparent; - background-color: transparent; - background-image: -gtk-scaled(url('../assets/titlebutton-minimize-backdrop.png'),url('../assets/titlebutton-minimize-backdrop@2.png')); - } -} - -.header-bar, -.titlebar { - .maximized & { - .button.titlebutton { - &.maximize { - padding: 1px; - color: transparent; - border-image: none; - box-shadow: none; - background-position: center; - background-repeat: no-repeat; - background-image: -gtk-scaled(url('../assets/titlebutton-maximize-maximized.png'),url('../assets/titlebutton-maximize-maximized@2.png')); - } - &.maximize:hover { - border-color: transparent; - background-color: transparent; - background-image: -gtk-scaled(url('../assets/titlebutton-maximize-maximized-hover.png'),url('../assets/titlebutton-maximize-maximized-hover@2.png')); - } - &.maximize:active { - border-color: transparent; - background-color: transparent; - background-image: -gtk-scaled(url('../assets/titlebutton-maximize-maximized-active.png'),url('../assets/titlebutton-maximize-maximized-active@2.png')); - } - &.maximize:backdrop { - border-color: transparent; - background-color: transparent; - background-image: -gtk-scaled(url('../assets/titlebutton-maximize-maximized-backdrop.png'),url('../assets/titlebutton-maximize-maximized-backdrop@2.png')); - } - } - } -} - -.header-bar.selection-mode .button.titlebutton, -.titlebar.selection-mode .button.titlebutton { - text-shadow: none; - &:backdrop { icon-shadow: none; } -} diff --git a/src/gtk320/gtk.scss b/src/gtk320/gtk.scss deleted file mode 100644 --- a/src/gtk320/gtk.scss +++ /dev/null @@ -1,33 +0,0 @@ -@charset "UTF-8"; - -@import 'global'; -@import '../functions'; -@import '../colors'; - -@import "widgets/base"; -@import "widgets/button"; -@import "widgets/entry"; -@import "widgets/app_notifications"; -@import "widgets/calendar"; -@import "widgets/checkboxes"; -@import "widgets/color_chooser"; -@import "widgets/dialogs"; -@import "widgets/headerbar"; -@import "widgets/infobar"; -@import "widgets/link"; -@import "widgets/lists"; -@import "widgets/menus"; -@import "widgets/misc"; -@import "widgets/notebook"; -@import "widgets/overshoot"; -@import "widgets/pathbar"; -@import "widgets/progressbar"; -@import "widgets/scale"; -@import "widgets/scrollbar"; -@import "widgets/sidebar"; -@import "widgets/spinbutton"; -@import "widgets/switch"; -@import "widgets/toolbar"; -@import "widgets/tooltips"; -@import "widgets/treeview"; -@import "widgets/window_decorations";