Spaces:
Sleeping
Sleeping
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet"> | |
| <style> | |
| .title { | |
| font-family:PermanentMarker; | |
| color: #000000; | |
| font-size: 3em; | |
| margin: 10px 0px 8px 0px; | |
| padding: 0px; | |
| } | |
| h1 { | |
| font-family: "Montserrat", sans-serif; | |
| color: #000000; | |
| font-size: 28px; | |
| margin: 0px 0px 8px 0px; | |
| padding: 30px 0px 0px 0px; | |
| } | |
| h3 { | |
| font-family: "Open Sans", sans-serif; | |
| font-size: 1.1em; | |
| font-weight: 700; | |
| color: #174C4F; | |
| } | |
| .hero-subtitle { | |
| font-family: "Montserrat", sans-serif; | |
| color: #FF6666; | |
| font-size: 16px; | |
| margin: 0px 0px 8px 50px; /* Adds 20px margin to the left */ | |
| padding-right: 100px; | |
| font-style: italic; /* Adjust padding as needed */ | |
| } | |
| div[data-testid="stVerticalBlockBorderWrapper"]:has(.stHtml > .watchlist_card) { | |
| padding-bottom: 0em; | |
| } | |
| div[data-testid="stVerticalBlock"]:has(> div > .stHtml > .watchlist_symbol_name) { | |
| & p { | |
| color: #174C4F; | |
| font-family: "Open Sans", sans-serif; | |
| font-size: 1em; | |
| font-weight: 700; | |
| margin-bottom: 0; | |
| } | |
| } | |
| div[data-testid="stVerticalBlock"]:has(> div > .stHtml > .watchlist_ticker) { | |
| text-align: right; | |
| & p { | |
| font-size: 0.8em; | |
| margin-bottom: 0; | |
| } | |
| } | |
| div[data-testid="stVerticalBlock"]:has(> div > .stHtml > .watchlist_price_label) { | |
| & p { | |
| font-size: 0.8em; | |
| margin-bottom: 0; | |
| } | |
| } | |
| div[data-testid="stVerticalBlock"]:has(> div > .stHtml > .watchlist_price_value) { | |
| & p { | |
| color: #174C4F; | |
| font-family: "Open Sans", sans-serif; | |
| font-size: 1.2em; | |
| margin-bottom: 0; | |
| } | |
| } | |
| div[data-testid="stVerticalBlock"]:has(> div > .stHtml > .column_plotly) { | |
| & .stPlotlyChart { | |
| margin-top: 1em; | |
| padding: 1em; | |
| border-radius: 16px; | |
| box-shadow: 0px 0px 10px rgba(81, 85, 195, 0.2); | |
| } | |
| } | |
| div[data-testid="stVerticalBlock"]:has(> div > .stHtml > .column_indicator) { | |
| margin-top: 2.5em; | |
| padding-left: 4em; | |
| } | |
| /* Adapted from https://startbootstrap.com/theme/sb-admin-2 */ | |
| div[data-testid="stMetric"] { | |
| background-color: #FFFFFF; | |
| border: 1px solid #CCCCCC; | |
| padding: 1em 2em; | |
| border-radius: 5px; | |
| box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15); | |
| } | |
| label[data-testid="stMetricLabel"] p { | |
| font-size: 1em; | |
| } | |
| div[data-testid="stMetricValue"] { | |
| font-size: 1.3em; | |
| font-weight: 700; | |
| color: #174C4F; | |
| } | |
| div[data-testid="stVerticalBlock"]:has(> div > .stHtml > .low_indicator) { | |
| & div[data-testid="stMetric"] { | |
| border-left: 0.5rem solid #FF6666; | |
| } | |
| } | |
| div[data-testid="stVerticalBlock"]:has(> div > .stHtml > .high_indicator) { | |
| & div[data-testid="stMetric"] { | |
| border-left: 0.5rem solid rgb(15, 56, 109); | |
| } | |
| } | |
| div[data-testid="stVerticalBlock"]:has(> div > .stHtml > .bottom_indicator) { | |
| margin-top: 0.5em; | |
| } | |
| /* Custom button styling */ | |
| .stButton button, .stFormSubmitButton button { | |
| background: linear-gradient(90deg, #3A8DFF 0%, #7B61FF 100%); /* Primary color */ | |
| color: white; | |
| padding: 12px 24px; | |
| border: none; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| font-size: 18px; | |
| font-family: 'PermanentMarker', sans-serif; /* Change font */ | |
| font-weight: bold; /* Make font bold */ | |
| letter-spacing: 1px; /* Add letter spacing */ | |
| transition: background-color 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .stButton button:hover { | |
| background-color: #093031; /* Darker color on hover */ | |
| box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Add shadow on hover */ | |
| } | |
| .stButton button:active { | |
| background: linear-gradient(90deg, #3A8DFF 0%, #7B61FF 100%); /* Primary color */ | |
| box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); /* Reduce shadow on click */ | |
| } | |
| .logo { | |
| position: fixed; | |
| bottom: 10px; | |
| right: 5px; | |
| width: 100px; /* Adjust width as needed */ | |
| } | |
| </style> |