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 {
@include toggle_control_styles;
// @include toggle_control_styles;
@include toggle_control_styles($toggle_width: 3.6rem, $toggle_height: 1.4rem);
display: flex;
justify-content: end;
align-items: center;

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

@@ -48,28 +48,34 @@ $toggle_width: 4rem;
$toggle_height: 1.6rem;
$toggle_gutter: 0.1rem;
$toggle_radius: 50%;
$toggle_control_speed: .15s;
$toggle_control_speed: 0.15s;
$toggle_control_ease: ease-out;
@mixin toggle_control_styles(
$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: $toggle_height - calc($toggle_gutter * 2);
$toggle_control_size: calc($toggle_height - ($toggle_gutter * 2));
@mixin toggle_control_styles {
display: block;
position: relative;
height: 100%;
width: auto;
.control {
position: relative;
height: $toggle_height;
width: $toggle_width;
height: $toggle_height;
border-radius: $toggle_radius;
background-color: $toggle_background_color_off;
transition: background-color $toggle_control_speed $toggle_control_ease;
&:after {
content: "";
position: absolute;
left: $toggle_gutter;
top: $toggle_gutter;
left: $toggle_gutter;
width: $toggle_control_size;
height: $toggle_control_size;
border-radius: $toggle_radius;