b73c14c7cc
The config menu has gotten out of control recently, but rather than reducing functionality, I'm just going to set a max height for the div and allow scrolling within the menu. Ultimately though this indicates that the app is getting a bit too complicated (imo). Striking a balance between customization and minimalism is less of a priority for me nowadays though, hence why I'm willing to let it slide for now. At some point, maybe when there are more contributors, it could be nice to refactor this in some way so that it isn't overwhelming to new users who are looking to customize their instance (that's just me speculating btw, I haven't actually heard from anyone who thinks there are too many options in that menu).
171 lines
2.6 KiB
CSS
171 lines
2.6 KiB
CSS
body {
|
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
.logo {
|
|
width: 80%;
|
|
display: block;
|
|
margin: auto;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.logo-container {
|
|
max-height: 500px;
|
|
}
|
|
|
|
.home-search {
|
|
background: transparent !important;
|
|
border: 3px solid;
|
|
}
|
|
|
|
.search-container {
|
|
background: transparent !important;
|
|
width: 80%;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
max-width: 600px;
|
|
z-index: 15;
|
|
}
|
|
|
|
.search-items {
|
|
width: 100%;
|
|
position: relative;
|
|
display: flex;
|
|
}
|
|
|
|
#search-bar {
|
|
background: transparent !important;
|
|
width: 100%;
|
|
padding: 5px;
|
|
height: 40px;
|
|
outline: none;
|
|
font-size: 24px;
|
|
border-radius: 10px 10px 0 0;
|
|
max-width: 600px;
|
|
background: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
#search-submit {
|
|
width: 100%;
|
|
height: 40px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
font-size: 20px;
|
|
align-content: center;
|
|
align-items: center;
|
|
margin: auto;
|
|
border-radius: 0 0 10px 10px;
|
|
max-width: 600px;
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
.config-div {
|
|
padding: 5px;
|
|
}
|
|
|
|
button::-moz-focus-inner {
|
|
border: 0;
|
|
}
|
|
|
|
.collapsible {
|
|
outline: 0;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
cursor: pointer;
|
|
padding: 18px;
|
|
width: 100%;
|
|
border: none;
|
|
text-align: left;
|
|
outline: none;
|
|
font-size: 15px;
|
|
border-radius: 10px 10px 0 0;
|
|
}
|
|
|
|
.collapsible:after {
|
|
content: '\002B';
|
|
font-weight: bold;
|
|
float: right;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.active:after {
|
|
content: "\2212";
|
|
}
|
|
|
|
.content {
|
|
padding: 0 18px;
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.2s ease-out;
|
|
border-radius: 0 0 10px 10px;
|
|
}
|
|
|
|
.open {
|
|
overflow-y: scroll;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
footer {
|
|
position: fixed;
|
|
bottom: 0%;
|
|
text-align: center;
|
|
width: 100%;
|
|
z-index: 10;
|
|
}
|
|
|
|
.info-text {
|
|
font-style: italic;
|
|
font-size: 12px;
|
|
}
|
|
|
|
#config-style {
|
|
resize: none;
|
|
overflow-y: scroll;
|
|
width: 100%;
|
|
height: 100px;
|
|
}
|
|
|
|
.whoogle-logo {
|
|
display: none;
|
|
}
|
|
|
|
.whoogle-svg {
|
|
width: 80%;
|
|
display: block;
|
|
margin: auto;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.autocomplete {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
|
|
.autocomplete-items {
|
|
position: absolute;
|
|
border-bottom: none;
|
|
border-top: none;
|
|
z-index: 99;
|
|
|
|
/*position the autocomplete items to be the same width as the container:*/
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.autocomplete-items div {
|
|
padding: 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
details summary {
|
|
padding: 10px;
|
|
font-weight: bold;
|
|
}
|