// stylelint-disable rscss/class-format @import './_variables.scss'; :root { --navbar-height: 50px; } html { font-size: 14px; } body { font-family: sans-serif; font-family: var(--interfaceFont, sans-serif); margin: 0; color: $fallback--text; color: var(--text, $fallback--text); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overscroll-behavior-y: none; &.hidden { display: none; } } @media (any-pointer: fine) { body { background: var(--bg); } * { scrollbar-color: var(--btn) transparent; &::-webkit-scrollbar { background: transparent; } &::-webkit-scrollbar-button, &::-webkit-scrollbar-thumb { background-color: var(--btn); box-shadow: var(--buttonShadow); border-radius: var(--btnRadius); } &::-webkit-scrollbar-button { --___bgPadding: 2px; color: var(--btnText); background-repeat: no-repeat, no-repeat; &:horizontal { background-size: 50% calc(50% - var(--___bgPadding)), 50% calc(50% - var(--___bgPadding)); &:increment { background-image: linear-gradient(45deg, var(--btnText) 50%, transparent 51%), linear-gradient(-45deg, transparent 50%, var(--btnText) 51%); background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding); } &:decrement { background-image: linear-gradient(45deg, transparent 50%, var(--btnText) 51%), linear-gradient(-45deg, var(--btnText) 50%, transparent 51%); background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding); } } &:vertical { background-size: calc(50% - var(--___bgPadding)) 50%, calc(50% - var(--___bgPadding)) 50%; &:increment { background-image: linear-gradient(-45deg, transparent 50%, var(--btnText) 51%), linear-gradient(45deg, transparent 50%, var(--btnText) 51%); background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%; } &:decrement { background-image: linear-gradient(-45deg, var(--btnText) 50%, transparent 51%), linear-gradient(45deg, var(--btnText) 50%, transparent 51%); background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%; } } } } } a { text-decoration: none; color: $fallback--link; color: var(--link, $fallback--link); } h4 { margin: 0; } nav { z-index: 1000; color: var(--topBarText); background-color: $fallback--fg; background-color: var(--topBar, $fallback--fg); color: $fallback--faint; color: var(--faint, $fallback--faint); box-shadow: 0 0 4px rgba(0, 0, 0, 0.6); box-shadow: var(--topBarShadow); box-sizing: border-box; height: var(--navbar-height); position: fixed; } #sidebar { grid-area: sidebar; } .column.-scrollable { top: var(--navbar-height); position: sticky; } #main-scroller { margin-top: var(--navbar-height); grid-area: content; position: relative; } #notifs-column { grid-area: notifs; } .app-bg-wrapper { position: fixed; height: 100%; top: var(--navbar-height); z-index: -1000; left: 0; right: -20px; background-size: cover; background-repeat: no-repeat; background-color: var(--wallpaper); background-image: var(--body-background-image); background-position: 50%; } .underlay { grid-column-start: 1; grid-column-end: span 3; grid-row-start: 1; grid-row-end: 1; margin: 0 calc(var(--columnGap) * -2); padding: 0 calc(var(--columnGap) * 2); pointer-events: none; background-color: rgba(0, 0, 0, 0.15); background-color: var(--underlay, rgba(0, 0, 0, 0.15)); z-index: -2000; } .app-layout { --miniColumn: 25em; --maxiColumn: minmax(var(--miniColumn), 45em); --columnGap: 1em; --status-margin: 0.75em; position: relative; display: grid; grid-template-columns: var(--miniColumn) var(--maxiColumn); grid-template-areas: "sidebar content"; grid-template-rows: 1fr; box-sizing: border-box; margin: 0 auto; align-content: flex-start; flex-wrap: wrap; padding: 0 calc(var(--columnGap) / 2); justify-content: center; min-height: 100vh; .column { --___columnMargin: var(--columnGap); display: grid; grid-template-columns: 100%; box-sizing: border-box; grid-row-start: 1; grid-row-end: 1; margin: 0 calc(var(--___columnMargin) / 2); padding: calc(var(--___columnMargin) / 2) 0; row-gap: var(--___columnMargin); align-content: start; &.-scrollable { --___paddingIncrease: calc(var(--columnGap) / 2); padding-top: calc(var(--columnGap) / 2); position: sticky; top: var(--navbar-height); max-height: calc(100vh - var(--navbar-height)); overflow-y: auto; overflow-x: hidden; margin-left: calc(var(--___paddingIncrease) * -1); padding-left: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2); // Only show custom scrollbars on devices which // have a cursor/pointer to operate them &:not(.-show-scrollbar) { scrollbar-width: none; margin-right: calc(var(--___paddingIncrease) * -1); padding-right: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2); &::-webkit-scrollbar { display: block; width: 0; } } .panel-heading.-sticky { top: calc(var(--columnGap) / -2); } } } &.-has-new-post-button { .column { padding-bottom: 20em; } } &.-no-sticky-headers { .column { .panel-heading.-sticky { position: relative; top: 0; } } } .column-inner { display: grid; grid-template-columns: 100%; box-sizing: border-box; row-gap: 1em; align-content: start; } &.-reverse:not(.-wide):not(.-mobile) { grid-template-columns: var(--maxiColumn) var(--miniColumn); grid-template-areas: "content sidebar"; } &.-wide { grid-template-columns: var(--miniColumn) var(--maxiColumn) var(--miniColumn); grid-template-areas: "sidebar content notifs"; &.-reverse { grid-template-areas: "notifs content sidebar"; } } &.-mobile { grid-template-columns: 100vw; grid-template-areas: "content"; padding: 0; .column { margin: 0; } .underlay, #sidebar, #notifs-column { display: none; } } &.-normal { #notifs-column { display: none; } } } .text-center { text-align: center; } .button-default { user-select: none; color: $fallback--text; color: var(--btnText, $fallback--text); background-color: $fallback--fg; background-color: var(--btn, $fallback--fg); border: none; border-radius: $fallback--btnRadius; border-radius: var(--btnRadius, $fallback--btnRadius); cursor: pointer; box-shadow: $fallback--buttonShadow; box-shadow: var(--buttonShadow); font-size: 14px; font-family: sans-serif; font-family: var(--interfaceFont, sans-serif); &.-sublime { background: transparent; } i[class*=icon-], .svg-inline--fa { color: $fallback--text; color: var(--btnText, $fallback--text); } &::-moz-focus-inner { border: none; } &:hover { box-shadow: 0 0 4px rgba(255, 255, 255, 0.3); box-shadow: var(--buttonHoverShadow); } &:active { box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.3), 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset; box-shadow: var(--buttonPressedShadow); color: $fallback--text; color: var(--btnPressedText, $fallback--text); background-color: $fallback--fg; background-color: var(--btnPressed, $fallback--fg); svg, i { color: $fallback--text; color: var(--btnPressedText, $fallback--text); } } &:disabled { cursor: not-allowed; color: $fallback--text; color: var(--btnDisabledText, $fallback--text); background-color: $fallback--fg; background-color: var(--btnDisabled, $fallback--fg); svg, i { color: $fallback--text; color: var(--btnDisabledText, $fallback--text); } } &.toggled { color: $fallback--text; color: var(--btnToggledText, $fallback--text); background-color: $fallback--fg; background-color: var(--btnToggled, $fallback--fg); box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.3), 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset; box-shadow: var(--buttonPressedShadow); svg, i { color: $fallback--text; color: var(--btnToggledText, $fallback--text); } } &.danger { // TODO: add better color variable color: $fallback--text; color: var(--alertErrorPanelText, $fallback--text); background-color: $fallback--alertError; background-color: var(--alertError, $fallback--alertError); } } .button-unstyled { background: none; border: none; outline: none; display: inline; text-align: initial; font-size: 100%; font-family: inherit; padding: 0; line-height: unset; cursor: pointer; box-sizing: content-box; color: inherit; &.-link { color: $fallback--link; color: var(--link, $fallback--link); } &.-fullwidth { width: 100%; } &.-hover-highlight { &:hover svg { color: $fallback--lightText; color: var(--lightText, $fallback--lightText); } } } input, textarea, .input { &.unstyled { border-radius: 0; background: none; box-shadow: none; height: unset; } border: none; border-radius: $fallback--inputRadius; border-radius: var(--inputRadius, $fallback--inputRadius); box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset, 0 0 2px 0 rgba(0, 0, 0, 1) inset; box-shadow: var(--inputShadow); background-color: $fallback--fg; background-color: var(--input, $fallback--fg); color: $fallback--lightText; color: var(--inputText, $fallback--lightText); font-family: sans-serif; font-family: var(--inputFont, sans-serif); font-size: 14px; margin: 0; box-sizing: border-box; display: inline-block; position: relative; height: 28px; line-height: 16px; hyphens: none; padding: 8px 0.5em; &:disabled, &[disabled=disabled], &.disabled { cursor: not-allowed; opacity: 0.5; } &[type=range] { background: none; border: none; margin: 0; box-shadow: none; flex: 1; } &[type=radio] { display: none; &:checked + label::before { box-shadow: 0 0 2px black inset, 0 0 0 4px $fallback--fg inset; box-shadow: var(--inputShadow), 0 0 0 4px var(--fg, $fallback--fg) inset; background-color: var(--accent, $fallback--link); } &:disabled { &, & + label, & + label::before { opacity: 0.5; } } + label::before { flex-shrink: 0; display: inline-block; content: ''; transition: box-shadow 200ms; width: 1.1em; height: 1.1em; border-radius: 100%; // Radio buttons should always be circle box-shadow: 0 0 2px black inset; box-shadow: var(--inputShadow); margin-right: 0.5em; background-color: $fallback--fg; background-color: var(--input, $fallback--fg); vertical-align: top; text-align: center; line-height: 1.1em; font-size: 1.1em; box-sizing: border-box; color: transparent; overflow: hidden; box-sizing: border-box; } } &[type=checkbox] { display: none; &:checked + label::before { color: $fallback--text; color: var(--inputText, $fallback--text); } &:disabled { &, & + label, & + label::before { opacity: 0.5; } } + label::before { flex-shrink: 0; display: inline-block; content: '✓'; transition: color 200ms; width: 1.1em; height: 1.1em; border-radius: $fallback--checkboxRadius; border-radius: var(--checkboxRadius, $fallback--checkboxRadius); box-shadow: 0 0 2px black inset; box-shadow: var(--inputShadow); margin-right: 0.5em; background-color: $fallback--fg; background-color: var(--input, $fallback--fg); vertical-align: top; text-align: center; line-height: 1.1em; font-size: 1.1em; box-sizing: border-box; color: transparent; overflow: hidden; box-sizing: border-box; } } &.resize-height { resize: vertical; } } option { color: $fallback--text; color: var(--text, $fallback--text); background-color: $fallback--bg; background-color: var(--bg, $fallback--bg); } .hide-number-spinner { -moz-appearance: textfield; &[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button { opacity: 0; display: none; } } i[class*=icon-], .svg-inline--fa { color: $fallback--icon; color: var(--icon, $fallback--icon); } .btn-block { display: block; width: 100%; } .btn-group { position: relative; display: inline-flex; vertical-align: middle; button { position: relative; flex: 1 1 auto; &:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } &:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } } } @import './panel.scss'; .fa { color: grey; } .mobile-shown { display: none; } .badge { box-sizing: border-box; display: inline-block; border-radius: 99px; max-width: 10em; min-width: 1.7em; height: 1.3em; padding: 0.15em 0.15em; vertical-align: middle; font-weight: normal; font-style: normal; font-size: 0.9em; line-height: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; &.badge-notification { background-color: $fallback--cRed; background-color: var(--badgeNotification, $fallback--cRed); color: white; color: var(--badgeNotificationText, white); } } .alert { margin: 0.35em; padding: 0.25em; border-radius: $fallback--tooltipRadius; border-radius: var(--tooltipRadius, $fallback--tooltipRadius); min-height: 28px; line-height: 28px; &.error { background-color: $fallback--alertError; background-color: var(--alertError, $fallback--alertError); color: $fallback--text; color: var(--alertErrorText, $fallback--text); .panel-heading & { color: $fallback--text; color: var(--alertErrorPanelText, $fallback--text); } } &.warning { background-color: $fallback--alertWarning; background-color: var(--alertWarning, $fallback--alertWarning); color: $fallback--text; color: var(--alertWarningText, $fallback--text); .panel-heading & { color: $fallback--text; color: var(--alertWarningPanelText, $fallback--text); } } &.success { background-color: var(--alertSuccess, $fallback--alertWarning); color: var(--alertSuccessText, $fallback--text); .panel-heading & { color: var(--alertSuccessPanelText, $fallback--text); } } } .faint { color: $fallback--faint; color: var(--faint, $fallback--faint); } .faint-link { color: $fallback--faint; color: var(--faint, $fallback--faint); &:hover { text-decoration: underline; } } .visibility-notice { padding: 0.5em; border: 1px solid $fallback--faint; border: 1px solid var(--faint, $fallback--faint); border-radius: $fallback--inputRadius; border-radius: var(--inputRadius, $fallback--inputRadius); } .notice-dismissible { padding-right: 4rem; position: relative; .dismiss { position: absolute; top: 0; right: 0; padding: 0.5em; color: inherit; } } .fa-scale-110 { &.svg-inline--fa { font-size: 1.1em; } } .fa-old-padding { &.svg-inline--fa { padding: 0 0.3em; } } .login-hint { text-align: center; @media all and (min-width: 801px) { display: none; } a { display: inline-block; padding: 1em 0; width: 100%; } } .btn.button-default { min-height: 28px; } .new-status-notification { position: relative; font-size: 1.1em; z-index: 1; flex: 1; } @media all and (max-width: 800px) { .mobile-hidden { display: none; } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } @keyframes shakeError { 0% { transform: translateX(0); } 15% { transform: translateX(0.375rem); } 30% { transform: translateX(-0.375rem); } 45% { transform: translateX(0.375rem); } 60% { transform: translateX(-0.375rem); } 75% { transform: translateX(0.375rem); } 90% { transform: translateX(-0.375rem); } 100% { transform: translateX(0); } } // Vue transitions .fade-enter-active, .fade-leave-active { transition: opacity 0.2s; } .fade-enter-from, .fade-leave-active { opacity: 0; }