bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Split svg into files and add a css file

Browse Source
This commit is contained in:
Bruno Canepa
2025-12-08 18:40:27 -03:00
parent f419ba5a13
commit 5175353979
6 changed files with 80 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/images/monitor.svg
+1
View File
@@ -0,0 +1 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 3H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h5v2H7v2h10v-2h-2v-2h5c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H4V5h16v10z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 190 B

app/assets/images/moon.svg
+1
View File
@@ -0,0 +1 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M21.64 13.24A9 9 0 1 1 10.76 2.36a9.07 9.07 0 0 0 10.88 10.88z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 141 B

app/assets/images/sun.svg
+1
View File
@@ -0,0 +1 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 544 B

app/assets/stylesheets/icons.css
+3
View File
@@ -72,6 +72,8 @@
.icon--menu-dots-horizontal { --svg: url("menu-dots-horizontal.svg "); }
.icon--menu-dots-vertical { --svg: url("menu-dots-vertical.svg "); }
.icon--minus { --svg: url("minus.svg "); }
.icon--monitor { --svg: url("monitor.svg "); }
.icon--moon { --svg: url("moon.svg "); }
.icon--move { --svg: url("move.svg "); }
.icon--notification-bell-access-only { --svg: url("bell.svg "); }
.icon--notification-bell-watching { --svg: url("bell-off.svg "); }
@@ -96,6 +98,7 @@
.icon--settings { --svg: url("settings.svg "); }
.icon--share { --svg: url("share.svg "); }
.icon--sliders { --svg: url("sliders.svg "); }
.icon--sun { --svg: url("sun.svg "); }
.icon--switch { --svg: url("switch.svg "); }
.icon--tag { --svg: url("tag.svg "); }
.icon--tag-outline { --svg: url("tag-outline.svg "); }
app/assets/stylesheets/theme-switcher.css
+67
View File
@@ -0,0 +1,67 @@
@layer components {
.theme-switcher {
--gap: 8px;
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--gap);
inline-size: 100%;
justify-content: center;
margin: 1rem auto;
max-inline-size: 100%;
}
.theme-switcher__btn {
--btn-border-radius: 0.4em;
align-items: center;
aspect-ratio: 5/3;
background-color: var(--color-ink-lightest);
border: none;
border-radius: 0.5em;
color: inherit;
cursor: pointer;
display: flex;
flex-basis: calc((100% - var(--gap) * 2) / 3);
flex-direction: column;
font-size: var(--text-small);
line-height: 1;
justify-content: center;
overflow: hidden;
padding: 0.5em;
position: relative;
row-gap: 0.3lh;
text-align: center;
.icon {
--icon-size: 2em;
}
span {
display: block;
text-wrap: nowrap;
}
@media (max-width: 639px) {
font-size: var(--text-x-small);
font-weight: 500;
}
@media (any-hover: hover) {
&:hover {
background-color: var(--color-ink-lighter);
}
}
&[aria-selected="true"] {
background-color: var(--color-selected);
@media (any-hover: hover) {
&:hover {
background-color: var(--color-selected);
}
}
}
}
}
app/views/users/_theme.html.erb
+7 -23
View File
@@ -1,35 +1,19 @@
<div class="flex flex-column align-center gap txt-medium--responsive txt-medium margin-block-start-double">
<strong class="txt-medium">Appearance</strong>
<div class="nav__hotkeys" role="list" style="margin: 1rem auto;">
<button type="button" class="popup__item btn borderless" data-action="click->theme#setLight" data-theme-target="lightBtn" role="listitem">
<svg xmlns="http://www.w3.org/2000/svg" style="width: 2em; height: 2em;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="5"/>
<line x1="12" y1="1" x2="12" y2="3"/>
<line x1="12" y1="21" x2="12" y2="23"/>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
<line x1="1" y1="12" x2="3" y2="12"/>
<line x1="21" y1="12" x2="23" y2="12"/>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
</svg>
<div class="theme-switcher">
<button type="button" class="theme-switcher__btn" data-action="click->theme#setLight" data-theme-target="lightBtn">
<%= icon_tag "sun" %>
<span>Always light</span>
</button>
<button type="button" class="popup__item btn borderless" data-action="click->theme#setDark" data-theme-target="darkBtn" role="listitem">
<svg xmlns="http://www.w3.org/2000/svg" style="width: 2em; height: 2em;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
</svg>
<button type="button" class="theme-switcher__btn" data-action="click->theme#setDark" data-theme-target="darkBtn">
<%= icon_tag "moon" %>
<span>Always dark</span>
</button>
<button type="button" class="popup__item btn borderless" data-action="click->theme#setAuto" data-theme-target="autoBtn" role="listitem">
<svg xmlns="http://www.w3.org/2000/svg" style="width: 2em; height: 2em;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
<line x1="8" y1="21" x2="16" y2="21"/>
<line x1="12" y1="17" x2="12" y2="21"/>
</svg>
<button type="button" class="theme-switcher__btn" data-action="click->theme#setAuto" data-theme-target="autoBtn">
<%= icon_tag "monitor" %>
<span>Same as OS</span>
</button>
</div>