This commit is contained in:
lalBi94 2023-03-06 05:08:18 +01:00
parent 8f7ca95598
commit 01738fcfa8
2 changed files with 38 additions and 12 deletions

File diff suppressed because one or more lines are too long

View File

@ -2,9 +2,11 @@
<style> <style>
#selector { #selector {
width: 300px; width: 300px;
min-height: 625px; height: auto;
padding: 15px; padding: 20px;
box-shadow: 0px 0px 3px 1px black; box-shadow: 0px 0px 9px 1px black;
background: #7A90A4;
border-radius: 10px;
} }
#selector #selector
@ -21,20 +23,29 @@
#selector #selector
#selector-top-container #selector-top-container
#selector-top-btn { #selector-top-btn {
background: white; background: #344D59;
color: black; color: white;
border-color: black; border-color: black;
width: 20px;
height: 60px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 1.5rem;
}
#selector
#selector-top-container
#selector-top-btn:hover {
background: #4f7689;
transition: 0.5s;
transform: scale(1.005);
} }
#selector #selector
#selector-top-container #selector-top-container
#selector-top-title { #selector-top-title {
text-transform: uppercase; text-transform: uppercase;
font-weight: bold;
color: white;
} }
#selector #selector
@ -45,7 +56,6 @@
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
font-weight: bold; font-weight: bold;
color: black;
list-style-type: none; list-style-type: none;
} }
@ -54,8 +64,19 @@
#selector-list #selector-list
.selector-list-names { .selector-list-names {
text-decoration: none; text-decoration: none;
color: black; color: white;
padding-left: 18px; justify-self: center;
padding: 4px;
}
#selector
#selector-list-container
#selector-list
.selector-list-names:hover {
background: #344D59;
cursor: pointer;
transition: 0.5s;
transform: scale(1.05);
} }
#selector #selector
@ -164,7 +185,13 @@
<span id="selector-top-title"> <span id="selector-top-title">
{ this.state.page.name[this.state.page.curIndex] } { this.state.page.name[this.state.page.curIndex] }
</span> </span>
<button onclick={ previousPage } id="selector-top-btn">&lt;</button>
<button
if={ this.state.page.curIndex > 0 }
onclick={ previousPage }
id="selector-top-btn">
&lt;
</button>
</div> </div>
<div id="selector-list-container"> <div id="selector-list-container">