html,
body,
#root,
#root > div {
width: 100%;
height: 100%;
}
html {
-webkit-overflow-scrolling: touch;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
overflow: hidden;
height: 100%;
font-family: 'OptimaLTPro-Roman', Georgia, serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
line-height: 1.25em;
flex: 1;
}
h1 {
font-family: 'AlbertusMTPro-Light', Palatino, Georgia, serif;
font-weight: 300;
margin-bottom: 3rem;
font-size: 32px;
}
h2,
h3,
h4,
h5 {
font-family: 'OptimaLTPro-Roman', Georgia, serif;
font-weight: 400;
line-height: 1.25em;
}
p {
font-family: 'OptimaLTPro-Roman', Georgia, serif;
}
/* These styles make the root element full-height */
#root {
display: flex;
height: 100%;
}
.dark {
background-color: #000;
color: #fff;
}
.light {
background-color: #fff;
color: #000;
}
::placeholder {
color: #525252;
opacity: 1; /* Firefox */
}
.flatpickr-calendar,
span.flatpickr-weekday,
.popup-box {
font-family: 'ABCFavorit-Book', Helvetica, Arial, sans-serif;
}
/* :lang(fa) */
span.flatpickr-weekday:lang(fa),
select.flatpickr-monthDropdown-months:lang(fa) {
font-family: 'NotoSansArabic-Regular', Tahoma, sans-serif !important;
font-size: 14px !important;
}
.flatpickr-input.flatpickr-mobile {
display: none;
}
body::-webkit-scrollbar {
width: 0px;
height: 0px;
}
body.light {
color-scheme: light;
}
body.dark {
color-scheme: dark;
}
div[data-scrollbar-flat-list-adjust='true'] > div {
margin-left: calc((100vw - 100%) / 2) !important;
}
div[data-scrollbar-tabs-scroll-view-adjust='true'] > div,
div[data-scrollbar-form-scroll-wrapper-adjust='true'] > div {
padding-left: calc((100vw - 100%)) !important;
max-width: calc(530px + calc((100vw - 100%))) !important;
}
input[id^='tag-input-'] {
all: unset;
}
a[data-web-link='true'] {
transform: scale(1);
transition: transform 0.2s ease-in-out;
}
a[data-web-link='true']:hover {
transform: scale(1.01);
transition: transform 0.2s ease-in-out;
}
a,
a image {
cursor: pointer !important;
}
span,
p,
div,
a,
h1,
h2,
h3,
h4,
h5,
h6 {
user-select: text !important;
}
/* Seems to be a bug on Chrome where the above doesn't work */
div[role='alert'] div#alert-dialog-description {
user-select: all !important;
}
/* Counteract effect for buttons in alerts */
*[role='button'] {
user-select: none !important;
}
/* Hide scrollbar */
div#groups-scroll-view {
scrollbar-width: none;
}
/* Selection color */
::-moz-selection {
/* Code for Firefox */
/* Light gray */
background: #d7d3c1;
}
::selection {
background: hsl(48, 22%, 80%);
}
/* Dark mode selection () */
body.dark ::-moz-selection {
background: #343b2e;
}
body.dark ::selection {
background: #343b2e;
}
/* Divs with role="button" and aria-disabled="true" */
/* Should have a cursor of not-allowed */
/* But this doesn't work */
div[role='button'][aria-disabled='true'] {
cursor: not-allowed !important;
}
:root.dark {
--shake-sdk-border-radius-small: 0px;
--shake-sdk-border-radius-medium: 0px;
--shake-sdk-border-radius-large: 0px;
--shake-sdk-font-family: 'ABCFavorit-Book', Helvetica, Arial, sans-serif !important;
--shake-sdk-purple: white !important;
--shake-sdk-purpleDark: white !important;
--shake-sdk-background-color-primary: black !important;
--shake-sdk-text-color: white !important;
--shake-sdk-main-card-border: 1px solid white;
--shake-sdk-main-card-box-shadow: none;
--shake-sdk-close-button-box-shadow: 0 0 0 1px;
--shake-sdk-main-card-background: var(
--shake-sdk-attachments-card-background
) !important;
--shake-sdk-main-card-border: var(
--shake-sdk-attachments-card-border
) !important;
--shake-sdk-main-card-box-shadow: var(
--shake-sdk-attachments-card-box-shadow
) !important;
--shake-sdk-button-accent-text-color: black !important;
--shake-sdk-close-button-background-color: var(
--shake-sdk-attachments-card-background
) !important;
--shake-sdk-close-button-box-shadow: var(
--shake-sdk-attachments-card-box-shadow
) !important;
--shake-sdk-close-button-icon-color: white !important;
--shake-sdk-text-color-primary-title: white !important;
--shake-sdk-grey10: #2c2c2e !important;
--shake-sdk-textarea-background-color: black !important;
--shake-sdk-outline-color-primary: #48484a !important;
--shake-sdk-textarea-border: 1px solid var(--shake-sdk-outline-color-primary) !important;
--shake-sdk-textarea-border-selected: 1px solid white !important;
}
:root.light {
--shake-sdk-border-radius-small: 0px;
--shake-sdk-border-radius-medium: 0px;
--shake-sdk-border-radius-large: 0px;
--shake-sdk-main-card-border: 1px solid black;
--shake-sdk-main-card-box-shadow: none;
--shake-sdk-close-button-box-shadow: 0 0 0 1px;
--shake-sdk-font-family: 'ABCFavorit-Book', Helvetica, Arial, sans-serif !important;
--shake-sdk-purple: black !important;
--shake-sdk-purpleDark: black !important;
--shake-sdk-background-color-primary: white !important;
}
/* Selected paths don't have outline */
path:focus {
outline: none;
}
/* Mapbox */
.mapboxgl-popup-content {
border-radius: 0px !important;
padding: 0px !important; /* We handle padding ourselves */
}