← Back to branch summary

~gunnarhj/ubuntu-themes/orange-links-back-please

« back to all changes in this revision

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

  • Committer: Bileto Bot
  • Author(s): Marco Trevisan (Treviño)
  • Date: 2018-03-22 08:26:00 UTC
  • mfrom: (600.4.5 ubuntu-themes)
  • Revision ID: ci-train-bot@canonical.com-20180322082600-ue3r92se312aqjlm
Ambiance: add proper theming for horizontal and vertical linked items

Also fix displacing issues in horizontal elements by removing margins in linked ones

Show diffs side-by-side

added added

removed removed

Lines of Context:
Radiance/gtk-3.20/gtk-widgets.css
266
266
.linked entry,
267
267
.linked button,
268
268
.linked combobox box.linked button,
 
269
.horizontal.linked entry,
 
270
.horizontal.linked button,
 
271
.horizontal.linked combobox box.linked button,
269
272
combobox entry + box.linked button {
270
273
    border-radius: 0;
271
274
    border-image-width: 10px 0 10px 0;
273
276
    box-shadow: inset -1px 0 shade (@bg_color, 0.84);
274
277
}
275
278
 
 
279
.linked entry:dir(rtl),
 
280
.linked button:dir(rtl),
 
281
.linked combobox box.linked button:dir(rtl),
 
282
.horizontal.linked entry:dir(rtl),
 
283
.horizontal.linked button:dir(rtl),
 
284
.horizontal.linked combobox box.linked button:dir(rtl),
 
285
combobox entry + box.linked button:dir(rtl) {
 
286
    box-shadow: inset 1px 0 shade (@bg_color, 0.84);
 
287
}
 
288
 
276
289
.linked entry:first-child,
277
290
.linked button:first-child,
278
291
.linked combobox:first-child box.linked button,
 
292
.horizontal.linked entry:first-child,
 
293
.horizontal.linked button:first-child,
 
294
.horizontal.linked combobox:first-child box.linked button,
279
295
combobox:first-child entry + box.linked button {
280
296
    border-image-width: 10px 0 10px 12px;
281
297
    border-radius: 8px 0 0 8px;
284
300
.linked entry:last-child,
285
301
.linked button:last-child,
286
302
.linked combobox:last-child box.linked button,
 
303
.horizontal.linked entry:last-child,
 
304
.horizontal.linked button:last-child,
 
305
.horizontal.linked combobox:last-child box.linked button,
287
306
combobox:last-child entry + box.linked button {
288
307
    border-image-width: 10px 12px 10px 0;
289
308
    border-radius: 0 8px 8px 0;
293
312
.linked entry:only-child,
294
313
.linked button:only-child,
295
314
.linked combobox:only-child box.linked button,
 
315
.horizontal.linked entry:only-child,
 
316
.horizontal.linked button:only-child,
 
317
.horizontal.linked combobox:only-child box.linked button,
 
318
.vertical.linked entry:only-child,
 
319
.vertical.linked button:only-child,
 
320
.vertical.linked combobox:only-child box.linked button,
296
321
combobox:only-child entry + box.linked button {
297
322
    border-image-width: 10px 12px 10px 12px;
298
323
    border-radius: 8px;
299
324
}
300
325
 
301
 
.linked entry:not(only-child):focus {
302
 
    border-image: none;
303
 
    border-color: @selected_bg_color;
304
 
    border-width: 1px;
305
 
    padding: 4px 5px;
306
 
}
307
 
 
308
 
.linked entry:first-child:focus {
309
 
    border-top-left-radius: 5px;
310
 
    border-bottom-left-radius: 5px;
311
 
    margin: 1px 0 1px 1px;
312
 
}
313
 
 
314
 
.linked entry:last-child:focus {
315
 
    border-top-right-radius: 5px;
316
 
    border-bottom-right-radius: 5px;
317
 
}
318
 
 
319
 
.linked entry:not(first-child):not(last-child):focus {
320
 
    border-radius: 0;
321
 
    margin: 1px 0;
 
326
.horizontal.linked entry:first-child:focus {
 
327
    border-top-left-radius: 5px;
 
328
    border-bottom-left-radius: 5px;
 
329
}
 
330
 
 
331
.horizontal.linked entry:last-child:focus {
 
332
    border-top-right-radius: 5px;
 
333
    border-bottom-right-radius: 5px;
 
334
    box-shadow: inset 1px 0 @selected_bg_color;
 
335
}
 
336
 
 
337
.horizontal.linked entry:not(first-child):not(last-child):focus {
 
338
    border-radius: 0;
 
339
    box-shadow: inset -1px 0 @selected_bg_color;
 
340
}
 
341
 
 
342
.horizontal.linked entry:only-child,
 
343
.horizontal.linked entry:only-child:focus {
 
344
    box-shadow: none;
 
345
}
 
346
 
 
347
.vertical.linked entry,
 
348
.vertical.linked > button,
 
349
.vertical.linked combobox box.linked button,
 
350
combobox entry + box.linked button {
 
351
    border-radius: 0;
 
352
    border-image-width: 0 12px 0 12px;
 
353
    border-width: 0 1px 0 1px;
 
354
    box-shadow: inset 0 1px shade (@bg_color, 0.84);
 
355
}
 
356
 
 
357
.vertical.linked entry:first-child,
 
358
.vertical.linked > button:first-child,
 
359
.vertical.linked combobox:first-child box.linked button,
 
360
combobox:first-child entry + box.linked button {
 
361
    border-image-width: 10px 12px 0 12px;
 
362
    border-radius: 8px 8px 0 0;
 
363
    box-shadow: none;
 
364
}
 
365
 
 
366
.vertical.linked entry:last-child,
 
367
.vertical.linked > button:last-child,
 
368
.vertical.linked combobox:last-child box.linked button,
 
369
combobox:last-child entry + box.linked button {
 
370
    border-image-width: 0 12px 10px 12px;
 
371
    border-radius: 0 0 8px 8px;
 
372
}
 
373
 
 
374
.vertical.linked entry:not(only-child):focus {
 
375
    box-shadow: inset 0px 1px shade (@selected_bg_color, 0.84),
 
376
                inset 0px -1px shade (@selected_bg_color, 0.84);
 
377
}
 
378
 
 
379
.vertical.linked entry:focus + entry
 
380
{
 
381
    box-shadow: none;
 
382
}
 
383
 
 
384
.vertical.linked entry:first-child:focus {
 
385
    border-top-left-radius: 5px;
 
386
    border-top-right-radius: 5px;
 
387
    box-shadow: inset 0px -1px shade (@selected_bg_color, 0.84);
 
388
}
 
389
 
 
390
.vertical.linked entry:last-child:focus {
 
391
    border-bottom-right-radius: 5px;
 
392
    border-bottom-left-radius: 5px;
 
393
    box-shadow: inset 0px 1px shade (@selected_bg_color, 0.84);
 
394
}
 
395
 
 
396
.vertical.linked entry:not(first-child):not(last-child):focus {
 
397
    border-radius: 0;
322
398
}
323
399
 
324
400
.primary-toolbar .linked button,
325
 
headerbar .linked button {
 
401
headerbar .horizontal.linked button {
326
402
    box-shadow: inset 1px 0 @panel_lighter_color,
327
403
                inset -1px 0 shade (@dark_bg_color, 0.9);
328
404
}
329
405
 
330
406
.primary-toolbar .linked button:first-child,
331
 
headerbar .linked button:first-child {
 
407
headerbar .horizontal.linked button:first-child {
332
408
    box-shadow: inset -1px 0 shade (@dark_bg_color, 0.9);
333
409
}
334
410
 
335
411
.primary-toolbar .linked button:last-child,
336
 
headerbar .linked button:last-child {
 
412
headerbar .horizontal.linked button:last-child {
337
413
    box-shadow: inset 1px 0 @panel_lighter_color
338
414
}
339
415
 
340
416
.primary-toolbar .linked button:active,
341
 
headerbar .linked button:active,
 
417
headerbar .horizontal.linked button:active,
342
418
.primary-toolbar .linked button:disabled,
343
 
headerbar .linked button:disabled {
 
419
headerbar .horizontal.linked button:disabled {
344
420
    box-shadow: inset 1px 0 shade (@dark_bg_color, 0.9);
345
421
}
346
422
 
347
423
.primary-toolbar .linked button:only-child,
348
 
headerbar .linked button:only-child {
 
424
headerbar .horizontal.linked button:only-child {
349
425
    box-shadow: none;
350
426
}
351
427
 
369
445
    border-radius: 0 8px 8px 0;
370
446
}
371
447
 
372
 
.linked.vertical button:backdrop:not(:only-child),
373
 
.linked.vertical button.destructive-action:backdrop:not(:only-child),
374
 
.linked.vertical button:disabled:not(:only-child),
375
 
.linked.vertical button.destructive-action:disabled:not(:only-child)
 
448
.linked.vertical > button:backdrop:not(:only-child),
 
449
.linked.vertical > button.destructive-action:backdrop:not(:only-child),
 
450
.linked.vertical > button:disabled:not(:only-child),
 
451
.linked.vertical > button.destructive-action:disabled:not(:only-child)
376
452
{
377
453
    background-image: inherit;
378
454
}
379
455
 
380
 
.linked.vertical button:not(:only-child) {
 
456
.linked.vertical > button:not(:only-child) {
381
457
    background-image: -gtk-gradient (linear, left top, right top,
382
458
                                     from (shade (@button_bg_color, 1.08)),
383
459
                                     color-stop (0.5, @button_bg_color),
384
460
                                     to (shade (@button_bg_color, 0.94)));
385
461
}
386
462
 
387
 
.linked.vertical button.destructive-action:not(:only-child) {
 
463
.linked.vertical > button.destructive-action:not(:only-child) {
388
464
    background-image: -gtk-gradient (linear, left top, right top,
389
465
                                     from (shade (@error_bg_color, 1.1)),
390
466
                                     color-stop (0.5, @error_bg_color),
391
467
                                     to (shade (@error_bg_color, 0.95)));
392
468
}
393
469
 
394
 
.linked.vertical button:hover:not(:only-child) {
 
470
.linked.vertical > button:hover:not(:only-child) {
395
471
    background-image: -gtk-gradient (linear, left top, right top,
396
472
                                     from (shade (@button_bg_color, 1.12)),
397
473
                                     color-stop (0.5, @button_bg_color),
398
474
                                     to (shade (@button_bg_color, 0.96)));
399
475
}
400
476
 
401
 
.linked.vertical button.destructive-action:hover:not(:only-child) {
 
477
.linked.vertical > button.destructive-action:hover:not(:only-child) {
402
478
    background-image: -gtk-gradient (linear, left top, right top,
403
479
                                     from (shade (@error_bg_color, 1.12)),
404
480
                                     color-stop (0.5, @error_bg_color),
405
481
                                     to (shade (@error_bg_color, 0.96)));
406
482
}
407
483
 
408
 
.linked.vertical button:checked:not(:only-child) {
 
484
.linked.vertical > button:checked:not(:only-child) {
409
485
    background-image: -gtk-gradient (linear, left top, right top,
410
486
                                     from (#cecece),
411
487
                                     to (#e8e8e8));
412
488
}
413
489
 
414
 
.linked.vertical button.destructive-action:checked:not(:only-child) {
 
490
.linked.vertical > button.destructive-action:checked:not(:only-child) {
415
491
    background-image: -gtk-gradient (linear, left top, right top,
416
492
                                     from (shade (@error_bg_color, 0.80)),
417
493
                                     to (shade (@error_bg_color, 1.2)));
418
494
}
419
495
 
420
 
.linked.vertical button:active:not(:only-child) {
 
496
.linked.vertical > button:active:not(:only-child) {
421
497
    background-image: -gtk-gradient (linear, left top, right top,
422
498
                                     from (#dcdcdc),
423
499
                                     to (#f3f3f3));
424
500
}
425
501
 
426
 
.linked.vertical button.destructive-action:active:not(:only-child) {
 
502
.linked.vertical > button.destructive-action:active:not(:only-child) {
427
503
    background-image: -gtk-gradient (linear, left top, right top,
428
504
                                     from (shade (@error_bg_color, 0.87)),
429
505
                                     to (shade (@error_bg_color, 1.1)));
430
506
}
431
507
 
432
 
.linked.vertical button:checked:disabled:not(:only-child),
433
 
.linked.vertical button:active:disabled:not(:only-child) {
 
508
.linked.vertical > button:checked:disabled:not(:only-child),
 
509
.linked.vertical > button:active:disabled:not(:only-child) {
434
510
    background-image: -gtk-gradient (linear, left top, right top,
435
511
                                     from (#e3e3e3),
436
512
                                     to (#f3f3f3));
437
513
}
438
514
 
439
 
.linked.vertical button:checked:disabled:backdrop:not(:only-child) {
 
515
.linked.vertical > button:checked:disabled:backdrop:not(:only-child) {
440
516
    background-image: -gtk-gradient (linear, left top, right top,
441
517
                                     from (mix (#e3e3e3, @bg_color, 0.5)),
442
518
                                     to (mix (#f3f3f3, @bg_color, 0.5)));
443
519
}
444
520
 
445
 
.linked.vertical button {
 
521
.linked.vertical > button {
446
522
    box-shadow: none;
447
523
}
448
524
 
449
 
.linked.vertical button:not(:last-child) {
 
525
.linked.vertical > button:not(:last-child) {
450
526
    box-shadow: inset 0 -1px 0 0 shade (@bg_color, 0.84);
451
527
}
452
528
 
453
 
.linked.vertical button:first-child:not(:last-child) {
 
529
.linked.vertical > button:first-child:not(:last-child) {
454
530
    border-width: 1px 1px 0 1px;
455
531
    border-radius: 8px 8px 0 0;
456
532
    border-image-width: 10px 12px 0 12px;
457
533
}
458
534
 
459
 
.linked.vertical button:not(:first-child):not(:last-child) {
 
535
.linked.vertical > button:not(:first-child):not(:last-child) {
460
536
    border-radius: 0;
461
537
    border-width: 0 1px 0 1px;
462
538
    border-image-width: 0 12px 0 12px;
463
539
}
464
540
 
465
 
.linked.vertical button:last-child:not(:first-child) {
 
541
.linked.vertical > button:last-child:not(:first-child) {
466
542
    border-radius: 0 0 8px 8px;
467
543
    border-width: 0 1px 1px 1px;
468
544
    border-image-width: 0 12px 10px 12px;
890
966
 ************/
891
967
 
892
968
.view,
893
 
list {
 
969
list:not(:backdrop) {
894
970
    background-color: @base_color;
895
971
    color: @text_color;
896
972
}
2170
2246
    color: @fg_color;
2171
2247
}
2172
2248
 
 
2249
.linked.vertical spinbutton {
 
2250
    border-radius: 0;
 
2251
    border-image-width: 0 12px 0 12px;
 
2252
    border-width: 0 1px 0 1px;
 
2253
    box-shadow: inset 0 1px shade (@bg_color, 0.84);
 
2254
}
 
2255
 
2173
2256
/***********
2174
2257
 * spinner *
2175
2258
 ***********/