diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss index 81b608d4e9..f040a9f346 100644 --- a/gtk/theme/HighContrast/_common.scss +++ b/gtk/theme/HighContrast/_common.scss @@ -2,6 +2,8 @@ @return unquote("alpha(#{$c},#{$a})"); } +$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); + * { padding: 0; -GtkToolButton-icon-spacing: 4; @@ -570,7 +572,6 @@ $_dot_color: $selected_bg_color; border-color: transparent; background-color: transparent; background-image: none; - box-shadow: inset 0 1px transparentize(white,1); text-shadow: none; icon-shadow: none; } @@ -1466,7 +1467,7 @@ GtkSwitch { inset 0 -2px transparentize($bg_color,0.4), inset 0 -1px mix($bg_color,$borders_color,50%); } - &:active { border: 1px solid $selected_borders_color; } + &:active { border-color: $selected_borders_color; } &:insensitive { @include button(insensitive, $edge: none); } &:backdrop { @include button(backdrop); &:active{ border-color: $selected_bg_color; } @@ -1804,6 +1805,24 @@ GtkScrolledWindow { padding: 2px; } +.list-row.button, +.list-row.button:backdrop, +.list-row.button:backdrop:active, +.list-row.button:backdrop:checked, +.list-row.button:backdrop:insensitive, +.list-row.button:backdrop:insensitive:active, +.list-row.button:backdrop:insensitive:checked, +.list-row.button:insensitive:active, +.list-row.button:insensitive:checked { + // reset button inherited stuff + @extend %undecorated_button; + background-color: transparentize($base_color,1); // for the transition + border-style: none; // I need no borders here + border-radius: 0; // and no rounded corners + box-shadow: none; // and no box-shadow + +} + .list-row.button { @extend %undecorated_button; background-color: transparentize($base_color,1); // for the transition @@ -1811,28 +1830,72 @@ GtkScrolledWindow { border-radius: 0; // and no rounded corners box-shadow: none; // and no box-shadow &:hover { - background-color: mix(black, $base_color, 5%); + background-color: mix($fg_color, $base_color, 5%); } &:active { - box-shadow: inset 0 2px 2px -2px transparentize(black,0.8); + box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); } &:selected { - &:active { box-shadow: inset 0 2px 3px -1px transparentize(black,0.5); } + &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); } &:hover { - background-color: mix(black, $selected_bg_color, 10%); + background-color: mix($fg_color, $selected_bg_color, 10%); } - } - &:backdrop:hover { - @extend %undecorated_button; + &:backdrop { background-color: $selected_bg_color; } } } .list-row:selected { - background-color: $selected_bg_color; - color: $selected_fg_color; - &:backdrop { color: $backdrop_base_color;} + @extend %selected_items; + .button { + @include button(normal, $edge:none); + border-color: $selected_borders_color; + &.flat { + @include button(undecorated, $edge:none); + color: $selected_fg_color; + } + &:hover { + @include button(hover, $edge:none); + border-color: $selected_borders_color; + } + &:active, &:checked { + @include button(active, $edge:none); + border-color: $selected_borders_color; + } + &:backdrop, &.flat:backdrop { + @include button(backdrop, $edge:none); + border-color: $selected_borders_color; + &:active, &:checked { + @include button(backdrop-active, $edge:none); + border-color: $selected_borders_color; + } + &:insensitive { + @include button(backdrop-insensitive, $edge:none); + border-color: $selected_borders_color; + &:active, &:checked { + @include button(backdrop-insensitive-active, $edge:none); + border-color: $selected_borders_color; + } + } + } + &.flat:backdrop { + @include button(undecorated); + color: $backdrop_base_color; + } + &:insensitive { + @include button(insensitive, $edge:none); + border-color: $selected_borders_color; + &:active, &:checked { @include button(insensitive-active, $edge:none); } + } + } } +// transition +.list-row, list-row.button { + transition: all 300ms $ease-out-quad; + &:hover { transition: none; } +} + + /********************* * App Notifications * *********************/ diff --git a/gtk/theme/HighContrast/gtk.css b/gtk/theme/HighContrast/gtk.css index 43241e7845..56118d1356 100644 --- a/gtk/theme/HighContrast/gtk.css +++ b/gtk/theme/HighContrast/gtk.css @@ -766,11 +766,18 @@ border-radius: 3px; border-style: solid; } -.button.flat, .button.flat:backdrop, .button.flat:insensitive:backdrop, .menuitem.button.flat, .menuitem.button.flat:backdrop, .button:link, .button:visited, .button:link:hover, .button:link:active, .button:visited:hover, .button:visited:active, .button:link:backdrop, .button:visited:backdrop, .notebook tab .button, .list-row.button, .list-row.button:backdrop:hover, GtkCalendar.button, GtkCalendar.button:hover, GtkCalendar.button:backdrop, GtkCalendar.button:backdrop:hover { +.button.flat, .button.flat:backdrop, .button.flat:insensitive:backdrop, .menuitem.button.flat, .menuitem.button.flat:backdrop, .button:link, .button:visited, .button:link:hover, .button:link:active, .button:visited:hover, .button:visited:active, .button:link:backdrop, .button:visited:backdrop, .notebook tab .button, .list-row.button, +.list-row.button:backdrop, +.list-row.button:backdrop:active, +.list-row.button:backdrop:checked, +.list-row.button:backdrop:insensitive, +.list-row.button:backdrop:insensitive:active, +.list-row.button:backdrop:insensitive:checked, +.list-row.button:insensitive:active, +.list-row.button:insensitive:checked, GtkCalendar.button, GtkCalendar.button:hover, GtkCalendar.button:backdrop, GtkCalendar.button:backdrop:hover { border-color: transparent; background-color: transparent; background-image: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; icon-shadow: none; } @@ -1665,7 +1672,7 @@ GtkSwitch { background-image: none; box-shadow: inset 0 1px white, inset 0 -2px rgba(255, 255, 255, 0.6), inset 0 -1px #bfbfbf; } GtkSwitch.slider:active { - border: 1px solid #000; } + border-color: #000; } GtkSwitch.slider:insensitive { border-width: 2px; border-style: solid; @@ -1975,11 +1982,11 @@ GtkLevelBar.vertical { .level-bar.fill-block.empty-fill-block:backdrop { border-color: rgba(0, 0, 0, 0.15); } -.view:selected, GtkCalendar:selected, .view:selected:focus, GtkCalendar:focus:selected, .view:selected:hover, GtkCalendar:hover:selected, .label:selected, .label:selected:focus, .label:selected:hover, .label:backdrop:selected, .entry:selected, .entry:selected:focus, .menuitem.button.flat:hover, .menuitem.button.flat:selected, .sidebar:selected, GtkPlacesSidebar.sidebar .view:selected, GtkPlacesSidebar.sidebar GtkCalendar:selected { +.view:selected, GtkCalendar:selected, .view:selected:focus, GtkCalendar:focus:selected, .view:selected:hover, GtkCalendar:hover:selected, .label:selected, .label:selected:focus, .label:selected:hover, .label:backdrop:selected, .entry:selected, .entry:selected:focus, .menuitem.button.flat:hover, .menuitem.button.flat:selected, .list-row:selected, .sidebar:selected, GtkPlacesSidebar.sidebar .view:selected, GtkPlacesSidebar.sidebar GtkCalendar:selected { background-color: #000; color: #fff; outline-color: rgba(255, 255, 255, 0.3); } - .view:backdrop:selected, GtkCalendar:backdrop:selected, GtkCalendar:backdrop:focus:selected, GtkCalendar:backdrop:hover:selected, .label:backdrop:selected, .entry:backdrop:selected, .menuitem.button.flat:backdrop:hover, .menuitem.button.flat:backdrop:selected, .sidebar:backdrop:selected, GtkPlacesSidebar.sidebar .view:backdrop:selected, GtkPlacesSidebar.sidebar GtkCalendar:backdrop:selected { + .view:backdrop:selected, GtkCalendar:backdrop:selected, GtkCalendar:backdrop:focus:selected, GtkCalendar:backdrop:hover:selected, .label:backdrop:selected, .entry:backdrop:selected, .menuitem.button.flat:backdrop:hover, .menuitem.button.flat:backdrop:selected, .list-row:backdrop:selected, .sidebar:backdrop:selected, GtkPlacesSidebar.sidebar .view:backdrop:selected, GtkPlacesSidebar.sidebar GtkCalendar:backdrop:selected { background-color: #7f7f7f; color: #fff; } @@ -2022,6 +2029,20 @@ GtkPlacesSidebar.sidebar .view .separator:backdrop { .grid-child { padding: 2px; } +.list-row.button, +.list-row.button:backdrop, +.list-row.button:backdrop:active, +.list-row.button:backdrop:checked, +.list-row.button:backdrop:insensitive, +.list-row.button:backdrop:insensitive:active, +.list-row.button:backdrop:insensitive:checked, +.list-row.button:insensitive:active, +.list-row.button:insensitive:checked { + background-color: rgba(255, 255, 255, 0); + border-style: none; + border-radius: 0; + box-shadow: none; } + .list-row.button { background-color: rgba(255, 255, 255, 0); border-style: none; @@ -2035,12 +2056,97 @@ GtkPlacesSidebar.sidebar .view .separator:backdrop { box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); } .list-row.button:selected:hover { background-color: black; } + .list-row.button:selected:backdrop { + background-color: #000; } -.list-row:selected { - background-color: #000; - color: #fff; } - .list-row:selected:backdrop { +.list-row:selected .button { + border-width: 2px; + border-style: solid; + color: #000; + background-image: none; + background-color: #fff; + border-color: #7f7f7f; + border-color: #000; } + .list-row:selected .button.flat { + border-width: 2px; + border-style: solid; color: #fff; } + .list-row:selected .button:hover { + border-width: 2px; + border-style: solid; + color: #000; + background-color: #fff; + border-color: #7f7f7f; + background-image: none; + border-color: #000; } + .list-row:selected .button:active, .list-row:selected .button:checked { + border-width: 2px; + border-style: solid; + background-image: none; + color: white; + background-color: black; + border-color: #7f7f7f; + border-color: #000; } + .list-row:selected .button:backdrop, .list-row:selected .button.flat:backdrop { + border-width: 2px; + border-style: solid; + color: #000; + background-color: #fff; + border-color: #8b8b8b; + background-image: none; + text-shadow: none; + icon-shadow: none; + border-color: #000; } + .list-row:selected .button:backdrop:active, .list-row:selected .button:backdrop:checked, .list-row:selected .button.flat:backdrop:active, .list-row:selected .button.flat:backdrop:checked { + border-width: 2px; + border-style: solid; + color: white; + background-color: #8b8b8b; + border-color: #8b8b8b; + background-image: none; + border-color: #000; } + .list-row:selected .button:backdrop:insensitive, .list-row:selected .button.flat:backdrop:insensitive { + border-width: 2px; + border-style: solid; + color: #7f7f7f; + background-color: white; + border-color: #8b8b8b; + background-image: none; + border-color: #000; } + .list-row:selected .button:backdrop:insensitive:active, .list-row:selected .button:backdrop:insensitive:checked, .list-row:selected .button.flat:backdrop:insensitive:active, .list-row:selected .button.flat:backdrop:insensitive:checked { + border-width: 2px; + border-style: solid; + color: #7f7f7f; + border-color: #8b8b8b; + background-image: none; + background-color: whitesmoke; + border-color: #000; } + .list-row:selected .button.flat:backdrop { + border-width: 2px; + border-style: solid; + color: #fff; } + .list-row:selected .button:insensitive { + border-width: 2px; + border-style: solid; + color: #7f7f7f; + background-color: white; + border-color: #7f7f7f; + background-image: none; + text-shadow: none; + icon-shadow: none; + border-color: #000; } + .list-row:selected .button:insensitive:active, .list-row:selected .button:insensitive:checked { + border-width: 2px; + border-style: solid; + color: #7f7f7f; + border-color: #7f7f7f; + background-image: none; + background-color: white; } + +.list-row, list-row.button { + transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + .list-row:hover, list-row.button:hover { + transition: none; } /********************* * App Notifications *