owncast/web/styles/globals.scss
janWilejan 3f4887020d
Add resize handle to chat (#3157)
* add resize handle to chat

* Add chat resize functionality

* window resize only causes chat resize on desktop

* fix parseFloat invocation

* desktop is optional attribute of ChatContainer

---------

Co-authored-by: janWilejan <>
2023-07-10 23:00:28 -07:00

134 lines
2.3 KiB
SCSS

@import '@fontsource/inter/300.css';
@import '@fontsource/inter/400.css';
@import '@fontsource/inter/600.css';
@import '@fontsource/inter/800.css';
@import '@fontsource/poppins/400.css';
@import '@fontsource/poppins/600.css';
@import './mixins';
:root {
--content-padding: 0.95rem;
--module-spacing: 12px; // margin size between lines of stuff, if needed
--header-height: 70px; // needed for making main content scrollable;
--content-height: calc(100vh - var(--header-height));
--replacement-bar-height: 46px; // needed for making main content scrollable on mobile;
// chat modules
--chat-message-text-size: 0.825rem;
--chat-notification-icon-padding: 6px;
--chat-message-padding: 10px;
--chat-text-highlight-border-radius: 3px;
--player-container-height: 75vh;
--status-bar-height: 2rem;
--footer-padding-x: 1rem;
@include screen(tablet) {
--header-height: 3.85rem;
--player-container-height: 400px;
}
@include screen(mobile) {
--player-container-height: 250px;
}
}
::selection {
background-color: var(--theme-color-palette-12);
}
html {
font-size: clamp(15px, 1.35vw, 16px);
}
body {
font-family: var(--theme-text-body-font-family);
font-weight: 300;
margin: 0;
background-color: var(--theme-color-background-main);
div,
h1,
h2,
h3,
h4,
h5,
h6,
p {
padding: 0;
margin-top: revert;
margin-bottom: revert;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--theme-text-display-font-family);
color: unset; // reset some colors from global.less file
}
h1 {
font-size: 2em;
font-weight: 600;
}
h2 {
font-size: 1.5em;
font-weight: 400;
}
h3 {
font-family: var(--theme-text-body-font-family);
font-size: 1.25em;
font-weight: 600;
}
h4 {
font-size: 1em;
}
ul {
list-style: square;
}
ul,
ol {
margin: 0.7em 0 0;
padding: 0 1em;
ul,
ol {
margin: 0;
}
li {
margin: 0.175em 0 0;
}
}
a {
color: var(--theme-color-action);
word-break: break-word;
&:hover {
color: var(--theme-color-action-hover);
}
}
strong,
b {
font-weight: 600;
}
}
.emoji {
display: inline-block;
font-size: 30px;
height: 30px;
line-height: 30px;
margin-left: 5px;
margin-right: 5px;
vertical-align: middle;
}