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

/*
This file is part of sygil-webui (https://github.com/Sygil-Dev/sygil-webui/).

Copyright 2022 Sygil-Dev team.
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

/***********************************************************
* Additional CSS for streamlit builtin components          *
************************************************************/

/* Tab name (e.g. Text-to-Image) //improve legibility*/
button[data-baseweb="tab"] {
  font-size: 25px;
}

/* Image Container (only appear after run finished)//center the image, especially better looks in wide screen */
.css-1kyxreq{
	justify-content: center;
}


/* Streamlit header */
.css-1avcm0n {
  background-color: transparent;
}

/* Main streamlit container (below header) //reduce the empty spaces*/
.css-18e3th9 {
  padding-top: 1rem;
}



/***********************************************************
* 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 */
  }

  /* added to avoid main sectors (all element to the right of sidebar from) moving */
  section[data-testid="stSidebar"] {
    width: 3.5% !important;
    min-width: 3.5% !important;
  }

  /* The navigation menu specs and size */
  section[data-testid="stSidebar"] > div {
    height: 100%;
    width: 2% !important;
    min-width: 100% !important;
    position: relative;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s ease-in-out;
    padding-top: 0px;
    white-space: nowrap;
  }

  /* The navigation menu open and close on hover and size */
  section[data-testid="stSidebar"] > div:hover {
    width: 300px !important;
  }
}

@media (max-width: 272px) {
  section[data-testid="stSidebar"] > div {
    width: 15rem;
  }
}

/***********************************************************
*  Additional CSS for other elements
************************************************************/
button[data-baseweb="tab"] {
  font-size: 20px;
}

@media (min-width: 1200px){
h1 {
    font-size: 1.75rem;
}
}
#tabs-1-tabpanel-0 > div:nth-child(1) > div > div.stTabs.css-0.exp6ofz0 {
  width: 50rem;
  align-self: center;
}
div.gallery:hover {
  border: 1px solid #777;
}
.css-dg4u6x p {
  font-size: 0.8rem;
  text-align: center;
  position: relative;
  top: 6px;
}

.row-widget.stButton {
  text-align: center;
}

/********************************************************************
    Hide anchor links on titles
*********************************************************************/
/*
.css-15zrgzn {
	display: none
	}
.css-eczf16 {
	display: none
	}
.css-jn99sy {
	display: none
	}
	
/* Make the text area widget have a similar height as the text input field */
.st-dy{
	height: 54px;
	min-height: 25px;
}
.css-17useex{
	gap: 3px;
	
}

/* Remove some empty spaces to make the UI more compact. */
.css-18e3th9{
	padding-left: 10px;
	padding-right: 10px;
	position: unset !important; /* Fixes the layout/page going up when an expander or another item is expanded and then collapsed */ 
}
.css-k1vhr4{
	padding-top: initial;
}
.css-ret2ud{
	padding-left: 10px;
	padding-right: 25px;
	gap: initial;
	display: initial;
}

.css-w5z5an{
	gap: 1px;
}