pyfedi/app/static/structure.css

633 lines
10 KiB
CSS
Raw Normal View History

/* 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 */
.pl-0 {
padding-left: 0 !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-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";
}
2023-10-10 22:25:37 +13:00
.fe-arrow-up::before {
content: "\e914";
}
.fe-arrow-down::before {
content: "\e90c";
}
.fe-reply {
position: relative;
2023-11-09 21:32:29 +13:00
top: 1px;
}
.fe-reply::before {
2023-11-09 21:32:29 +13:00
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";
}
2023-12-14 21:22:46 +13:00
.fe-mea-culpa::before {
content: "\e997";
}
.fe-block::before {
content: "\ea04";
}
2023-11-30 05:27:00 +13:00
.fe-report::before {
content: "\e967";
}
2023-11-30 23:21:37 +13:00
.fe-bell::before {
content: "\e91e";
}
2023-12-12 18:28:49 +13:00
.fe-rss::before {
content: "\e9be";
}
2023-11-30 05:27:00 +13:00
.fe-image {
position: relative;
top: 2px;
}
.fe-image:before {
2023-11-30 05:14:22 +13:00
content: "\e97a";
}
.fe-new-account {
position: relative;
top: 1px;
}
.fe-new-account:before {
content: "\e986";
2023-11-27 22:05:35 +13:00
}
2023-11-30 05:27:00 +13:00
.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;
}
2023-08-22 21:24:11 +12:00
2023-10-03 22:29:13 +13:00
#breadcrumb_nav {
font-size: 87%;
2023-10-03 22:29:13 +13:00
}
@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;
2023-12-22 14:05:39 +13:00
height: 176px;
}
@media (min-width: 992px) {
.community_header {
height: 240px;
}
}
2023-10-03 22:29:13 +13:00
@media (min-width: 992px) {
.community_header #breadcrumb_nav {
padding-left: 20px;
padding-top: 13px;
}
2023-12-22 14:05:39 +13:00
}
.community_header #breadcrumb_nav .breadcrumb {
background-color: rgba(0, 0, 0, 0.2);
display: inline-block;
padding: 5px 10px;
border-radius: 6px;
margin-bottom: 0;
}
.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;
2023-10-03 22:29:13 +13:00
}
.community_header_no_background .community_icon, .community_header .community_icon {
width: 120px;
height: auto;
}
2023-10-10 22:25:37 +13:00
.post_reply_form label {
display: none;
}
2023-11-30 23:21:37 +13:00
.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;
}
2023-10-10 22:25:37 +13:00
.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;
2023-11-09 22:44:09 +13:00
margin-bottom: 0;
}
2023-10-07 21:32:19 +13:00
.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 {
2023-12-22 14:05:39 +13:00
float: right;
padding-left: 0;
padding-right: 0;
}
.post_list .post_teaser .thumbnail img {
2023-12-22 14:05:39 +13:00
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;
2023-11-09 22:44:09 +13:00
border-top: solid 1px #bbb;
margin-right: 8px;
}
.comments > .comment:first-child {
border-top: none;
padding-top: 0;
}
#replies {
scroll-margin-top: 5em;
}
.post_replies > .col {
padding-right: 5px;
}
2023-11-27 22:05:35 +13:00
.post_type_image .post_image img {
max-width: 100%;
height: auto;
}
2023-10-23 17:22:21 +13:00
.voting_buttons {
float: right;
display: block;
2023-11-09 22:44:09 +13:00
width: 55px;
2023-12-22 14:05:39 +13:00
padding: 0 0 5px 5px;
line-height: 22px;
font-size: 14px;
2023-10-23 17:22:21 +13:00
}
.voting_buttons div {
border: solid 1px #0071CE;
}
.voting_buttons .upvote_button, .voting_buttons .downvote_button {
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 a {
text-decoration: none;
}
2023-10-10 22:25:37 +13:00
.comment {
clear: both;
margin-bottom: 20px;
2023-11-09 22:44:09 +13:00
margin-left: 15px;
padding-top: 8px;
2023-10-10 22:25:37 +13:00
}
2023-10-15 21:13:32 +13:00
.comment .limit_height {
position: relative;
}
2023-10-15 21:13:32 +13:00
.comment .limit_height.expanded {
max-height: none;
}
2023-10-15 21:13:32 +13:00
.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;
}
2023-10-10 22:25:37 +13:00
.comment .comment_author img {
width: 20px;
height: 20px;
border-radius: 50%;
vertical-align: bottom;
2023-10-10 22:25:37 +13:00
}
.comment .hide_button {
float: right;
display: block;
width: 68px;
2023-10-10 22:25:37 +13:00
padding: 5px;
}
.comment .hide_button a {
text-decoration: none;
}
.comment .comment_actions {
margin-top: -10px;
}
.comment .comment_actions a {
text-decoration: none;
}
.comment .replies {
margin-top: 15px;
border-left: solid 1px #ddd;
2023-11-09 22:44:09 +13:00
border-top: solid 1px #ddd;
}
2023-10-10 22:25:37 +13:00
#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;
2023-12-15 17:35:11 +13:00
height: 230px;
}
2023-11-30 23:21:37 +13:00
.table tr th {
vertical-align: middle;
2023-10-15 21:13:32 +13:00
}
2023-08-22 21:24:11 +12:00
/*# sourceMappingURL=structure.css.map */