mirror of
https://github.com/aykhans/AzSuicideDataVisualization.git
synced 2025-04-23 02:40:43 +00:00
1244 lines
20 KiB
CSS
1244 lines
20 KiB
CSS
/**
|
|
* Copyright 2018-2022 Streamlit Inc.
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
|
|
*,
|
|
::after,
|
|
::before {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
font-family: sans-serif;
|
|
line-height: 1.15;
|
|
-webkit-text-size-adjust: 100%;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
article,
|
|
aside,
|
|
figcaption,
|
|
figure,
|
|
footer,
|
|
header,
|
|
hgroup,
|
|
main,
|
|
nav,
|
|
section {
|
|
display: block;
|
|
}
|
|
|
|
[tabindex="-1"]:focus:not(:focus-visible) {
|
|
outline: 0 !important;
|
|
}
|
|
|
|
hr {
|
|
box-sizing: content-box;
|
|
height: 0;
|
|
overflow: visible;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin-top: 0;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
p {
|
|
margin-top: 0;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
abbr[data-original-title],
|
|
abbr[title] {
|
|
text-decoration: underline;
|
|
-webkit-text-decoration: underline dotted;
|
|
text-decoration: underline dotted;
|
|
cursor: help;
|
|
border-bottom: 0;
|
|
-webkit-text-decoration-skip-ink: none;
|
|
text-decoration-skip-ink: none;
|
|
}
|
|
|
|
address {
|
|
margin-bottom: 1rem;
|
|
font-style: normal;
|
|
line-height: inherit;
|
|
}
|
|
|
|
dl,
|
|
ol,
|
|
ul {
|
|
margin-top: 0;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
ol ol,
|
|
ol ul,
|
|
ul ol,
|
|
ul ul {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
dt {
|
|
font-weight: 700;
|
|
}
|
|
|
|
dd {
|
|
margin-bottom: 0.5rem;
|
|
margin-left: 0;
|
|
}
|
|
|
|
blockquote {
|
|
margin: 0 0 1rem;
|
|
}
|
|
|
|
b,
|
|
strong {
|
|
font-weight: bolder;
|
|
}
|
|
|
|
small {
|
|
font-size: 80%;
|
|
}
|
|
|
|
sub,
|
|
sup {
|
|
position: relative;
|
|
font-size: 75%;
|
|
line-height: 0;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
sub {
|
|
bottom: -0.25em;
|
|
}
|
|
|
|
sup {
|
|
top: -0.5em;
|
|
}
|
|
|
|
a {
|
|
color: #007bff;
|
|
text-decoration: none;
|
|
background-color: transparent;
|
|
}
|
|
|
|
a:hover {
|
|
color: #0056b3;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
a:not([href]) {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:not([href]):hover {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
code,
|
|
kbd,
|
|
pre,
|
|
samp {
|
|
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
|
"Courier New", monospace;
|
|
font-size: 1em;
|
|
}
|
|
|
|
pre {
|
|
margin-top: 0;
|
|
margin-bottom: 1rem;
|
|
overflow: auto;
|
|
-ms-overflow-style: scrollbar;
|
|
}
|
|
|
|
figure {
|
|
margin: 0 0 1rem;
|
|
}
|
|
|
|
img {
|
|
vertical-align: middle;
|
|
border-style: none;
|
|
}
|
|
|
|
svg {
|
|
overflow: hidden;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
caption {
|
|
padding-top: 0.75rem;
|
|
padding-bottom: 0.75rem;
|
|
color: #6c757d;
|
|
text-align: left;
|
|
caption-side: bottom;
|
|
}
|
|
|
|
th {
|
|
text-align: inherit;
|
|
}
|
|
|
|
label {
|
|
display: inline-block;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
button {
|
|
border-radius: 0;
|
|
}
|
|
|
|
button:focus {
|
|
outline: 1px dotted;
|
|
outline: 5px auto -webkit-focus-ring-color;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
optgroup,
|
|
select,
|
|
textarea {
|
|
margin: 0;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
}
|
|
|
|
button,
|
|
input {
|
|
overflow: visible;
|
|
}
|
|
|
|
button,
|
|
select {
|
|
text-transform: none;
|
|
}
|
|
|
|
[role="button"] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
select {
|
|
word-wrap: normal;
|
|
}
|
|
|
|
[type="button"],
|
|
[type="reset"],
|
|
[type="submit"],
|
|
button {
|
|
-webkit-appearance: button;
|
|
}
|
|
|
|
[type="button"]:not(:disabled),
|
|
[type="reset"]:not(:disabled),
|
|
[type="submit"]:not(:disabled),
|
|
button:not(:disabled) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
[type="button"]::-moz-focus-inner,
|
|
[type="reset"]::-moz-focus-inner,
|
|
[type="submit"]::-moz-focus-inner,
|
|
button::-moz-focus-inner {
|
|
padding: 0;
|
|
border-style: none;
|
|
}
|
|
|
|
input[type="checkbox"],
|
|
input[type="radio"] {
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
}
|
|
|
|
textarea {
|
|
overflow: auto;
|
|
resize: vertical;
|
|
}
|
|
|
|
fieldset {
|
|
min-width: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
border: 0;
|
|
}
|
|
|
|
legend {
|
|
display: block;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
padding: 0;
|
|
margin-bottom: 0.5rem;
|
|
font-size: 1.5rem;
|
|
line-height: inherit;
|
|
color: inherit;
|
|
white-space: normal;
|
|
}
|
|
|
|
progress {
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
[type="number"]::-webkit-inner-spin-button,
|
|
[type="number"]::-webkit-outer-spin-button {
|
|
height: auto;
|
|
}
|
|
|
|
[type="search"] {
|
|
outline-offset: -2px;
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
[type="search"]::-webkit-search-decoration {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
::-webkit-file-upload-button {
|
|
font: inherit;
|
|
-webkit-appearance: button;
|
|
}
|
|
|
|
output {
|
|
display: inline-block;
|
|
}
|
|
|
|
summary {
|
|
display: list-item;
|
|
cursor: pointer;
|
|
}
|
|
|
|
template {
|
|
display: none;
|
|
}
|
|
|
|
[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin-bottom: 0.5rem;
|
|
font-weight: 500;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
h6 {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
hr {
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
border: 0;
|
|
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
small {
|
|
font-size: 80%;
|
|
font-weight: 400;
|
|
}
|
|
|
|
mark {
|
|
padding: 0.2em;
|
|
background-color: #fcf8e3;
|
|
}
|
|
|
|
code {
|
|
font-size: 87.5%;
|
|
color: #e83e8c;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
a > code {
|
|
color: inherit;
|
|
}
|
|
|
|
kbd {
|
|
padding: 0.2rem 0.4rem;
|
|
font-size: 87.5%;
|
|
color: #fff;
|
|
background-color: #212529;
|
|
border-radius: 0.2rem;
|
|
}
|
|
|
|
kbd kbd {
|
|
padding: 0;
|
|
font-size: 100%;
|
|
font-weight: 700;
|
|
}
|
|
|
|
pre {
|
|
display: block;
|
|
font-size: 87.5%;
|
|
color: #212529;
|
|
}
|
|
|
|
pre code {
|
|
font-size: inherit;
|
|
color: inherit;
|
|
word-break: normal;
|
|
}
|
|
|
|
.table {
|
|
width: 100%;
|
|
margin-bottom: 1rem;
|
|
color: #212529;
|
|
}
|
|
|
|
.table td,
|
|
.table th {
|
|
padding: 0.75rem;
|
|
vertical-align: top;
|
|
border-top: 1px solid #dee2e6;
|
|
}
|
|
|
|
.table thead th {
|
|
vertical-align: bottom;
|
|
border-bottom: 2px solid #dee2e6;
|
|
}
|
|
|
|
.table tbody + tbody {
|
|
border-top: 2px solid #dee2e6;
|
|
}
|
|
|
|
.table-sm td,
|
|
.table-sm th {
|
|
padding: 0.3rem;
|
|
}
|
|
|
|
.table-bordered {
|
|
border: 1px solid #dee2e6;
|
|
}
|
|
|
|
.table-bordered td,
|
|
.table-bordered th {
|
|
border: 1px solid #dee2e6;
|
|
}
|
|
|
|
.table-bordered thead td,
|
|
.table-bordered thead th {
|
|
border-bottom-width: 2px;
|
|
}
|
|
|
|
.table-borderless tbody + tbody,
|
|
.table-borderless td,
|
|
.table-borderless th,
|
|
.table-borderless thead th {
|
|
border: 0;
|
|
}
|
|
|
|
.table-striped tbody tr:nth-of-type(odd) {
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.table-hover tbody tr:hover {
|
|
color: #212529;
|
|
background-color: rgba(0, 0, 0, 0.075);
|
|
}
|
|
|
|
.table-primary,
|
|
.table-primary > td,
|
|
.table-primary > th {
|
|
background-color: #b8daff;
|
|
}
|
|
|
|
.table-primary tbody + tbody,
|
|
.table-primary td,
|
|
.table-primary th,
|
|
.table-primary thead th {
|
|
border-color: #7abaff;
|
|
}
|
|
|
|
.table-hover .table-primary:hover {
|
|
background-color: #9fcdff;
|
|
}
|
|
|
|
.table-hover .table-primary:hover > td,
|
|
.table-hover .table-primary:hover > th {
|
|
background-color: #9fcdff;
|
|
}
|
|
|
|
.table-secondary,
|
|
.table-secondary > td,
|
|
.table-secondary > th {
|
|
background-color: #d6d8db;
|
|
}
|
|
|
|
.table-secondary tbody + tbody,
|
|
.table-secondary td,
|
|
.table-secondary th,
|
|
.table-secondary thead th {
|
|
border-color: #b3b7bb;
|
|
}
|
|
|
|
.table-hover .table-secondary:hover {
|
|
background-color: #c8cbcf;
|
|
}
|
|
|
|
.table-hover .table-secondary:hover > td,
|
|
.table-hover .table-secondary:hover > th {
|
|
background-color: #c8cbcf;
|
|
}
|
|
|
|
.table-success,
|
|
.table-success > td,
|
|
.table-success > th {
|
|
background-color: #c3e6cb;
|
|
}
|
|
|
|
.table-success tbody + tbody,
|
|
.table-success td,
|
|
.table-success th,
|
|
.table-success thead th {
|
|
border-color: #8fd19e;
|
|
}
|
|
|
|
.table-hover .table-success:hover {
|
|
background-color: #b1dfbb;
|
|
}
|
|
|
|
.table-hover .table-success:hover > td,
|
|
.table-hover .table-success:hover > th {
|
|
background-color: #b1dfbb;
|
|
}
|
|
|
|
.table-info,
|
|
.table-info > td,
|
|
.table-info > th {
|
|
background-color: #bee5eb;
|
|
}
|
|
|
|
.table-info tbody + tbody,
|
|
.table-info td,
|
|
.table-info th,
|
|
.table-info thead th {
|
|
border-color: #86cfda;
|
|
}
|
|
|
|
.table-hover .table-info:hover {
|
|
background-color: #abdde5;
|
|
}
|
|
|
|
.table-hover .table-info:hover > td,
|
|
.table-hover .table-info:hover > th {
|
|
background-color: #abdde5;
|
|
}
|
|
|
|
.table-warning,
|
|
.table-warning > td,
|
|
.table-warning > th {
|
|
background-color: #ffeeba;
|
|
}
|
|
|
|
.table-warning tbody + tbody,
|
|
.table-warning td,
|
|
.table-warning th,
|
|
.table-warning thead th {
|
|
border-color: #ffdf7e;
|
|
}
|
|
|
|
.table-hover .table-warning:hover {
|
|
background-color: #ffe8a1;
|
|
}
|
|
|
|
.table-hover .table-warning:hover > td,
|
|
.table-hover .table-warning:hover > th {
|
|
background-color: #ffe8a1;
|
|
}
|
|
|
|
.table-danger,
|
|
.table-danger > td,
|
|
.table-danger > th {
|
|
background-color: #f5c6cb;
|
|
}
|
|
|
|
.table-danger tbody + tbody,
|
|
.table-danger td,
|
|
.table-danger th,
|
|
.table-danger thead th {
|
|
border-color: #ed969e;
|
|
}
|
|
|
|
.table-hover .table-danger:hover {
|
|
background-color: #f1b0b7;
|
|
}
|
|
|
|
.table-hover .table-danger:hover > td,
|
|
.table-hover .table-danger:hover > th {
|
|
background-color: #f1b0b7;
|
|
}
|
|
|
|
.table-light,
|
|
.table-light > td,
|
|
.table-light > th {
|
|
background-color: #fdfdfe;
|
|
}
|
|
|
|
.table-light tbody + tbody,
|
|
.table-light td,
|
|
.table-light th,
|
|
.table-light thead th {
|
|
border-color: #fbfcfc;
|
|
}
|
|
|
|
.table-hover .table-light:hover {
|
|
background-color: #ececf6;
|
|
}
|
|
|
|
.table-hover .table-light:hover > td,
|
|
.table-hover .table-light:hover > th {
|
|
background-color: #ececf6;
|
|
}
|
|
|
|
.table-dark,
|
|
.table-dark > td,
|
|
.table-dark > th {
|
|
background-color: #c6c8ca;
|
|
}
|
|
|
|
.table-dark tbody + tbody,
|
|
.table-dark td,
|
|
.table-dark th,
|
|
.table-dark thead th {
|
|
border-color: #95999c;
|
|
}
|
|
|
|
.table-hover .table-dark:hover {
|
|
background-color: #b9bbbe;
|
|
}
|
|
|
|
.table-hover .table-dark:hover > td,
|
|
.table-hover .table-dark:hover > th {
|
|
background-color: #b9bbbe;
|
|
}
|
|
|
|
.table-active,
|
|
.table-active > td,
|
|
.table-active > th {
|
|
background-color: rgba(0, 0, 0, 0.075);
|
|
}
|
|
|
|
.table-hover .table-active:hover {
|
|
background-color: rgba(0, 0, 0, 0.075);
|
|
}
|
|
|
|
.table-hover .table-active:hover > td,
|
|
.table-hover .table-active:hover > th {
|
|
background-color: rgba(0, 0, 0, 0.075);
|
|
}
|
|
|
|
.table .thead-dark th {
|
|
color: #fff;
|
|
background-color: #343a40;
|
|
border-color: #454d55;
|
|
}
|
|
|
|
.table .thead-light th {
|
|
color: #495057;
|
|
background-color: #e9ecef;
|
|
border-color: #dee2e6;
|
|
}
|
|
|
|
.table-dark {
|
|
color: #fff;
|
|
background-color: #343a40;
|
|
}
|
|
|
|
.table-dark td,
|
|
.table-dark th,
|
|
.table-dark thead th {
|
|
border-color: #454d55;
|
|
}
|
|
|
|
.table-dark.table-bordered {
|
|
border: 0;
|
|
}
|
|
|
|
.table-dark.table-striped tbody tr:nth-of-type(odd) {
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.table-dark.table-hover tbody tr:hover {
|
|
color: #fff;
|
|
background-color: rgba(255, 255, 255, 0.075);
|
|
}
|
|
|
|
@media (max-width: 575.98px) {
|
|
.table-responsive-sm {
|
|
display: block;
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.table-responsive-sm > .table-bordered {
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.table-responsive-md {
|
|
display: block;
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.table-responsive-md > .table-bordered {
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 991.98px) {
|
|
.table-responsive-lg {
|
|
display: block;
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.table-responsive-lg > .table-bordered {
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1199.98px) {
|
|
.table-responsive-xl {
|
|
display: block;
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.table-responsive-xl > .table-bordered {
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
.table-responsive {
|
|
display: block;
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.table-responsive > .table-bordered {
|
|
border: 0;
|
|
}
|
|
|
|
@media print {
|
|
*,
|
|
::after,
|
|
::before {
|
|
text-shadow: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
a:not(.btn) {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
abbr[title]::after {
|
|
content: " (" attr(title) ")";
|
|
}
|
|
|
|
pre {
|
|
white-space: pre-wrap !important;
|
|
}
|
|
|
|
blockquote,
|
|
pre {
|
|
border: 1px solid #adb5bd;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
thead {
|
|
display: table-header-group;
|
|
}
|
|
|
|
img,
|
|
tr {
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
h2,
|
|
h3,
|
|
p {
|
|
orphans: 3;
|
|
widows: 3;
|
|
}
|
|
|
|
h2,
|
|
h3 {
|
|
page-break-after: avoid;
|
|
}
|
|
|
|
@page {
|
|
size: a3;
|
|
}
|
|
|
|
body {
|
|
min-width: 992px !important;
|
|
}
|
|
|
|
.table {
|
|
border-collapse: collapse !important;
|
|
}
|
|
|
|
.table td,
|
|
.table th {
|
|
background-color: #fff !important;
|
|
}
|
|
|
|
.table-bordered td,
|
|
.table-bordered th {
|
|
border: 1px solid #dee2e6 !important;
|
|
}
|
|
|
|
.table-dark {
|
|
color: inherit;
|
|
}
|
|
|
|
.table-dark tbody + tbody,
|
|
.table-dark td,
|
|
.table-dark th,
|
|
.table-dark thead th {
|
|
border-color: #dee2e6;
|
|
}
|
|
|
|
.table .thead-dark th {
|
|
color: inherit;
|
|
border-color: #dee2e6;
|
|
}
|
|
}
|
|
|
|
/* Streamlit */
|
|
|
|
/* Mono */
|
|
@font-face {
|
|
font-family: "IBM Plex Mono";
|
|
font-weight: 400;
|
|
font-style: regular;
|
|
src: url("./fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf") format("ttf");
|
|
}
|
|
|
|
/* Sans, regular */
|
|
@font-face {
|
|
font-family: "IBM Plex Sans";
|
|
font-weight: 300;
|
|
font-style: regular;
|
|
src: url("./fonts/IBM_Plex_Sans/IBMPlexSans-Light.ttf") format("ttf");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "IBM Plex Sans";
|
|
font-weight: 400;
|
|
font-style: regular;
|
|
src: url("./fonts/IBM_Plex_Sans/IBMPlexSans-Regular.ttf") format("ttf");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "IBM Plex Sans";
|
|
font-weight: 500;
|
|
font-style: regular;
|
|
src: url("./fonts/IBM_Plex_Sans/IBMPlexSans-Medium.ttf") format("ttf");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "IBM Plex Sans";
|
|
font-weight: 700;
|
|
font-style: regular;
|
|
src: url("./fonts/IBM_Plex_Sans/IBMPlexSans-Bold.ttf") format("ttf");
|
|
}
|
|
|
|
/* Sans, italic */
|
|
@font-face {
|
|
font-family: "IBM Plex Sans";
|
|
font-weight: 300;
|
|
font-style: italic;
|
|
src: url("./fonts/IBM_Plex_Sans/IBMPlexSans-LightItalic.ttf") format("ttf");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "IBM Plex Sans";
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
src: url("./fonts/IBM_Plex_Sans/IBMPlexSans-Italic.ttf") format("ttf");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "IBM Plex Sans";
|
|
font-weight: 500;
|
|
font-style: italic;
|
|
src: url("./fonts/IBM_Plex_Sans/IBMPlexSans-MediumItalic.ttf") format("ttf");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "IBM Plex Sans";
|
|
font-weight: 700;
|
|
font-style: italic;
|
|
src: url("./fonts/IBM_Plex_Sans/IBMPlexSans-BoldItalic.ttf") format("ttf");
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
background-color: transparent;
|
|
border-radius: 100px;
|
|
height: 6px;
|
|
width: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar:active {
|
|
background-color: rgba(0, 0, 0, 0.09);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:vertical,
|
|
::-webkit-scrollbar-thumb:horizontal {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border-radius: 100px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:vertical:active,
|
|
::-webkit-scrollbar-thumb:horizontal:active {
|
|
background: rgba(0, 0, 0, 0.61);
|
|
border-radius: 100px;
|
|
}
|
|
|
|
/* Basics */
|
|
|
|
body {
|
|
margin: 0;
|
|
background: #ffffff;
|
|
font-family: "IBM Plex Sans", sans-serif;
|
|
font-size: 1rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
code,
|
|
pre {
|
|
font-family: "IBM Plex Mono", monospace;
|
|
}
|
|
|
|
a,
|
|
a:visited {
|
|
color: #f63366;
|
|
}
|
|
|
|
a:hover,
|
|
a:active,
|
|
a:visited:hover,
|
|
a:visited:active {
|
|
color: #f63366;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
hr {
|
|
border: none;
|
|
border-bottom: 1px solid #d5dae5;
|
|
margin: 2em 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Making HTML widgets match Streamlit widgets more or less. */
|
|
button,
|
|
input[type="button"],
|
|
input[type="reset"],
|
|
input[type="submit"] {
|
|
padding: 0 0.8rem;
|
|
line-height: 1.6;
|
|
background: #ffffff;
|
|
border: 1px solid #e6eaf1;
|
|
color: #262730;
|
|
font-size: 1rem;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
button:hover,
|
|
button:focus,
|
|
input[type="button"]:hover,
|
|
input[type="button"]:focus,
|
|
input[type="reset"]:hover,
|
|
input[type="reset"]:focus,
|
|
input[type="submit"]:hover,
|
|
input[type="submit"]:focus {
|
|
border-color: #f63366;
|
|
color: #f63366;
|
|
}
|
|
|
|
button:focus,
|
|
input[type="button"]:focus,
|
|
input[type="reset"]:focus,
|
|
input[type="submit"]:focus {
|
|
box-shadow: 0 0 0 0.2rem rgba(246, 51, 102, 0.5);
|
|
outline: none;
|
|
}
|
|
|
|
button:active,
|
|
input[type="button"]:active,
|
|
input[type="reset"]:active,
|
|
input[type="submit"]:active {
|
|
color: #ffffff;
|
|
background-color: #f63366;
|
|
}
|
|
|
|
button:disabled,
|
|
button[disabled],
|
|
button:disabled:hover,
|
|
button[disabled]:hover,
|
|
input[type="button"]:disabled,
|
|
input[type="button"][disabled],
|
|
input[type="button"]:disabled:hover,
|
|
input[type="button"][disabled]:hover,
|
|
input[type="reset"]:disabled,
|
|
input[type="reset"][disabled],
|
|
input[type="reset"]:disabled:hover,
|
|
input[type="reset"][disabled]:hover,
|
|
input[type="submit"]:disabled,
|
|
input[type="submit"][disabled],
|
|
input[type="submit"]:disabled:hover,
|
|
input[type="submit"][disabled]:hover {
|
|
background-color: #e6eaf1;
|
|
border-color: transparent;
|
|
color: #a3a8b4;
|
|
}
|
|
|
|
input[type="checkbox"],
|
|
input[type="color"],
|
|
input[type="date"],
|
|
input[type="datetime"],
|
|
input[type="datetime-local"],
|
|
input[type="email"],
|
|
input[type="month"],
|
|
input[type="number"],
|
|
input[type="password"],
|
|
input[type="radio"],
|
|
input[type="search"],
|
|
input[type="tel"],
|
|
input[type="text"],
|
|
input[type="url"],
|
|
input[type="week"],
|
|
input:not([type]),
|
|
textarea,
|
|
select {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
/* Forced to replace inherit values of the normalize.css */
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
input[type="date"],
|
|
input[type="datetime"],
|
|
input[type="datetime-local"],
|
|
input[type="email"],
|
|
input[type="month"],
|
|
input[type="number"],
|
|
input[type="password"],
|
|
input[type="search"],
|
|
input[type="tel"],
|
|
input[type="text"],
|
|
input[type="url"],
|
|
input[type="week"],
|
|
input:not([type]),
|
|
textarea,
|
|
select {
|
|
background: #f0f2f6;
|
|
border-radius: 0.25rem;
|
|
color: #262730;
|
|
border: 2px solid transparent;
|
|
padding: calc(0.8rem - 2px);
|
|
font-family: "IBM Plex Sans", sans-serif;
|
|
font-size: 1rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
input[type="date"]:focus,
|
|
input[type="datetime"]:focus,
|
|
input[type="datetime-local"]:focus,
|
|
input[type="email"]:focus,
|
|
input[type="month"]:focus,
|
|
input[type="number"]:focus,
|
|
input[type="password"]:focus,
|
|
input[type="search"]:focus,
|
|
input[type="tel"]:focus,
|
|
input[type="text"]:focus,
|
|
input[type="url"]:focus,
|
|
input[type="week"]:focus,
|
|
input:not([type]):focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
border-color: #f63366;
|
|
outline: none;
|
|
}
|
|
|
|
input[type="color"] {
|
|
border: 1px solid #d5dae5;
|
|
border-radius: 0.25rem;
|
|
height: 30px;
|
|
width: 30px;
|
|
}
|
|
|
|
input[type="color"]:hover,
|
|
input[type="color"]:focus {
|
|
border-color: #f63366;
|
|
color: #f63366;
|
|
}
|
|
|
|
input[type="color"]:focus {
|
|
box-shadow: 0 0 0 0.2rem rgba(246, 51, 102, 0.5);
|
|
outline: none;
|
|
}
|
|
|
|
input[type="color"]:active {
|
|
color: #ffffff;
|
|
background-color: #e6eaf1;
|
|
}
|
|
|
|
@supports (-moz-appearance: meterbar) {
|
|
/* Make Firefox match Chrome. */
|
|
input[type="color"] {
|
|
padding: 5px;
|
|
}
|
|
}
|
|
|
|
select {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 8' width='30'%3E%3Cpath fill='%23555' d='M0,0l6,8l6-8'/%3E%3C/svg%3E");
|
|
background-position: center right;
|
|
background-repeat: no-repeat;
|
|
padding-right: 2.8rem;
|
|
}
|
|
|
|
select[multiple] {
|
|
background-image: none;
|
|
padding: calc(0.8rem - 2px);
|
|
}
|
|
|
|
input[type="checkbox"],
|
|
input[type="radio"] {
|
|
position: relative;
|
|
width: 19px;
|
|
height: 19px;
|
|
border: 2px solid #a3a8b4;
|
|
margin: 0 8px 0 0;
|
|
border-radius: 0.25rem;
|
|
box-sizing: border-box;
|
|
/* Adjusts the position of the checkboxes on the text baseline */
|
|
vertical-align: -2px;
|
|
/* Set here so that Windows' High-Contrast Mode can override */
|
|
color: green;
|
|
}
|
|
|
|
input[type="checkbox"]:focus,
|
|
input[type="radio"]:focus {
|
|
border-color: #262730;
|
|
outline: none;
|
|
}
|
|
|
|
input[type="checkbox"]:disabled,
|
|
input[type="radio"]:disabled {
|
|
border-color: black;
|
|
background: #ddd;
|
|
color: gray;
|
|
}
|
|
|
|
input[type="checkbox"]:checked,
|
|
input[type="radio"]:checked {
|
|
background-color: #f63366;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' width='14'%3E%3Cpath fill='none' stroke='white' stroke-width='3' d='M2,7L6,11L12,3' stroke-linejoin='round'/%3E%3C/svg%3E");
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
color: #ffffff;
|
|
border-color: #f63366;
|
|
}
|
|
|
|
input[type="checkbox"]:checked:focus,
|
|
input[type="radio"]:checked:focus {
|
|
box-shadow: 0 0 0 0.2rem rgba(246, 51, 102, 0.5);
|
|
outline: none;
|
|
}
|
|
|
|
input[type="radio"] {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
input[type="radio"]:checked {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' width='14'%3E%3Ccircle fill='white' cx='7' cy='7' r='3'/%3E%3C/svg%3E");
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
/* Some utility classes, so components can use our theme. */
|
|
|
|
.primary {
|
|
color: #f63366;
|
|
}
|
|
|
|
.secondary {
|
|
color: #a3a8b4;
|
|
}
|
|
|
|
.gray {
|
|
color: #a3a8b4;
|
|
}
|
|
|
|
.red {
|
|
color: #ff2b2b;
|
|
}
|
|
|
|
.yellow {
|
|
color: #faca2b;
|
|
}
|
|
|
|
.blue {
|
|
color: #0068c9;
|
|
}
|
|
|
|
.green {
|
|
color: #09ab3b;
|
|
}
|