/* This file contains SCSS used for creating the general structure of pages. Selectors should be things like body, h1, nav, etc which are used site-wide */ .red { color: red; } .orangered { color: orangered; } .pl-0 { padding-left: 0 !important; } .pl-1 { padding-left: 5px !important; } .pl-2 { padding-left: 10px !important; } .pl-3 { padding-left: 15px !important; } .pl-4 { padding-left: 20px !important; } /* for more info about the feather font used for icons see https://at-ui.github.io/feather-font/ */ /* use https://fontdrop.info/ to get the unicode values of the featuer.ttf file */ @font-face { font-family: "Feather"; src: url("/static/fonts/feather/feather.ttf?cb") format("truetype"), url("/static/fonts/feather/feather.woff?cb") format("woff"), url("/static/fonts/feather/feather.svg?cb#Feather") format("svg"); font-weight: normal; font-style: normal; } .fe { font-family: "Feather" !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .dropdown-item .fe { padding-right: 5px; } .fe-subscription::before { content: "\e9b9"; } .fe-logout::before { content: "\e988"; } .fe-fb::before { content: "\e95e"; } .fe-close::before { content: "\ea03"; } .fe-external::before { content: "\e95b"; } .fe-circle::before { content: "\e937"; } .fe-home::before { content: "\e979"; } .fe-popular::before { content: "\e9e6"; } .fe-all::before { content: "\e986"; } .fe-activity::before { content: "\e900"; } .fe-copy::before { content: "\e944"; } .fe-edit::before { content: "\e958"; } .fe-plus::before { content: "\e9b1"; } .fe-wind::before { content: "\ea01"; } .fe-refresh-cw::before { content: "\e9b9"; } .fe-x-circle::before { content: "\ea03"; } .fe-printer::before { content: "\e9b6"; } .fe-search::before { content: "\e9c1"; } .fe-check::before { content: "\e92b"; } .fe-user::before { content: "\e9f1"; } .fe-heart::before { content: "\e977"; } .fe-message-circle::before { content: "\e990"; } .fe-settings::before { content: "\e9c4"; } .fe-calendar::before { content: "\e927"; } .fe-facebook::before { content: "\e95e"; } .fe-share::before { content: "\e9c2"; } .fe-chevron-up::before { content: "\e931"; } .fe-chevron-down::before { content: "\e92e"; } .fe-feather::before { content: "\e960"; } .fe-mobile::before { content: "\e9d2"; } .fe-loader::before { content: "\e986"; } .fe-sun::before { content: "\e9d7"; } .fe-warning::before { content: "\e904"; } .fe-arrow-up::before { content: "\e914"; } .fe-arrow-down::before { content: "\e90c"; } .fe-reply { position: relative; top: 1px; } .fe-reply::before { content: "\e990"; } .fe-report::before { content: "\e967"; } .fe-angles-down::before { content: "\e932"; } .fe-angles-up::before { content: "\e935"; } .fe-options::before { content: "\e99b"; } .fe-edit::before { content: "\e95a"; } .fe-delete::before { content: "\ea03"; } .fe-mea-culpa::before { content: "\e997"; } .fe-block::before { content: "\ea04"; } .fe-report::before { content: "\e967"; } .fe-bell, .fe-no-bell { position: relative; top: 1px; } .fe-bell::before { content: "\e91e"; } .fe-no-bell::before { content: "\e91f"; } .fe-sun::before { content: "\e9d7"; } .fe-moon::before { content: "\e99a"; } .fe-collapse::before { content: "\e995"; } .fe-expand::before { content: "\e98e"; } h1 .fe-bell, h1 .fe-no-bell { font-size: 18px; top: -5px; left: 17px; } .fe-magnify { position: relative; top: 1px; } .fe-magnify::before { content: "\ea08"; } .imageVisible .fe-magnify::before { content: "\ea09"; } .fe-rss::before { content: "\e9be"; } .fe-image { position: relative; top: 2px; } .fe-image:before { content: "\e97a"; } .fe-new-account { position: relative; top: 1px; } .fe-new-account:before { content: "\e986"; } .fe-video { position: relative; top: 2px; left: 1px; } .fe-video:before { content: "\ea05"; } .fe-poll { position: relative; top: 2px; left: 1px; } .fe-poll:before { content: "\e91b"; /* possibly e985 */ } a.no-underline { text-decoration: none; } a.no-underline:hover { text-decoration: none; } .small, small { font-size: 87%; } fieldset legend { font-size: inherit; } .form-check-input { margin-top: 0; } .form-group { display: block; } .form-group .text-nowrap input[type=number], .form-group .form-check-inline input[type=number], .form-group .fix-radio-align input[type=number] { vertical-align: inherit; } .form-control-label { display: block; margin-bottom: 0.375rem; font-weight: 600; } .form-control { display: block; width: 100%; padding: 0.375rem 0.75rem; font-size: 0.9375rem; line-height: 1.6; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0, 40, 100, 0.12); border-radius: 3px; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .form-control:focus { color: #495057; background-color: #fff; border-color: #1991eb; outline: 0; box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25); } .btn-secondary { color: #fff; background-color: #007bff; border-color: #007bff; } .btn-secondary:hover { color: #fff; background-color: #0069d9; border-color: #0062cc; } .table-striped tbody tr .current_sort, .table-striped thead th.current_sort { background-color: #f0f0f2; } .table-striped tbody tr:nth-of-type(2n+1) .current_sort { background-color: #d8e5ee; } .container { width: 100%; padding-right: 0.75rem; padding-left: 0.75rem; margin-right: auto; margin-left: auto; max-width: inherit; } @media (min-width: 992px) { .container { max-width: 960px; } } @media (min-width: 1280px) { .container { max-width: 1200px; } } @media (min-width: 1600px) { .container { max-width: 1550px; } } @media (min-width: 2000px) { .container { max-width: 1880px; } } .low_bandwidth .dropdown-toggle::after { display: none; } .skip-link { position: absolute; top: -40px; /* Adjust as needed to hide the link off-screen */ left: 0; background-color: #fff; /* Background color to cover the link for screen readers */ z-index: 999; /* Ensure it's above other content */ } .skip-link:focus { top: 0; /* Bring the link back into view when it receives focus */ } .form-group { margin-bottom: 1.1rem; } .card { max-width: 350px; margin-left: auto; margin-right: auto; } .card .card-body > p > img, .card .card-body > p > a > img { max-width: 100%; } #breadcrumb_nav { font-size: 87%; } @media (min-width: 992px) { #breadcrumb_nav { display: block; font-size: 87%; } #breadcrumb_nav .breadcrumb { padding: 0; margin-bottom: 0; background-color: inherit; } #breadcrumb_nav .breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: ">"; } } .communities_table tbody tr th { padding: 0; } .communities_table tbody tr th a { padding-top: 10px; padding-bottom: 10px; width: 100%; display: inline-block; } .community_header { background-repeat: no-repeat; background-position: center center; background-size: cover; border-radius: 5px 5px 0 0; /* top-left | top-right | bottom-right | bottom-left */ height: 176px; margin-left: -12px; margin-right: -12px; margin-top: -9px; } @media (min-width: 992px) { .community_header { height: 240px; } } @media (min-width: 992px) { .community_header #breadcrumb_nav { padding-left: 13px; padding-top: 13px; } } .community_header #breadcrumb_nav .breadcrumb { background-color: rgba(0, 0, 0, 0.2); display: inline-block; padding: 5px 10px; margin-bottom: 0; } @media (min-width: 992px) { .community_header #breadcrumb_nav .breadcrumb { border-radius: 6px; } } .community_header #breadcrumb_nav .breadcrumb .breadcrumb-item { color: white; display: inline-block; } .community_header #breadcrumb_nav .breadcrumb .breadcrumb-item a { color: white; } .community_header #breadcrumb_nav .breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: ">"; color: white; } .community_header_no_background .community_icon, .community_header .community_icon { width: 120px; height: auto; } #choose_topics_card label.form-control-label { display: none; } #choose_topics_card .form-group { margin-bottom: 0; } #choose_topics_card ul.form-control { border: none; list-style-type: none; padding-top: 0; margin-bottom: 0; } #choose_topics_card ul.form-control li { vertical-align: center; } #choose_topics_card ul.form-control li label { height: 44px; } .form-check .form-check-input { position: relative; top: 4px; } .post_reply_form label { display: none; } .post_reply_form .form-check { position: absolute; bottom: -14px; left: 122px; } .post_reply_form .form-check label { display: inherit; } .add_reply .form-control-label { display: none; } .add_reply .form-check { position: absolute; bottom: -14px; left: 122px; } .post_list .post_teaser { border-bottom: solid 2px #ddd; padding-top: 8px; padding-bottom: 8px; } .post_list .post_teaser h3 { font-size: 110%; margin-top: 4px; margin-bottom: 0; } .post_list .post_teaser .meta_row a, .post_list .post_teaser .main_row a, .post_list .post_teaser .utilities_row a { text-decoration: none; } .post_list .post_teaser .thumbnail { float: right; padding-left: 0; padding-right: 0; position: relative; } .post_list .post_teaser .thumbnail .fe { display: block; position: absolute; right: 0; background-color: rgba(255, 255, 255, 0.7); padding-bottom: 1px; padding-left: 1px; border-radius: 2px; top: 0; } .post_list .post_teaser .thumbnail img { height: 60px; width: 60px; border-radius: 5px; object-fit: cover; margin-left: 5px; } @media (min-width: 992px) { .post_list .post_teaser .thumbnail img { height: 70px; width: 133px; } } .post_list .post_teaser .thumbnail.lbw .fe { background: none; } .post_list .post_teaser .thumbnail.lbw .fe::before { font-size: 28px; padding-right: 7px; } .post_list .post_teaser.blocked { opacity: 0.2; font-size: 80%; } .post_list .post_teaser.blocked .voting_buttons { width: 46px; line-height: 24px; } .post_list .post_teaser.blocked .voting_buttons .upvote_button, .post_list .post_teaser.blocked .voting_buttons .downvote_button { font-size: 80%; } .post_list_masonry, .post_list_masonry_wide { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 5px; -moz-column-gap: 5px; column-gap: 5px; clear: both; } @media (min-width: 992px) { .post_list_masonry, .post_list_masonry_wide { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 5px; -moz-column-gap: 5px; column-gap: 5px; } } .post_list_masonry .post_teaser, .post_list_masonry_wide .post_teaser { margin-bottom: 5px; position: relative; } .post_list_masonry .post_teaser img, .post_list_masonry_wide .post_teaser img { width: 100%; height: auto; } .post_list_masonry .post_teaser .masonry_thumb a, .post_list_masonry_wide .post_teaser .masonry_thumb a { border: none; } .post_list_masonry .post_teaser .masonry_info, .post_list_masonry_wide .post_teaser .masonry_info { position: absolute; bottom: 0; background-color: rgba(0, 0, 0, 0.3); width: 100%; text-align: center; } .post_list_masonry .post_teaser .masonry_info .voting_buttons_masonry, .post_list_masonry_wide .post_teaser .masonry_info .voting_buttons_masonry { width: 100%; display: flex; } .post_list_masonry .post_teaser .masonry_info p, .post_list_masonry_wide .post_teaser .masonry_info p { margin-bottom: 0; } .post_list_masonry .post_teaser .masonry_info p a, .post_list_masonry_wide .post_teaser .masonry_info p a { color: white; text-decoration: none; line-height: 40px; } @media (min-width: 1280px) { .post_list_masonry .post_teaser .masonry_info p a, .post_list_masonry_wide .post_teaser .masonry_info p a { line-height: 30px; } } .post_list_masonry .post_teaser .masonry_info .row, .post_list_masonry_wide .post_teaser .masonry_info .row { margin-left: 0; margin-right: 0; } .post_list_masonry .post_teaser .masonry_info .row .col, .post_list_masonry_wide .post_teaser .masonry_info .row .col { padding: 0; flex-direction: row; display: inline-flex; } .post_list_masonry .post_teaser .masonry_info .row .col a, .post_list_masonry_wide .post_teaser .masonry_info .row .col a { color: white; padding-top: 6px; } @media (min-width: 1280px) { .post_list_masonry .post_teaser .masonry_info .row .col a, .post_list_masonry_wide .post_teaser .masonry_info .row .col a { padding-top: 0; } } .post_list_masonry .post_teaser .masonry_info .row .col .upvote_button, .post_list_masonry .post_teaser .masonry_info .row .col .downvote_button, .post_list_masonry_wide .post_teaser .masonry_info .row .col .upvote_button, .post_list_masonry_wide .post_teaser .masonry_info .row .col .downvote_button { display: inline; color: white; padding-top: 10px; width: 50%; position: relative; } @media (min-width: 1280px) { .post_list_masonry .post_teaser .masonry_info .row .col .upvote_button, .post_list_masonry .post_teaser .masonry_info .row .col .downvote_button, .post_list_masonry_wide .post_teaser .masonry_info .row .col .upvote_button, .post_list_masonry_wide .post_teaser .masonry_info .row .col .downvote_button { padding-top: 5px; } } .post_list_masonry .post_teaser .masonry_info .row .col .upvote_button .htmx-indicator, .post_list_masonry .post_teaser .masonry_info .row .col .downvote_button .htmx-indicator, .post_list_masonry_wide .post_teaser .masonry_info .row .col .upvote_button .htmx-indicator, .post_list_masonry_wide .post_teaser .masonry_info .row .col .downvote_button .htmx-indicator { position: absolute; width: 20px; height: 20px; left: 7px; } .post_list_masonry .post_teaser .masonry_info .row .col .upvote_button.voted_up, .post_list_masonry .post_teaser .masonry_info .row .col .downvote_button.voted_up, .post_list_masonry_wide .post_teaser .masonry_info .row .col .upvote_button.voted_up, .post_list_masonry_wide .post_teaser .masonry_info .row .col .downvote_button.voted_up { color: #00b550; } .post_list_masonry .post_teaser .masonry_info .row .col .upvote_button.voted_down, .post_list_masonry .post_teaser .masonry_info .row .col .downvote_button.voted_down, .post_list_masonry_wide .post_teaser .masonry_info .row .col .upvote_button.voted_down, .post_list_masonry_wide .post_teaser .masonry_info .row .col .downvote_button.voted_down { color: red; } .post_list_masonry .post_teaser .masonry_info .row .col-8, .post_list_masonry_wide .post_teaser .masonry_info .row .col-8 { justify-content: center; } .post_list_masonry .post_teaser .masonry_info .row .col-8 p, .post_list_masonry_wide .post_teaser .masonry_info .row .col-8 p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .post_list_masonry .post_teaser .masonry_info .row .reply_col, .post_list_masonry_wide .post_teaser .masonry_info .row .reply_col { justify-content: right; padding-right: 5px; } .post_list_masonry .post_teaser .masonry_info_no_image, .post_list_masonry_wide .post_teaser .masonry_info_no_image { background-color: rgba(0, 0, 0, 0.2); width: 100%; text-align: center; } .post_list_masonry .post_teaser .masonry_info_no_image p, .post_list_masonry_wide .post_teaser .masonry_info_no_image p { margin-bottom: 0; } .post_list_masonry .post_teaser .masonry_info_no_image p a, .post_list_masonry_wide .post_teaser .masonry_info_no_image p a { color: var(--bs-body-color); text-decoration: none; } @media (min-width: 992px) { .post_list_masonry_wide { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; -webkit-column-gap: 5px; -moz-column-gap: 5px; column-gap: 5px; } } @media (min-width: 992px) { .layout_switcher { float: right; } } .url_thumbnail { float: right; margin-top: -6px; } .post_image img { max-width: 100%; } .render_username { display: inline; } .render_username a img { width: 20px; height: 20px; border-radius: 50%; vertical-align: bottom; } .comments > .comment { margin-left: 0; border-top: solid 1px #bbb; margin-right: 8px; } .comments > .comment:first-child { border-top: none; padding-top: 0; } [data-bs-theme=dark] .post_list .post_teaser { border-bottom: solid 1px #424549; } [data-bs-theme=dark] .post_list .post_teaser .thumbnail .fe { background-color: rgba(0, 0, 0, 0.4); } [data-bs-theme=dark] .comments > .comment { border-top-color: #424549; } [data-bs-theme=dark] .downarea-textarea .form-control { background-color: #424549; color: whitesmoke; } [data-bs-theme=dark] .comment .replies { border-left-color: #424549; border-top-color: #424549; } .post_body img { max-height: 40vh; max-width: 100%; height: auto; } .comment_body img { max-height: 40vh; max-width: 100%; height: auto; } #replies { scroll-margin-top: 5em; } .post_replies > .col { padding-right: 5px; } .post_type_image .post_image img { max-width: 100%; height: auto; } .voting_buttons_new { display: inline-block; } .voting_buttons_new .upvote_button, .voting_buttons_new .downvote_button { display: inline-block; padding: 5px 15px; position: relative; cursor: pointer; color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)); } .voting_buttons_new .upvote_button.digits_4, .voting_buttons_new .downvote_button.digits_4 { width: 68px; } .voting_buttons_new .upvote_button.digits_5, .voting_buttons_new .downvote_button.digits_5 { width: 76px; } .voting_buttons_new .upvote_button.digits_6, .voting_buttons_new .downvote_button.digits_6 { width: 84px; } .voting_buttons_new .upvote_button.voted_up, .voting_buttons_new .downvote_button.voted_up { color: green; font-weight: bold; } .voting_buttons_new .upvote_button.voted_down, .voting_buttons_new .downvote_button.voted_down { color: darkred; font-weight: bold; } .voting_buttons_new .upvote_button { top: 1px; } @media (min-width: 1280px) { .voting_buttons_new .upvote_button { padding-right: 5px; } } .voting_buttons_new .upvote_button .htmx-indicator { left: 13px; top: 7px; } .voting_buttons_new .downvote_button { top: 1px; } .voting_buttons_new .downvote_button .htmx-indicator { left: 12px; } @media (min-width: 1280px) { .voting_buttons_new .downvote_button { padding-left: 5px; } .voting_buttons_new .downvote_button .htmx-indicator { left: 2px; } } .voting_buttons_new .htmx-indicator { position: absolute; left: 3px; width: 20px; height: 20px; top: 0; } .voting_buttons_new .htmx-request .htmx-indicator { display: inline; position: absolute; width: 20px; height: 20px; right: 14px; top: 5px; opacity: 1 !important; } .voting_buttons_new .htmx-request.htmx-indicator { display: inline; } .voting_buttons { float: right; display: block; width: 55px; padding: 0 0 5px 5px; line-height: 30px; font-size: 14px; } @media (min-width: 1280px) { .voting_buttons { line-height: 25px; } } .voting_buttons div { border: solid 1px #0071CE; } .voting_buttons .upvote_button, .voting_buttons .downvote_button { position: relative; padding-left: 3px; border-radius: 3px; cursor: pointer; } .voting_buttons .upvote_button.digits_4, .voting_buttons .downvote_button.digits_4 { width: 68px; } .voting_buttons .upvote_button.digits_5, .voting_buttons .downvote_button.digits_5 { width: 76px; } .voting_buttons .upvote_button.digits_6, .voting_buttons .downvote_button.digits_6 { width: 84px; } .voting_buttons .upvote_button.voted_up, .voting_buttons .downvote_button.voted_up { color: green; font-weight: bold; } .voting_buttons .upvote_button.voted_down, .voting_buttons .downvote_button.voted_down { color: darkred; font-weight: bold; } .voting_buttons .downvote_button { margin-top: 5px; } .voting_buttons .htmx-indicator { position: absolute; width: 20px; height: 20px; } .voting_buttons .htmx-request .htmx-indicator { display: inline; position: absolute; width: 20px; height: 20px; right: 14px; top: 5px; opacity: 1 !important; } .voting_buttons .htmx-request.htmx-indicator { display: inline; } .voting_buttons a { text-decoration: none; } .comment { clear: both; margin-bottom: 20px; margin-left: 15px; padding-top: 8px; } .comment .limit_height { position: relative; } .comment .limit_height.expanded { max-height: none; } .comment .limit_height.expanded .show-more { display: none; } .comment .show-more { text-decoration: none; display: block; text-align: center; background-color: #777; color: white; margin-bottom: 15px; height: 30px; } .comment .show-more .fe-angles-down, .comment .show-more .fe-angles-up { margin-top: 7px; display: inline-block; } @media (min-width: 1280px) { .comment .show-more { height: 23px; } .comment .show-more .fe-angles-down, .comment .show-more .fe-angles-up { display: inline; } } .comment .comment_author img { width: 25px; height: 25px; border-radius: 50%; vertical-align: middle; } .comment .comment_author a.unhide { display: none; text-decoration: none; padding: 5px 15px; position: relative; top: 3px; } .comment .comment_actions { margin-top: -10px; position: relative; } .comment .comment_actions a { text-decoration: none; padding: 5px 0; } .comment .comment_actions .hide_button { display: inline-block; } .comment .comment_actions .hide_button a { padding: 5px 15px; } .comment .comment_actions .notif_toggle { text-decoration: none; font-size: 87%; padding: 5px 15px; } .comment .replies { margin-top: 15px; border-left: solid 1px #ddd; border-top: solid 1px #ddd; } #add_local_community_form #url { width: 297px; display: inline-block; padding-left: 3px; } #reasons { border: none; list-style-type: none; padding: 0; overflow-y: auto; height: 230px; } .table tr th { vertical-align: middle; } .show_menu { display: block !important; } .moderator_list { list-style-type: none; padding-left: 0; } .moderator_list li { display: inline-block; padding-right: 5px; } fieldset legend { font-weight: bold; } .profile_action_buttons, .rh_action_buttons { float: right; } .preview_image_shown { z-index: 1; position: relative; max-width: 92vw; height: auto; cursor: pointer; } @media (min-width: 992px) { .preview_image_shown { max-width: 760px; } } @media (min-width: 1280px) { .preview_image_shown { max-width: 800px; } } @media (min-width: 1600px) { .preview_image_shown { max-width: 850px; } } @media (min-width: 2000px) { .preview_image_shown { max-width: 1180px; } } .mobile_create_post { float: right; } .post_body blockquote, .comment_body blockquote { border-left: 2px solid var(--bs-secondary); padding: 0.1em 5px; font-style: italic; } .list-group-item:first-child { padding-top: 0; } .skip-link { position: absolute; top: -40px; left: 0; background-color: #fff; z-index: 999; } .skip-link:focus { top: 0; } /*# sourceMappingURL=structure.css.map */