diff --git a/app/templates/base.html b/app/templates/base.html index dbc1742..054d067 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -8,7 +8,7 @@ {% else %} {{config.SITE_NAME}} {% endif %} - + diff --git a/build-themes.sh b/build-themes.sh new file mode 100755 index 0000000..3c82631 --- /dev/null +++ b/build-themes.sh @@ -0,0 +1,13 @@ +#!/bin/bash +set -e + +sass_dir="sass" +css_dir="data/static/css" + +#build default first +sass --no-source-map "$sass_dir/_default.scss" "$css_dir/style.css" + +for file in "$sass_dir"/*.scss; do + [[ $(basename "$file") = _* ]] && continue + sass --no-source-map "$file" "$css_dir/theme-$(basename "$file" .scss).css" +done diff --git a/data/static/style.css b/data/static/css/style.css similarity index 94% rename from data/static/style.css rename to data/static/css/style.css index 46a983f..a590b70 100644 --- a/data/static/style.css +++ b/data/static/css/style.css @@ -28,12 +28,11 @@ } .reaction-button.active, .tab-button, .currentpage, .pagebutton, input[type=file]::file-selector-button, button.warn, input[type=submit].warn, .linkbutton.warn, button.critical, input[type=submit].critical, .linkbutton.critical, button, input[type=submit], .linkbutton { cursor: default; - color: black; font-size: 0.9em; font-family: "Cadman"; text-decoration: none; border: 1px solid black; - border-radius: 3px; + border-radius: 4px; padding: 5px 20px; margin: 10px 0; } @@ -42,6 +41,14 @@ body { font-family: "Cadman"; margin: 20px 100px; background-color: rgb(173.5214173228, 183.6737007874, 161.0262992126); + color: black; +} + +a:link { + color: #c11c1c; +} +a:visited { + color: #730c0c; } .big { @@ -50,6 +57,7 @@ body { #topnav { padding: 10px; + margin: 0; display: flex; justify-content: end; background-color: #c1ceb1; @@ -59,6 +67,7 @@ body { #bottomnav { padding: 10px; + margin: 0; display: flex; justify-content: end; background-color: rgb(143.7039271654, 144.3879625984, 142.8620374016); @@ -81,7 +90,7 @@ body { font-size: 3rem; margin: 0 20px; text-decoration: none; - color: black; + color: black !important; } .thread-title { @@ -120,7 +129,7 @@ body { display: grid; grid-template-columns: 1fr; grid-template-rows: min-content 1fr min-content; - gap: 0px 0px; + gap: 0; grid-auto-flow: row; grid-template-areas: "post-info" "post-content" "post-reactions"; grid-area: post-content-container; @@ -185,6 +194,30 @@ pre code { tab-size: 4; } +.copy-code-container { + position: sticky; + width: calc(100% - 4px); + display: flex; + justify-content: space-between; + align-items: last baseline; + font-family: "Cadman"; + border-top-right-radius: 8px; + border-top-left-radius: 8px; + background-color: #c1ceb1; + border-left: 2px solid black; + border-right: 2px solid black; + border-top: 2px solid black; +} +.copy-code-container::before { + content: "code block"; + font-style: italic; + margin-left: 10px; +} + +.copy-code { + margin-right: 10px; +} + .inline-code { background-color: rgb(38.5714173228, 40.9237007874, 35.6762992126); color: white; @@ -193,6 +226,7 @@ pre code { margin: 4px; border-radius: 4px; font-size: 1rem; + white-space: pre; } #delete-dialog, .lightbox-dialog { @@ -230,30 +264,6 @@ pre code { align-items: center; } -.copy-code-container { - position: sticky; - width: calc(100% - 4px); - display: flex; - justify-content: space-between; - align-items: last baseline; - font-family: "Cadman"; - border-top-right-radius: 8px; - border-top-left-radius: 8px; - background-color: #c1ceb1; - border-left: 2px solid black; - border-right: 2px solid black; - border-top: 2px solid black; -} -.copy-code-container::before { - content: "code block"; - font-style: italic; - margin-left: 10px; -} - -.copy-code { - margin-right: 10px; -} - blockquote { padding: 10px 20px; margin: 10px; @@ -290,9 +300,9 @@ blockquote { } .user-page-posts { - border-left: solid 1px black; - border-right: solid 1px black; - border-bottom: solid 1px black; + border-left: 1px solid black; + border-right: 1px solid black; + border-bottom: 1px solid black; background-color: #c1ceb1; } @@ -319,6 +329,7 @@ blockquote { button, input[type=submit], .linkbutton { display: inline-block; background-color: rgb(177, 206, 204.5); + color: black !important; } button:hover, input[type=submit]:hover, .linkbutton:hover { background-color: rgb(192.6, 215.8, 214.6); @@ -334,8 +345,8 @@ button.reduced, input[type=submit].reduced, .linkbutton.reduced { padding: 5px; } button.critical, input[type=submit].critical, .linkbutton.critical { - color: white; background-color: red; + color: white !important; } button.critical:hover, input[type=submit].critical:hover, .linkbutton.critical:hover { background-color: #ff3333; @@ -352,6 +363,7 @@ button.critical.reduced, input[type=submit].critical.reduced, .linkbutton.critic } button.warn, input[type=submit].warn, .linkbutton.warn { background-color: #fbfb8d; + color: black !important; } button.warn:hover, input[type=submit].warn:hover, .linkbutton.warn:hover { background-color: rgb(251.8, 251.8, 163.8); @@ -369,7 +381,8 @@ button.warn.reduced, input[type=submit].warn.reduced, .linkbutton.warn.reduced { input[type=file]::file-selector-button { background-color: rgb(177, 206, 204.5); - margin: 10px 10px; + color: black !important; + margin: 10px; } input[type=file]::file-selector-button:hover { background-color: rgb(192.6, 215.8, 214.6); @@ -391,6 +404,7 @@ p { .pagebutton { background-color: rgb(177, 206, 204.5); + color: black !important; padding: 5px 5px; margin: 0; display: inline-block; @@ -425,7 +439,7 @@ p { } .login-container > * { - width: 25%; + width: 40%; margin: auto; } @@ -443,7 +457,7 @@ p { input[type=text], input[type=password], textarea, select { border: 1px solid black; - border-radius: 3px; + border-radius: 4px; padding: 7px 10px; width: 100%; box-sizing: border-box; @@ -480,7 +494,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus display: grid; grid-template-columns: 96px 1.6fr 96px; grid-template-rows: 1fr; - gap: 0px 0px; + gap: 0; grid-auto-flow: row; min-height: 96px; grid-template-areas: "thread-sticky-container thread-info-container thread-locked-container"; @@ -519,8 +533,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus .post-image { object-fit: contain; - max-width: 300px; - max-height: 300px; + max-width: 400px; + max-height: 400px; min-width: 200px; min-height: 200px; flex: 1 1 0%; @@ -559,7 +573,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus display: grid; grid-template-columns: 1.5fr 300px; grid-template-rows: 1fr; - gap: 0px 0px; + gap: 0; grid-auto-flow: row; grid-template-areas: "guide-topics guide-toc"; } @@ -626,7 +640,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus display: grid; grid-template-columns: 1.5fr 96px; grid-template-rows: 1fr; - gap: 0px 0px; + gap: 0; grid-auto-flow: row; grid-template-areas: "topic-info-container topic-locked-container"; } @@ -650,9 +664,9 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus user-select: none; background-color: #c1ceb1; padding: 20px; - margin: 12px 0; - border-top: 6px outset rgb(217.26, 220.38, 213.42); - border-bottom: 6px outset rgb(135.1928346457, 145.0974015748, 123.0025984252); + margin: 15px 0; + border-top: 5px outset rgb(217.26, 220.38, 213.42); + border-bottom: 5px outset rgb(135.1928346457, 145.0974015748, 123.0025984252); } .draggable-topic.dragged { background-color: rgb(177, 206, 204.5); @@ -690,6 +704,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus .tab-button { background-color: rgb(177, 206, 204.5); + color: black !important; border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -722,9 +737,9 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus background-color: rgb(191.3137931034, 189.7, 193.3); border: 1px solid black; padding: 10px; - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; } ul, ol { @@ -740,7 +755,7 @@ ul, ol { position: fixed; bottom: 80px; right: 80px; - border: 2px solid black; + border: 1px solid black; background-color: #81a3e6; padding: 20px 15px; border-radius: 4px; @@ -753,8 +768,8 @@ ul, ol { } .accordion { - border-top-right-radius: 3px; - border-top-left-radius: 3px; + border-top-right-radius: 4px; + border-top-left-radius: 4px; box-sizing: border-box; border: 1px solid black; margin: 10px 5px; @@ -837,6 +852,7 @@ footer { .reaction-button.active { background-color: #beb1ce; + color: black !important; } .reaction-button.active:hover { background-color: rgb(203, 192.6, 215.8); @@ -857,7 +873,7 @@ footer { margin: 0; border: none; border-radius: 4px; - background-color: rgba(0, 0, 0, 0.6901960784); + background-color: rgba(0, 0, 0, 0.5019607843); padding: 5px 10px; width: 250px; } diff --git a/sass/_default.scss b/sass/_default.scss new file mode 100644 index 0000000..a4e283f --- /dev/null +++ b/sass/_default.scss @@ -0,0 +1,1080 @@ +@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 + + &: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; +} diff --git a/sass/style.scss b/sass/style.scss deleted file mode 100644 index 149af71..0000000 --- a/sass/style.scss +++ /dev/null @@ -1,858 +0,0 @@ -@use "sass:color"; - -@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; -} - -$accent_color: #c1ceb1; - -$dark_bg: color.scale($accent_color, $lightness: -25%, $saturation: -97%); -$dark2: color.scale($accent_color, $lightness: -30%, $saturation: -60%); -$verydark: color.scale($accent_color, $lightness: -80%, $saturation: -70%); - -$light: color.scale($accent_color, $lightness: 40%, $saturation: -60%); -$lighter: color.scale($accent_color, $lightness: 60%, $saturation: -60%); - -$main_bg: color.scale($accent_color, $lightness: -10%, $saturation: -40%); -$button_color: color.adjust($accent_color, $hue: 90); -$button_color2: color.adjust($accent_color, $hue: 180); -$accordion_color: color.adjust($accent_color, $hue: 140, $lightness: -10%, $saturation: -15%); - -%button-base { - cursor: default; - color: black; - font-size: 0.9em; - font-family: "Cadman"; - text-decoration: none; - border: 1px solid black; - border-radius: 3px; - padding: 5px 20px; - margin: 10px 0; -} - -@mixin button($color) { - @extend %button-base; - background-color: $color; - - &: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: 0; - padding: 5px; - } -} - -@mixin navbar($color) { - padding: 10px; - display: flex; - justify-content: end; - background-color: $color; -} - -body { - font-family: "Cadman"; - // font-size: 18px; - margin: 20px 100px; - background-color: $main_bg; -} - -.big { - font-size: 1.8rem; -} - -#topnav { - @include navbar($accent_color); - justify-content: space-between; - align-items: baseline; -} - -#bottomnav { - @include navbar($dark_bg); -} - -.darkbg { - padding-bottom: 10px; - padding-left: 10px; - padding-right: 10px; - background-color: $dark_bg; -} - -.user-actions { - display: flex; - column-gap: 15px; -} - -.site-title { - font-family: "site-title"; - font-size: 3rem; - margin: 0 20px; - text-decoration: none; - color: black; -} - -.thread-title { - margin: 0; - font-size: 1.5rem; - font-weight: bold; -} - -.post { - display: grid; - grid-template-columns: 200px 1fr; - grid-template-rows: 1fr; - gap: 0; - grid-auto-flow: row; - grid-template-areas: - "usercard post-content-container"; - border: 2px outset $dark2; -} - -.usercard { - grid-area: usercard; - padding: 20px 10px; - border: 4px outset $light; - background-color: $dark_bg; - border-right: solid 2px; -} - -.usercard-inner { - display: flex; - flex-direction: column; - align-items: center; - top: 10px; - position: sticky; -} - -.post-content-container { - display: grid; - grid-template-columns: 1fr; - grid-template-rows: min-content 1fr min-content; - gap: 0px 0px; - grid-auto-flow: row; - grid-template-areas: - "post-info" - "post-content" - "post-reactions"; - grid-area: post-content-container; - - min-height: 100%; -} - -.post-info { - grid-area: post-info; - display: flex; - min-height: 70px; - justify-content: space-between; - padding: 5px 20px; - align-items: center; - border-top: 1px solid black; - border-bottom: 1px solid black; -} - -.post-content { - grid-area: post-content; - padding: 20px 20px 0 20px; - display: flex; - flex-direction: column; - overflow: hidden; - background-color: $accent_color; - - // min-height: 0; -} - -.post-reactions { - grid-area: post-reactions; - min-height: 50px; - display: flex; - padding: 5px 20px; - align-items: center; - flex-wrap: wrap; - gap: 5px; - background-color: $main_bg; - border-top: 2px dotted gray; -} - -.post-inner { - height: 100%; - padding-right: 25%; - - &.wider { - padding-right: 12.5%; - } -} - -.signature-container { - border-top: 2px dotted gray; - padding: 10px 0; -} - -pre code { - display: block; - background-color: $verydark; - font-size: 1rem; - color: white; - border-bottom-right-radius: 8px; - border-bottom-left-radius: 8px; - border-left: 10px solid $lighter; - padding: 20px; - overflow: scroll; - tab-size: 4; -} - -.inline-code { - background-color: $verydark; - color: white; - padding: 5px 10px; - display: inline-block; - margin: 4px; - border-radius: 4px; - font-size: 1rem; -} - -#delete-dialog, .lightbox-dialog { - padding: 0; - border-radius: 4px; - border: 2px solid black; - box-shadow: 0 0 30px rgba(0, 0, 0, 0.25); -} - -.delete-dialog-inner { - display: flex; - flex-direction: column; - align-items: center; - padding: 20px; -} - -.lightbox-inner { - display: flex; - flex-direction: column; - padding: 20px; - min-width: 400px; - background-color: $accent_color; - gap: 10px; -} - -.lightbox-image { - max-width: 70vw; - max-height: 70vh; - object-fit: scale-down; -} - -.lightbox-nav { - display: flex; - justify-content: space-between; - align-items: center; -} - -.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: 8px; - border-top-left-radius: 8px; - background-color: $accent_color; - border-left: 2px solid black; - border-right: 2px solid black; - border-top: 2px solid black; - - &::before { - content: "code block"; - font-style: italic; - margin-left: 10px; - } -} - -.copy-code { - margin-right: 10px; -} - -blockquote { - padding: 10px 20px; - margin: 10px; - border-radius: 4px; - border-left: 10px solid $lighter; - // background-color: $dark2; - background-color: #00000026; -} - -.user-info { - display: grid; - grid-template-columns: 300px 1fr; - grid-template-rows: 1fr; - gap: 0; - grid-template-areas: - "user-page-usercard user-page-stats"; -} - -.user-page-usercard { - grid-area: user-page-usercard; - padding: 20px 10px; - border: 4px outset $light; - background-color: $dark_bg; - border-right: solid 2px; -} - -.user-page-stats { - grid-area: user-page-stats; - padding: 20px 30px; - border: 1px solid black; -} - -.user-stats-list { - list-style: none; - margin: 0 0 10px 0; -} - -.user-page-posts { - border-left: solid 1px black; - border-right: solid 1px black; - border-bottom: solid 1px black; - background-color: $accent_color; -} - -.user-page-post-preview { - max-height: 200px; - mask-image: linear-gradient(180deg,#000 60%,transparent); -} - -.avatar { - width: 90%; - height: 90%; - object-fit: contain; - margin-bottom: 10px; -} - -.username-link { - overflow-wrap: anywhere; -} - -.user-status { - text-align: center; -} - -button, input[type="submit"], .linkbutton { - display: inline-block; - @include button($button_color); - - &.critical { - color: white; - @include button(red); - } - - &.warn { - @include button(#fbfb8d); - } -} - -// 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); - margin: 10px 10px; -} - -p { - margin: 15px 0; -} - -.pagebutton { - @include button($button_color); - padding: 5px 5px; - margin: 0; - display: inline-block; - min-width: 20px; - text-align: center; -} - -.currentpage { - @extend %button-base; - border: none; - padding: 5px 5px; - margin: 0; - display: inline-block; - min-width: 20px; - text-align: center; -} - -.modform { - display: inline; -} - -.login-container > * { - width: 25%; - margin: auto; -} - -.settings-container > * { - width: 40%; - margin: auto; -} - -.avatar-form { - display: flex; - flex-direction: column; - align-items: center; - padding: 20px 0; -} - -input[type="text"], input[type="password"], textarea, select { - border: 1px solid black; - border-radius: 3px; - padding: 7px 10px; - width: 100%; - box-sizing: border-box; - resize: vertical; - background-color: color.scale($accent_color, $lightness: 40%); - - &:focus { - background-color: color.scale($accent_color, $lightness: 60%); - } -} - -.infobox { - border: 2px solid black; - background-color: #81a3e6; - padding: 20px 15px; - - &.critical { - background-color: rgb(237, 129, 129); - } - - &.warn { - background-color: #fbfb8d; - } -} - -.infobox > span { - display: flex; - align-items: center; -} - -.infobox-icon-container { - min-width: 60px; - padding-right: 15px; -} - -.thread { - display: grid; - grid-template-columns: 96px 1.6fr 96px; - grid-template-rows: 1fr; - gap: 0px 0px; - grid-auto-flow: row; - min-height: 96px; - grid-template-areas: - "thread-sticky-container thread-info-container thread-locked-container"; -} - -.thread-sticky-container { - grid-area: thread-sticky-container; - border: 2px outset $light; -} - -.thread-locked-container { - grid-area: thread-locked-container; - border: 2px outset $light; -} - -.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 { - display: flex; - flex-wrap: wrap; - gap: 5px; -} - -.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-container { - grid-area: thread-info-container; - background-color: $accent_color; - padding: 5px 20px; - border-top: 1px solid black; - border-bottom: 1px solid black; - display: flex; - flex-direction: column; - overflow: hidden; - max-height: 110px; - mask-image: linear-gradient(180deg,#000 60%,transparent); -} - -.thread-info-post-preview { - overflow: hidden; - text-overflow: ellipsis; - display: inline; - margin-right: 25%; -} - -.babycode-guide-section { - background-color: $accent_color; - padding: 5px 20px; - border: 1px solid black; - padding-right: 25%; -} - -.babycode-guide-container { - display: grid; - grid-template-columns: 1.5fr 300px; - grid-template-rows: 1fr; - gap: 0px 0px; - grid-auto-flow: row; - grid-template-areas: - "guide-topics guide-toc"; -} - -.guide-topics { - grid-area: guide-topics; - overflow: hidden; -} - -.guide-toc { - grid-area: guide-toc; - position: sticky; - top: 100px; - align-self: start; - padding: 10px; - // border-top-right-radius: 16px; - border-bottom-right-radius: 8px; - background-color: $button_color; - border-right: 1px solid black; - border-top: 1px solid black; - border-bottom: 1px solid black; -} - -.emoji-table tr td { - text-align: center; -} - -.emoji-table tr th { - padding-left: 50px; - padding-right: 50px; -} - -.emoji-table { - margin: auto; -} - -.emoji-table, th, td { - border: 1px solid black; - border-collapse: collapse; -} - -.colorful-table { - border-collapse: collapse; - width: 100%; - margin: 10px 0; - overflow: hidden; -} - -.colorful-table tr th { - background-color: $button_color2; - padding: 5px 0; -} - -.colorful-table tr td { - background-color: $button_color; - padding: 5px 0; - text-align: center; -} - -.colorful-table .small { - width: 250px; -} - -.topic { - display: grid; - grid-template-columns: 1.5fr 96px; - grid-template-rows: 1fr; - gap: 0px 0px; - grid-auto-flow: row; - grid-template-areas: - "topic-info-container topic-locked-container"; -} - -.topic-info-container { - grid-area: topic-info-container; - background-color: $accent_color; - padding: 5px 20px; - border: 1px solid black; - display: flex; - flex-direction: column; -} - -.topic-locked-container { - grid-area: topic-locked-container; - border: 2px outset $light; -} - - -.draggable-topic { - cursor: pointer; - user-select: none; - background-color: $accent_color; - padding: 20px; - margin: 12px 0; - border-top: 6px outset $light; - border-bottom: 6px outset $dark2; - - &.dragged { - background-color: $button_color; - } -} - -.editing { - background-color: $light; -} - -.context-explain { - margin: 20px 0; - 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 { - @include button($button_color); - border-bottom: none; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - margin-bottom: 0; - - &.active { - background-color: $button_color2; - padding-top: 8px; - } -} - -.tab-content { - display: none; - - &.active { - min-height: 250px; - display: block; - background-color: color.adjust($button_color2, $saturation: -20%); - border: 1px solid black; - padding: 10px; - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } -} - -ul, ol { - margin: 10px 0 10px 30px; - padding: 0; -} - -.new-concept-notification.hidden { - display: none; -} - -.new-concept-notification { - position: fixed; - bottom: 80px; - right: 80px; - border: 2px solid black; - background-color: #81a3e6; - padding: 20px 15px; - border-radius: 4px; - box-shadow: 0 0 30px rgba(0, 0, 0, 0.25); -} - -.emoji { - max-width: 15px; - max-height: 15px; -} - -.accordion { - border-top-right-radius: 3px; - border-top-left-radius: 3px; - box-sizing: border-box; - border: 1px solid black; - margin: 10px 5px; - overflow: hidden; -} - -.accordion.hidden { - border-bottom: none; -} - -.accordion-header { - display: flex; - align-items: center; - background-color: $accordion_color; - padding: 0 10px; - gap: 10px; - border-bottom: 1px solid black; -} - -.accordion-toggle { - padding: 0; - width: 36px; - height: 36px; - min-width: 36px; - min-height: 36px; -} - -.accordion-title { - margin-right: auto; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.accordion-content { - padding: 0 15px; -} - -.accordion-content.hidden { - display: none; -} - -.post-accordion-content { - padding-top: 10px; - padding-bottom: 10px; - background-color: $main_bg; -} - -.inbox-container { - padding: 10px; -} - -.babycode-button-container { - display: flex; - gap: 5px; - flex-wrap: wrap; -} - -.babycode-button { - padding: 5px 10px; - min-width: 36px; - - &> * { - font-size: 1rem; - } -} - -.quote-popover { - position: absolute; - transform: translateX(-50%); - margin: 0; - border: none; - border-radius: 4px; - background-color: #00000080; - padding: 5px 10px; -} - -footer { - border-top: 1px solid black; -} - -.reaction-button.active { - @include button($button_color2); -} - -.reaction-popover { - position: relative; - margin: 0; - border: none; - border-radius: 4px; - background-color: #000000b0; - padding: 5px 10px; - width: 250px; -} - -.reaction-popover-inner { - display: flex; - flex-wrap: wrap; - overflow: scroll; - margin: auto; - justify-content: center; -} - -.babycode-guide-list { - border-bottom: 1px dashed; -}