starred/motioneye

Fork 0

mirror of https://github.com/motioneye-project/motioneye.git synced 2026-03-02 22:57:06 -05:00

Toggle icons look weird in dev #2168

New issue

Closed

opened 2026-02-28 01:06:08 -05:00 by deekerman · 3 comments

deekerman commented

2026-02-28 01:06:08 -05:00

Owner

Originally created by @zagrim on GitHub (Mar 23, 2022).

I'm not sure what caused this, but the toggle icons have started looking weird in the current dev branch. They used to say "ON" / "OFF", but now there's a ugly black "|" for enabled position and similar "O" for disabled position. Change in the text is not bad (kind of more universal I guess), but the issue is how it looks visually, and how it fails to scale (below you can see how it doesn't fit in the element when the browser window is reduced in size).

I'd suppose that won't be too hard to fix, especially if someone has a clue what changed that.

Originally created by @zagrim on GitHub (Mar 23, 2022). I'm not sure what caused this, but the toggle icons have started looking weird in the current dev branch. They used to say "ON" / "OFF", but now there's a ugly black "|" for enabled position and similar "O" for disabled position. Change in the text is not bad (kind of more universal I guess), but the issue is how it looks visually, and how it fails to scale (below you can see how it doesn't fit in the element when the browser window is reduced in size). ![image](https://user-images.githubusercontent.com/25589730/159631431-caca74f2-02e1-46e0-bbb3-b2ce768df722.png) I'd suppose that won't be too hard to fix, especially if someone has a clue what changed that.

deekerman

2026-02-28 01:06:08 -05:00

closed this issue
added the
HTML/HTTP
label

deekerman commented

2026-02-28 01:06:13 -05:00

Author

Owner

@MichaIng commented on GitHub (Mar 23, 2022):

Yes I recognised this as well. I guess it was am internationalisation step, these are the international ON/OFF symbols: https://en.wikipedia.org/wiki/Power_symbol

But those symbols with their current style look like foreign objects on the button, and they are too big on mobile screens, as they do not adjust with the button size itself, which can be nicely seen on your screens.

Since the symbols are so simple, they could be added as inline SVG (in CSS) instead of having them loaded as external SVG every button. Then they can be adjusted to always match the button size. SVGs can use viewBox to define all their internal elements relative size and then their absolute size can be adjusted via CSS relative to the parent element easily.

For the color I'd keep white as it was before ant to match the surrounding text color and bit better into the overall layout, probably with some shade or blurry borders. Let me try to make those beautiful.

@MichaIng commented on GitHub (Mar 23, 2022): Yes I recognised this as well. I guess it was am internationalisation step, these are the international ON/OFF symbols: https://en.wikipedia.org/wiki/Power_symbol But those [symbols](https://github.com/motioneye-project/motioneye/blob/dev/motioneye/static/img/IEC5008_Off_Symbol.svg) with their current style look like foreign objects on the button, and they are too big on mobile screens, as they do not adjust with the button size itself, which can be nicely seen on your screens. Since the symbols are so simple, they could be added as inline SVG (in CSS) instead of having them loaded as external SVG every button. Then they can be adjusted to always match the button size. SVGs can use `viewBox` to define all their internal elements relative size and then their absolute size can be adjusted via CSS relative to the parent element easily. For the color I'd keep white as it was before ant to match the surrounding text color and bit better into the overall layout, probably with some shade or blurry borders. Let me try to make those beautiful.

deekerman commented

2026-02-28 01:06:13 -05:00

Author

Owner

@Marijn0 commented on GitHub (Dec 11, 2025):

I see that this issue is linked to the milestone for v0.43.1. I believe the scaling issue has already been resolved here: 0db1a44.

@Marijn0 commented on GitHub (Dec 11, 2025): I see that this issue is linked to the milestone for v0.43.1. I believe the scaling issue has already been resolved here: 0db1a44.

deekerman commented

2026-02-28 01:06:13 -05:00

Author

Owner

@MichaIng commented on GitHub (Dec 11, 2025):

Yeah you are right. Marking as closed.

@MichaIng commented on GitHub (Dec 11, 2025): Yeah you are right. Marking as closed.

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

starred/motioneye#2168

No description provided.

Rows
Columns