every_holiday/VRCT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Update] Main Page: MainFunctionSwitch: to be a bit smaller than before for allow long label on its main function.

Browse Source
This commit is contained in:
Sakamoto Shiina
2025-03-18 21:09:59 +09:00
parent f40f916bec
commit 92752d5953
2 changed files with 20 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.module.scss
View File

@@ -78,7 +78,9 @@ $pending_label_color: var(--dark_500_color);
} }
.toggle_control { .toggle_control {
@include toggle_control_styles; // @include toggle_control_styles;
@include toggle_control_styles($toggle_width: 3.6rem, $toggle_height: 1.4rem);
display: flex; display: flex;
justify-content: end; justify-content: end;
align-items: center; align-items: center;

28
src-ui/common_css/mixins.scss
View File

@@ -48,35 +48,41 @@ $toggle_width: 4rem;
$toggle_height: 1.6rem; $toggle_height: 1.6rem;
$toggle_gutter: 0.1rem; $toggle_gutter: 0.1rem;
$toggle_radius: 50%; $toggle_radius: 50%;
$toggle_control_speed: .15s; $toggle_control_speed: 0.15s;
$toggle_control_ease: ease-out; $toggle_control_ease: ease-out;
$toggle_radius: calc($toggle_height / 2); @mixin toggle_control_styles(
$toggle_control_size: $toggle_height - calc($toggle_gutter * 2); $toggle_width: $toggle_width,
$toggle_height: $toggle_height,
$toggle_gutter: $toggle_gutter,
$toggle_background_color_on: $toggle_background_color_on,
$toggle_background_color_off: $toggle_background_color_off,
$toggle_control_color: $toggle_control_color,
$toggle_control_speed: $toggle_control_speed,
$toggle_control_ease: $toggle_control_ease
) {
$toggle_radius: calc($toggle_height / 2);
$toggle_control_size: calc($toggle_height - ($toggle_gutter * 2));
@mixin toggle_control_styles {
display: block;
position: relative;
height: 100%;
width: auto;
.control { .control {
position: relative; position: relative;
height: $toggle_height;
width: $toggle_width; width: $toggle_width;
height: $toggle_height;
border-radius: $toggle_radius; border-radius: $toggle_radius;
background-color: $toggle_background_color_off; background-color: $toggle_background_color_off;
transition: background-color $toggle_control_speed $toggle_control_ease;
&:after { &:after {
content: ""; content: "";
position: absolute; position: absolute;
left: $toggle_gutter;
top: $toggle_gutter; top: $toggle_gutter;
left: $toggle_gutter;
width: $toggle_control_size; width: $toggle_control_size;
height: $toggle_control_size; height: $toggle_control_size;
border-radius: $toggle_radius; border-radius: $toggle_radius;
background: $toggle_control_color; background: $toggle_control_color;
transition: left $toggle_control_speed $toggle_control_ease; transition: left $toggle_control_speed $toggle_control_ease;
} }
&.is_pending:after{ &.is_pending:after {
background-color: var(--dark_600_color); background-color: var(--dark_600_color);
} }
&.is_hovered { &.is_hovered {