soapbox/app/styles/basics.scss

111 wiersze
1.9 KiB
SCSS

body {
@apply antialiased;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
body.with-modals {
@apply overflow-hidden;
}
body {
&.lighter {
background: var(--brand-color--med);
}
&.player {
text-align: center;
}
&.embed {
background: var(--brand-color--faint);
margin: 0;
padding-bottom: 0;
.container {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
}
&.admin {
background: var(--brand-color--med);
position: fixed;
width: 100%;
height: 100%;
padding: 0;
}
&.error {
position: absolute;
text-align: center;
color: var(--primary-text-color--faint);
background: var(--brand-color--med);
width: 100%;
height: 100%;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
.dialog {
vertical-align: middle;
margin: 20px;
h1 {
font-size: 20px;
line-height: 28px;
font-weight: 400;
}
}
}
}
// Note: this is needed for React HotKeys performance. Removing this
// will cause severe performance degradation on Safari.
div[tabindex="-1"]:focus {
outline: 0;
}
::selection {
@apply bg-primary-600 text-white;
}
noscript {
text-align: center;
img {
width: 200px;
opacity: 0.5;
animation: flicker 4s infinite;
}
div {
font-size: 14px;
margin: 30px auto;
color: var(--primary-text-color--faint);
max-width: 400px;
a {
color: var(--highlight-text-color);
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
}
}
.emojione {
@apply w-5 h-5 -mt-[3px] inline;
}
// Virtuoso empty placeholder fix.
// https://gitlab.com/petyosi/soapbox-fe/-/commit/1e22c39934b60e5e186de804060ecfdf1955b506
div[data-viewport-type="window"] {
position: static !important;
}