1081 lines
28 KiB
SCSS
1081 lines
28 KiB
SCSS
@use "sass:color";
|
|
|
|
// **************
|
|
// COLORS
|
|
// **************
|
|
// these are "base" colors that are used by other variables.
|
|
$ACCENT_COLOR: #c1ceb1 !default;
|
|
|
|
$DARK_1: color.scale($ACCENT_COLOR, $lightness: -25%, $saturation: -97%) !default;
|
|
$DARK_2: color.scale($ACCENT_COLOR, $lightness: -30%, $saturation: -60%) !default;
|
|
$DARK_3: color.scale($ACCENT_COLOR, $lightness: -80%, $saturation: -70%) !default;
|
|
|
|
$LIGHT: color.scale($ACCENT_COLOR, $lightness: 40%, $saturation: -60%) !default;
|
|
$LIGHT_2: color.scale($ACCENT_COLOR, $lightness: 60%, $saturation: -60%) !default;
|
|
|
|
$MAIN_BG: color.scale($ACCENT_COLOR, $lightness: -10%, $saturation: -40%) !default;
|
|
|
|
$BUTTON_COLOR: color.adjust($ACCENT_COLOR, $hue: 90) !default;
|
|
$BUTTON_COLOR_2: color.adjust($ACCENT_COLOR, $hue: 180) !default;
|
|
|
|
$ACCORDION_COLOR: color.adjust($ACCENT_COLOR, $hue: 140, $lightness: -10%, $saturation: -15%) !default;
|
|
|
|
$DEFAULT_FONT_COLOR: black !default;
|
|
$DEFAULT_FONT_COLOR_INVERSE: white !default;
|
|
|
|
$BUTTON_COLOR_WARN: #fbfb8d !default;
|
|
$BUTTON_COLOR_CRITICAL: red !default;
|
|
$BUTTON_WARN_FONT_COLOR: $DEFAULT_FONT_COLOR !default;
|
|
$BUTTON_CRITICAL_FONT_COLOR: $DEFAULT_FONT_COLOR_INVERSE !default;
|
|
|
|
// **************
|
|
// UNITS & SIZE
|
|
// **************
|
|
// these are used within margins and paddings and other miscellaneous sizing.
|
|
|
|
$ZERO_PADDING: 0 !default;
|
|
$SMALL_PADDING: 5px !default;
|
|
$MEDIUM_PADDING: 10px !default;
|
|
$MEDIUM_BIG_PADDING: 15px !default;
|
|
$BIG_PADDING: 20px !default;
|
|
$BIGGER_PADDING: 30px !default;
|
|
|
|
$PAGE_SIDE_MARGIN: 100px !default;
|
|
|
|
$SETTINGS_WIDTH: 40% !default;
|
|
|
|
// **************
|
|
// BORDERS
|
|
// **************
|
|
$DEFAULT_BORDER: 1px solid black !default;
|
|
$DEFAULT_BORDER_RADIUS: 4px !default;
|
|
|
|
// other variables can be found before the rule that uses them. they are usually constructed from these basic variables.
|
|
|
|
@font-face {
|
|
font-family: "site-title";
|
|
src: url("/static/fonts/ChicagoFLF.woff2");
|
|
}
|
|
|
|
@mixin cadman($var) {
|
|
font-family: "Cadman";
|
|
src: url("/static/fonts/Cadman_#{$var}.woff2");
|
|
}
|
|
|
|
@font-face {
|
|
@include cadman("Roman");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
@include cadman("Bold");
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
@include cadman("Italic");
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
}
|
|
|
|
@font-face {
|
|
@include cadman("BoldItalic");
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
}
|
|
|
|
$button_border: $DEFAULT_BORDER !default;
|
|
$button_padding: $SMALL_PADDING $BIG_PADDING !default;
|
|
$button_border_radius: $DEFAULT_BORDER_RADIUS !default;
|
|
$button_margin: $MEDIUM_PADDING $ZERO_PADDING !default;
|
|
%button-base {
|
|
cursor: default;
|
|
font-size: 0.9em;
|
|
font-family: "Cadman";
|
|
text-decoration: none;
|
|
border: $button_border;
|
|
border-radius: $button_border_radius;
|
|
padding: $button_padding;
|
|
margin: $button_margin;
|
|
}
|
|
|
|
$reduced_button_margin: $ZERO_PADDING !default;
|
|
$reduced_button_padding: $SMALL_PADDING !default;
|
|
@mixin button($color, $font_color) {
|
|
@extend %button-base;
|
|
background-color: $color;
|
|
color: $font_color !important; //!important because linkbutton is an <a>
|
|
|
|
&:hover {
|
|
background-color: color.scale($color, $lightness: 20%);
|
|
}
|
|
|
|
&:active {
|
|
background-color: color.scale($color, $lightness: -10%, $saturation: -70%);
|
|
}
|
|
|
|
&:disabled {
|
|
background-color: color.scale($color, $lightness: 30%, $saturation: -90%);
|
|
}
|
|
|
|
&.reduced {
|
|
margin: $reduced_button_margin;
|
|
padding: $reduced_button_padding;
|
|
}
|
|
}
|
|
|
|
$navbar_padding: $MEDIUM_PADDING !default;
|
|
$navbar_margin: 0 !default;
|
|
@mixin navbar($color) {
|
|
padding: $navbar_padding;
|
|
margin: $navbar_margin;
|
|
display: flex;
|
|
justify-content: end;
|
|
background-color: $color;
|
|
}
|
|
|
|
$body_margin: $BIG_PADDING $PAGE_SIDE_MARGIN !default;
|
|
body {
|
|
font-family: "Cadman";
|
|
// font-size: 18px;
|
|
margin: $body_margin;
|
|
background-color: $MAIN_BG;
|
|
color: $DEFAULT_FONT_COLOR;
|
|
}
|
|
|
|
$link_color: #c11c1c !default;
|
|
$link_color_visited: #730c0c !default;
|
|
a{
|
|
&:link {
|
|
color: $link_color;
|
|
}
|
|
&:visited {
|
|
color: $link_color_visited;
|
|
}
|
|
}
|
|
|
|
.big {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
$topnav_color: $ACCENT_COLOR !default;
|
|
#topnav {
|
|
@include navbar($topnav_color);
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
}
|
|
|
|
$bottomnav_color: $DARK_1 !default;
|
|
#bottomnav {
|
|
@include navbar($bottomnav_color);
|
|
}
|
|
|
|
$darkbg_color: $DARK_1 !default;
|
|
.darkbg {
|
|
padding-bottom: $MEDIUM_PADDING;
|
|
padding-left: $MEDIUM_PADDING;
|
|
padding-right: $MEDIUM_PADDING;
|
|
background-color: $darkbg_color;
|
|
}
|
|
|
|
$user_actions_gap: $MEDIUM_BIG_PADDING !default;
|
|
.user-actions {
|
|
display: flex;
|
|
column-gap: $user_actions_gap;
|
|
}
|
|
|
|
$site_title_margin: $ZERO_PADDING $BIG_PADDING !default;
|
|
$site_title_size: 3rem !default;
|
|
$site_title_color: $DEFAULT_FONT_COLOR !default;
|
|
.site-title {
|
|
font-family: "site-title";
|
|
font-size: $site_title_size;
|
|
margin: $site_title_margin;
|
|
text-decoration: none;
|
|
color: $site_title_color !important;
|
|
}
|
|
|
|
$thread_title_margin: $ZERO_PADDING !default;
|
|
$thread_title_size: 1.5rem !default;
|
|
.thread-title {
|
|
margin: $thread_title_margin;
|
|
font-size: $thread_title_size;
|
|
font-weight: bold;
|
|
}
|
|
|
|
$post_usercard_width: 200px !default;
|
|
$post_border: 2px outset $DARK_2 !default;
|
|
.post {
|
|
display: grid;
|
|
grid-template-columns: $post_usercard_width 1fr;
|
|
grid-template-rows: 1fr;
|
|
gap: $ZERO_PADDING;
|
|
grid-auto-flow: row;
|
|
grid-template-areas:
|
|
"usercard post-content-container";
|
|
border: $post_border;
|
|
}
|
|
|
|
$usercard_padding: $BIG_PADDING $MEDIUM_PADDING !default;
|
|
$usercard_border: 4px outset $LIGHT !default;
|
|
$usercard_border_right: solid 2px !default;
|
|
$usercard_background: $DARK_1 !default;
|
|
.usercard {
|
|
grid-area: usercard;
|
|
padding: $usercard_padding;
|
|
border: $usercard_border;
|
|
background-color: $usercard_background;
|
|
border-right: $usercard_border_right;
|
|
}
|
|
|
|
.usercard-inner {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
top: $MEDIUM_PADDING;
|
|
position: sticky;
|
|
}
|
|
|
|
$post_content_gap: $ZERO_PADDING !default;
|
|
.post-content-container {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: min-content 1fr min-content;
|
|
gap: $post_content_gap;
|
|
grid-auto-flow: row;
|
|
grid-template-areas:
|
|
"post-info"
|
|
"post-content"
|
|
"post-reactions";
|
|
grid-area: post-content-container;
|
|
|
|
min-height: 100%;
|
|
}
|
|
|
|
$post_info_min_height: 70px !default;
|
|
$post_info_padding: $SMALL_PADDING $BIG_PADDING !default;
|
|
$post_info_border_top: $DEFAULT_BORDER !default;
|
|
$post_info_border_bottom: $DEFAULT_BORDER !default;
|
|
.post-info {
|
|
grid-area: post-info;
|
|
display: flex;
|
|
min-height: $post_info_min_height;
|
|
justify-content: space-between;
|
|
padding: $post_info_padding;
|
|
align-items: center;
|
|
border-top: $post_info_border_top;
|
|
border-bottom: $post_info_border_bottom;
|
|
}
|
|
|
|
$post_content_padding: $BIG_PADDING $BIG_PADDING $ZERO_PADDING $BIG_PADDING !default;
|
|
$post_content_background: $ACCENT_COLOR !default;
|
|
.post-content {
|
|
grid-area: post-content;
|
|
padding: $post_content_padding;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
background-color: $post_content_background;
|
|
}
|
|
|
|
$post_reactions_min_height: 50px !default;
|
|
$post_reactions_padding: $SMALL_PADDING $BIG_PADDING !default;
|
|
$post_reactions_gap: $SMALL_PADDING !default;
|
|
$post_reactions_background: $MAIN_BG !default;
|
|
$post_reactions_border_top: 2px dotted gray !default;
|
|
.post-reactions {
|
|
grid-area: post-reactions;
|
|
min-height: $post_reactions_min_height;
|
|
display: flex;
|
|
padding: $post_reactions_padding;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: $post_reactions_gap;
|
|
background-color: $post_reactions_background;
|
|
border-top: $post_reactions_border_top;
|
|
}
|
|
|
|
$post_inner_padding_right: 25% !default;
|
|
$post_inner_padding_right_wider: 12.5% !default;
|
|
.post-inner {
|
|
height: 100%;
|
|
padding-right: $post_inner_padding_right;
|
|
|
|
&.wider {
|
|
padding-right: $post_inner_padding_right_wider;
|
|
}
|
|
}
|
|
|
|
$signature_container_border_top: $post_reactions_border_top !default;
|
|
$signature_container_padding: $MEDIUM_PADDING $ZERO_PADDING !default;
|
|
.signature-container {
|
|
border-top: $signature_container_border_top;
|
|
padding: $signature_container_padding;
|
|
}
|
|
|
|
$code_background_color: $DARK_3 !default;
|
|
$code_font_color: white !default;
|
|
$code_border_radius: 8px !default;
|
|
$code_border_left: $MEDIUM_PADDING solid $LIGHT_2 !default;
|
|
pre code {
|
|
display: block;
|
|
background-color: $code_background_color;
|
|
font-size: 1rem;
|
|
color: $code_font_color;
|
|
border-bottom-right-radius: $code_border_radius;
|
|
border-bottom-left-radius: $code_border_radius;
|
|
border-left: $code_border_left;
|
|
padding: $BIG_PADDING;
|
|
overflow: scroll;
|
|
tab-size: 4;
|
|
}
|
|
|
|
$copy_code_header_background: $ACCENT_COLOR !default;
|
|
$copy_code_border: 2px solid black !default;
|
|
.copy-code-container {
|
|
position: sticky;
|
|
// width: 100%;
|
|
width: calc(100% - 4px);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: last baseline;
|
|
font-family: "Cadman";
|
|
border-top-right-radius: $code_border_radius;
|
|
border-top-left-radius: $code_border_radius;
|
|
background-color: $copy_code_header_background;
|
|
border-left: $copy_code_border;
|
|
border-right: $copy_code_border;
|
|
border-top: $copy_code_border;
|
|
|
|
&::before {
|
|
content: "code block";
|
|
font-style: italic;
|
|
margin-left: $MEDIUM_PADDING;
|
|
}
|
|
}
|
|
|
|
.copy-code {
|
|
margin-right: $MEDIUM_PADDING;
|
|
}
|
|
|
|
$inline_code_border_radius: $DEFAULT_BORDER_RADIUS !default;$inline_code_margin: 4px !default;
|
|
$inline_code_padding: $SMALL_PADDING $MEDIUM_PADDING !default;
|
|
.inline-code {
|
|
background-color: $code_background_color;
|
|
color: $code_font_color;
|
|
padding: $inline_code_padding;
|
|
display: inline-block;
|
|
margin: $inline_code_margin;
|
|
border-radius: $inline_code_border_radius;
|
|
font-size: 1rem;
|
|
white-space: pre;
|
|
}
|
|
|
|
$dialogs-padding: $ZERO_PADDING !default;
|
|
$dialogs-border-radius: $DEFAULT_BORDER_RADIUS !default;
|
|
$dialog_border: 2px solid black !default;
|
|
#delete-dialog, .lightbox-dialog {
|
|
padding: $dialogs-padding;
|
|
border-radius: $dialogs-border-radius;
|
|
border: $dialog_border;
|
|
box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
$delete_dialog_padding: $BIG_PADDING !default;
|
|
.delete-dialog-inner {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: $delete_dialog_padding;
|
|
}
|
|
|
|
$lightbox_background: $ACCENT_COLOR !default;
|
|
$lightbox_gap: $MEDIUM_PADDING !default;
|
|
$lightbox_inner_padding: $BIG_PADDING !default;
|
|
.lightbox-inner {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: $lightbox_inner_padding;
|
|
min-width: 400px;
|
|
background-color: $lightbox_background;
|
|
gap: $lightbox_gap;
|
|
}
|
|
|
|
.lightbox-image {
|
|
max-width: 70vw;
|
|
max-height: 70vh;
|
|
object-fit: scale-down;
|
|
}
|
|
|
|
.lightbox-nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
$quote_padding: $MEDIUM_PADDING $BIG_PADDING !default;
|
|
$quote_margin: $MEDIUM_PADDING !default;
|
|
$quote_background_color: #00000026 !default;
|
|
$quote_border_radius: $DEFAULT_BORDER_RADIUS !default;
|
|
$quote_border_left: $MEDIUM_PADDING solid $LIGHT_2 !default;
|
|
blockquote {
|
|
padding: $quote_padding;
|
|
margin: $quote_margin;
|
|
border-radius: $quote_border_radius;
|
|
border-left: $quote_border_left;
|
|
background-color: $quote_background_color;
|
|
}
|
|
|
|
$userpage_usercard_size: 300px !default;
|
|
$userpage_column_gap: $ZERO_PADDING !default;
|
|
.user-info {
|
|
display: grid;
|
|
grid-template-columns: $userpage_usercard_size 1fr;
|
|
grid-template-rows: 1fr;
|
|
gap: $userpage_column_gap;
|
|
grid-template-areas:
|
|
"user-page-usercard user-page-stats";
|
|
}
|
|
|
|
$user_page_usercard_padding: $BIG_PADDING $MEDIUM_PADDING !default;
|
|
$user_page_usercard_border: $usercard_border !default;
|
|
$user_page_usercard_background: $usercard_background !default;
|
|
$user_page_usercard_border_right: $usercard_border_right !default;
|
|
.user-page-usercard {
|
|
grid-area: user-page-usercard;
|
|
padding: $user_page_usercard_padding;
|
|
border: $user_page_usercard_border;
|
|
background-color: $DARK_1;
|
|
border-right: $user_page_usercard_border_right;
|
|
}
|
|
|
|
$user_page_stats_padding: $BIG_PADDING $BIGGER_PADDING !default;
|
|
$user_page_stats_border: $DEFAULT_BORDER !default;
|
|
.user-page-stats {
|
|
grid-area: user-page-stats;
|
|
padding: $user_page_stats_padding;
|
|
border: $user_page_stats_border;
|
|
}
|
|
|
|
$user_stats_list_margin: $ZERO_PADDING $ZERO_PADDING $MEDIUM_PADDING $ZERO_PADDING !default;
|
|
.user-stats-list {
|
|
list-style: none;
|
|
margin: $user_stats_list_margin;
|
|
}
|
|
|
|
$user_page_posts_border: $DEFAULT_BORDER !default;
|
|
$user_page_posts_background: $ACCENT_COLOR !default;
|
|
.user-page-posts {
|
|
border-left: $user_page_posts_border;
|
|
border-right: $user_page_posts_border;
|
|
border-bottom: $user_page_posts_border;
|
|
background-color: $user_page_posts_background;
|
|
}
|
|
|
|
$user_page_post_preview_max_height: 200px !default;
|
|
$user_page_post_preview_mask_image: linear-gradient(180deg,#000 60%,transparent) !default;
|
|
.user-page-post-preview {
|
|
max-height: $user_page_post_preview_max_height;
|
|
mask-image: $user_page_post_preview_mask_image;
|
|
}
|
|
|
|
$avatar_width: 90% !default;
|
|
$avatar_height: 90% !default;
|
|
$avatar_margin_bottom: $MEDIUM_PADDING !default;
|
|
.avatar {
|
|
width: $avatar_width;
|
|
height: $avatar_height;
|
|
object-fit: contain;
|
|
margin-bottom: $avatar_margin_bottom;
|
|
}
|
|
|
|
.username-link {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.user-status {
|
|
text-align: center;
|
|
}
|
|
|
|
button, input[type="submit"], .linkbutton {
|
|
display: inline-block;
|
|
@include button($BUTTON_COLOR, $DEFAULT_FONT_COLOR);
|
|
|
|
&.critical {
|
|
@include button($BUTTON_COLOR_CRITICAL, $BUTTON_CRITICAL_FONT_COLOR);
|
|
}
|
|
|
|
&.warn {
|
|
@include button($BUTTON_COLOR_WARN, $BUTTON_WARN_FONT_COLOR);
|
|
}
|
|
}
|
|
|
|
// not sure why this one has to be separate, but if it's included in the rule above everything breaks
|
|
input[type="file"]::file-selector-button {
|
|
@include button($BUTTON_COLOR, $DEFAULT_FONT_COLOR);
|
|
margin: $MEDIUM_PADDING;
|
|
}
|
|
|
|
$para_margin: $MEDIUM_BIG_PADDING $ZERO_PADDING !default;
|
|
p {
|
|
margin: $para_margin;
|
|
}
|
|
|
|
$pagebutton_padding: $SMALL_PADDING $SMALL_PADDING !default;
|
|
$pagebutton_margin: $ZERO_PADDING !default;
|
|
$pagebutton_min_width: $BIG_PADDING !default;
|
|
.pagebutton {
|
|
@include button($BUTTON_COLOR, $DEFAULT_FONT_COLOR);
|
|
padding: $pagebutton_padding;
|
|
margin: $pagebutton_margin;
|
|
display: inline-block;
|
|
min-width: $pagebutton_min_width;
|
|
text-align: center;
|
|
}
|
|
|
|
.currentpage {
|
|
@extend %button-base;
|
|
border: none;
|
|
padding: $pagebutton_padding;
|
|
margin: $pagebutton_margin;
|
|
display: inline-block;
|
|
min-width: $pagebutton_min_width;
|
|
text-align: center;
|
|
}
|
|
|
|
.modform {
|
|
display: inline;
|
|
}
|
|
|
|
$login_container_width: $SETTINGS_WIDTH !default;
|
|
.login-container > * {
|
|
width: $login_container_width;
|
|
margin: auto;
|
|
}
|
|
|
|
$settings_container_width: $SETTINGS_WIDTH !default;
|
|
.settings-container > * {
|
|
width: $settings_container_width;
|
|
margin: auto;
|
|
}
|
|
|
|
$avatar_form_padding: $BIG_PADDING $ZERO_PADDING !default;
|
|
.avatar-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: $avatar_form_padding;
|
|
}
|
|
|
|
$text_input_border: $DEFAULT_BORDER !default;
|
|
$text_input_border_radius: $DEFAULT_BORDER_RADIUS !default;
|
|
$text_input_padding: 7px $MEDIUM_PADDING !default;
|
|
$text_input_background: color.scale($ACCENT_COLOR, $lightness: 40%) !default;
|
|
$text_input_background_focus: color.scale($ACCENT_COLOR, $lightness: 60%) !default;
|
|
input[type="text"], input[type="password"], textarea, select {
|
|
border: $text_input_border;
|
|
border-radius: $text_input_border_radius;
|
|
padding: $text_input_padding;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
resize: vertical;
|
|
background-color: $text_input_background;
|
|
|
|
&:focus {
|
|
background-color: $text_input_background_focus;
|
|
}
|
|
}
|
|
|
|
$infobox_info_color: #81a3e6 !default;
|
|
$infobox_critical_color: rgb(237, 129, 129) !default;
|
|
$infobox_warn_color: #fbfb8d !default;
|
|
$infobox_border: 2px solid black !default;
|
|
$infobox_padding: $BIG_PADDING $MEDIUM_BIG_PADDING !default;
|
|
.infobox {
|
|
border: $infobox_border;
|
|
background-color: $infobox_info_color;
|
|
padding: $infobox_padding;
|
|
|
|
&.critical {
|
|
background-color: $infobox_critical_color;
|
|
}
|
|
|
|
&.warn {
|
|
background-color: $infobox_warn_color;
|
|
}
|
|
}
|
|
|
|
.infobox > span {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
$infobox_icon_min_width: 60px !default;
|
|
$infobox_icon_padding_right: $MEDIUM_BIG_PADDING !default;
|
|
.infobox-icon-container {
|
|
min-width: $infobox_icon_min_width;
|
|
padding-right: $infobox_icon_padding_right;
|
|
}
|
|
|
|
$thread_locked_icon_size: 96px !default;
|
|
$thread_column_gap: $ZERO_PADDING !default;
|
|
.thread {
|
|
display: grid;
|
|
grid-template-columns: $thread_locked_icon_size 1.6fr $thread_locked_icon_size;
|
|
grid-template-rows: 1fr;
|
|
gap: $thread_column_gap;
|
|
grid-auto-flow: row;
|
|
min-height: $thread_locked_icon_size;
|
|
grid-template-areas:
|
|
"thread-sticky-container thread-info-container thread-locked-container";
|
|
}
|
|
|
|
$thread_locked_border: 2px outset $LIGHT !default;
|
|
.thread-sticky-container {
|
|
grid-area: thread-sticky-container;
|
|
border: $thread_locked_border;
|
|
}
|
|
|
|
.thread-locked-container {
|
|
grid-area: thread-locked-container;
|
|
border: $thread_locked_border;
|
|
}
|
|
|
|
.contain-svg {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
&:not(.full) > svg, &:not(.full) > img {
|
|
height: 50%;
|
|
width: 50%;
|
|
}
|
|
&.full > svg, &.full > img {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
$post_img_container_gap: $SMALL_PADDING !default;
|
|
.post-img-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: $post_img_container_gap;
|
|
}
|
|
|
|
.post-image {
|
|
object-fit: contain;
|
|
max-width: 400px;
|
|
max-height: 400px;
|
|
min-width: 200px;
|
|
min-height: 200px;
|
|
flex: 1 1 0%;
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
$thread_info_background_color: $ACCENT_COLOR !default;
|
|
$thread_info_padding: $SMALL_PADDING $BIG_PADDING !default;
|
|
$thread_info_border: $DEFAULT_BORDER !default;
|
|
$thread_info_max_height: 110px !default;
|
|
$thread_info_mask_image: $user_page_post_preview_mask_image !default;
|
|
.thread-info-container {
|
|
grid-area: thread-info-container;
|
|
background-color: $thread_info_background_color;
|
|
padding: $thread_info_padding;
|
|
border-top: $thread_info_border;
|
|
border-bottom: $thread_info_border;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
max-height: $thread_info_max_height;
|
|
mask-image: $thread_info_mask_image;
|
|
}
|
|
|
|
$thread_info_post_preview_margin_right: $post_inner_padding_right !default;
|
|
.thread-info-post-preview {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: inline;
|
|
margin-right: $thread_info_post_preview_margin_right;
|
|
}
|
|
|
|
$babycode_guide_section_background: $ACCENT_COLOR !default;
|
|
$babycode_guide_section_padding: $SMALL_PADDING $BIG_PADDING !default;
|
|
$babycode_guide_section_border: $DEFAULT_BORDER !default;
|
|
$babycode_guide_section_padding_right: $post_inner_padding_right !default;
|
|
.babycode-guide-section {
|
|
background-color: $babycode_guide_section_background;
|
|
padding: $babycode_guide_section_padding;
|
|
border: $babycode_guide_section_border;
|
|
padding-right: $babycode_guide_section_padding_right;
|
|
}
|
|
|
|
$babycode_guide_toc_width: 300px !default;
|
|
$babycode_guide_column_guide: $ZERO_PADDING !default;
|
|
.babycode-guide-container {
|
|
display: grid;
|
|
grid-template-columns: 1.5fr $babycode_guide_toc_width;
|
|
grid-template-rows: 1fr;
|
|
gap: $babycode_guide_column_guide;
|
|
grid-auto-flow: row;
|
|
grid-template-areas:
|
|
"guide-topics guide-toc";
|
|
}
|
|
|
|
.guide-topics {
|
|
grid-area: guide-topics;
|
|
overflow: hidden;
|
|
}
|
|
|
|
$babycode_guide_toc_padding: $MEDIUM_PADDING !default;
|
|
$babycode_guide_toc_background: $BUTTON_COLOR !default;
|
|
$babycode_guide_toc_border_radius: 8px !default;
|
|
$babycode_guide_toc_border: $DEFAULT_BORDER !default;
|
|
.guide-toc {
|
|
grid-area: guide-toc;
|
|
position: sticky;
|
|
top: 100px;
|
|
align-self: start;
|
|
padding: $babycode_guide_toc_padding;
|
|
border-bottom-right-radius: $babycode_guide_toc_border_radius;
|
|
background-color: $babycode_guide_toc_background;
|
|
border-right: $babycode_guide_toc_border;
|
|
border-top: $babycode_guide_toc_border;
|
|
border-bottom: $babycode_guide_toc_border;
|
|
}
|
|
|
|
.emoji-table tr td {
|
|
text-align: center;
|
|
}
|
|
|
|
.emoji-table tr th {
|
|
padding-left: 50px;
|
|
padding-right: 50px;
|
|
}
|
|
|
|
.emoji-table {
|
|
margin: auto;
|
|
}
|
|
|
|
$emoji_table_border: $DEFAULT_BORDER !default;
|
|
.emoji-table, th, td {
|
|
border: $emoji_table_border;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
$colorful_table_margin: $MEDIUM_PADDING $ZERO_PADDING !default;
|
|
.colorful-table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
margin: $colorful_table_margin;
|
|
overflow: hidden;
|
|
}
|
|
|
|
$colorful_table_th_color: $BUTTON_COLOR_2 !default;
|
|
$colorful_table_tr_padding: $SMALL_PADDING $ZERO_PADDING !default;
|
|
.colorful-table tr th {
|
|
background-color: $colorful_table_th_color;
|
|
padding: $colorful_table_tr_padding;
|
|
}
|
|
|
|
$colorful_table_td_color: $BUTTON_COLOR !default;
|
|
.colorful-table tr td {
|
|
background-color: $BUTTON_COLOR;
|
|
padding: $colorful_table_tr_padding;
|
|
text-align: center;
|
|
}
|
|
|
|
$colorful_table_small_tr_width: 250px !default;
|
|
.colorful-table .small {
|
|
width: $colorful_table_small_tr_width;
|
|
}
|
|
|
|
$topic_locked_icon_size: $thread_locked_icon_size !default;
|
|
$topic_column_gap: $ZERO_PADDING !default;
|
|
.topic {
|
|
display: grid;
|
|
grid-template-columns: 1.5fr $topic_locked_icon_size;
|
|
grid-template-rows: 1fr;
|
|
gap: $topic_column_gap;
|
|
grid-auto-flow: row;
|
|
grid-template-areas:
|
|
"topic-info-container topic-locked-container";
|
|
}
|
|
|
|
$topic_info_background: $ACCENT_COLOR !default;
|
|
$topic_info_padding: $SMALL_PADDING $BIG_PADDING !default;
|
|
$topic_info_border: $DEFAULT_BORDER !default;
|
|
.topic-info-container {
|
|
grid-area: topic-info-container;
|
|
background-color: $topic_info_background;
|
|
padding: $topic_info_padding;
|
|
border: $topic_info_border;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
$topic_locked_border: $thread_locked_border !default;
|
|
.topic-locked-container {
|
|
grid-area: topic-locked-container;
|
|
border: $topic_locked_border;
|
|
}
|
|
|
|
$draggable_topic_background: $ACCENT_COLOR !default;
|
|
$draggable_topic_dragged_color: $BUTTON_COLOR !default;
|
|
$draggable_topic_padding: $BIG_PADDING !default;
|
|
$draggable_topic_margin: $MEDIUM_BIG_PADDING 0 !default;
|
|
$draggable_topic_border: 5px outset !default;
|
|
$draggable_topic_border_top: $draggable_topic_border $LIGHT !default;
|
|
$draggable_topic_border_bottom: $draggable_topic_border $DARK_2 !default;
|
|
.draggable-topic {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
background-color: $draggable_topic_background;
|
|
padding: $draggable_topic_padding;
|
|
margin: $draggable_topic_margin;
|
|
border-top: $draggable_topic_border_top;
|
|
border-bottom: $draggable_topic_border_bottom;
|
|
|
|
&.dragged {
|
|
background-color: $draggable_topic_dragged_color;
|
|
}
|
|
}
|
|
|
|
$post_editing_header_color: $LIGHT !default;
|
|
.editing {
|
|
background-color: $post_editing_header_color;
|
|
}
|
|
|
|
$post_editing_context_margin: $BIG_PADDING $ZERO_PADDING !default;
|
|
.context-explain {
|
|
margin: $post_editing_context_margin;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.post-edit-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: baseline;
|
|
height: 100%;
|
|
}
|
|
|
|
.babycode-editor {
|
|
height: 150px;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.babycode-editor-container {
|
|
width: 100%;
|
|
}
|
|
|
|
.babycode-preview-errors-container {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
$tab_button_color: $BUTTON_COLOR !default;
|
|
$tab_button_active_color: $BUTTON_COLOR_2 !default;
|
|
$tab_button_font_color: $DEFAULT_FONT_COLOR !default;
|
|
.tab-button {
|
|
@include button($tab_button_color, $tab_button_font_color);
|
|
border-bottom: none;
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
margin-bottom: 0;
|
|
|
|
&.active {
|
|
background-color: $tab_button_active_color;
|
|
padding-top: 8px;
|
|
}
|
|
}
|
|
|
|
$tab_content_background: color.adjust($BUTTON_COLOR_2, $saturation: -20%) !default;
|
|
$tab_content_border: $DEFAULT_BORDER !default;
|
|
$tab_content_padding: $MEDIUM_PADDING !default;
|
|
$tab_content_border_radius: $DEFAULT_BORDER_RADIUS !default;
|
|
.tab-content {
|
|
display: none;
|
|
|
|
&.active {
|
|
min-height: 250px;
|
|
display: block;
|
|
background-color: $tab_content_background;
|
|
border: $tab_content_border;
|
|
padding: $tab_content_padding;
|
|
border-top-right-radius: $tab_content_border_radius;
|
|
border-bottom-right-radius: $tab_content_border_radius;
|
|
border-bottom-left-radius: $tab_content_border_radius;
|
|
}
|
|
}
|
|
|
|
$list_margin: $MEDIUM_PADDING $ZERO_PADDING $MEDIUM_PADDING $BIGGER_PADDING !default;
|
|
$list_padding: $ZERO_PADDING !default;
|
|
ul, ol {
|
|
margin: $list_margin;
|
|
padding: $list_padding;
|
|
}
|
|
|
|
.new-concept-notification.hidden {
|
|
display: none;
|
|
}
|
|
|
|
$new_notification_offset: 80px !default;
|
|
$new_notification_border: $DEFAULT_BORDER !default;
|
|
$new_notification_border_radius: $DEFAULT_BORDER_RADIUS !default;
|
|
$new_notification_background: $infobox_info_color !default;
|
|
$new_notification_padding: $BIG_PADDING $MEDIUM_BIG_PADDING !default;
|
|
.new-concept-notification {
|
|
position: fixed;
|
|
bottom: $new_notification_offset;
|
|
right: $new_notification_offset;
|
|
border: $new_notification_border;
|
|
background-color: $new_notification_background;
|
|
padding: $new_notification_padding;
|
|
border-radius: $new_notification_border_radius;
|
|
box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.emoji {
|
|
max-width: 15px; // these are not meant to be themed
|
|
max-height: 15px;
|
|
}
|
|
|
|
$accordion_border_radius: $DEFAULT_BORDER_RADIUS !default;
|
|
$accordion_border: $DEFAULT_BORDER !default;
|
|
$accordion_margin: $MEDIUM_PADDING $SMALL_PADDING !default;
|
|
.accordion {
|
|
border-top-right-radius: $accordion_border_radius;
|
|
border-top-left-radius: $accordion_border_radius;
|
|
box-sizing: border-box;
|
|
border: $accordion_border;
|
|
margin: $accordion_margin;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.accordion.hidden {
|
|
border-bottom: none;
|
|
}
|
|
|
|
$accordion_header_background: $ACCORDION_COLOR !default;
|
|
$accordion_header_padding: $ZERO_PADDING $MEDIUM_PADDING !default;
|
|
$accordion_header_column_gap: $MEDIUM_PADDING !default;
|
|
$accordion_header_border_bottom: $DEFAULT_BORDER !default;
|
|
.accordion-header {
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: $accordion_header_background;
|
|
padding: $accordion_header_padding;
|
|
gap: $accordion_header_column_gap;
|
|
border-bottom: $accordion_header_border_bottom;
|
|
}
|
|
|
|
$accordion_button_size: 36px !default;
|
|
.accordion-toggle {
|
|
padding: 0;
|
|
width: $accordion_button_size;
|
|
height: $accordion_button_size;
|
|
min-width: $accordion_button_size;
|
|
min-height: $accordion_button_size;
|
|
}
|
|
|
|
.accordion-title {
|
|
margin-right: auto;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
$accordion_content_padding: $ZERO_PADDING $MEDIUM_BIG_PADDING !default;
|
|
.accordion-content {
|
|
padding: $accordion_content_padding;
|
|
}
|
|
|
|
.accordion-content.hidden {
|
|
display: none;
|
|
}
|
|
|
|
$post_accordion_content_padding_top: $MEDIUM_PADDING !default;
|
|
$post_accordion_content_padding_bottom: $MEDIUM_PADDING !default;
|
|
$post_accordion_content_background: $MAIN_BG !default;
|
|
.post-accordion-content {
|
|
padding-top: $post_accordion_content_padding_top;
|
|
padding-bottom: $post_accordion_content_padding_bottom;
|
|
background-color: $MAIN_BG;
|
|
}
|
|
|
|
$inbox_padding: $MEDIUM_PADDING !default;
|
|
.inbox-container {
|
|
padding: $inbox_padding;
|
|
}
|
|
|
|
$babycode_button_container_column_gap: $SMALL_PADDING !default;
|
|
.babycode-button-container {
|
|
display: flex;
|
|
gap: $babycode_button_container_column_gap;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
$babycode_button_padding: $SMALL_PADDING $MEDIUM_PADDING !default;
|
|
$babycode_button_min_width: $accordion_button_size !default;
|
|
.babycode-button {
|
|
padding: $babycode_button_padding;
|
|
min-width: $babycode_button_min_width;
|
|
|
|
&> * {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
|
|
$quote_fragment_background_color: #00000080 !default;
|
|
$quote_fragment_border_radius: $DEFAULT_BORDER_RADIUS !default;
|
|
$quote_fragment_padding: $SMALL_PADDING $MEDIUM_PADDING !default;
|
|
.quote-popover {
|
|
position: absolute;
|
|
transform: translateX(-50%);
|
|
margin: 0;
|
|
border: none;
|
|
border-radius: $quote_fragment_border_radius;
|
|
background-color: $quote_fragment_background_color;
|
|
padding: $SMALL_PADDING $MEDIUM_PADDING;
|
|
}
|
|
|
|
$footer_border_top: $DEFAULT_BORDER !default;
|
|
footer {
|
|
border-top: $footer_border_top;
|
|
}
|
|
|
|
$reaction_button_active_color: $BUTTON_COLOR_2 !default;
|
|
$reaction_button_active_font_color: $DEFAULT_FONT_COLOR !default;
|
|
.reaction-button.active {
|
|
@include button($reaction_button_active_color, $reaction_button_active_font_color);
|
|
}
|
|
|
|
$reaction_popover_border_radius: $DEFAULT_BORDER_RADIUS !default;
|
|
$reaction_popover_background: $quote_fragment_background_color !default;
|
|
$reaction_popover_padding: $SMALL_PADDING $MEDIUM_PADDING !default;
|
|
.reaction-popover {
|
|
position: relative;
|
|
margin: 0;
|
|
border: none;
|
|
border-radius: $reaction_popover_border_radius;
|
|
background-color: $reaction_popover_background;
|
|
padding: $reaction_popover_padding;
|
|
width: 250px;
|
|
}
|
|
|
|
.reaction-popover-inner {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
overflow: scroll;
|
|
margin: auto;
|
|
justify-content: center;
|
|
}
|
|
|
|
$babycode_guide_list_border: 1px dashed !default;
|
|
.babycode-guide-list {
|
|
border-bottom: $babycode_guide_list_border;
|
|
}
|