candifloss/ldapmanager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style fixes

Browse Source
This commit is contained in:
Candifloss 2024-10-30 16:44:23 +05:30
parent f9c45de019
commit 494af30e43
6 changed files with 39 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
test/css/entry-form.css
View File

@ -111,9 +111,8 @@ body .form-container form fieldset .form-group.checkbox-set .checkboxes label.ch
border-color: #007b8a; border-color: #007b8a;
} }
body .form-container form fieldset .form-group.checkbox-set .checkboxes input[type=checkbox]:checked + label.checkbox { body .form-container form fieldset .form-group.checkbox-set .checkboxes input[type=checkbox]:checked + label.checkbox {
background-color: #009299; background-color: #3b8084;
color: #ffffff; color: #ffffff;
border-color: rgba(0, 170, 179, 0.8);
} }
body .form-container form fieldset .form-group.dropdown-menu { body .form-container form fieldset .form-group.dropdown-menu {
flex: 1 1 calc(50% - 20px); flex: 1 1 calc(50% - 20px);
@ -146,9 +145,8 @@ body .form-container form fieldset .form-group.radio-input .radio-group label.ra
border-color: #007b8a; border-color: #007b8a;
} }
body .form-container form fieldset .form-group.radio-input .radio-group input[type=radio]:checked + label.radio { body .form-container form fieldset .form-group.radio-input .radio-group input[type=radio]:checked + label.radio {
background-color: #009299; background-color: #3b8084;
color: #ffffff; color: #ffffff;
border-color: rgba(0, 170, 179, 0.8);
} }
body .form-container form fieldset .form-group input[type=range] { body .form-container form fieldset .form-group input[type=range] {
-webkit-appearance: none; -webkit-appearance: none;
@ -156,7 +154,7 @@ body .form-container form fieldset .form-group input[type=range] {
width: 100%; width: 100%;
height: 45px; height: 45px;
border-radius: 6px; border-radius: 6px;
background: linear-gradient(to right, #009299 0%, #009299 var(--value), rgba(245, 245, 245, 0.9) 0%); background: linear-gradient(to right, #3b8084 0%, #3b8084 var(--value), rgba(245, 245, 245, 0.9) 0%);
border: 1px solid rgba(220, 220, 220, 0.8); border: 1px solid rgba(220, 220, 220, 0.8);
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
@ -200,7 +198,7 @@ body .form-container form fieldset .form-group input[type=range]:focus {
border-color: #007b8a; border-color: #007b8a;
} }
body .form-container form .collapsible-section-title { body .form-container form .collapsible-section-title {
display: block; display: flex;
width: 100%; width: 100%;
color: #b1b1b1; color: #b1b1b1;
font-weight: bold; font-weight: bold;
@ -208,15 +206,25 @@ body .form-container form .collapsible-section-title {
cursor: pointer; cursor: pointer;
margin-bottom: 10px; margin-bottom: 10px;
border-bottom: 2px solid rgba(220, 220, 220, 0.8); border-bottom: 2px solid rgba(220, 220, 220, 0.8);
padding: 10px 2px; padding: 10px 7px 10px 5px;
transition: background-color 0.3s;
} }
body .form-container form .collapsible-section-title:hover { body .form-container form .collapsible-section-title:hover {
color: #636363; color: #636363;
background-color: #d4d4d4; background-color: #d4d4d4;
} }
body .form-container form #collapsible-section-title-1:checked + .collapsible-section { body .form-container form .collapsible-section-title::after {
flex: 1 1 50%;
content: "x";
text-align: end;
transition: display 0.3s;
}
body .form-container form #collapsible-section-title-1:checked ~ .collapsible-section {
display: none; display: none;
} }
body .form-container form #collapsible-section-title-1:checked ~ .collapsible-section-title::after {
content: "+";
}
body .form-container form .submit-buttons { body .form-container form .submit-buttons {
flex: 1 1 100%; flex: 1 1 100%;
display: flex; display: flex;

8
test/html/adduser.html
View File

@ -7,7 +7,6 @@
<title>Add New User</title> <title>Add New User</title>
</head> </head>
<body> <body>
<div class="form-container"> <div class="form-container">
<h2>Add New User</h2> <h2>Add New User</h2>
<form action="/add_user" method="post" id="user-form"> <form action="/add_user" method="post" id="user-form">
@ -113,8 +112,8 @@
</div> </div>
</fieldset> </fieldset>
<label class="collapsible-section-title" for="collapsible-section-title-1">Advanced</label>
<input type="checkbox" class="false-header-checkbox" id="collapsible-section-title-1" checked> <input type="checkbox" class="false-header-checkbox" id="collapsible-section-title-1" checked>
<label class="collapsible-section-title" for="collapsible-section-title-1">Advanced</label>
<fieldset class="collapsible-section" form="user-form"> <fieldset class="collapsible-section" form="user-form">
<div class="form-group"> <div class="form-group">
<label for="employee-id">Employee ID</label> <label for="employee-id">Employee ID</label>
@ -138,13 +137,12 @@
</fieldset> </fieldset>
<div class="form-group submit-buttons"> <div class="form-group submit-buttons">
<button type="reset" class="clear-button">Clear</button> <button type="reset" class="clear-button" form="user-form">Clear</button>
<button type="submit" class="submit">Add User</button> <button type="submit" class="submit" form="user-form">Add User</button>
</div> </div>
</form> </form>
</div> </div>
</body> </body>
<script src="../js/rangeslider.js"></script> <script src="../js/rangeslider.js"></script>
</html> </html>

2
test/scss/_colors.scss
View File

@ -59,7 +59,7 @@ $user-form-checkbox-button-hover-color: rgba(232, 232, 232, 0.9);
$user-form-checkbox-button-hover-text-color: #007b8a; $user-form-checkbox-button-hover-text-color: #007b8a;
$user-form-checkbox-button-hover-border-color: #007b8a; $user-form-checkbox-button-hover-border-color: #007b8a;
// Checked // Checked
$user-form-checkbox-button-active-color: #009299; $user-form-checkbox-button-active-color: #3b8084;;
$user-form-checkbox-button-active-text-color: #ffffff; $user-form-checkbox-button-active-text-color: #ffffff;
$user-form-checkbox-button-active-border-color: rgba(0, 170, 179, 0.8); $user-form-checkbox-button-active-border-color: rgba(0, 170, 179, 0.8);

1
test/scss/entry-form-fields/_checkboxes.scss
View File

@ -44,7 +44,6 @@
input[type="checkbox"]:checked + label.checkbox { input[type="checkbox"]:checked + label.checkbox {
background-color: $user-form-checkbox-button-active-color; background-color: $user-form-checkbox-button-active-color;
color: $user-form-checkbox-button-active-text-color; color: $user-form-checkbox-button-active-text-color;
border-color: $user-form-checkbox-button-active-border-color;
} }
} }
} }

23
test/scss/entry-form-fields/_collapsible-section.scss
View File

@ -4,7 +4,7 @@
// Collapsible sections in the form, like "Advanced" // Collapsible sections in the form, like "Advanced"
@mixin collapsible { @mixin collapsible {
.collapsible-section-title { .collapsible-section-title {
display: block; display: flex;
width: 100%; width: 100%;
color: $details-closed-summary-color; color: $details-closed-summary-color;
font-weight: bold; font-weight: bold;
@ -12,15 +12,30 @@
cursor: pointer; cursor: pointer;
margin-bottom: 10px; margin-bottom: 10px;
border-bottom: 2px solid $details-summary-border-color; border-bottom: 2px solid $details-summary-border-color;
padding: 10px 2px; padding: 10px 7px 10px 5px;
transition: background-color 0.3s;
&:hover { &:hover {
color: $details-summary-hover-color; color: $details-summary-hover-color;
background-color: #d4d4d4; background-color: #d4d4d4;
} }
&::after {
flex: 1 1 50%;
content: "x";
text-align: end;
transition: display 0.3s;
}
} }
#collapsible-section-title-1:checked + .collapsible-section { #collapsible-section-title-1:checked {
display: none; ~ .collapsible-section {
display: none;
}
~ .collapsible-section-title {
&::after {
content: "+";
}
}
} }
} }

1
test/scss/entry-form-fields/_radio-buttons.scss
View File

@ -41,7 +41,6 @@
input[type="radio"]:checked + label.radio { input[type="radio"]:checked + label.radio {
background-color: $user-form-radio-button-active-color; background-color: $user-form-radio-button-active-color;
color: $user-form-radio-button-active-text-color; color: $user-form-radio-button-active-text-color;
border-color: $user-form-radio-button-active-border-color;
} }
} }
} }