sygil-webui/frontend/css/streamlit.main.css

96 lines
2.7 KiB
CSS

/***********************************************************
* Additional CSS for streamlit builtin components *
************************************************************/
/* Tab name (e.g. Text-to-Image) */
button[data-baseweb="tab"] {
font-size: 25px; //improve legibility
}
/* Image Container (only appear after run finished) */
.css-du1fp8 {
justify-content: center; //center the image, especially better looks in wide screen
}
/* Streamlit header */
.css-1avcm0n {
background-color: transparent;
}
/* Main streamlit container (below header) */
.css-18e3th9 {
padding-top: 2rem; //reduce the empty spaces
}
/* @media only for widescreen, to ensure enough space to see all */
@media (min-width: 1024px) {
/* Main streamlit container (below header) */
.css-18e3th9 {
padding-top: 0px; //reduce the empty spaces, can go fully to the top on widescreen devices
}
}
/***********************************************************
* Additional CSS for streamlit custom/3rd party components *
************************************************************/
/* For stream_on_hover */
section[data-testid="stSidebar"] > div:nth-of-type(1) {
background-color: #111;
}
button[kind="header"] {
background-color: transparent;
color: rgb(180, 167, 141);
}
@media (hover) {
/* header element */
header[data-testid="stHeader"] {
/* display: none;*/ /*suggested behavior by streamlit hover components*/
pointer-events: none; /* disable interaction of the transparent background */
}
/* The button on the streamlit navigation menu */
button[kind="header"] {
/* display: none;*/ /*suggested behavior by streamlit hover components*/
pointer-events: auto; /* enable interaction of the button even if parents intereaction disabled */
}
/* The navigation menu specs and size */
section[data-testid="stSidebar"] > div {
height: 100%;
width: 95px !important;
min-width: 95px !important;
position: relative;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s ease;
padding-top: 60px;
white-space: nowrap;
}
/* The navigation menu open and close on hover and size */
section[data-testid="stSidebar"] > div:hover {
width: 300px !important;
}
/* added to avoid main sectors (all element to the right of sidebar from) moving */
section[data-testid="stSidebar"] {
width: 95px !important;
min-width: 95px !important;
}
}
@media (max-width: 272px) {
section[data-testid="stSidebar"] > div {
width: 15rem;
}
}
/***********************************************************
* Additional CSS for other elements
************************************************************/