High Contrast: reimplement check and radio

Use a similar structure as Adwaita - using buttons for
radios and checkboxes.

https://bugzilla.gnome.org/show_bug.cgi?id=763707
This commit is contained in:
Jakub Steiner 2016-03-15 19:22:07 +01:00
parent 985121813e
commit e5e8ffa3f7
10 changed files with 991 additions and 155 deletions

View File

@ -1249,6 +1249,14 @@ gtk.gresource.xml: Makefile.am inspector/Makefile.inc
echo " <file alias='theme/HighContrastInverse/gtk.css'>theme/HighContrast/gtk-inverse.css</file>" >> $@; \
echo " <file>theme/HighContrast/gtk-contained.css</file>" >> $@; \
echo " <file>theme/HighContrast/gtk-contained-inverse.css</file>" >> $@; \
for f in $(srcdir)/theme/HighContrast/assets/*.png; do \
n=`basename $$f`; \
echo " <file preprocess='to-pixdata'>theme/HighContrast/assets/$$n</file>" >> $@; \
done; \
for f in $(srcdir)/theme/HighContrast/assets/*.svg; do \
n=`basename $$f`; \
echo " <file>theme/HighContrast/assets/$$n</file>" >> $@; \
done; \
echo " <file>theme/win32/gtk-win32-base.css</file>" >> $@; \
echo " <file>theme/win32/gtk.css</file>" >> $@; \
for f in $(srcdir)/cursor/*.png; do \

View File

@ -1605,60 +1605,177 @@ switch {
/*************************
* Check and Radio items *
*************************/
// draw regular check and radio items using our PNG assets
// all assets are rendered from assets.svg. never add pngs directly
// FIXME
GtkCheckButton.text-button, GtkRadioButton.text-button {
checkbutton.text-button, radiobutton.text-button {
// this is for a nice focus on check and radios text
padding: 1px;
padding: 2px 0;
outline-offset: 0;
}
@each $w,$a in ('check', 'checkbox'),
('radio','radio') {
#{$w} {
color: $fg_color;
background-image: none;
-gtk-icon-source: -gtk-icontheme('#{$a}-symbolic');
&:hover { color: $bg_color; }
&:checked, &:active {
-gtk-icon-source: -gtk-icontheme('#{$a}-checked-symbolic');
&:disabled {
color: $insensitive_fg_color;
&:backdrop { color: $insensitive_fg_color; }
}
&:backdrop { color: $backdrop_fg_color; }
}
&:disabled {
label:not(:only-child) {
&:first-child { margin-left: 4px; }
&:last-child { margin-right: 4px; }
}
&:disabled {
&:active, &:indeterminate, & {
// set insensitive color, which is overriden otherwise
color: $insensitive_fg_color;
&:backdrop { color: $insensitive_fg_color; }
}
&:indeterminate {
-gtk-icon-source: -gtk-icontheme('#{$a}-mixed-symbolic');
}
&:backdrop {
color: $backdrop_fg_color;
&:selected { color: $backdrop_fg_color; }
}
}
}
radiobutton radio,
checkbutton check {
min-width: 16px;
min-height: 16px;
margin: 0 2px 0 2px;
&:only-child {
margin: 0;
check,
radio {
margin: 0 4px;
&:only-child { margin: 0; }
min-height: 14px;
min-width: 14px;
border: 1px solid;
-gtk-icon-source: none;
@include button(normal);
&:hover { @include button(hover); }
&:active { @include button(active); }
&:disabled { @include button(insensitive); }
&:backdrop {
@include button(backdrop);
&:disabled { @include button(backdrop-insensitive); }
}
@if $variant == 'light' {
// the borders of the light variant versions of checks and radios are too similar in luminosity to the selected background
// color, hence we need special casing.
row:selected & { border-color: $selected_borders_color; }
}
.osd & {
@include button(osd);
&:hover { @include button(osd); }
&:active { @include button(osd-active); }
&:backdrop { @include button(osd-backdrop); }
&:disabled { @include button(osd-insensitive); }
}
menu menuitem & {
margin: 0; // this is a workaround for a menu check/radio size allocation issue
&, &:hover, &:disabled { //FIXME use button reset mixin
min-height: 14px;
min-width: 14px;
background-image: none;
background-color: transparent;
box-shadow: none;
-gtk-icon-shadow: none;
color: inherit;
border-color: currentColor;
animation: none;
}
}
}
%check,
check {
border-radius: 3px;
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-symbolic.svg")),
-gtk-recolor(url("assets/check-symbolic.symbolic.png"))); }
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")),
-gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); }
}
%radio,
radio {
border-radius: 100%;
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/bullet-symbolic.svg")),
-gtk-recolor(url("assets/bullet-symbolic.symbolic.png"))); }
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")),
-gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); }
}
// let's animate things
@keyframes check_check {
from { -gtk-icon-transform: translate(6px, -3px) rotate(-45deg) scaleY(0.2) rotate(45deg) scaleX(0); }
to { -gtk-icon-transform: unset; }
}
@keyframes check_radio {
from { -gtk-icon-transform: scale(0); }
to { -gtk-icon-transform: unset; }
}
@keyframes check_indeterminate {
from { -gtk-icon-transform: scale(0, 1); }
to { -gtk-icon-transform: unset; }
}
check:not(:indeterminate):checked { animation: check_check 400ms; }
radio:not(:indeterminate):checked { animation: check_radio 400ms; }
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate 400ms; }
// no animations in menus
menu menuitem {
check:not(:indeterminate):checked,
radio:not(:indeterminate):checked,
check:indeterminate:checked:active,
radio:indeterminate:checked { animation: none; }
}
// treeview stuff, let's the fun begin:
treeview.view check:selected {
&:focus, &:backdrop, & {
&:disabled, & {
@extend %check;
}
}
}
treeview.view radio:selected {
&:focus, &:backdrop, & {
&:disabled, & {
@extend %radio;
}
}
}
treeview.view check,
treeview.view radio {
color: $fg_color;
&:hover { color: $fg_color; }
&:selected {
&:focus, &:hover, & { color: $selected_fg_color; }
&:backdrop {
&:hover, & {
color: $selected_fg_color;
border-color: $selected_fg_color;
}
&:disabled {
color: $insensitive_fg_color;
border-color: $insensitive_fg_color;
}
}
&:disabled { color: $insensitive_fg_color;}
}
}
/************
* GtkScale *
************/

View File

@ -0,0 +1,155 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
sodipodi:docname="bullet-symbolic.svg"
inkscape:export-filename="/home/sam/dev/RESOURCES/gnome-icon-theme-symbolic/src/gnome-stencils.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90"
height="14"
id="svg7384"
version="1.1"
inkscape:version="0.91 r13725"
width="14">
<metadata
id="metadata90">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title>Gnome Symbolic Icon Theme</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<sodipodi:namedview
inkscape:bbox-nodes="true"
inkscape:bbox-paths="true"
bordercolor="#666666"
borderopacity="1"
inkscape:current-layer="layer9"
inkscape:cx="9.6493349"
inkscape:cy="5.5864571"
gridtolerance="10"
inkscape:guide-bbox="true"
guidetolerance="10"
id="namedview88"
inkscape:object-nodes="true"
inkscape:object-paths="false"
objecttolerance="10"
pagecolor="#3a3b39"
inkscape:pageopacity="1"
inkscape:pageshadow="2"
showborder="true"
showgrid="false"
showguides="true"
inkscape:snap-bbox="true"
inkscape:snap-bbox-midpoints="false"
inkscape:snap-global="true"
inkscape:snap-grids="true"
inkscape:snap-nodes="false"
inkscape:snap-others="false"
inkscape:snap-to-guides="true"
inkscape:window-height="1016"
inkscape:window-maximized="1"
inkscape:window-width="1920"
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:zoom="22.005438"
inkscape:showpageshadow="false">
<inkscape:grid
dotted="false"
empspacing="2"
enabled="true"
id="grid4866"
originx="-139.99995"
originy="120"
snapvisiblegridlinesonly="true"
spacingx="1px"
spacingy="1px"
type="xygrid"
visible="true" />
</sodipodi:namedview>
<title
id="title9167">Gnome Symbolic Icon Theme</title>
<defs
id="defs7386">
<linearGradient
gradientTransform="matrix(-2.7365795,0.28202934,-0.18908311,-0.99988321,239.54008,-879.45557)"
id="linearGradient19282"
osb:paint="solid">
<stop
id="stop19284"
offset="0"
style="stop-color:#666666;stop-opacity:1;" />
</linearGradient>
</defs>
<g
inkscape:groupmode="layer"
id="layer9"
inkscape:label="status"
style="display:inline"
transform="translate(-381.00015,-339)">
<path
inkscape:connector-curvature="0"
d="m 388.00015,343.01754 c -1.64587,0 -2.98246,1.33658 -2.98246,2.98246 0,1.64587 1.33659,2.98246 2.98246,2.98246 1.64587,0 2.98246,-1.33659 2.98246,-2.98246 0,-1.64588 -1.33659,-2.98246 -2.98246,-2.98246 z"
id="path9555"
sodipodi:nodetypes="csssc"
style="color:#bebebe;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:'Andale Mono';text-indent:0pt;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;text-anchor:start;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.78125;marker:none" />
</g>
<g
inkscape:groupmode="layer"
id="layer10"
inkscape:label="devices"
style="display:inline"
transform="translate(-381.00015,-339)" />
<g
inkscape:groupmode="layer"
id="layer11"
inkscape:label="apps"
transform="translate(-381.00015,-339)" />
<g
inkscape:groupmode="layer"
id="layer13"
inkscape:label="places"
style="display:inline"
transform="translate(-381.00015,-339)" />
<g
inkscape:groupmode="layer"
id="layer14"
inkscape:label="mimetypes"
transform="translate(-381.00015,-339)" />
<g
inkscape:groupmode="layer"
id="layer15"
inkscape:label="emblems"
style="display:inline"
transform="translate(-381.00015,-339)" />
<g
inkscape:groupmode="layer"
id="g71291"
inkscape:label="emotes"
style="display:inline"
transform="translate(-381.00015,-339)" />
<g
inkscape:groupmode="layer"
id="g4953"
inkscape:label="categories"
style="display:inline"
transform="translate(-381.00015,-339)" />
<g
inkscape:groupmode="layer"
id="layer12"
inkscape:label="actions"
style="display:inline"
transform="translate(-381.00015,-339)" />
</svg>

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 147 B

View File

@ -0,0 +1,154 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
sodipodi:docname="check-symbolic.svg"
inkscape:export-filename="/home/sam/dev/RESOURCES/gnome-icon-theme-symbolic/src/gnome-stencils.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90"
height="14"
id="svg7384"
version="1.1"
inkscape:version="0.91 r13725"
width="14">
<metadata
id="metadata90">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title>Gnome Symbolic Icon Theme</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<sodipodi:namedview
inkscape:bbox-nodes="true"
inkscape:bbox-paths="true"
bordercolor="#666666"
borderopacity="1"
inkscape:current-layer="layer9"
inkscape:cx="-15.966869"
inkscape:cy="8.8415069"
gridtolerance="10"
inkscape:guide-bbox="true"
guidetolerance="10"
id="namedview88"
inkscape:object-nodes="true"
inkscape:object-paths="false"
objecttolerance="10"
pagecolor="#3a3b39"
inkscape:pageopacity="1"
inkscape:pageshadow="2"
showborder="true"
showgrid="false"
showguides="true"
inkscape:snap-bbox="true"
inkscape:snap-bbox-midpoints="false"
inkscape:snap-global="true"
inkscape:snap-grids="true"
inkscape:snap-nodes="false"
inkscape:snap-others="false"
inkscape:snap-to-guides="true"
inkscape:window-height="1016"
inkscape:window-maximized="1"
inkscape:window-width="1920"
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:zoom="15.238496"
inkscape:showpageshadow="false">
<inkscape:grid
dotted="false"
empspacing="2"
enabled="true"
id="grid4866"
originx="-159.99995"
originy="120"
snapvisiblegridlinesonly="true"
spacingx="1px"
spacingy="1px"
type="xygrid"
visible="true" />
</sodipodi:namedview>
<title
id="title9167">Gnome Symbolic Icon Theme</title>
<defs
id="defs7386">
<linearGradient
gradientTransform="matrix(-2.7365795,0.28202934,-0.18908311,-0.99988321,239.54008,-879.45557)"
id="linearGradient19282"
osb:paint="solid">
<stop
id="stop19284"
offset="0"
style="stop-color:#666666;stop-opacity:1;" />
</linearGradient>
</defs>
<g
inkscape:groupmode="layer"
id="layer9"
inkscape:label="status"
style="display:inline;opacity:1"
transform="translate(-401.00015,-339)">
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:Sans;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;stroke:none;stroke-width:3;marker:none;enable-background:accumulate"
d="m 415.00015,339.98047 -6.5,6.39453 -2.9375,-2.9375 -2.125,2.125 5.0625,5.0625 6.5,-6.60547 0,-4.03906 z"
id="path8913-6-7-1-5-1"
inkscape:connector-curvature="0" />
</g>
<g
inkscape:groupmode="layer"
id="layer10"
inkscape:label="devices"
style="display:inline"
transform="translate(-401.00015,-339)" />
<g
inkscape:groupmode="layer"
id="layer11"
inkscape:label="apps"
transform="translate(-401.00015,-339)" />
<g
inkscape:groupmode="layer"
id="layer13"
inkscape:label="places"
style="display:inline"
transform="translate(-401.00015,-339)" />
<g
inkscape:groupmode="layer"
id="layer14"
inkscape:label="mimetypes"
transform="translate(-401.00015,-339)" />
<g
inkscape:groupmode="layer"
id="layer15"
inkscape:label="emblems"
style="display:inline"
transform="translate(-401.00015,-339)" />
<g
inkscape:groupmode="layer"
id="g71291"
inkscape:label="emotes"
style="display:inline"
transform="translate(-401.00015,-339)" />
<g
inkscape:groupmode="layer"
id="g4953"
inkscape:label="categories"
style="display:inline"
transform="translate(-401.00015,-339)" />
<g
inkscape:groupmode="layer"
id="layer12"
inkscape:label="actions"
style="display:inline"
transform="translate(-401.00015,-339)" />
</svg>

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 231 B

View File

@ -0,0 +1,153 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
sodipodi:docname="dash-symbolic.svg"
inkscape:export-filename="/home/sam/dev/RESOURCES/gnome-icon-theme-symbolic/src/gnome-stencils.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90"
height="14"
id="svg7384"
version="1.1"
inkscape:version="0.91 r13725"
width="14">
<metadata
id="metadata90">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title>Gnome Symbolic Icon Theme</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<sodipodi:namedview
inkscape:bbox-nodes="true"
inkscape:bbox-paths="true"
bordercolor="#666666"
borderopacity="1"
inkscape:current-layer="layer9"
inkscape:cx="6.8118913"
inkscape:cy="7.9276321"
gridtolerance="10"
inkscape:guide-bbox="true"
guidetolerance="10"
id="namedview88"
inkscape:object-nodes="true"
inkscape:object-paths="false"
objecttolerance="10"
pagecolor="#3a3b39"
inkscape:pageopacity="1"
inkscape:pageshadow="2"
showborder="true"
showgrid="false"
showguides="true"
inkscape:snap-bbox="true"
inkscape:snap-bbox-midpoints="false"
inkscape:snap-global="true"
inkscape:snap-grids="true"
inkscape:snap-nodes="false"
inkscape:snap-others="false"
inkscape:snap-to-guides="true"
inkscape:window-height="1016"
inkscape:window-maximized="1"
inkscape:window-width="1920"
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:zoom="25.058754"
inkscape:showpageshadow="false">
<inkscape:grid
dotted="false"
empspacing="2"
enabled="true"
id="grid4866"
originx="-159.99995"
originy="140"
snapvisiblegridlinesonly="true"
spacingx="1px"
spacingy="1px"
type="xygrid"
visible="true" />
</sodipodi:namedview>
<title
id="title9167">Gnome Symbolic Icon Theme</title>
<defs
id="defs7386">
<linearGradient
gradientTransform="matrix(-2.7365795,0.28202934,-0.18908311,-0.99988321,239.54008,-879.45557)"
id="linearGradient19282"
osb:paint="solid">
<stop
id="stop19284"
offset="0"
style="stop-color:#666666;stop-opacity:1;" />
</linearGradient>
</defs>
<g
inkscape:groupmode="layer"
id="layer9"
inkscape:label="status"
style="display:inline"
transform="translate(-401.00015,-359)">
<path
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="m 405.00021,364 5.99999,0 c 1.108,0 2,0.892 2,2 0,1.108 -0.892,2 -2,2 l -5.99999,0 c -1.108,0 -2,-0.892 -2,-2 0,-1.108 0.892,-2 2,-2 z"
id="rect3346" />
</g>
<g
inkscape:groupmode="layer"
id="layer10"
inkscape:label="devices"
style="display:inline"
transform="translate(-401.00015,-359)" />
<g
inkscape:groupmode="layer"
id="layer11"
inkscape:label="apps"
transform="translate(-401.00015,-359)" />
<g
inkscape:groupmode="layer"
id="layer13"
inkscape:label="places"
style="display:inline"
transform="translate(-401.00015,-359)" />
<g
inkscape:groupmode="layer"
id="layer14"
inkscape:label="mimetypes"
transform="translate(-401.00015,-359)" />
<g
inkscape:groupmode="layer"
id="layer15"
inkscape:label="emblems"
style="display:inline"
transform="translate(-401.00015,-359)" />
<g
inkscape:groupmode="layer"
id="g71291"
inkscape:label="emotes"
style="display:inline"
transform="translate(-401.00015,-359)" />
<g
inkscape:groupmode="layer"
id="g4953"
inkscape:label="categories"
style="display:inline"
transform="translate(-401.00015,-359)" />
<g
inkscape:groupmode="layer"
id="layer12"
inkscape:label="actions"
style="display:inline"
transform="translate(-401.00015,-359)" />
</svg>

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 130 B

View File

@ -1747,75 +1747,198 @@ switch {
/*************************
* Check and Radio items *
*************************/
GtkCheckButton.text-button, GtkRadioButton.text-button {
padding: 1px;
checkbutton.text-button, radiobutton.text-button {
padding: 2px 0;
outline-offset: 0; }
check {
color: #fff;
background-image: none;
-gtk-icon-source: -gtk-icontheme("checkbox-symbolic"); }
check:hover {
color: #000; }
check:checked, check:active {
-gtk-icon-source: -gtk-icontheme("checkbox-checked-symbolic"); }
check:checked:disabled, check:active:disabled {
color: gray; }
check:checked:disabled:backdrop, check:active:disabled:backdrop {
color: gray; }
check:checked:backdrop, check:active:backdrop {
color: #fff; }
check:disabled {
checkbutton.text-button label:not(:only-child):first-child, radiobutton.text-button label:not(:only-child):first-child {
margin-left: 4px; }
checkbutton.text-button label:not(:only-child):last-child, radiobutton.text-button label:not(:only-child):last-child {
margin-right: 4px; }
checkbutton.text-button:disabled:active, checkbutton.text-button:disabled:indeterminate, checkbutton.text-button:disabled, radiobutton.text-button:disabled:active, radiobutton.text-button:disabled:indeterminate, radiobutton.text-button:disabled {
color: gray; }
check:disabled:backdrop {
checkbutton.text-button:disabled:active:backdrop, checkbutton.text-button:disabled:indeterminate:backdrop, checkbutton.text-button:disabled:backdrop, radiobutton.text-button:disabled:active:backdrop, radiobutton.text-button:disabled:indeterminate:backdrop, radiobutton.text-button:disabled:backdrop {
color: gray; }
check:indeterminate {
-gtk-icon-source: -gtk-icontheme("checkbox-mixed-symbolic"); }
check:backdrop {
color: #fff; }
check:backdrop:selected {
color: #fff; }
check,
radio {
margin: 0 4px;
min-height: 14px;
min-width: 14px;
border: 1px solid;
-gtk-icon-source: none;
border-width: 2px;
border-style: solid;
color: #fff;
background-image: none;
-gtk-icon-source: -gtk-icontheme("radio-symbolic"); }
radio:hover {
color: #000; }
radio:checked, radio:active {
-gtk-icon-source: -gtk-icontheme("radio-checked-symbolic"); }
radio:checked:disabled, radio:active:disabled {
color: gray; }
radio:checked:disabled:backdrop, radio:active:disabled:backdrop {
color: gray; }
radio:checked:backdrop, radio:active:backdrop {
color: #fff; }
radio:disabled {
color: gray; }
radio:disabled:backdrop {
color: gray; }
radio:indeterminate {
-gtk-icon-source: -gtk-icontheme("radio-mixed-symbolic"); }
radio:backdrop {
color: #fff; }
radio:backdrop:selected {
color: #fff; }
radiobutton radio,
checkbutton check {
min-width: 16px;
min-height: 16px;
margin: 0 2px 0 2px; }
radiobutton radio:only-child,
checkbutton check:only-child {
background-color: #000;
border-color: gray; }
check:only-child,
radio:only-child {
margin: 0; }
check:hover,
radio:hover {
border-width: 2px;
border-style: solid;
color: #fff;
background-color: #000;
border-color: gray;
background-image: none; }
check:active,
radio:active {
border-width: 2px;
border-style: solid;
background-image: none;
color: black;
background-color: white;
border-color: gray; }
check:disabled,
radio:disabled {
border-width: 2px;
border-style: solid;
color: gray;
background-color: #070707;
border-color: #494949;
background-image: none;
text-shadow: none;
-gtk-icon-shadow: none; }
check:backdrop,
radio:backdrop {
border-width: 2px;
border-style: solid;
color: #fff;
background-color: #000;
border-color: #737373;
background-image: none;
text-shadow: none;
-gtk-icon-shadow: none; }
check:backdrop:disabled,
radio:backdrop:disabled {
border-width: 2px;
border-style: solid;
color: gray;
background-color: #070707;
border-color: #494949;
background-image: none; }
.osd check, .osd
radio {
border-width: 2px;
border-style: solid;
color: #fff;
background-image: none;
background-color: rgba(0, 0, 0, 0.8);
border-color: rgba(255, 255, 255, 0.2);
box-shadow: none; }
.osd check:hover, .osd
radio:hover {
border-width: 2px;
border-style: solid;
color: #fff;
background-image: none;
background-color: rgba(0, 0, 0, 0.8);
border-color: rgba(255, 255, 255, 0.2);
box-shadow: none; }
.osd check:active, .osd
radio:active {
border-width: 2px;
border-style: solid;
color: rgba(0, 0, 0, 0.8);
background-color: #fff;
border-color: rgba(255, 255, 255, 0.2);
box-shadow: none; }
.osd check:backdrop, .osd
radio:backdrop {
border-width: 2px;
border-style: solid; }
.osd check:disabled, .osd
radio:disabled {
border-width: 2px;
border-style: solid;
border-color: rgba(255, 255, 255, 0.2);
color: gray; }
menu menuitem check, menu menuitem
radio {
margin: 0; }
menu menuitem check, menu menuitem check:hover, menu menuitem check:disabled, menu menuitem
radio, menu menuitem
radio:hover, menu menuitem
radio:disabled {
min-height: 14px;
min-width: 14px;
background-image: none;
background-color: transparent;
box-shadow: none;
-gtk-icon-shadow: none;
color: inherit;
border-color: currentColor;
animation: none; }
treeview.view check,
treeview.view radio {
treeview.view check:selected:focus:disabled, treeview.view check:selected:focus, treeview.view check:selected:backdrop:disabled, treeview.view check:selected:backdrop, treeview.view check:selected:disabled, treeview.view check:selected,
check {
border-radius: 3px; }
treeview.view check:checked:selected,
check:checked {
-gtk-icon-source: image(-gtk-recolor(url("assets/check-symbolic.svg")), -gtk-recolor(url("assets/check-symbolic.symbolic.png"))); }
treeview.view check:indeterminate:selected,
check:indeterminate {
-gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")), -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); }
treeview.view radio:selected:focus:disabled, treeview.view radio:selected:focus, treeview.view radio:selected:backdrop:disabled, treeview.view radio:selected:backdrop, treeview.view radio:selected:disabled, treeview.view radio:selected,
radio {
border-radius: 100%; }
treeview.view radio:checked:selected,
radio:checked {
-gtk-icon-source: image(-gtk-recolor(url("assets/bullet-symbolic.svg")), -gtk-recolor(url("assets/bullet-symbolic.symbolic.png"))); }
treeview.view radio:indeterminate:selected,
radio:indeterminate {
-gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")), -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); }
@keyframes check_check {
from {
-gtk-icon-transform: translate(6px, -3px) rotate(-45deg) scaleY(0.2) rotate(45deg) scaleX(0); }
to {
-gtk-icon-transform: unset; } }
@keyframes check_radio {
from {
-gtk-icon-transform: scale(0); }
to {
-gtk-icon-transform: unset; } }
@keyframes check_indeterminate {
from {
-gtk-icon-transform: scale(0, 1); }
to {
-gtk-icon-transform: unset; } }
check:not(:indeterminate):checked {
animation: check_check 400ms; }
radio:not(:indeterminate):checked {
animation: check_radio 400ms; }
check:indeterminate:checked, radio:indeterminate:checked {
animation: check_indeterminate 400ms; }
menu menuitem check:not(:indeterminate):checked,
menu menuitem radio:not(:indeterminate):checked,
menu menuitem check:indeterminate:checked:active,
menu menuitem radio:indeterminate:checked {
animation: none; }
treeview.view check:selected:focus, treeview.view check:selected:hover, treeview.view check:selected,
treeview.view radio:selected:focus,
treeview.view radio:selected:hover,
treeview.view radio:selected {
color: #fff; }
treeview.view check:hover,
treeview.view radio:hover {
color: #fff; }
treeview.view check:selected:backdrop:hover, treeview.view check:selected:backdrop,
treeview.view radio:selected:backdrop:hover,
treeview.view radio:selected:backdrop {
color: #fff;
border-color: #fff; }
treeview.view check:selected:backdrop:disabled,
treeview.view radio:selected:backdrop:disabled {
color: gray;
border-color: gray; }
treeview.view check:selected:disabled,
treeview.view radio:selected:disabled {
color: gray; }
/************
* GtkScale *

View File

@ -1747,75 +1747,201 @@ switch {
/*************************
* Check and Radio items *
*************************/
GtkCheckButton.text-button, GtkRadioButton.text-button {
padding: 1px;
checkbutton.text-button, radiobutton.text-button {
padding: 2px 0;
outline-offset: 0; }
check {
color: #000;
background-image: none;
-gtk-icon-source: -gtk-icontheme("checkbox-symbolic"); }
check:hover {
color: #fff; }
check:checked, check:active {
-gtk-icon-source: -gtk-icontheme("checkbox-checked-symbolic"); }
check:checked:disabled, check:active:disabled {
color: gray; }
check:checked:disabled:backdrop, check:active:disabled:backdrop {
color: gray; }
check:checked:backdrop, check:active:backdrop {
color: #000; }
check:disabled {
checkbutton.text-button label:not(:only-child):first-child, radiobutton.text-button label:not(:only-child):first-child {
margin-left: 4px; }
checkbutton.text-button label:not(:only-child):last-child, radiobutton.text-button label:not(:only-child):last-child {
margin-right: 4px; }
checkbutton.text-button:disabled:active, checkbutton.text-button:disabled:indeterminate, checkbutton.text-button:disabled, radiobutton.text-button:disabled:active, radiobutton.text-button:disabled:indeterminate, radiobutton.text-button:disabled {
color: gray; }
check:disabled:backdrop {
checkbutton.text-button:disabled:active:backdrop, checkbutton.text-button:disabled:indeterminate:backdrop, checkbutton.text-button:disabled:backdrop, radiobutton.text-button:disabled:active:backdrop, radiobutton.text-button:disabled:indeterminate:backdrop, radiobutton.text-button:disabled:backdrop {
color: gray; }
check:indeterminate {
-gtk-icon-source: -gtk-icontheme("checkbox-mixed-symbolic"); }
check:backdrop {
color: #000; }
check:backdrop:selected {
color: #000; }
check,
radio {
margin: 0 4px;
min-height: 14px;
min-width: 14px;
border: 1px solid;
-gtk-icon-source: none;
border-width: 2px;
border-style: solid;
color: #000;
background-image: none;
-gtk-icon-source: -gtk-icontheme("radio-symbolic"); }
radio:hover {
color: #fff; }
radio:checked, radio:active {
-gtk-icon-source: -gtk-icontheme("radio-checked-symbolic"); }
radio:checked:disabled, radio:active:disabled {
color: gray; }
radio:checked:disabled:backdrop, radio:active:disabled:backdrop {
color: gray; }
radio:checked:backdrop, radio:active:backdrop {
color: #000; }
radio:disabled {
color: gray; }
radio:disabled:backdrop {
color: gray; }
radio:indeterminate {
-gtk-icon-source: -gtk-icontheme("radio-mixed-symbolic"); }
radio:backdrop {
color: #000; }
radio:backdrop:selected {
color: #000; }
radiobutton radio,
checkbutton check {
min-width: 16px;
min-height: 16px;
margin: 0 2px 0 2px; }
radiobutton radio:only-child,
checkbutton check:only-child {
background-color: #fff;
border-color: gray; }
check:only-child,
radio:only-child {
margin: 0; }
check:hover,
radio:hover {
border-width: 2px;
border-style: solid;
color: #000;
background-color: #fff;
border-color: gray;
background-image: none; }
check:active,
radio:active {
border-width: 2px;
border-style: solid;
background-image: none;
color: white;
background-color: black;
border-color: gray; }
check:disabled,
radio:disabled {
border-width: 2px;
border-style: solid;
color: gray;
background-color: white;
border-color: silver;
background-image: none;
text-shadow: none;
-gtk-icon-shadow: none; }
check:backdrop,
radio:backdrop {
border-width: 2px;
border-style: solid;
color: #000;
background-color: #fff;
border-color: #8d8d8d;
background-image: none;
text-shadow: none;
-gtk-icon-shadow: none; }
check:backdrop:disabled,
radio:backdrop:disabled {
border-width: 2px;
border-style: solid;
color: gray;
background-color: white;
border-color: silver;
background-image: none; }
row:selected check, row:selected
radio {
border-color: #000; }
.osd check, .osd
radio {
border-width: 2px;
border-style: solid;
color: #fff;
background-image: none;
background-color: rgba(0, 0, 0, 0.8);
border-color: rgba(255, 255, 255, 0.2);
box-shadow: none; }
.osd check:hover, .osd
radio:hover {
border-width: 2px;
border-style: solid;
color: #fff;
background-image: none;
background-color: rgba(0, 0, 0, 0.8);
border-color: rgba(255, 255, 255, 0.2);
box-shadow: none; }
.osd check:active, .osd
radio:active {
border-width: 2px;
border-style: solid;
color: rgba(0, 0, 0, 0.8);
background-color: #fff;
border-color: rgba(255, 255, 255, 0.2);
box-shadow: none; }
.osd check:backdrop, .osd
radio:backdrop {
border-width: 2px;
border-style: solid; }
.osd check:disabled, .osd
radio:disabled {
border-width: 2px;
border-style: solid;
border-color: rgba(255, 255, 255, 0.2);
color: gray; }
menu menuitem check, menu menuitem
radio {
margin: 0; }
menu menuitem check, menu menuitem check:hover, menu menuitem check:disabled, menu menuitem
radio, menu menuitem
radio:hover, menu menuitem
radio:disabled {
min-height: 14px;
min-width: 14px;
background-image: none;
background-color: transparent;
box-shadow: none;
-gtk-icon-shadow: none;
color: inherit;
border-color: currentColor;
animation: none; }
treeview.view check,
treeview.view radio {
color: #000; }
treeview.view check:hover,
treeview.view radio:hover {
color: #000; }
treeview.view check:selected:focus:disabled, treeview.view check:selected:focus, treeview.view check:selected:backdrop:disabled, treeview.view check:selected:backdrop, treeview.view check:selected:disabled, treeview.view check:selected,
check {
border-radius: 3px; }
treeview.view check:checked:selected,
check:checked {
-gtk-icon-source: image(-gtk-recolor(url("assets/check-symbolic.svg")), -gtk-recolor(url("assets/check-symbolic.symbolic.png"))); }
treeview.view check:indeterminate:selected,
check:indeterminate {
-gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")), -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); }
treeview.view radio:selected:focus:disabled, treeview.view radio:selected:focus, treeview.view radio:selected:backdrop:disabled, treeview.view radio:selected:backdrop, treeview.view radio:selected:disabled, treeview.view radio:selected,
radio {
border-radius: 100%; }
treeview.view radio:checked:selected,
radio:checked {
-gtk-icon-source: image(-gtk-recolor(url("assets/bullet-symbolic.svg")), -gtk-recolor(url("assets/bullet-symbolic.symbolic.png"))); }
treeview.view radio:indeterminate:selected,
radio:indeterminate {
-gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")), -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); }
@keyframes check_check {
from {
-gtk-icon-transform: translate(6px, -3px) rotate(-45deg) scaleY(0.2) rotate(45deg) scaleX(0); }
to {
-gtk-icon-transform: unset; } }
@keyframes check_radio {
from {
-gtk-icon-transform: scale(0); }
to {
-gtk-icon-transform: unset; } }
@keyframes check_indeterminate {
from {
-gtk-icon-transform: scale(0, 1); }
to {
-gtk-icon-transform: unset; } }
check:not(:indeterminate):checked {
animation: check_check 400ms; }
radio:not(:indeterminate):checked {
animation: check_radio 400ms; }
check:indeterminate:checked, radio:indeterminate:checked {
animation: check_indeterminate 400ms; }
menu menuitem check:not(:indeterminate):checked,
menu menuitem radio:not(:indeterminate):checked,
menu menuitem check:indeterminate:checked:active,
menu menuitem radio:indeterminate:checked {
animation: none; }
treeview.view check:selected:focus, treeview.view check:selected:hover, treeview.view check:selected,
treeview.view radio:selected:focus,
treeview.view radio:selected:hover,
treeview.view radio:selected {
color: #fff; }
treeview.view check:selected:backdrop:hover, treeview.view check:selected:backdrop,
treeview.view radio:selected:backdrop:hover,
treeview.view radio:selected:backdrop {
color: #fff;
border-color: #fff; }
treeview.view check:selected:backdrop:disabled,
treeview.view radio:selected:backdrop:disabled {
color: gray;
border-color: gray; }
treeview.view check:selected:disabled,
treeview.view radio:selected:disabled {
color: gray; }
/************
* GtkScale *