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/index.html
+1 -1
View File
@@ -81,7 +81,7 @@
<div class="step" id="step3" style="display:none;">
<div class="checkbox-group">
<label id="checkbox_group" for="checkbox-group">Choose prefered document style:</label>
<label id="checkbox-label" for="checkbox-group">Choose prefered document style:</label>
<div class="checkbox-container">
<input type="checkbox" name ="docFormat" id="docFormat" value="Meeting report">
<label id="label_format" for="docFormat">Follow-up Report</label>
electron/main/style.css
+57 -9
View File
@@ -113,21 +113,66 @@ input[type="file"] {
display: none;
}
.checkbox-group {
--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;
justify-items: left;
align-items: center;
gap: 5px;
}
.checkbox-group {
margin-top: 15px;
margin-bottom: 15px;
display: flex;
flex-direction: column;
gap: 10px;
align-items: flex-start;
}
.submit-btn {
display: flex;
@@ -157,7 +202,6 @@ gap: 5px;
flex-direction: column;
align-items: center;
padding: 40px;
margin-top: 20px;
gap: 10px;
border: 0px;
border-color: black;
@@ -413,3 +457,7 @@ li {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#step2, #step3, #step5 {
font-size: larger;
}