morrigan/crabbysearch
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Provide settings page with full functionality.

Browse source
This commit is contained in:
Sam sunder 2023-06-03 12:56:42 +05:30
parent 1e7f646260
commit c6e833c235
6 changed files with 378 additions and 181 deletions
Download patch file Download diff file Expand all files Collapse all files

136
public/static/themes/simple.css
View file

@ -302,6 +302,7 @@ footer {
width: 80%;
}
/* css for settings page t */
.settings {
margin: 2rem;
width: 80%;
@ -323,6 +324,7 @@ footer {
.settings-view {
display: flex;
flex: 1 0 auto;
margin: 1.5rem 0;
}
.settings-sidebar {
@ -339,16 +341,17 @@ footer {
padding: .7rem;
border-radius: 5px;
font-weight: bold;
margin-bottom: .5rem;
}
.settings-sidebar .set-name:hover, .settings-sidebar .set-name.active {
background-color: var(--1_1);
background-color: rgba(255, 255, 255, 0.15);
}
.settings-detail {
border-left: 1.5px solid var(--3);
padding-left: 3rem;
margin-top: .7rem;
}
.settings-detail .set-item {
@ -367,6 +370,7 @@ footer {
margin-bottom: .5rem;
}
/* css for custom select */
.custom-select, .options {
font-size: 1.5rem;
background-color: var(--bg);
@ -411,7 +415,7 @@ footer {
}
.options span:hover {
background-color: var(--1_1);
background-color: var(--1);
}
.selected-multiple-option {
@ -447,23 +451,21 @@ footer {
background: var(--3);
color: var(--bg);
border-radius: .5rem;
border: 1px solid transparent;
border: 2px solid transparent;
font-weight: bold;
transition: background .5s ease-in;
transition: all .1s ease-out;
cursor: pointer;
}
.settings .submit-btn:hover {
border: 1px solid var(--bg);
background: var(--3_1);
box-shadow: 0px 0px 2px 2px var(--fg);
box-shadow: 5px 5px;
}
.settings .submit-btn:active {
outline: none;
border: 2px solid var(--bg);
box-shadow: none;
translate: 5px 5px;
}
/* Css for error text */
.errTxt {
color: white;
background: red;
@ -471,4 +473,112 @@ footer {
border-radius: 5px;
font-size: 1.3rem;
width: max-content;
}
}
/* Css for toggle element */
label,
label::before,
label::after {
transition: 200ms all ease-in-out 50ms;
box-sizing: border-box;
backface-visibility: hidden;
}
input[type="checkbox"] {
display: none;
}
/*Button is :CHECKED*/
input[type="checkbox"]:checked ~ div[data-isCheckbox] {
background: rgba(73,168,68,1);
box-shadow: 0 0 2px rgba(73,168,68,1);
}
input[type="checkbox"]:checked ~ div[data-isCheckbox] label {
left: 25px;
transform: rotate(360deg);
}
/*shared*/
div[data-isCheckbox],
label {
border-radius: 50px;
}
/*'un':checked state*/
div[data-isCheckbox] {
height: 25px;
width: 50px;
background: rgba(43, 43, 43, 1);
position: relative;
box-shadow: 0 0 2px rgba(43,43,43,1);
}
label {
height: 20px;
width: 20px;
background: rgba(255, 255, 255, 1);
position: absolute;
top: 3px;
left: 3px;
cursor: pointer;
}
label::before {
content: '';
height: 15px;
width: 3px;
position: absolute;
top: calc(50% - 8px);
left: calc(50% - 1.5px);
transform: rotate(45deg);
}
label::after {
content: '';
height: 3px;
width: 15px;
position: absolute;
top: calc(50% - 2.5px);
left: calc(50% - 8px);
transform: rotate(45deg);
}
label::before,
label::after{
background: rgba(43,43,43,1);
border-radius: 5px;
}
/* pesduo class on toggle */
input[type="checkbox"]:checked ~ div label::before{
height: 15px;
top: calc(55% - 8px);
left: calc(60% - 2px);
background: rgba(73,168,68,1);
}
input[type="checkbox"]:checked ~ div label::after{
width: 7px;
top: calc(95% - 7px);
left: calc(22.5% - 2px);
background: rgba(73,168,68,1);
}
.searchEng-elem {
display: flex;
gap: 3rem;
align-items: center;
font-size: 1.5rem;
margin: 1rem 0;
}
.settings-sidebar .set-name[data-detailId="theme"]