73 lines
2.0 KiB
Python
73 lines
2.0 KiB
Python
"""Styles for the app."""
|
|
|
|
import reflex as rx
|
|
|
|
border_radius = "0.375rem"
|
|
box_shadow = "0px 0px 0px 1px rgba(84, 82, 95, 0.14)"
|
|
border = "1px solid #F4F3F6"
|
|
text_color = "black"
|
|
text_color_dark = "white"
|
|
accent_text_color = "black"
|
|
accent_color = "linear-gradient(linear-gradient(43deg, rgba(201,238,248,1) 18%, rgba(253,210,227,0.7792366946778712) 86%)"
|
|
#linear-gradient(120deg, #d299c2 0%, #fef9d7 100%);"
|
|
#linear-gradient(to top, #d9afd9 0%, #97d9e1 100%);"
|
|
|
|
hover_accent_color = {"_hover": {"color": accent_color}}
|
|
hover_accent_bg = {"_hover": {"bg": accent_color}}
|
|
content_width_vw = "90vw"
|
|
sidebar_width = "20em"
|
|
|
|
template_page_style = {"padding_top": "5em", "padding_x": ["auto", "2em"], "flex": "1"}
|
|
|
|
template_content_style = {
|
|
"align_items": "flex-start",
|
|
"box_shadow": box_shadow,
|
|
"border_radius": border_radius,
|
|
"padding": "1em",
|
|
"margin_bottom": "2em",
|
|
}
|
|
|
|
link_style = {
|
|
"color": text_color,
|
|
"text_decoration": "none",
|
|
**hover_accent_color,
|
|
}
|
|
|
|
overlapping_button_style = {
|
|
"background_color": "white",
|
|
"border": border,
|
|
"border_radius": border_radius,
|
|
}
|
|
|
|
#base_style = {
|
|
# rx.MenuButton: {
|
|
# "width": "3em",
|
|
# "height": "3em",
|
|
# **overlapping_button_style,
|
|
# },
|
|
# rx.MenuItem: hover_accent_bg,
|
|
#}
|
|
|
|
|
|
markdown_style = {
|
|
"code": lambda text: rx.code(text, color="#1F1944", bg="#EAE4FD", margin="10px 0"),
|
|
"a": lambda text, **props: rx.link(
|
|
text,
|
|
**props,
|
|
font_weight="bold",
|
|
color="#03030B",
|
|
text_decoration="underline",
|
|
text_decoration_color="#AD9BF8",
|
|
_hover={
|
|
"color": "#AD9BF8",
|
|
"text_decoration": "underline",
|
|
"text_decoration_color": "#03030B",
|
|
},
|
|
margin="10px 0",
|
|
),
|
|
"ul": lambda items: rx.unordered_list(items, margin="10px 0", padding_left="20px"),
|
|
"ol": lambda items: rx.ordered_list(items, margin="10px 0", padding_left="20px"),
|
|
"p": lambda text: rx.text(text, margin="10px 0"),
|
|
}
|
|
|