Fix viewer menu styling

This commit is contained in:
chylex 2024-05-08 21:36:16 +02:00
parent f54465e5fe
commit fa00df10d8
No known key found for this signature in database
GPG Key ID: 4DE42C8F19A80548
2 changed files with 15 additions and 10 deletions

View File

@ -25,6 +25,8 @@
<div id="menu"> <div id="menu">
<button id="btn-settings">Settings</button> <button id="btn-settings">Settings</button>
<div class="splitter"></div>
<div> <!-- needed to stop the select from messing up --> <div> <!-- needed to stop the select from messing up -->
<select id="opt-messages-per-page"> <select id="opt-messages-per-page">
<option value="50">50 messages per page&nbsp;</option> <option value="50">50 messages per page&nbsp;</option>

View File

@ -1,15 +1,16 @@
#menu { #menu {
width: 100%;
height: 48px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: stretch;
gap: 8px;
padding: 8px;
background-color: #17181c; background-color: #17181c;
border-bottom: 1px dotted #5d626b; border-bottom: 1px dotted #5d626b;
} }
#menu .splitter { #menu .splitter {
width: 1px; flex: 0 0 1px;
margin: 9px 4px; margin: 9px 1px;
background-color: #5d626b; background-color: #5d626b;
} }
@ -23,7 +24,8 @@
} }
#menu button, #menu select, #menu input[type="text"] { #menu button, #menu select, #menu input[type="text"] {
margin: 8px; height: 31px;
padding: 0 10px;
background-color: #7289da; background-color: #7289da;
color: #fff; color: #fff;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75);
@ -31,28 +33,25 @@
#menu button { #menu button {
font-size: 17px; font-size: 17px;
padding: 0 12px;
border: 0; border: 0;
cursor: pointer; cursor: pointer;
white-space: nowrap;
} }
#menu select { #menu select {
font-size: 14px; font-size: 14px;
padding: 6px;
border: 0; border: 0;
cursor: pointer; cursor: pointer;
} }
#menu input[type="text"] { #menu input[type="text"] {
font-size: 14px; font-size: 14px;
padding: 7px 12px;
border: 0; border: 0;
} }
#menu .nav { #menu .nav {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin: 0 8px;
} }
#menu .nav > button { #menu .nav > button {
@ -66,7 +65,7 @@
} }
#menu .nav > button, #menu .nav > p { #menu .nav > button, #menu .nav > p {
margin: 8px 1px; margin: 0 1px;
} }
#opt-filter-list > select, #opt-filter-list > input { #opt-filter-list > select, #opt-filter-list > input {
@ -76,3 +75,7 @@
#opt-filter-list > .active { #opt-filter-list > .active {
display: block; display: block;
} }
#btn-about {
margin-left: auto;
}