← Back to branch summary

~willcooke/ubuntu-themes/geditspecific

« back to all changes in this revision

Viewing changes to Ambiance/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:
Ambiance/gtk-3.0/gtk-widgets.css
983
983
    border-radius: 8px;
984
984
    border-width: 0px;
985
985
    background-image: none;
986
 
    background-color: #b0b0b0;
 
986
    background-color: @backdrop_filling_bg;
987
987
}
988
988
 
989
989
.scale.highlight.left:insensitive {
1050
1050
.level-bar.fill-block:backdrop,
1051
1051
.level-bar.fill-block.level-high:backdrop,
1052
1052
.level-bar.fill-block.level-low:backdrop {
1053
 
    background-color: #b0b0b0;
1054
 
    border-color: #b0b0b0;
 
1053
    background-color: @backdrop_filling_bg;
 
1054
    border-color: @backdrop_filling_bg;
1055
1055
    background-image: none;
1056
1056
}
1057
1057
 
1140
1140
    -GtkScrollbar-has-forward-stepper: 0;
1141
1141
    -GtkScrollbar-trough-border: 0;
1142
1142
    -GtkScrollbar-min-slider-length: 31;
1143
 
    -GtkRange-slider-width: 3;
 
1143
    -GtkRange-slider-width: 10;
1144
1144
 
 
1145
    background-image: none;
 
1146
    background-size: 0;
1145
1147
    border: none;
 
1148
    border-radius: 0;
1146
1149
}
1147
1150
 
1148
 
.scrollbar.hovering,
 
1151
.scrollbar:hover,
1149
1152
.scrollbar.dragging {
1150
 
    -GtkRange-slider-width: 10;
1151
 
    background-color: alpha(@bg_color, 0.8);
 
1153
    background-color: @scrollbar_track_color;
 
1154
}
 
1155
 
 
1156
.scrollbar:hover:backdrop,
 
1157
.scrollbar.dragging:backdrop {
 
1158
    background-color: @backdrop_selected_bg_color;
 
1159
}
 
1160
 
 
1161
/* Adding margins, so actual visible size is: -GtkRange-slider-width - margin
 
1162
 * this allows to keep the slider smaller, but keeping few threshold pixels
 
1163
 */
 
1164
.scrollbar.vertical:hover:dir(ltr),
 
1165
.scrollbar.vertical.dragging:dir(ltr) {
 
1166
    margin-left: 2px;
 
1167
}
 
1168
 
 
1169
.scrollbar.vertical:hover:dir(rtl),
 
1170
.scrollbar.vertical.dragging:dir(rtl) {
 
1171
    margin-right: 2px;
 
1172
}
 
1173
 
 
1174
.scrollbar.horizontal:hover,
 
1175
.scrollbar.horizontal.dragging,
 
1176
.scrollbar.horizontal.slider:hover,
 
1177
.scrollbar.horizontal.slider.dragging {
 
1178
    margin-top: 2px;
1152
1179
}
1153
1180
 
1154
1181
.scrollbar.slider {
1155
1182
    background-color: alpha(@selected_bg_color, 0.8);
1156
 
    border-radius: 8px;
 
1183
    border-radius: 1px;
 
1184
}
 
1185
 
 
1186
.scrollbar.slider.hovering,
 
1187
.scrollbar.slider.dragging {
 
1188
    border-radius: 2px;
 
1189
    margin: 0;
 
1190
}
 
1191
 
 
1192
/* Adding margins, so actual visible size is: -GtkRange-slider-width - margin
 
1193
 * this allows to define some kind of proximity effect also on mouse-enter
 
1194
 */
 
1195
.scrollbar.slider.vertical:dir(ltr):not(:hover):not(.dragging) {
 
1196
    margin-left: 7px;
 
1197
}
 
1198
 
 
1199
.scrollbar.slider.vertical:dir(rtl):not(:hover):not(.dragging) {
 
1200
    margin-right: 7px;
 
1201
}
 
1202
 
 
1203
.scrollbar.slider.horizontal:not(:hover):not(.dragging) {
 
1204
    margin-top: 7px;
 
1205
}
 
1206
 
 
1207
.scrollbar.slider:hover {
 
1208
    background-color: alpha(@selected_bg_color, 0.85);
1157
1209
}
1158
1210
 
1159
1211
.scrollbar.slider:active {
1160
1212
    background-color: @selected_bg_color;
1161
1213
}
1162
1214
 
 
1215
.scrollbar.slider:backdrop {
 
1216
    background-color: alpha(@backdrop_filling_bg, 0.8);
 
1217
}
 
1218
 
 
1219
.scrollbar.slider:hover:backdrop {
 
1220
    background-color: alpha(@backdrop_filling_bg, 0.85);
 
1221
}
 
1222
 
 
1223
.scrollbar.slider:active:backdrop {
 
1224
    background-color: @backdrop_filling_bg;
 
1225
}
 
1226
 
1163
1227
/*******************
1164
1228
 * scrolled window *
1165
1229
 *******************/