AuroraMiddleware/gtk
1
0
Fork 1
mirror of https://gitlab.gnome.org/GNOME/gtk.git synced 2025-01-13 14:00:09 +00:00
Code Issues Projects Releases Wiki Activity

Adwaita: border rationalization and cleanup

Browse Source 
Rely only on border-style for border, take out border-width and
border-style from drawing functions.
This commit is contained in:
Lapo Calamandrei 2014-08-28 15:42:17 +02:00
parent 5ad60caa3c
commit 68d6968955
4 changed files with 76 additions and 441 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
gtk/resources/theme/Adwaita/_common.scss
View File

@ -208,6 +208,7 @@ GtkTextView { // This will get overridden by .view, needed by gedit line numbers
****************/ ****************/
.entry { .entry {
border: 1px solid;
padding: 5px 8px 6px; padding: 5px 8px 6px;
&.image { // icons inside the entry &.image { // icons inside the entry
&.left { padding-left: 0; } &.left { padding-left: 0; }
@ -316,6 +317,7 @@ $_dot_color: if($variant=='light', $selected_bg_color,
.button { .button {
border: 1px solid;
border-radius: 3px; border-radius: 3px;
transition: all 200ms ease-out; transition: all 200ms ease-out;
padding: 5px 8px 6px; padding: 5px 8px 6px;
@ -708,14 +710,14 @@ GtkColorButton.button {
.spinbutton { .spinbutton {
.button { .button {
background-image: none; background-image: none;
border-width: 0 0 0 1px; border-style: none none none solid;
border-color: transparentize($borders_color,0.7); border-color: transparentize($borders_color,0.7);
color: mix($fg_color,$base_color,95%); color: mix($fg_color,$base_color,95%);
border-radius: 0; border-radius: 0;
box-shadow: none; box-shadow: none;
// padding-left: 6px; // padding-left: 6px;
// padding-right: 6px; // padding-right: 6px;
&:dir(rtl) { border-width: 0 1px 0 0; } &:dir(rtl) { border-style: none solid none none; }
&:hover { &:hover {
color: $fg_color; color: $fg_color;
background-color: transparentize($fg_color,0.95); background-color: transparentize($fg_color,0.95);
@ -734,8 +736,8 @@ GtkColorButton.button {
&:backdrop:insensitive { &:backdrop:insensitive {
background-image: none; background-image: none;
color: transparentize($backdrop_insensitive_color,0.7); color: transparentize($backdrop_insensitive_color,0.7);
border-width: 0 0 0 1px; // It is needed or it gets overridden border-style: none none none solid; // It is needed or it gets overridden
&:dir(rtl) { border-width: 0 1px 0 0; } &:dir(rtl) { border-style: none solid none none; }
} }
} }
&.vertical, &.vertical:dir(rtl) { &.vertical, &.vertical:dir(rtl) {
@ -795,11 +797,11 @@ GtkColorButton.button {
} }
%top_button { %top_button {
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
border-bottom-width: 0; border-style: solid solid none solid;
} }
%bottom_button { %bottom_button {
border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
border-top-width: 0; border-style: none solid solid solid;
} }
} }
/* This is to fix spinbuttons in entries, but I feel like hiding code issues /* This is to fix spinbuttons in entries, but I feel like hiding code issues
@ -1146,7 +1148,7 @@ column-header.button.dnd { // for treeview-like derive widgets
%column_header_button { %column_header_button {
padding: 3px 6px; padding: 3px 6px;
border-width: 0 1px 1px 0; border-style: none solid solid none;
border-radius: 0; border-radius: 0;
background-image: none; background-image: none;
border-color: $bg_color; border-color: $bg_color;
@ -1157,7 +1159,7 @@ column-header.button.dnd { // for treeview-like derive widgets
} }
&:backdrop { &:backdrop {
border-color: $backdrop_bg_color; border-color: $backdrop_bg_color;
border-width: 0 1px 1px 0; border-style: none solid solid none;
color: mix($backdrop_fg_color, $backdrop_bg_color,50%); color: mix($backdrop_fg_color, $backdrop_bg_color,50%);
background-image: none; background-image: none;
background-color: $backdrop_base_color; background-color: $backdrop_base_color;
@ -1227,7 +1229,6 @@ GtkTreeView.view.progressbar { //Progressbar in treeview cells
margin: 4px; margin: 4px;
padding: 0px; padding: 0px;
background-color: $base_color; background-color: $base_color;
//border: 1px solid $borders_color;
.menuitem { .menuitem {
text-shadow: none; text-shadow: none;
padding: 4px; padding: 4px;
@ -1259,9 +1260,7 @@ GtkTreeView.view.progressbar { //Progressbar in treeview cells
.popover { .popover {
margin: 10px; margin: 10px;
padding: 2px; padding: 2px;
border-color: $borders-color; border: 1px solid $borders-color;
border-width: 1px;
border-style: solid;
border-radius: 5px; border-radius: 5px;
//background-clip: border-box; //background-clip: border-box;
background-color: $bg_color; background-color: $bg_color;
@ -1620,7 +1619,6 @@ GtkTreeView.view.progressbar { //Progressbar in treeview cells
**********/ **********/
GtkSwitch { GtkSwitch {
// FIXME: backdrop insensinsitive slider on the dark variant
-GtkSwitch-slider-width: 45px; // 55px is the right value to make it as tall -GtkSwitch-slider-width: 45px; // 55px is the right value to make it as tall
// as buttons, not doing that for now // as buttons, not doing that for now
font-weight: bold; font-weight: bold;
@ -1631,10 +1629,8 @@ GtkSwitch {
// clipped // clipped
&.trough { &.trough {
// similar to the .scale // similar to the .scale
border-width: 1px; border: 1px solid $borders_color;
border-style: solid;
border-radius: 3px; border-radius: 3px;
border-color: $borders_color;
background-image: linear-gradient(to bottom, background-image: linear-gradient(to bottom,
mix($bg_color,$borders_color,60%)); mix($bg_color,$borders_color,60%));
text-shadow: 0 1px transparentize(black, 0.9); text-shadow: 0 1px transparentize(black, 0.9);
@ -1682,6 +1678,7 @@ GtkSwitch {
} }
&.slider, &.slider,
.list-row:selected &.slider { .list-row:selected &.slider {
border: 1px solid;
border-radius: 3px; border-radius: 3px;
@include button(normal, $noedge: true); @include button(normal, $noedge: true);
box-shadow: inset 0 1px if($variant=='light', white, box-shadow: inset 0 1px if($variant=='light', white,
@ -1817,6 +1814,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
&.slider { &.slider {
//FIXME: better gradient on the slider and hover state //FIXME: better gradient on the slider and hover state
@include button(normal, $noedge: true); @include button(normal, $noedge: true);
border: 1px solid;
border-radius: 50%; border-radius: 50%;
border-color: darken($borders_color,3%); border-color: darken($borders_color,3%);
box-shadow: inset 0 1px if($variant=='light', white, box-shadow: inset 0 1px if($variant=='light', white,
@ -1863,10 +1861,8 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
} }
} }
&.trough { &.trough {
border-width: 1px; border: 1px solid $borders_color;
border-style: solid;
border-radius: 3px; border-radius: 3px;
border-color: $borders_color;
background-color: mix($bg_color,$borders_color,60%); background-color: mix($bg_color,$borders_color,60%);
box-shadow: inset 1px 1px transparentize(black, 0.9), box-shadow: inset 1px 1px transparentize(black, 0.9),
$widget_edge; $widget_edge;
@ -1994,10 +1990,8 @@ GtkProgressBar {
// moving bit // moving bit
.progressbar { .progressbar {
@include progressbar_fill; @include progressbar_fill;
border-width: 1px; border: 1px solid $selected_borders_color;
border-style: solid;
border-radius: 1.5px; border-radius: 1.5px;
border-color: $selected_borders_color;
box-shadow: none; //needed for clipping box-shadow: none; //needed for clipping
&.left { &.left {
border-top-left-radius: 3px; border-top-left-radius: 3px;
@ -2030,7 +2024,7 @@ GtkProgressBar {
box-shadow: none; box-shadow: none;
} }
&.osd { &.osd {
border-width: 0; border-style: none;
border-radius: 0; border-radius: 0;
-GtkProgressBar-xspacing: 0; -GtkProgressBar-xspacing: 0;
-GtkProgressBar-yspacing: 2px; -GtkProgressBar-yspacing: 2px;
@ -2040,22 +2034,18 @@ GtkProgressBar {
// background // background
GtkProgressBar.trough { GtkProgressBar.trough {
border-width: 1px; border: 1px solid $borders_color;
border-style: solid;
border-radius: 3px; border-radius: 3px;
border-color: $borders_color;
background-color: mix($borders_color,$bg_color, 35%); background-color: mix($borders_color,$bg_color, 35%);
// box-shadow: inset 1px 1px transparentize(black, 0.9),
// $widget_edge;
&:backdrop{ &:backdrop{
border-color: $backdrop_borders_color; border-color: $backdrop_borders_color;
background-color: $backdrop_dark_fill; background-color: $backdrop_dark_fill;
box-shadow: 0 1px transparentize(white,1); box-shadow: 0 1px transparentize(white,1);
} }
&.osd { &.osd {
border-style: none;
background-color: transparent; background-color: transparent;
box-shadow: none; box-shadow: none;
border-width: 0;
//FIXME: there is a margin on top //FIXME: there is a margin on top
} }
} }
@ -2077,7 +2067,7 @@ GtkLevelBar.vertical {
.level-bar { .level-bar {
&.trough { &.trough {
// FIXME: outset not working border: 1px solid;
padding: 2px; padding: 2px;
border-radius: 3px; border-radius: 3px;
@include entry(normal); @include entry(normal);
@ -2088,9 +2078,7 @@ GtkLevelBar.vertical {
&.fill-block { &.fill-block {
// FIXME: it would be nice to set make fill blocks bigger, but we'd need // FIXME: it would be nice to set make fill blocks bigger, but we'd need
// :nth-child working on discrete indicators // :nth-child working on discrete indicators
border-width: 1px; border: 1px solid if($variant=='light', darken($selected_bg_color,10%),
border-style: solid;
border-color: if($variant=='light', darken($selected_bg_color,10%),
darken($selected_bg_color,5%)); darken($selected_bg_color,5%));
background-color: $selected_bg_color; background-color: $selected_bg_color;
box-shadow: 0 1px transparentize(black, 0.9); box-shadow: 0 1px transparentize(black, 0.9);
@ -2153,7 +2141,8 @@ GtkLevelBar.vertical {
GtkScrolledWindow { GtkScrolledWindow {
.frame { border-radius: 2px; } .frame { border-radius: 2px; }
GtkViewport.frame { // avoid double borders when viewport inside scrolled window GtkViewport.frame { // avoid double borders when viewport inside
// scrolled window
border-style: none; border-style: none;
} }
} }
@ -2248,7 +2237,7 @@ GtkScrolledWindow {
padding: 0 4px; padding: 0 4px;
&:backdrop { background-image: none; } &:backdrop { background-image: none; }
.button { .button {
border-width: 1px; border: 1px solid;
color: $osd_fg_color; color: $osd_fg_color;
outline-color: transparentize($osd_fg_color, 0.8); outline-color: transparentize($osd_fg_color, 0.8);
@include button(osd); @include button(osd);
@ -2472,7 +2461,6 @@ GtkPaned {
* GtkInfoBar * * GtkInfoBar *
**************/ **************/
GtkInfoBar { GtkInfoBar {
border-width: 0;
border-style: none; border-style: none;
} }
@ -2513,7 +2501,6 @@ GtkInfoBar {
border-radius: 5px; border-radius: 5px;
background-color: transparentize(black,0.2); //FIXME proper color background-color: transparentize(black,0.2); //FIXME proper color
text-shadow: 0 1px black; text-shadow: 0 1px black;
// border: 2px solid $borders_color; gnome shell style?
} }
.tooltip * { //Yeah this is ugly .tooltip * { //Yeah this is ugly
@ -2527,9 +2514,7 @@ GtkInfoBar {
*****************/ *****************/
GtkColorSwatch { GtkColorSwatch {
border: 1px solid;
border-width: 1px;
border-style: solid;
@if $variant == light { @if $variant == light {
border-color: transparentize(black,0.7); border-color: transparentize(black,0.7);
box-shadow: inset 0 1px 1px transparentize(black, 0.8); box-shadow: inset 0 1px 1px transparentize(black, 0.8);

4
gtk/resources/theme/Adwaita/_drawing.scss
View File

@ -29,8 +29,6 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
// normal, focus, insensitive, backdrop, backdrop-insensitive; // normal, focus, insensitive, backdrop, backdrop-insensitive;
// //
background-color: transparent; background-color: transparent;
border-style: solid;
border-width: 1px;
background-image: linear-gradient(to bottom, background-image: linear-gradient(to bottom,
darken($base_color,3%), darken($base_color,3%),
$base_color 90%); $base_color 90%);
@ -141,7 +139,6 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active, // backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated // osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
// //
border-style: solid;
$_top_hilight: if(lightness($c)> 70%, white, transparentize(white,0.9)); //not just dark/light but colored buttons $_top_hilight: if(lightness($c)> 70%, white, transparentize(white,0.9)); //not just dark/light but colored buttons
@ -149,7 +146,6 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
// //
// normal button // normal button
// //
border-width: 1px;
color: $tc; color: $tc;
background-image: linear-gradient(to bottom, background-image: linear-gradient(to bottom,
lighten($c,5%), lighten($c,5%),

221
gtk/resources/theme/Adwaita/gtk-contained-dark.css
View File

File diff suppressed because it is too large Load Diff

221
gtk/resources/theme/Adwaita/gtk-contained.css
View File

File diff suppressed because it is too large Load Diff