Update toggle switch styles in controls.css
This commit is contained in:
Vladyslav Hroshev
@@ -1,16 +1,55 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg width="48" height="26" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(-1 0 0 1 0 -291.18)">
|
||||
<rect style="stroke: none;
|
||||
stroke-width: 1;
|
||||
marker: none;
|
||||
fill: rgb(255, 0, 0);
|
||||
fill-opacity: 0;"
|
||||
x="-48" y="291.18" width="48" height="26" rx="4" ry="4"/>
|
||||
<rect style="stroke: none;
|
||||
stroke-width: .999999;
|
||||
marker: none;
|
||||
fill: TEXT-SECONDARY-COLOR; fill-opacity: 1" fill="#f8f7f7"
|
||||
x="-24" y="293.18" width="22" height="22" rx="9" ry="9"/>
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="33.23077"
|
||||
height="18"
|
||||
version="1.1"
|
||||
id="svg2"
|
||||
sodipodi:docname="toggle-off_popup.svg"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs2" />
|
||||
<sodipodi:namedview
|
||||
id="namedview2"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:zoom="16.9375"
|
||||
inkscape:cx="24"
|
||||
inkscape:cy="13.01845"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1007"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg2" />
|
||||
<g
|
||||
transform="matrix(-0.69230769,0,0,0.69230769,0,-201.58615)"
|
||||
id="g2">
|
||||
<rect
|
||||
style="fill:#ff0000;fill-opacity:0;stroke:none;stroke-width:1;marker:none"
|
||||
x="-48"
|
||||
y="291.17999"
|
||||
width="48"
|
||||
height="26"
|
||||
rx="4"
|
||||
ry="4"
|
||||
id="rect1" />
|
||||
<rect
|
||||
style="fill-opacity:1;stroke:none;stroke-width:0.90909;marker:none"
|
||||
fill="TEXT-SECONDARY-COLOR"
|
||||
x="-23"
|
||||
y="294.17999"
|
||||
width="20"
|
||||
height="20"
|
||||
id="rect2"
|
||||
ry="10" />
|
||||
</g>
|
||||
</svg>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 611 B After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,56 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="40"
|
||||
height="21.666666"
|
||||
version="1.1"
|
||||
id="svg2"
|
||||
sodipodi:docname="toggle-off_dnd.svg"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs2" />
|
||||
<sodipodi:namedview
|
||||
id="namedview2"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:zoom="19.229167"
|
||||
inkscape:cx="24"
|
||||
inkscape:cy="12.975081"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1007"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="g2" />
|
||||
<g
|
||||
transform="matrix(-0.83333333,0,0,0.83333333,0,-242.54999)"
|
||||
id="g2">
|
||||
<rect
|
||||
style="fill:#ff0000;fill-opacity:0;stroke:none;stroke-width:1;marker:none"
|
||||
x="-48"
|
||||
y="291.17999"
|
||||
width="48"
|
||||
height="26"
|
||||
rx="4"
|
||||
ry="4"
|
||||
id="rect1" />
|
||||
<rect
|
||||
style="fill-opacity:1;stroke:none;stroke-width:0.999999;marker:none"
|
||||
fill="TEXT-SECONDARY-COLOR"
|
||||
x="-23"
|
||||
y="294.06"
|
||||
width="20"
|
||||
height="20"
|
||||
rx="8"
|
||||
ry="8"
|
||||
id="rect2" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -1,16 +1,55 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg width="48" height="26" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(-1 0 0 1 0 -291.18)">
|
||||
<rect style="stroke: none;
|
||||
stroke-width: 1;
|
||||
marker: none;
|
||||
fill: rgb(255, 0, 0);
|
||||
fill-opacity: 0;"
|
||||
x="-48" y="291.18" width="48" height="26" rx="4" ry="4"/>
|
||||
<rect style="stroke: none;
|
||||
stroke-width: .999999; marker: none;
|
||||
fill: BUTTON-TEXT-COLOR;
|
||||
fill-opacity: 1" fill="#f8f7f7"
|
||||
x="-46" y="293.18" width="22" height="22" rx="9" ry="9"/>
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="33.23077"
|
||||
height="18"
|
||||
version="1.1"
|
||||
id="svg2"
|
||||
sodipodi:docname="toggle-on_popup.svg"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs2" />
|
||||
<sodipodi:namedview
|
||||
id="namedview2"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:zoom="16.9375"
|
||||
inkscape:cx="24"
|
||||
inkscape:cy="13.01845"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1007"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg2" />
|
||||
<g
|
||||
transform="matrix(0.69230769,0,0,0.69230769,33.230769,-201.58615)"
|
||||
id="g2">
|
||||
<rect
|
||||
style="fill:#ff0000;fill-opacity:0;stroke:none;stroke-width:1;marker:none"
|
||||
x="-48"
|
||||
y="291.17999"
|
||||
width="48"
|
||||
height="26"
|
||||
rx="4"
|
||||
ry="4"
|
||||
id="rect1" />
|
||||
<rect
|
||||
style="fill-opacity:1;stroke:none;stroke-width:0.90909;marker:none"
|
||||
fill="BUTTON-TEXT-COLOR"
|
||||
x="-23"
|
||||
y="294.17999"
|
||||
width="20"
|
||||
height="20"
|
||||
id="rect2"
|
||||
ry="10" />
|
||||
</g>
|
||||
</svg>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 608 B After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,56 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="40"
|
||||
height="21.666666"
|
||||
version="1.1"
|
||||
id="svg2"
|
||||
sodipodi:docname="toggle-on_dnd.svg"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs2" />
|
||||
<sodipodi:namedview
|
||||
id="namedview2"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:zoom="13.597074"
|
||||
inkscape:cx="-4.0817605"
|
||||
inkscape:cy="27.616235"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1007"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="g2" />
|
||||
<g
|
||||
transform="matrix(-0.83333333,0,0,0.83333333,0,-242.65)"
|
||||
id="g2">
|
||||
<rect
|
||||
style="fill:#ff0000;fill-opacity:0;stroke:none;stroke-width:1;marker:none"
|
||||
x="-48"
|
||||
y="291.17999"
|
||||
width="48"
|
||||
height="26"
|
||||
rx="4"
|
||||
ry="4"
|
||||
id="rect1" />
|
||||
<rect
|
||||
style="fill-opacity:1;stroke:none;stroke-width:0.865817;marker:none"
|
||||
fill="BUTTON-TEXT-COLOR"
|
||||
x="-45"
|
||||
y="294.17981"
|
||||
width="20.000401"
|
||||
height="20.000401"
|
||||
id="rect2"
|
||||
ry="8.0003996"
|
||||
rx="8.0003996" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@@ -27,8 +27,11 @@
|
||||
|
||||
.toggle-switch {
|
||||
background-image: url("./toggle-off.svg");
|
||||
/* size same as svg */
|
||||
height: 18px;
|
||||
width: 33.2px;
|
||||
background-color: ACCENT-DISABLED_HOVER;
|
||||
border-radius: 10px;
|
||||
border-radius: 99px;
|
||||
box-shadow: inset 0 0 0 1px BORDER-SHADOW !important;
|
||||
}
|
||||
|
||||
@@ -41,12 +44,17 @@
|
||||
/* Do Not Distrub toggle */
|
||||
|
||||
.dnd-button {
|
||||
width: 48px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.dnd-button .toggle-switch {
|
||||
/* size same as svg */
|
||||
width: 40px;
|
||||
height: 21.7px;
|
||||
border-radius: 9px;
|
||||
background-image: url("./toggle-off_dnd.svg");
|
||||
background-color: ACCENT-DISABLED-COLOR;
|
||||
transition-duration: 100ms;
|
||||
}
|
||||
|
||||
.dnd-button:hover .toggle-switch {
|
||||
@@ -54,6 +62,7 @@
|
||||
}
|
||||
|
||||
.dnd-button .toggle-switch:checked {
|
||||
background-image: url("./toggle-on_dnd.svg");
|
||||
background-color: BUTTON-COLOR;
|
||||
}
|
||||
|
||||
@@ -76,6 +85,7 @@
|
||||
color: TEXT-PRIMARY-COLOR;
|
||||
background-color: ACCENT-DISABLED-COLOR;
|
||||
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
|
||||
transition-duration: 100ms;
|
||||
}
|
||||
|
||||
.button:insensitive {
|
||||
@@ -100,6 +110,9 @@
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.message-list-clear-button:insensitive {
|
||||
background-color: SECTION-COLOR;
|
||||
}
|
||||
|
||||
/* Sliders */
|
||||
|
||||
|
||||
Reference in New Issue
Block a user