diff --git a/style.css b/style.css
index 2cb730d1..cc6376d4 100644
--- a/style.css
+++ b/style.css
@@ -265,48 +265,44 @@ label[for="siwtch-code-mode"]::after {
display: none;
}
-.switch-ipt{
- display:none;
+input+label{
+ margin-right: 3px;
}
-.switch-lbl{
- cursor: pointer;
- line-height: 25px;
- margin-right: 10px;
+input[type="checkbox"].switch-ipt {
+ display: none;
+}
+input[type="checkbox"].switch-ipt+label{
display: inline-block;
}
-.switch-lbl>circle{
- width: 28px;
- height: 12px;
- display: inline-block;
- position: relative;
- background-color: #8884;
- border-radius: 16px;
- margin-right: 5px;
+input[type="checkbox"].switch-ipt+label::after{
+ vertical-align: middle;
}
-.switch-lbl>circle::before{
- content:"";
- width: 20px;
- height: 20px;
- position: absolute;
+input[type="checkbox"].switch-ipt+label::before{
+ vertical-align: middle;
+ content: "";
+ display: inline-block;
+ width: 2em;
+ height: 1.1em;
+ border-radius: 0.5em;
+ background-image: radial-gradient(white 50%, transparent 50.1%);
+ background-size: 1.1em 1.1em;
+ background-repeat: no-repeat;
transition: .3s ease-out;
- background-color: #c6c6c6;
- box-shadow: 0 2px 4px 0 #0003;
- border-radius: 50%;
- left: -4px;
- top: -4px;
+
+ background-color: #888;
+ background-position: left;
}
-.switch-ipt:checked+.switch-lbl>circle {
- background: rgba(0,160,216,0.8);
+input[type="checkbox"].switch-ipt:checked+label::before{
+ background-color: #0ae;
+ background-position: right;
}
-.switch-ipt:checked+.switch-lbl>circle::before {
- background: #00A0D8;
- box-shadow: 0 2px 4px 0 rgba(0,160,216,0.4);
- left: calc(100% - 16px);
+input[type="checkbox"].switch-ipt+label:hover:before{
+ box-shadow: inset white 0 0 2px, black 0 0 2px;
}
-.switch-lbl[for$=and-or]::after{
+label[for$=and-or]::after{
content: "OR";
}
-input:checked+ .switch-lbl[for$=and-or]::after{
+input:checked+label[for$=and-or]::after{
content: "AND";
}
@@ -1675,11 +1671,12 @@ body:not(.solo) .awoken-icon[data-awoken-icon="64"]::after
#search-attr {
display: grid;
grid-auto-rows: min-content;
- grid-template-columns: 100px auto;
+ grid-template-columns: 100px 400px 30px auto;
grid-gap: 3px;
}
#search-attr .options {
- grid-column: 1 / 3;
+ grid-column: 1 / 4;
+ grid-row: 2 / 3;
}
#search-attr .monster .custom-avatar {
display: block;
@@ -1696,12 +1693,17 @@ body:not(.solo) .awoken-icon[data-awoken-icon="64"]::after
}
#avatar-select {
display: none;
+ min-width: unset;
+}
+#attr-clear {
+ writing-mode: vertical-rl;
}
#search-attr .attr-selecter-list {
display: inline-flex;
flex-flow: column;
row-gap: 3px;
padding-top: 2px;
+ width: min-content;
}
#search-attr .attr-list>li {
width: 55px;
@@ -1894,11 +1896,13 @@ body:not(.solo) .awoken-icon[data-awoken-icon="64"]::after
}
.search-box .selected-awokens-div {
margin-bottom: 5px;
+ display: grid;
+ grid-template-columns: auto 80px;
+ gap: 5px;
}
.search-box .selected-awokens-div .selected-awokens{
min-height: 32px;
box-sizing: border-box;
- width: calc(100% - 95px);
min-width: 320px;
background-color: #00000044;
border-radius: 6px;
@@ -1927,9 +1931,8 @@ body:not(.solo) .awoken-icon[data-awoken-icon="64"]::after
margin-left: 10px;
}
-.search-box .brown-button
-{
- min-width: 80px;
+.search-box .brown-button {
+ min-width: unset;
background-size: 100px 100px;
background-position-y: 40px;
font-size: 18px;