← Back to branch summary

~ci-train-bot/ubuntu-themes/ubuntu-themes-ubuntu-xenial-landing-064

« back to all changes in this revision

Viewing changes to Radiance/gtk-3.0/gtk-widgets.css

  • Committer: CI Train Bot
  • Author(s): Marco Trevisan (Treviño)
  • Date: 2015-09-10 13:27:10 UTC
  • mfrom: (448.2.14 ubuntu-themes)
  • Revision ID: ci-train-bot@canonical.com-20150910132710-34h0qvcng2h3o0kv
Ambiance, Radiance: make overlay scrollbars too look more like the ubuntu designed ones

 - Remove the ugly background-gradient (and the highly rounded corners)
 - Show scrollbar track background only when using it (hovering or dragging)
 - Use some margin instead of resizing the scrollbar to get some proximity support on
   mouse enter as well (it will be shown when mouse is near)
 - Add some threshold pixels (2 now) for grabbing the slider
 - Add backdrop version Fixes: #1450747, #1493607
Approved by: Lars Uebernickel, PS Jenkins bot

Show diffs side-by-side

added added

removed removed

Lines of Context:
Radiance/gtk-3.0/gtk-widgets.css
1006
1006
    border-radius: 8px;
1007
1007
    border-width: 0px;
1008
1008
    background-image: none;
1009
 
    background-color: #b0b0b0;
 
1009
    background-color: @backdrop_filling_bg;
1010
1010
}
1011
1011
 
1012
1012
.scale.highlight.left:insensitive {
1073
1073
.level-bar.fill-block:backdrop,
1074
1074
.level-bar.fill-block.level-high:backdrop,
1075
1075
.level-bar.fill-block.level-low:backdrop {
1076
 
    background-color: #b0b0b0;
1077
 
    border-color: #b0b0b0;
 
1076
    background-color: @backdrop_filling_bg;
 
1077
    border-color: @backdrop_filling_bg;
1078
1078
    background-image: none;
1079
1079
}
1080
1080
 
1162
1162
    -GtkScrollbar-has-forward-stepper: 0;
1163
1163
    -GtkScrollbar-trough-border: 0;
1164
1164
    -GtkScrollbar-min-slider-length: 31;
1165
 
    -GtkRange-slider-width: 3;
 
1165
    -GtkRange-slider-width: 10;
1166
1166
 
 
1167
    background-image: none;
 
1168
    background-size: 0;
1167
1169
    border: none;
 
1170
    border-radius: 0;
1168
1171
}
1169
1172
 
1170
 
.scrollbar.hovering,
 
1173
.scrollbar:hover,
1171
1174
.scrollbar.dragging {
1172
 
    -GtkRange-slider-width: 10;
1173
 
    background-color: alpha(@bg_color, 0.8);
 
1175
    background-color: @scrollbar_track_color;
 
1176
}
 
1177
 
 
1178
.scrollbar:hover:backdrop,
 
1179
.scrollbar.dragging:backdrop {
 
1180
    background-color: @backdrop_selected_bg_color;
 
1181
}
 
1182
 
 
1183
/* Adding margins, so actual visible size is: -GtkRange-slider-width - margin
 
1184
 * this allows to keep the slider smaller, but keeping few threshold pixels
 
1185
 */
 
1186
.scrollbar.vertical:hover:dir(ltr),
 
1187
.scrollbar.vertical.dragging:dir(ltr) {
 
1188
    margin-left: 2px;
 
1189
}
 
1190
 
 
1191
.scrollbar.vertical:hover:dir(rtl),
 
1192
.scrollbar.vertical.dragging:dir(rtl) {
 
1193
    margin-right: 2px;
 
1194
}
 
1195
 
 
1196
.scrollbar.horizontal:hover,
 
1197
.scrollbar.horizontal.dragging,
 
1198
.scrollbar.horizontal.slider:hover,
 
1199
.scrollbar.horizontal.slider.dragging {
 
1200
    margin-top: 2px;
1174
1201
}
1175
1202
 
1176
1203
.scrollbar.slider {
1177
1204
    background-color: alpha(@selected_bg_color, 0.8);
1178
 
    border-radius: 8px;
 
1205
    border-radius: 1px;
 
1206
}
 
1207
 
 
1208
.scrollbar.slider.hovering,
 
1209
.scrollbar.slider.dragging {
 
1210
    border-radius: 2px;
 
1211
    margin: 0;
 
1212
}
 
1213
 
 
1214
/* Adding margins, so actual visible size is: -GtkRange-slider-width - margin
 
1215
 * this allows to define some kind of proximity effect also on mouse-enter
 
1216
 */
 
1217
.scrollbar.slider.vertical:dir(ltr):not(:hover):not(.dragging) {
 
1218
    margin-left: 7px;
 
1219
}
 
1220
 
 
1221
.scrollbar.slider.vertical:dir(rtl):not(:hover):not(.dragging) {
 
1222
    margin-right: 7px;
 
1223
}
 
1224
 
 
1225
.scrollbar.slider.horizontal:not(:hover):not(.dragging) {
 
1226
    margin-top: 7px;
 
1227
}
 
1228
 
 
1229
.scrollbar.slider:hover {
 
1230
    background-color: alpha(@selected_bg_color, 0.85);
1179
1231
}
1180
1232
 
1181
1233
.scrollbar.slider:active {
1182
1234
    background-color: @selected_bg_color;
1183
1235
}
1184
1236
 
 
1237
.scrollbar.slider:backdrop {
 
1238
    background-color: alpha(@backdrop_filling_bg, 0.8);
 
1239
}
 
1240
 
 
1241
.scrollbar.slider:hover:backdrop {
 
1242
    background-color: alpha(@backdrop_filling_bg, 0.85);
 
1243
}
 
1244
 
 
1245
.scrollbar.slider:active:backdrop {
 
1246
    background-color: @backdrop_filling_bg;
 
1247
}
 
1248
 
1185
1249
/*******************
1186
1250
 * scrolled window *
1187
1251
 *******************/