Web UI tabs made into two rows
This commit is contained in:
@@ -416,14 +416,19 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tab-buttons {
|
.tab-buttons {
|
||||||
display: flex;
|
display: grid;
|
||||||
|
grid-template-rows: repeat(2, auto);
|
||||||
|
grid-auto-flow: column;
|
||||||
|
grid-auto-columns: max-content;
|
||||||
border-bottom: 2px solid #333;
|
border-bottom: 2px solid #333;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
white-space: nowrap;
|
|
||||||
scrollbar-width: thin;
|
scrollbar-width: thin;
|
||||||
scrollbar-color: #555 #222;
|
scrollbar-color: #555 #222;
|
||||||
|
row-gap: 0.05rem;
|
||||||
|
column-gap: 0.1rem;
|
||||||
|
padding-bottom: 0.1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-buttons::-webkit-scrollbar {
|
.tab-buttons::-webkit-scrollbar {
|
||||||
@@ -447,12 +452,10 @@
|
|||||||
background: #222;
|
background: #222;
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
border: none;
|
border: none;
|
||||||
padding: 0.8rem 1.5rem;
|
padding: 0.5rem 1rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-bottom: 3px solid transparent;
|
border-bottom: 3px solid transparent;
|
||||||
margin-right: 0.5rem;
|
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
flex-shrink: 0;
|
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user