1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 |
- @import '../../../styles/mixins.scss';
- .noscript {
- position: fixed;
- inset: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- text-align: center;
- padding: 2em;
- font-size: large;
- background-color: var(--theme-color-background-main);
- z-index: 999;
- h2 {
- margin-top: 25px;
- margin-bottom: 5px;
- font-weight: bold;
- font-size: inherit;
- }
- }
- // Necessary in case content y-overflows becuase
- // align-items: center would otherwise hide some
- // of the content
- .scrollContainer {
- max-height: 100%;
- overflow: auto;
- }
- .content {
- max-width: 100%;
- width: 70ch;
- display: flex;
- flex-direction: column;
- align-items: center;
- }
- .logo {
- width: 70%;
- // For some weir reason, the logo isn't displayed on screens <= 767px.
- // This coincides with the tablet breakpoint, but god knows what exactly
- // the issue is. Since it's just a design element, just hide the logo on
- // those smaller screens. For more information, see
- // https://github.com/owncast/owncast/pull/2592
- @include screen(tablet) {
- display: none;
- }
- }
|