Commit 7a1242c1 authored by Nikita Churaev's avatar Nikita Churaev

theme: Modern pathbar style

Inspired by the style used by the dconf Editor.
parent a0f27346
Pipeline #7357 passed with stage
in 7 minutes and 49 seconds
......@@ -1720,30 +1720,101 @@ headerbar { // headerbar border rounding
/************
* Pathbars *
************/
.path-bar button {
&.text-button, &.image-button, & {
padding-left: 4px;
padding-right: 4px;
.path-bar.path-bar.path-bar.path-bar.path-bar button {
// the .path-bar selector is repeated multiple times to increase specificity
// and prevent this style from being overridden by more specific rules; the
// proper solution would probably be to change the button's element name to
// something like "pathelement", but that would break existing themes
$_regular_padding: 9px;
$_image_button_padding: 4px;
padding-left: $_regular_padding;
padding-right: $_regular_padding;
// unset the style; make the top and the bottom border transparent instead of
// removing them to keep the height consistent with other buttons
border-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
border-radius: 0;
border-left-width: 0;
border-right-width: 0;
background: none;
box-shadow: none;
// add an extra pixel to left padding of all buttons but the first to make the
// separators appear centered
&:not(first-child) {
padding-left: ($_regular_padding + 1px);
}
// slider and image buttons look really odd with 10px padding, reduce it
&.slider-button, &.image-button:not(.text-button) {
padding-left: $_image_button_padding;
padding-right: $_image_button_padding;
&:not(first-child) {
padding-left: ($_image_button_padding + 1px);
}
}
// normal image buttons have a lot of padding around the labels, but it is too
// much padding for path bars
&.text-button.image-button label {
padding-left: 0;
padding-right: 0;
}
&.text-button.image-button, & {
label:last-child { padding-right: 8px; }
label:first-child { padding-left: 8px; }
// add small vertical separators between the buttons
&:not(:first-child) {
& {
background-image: image($borders_color);
background-size: 1px 12px;
background-position: 0 50%;
background-repeat: no-repeat;
}
&:disabled {
background-image: image($insensitive_borders_color);
}
}
image {
padding-left: 4px;
padding-right: 4px;
// make the arrows more transparent to make it easier to discern whether the
// slider buttons are disabled, since there is no backround to help users tell
// what state they are in
&.slider-button:disabled {
color: transparentize($insensitive_fg_color, 0.35);
}
&.slider-button {
padding-left: 0;
padding-right: 0;
&.slider-button:backdrop {
color: $backdrop_fg_color;
}
&.slider-button:backdrop:disabled {
color: $backdrop_insensitive_color;
}
// add transition for a fancy hover animation
& > * {
transition: box-shadow 0.25s;
}
&:hover > * {
box-shadow: inset 0 -2px 0 $borders_color;
}
&:checked > * {
box-shadow: inset 0 -2px 0 $selected_bg_color;
}
&:checked:disabled > * {
box-shadow: inset 0 -2px 0 $insensitive_borders_color;
}
// add right margin to images to separate them from the labels
& image:not(:last-child) {
margin-right: 4px;
}
}
......
......@@ -679,17 +679,35 @@ window.csd > .titlebar:not(headerbar) { padding: 0; background-color: transparen
.titlebar:not(headerbar) > separator { background-color: #1b1f20; }
/************ Pathbars * */
.path-bar button.text-button, .path-bar button.image-button, .path-bar button { padding-left: 4px; padding-right: 4px; }
.path-bar.path-bar.path-bar.path-bar.path-bar button { padding-left: 9px; padding-right: 9px; border-color: transparent; border-top-color: transparent; border-bottom-color: transparent; border-radius: 0; border-left-width: 0; border-right-width: 0; background: none; box-shadow: none; }
.path-bar button.text-button.image-button label { padding-left: 0; padding-right: 0; }
.path-bar.path-bar.path-bar.path-bar.path-bar button:not(first-child) { padding-left: 10px; }
.path-bar button.text-button.image-button label:last-child, .path-bar button label:last-child { padding-right: 8px; }
.path-bar.path-bar.path-bar.path-bar.path-bar button.slider-button, .path-bar.path-bar.path-bar.path-bar.path-bar button.image-button:not(.text-button) { padding-left: 4px; padding-right: 4px; }
.path-bar button.text-button.image-button label:first-child, .path-bar button label:first-child { padding-left: 8px; }
.path-bar.path-bar.path-bar.path-bar.path-bar button.slider-button:not(first-child), .path-bar.path-bar.path-bar.path-bar.path-bar button.image-button:not(.text-button):not(first-child) { padding-left: 5px; }
.path-bar button image { padding-left: 4px; padding-right: 4px; }
.path-bar.path-bar.path-bar.path-bar.path-bar button.text-button.image-button label { padding-left: 0; padding-right: 0; }
.path-bar button.slider-button { padding-left: 0; padding-right: 0; }
.path-bar.path-bar.path-bar.path-bar.path-bar button:not(:first-child) { background-image: image(#1b1f20); background-size: 1px 12px; background-position: 0 50%; background-repeat: no-repeat; }
.path-bar.path-bar.path-bar.path-bar.path-bar button:not(:first-child):disabled { background-image: image(#1b1f20); }
.path-bar.path-bar.path-bar.path-bar.path-bar button.slider-button:disabled { color: rgba(145, 148, 148, 0.65); }
.path-bar.path-bar.path-bar.path-bar.path-bar button.slider-button:backdrop { color: #919494; }
.path-bar.path-bar.path-bar.path-bar.path-bar button.slider-button:backdrop:disabled { color: #566164; }
.path-bar.path-bar.path-bar.path-bar.path-bar button > * { transition: box-shadow 0.25s; }
.path-bar.path-bar.path-bar.path-bar.path-bar button:hover > * { box-shadow: inset 0 -2px 0 #1b1f20; }
.path-bar.path-bar.path-bar.path-bar.path-bar button:checked > * { box-shadow: inset 0 -2px 0 #215d9c; }
.path-bar.path-bar.path-bar.path-bar.path-bar button:checked:disabled > * { box-shadow: inset 0 -2px 0 #1b1f20; }
.path-bar.path-bar.path-bar.path-bar.path-bar button image:not(:last-child) { margin-right: 4px; }
/************** Tree Views * */
treeview.view { border-left-color: #898b8b; border-top-color: #33393b; }
......
......@@ -687,17 +687,35 @@ window.csd > .titlebar:not(headerbar) { padding: 0; background-color: transparen
.titlebar:not(headerbar) > separator { background-color: #b6b6b3; }
/************ Pathbars * */
.path-bar button.text-button, .path-bar button.image-button, .path-bar button { padding-left: 4px; padding-right: 4px; }
.path-bar.path-bar.path-bar.path-bar.path-bar button { padding-left: 9px; padding-right: 9px; border-color: transparent; border-top-color: transparent; border-bottom-color: transparent; border-radius: 0; border-left-width: 0; border-right-width: 0; background: none; box-shadow: none; }
.path-bar button.text-button.image-button label { padding-left: 0; padding-right: 0; }
.path-bar.path-bar.path-bar.path-bar.path-bar button:not(first-child) { padding-left: 10px; }
.path-bar button.text-button.image-button label:last-child, .path-bar button label:last-child { padding-right: 8px; }
.path-bar.path-bar.path-bar.path-bar.path-bar button.slider-button, .path-bar.path-bar.path-bar.path-bar.path-bar button.image-button:not(.text-button) { padding-left: 4px; padding-right: 4px; }
.path-bar button.text-button.image-button label:first-child, .path-bar button label:first-child { padding-left: 8px; }
.path-bar.path-bar.path-bar.path-bar.path-bar button.slider-button:not(first-child), .path-bar.path-bar.path-bar.path-bar.path-bar button.image-button:not(.text-button):not(first-child) { padding-left: 5px; }
.path-bar button image { padding-left: 4px; padding-right: 4px; }
.path-bar.path-bar.path-bar.path-bar.path-bar button.text-button.image-button label { padding-left: 0; padding-right: 0; }
.path-bar button.slider-button { padding-left: 0; padding-right: 0; }
.path-bar.path-bar.path-bar.path-bar.path-bar button:not(:first-child) { background-image: image(#b6b6b3); background-size: 1px 12px; background-position: 0 50%; background-repeat: no-repeat; }
.path-bar.path-bar.path-bar.path-bar.path-bar button:not(:first-child):disabled { background-image: image(#b6b6b3); }
.path-bar.path-bar.path-bar.path-bar.path-bar button.slider-button:disabled { color: rgba(139, 142, 143, 0.65); }
.path-bar.path-bar.path-bar.path-bar.path-bar button.slider-button:backdrop { color: #8b8e8f; }
.path-bar.path-bar.path-bar.path-bar.path-bar button.slider-button:backdrop:disabled { color: #c3c3c0; }
.path-bar.path-bar.path-bar.path-bar.path-bar button > * { transition: box-shadow 0.25s; }
.path-bar.path-bar.path-bar.path-bar.path-bar button:hover > * { box-shadow: inset 0 -2px 0 #b6b6b3; }
.path-bar.path-bar.path-bar.path-bar.path-bar button:checked > * { box-shadow: inset 0 -2px 0 #4a90d9; }
.path-bar.path-bar.path-bar.path-bar.path-bar button:checked:disabled > * { box-shadow: inset 0 -2px 0 #b6b6b3; }
.path-bar.path-bar.path-bar.path-bar.path-bar button image:not(:last-child) { margin-right: 4px; }
/************** Tree Views * */
treeview.view { border-left-color: #979a9b; border-top-color: #e8e8e7; }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment