shinuwa/sokko-g
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update toggle butto and switch style
All checks were successful
Deploy Sokko G / deploy (push) Successful in 7s
Details

Browse source
This commit is contained in:
Shinuwa 2026-07-29 10:47:53 +02:00
parent ee579af2ec
commit 0ac78faff6
3 changed files with 39 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

13
website/src/styles/_mixins.scss
View file

@ -50,3 +50,16 @@
linear-gradient(180deg, transparent 0 30%, rgba(246, 196, 83, 0.08) 42%, rgba(246, 196, 83, 0.38) 72%, rgba(246, 196, 83, 0.52) 100%);
}
}
@mixin temporary-toggle-active($text-color: var(--color-text-primary)) {
border-color: rgba(246, 196, 83, 0.46);
background:
radial-gradient(circle at 100% 100%, rgba(139, 92, 246, 0.16), transparent 48%) padding-box,
linear-gradient(135deg, rgba(246, 196, 83, 0.12), rgba(246, 196, 83, 0.02) 42%, rgba(21, 26, 48, 0.04)) padding-box,
linear-gradient(135deg, rgba(13, 17, 34, 0.92), rgba(21, 26, 48, 0.82)) padding-box,
linear-gradient(120deg, rgba(246, 196, 83, 0.86), rgba(255, 244, 196, 0.76), rgba(246, 196, 83, 0.72)) border-box;
color: $text-color;
box-shadow:
inset 0 -2px 0 rgba(246, 196, 83, 0.34),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

39
website/src/styles/_toolboxes.scss
View file

@ -163,9 +163,7 @@
}
.toolbox-icon-picker-menu button.active {
border-color: var(--color-accent-gold);
background: rgba(246, 196, 83, 0.12);
box-shadow: 0 0 0 2px rgba(246, 196, 83, 0.12);
@include mixins.temporary-toggle-active;
}
.toolbox-icon-picker-menu img {
@ -539,12 +537,7 @@
}
.layout-switch button.active {
border-color: rgba(246, 196, 83, 0.34);
background:
linear-gradient(135deg, rgba(72, 43, 160, 0.96), rgba(45, 52, 146, 0.94)) padding-box,
linear-gradient(135deg, rgba(246, 196, 83, 0.66), rgba(139, 92, 246, 0.36)) border-box;
color: white;
box-shadow: var(--shadow-primary);
@include mixins.temporary-toggle-active;
}
.module-drag-handle {
@ -647,9 +640,7 @@
}
.module-edit-button.active {
border-color: var(--color-primary-border);
background: var(--color-primary-soft);
color: var(--color-text-primary);
@include mixins.temporary-toggle-active;
}
.module-icon {
@ -774,10 +765,7 @@
}
.tabs button.active {
border-color: rgba(246, 196, 83, 0.56);
background: rgba(246, 196, 83, 0.12);
color: var(--color-accent-gold);
box-shadow: 0 0 18px rgba(246, 196, 83, 0.08);
@include mixins.temporary-toggle-active;
}
.tabs .module-icon-svg {
@ -2404,18 +2392,13 @@ textarea:focus {
.task-planner-drag-handle:hover:not(:disabled),
.task-planner-category-drag-handle:hover,
.task-planner-settings-toggle:hover,
.task-planner-settings-toggle.active,
.task-planner-dropdown-button:hover,
.task-planner-dropdown-button.active,
.task-planner-settings-button:hover,
.task-planner-settings-button.active,
.task-planner-relation-chip button:hover,
.module-scroll-button:hover,
.module-scroll-button.active,
.tool-split-scroll-toggle:hover,
.tool-split-scroll-toggle.active,
.checklist-complete-mode-button:hover,
.checklist-complete-mode-button.active {
.checklist-complete-mode-button.active:hover {
border-color: rgba(196, 181, 253, 0.32);
background:
linear-gradient(135deg, rgba(31, 37, 68, 0.94), rgba(18, 22, 44, 0.96)) padding-box,
@ -2426,6 +2409,12 @@ textarea:focus {
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.task-planner-settings-toggle.active,
.task-planner-dropdown-button.active,
.task-planner-settings-button.active {
@include mixins.temporary-toggle-active;
}
.timer-alert-mode-button:hover,
.timer-alert-mode-button.active {
border-color: rgba(196, 181, 253, 0.2);
@ -2532,11 +2521,7 @@ textarea:focus {
.module-scroll-button.active,
.tool-split-scroll-toggle.active,
.checklist-complete-mode-button.active {
border-color: rgba(246, 196, 83, 0.34);
background:
linear-gradient(135deg, rgba(72, 43, 160, 0.82), rgba(45, 52, 146, 0.8)) padding-box,
linear-gradient(135deg, rgba(246, 196, 83, 0.58), rgba(139, 92, 246, 0.32)) border-box;
color: var(--color-text-primary);
@include mixins.temporary-toggle-active;
}
.module-scroll-button.active i,