diff options
Diffstat (limited to 'Pages/Component/AclActionSwitch.razor.css')
| -rw-r--r-- | Pages/Component/AclActionSwitch.razor.css | 48 |
1 files changed, 48 insertions, 0 deletions
diff --git a/Pages/Component/AclActionSwitch.razor.css b/Pages/Component/AclActionSwitch.razor.css new file mode 100644 index 0000000..e9de5a2 --- /dev/null +++ b/Pages/Component/AclActionSwitch.razor.css @@ -0,0 +1,48 @@ +div.outer { + align-items: center; + border-radius: 10px; + border: 1px solid var(--color-aclaction-deny); + cursor: pointer; + display: flex; + flex-direction: row; + height: 20px; + position: relative; + transition: border-color 0.1s linear; + user-select: none; + width: min-content; +} + +div.inner { + background: var(--color-aclaction-deny); + border-radius: 8px; + height: calc(100% - 2px); + left: 1px; + position: absolute; + top: 1px; + transition: left 0.1s linear, background 0.1s linear; + width: calc(50% - 2px); + z-index: 1; +} + +div.outer p { + color: white; + font-family: 'Trebuchet MS'; + font-size: 8pt; + text-align: center; + transition: color 0.1s linear; + width: 50px; + z-index: 2; +} + +input:checked + div.outer { + border-color: var(--color-aclaction-allow); +} + +input:checked + div.outer > div.inner { + background: var(--color-aclaction-allow); + left: calc(50% + 1px); +} + +input:checked + div.outer p:nth-child(2) { + color: black; +}
\ No newline at end of file |