mirror of
https://git.disroot.org/eudaimon/Simplewaita.git
synced 2026-03-10 04:21:07 +00:00
prepare for release, adding previews, improving readme
This commit is contained in:
Eudaimon
parent
ebabde0cfa
commit
5fb7c6c590
19 changed files with 277 additions and 354 deletions
|
|
@ -466,8 +466,7 @@ editablelabel > stack > text {
|
|||
* Buttons *
|
||||
***********/
|
||||
// stuff for .needs-attention
|
||||
$_dot_color: if($variant=='light', $selected_bg_color,
|
||||
lighten($selected_bg_color,15%));
|
||||
$_dot_color: $warning_color; //if($variant=='light', $selected_bg_color, lighten($selected_bg_color,15%));
|
||||
@keyframes needs_attention {
|
||||
from { background-image: radial-gradient(farthest-side, $_dot_color 0%, transparentize($_dot_color, 1) 0%); }
|
||||
to { background-image: radial-gradient(farthest-side, $_dot_color 95%, transparentize($_dot_color, 1)); }
|
||||
|
|
@ -2578,7 +2577,7 @@ treeview.view radio:selected { &:selected, &:focus, & { @extend %radio; }} // Th
|
|||
// OSD
|
||||
.osd & {
|
||||
border-color: $osd_borders_color;
|
||||
background-color: transparentize($osd_borders_color, 0.2);
|
||||
background-color: transparentize($osd_borders_color, 0.7);
|
||||
|
||||
&:disabled { background-color: $osd_insensitive_bg_color; }
|
||||
}
|
||||
|
|
@ -2992,88 +2991,7 @@ progressbar {
|
|||
* Level Bar *
|
||||
*************/
|
||||
|
||||
$_levelbar_size: 9px;
|
||||
$_levelbar_border_radius: 5px;
|
||||
|
||||
levelbar {
|
||||
&.horizontal {
|
||||
trough > block {
|
||||
min-height: $_levelbar_size;
|
||||
border-radius: $_levelbar_border_radius;
|
||||
|
||||
&:dir(rtl) {
|
||||
border-radius: 0 $_levelbar_border_radius $_levelbar_border_radius 0;
|
||||
}
|
||||
|
||||
&:dir(ltr) {
|
||||
border-radius: $_levelbar_border_radius 0 0 $_levelbar_border_radius;
|
||||
}
|
||||
|
||||
&.empty,&.full {
|
||||
border-radius: $_levelbar_border_radius;
|
||||
}
|
||||
}
|
||||
|
||||
// segmented level bar
|
||||
&.discrete {
|
||||
trough > block {
|
||||
min-height: 2px;
|
||||
margin: 1px;
|
||||
min-width: 24px;
|
||||
border-radius:0;
|
||||
&:first-child {border-radius: 2px 0 0 2px;}
|
||||
&:last-child {
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
trough > block {
|
||||
min-width: $_levelbar_size;
|
||||
border-radius: $_levelbar_border_radius;
|
||||
}
|
||||
|
||||
&.discrete > trough > block {
|
||||
min-width: $_levelbar_size - 7px;
|
||||
margin: 1px 0;
|
||||
min-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
> trough {
|
||||
padding: 1px;
|
||||
@include entry(normal);
|
||||
&:backdrop { @include entry(backdrop); }
|
||||
}
|
||||
|
||||
// level bar colours
|
||||
> trough > block {
|
||||
border: 1px solid;
|
||||
|
||||
&.low {
|
||||
border-color: $warning_color;
|
||||
background-color: $warning_color;
|
||||
}
|
||||
|
||||
&.high,
|
||||
&:not(.empty) {
|
||||
border-color: $selected_bg_color;
|
||||
background-color: $selected_bg_color;
|
||||
}
|
||||
|
||||
&.full {
|
||||
border-color: $success_color;
|
||||
background-color: $success_color;
|
||||
}
|
||||
|
||||
&.empty {
|
||||
background-color: darken($bg_color, 5%);
|
||||
border-color: darken($bg_color, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@import '../common/levelbar.scss';
|
||||
|
||||
|
||||
/****************
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ $gtk: 4;
|
|||
|
||||
@if $t==normal {
|
||||
color: $text_color;
|
||||
border-color: $borders_color;
|
||||
border-color: $text_color;// $borders_color;
|
||||
background-color: $base_color;
|
||||
@include _shadows(inset $_entry_shadow, 0 1px $_hilight_color);
|
||||
// for the transition to work the number of shadows in different states needs to match, hence the transparent shadow here.
|
||||
|
|
|
|||
|
|
@ -14,9 +14,9 @@ label:selected, calendar > grid > label.day-number:selected, row:selected, colum
|
|||
|
||||
label:disabled > selection, label:disabled:selected, calendar > grid > label.day-number:disabled:selected, row:disabled:selected, columnview.view:disabled:selected, treeview.view:disabled:selected, modelbutton.flat:disabled:selected, gridview > child:disabled:selected, flowbox > flowboxchild:disabled:selected, .view:disabled:selected, iconview:disabled:selected, textview > text:disabled:selected { color: #586f3f; }
|
||||
|
||||
label:backdrop:selected, calendar > grid > label.day-number:backdrop:selected, row:backdrop:selected, columnview.view:backdrop:selected, treeview.view:backdrop:selected, modelbutton.flat:backdrop:selected, gridview > child:backdrop:selected, flowbox > flowboxchild:backdrop:selected, .view:backdrop:selected, iconview:backdrop:selected, textview > text:backdrop:selected { color: black; }
|
||||
label:backdrop:selected, calendar > grid > label.day-number:backdrop:selected, row:backdrop:selected, columnview.view:backdrop:selected, treeview.view:backdrop:selected, modelbutton.flat:backdrop:selected, gridview > child:backdrop:selected, flowbox > flowboxchild:backdrop:selected, .view:backdrop:selected, iconview:backdrop:selected, textview > text:backdrop:selected { color: #1d1b22; background-color: rgba(174, 180, 167, 0.7); }
|
||||
|
||||
label:backdrop:disabled:selected, row:backdrop:disabled:selected, modelbutton.flat:backdrop:disabled:selected, gridview > child:backdrop:disabled:selected, flowbox > flowboxchild:backdrop:disabled:selected, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, textview > text:backdrop:disabled:selected { color: #7b9b58; }
|
||||
label:backdrop:disabled:selected, row:backdrop:disabled:selected, modelbutton.flat:backdrop:disabled:selected, gridview > child:backdrop:disabled:selected, flowbox > flowboxchild:backdrop:disabled:selected, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, textview > text:backdrop:disabled:selected { color: #84a362; }
|
||||
|
||||
/*************** Base States * */
|
||||
.background { color: #241f31; background-color: #a7a7a7; }
|
||||
|
|
@ -39,7 +39,7 @@ image:disabled { -gtk-icon-filter: opacity(0.5); }
|
|||
|
||||
textview > text { background-color: transparent; }
|
||||
|
||||
textview > text > selection { background-color: rgba(174, 174, 174, 0.5); }
|
||||
textview > text > selection { background-color: rgba(174, 180, 167, 0.7); }
|
||||
|
||||
textview > text > selection:focus-within { background-color: rgba(176, 221, 126, 0.3); }
|
||||
|
||||
|
|
@ -85,7 +85,7 @@ label { outline: 0 solid transparent; outline-offset: 4px; }
|
|||
|
||||
label:focus:focus-visible { outline-color: rgba(176, 221, 126, 0.5); outline-width: 2px; outline-offset: -2px; }
|
||||
|
||||
label > selection { background-color: rgba(174, 174, 174, 0.5); color: #000000; }
|
||||
label > selection { background-color: rgba(174, 180, 167, 0.7); color: #000000; }
|
||||
|
||||
label > selection:focus-within { background-color: rgba(176, 221, 126, 0.3); }
|
||||
|
||||
|
|
@ -140,7 +140,7 @@ spinner:checked:disabled { opacity: 0.5; color: #552222; }
|
|||
.caption { font-weight: 400; font-size: 9pt; }
|
||||
|
||||
/**************** Text Entries * */
|
||||
spinbutton.vertical > text, spinbutton:not(.vertical), entry { min-height: 32px; padding-left: 8px; padding-right: 8px; border: 1px solid; border-radius: 5px; border-spacing: 6px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #241f31; border-color: #797979; background-color: #908f8d; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.5); transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; }
|
||||
spinbutton.vertical > text, spinbutton:not(.vertical), entry { min-height: 32px; padding-left: 8px; padding-right: 8px; border: 1px solid; border-radius: 5px; border-spacing: 6px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #241f31; border-color: #241f31; background-color: #908f8d; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.5); transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; }
|
||||
|
||||
spinbutton.vertical > text, spinbutton:not(.vertical), entry { outline: 0 solid transparent; outline-offset: 4px; }
|
||||
|
||||
|
|
@ -158,7 +158,7 @@ spinbutton.vertical > text:focus-within > placeholder, spinbutton:focus-within:n
|
|||
|
||||
spinbutton.vertical > text:disabled, spinbutton:disabled:not(.vertical), entry:disabled { color: #552222; border-color: #552222; background-color: #938989; }
|
||||
|
||||
spinbutton.vertical > text > text > selection, spinbutton:not(.vertical) > text > selection, entry > text > selection { background-color: rgba(174, 174, 174, 0.5); color: transparent; }
|
||||
spinbutton.vertical > text > text > selection, spinbutton:not(.vertical) > text > selection, entry > text > selection { background-color: rgba(174, 180, 167, 0.7); color: transparent; }
|
||||
|
||||
spinbutton.vertical > text > text > selection:focus-within, spinbutton:not(.vertical) > text > selection:focus-within, entry > text > selection:focus-within { background-color: rgba(176, 221, 126, 0.3); color: #241f31; }
|
||||
|
||||
|
|
@ -217,11 +217,11 @@ treeview entry.flat, treeview entry { border-radius: 0; background-image: none;
|
|||
treeview entry.flat:focus-within, treeview entry:focus-within { border-color: #b0dd7e; }
|
||||
|
||||
/******************* Editable Labels * */
|
||||
editablelabel > stack > text { color: #241f31; border-color: #797979; background-color: #908f8d; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.5); }
|
||||
editablelabel > stack > text { color: #241f31; border-color: #241f31; background-color: #908f8d; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.5); }
|
||||
|
||||
/*********** Buttons * */
|
||||
@keyframes needs_attention { from { background-image: radial-gradient(farthest-side, #b0dd7e 0%, rgba(176, 221, 126, 0) 0%); }
|
||||
to { background-image: radial-gradient(farthest-side, #b0dd7e 95%, rgba(176, 221, 126, 0)); } }
|
||||
@keyframes needs_attention { from { background-image: radial-gradient(farthest-side, #f57900 0%, rgba(245, 121, 0, 0) 0%); }
|
||||
to { background-image: radial-gradient(farthest-side, #f57900 95%, rgba(245, 121, 0, 0)); } }
|
||||
|
||||
/****************************************************** Buttons * */
|
||||
scrollbar > range > trough > slider, notebook > header > tabs > arrow, windowcontrols button, button { min-height: 24px; min-width: 16px; padding: 2px 6px; border: 1px solid; border-radius: 5px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #241f31; background-color: #bcbeb9; border-color: #241f31; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; }
|
||||
|
|
@ -346,7 +346,7 @@ menubutton.circular button, button.circular { min-width: 32px; min-height: 32px;
|
|||
|
||||
menubutton.circular button label, button.circular label { padding: 0; }
|
||||
|
||||
stacksidebar row.needs-attention > label, stackswitcher > button.needs-attention > label, stackswitcher > button.needs-attention > image { animation: needs_attention 150ms ease-in; background-image: radial-gradient(farthest-side, #b0dd7e 96%, rgba(176, 221, 126, 0)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 4px; }
|
||||
stacksidebar row.needs-attention > label, stackswitcher > button.needs-attention > label, stackswitcher > button.needs-attention > image { animation: needs_attention 150ms ease-in; background-image: radial-gradient(farthest-side, #f57900 96%, rgba(245, 121, 0, 0)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 4px; }
|
||||
|
||||
stacksidebar row.needs-attention > label:backdrop, stackswitcher > button.needs-attention > label:backdrop, stackswitcher > button.needs-attention > image:backdrop { background-size: 6px 6px, 0 0; }
|
||||
|
||||
|
|
@ -468,7 +468,7 @@ spinbutton.vertical:drop(active) { border-color: transparent; box-shadow: none;
|
|||
|
||||
spinbutton.vertical > text { min-height: 32px; min-width: 32px; padding: 0; border-radius: 0; }
|
||||
|
||||
spinbutton.vertical > text > selection { background-color: rgba(174, 174, 174, 0.5); color: transparent; }
|
||||
spinbutton.vertical > text > selection { background-color: rgba(174, 180, 167, 0.7); color: transparent; }
|
||||
|
||||
spinbutton.vertical > text > selection:focus-within { background-color: rgba(176, 221, 126, 0.3); color: #000000; }
|
||||
|
||||
|
|
@ -611,7 +611,7 @@ columnview.view:disabled, treeview.view:disabled { color: #552222; }
|
|||
|
||||
columnview.view:disabled:selected, treeview.view:disabled:selected { color: #6a854c; }
|
||||
|
||||
columnview.view:disabled:selected:backdrop, treeview.view:disabled:selected:backdrop { color: #7b9b58; }
|
||||
columnview.view:disabled:selected:backdrop, treeview.view:disabled:selected:backdrop { color: #84a362; }
|
||||
|
||||
columnview.view.separator, treeview.view.separator { min-height: 2px; color: #7e7d7d; }
|
||||
|
||||
|
|
@ -949,7 +949,7 @@ checkbutton.text-button { padding: 4px; }
|
|||
|
||||
check, radio { min-height: 14px; min-width: 14px; border: 1px solid; -gtk-icon-source: none; }
|
||||
|
||||
check, radio { background-clip: padding-box; background-image: linear-gradient(to bottom, #c9cac6 20%, #bcbeb9 90%); border-color: #6a6a6a; box-shadow: 0 1px rgba(0, 0, 0, 0.05); color: #000000; }
|
||||
check, radio { background-clip: padding-box; background-image: linear-gradient(to bottom, #c9cac6 20%, #bcbeb9 90%); border-color: #000000; box-shadow: 0 1px rgba(0, 0, 0, 0.05); color: #000000; }
|
||||
|
||||
check:hover, radio:hover { background-image: linear-gradient(to bottom, #d3d4d1 10%, #c6c8c4 90%); }
|
||||
|
||||
|
|
@ -1000,7 +1000,7 @@ progressbar > trough:disabled, scale > trough > fill:disabled, scale > trough:di
|
|||
|
||||
row:selected progressbar > trough, row:selected scale > trough > fill, row:selected scale > trough { outline-color: rgba(255, 255, 255, 0.8); border-color: #8bcd41; }
|
||||
|
||||
.osd progressbar > trough, .osd scale > trough > fill, .osd scale > trough { border-color: #002269; background-color: rgba(0, 34, 105, 0.8); }
|
||||
.osd progressbar > trough, .osd scale > trough > fill, .osd scale > trough { border-color: #002269; background-color: rgba(0, 34, 105, 0.3); }
|
||||
|
||||
.osd progressbar > trough:disabled, .osd scale > trough > fill:disabled, .osd scale > trough:disabled { background-color: rgba(93, 127, 173, 0.5); }
|
||||
|
||||
|
|
@ -1179,6 +1179,7 @@ progressbar.osd > trough > progress { border-style: none; border-radius: 0; }
|
|||
|
||||
progressbar > trough.empty > progress { all: unset; }
|
||||
|
||||
/************* Level Bar * */
|
||||
/************* Level Bar * */
|
||||
levelbar.horizontal trough > block { min-height: 9px; border-radius: 5px; }
|
||||
|
||||
|
|
@ -1198,7 +1199,7 @@ levelbar.vertical trough > block { min-width: 9px; border-radius: 5px; }
|
|||
|
||||
levelbar.vertical.discrete > trough > block { min-width: 2px; margin: 1px 0; min-height: 32px; }
|
||||
|
||||
levelbar > trough { padding: 1px; color: #241f31; border-color: #797979; background-color: #908f8d; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.5); }
|
||||
levelbar > trough { padding: 1px; color: #241f31; border-color: #241f31; background-color: #908f8d; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.5); border-radius: 5px; }
|
||||
|
||||
levelbar > trough:backdrop { color: #393543; border-color: #828282; background-color: #8d8c8a; }
|
||||
|
||||
|
|
@ -1292,7 +1293,7 @@ columnview row:not(:selected) cell editablelabel:not(.editing):focus-within { ou
|
|||
|
||||
columnview row:not(:selected) cell editablelabel.editing:focus-within { outline: 2px solid #b0dd7e; }
|
||||
|
||||
columnview row:not(:selected) cell editablelabel.editing text selection { background-color: rgba(174, 174, 174, 0.5); color: transparent; }
|
||||
columnview row:not(:selected) cell editablelabel.editing text selection { background-color: rgba(174, 180, 167, 0.7); color: transparent; }
|
||||
|
||||
columnview row:not(:selected) cell editablelabel.editing text selection:focus-within { background-color: rgba(176, 221, 126, 0.3); color: #241f31; }
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue