Some other parts of the interface for example URLs in profiles use the invisible class, move this to the top level global file so it'll be applied everywhere.
220 lines
4.2 KiB
SCSS
220 lines
4.2 KiB
SCSS
@import './fonts.scss';
|
|
@import './variables.scss';
|
|
@import './focus.scss';
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: system-ui, -apple-system, PinaforeRegular, sans-serif;
|
|
font-size: 14px;
|
|
line-height: 1.4;
|
|
color: var(--body-text-color);
|
|
background: var(--body-bg);
|
|
-webkit-tap-highlight-color: transparent; // fix for blue background on spoiler tap on Chrome for Android
|
|
overflow-x: hidden; // Prevent horizontal scrolling on mobile Firefox on small screens
|
|
|
|
@media (max-width: 240px) {
|
|
font-size: 0.75em; /* tiny text for tiny screens */
|
|
}
|
|
|
|
}
|
|
|
|
.main-content {
|
|
contain: content; // see https://www.w3.org/TR/2018/CR-css-contain-1-20181108/#valdef-contain-content
|
|
padding-top: var(--main-content-pad-top);
|
|
padding-bottom: var(--main-content-pad-bottom);
|
|
|
|
@supports not (contain: content) {
|
|
// For browsers which don't support the "contain" CSS property,
|
|
// make a stacking context manually so that the z-index behavior
|
|
// is consistent. See: https://github.com/nolanlawson/pinafore/issues/1806
|
|
isolation: isolate;
|
|
}
|
|
}
|
|
|
|
main {
|
|
position: relative;
|
|
width: 602px;
|
|
// take into account scrollbars;
|
|
// https://stackoverflow.com/a/34884924
|
|
max-width: 100%;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
margin: 0 auto var(--main-margin-bottom);
|
|
background: var(--main-bg);
|
|
border: var(--main-border-size) solid var(--main-border);
|
|
border-radius: 1px;
|
|
min-height: 70vh;
|
|
}
|
|
|
|
footer {
|
|
width: 602px;
|
|
max-width: 100vw;
|
|
box-sizing: border-box;
|
|
margin: 15px auto;
|
|
border-radius: 1px;
|
|
background: var(--main-bg);
|
|
font-size: 0.9em;
|
|
padding: 20px;
|
|
border: 1px solid var(--main-border);
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
margin: 0 0 0.5em 0;
|
|
font-weight: 400;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2em;
|
|
}
|
|
|
|
a {
|
|
color: var(--anchor-text);
|
|
text-decoration: none;
|
|
|
|
&:visited {
|
|
color: var(--anchor-text);
|
|
}
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
}
|
|
|
|
input {
|
|
border: 1px solid var(--input-border);
|
|
padding: 5px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
input[type=search] {
|
|
-webkit-appearance: none; // reset Safari user agent stylesheet
|
|
}
|
|
|
|
// Fixes gray/black background when using a dark GTK theme
|
|
input, textarea {
|
|
background: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
button, .button {
|
|
font-size: 1.2em;
|
|
background: var(--button-bg);
|
|
border-radius: 2px;
|
|
padding: 10px 15px;
|
|
border: 1px solid var(--button-border);
|
|
cursor: pointer;
|
|
color: var(--button-text);
|
|
|
|
&:hover {
|
|
background: var(--button-bg-hover);
|
|
text-decoration: none;
|
|
}
|
|
|
|
&:active {
|
|
background: var(--button-bg-active);
|
|
}
|
|
|
|
&[disabled] {
|
|
opacity: 0.35;
|
|
pointer-events: none;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
&.primary {
|
|
border: 1px solid var(--button-primary-border);
|
|
background: var(--button-primary-bg);
|
|
color: var(--button-primary-text);
|
|
|
|
&:hover {
|
|
background: var(--button-primary-bg-hover);
|
|
}
|
|
|
|
&:active {
|
|
background: var(--button-primary-bg-active);
|
|
}
|
|
}
|
|
}
|
|
|
|
p, label, input {
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
ul, li, p {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.hidden {
|
|
opacity: 0;
|
|
}
|
|
|
|
button::-moz-focus-inner {
|
|
border: 0;
|
|
}
|
|
|
|
/* Firefox hacks to remove ugly red border.
|
|
Unnecessary since it gives a warning if you submit an empty field anyway. */
|
|
input:required, input:invalid {
|
|
box-shadow: none;
|
|
}
|
|
|
|
textarea {
|
|
font-family: CountryFlagEmojiPolyfill, system-ui, -apple-system, PinaforeRegular, sans-serif, PinaforeEmoji;
|
|
font-size: inherit;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.spin {
|
|
animation: spin 0.6s steps(8) infinite;
|
|
}
|
|
|
|
.ellipsis::after {
|
|
content: "\2026";
|
|
}
|
|
|
|
/* via https://stackoverflow.com/a/19758620 */
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
border: 0;
|
|
}
|
|
|
|
/* this gets injected as raw HTML, so it's easiest to just define it in global.scss */
|
|
.inline-custom-emoji {
|
|
width: 1.4em;
|
|
height: 1.4em;
|
|
margin: -0.1em 0;
|
|
object-fit: contain;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.inline-emoji {
|
|
font-family: CountryFlagEmojiPolyfill, PinaforeEmoji, sans-serif;
|
|
}
|
|
|
|
.invisible {
|
|
/* copied from Mastodon */
|
|
font-size: 0;
|
|
line-height: 0;
|
|
display: inline-block;
|
|
width: 0;
|
|
height: 0;
|
|
position: absolute;
|
|
}
|