|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
body, .main-container, .stApp, .stMarkdown, h1, h2, h3, h4, h5, h6, p, div, |
|
|
input, textarea, select, button, th, td, li, span, a, label { |
|
|
direction: rtl; |
|
|
text-align: right; |
|
|
} |
|
|
|
|
|
|
|
|
.stTextInput div, .stTextArea div, .stSelectbox div, .stMultiSelect div, |
|
|
.stNumberInput div, .stDateInput div, .stSlider div { |
|
|
direction: rtl; |
|
|
text-align: right; |
|
|
} |
|
|
|
|
|
.stSidebar div { |
|
|
direction: rtl; |
|
|
text-align: right; |
|
|
} |
|
|
|
|
|
|
|
|
.stSidebar .sidebar-content, |
|
|
div[data-testid="stSidebar"] { |
|
|
direction: rtl !important; |
|
|
text-align: right !important; |
|
|
left: auto !important; |
|
|
right: 0 !important; |
|
|
border-left: 1px solid #e6e6e6 !important; |
|
|
border-right: none !important; |
|
|
} |
|
|
|
|
|
|
|
|
.stApp .main-container { |
|
|
flex-direction: row-reverse !important; |
|
|
} |
|
|
|
|
|
|
|
|
.nav-link-horizontal, .nav-link { |
|
|
text-align: right !important; |
|
|
direction: rtl !important; |
|
|
} |
|
|
|
|
|
.stOptionMenu div:has(> ul) { |
|
|
direction: rtl !important; |
|
|
} |
|
|
|
|
|
.stOptionMenu ul { |
|
|
direction: rtl !important; |
|
|
padding-right: 0 !important; |
|
|
} |
|
|
|
|
|
|
|
|
.stOptionMenu span, .stOptionMenu a, .stOptionMenu div { |
|
|
color: #2C3E50 !important; |
|
|
font-weight: normal !important; |
|
|
} |
|
|
|
|
|
.stOptionMenu [data-baseweb="tab"], .stOptionMenu [data-baseweb="tab-list"] { |
|
|
direction: rtl !important; |
|
|
} |
|
|
|
|
|
|
|
|
.stOptionMenu { |
|
|
color: var(--gray-800) !important; |
|
|
} |
|
|
|
|
|
.sidebar-menu { |
|
|
color: var(--gray-800) !important; |
|
|
} |
|
|
|
|
|
.stOptionMenu span, .stOptionMenu label, .stOptionMenu div { |
|
|
color: var(--gray-800) !important; |
|
|
text-shadow: none !important; |
|
|
} |
|
|
|
|
|
|
|
|
.sidebar-menu-item { |
|
|
background-color: rgba(240, 242, 245, 0.5) !important; |
|
|
margin-bottom: 4px !important; |
|
|
border-radius: 4px !important; |
|
|
transition: all 0.2s ease-in-out !important; |
|
|
} |
|
|
|
|
|
.sidebar-menu-item:hover { |
|
|
background-color: rgba(222, 226, 230, 0.8) !important; |
|
|
} |
|
|
|
|
|
.sidebar-menu-item.active { |
|
|
background-color: var(--primary-color) !important; |
|
|
color: white !important; |
|
|
} |
|
|
|
|
|
.sidebar-menu-item.active span, .sidebar-menu-item.active label, .sidebar-menu-item.active div { |
|
|
color: white !important; |
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important; |
|
|
} |
|
|
|
|
|
|
|
|
.card, .metric-card, .alert, .callout, .project-card, .list-container, .tab-content { |
|
|
direction: rtl; |
|
|
text-align: right; |
|
|
} |
|
|
|
|
|
|
|
|
.block-icon { |
|
|
direction: rtl; |
|
|
} |
|
|
|
|
|
|
|
|
h1, h2, h3, h4, h5, h6 { |
|
|
padding-right: 10px; |
|
|
padding-left: 0; |
|
|
margin-right: 0; |
|
|
margin-left: 0; |
|
|
border-right: 4px solid #1E88E5; |
|
|
border-left: none; |
|
|
} |
|
|
|
|
|
.button-icon, .fa, .fas, .far, .fab { |
|
|
margin-left: 0.5rem; |
|
|
margin-right: 0; |
|
|
} |
|
|
|
|
|
|
|
|
ul, ol { |
|
|
padding-right: 20px; |
|
|
padding-left: 0; |
|
|
} |
|
|
|
|
|
li { |
|
|
direction: rtl; |
|
|
text-align: right; |
|
|
} |
|
|
|
|
|
|
|
|
.indented { |
|
|
margin-right: 1.5rem; |
|
|
margin-left: 0; |
|
|
} |
|
|
|
|
|
|
|
|
ul { |
|
|
list-style-position: inside; |
|
|
} |
|
|
|
|
|
|
|
|
.row-flex { |
|
|
flex-direction: row-reverse; |
|
|
} |
|
|
|
|
|
|
|
|
.plotly-chart text { |
|
|
direction: rtl; |
|
|
} |
|
|
|
|
|
|
|
|
table { |
|
|
direction: rtl; |
|
|
text-align: right; |
|
|
} |
|
|
|
|
|
|
|
|
.tab-item { |
|
|
margin-left: 0; |
|
|
margin-right: 0; |
|
|
} |
|
|
|
|
|
|
|
|
.alert-icon, .callout-icon { |
|
|
margin-left: 0.8rem; |
|
|
margin-right: 0; |
|
|
} |
|
|
|
|
|
|
|
|
.search-icon { |
|
|
left: auto; |
|
|
right: 1rem; |
|
|
} |
|
|
|
|
|
.search-input { |
|
|
padding-left: 1rem; |
|
|
padding-right: 3rem; |
|
|
} |
|
|
|
|
|
|
|
|
.dialog { |
|
|
direction: rtl; |
|
|
text-align: right; |
|
|
} |
|
|
|
|
|
.dialog-header { |
|
|
flex-direction: row-reverse; |
|
|
} |
|
|
|
|
|
|
|
|
.chat-message-incoming { |
|
|
align-self: flex-start; |
|
|
border-bottom-left-radius: 0; |
|
|
border-bottom-right-radius: 10px; |
|
|
} |
|
|
|
|
|
.chat-message-outgoing { |
|
|
align-self: flex-end; |
|
|
border-bottom-right-radius: 0; |
|
|
border-bottom-left-radius: 10px; |
|
|
} |
|
|
|
|
|
.chat-avatar { |
|
|
margin-right: 0; |
|
|
margin-left: 0.8rem; |
|
|
} |
|
|
|
|
|
|
|
|
form { |
|
|
direction: rtl; |
|
|
text-align: right; |
|
|
} |
|
|
|
|
|
|
|
|
.form-buttons { |
|
|
flex-direction: row-reverse; |
|
|
} |
|
|
|
|
|
|
|
|
.status-indicator { |
|
|
margin-right: 0; |
|
|
margin-left: 0.5rem; |
|
|
} |
|
|
|
|
|
|
|
|
.topbar { |
|
|
flex-direction: row-reverse; |
|
|
} |
|
|
|
|
|
|
|
|
.info-bar { |
|
|
flex-direction: row-reverse; |
|
|
} |
|
|
|
|
|
|
|
|
.number, .date { |
|
|
direction: ltr; |
|
|
display: inline-block; |
|
|
} |
|
|
|
|
|
|
|
|
.breadcrumbs { |
|
|
direction: rtl; |
|
|
text-align: right; |
|
|
} |
|
|
|
|
|
.breadcrumbs-separator { |
|
|
transform: rotate(180deg); |
|
|
} |
|
|
|
|
|
|
|
|
.progress-container { |
|
|
direction: rtl; |
|
|
} |
|
|
|
|
|
|
|
|
.overflow-auto { |
|
|
direction: rtl; |
|
|
} |
|
|
|
|
|
|
|
|
.consecutive-items > * + * { |
|
|
margin-right: 1rem; |
|
|
margin-left: 0; |
|
|
} |
|
|
|
|
|
|
|
|
.note, .aside { |
|
|
border-right: 4px solid #ccc; |
|
|
border-left: none; |
|
|
padding-right: 1rem; |
|
|
padding-left: 0; |
|
|
} |
|
|
|
|
|
|
|
|
.project-list-item { |
|
|
padding-right: 0; |
|
|
padding-left: 1rem; |
|
|
} |
|
|
|
|
|
|
|
|
.stButton, .stCheckbox, .stRadio { |
|
|
direction: rtl; |
|
|
text-align: right; |
|
|
} |
|
|
|
|
|
.stExpander { |
|
|
direction: rtl; |
|
|
text-align: right; |
|
|
} |
|
|
|
|
|
.stTabs { |
|
|
direction: rtl; |
|
|
} |
|
|
|
|
|
.stDataFrame { |
|
|
direction: rtl; |
|
|
} |
|
|
|
|
|
.stFileUploader { |
|
|
direction: rtl; |
|
|
} |
|
|
|
|
|
|
|
|
.timeline { |
|
|
direction: rtl; |
|
|
} |
|
|
|
|
|
.timeline-item { |
|
|
padding-right: 2rem; |
|
|
padding-left: 0; |
|
|
border-right: 2px solid #ccc; |
|
|
border-left: none; |
|
|
} |
|
|
|
|
|
.timeline-item::before { |
|
|
right: -8px; |
|
|
left: auto; |
|
|
} |
|
|
|
|
|
|
|
|
.checkbox-label, .switch-label { |
|
|
padding-right: 2rem; |
|
|
padding-left: 0; |
|
|
} |
|
|
|
|
|
.checkbox-custom, .switch-custom { |
|
|
right: 0; |
|
|
left: auto; |
|
|
} |
|
|
|
|
|
|
|
|
.dropdown-content { |
|
|
text-align: right; |
|
|
} |
|
|
|
|
|
|
|
|
.toast { |
|
|
right: 1rem; |
|
|
left: auto; |
|
|
} |
|
|
|
|
|
|
|
|
.stProgress { |
|
|
direction: rtl; |
|
|
} |
|
|
|
|
|
.stProgress > div > div { |
|
|
direction: rtl; |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 768px) { |
|
|
|
|
|
.sidebar-menu-item { |
|
|
padding-right: 0.5rem; |
|
|
padding-left: 0.5rem; |
|
|
} |
|
|
} |
