/* 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-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::before { content: "\e91e"; } .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; } } .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: ">"; } } .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; } .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: 120%; 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; } .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; } } .url_thumbnail { float: right; margin-top: 6px; margin-right: 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; } .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 { 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; } .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; } .comment .comment_author img { width: 20px; height: 20px; border-radius: 50%; vertical-align: bottom; } .comment .hide_button { float: right; display: block; width: 68px; padding: 5px; } .comment .hide_button a { text-decoration: none; } .comment .comment_actions { margin-top: -10px; position: relative; } .comment .comment_actions a { text-decoration: none; } .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 { float: right; } /*# sourceMappingURL=structure.css.map */