wikipedia-assistant / style.css
king007's picture
Duplicate from deepset/wikipedia-assistant
039aebb
.row-widget.stTextInput > div:first-of-type {
background: #fff;
display: flex;
border: 1px solid #dfe1e5;
box-shadow: none;
border-radius: 24px;
height: 50px;
width: auto;
margin: 10px auto 30px;
}
.row-widget.stTextInput > div:first-of-type:hover,
.row-widget.stTextInput > div:first-of-type:focus {
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2);
}
.row-widget.stTextInput .st-bq {
background-color: #fff;
}
.row-widget.stTextInput > label {
color: #b3b3b3;
}
.row-widget.stButton > button {
border-radius: 24px;
background-color: #B6C9B1;
color: #fff;
border: none;
padding: 6px 20px;
float: right;
background-image: none;
}
.row-widget.stButton > button:hover {
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2);
}
.row-widget.stButton > button:focus {
border: none;
color: #fff;
}
.footer-custom {
position: fixed;
bottom: 0;
width: 100%;
color: var(--text-color);
max-width: 698px;
font-size: 14px;
height: 50px;
padding: 10px 0;
z-index: 50;
}
.main {
padding: 20px;
}
footer {
display: none !important;
}
.footer-custom a {
color: var(--text-color);
}
#wikipedia-assistant {
font-size: 36px;
}
.generated-answer p {
font-size: 16px;
font-weight: bold;
}
.react-json-view {
margin: 40px 0 80px;
}
.tooltip {
text-align: center;
line-height: 20px;
display: table-caption;
font-size: 10px;
border-radius: 50%;
height: 20px;
width: 20px;
position: relative;
cursor: pointer;
color:#000;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 280px;
text-align: center;
border-radius: 6px;
padding: 10px;
position: absolute;
z-index: 1;
top: 25px;
left: 50%;
margin-left: -140px;
font-size: 14px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.16);
color: #000;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.sentence-wrapper {
border-left: 4px solid #ffc423;
padding-left: 20px;
margin-bottom: 40px;
}
#context {
padding: 2rem 0 1rem;
}
hr {
margin: 2em 0 1em;
}
.technical-details-info {
margin-bottom: 100px;
}
.loader-wrapper {
display: flex;
align-items: center;
background-color: rgba(250, 202, 43, 0.2);
padding: 15px 20px;
border-radius: 6px;
}
.loader-wrapper p {
margin-bottom: 0;
margin-left: 20px;
}
.loader {
width: 30px;
height: 30px;
border: dotted 5px #868686;
border-radius: 100%;
animation: spin 1s linear infinite;
}
.loader-note {
font-size: 14px;
color: #b3b3b3;
margin-left: 5px;
}
@keyframes spin {
0% {
transform: rotate(0deg) scale(0.8);
border-top-color: transparent;
border-right-color: transparent;
}
50% { transform: rotate(180deg) scale(1.2);
border-color: #949494;
border-top-color: transparent;
border-right-color: transparent;
}
100% { transform: rotate(360deg) scale(0.8);
border-color: #bbbbbb;
border-top-color: transparent;
border-right-color: transparent;
}
}