lesderid
/
paper-gtk-theme
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

switch style improvements

This commit is contained in:
Sam Hewitt 2016-05-23 19:16:33 -04:00
parent 3b3c58fb14
commit 3c0ec75c62
5 changed files with 159 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
Paper/gtk-3.18/apps/_budgie.scss
View File

@ -41,11 +41,13 @@ $asset_suffix: if($variant == 'default', '', '-hc');
// Budgie
.budgie-container {
border: none;
box-shadow: none;
background: transparent;
font-size: 100%;
transition: 170ms ease-out;
background-image: none;
background-color: transparent;
&:backdrop {
background-image: none;
background-color: transparent;
}
}
// Budgie Menu
@ -145,7 +147,6 @@ $asset_suffix: if($variant == 'default', '', '-hc');
.raven {
color: $fg_color;
background-color: transparentize($bg_color, 0.02);
transition: 170ms ease-out;
.raven-header {
font: bold;
@ -160,9 +161,6 @@ $asset_suffix: if($variant == 'default', '', '-hc');
&.top { border-top-style: none; }
&.bottom { border-bottom-style: none; }
>.button {
font:normal;
}
}
@if $variant=='default' {
@ -170,13 +168,21 @@ $asset_suffix: if($variant == 'default', '', '-hc');
}
.raven-background {
background:transparent;
background-color: $base_color;
border-bottom: 1px solid $borders_color;
box-shadow:inset 0 1px 0 0 transparentize(white,0.9), 0 1px 1px 0 transparentize(black,0.9);
&.middle { border-bottom-style: none; } // applet background between two headers
}
.raven-calendar {
border:none;
padding: 2px;
border-bottom:1px solid $borders_color;
}
.powerstrip {
background-color: transparent;
border: none;
@ -192,11 +198,14 @@ $asset_suffix: if($variant == 'default', '', '-hc');
font-size: 100%;
&:hover {
background: transparentize(black,0.9);
border: 1px solid transparentize(black,0.8);
box-shadow: inset 0 1px transparentize(white,0.9), 1px 1px transparentize(black,0.8);
transition: 170ms ease all;
}
&:active {
box-shadow: 0 1px transparentize(white,0.9);
transition: 170ms ease all;
}
}
.option-subtitle {
@ -219,13 +228,16 @@ $asset_suffix: if($variant == 'default', '', '-hc');
// Notifications
.budgie-notification-window {
border-radius: 1px;
border:none;
border-top: 1px solid transparentize(white,0.9);
border-radius: 4px;
background-color: $bg_color;
box-shadow: 0 2px 2px 0 $shadow_color;
}
.budgie-notification {
&.background {
background-color: white;
border-radius: 4px;
}
.notification-title {
@ -233,7 +245,10 @@ $asset_suffix: if($variant == 'default', '', '-hc');
color: $fg_color;
}
.notification-body { color: transparentize($budgie_panel_fg_color, 0.3); }
.notification-body {
border:none;
color: transparentize($budgie_panel_fg_color, 0.3);
}
}
.drop-shadow {

71
Paper/gtk-3.18/gtk-dark.css
View File

@ -4236,36 +4236,33 @@ GtkSwitch {
outline-offset: -4px;
transition: all 200ms ease-in;
border: none;
border-radius: 14px;
border-radius: 16px;
color: transparent;
background-color: transparent;
background-color: rgba(0, 0, 0, 0.2);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3); }
GtkSwitch:insensitive {
background-color: rgba(0, 0, 0, 0.1); }
GtkSwitch:backdrop {
background-color: #37474f;
transition: 200ms ease-out; }
GtkSwitch:backdrop:insensitive {
background-color: #3d4f57; }
background-color: rgba(0, 0, 0, 0.1);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); }
GtkSwitch:active, GtkSwitch:checked {
background-color: #449ac2; }
GtkSwitch:active:backdrop, GtkSwitch:checked:backdrop {
background-color: #57a4c8; }
GtkSwitch:active:backdrop .slider:backdrop,
GtkSwitch:active:backdrop slider:backdrop, GtkSwitch:checked:backdrop .slider:backdrop,
GtkSwitch:checked:backdrop slider:backdrop {
box-shadow: none;
background-color: rgba(55, 71, 79, 0.9);
border: none; }
GtkSwitch .slider {
padding: 2px;
border-radius: 50%;
border: none;
padding: 3px;
border-radius: 12px;
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
background-color: #2d3940;
box-shadow: none; }
background-color: #455a64;
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.2); }
GtkSwitch .slider:active {
background-color: white;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.2); }
GtkSwitch .slider:backdrop {
box-shadow: none; }
background-color: #475d67;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1); }
GtkSwitch .slider:insensitive {
background-color: #3b4c55;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: none; }
GtkSwitch .trough:active, GtkSwitch .trough:checked {
background-color: #449ac2; }
@ -4923,11 +4920,11 @@ treeview.view header button:active {
border-right: 2px solid #449ac2; }
.budgie-container {
border: none;
box-shadow: none;
background: transparent;
font-size: 100%;
transition: 170ms ease-out; }
background-image: none;
background-color: transparent; }
.budgie-container:backdrop {
background-image: none;
background-color: transparent; }
.budgie-menu GtkSearchEntry.entry:not(:selected) {
border: none;
@ -5009,8 +5006,7 @@ treeview.view header button:active {
.raven {
color: #cfd8dc;
background-color: rgba(55, 71, 79, 0.98);
transition: 170ms ease-out; }
background-color: rgba(55, 71, 79, 0.98); }
.raven .raven-header {
font: bold;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
@ -5024,14 +5020,16 @@ treeview.view header button:active {
border-top-style: none; }
.raven .raven-header.bottom {
border-bottom-style: none; }
.raven .raven-header > .button {
font: normal; }
.raven .raven-background {
background: transparent;
background-color: #455a64;
border-bottom: 1px solid #222c31;
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.1); }
.raven .raven-background.middle {
border-bottom-style: none; }
.raven .raven-calendar {
border: none;
padding: 2px;
border-bottom: 1px solid #222c31; }
.raven .powerstrip {
background-color: transparent;
border: none;
@ -5044,10 +5042,11 @@ treeview.view header button:active {
box-shadow: 0 1px rgba(255, 255, 255, 0.1);
font-size: 100%; }
.raven .powerstrip .button:hover {
background: rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 1px 1px rgba(0, 0, 0, 0.2);
transition: 170ms ease all; }
.raven .powerstrip .button:active {
box-shadow: 0 1px rgba(255, 255, 255, 0.1);
transition: 170ms ease all; }
.raven .option-subtitle {
font-size: smaller; }
@ -5063,15 +5062,17 @@ treeview.view header button:active {
padding: 8px; }
.budgie-notification-window {
border-radius: 1px; }
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 4px;
background-color: #37474f;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2); }
.budgie-notification.background {
background-color: white;
border-radius: 4px; }
.budgie-notification .notification-title {
font-size: 110%;
color: #cfd8dc; }
.budgie-notification .notification-body {
border: none;
color: rgba(207, 216, 220, 0.7); }
.drop-shadow, .budgie-session-dialog.background, .background.budgie-polkit-dialog {

69
Paper/gtk-3.18/gtk.css
View File

@ -4245,36 +4245,33 @@ GtkSwitch {
outline-offset: -4px;
transition: all 200ms ease-in;
border: none;
border-radius: 14px;
border-radius: 16px;
color: transparent;
background-color: rgba(0, 0, 0, 0.1);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0px 1px rgba(255, 255, 255, 0.3); }
GtkSwitch:insensitive {
background-color: rgba(0, 0, 0, 0.1); }
GtkSwitch:backdrop {
background-color: #f7f7f7;
transition: 200ms ease-out; }
GtkSwitch:backdrop:insensitive {
background-color: #fafafa; }
background-color: rgba(0, 0, 0, 0.1);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
GtkSwitch:active, GtkSwitch:checked {
background-color: #347D9F; }
GtkSwitch:active:backdrop, GtkSwitch:checked:backdrop {
background-color: #3a8cb2; }
GtkSwitch:active:backdrop .slider:backdrop,
GtkSwitch:active:backdrop slider:backdrop, GtkSwitch:checked:backdrop .slider:backdrop,
GtkSwitch:checked:backdrop slider:backdrop {
box-shadow: none;
background-color: rgba(247, 247, 247, 0.9);
border: none; }
GtkSwitch .slider {
padding: 2px;
border-radius: 50%;
border: none;
padding: 3px;
border-radius: 12px;
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
background-color: #f7f7f7;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2); }
background-color: #ffffff;
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.2); }
GtkSwitch .slider:active {
background-color: white;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.2); }
GtkSwitch .slider:backdrop {
box-shadow: none; }
background-color: #fcfcfc;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1); }
GtkSwitch .slider:insensitive {
background-color: #f2f2f2;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: none; }
GtkSwitch .trough:active, GtkSwitch .trough:checked {
background-color: #347D9F; }
@ -4938,11 +4935,11 @@ treeview.view header button:active {
border-right: 2px solid #347D9F; }
.budgie-container {
border: none;
box-shadow: none;
background: transparent;
font-size: 100%;
transition: 170ms ease-out; }
background-image: none;
background-color: transparent; }
.budgie-container:backdrop {
background-image: none;
background-color: transparent; }
.budgie-menu GtkSearchEntry.entry:not(:selected) {
border: none;
@ -5024,8 +5021,7 @@ treeview.view header button:active {
.raven {
color: #444;
background-color: rgba(247, 247, 247, 0.98);
transition: 170ms ease-out; }
background-color: rgba(247, 247, 247, 0.98); }
.raven .raven-header {
font: bold;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
@ -5039,14 +5035,16 @@ treeview.view header button:active {
border-top-style: none; }
.raven .raven-header.bottom {
border-bottom-style: none; }
.raven .raven-header > .button {
font: normal; }
.raven .raven-background {
background: transparent;
background-color: #ffffff;
border-bottom: 1px solid #d1d1d1;
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.1); }
.raven .raven-background.middle {
border-bottom-style: none; }
.raven .raven-calendar {
border: none;
padding: 2px;
border-bottom: 1px solid #d1d1d1; }
.raven .powerstrip {
background-color: transparent;
border: none;
@ -5059,10 +5057,11 @@ treeview.view header button:active {
box-shadow: 0 1px rgba(255, 255, 255, 0.1);
font-size: 100%; }
.raven .powerstrip .button:hover {
background: rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 1px 1px rgba(0, 0, 0, 0.2);
transition: 170ms ease all; }
.raven .powerstrip .button:active {
box-shadow: 0 1px rgba(255, 255, 255, 0.1);
transition: 170ms ease all; }
.raven .option-subtitle {
font-size: smaller; }
@ -5078,15 +5077,17 @@ treeview.view header button:active {
padding: 8px; }
.budgie-notification-window {
border-radius: 1px; }
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 4px;
background-color: #f7f7f7;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2); }
.budgie-notification.background {
background-color: white;
border-radius: 4px; }
.budgie-notification .notification-title {
font-size: 110%;
color: #444; }
.budgie-notification .notification-body {
border: none;
color: rgba(207, 216, 220, 0.7); }
.drop-shadow, .budgie-session-dialog.background, .background.budgie-polkit-dialog {

49
Paper/gtk-3.18/widgets/_switches.scss
View File

@ -11,61 +11,52 @@ GtkSwitch {
transition: all 200ms ease-in;
border: none;
border-radius: 14px;
border-radius: 16px;
color: transparent;
background-color: if($variant == 'light', transparentize(black, 0.9), transparent);
background-color: if($variant == 'light', transparentize(black, 0.9), transparentize(black, 0.8));
box-shadow: if($variant == 'light', (inset 0 0 0 1px transparentize(black, 0.8), 0px 1px $bottom_highlight), 0 0 0 1px transparentize(black, 0.7));
&:insensitive {
background-color: transparentize(black, 0.9);
box-shadow: if($variant == 'light', inset 0 0 0 1px transparentize(black, 0.9), 0 0 0 1px transparentize(black, 0.8));
}
&:backdrop {
background-color: $backdrop_bg_color;
transition: $backdrop_transition;
&:insensitive { background-color: $insensitive_bg_color; }
}
&:active,
&:checked {
background-color: $selected_bg_color;
&:backdrop {
background-color: $backdrop_selected_bg_color;
.slider,
slider {
&:backdrop {
box-shadow:none;
background-color:transparentize($bg_color, 0.1);
border:none;
}
}
}
}
// Handle
.slider {
padding:2px;
border-radius: 50%;
border:none;
padding:3px;
border-radius: 12px;
transition: $button_transition;
background-color: if($variant == 'light', $bg_color, darken($bg_color, 5%));
background-color: $base_color;
box-shadow: if($variant == 'light', (
0 2px 2px transparentize(black, 0.8),
0 1px 2px transparentize(black, 0.8)
),(
none
));
box-shadow: inset 0 1px 0 0 transparentize(white,0.9),
0 2px 2px 0 transparentize(black, 0.8),
0 1px 2px 0 transparentize(black, 0.8);
&:active {
background-color: white;
box-shadow: 0 2px 2px 0 transparentize(black, 0.8),
0 1px 2px 0 transparentize(black, 0.8);
}
&:backdrop {
box-shadow:none;
background-color: $backdrop_base_color;
box-shadow: 0 1px 2px 0 transparentize(black, 0.9);
}
&:insensitive {
background-color: $insensitive_base_color;
border: 1px solid transparentize(black, 0.8);
box-shadow:none;
}
}

55
Paper/gtk-3.20/apps/_budgie.scss
View File

@ -41,11 +41,13 @@ $asset_suffix: if($variant == 'default', '', '-hc');
// Budgie
.budgie-container {
border: none;
box-shadow: none;
background: transparent;
font-size: 100%;
transition: 170ms ease-out;
background-image: none;
background-color: transparent;
&:backdrop {
background-image: none;
background-color: transparent;
}
}
// Budgie Menu
@ -145,23 +147,20 @@ $asset_suffix: if($variant == 'default', '', '-hc');
.raven {
color: $fg_color;
background-color: transparentize($bg_color, 0.02);
transition: 170ms ease-out;
.raven-header {
font: bold;
text-shadow: 0 1px $shadow_color;
icon-shadow: 0 1px $shadow_color;
background-color: $bg_color;
color: $fg_color;
border-top: 1px solid $borders_color;
border-bottom: 1px solid $borders_color;
border: solid $borders_color;
border-width: 1px 0 1px 0;
box-shadow:inset 0 1px 0 0 transparentize(white,0.9),inset 0 -1px 0 0 transparentize(white,0.95), 0 1px 1px 0 transparentize(black,0.9);
&.top { border-top-style: none; }
&.bottom { border-bottom-style: none; }
>.button {
font:normal;
}
}
@if $variant=='default' {
@ -169,13 +168,21 @@ $asset_suffix: if($variant == 'default', '', '-hc');
}
.raven-background {
background-color: transparentize($bg_color, 0.02);
background-color: $base_color;
border-bottom: 1px solid $borders_color;
box-shadow:inset 0 1px 0 0 transparentize(white,0.9), 0 1px 1px 0 transparentize(black,0.9);
&.middle { border-bottom-style: none; } // applet background between two headers
}
.raven-calendar {
border:none;
padding: 2px;
border-bottom:1px solid $borders_color;
}
.powerstrip {
background-color: transparent;
border: none;
@ -191,11 +198,14 @@ $asset_suffix: if($variant == 'default', '', '-hc');
font-size: 100%;
&:hover {
background: transparentize(black,0.9);
border: 1px solid transparentize(black,0.8);
box-shadow: inset 0 1px transparentize(white,0.9), 1px 1px transparentize(black,0.8);
transition: 170ms ease all;
}
&:active {
box-shadow: 0 1px transparentize(white,0.9);
transition: 170ms ease all;
}
}
.option-subtitle {
@ -205,23 +215,29 @@ $asset_suffix: if($variant == 'default', '', '-hc');
// MPRIS Applet
.raven-mpris {
text-shadow: 0 1px $shadow_color;
icon-shadow: 0 1px $shadow_color;
color: $budgie_panel_fg_color;
background-color: transparentize($budgie_panel_bg_color, 0.2);
border: solid transparentize(black, 0.8);
border-width: 1px 0;
box-shadow:inset 0 1px 0 0 transparentize(white,0.9),inset 0 -1px 0 0 transparentize(white,0.95), 0 1px 1px 0 transparentize(black,0.9);
.button.image-button { padding: 8px; }
}
// Notifications
.budgie-notification-window {
border-radius: 1px;
border:none;
border-top: 1px solid transparentize(white,0.9);
border-radius: 4px;
background-color: $bg_color;
box-shadow: 0 2px 2px 0 $shadow_color;
}
.budgie-notification {
&.background {
background-color: white;
border-radius: 4px;
}
.notification-title {
@ -229,7 +245,10 @@ $asset_suffix: if($variant == 'default', '', '-hc');
color: $fg_color;
}
.notification-body { color: transparentize($budgie_panel_fg_color, 0.3); }
.notification-body {
border:none;
color: transparentize($budgie_panel_fg_color, 0.3);
}
}
.drop-shadow {