emily/video2document
1
0
Fork 0
mirror of https://gitlab.rlp.net/proj-wise2526-video2document/video2document.git synced 2026-06-15 18:01:52 +02:00
Code Issues Packages Projects Releases Wiki Activity

New Checkboxes

Browse Source
This commit is contained in:
Verena Schulz
2025-12-13 21:21:17 +01:00
parent 4747c44c52
commit bb589e6aad
2 changed files with 64 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
electron/main/style.css
+63 -15
View File
@@ -21,7 +21,7 @@ body {
}
#h1-wrapper {
position: relative;
position: relative;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
width: 770px;
height: 60px;
@@ -113,22 +113,67 @@ input[type="file"] {
display: none;
}
.checkbox-container{
margin-top: 8px;
display: flex;
align-items: center;
gap: 5px;
}
.checkbox-group {
margin-top: 15px;
margin-bottom: 15px;
--borderColor: #007bfff5;
--borderWidth: .125em;
}
.checkbox-group input[type=checkbox] {
-webkit-appearance: none;
appearance: none;
vertical-align: middle;
background: #fff;
font-size: 1.8em;
border-radius: 0.125em;
display: inline-block;
border: var(--borderWidth) solid var(--borderColor);
width: 1em;
height: 1em;
position: relative;
}
.checkbox-group input[type=checkbox]:before,
.checkbox-group input[type=checkbox]:after {
content: "";
position: absolute;
background: var(--borderColor);
width: calc(var(--borderWidth) * 3);
height: var(--borderWidth);
top: 50%;
left: 10%;
transform-origin: left center;
}
.checkbox-group input[type=checkbox]:before {
transform: rotate(45deg) translate(calc(var(--borderWidth) / -2), calc(var(--borderWidth) / -2)) scaleX(0);
transition: transform 200ms ease-in 200ms;
}
.checkbox-group input[type=checkbox]:after {
width: calc(var(--borderWidth) * 5);
transform: rotate(-45deg) translateY(calc(var(--borderWidth) * 2)) scaleX(0);
transform-origin: left center;
transition: transform 200ms ease-in;
}
.checkbox-group input[type=checkbox]:checked:before {
transform: rotate(45deg) translate(calc(var(--borderWidth) / -2), calc(var(--borderWidth) / -2)) scaleX(1);
transition: transform 200ms ease-in;
}
.checkbox-group input[type=checkbox]:checked:after {
width: calc(var(--borderWidth) * 5);
transform: rotate(-45deg) translateY(calc(var(--borderWidth) * 2)) scaleX(1);
transition: transform 200ms ease-out 200ms;
}
.checkbox-group input[type=checkbox]:focus {
outline: calc(var(--borderWidth) / 2) dotted rgba(0, 0, 0, 0.25);
}
.checkbox-container{
margin-top: 8px;
display: flex;
flex-direction: column;
gap: 10px;
align-items: flex-start;
justify-items: left;
align-items: center;
gap: 5px;
}
.submit-btn {
display: flex;
justify-content: center;
@@ -157,7 +202,6 @@ gap: 5px;
flex-direction: column;
align-items: center;
padding: 40px;
margin-top: 20px;
gap: 10px;
border: 0px;
border-color: black;
@@ -412,4 +456,8 @@ li {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#step2, #step3, #step5 {
font-size: larger;
}