2 Created on : 17.02.2016, 23:55:45
3 Author : rabuzarus and contributors
8 background-color: $background_color;
9 background-image: url("$background_image");
10 background-size: $background_size_img;
11 background-repeat: $background_repeat;
12 background-attachment: fixed;
14 font-family: "Open Sans", sans-serif;
22 text-decoration: none;
24 /* Anchors incorrectly display with a fixed top menu. This global rule offsets all
25 * anchors so that accessing them with a # link will actually scroll the associated
26 * content in the visible part of the page.
28 * anchor.top should be the opposite of body.padding-top
30 body a[name]:not([href]) {
45 color: $link_hover_color;
46 outline-color: $link_hover_color;
47 text-decoration: none;
50 .wall-item-container a:hover {
51 text-decoration: underline;
60 border-color: rgba(238, 238, 238, $contentbg_transp);
79 .btn.btn-link.fakelink {
82 vertical-align: baseline;
87 display: none !important;
90 max-height: 0px !important;
91 overflow: hidden !important;
109 * clickable table rows
111 .table > tbody > td[role="button"] {
118 @media screen and (max-width: 990px) {
123 position: fixed !important;
125 background-color: $background_color;
132 padding-left: 6px !important;
133 padding-right: 6px !important;
143 background-color: rgba(0, 0, 0, 0.4);
145 transition: opacity 0.5s;
147 aside.canvas-slid::before {
151 /* prevent page scroll when the aside is opened **/
157 * standard page elements
163 color: $nav_icon_color;
170 padding: 0 12px 0 12px;
172 background-color: $nav_bg;
176 #item-delete-selected {
185 padding: 0 12px 0 12px;
187 background-color: $link_color;
192 #toggle_mobile_link {
197 * Overwriting and Extend Bootstrap
209 -webkit-box-shadow: none;
211 -moz-box-shadow: none;
212 background-image: none;
222 outline-color: $link_hover_color;
245 background-color: #ae0f0f;
250 color: $btn_primary_color;
252 .btn.btn-primary:hover,
253 .btn.btn-primary:focus {
254 color: $btn_primary_color;
255 background: $btn_primary_hover_color;
256 text-decoration: none;
258 .btn.btn-primary:active,
259 .btn.btn-primary.active {
260 background: $btn_primary_hover_color;
263 .btn-primary.active.focus,
264 .btn-primary.active:focus,
265 .btn-primary.active:hover,
266 .btn-primary:active.focus,
267 .btn-primary:active:focus,
268 .btn-primary:active:hover,
269 .open > .dropdown-toggle.btn-primary.focus,
270 .open > .dropdown-toggle.btn-primary:focus,
271 .open > .dropdown-toggle.btn-primary:hover,
274 .open > .dropdown-toggle.btn-primary {
275 background: $btn_primary_hover_color;
288 background: transparent;
295 background-color: transparent;
299 border-left: 1px solid #777;
303 border: 1px solid transparent;
312 .toggle .toggle-off:hover {
314 background-color: #eee;
317 .toggle.off .toggle-handle {
318 background-color: #eee;
321 background-color: #fff;
323 border: 1px solid transparent;
327 .input-group-sm > .form-control,
328 .input-group-sm > .input-group-addon,
329 .input-group-sm > .input-group-btn > .btn {
330 padding: 0.275rem 0.75rem;
333 border-radius: 0.2rem;
335 /* Bootstrap media class fix/hack
336 * This is a test. I thought it does have some
337 * issues in some corner cases. Maybe we remove
339 * https://github.com/twbs/bootstrap/issues/6053
362 vertical-align: baseline;
363 background-color: $link_color;
371 /* disabled elements */
372 .community-content-wrapper > h3,
373 .network-content-wrapper > .section-title-wrapper {
377 header #site-location {
388 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
390 font-family: tahoma, "Lucida Sans", sans;
396 header #banner #logo-img,
397 .navbar-brand #logo-img {
398 -webkit-mask-image: url("img/friendica-25.png");
399 background-color: $nav_icon_color;
406 #navbrand-container {
409 #navbrand-container #navbar-brand-text {
411 color: $nav_icon_color;
414 /* offcanvas section */
416 /* Right offcanvas uses: #offcanvasUsermenu, .offcanvas-right-active
417 .offcanvas-right and .offcanvas-right-overlay */
426 background-color: #333;
427 transform: translateX(-100%);
428 transition: 0.4s ease-in-out;
439 background-color: #333;
440 transform: translateX(100%);
441 transition: 0.4s ease-in-out;
444 .offcanvas-active .off-canvas {
445 transform: translateX(0);
447 .offcanvas-right-active #offcanvasUsermenu {
448 transform: translateX(0);
451 transition: 0.4s ease-in-out;
456 transition: 0.4s ease-in-out;
458 .offcanvas-active .page-wrapper,
459 .offcanvas-active .navbar-fixed-top {
460 transform: translateX(300px);
469 background-color: rgba(0, 0, 0, 0.5);
473 transition: 0.4s ease-in-out;
475 .offcanvas-right-overlay {
481 background-color: rgba(0, 0, 0, 0.5);
485 transition: 0.4s ease-in-out;
487 .offcanvas-active .offcanvas-overlay,
488 .offcanvas-right-active .offcanvas-right-overlay {
492 /* offcanvas section ends */
506 .topbar ul.nav > li {
509 @media (min-width: 992px) {
510 .topbar ul.nav > li > a,
511 .topbar ul.nav > li > button {
513 padding-bottom: 15px;
517 @media (max-width: 991px) {
518 .topbar ul.nav > li > a,
519 .topbar ul.nav > li > button {
523 .topbar .dropdown-footer {
526 .topbar .dropdown-header {
533 .topbar .dropdown-header .dropdown-header-link {
538 .topbar .dropdown-header .dropdown-header-link a,
539 .topbar .dropdown-header .dropdown-header-link .btn-link {
540 color: $link_color !important;
544 .topbar .dropdown-header:hover {
549 background-color: $nav_bg;
552 color: $nav_icon_color;
554 @media screen and (max-width: 767px) {
561 #topbar-first .navbar-toggle {
566 #topbar-first .nav > li > a,
567 #topbar-first .nav > li > button,
568 nav.navbar .nav > li > a,
569 nav.navbar .nav > li > button {
570 color: $nav_icon_color;
572 #topbar-first .nav > .open > a,
573 #topbar-first .nav > .open > button {
574 background-color: $nav_bg;
576 #topbar-first .nav > li > a:hover,
577 #topbar-first .nav > li > a:focus,
578 #topbar-first .nav > li > button:not(#main-menu):hover,
579 #topbar-first .nav > li > button:not(#main-menu):focus,
580 nav.navbar .nav > li > a:hover,
581 nav.navbar .nav > li > a:focus,
582 nav.navbar .nav > li > button:hover,
583 nav.navbar .nav > li > button:focus {
584 background-color: $nav_icon_hover_color;
586 #topbar-first .nav > .account {
590 #topbar-first .nav > .account img {
596 #topbar-first .nav > .account .dropdown-toggle {
597 padding: 8px 5px 0px;
601 #topbar-first .nav > .account .dropdown-toggle span {
604 #topbar-first .topbar-brand {
608 #topbar-first .topbar-actions {
612 #topbar-first .topbar-nav {
618 #topbar-first .topbar-nav .nav-segment {
622 #topbar-first .topbar-nav .nav-segment > a {
623 display: inline-block;
624 text-decoration: none;
627 #topbar-first .topbar-nav .nav-segment .nav-notification {
631 background-color: #ff3535;
633 #topbar-first #intro-update {
636 #topbar-first .topbar-nav .arrow:after {
641 border-color: transparent;
648 border-bottom-color: #fff;
651 #topbar-first .topbar-nav .arrow {
656 border-color: transparent;
663 border-bottom-color: rgba(0, 0, 0, 0.15);
667 #topbar-first .topbar-nav .dropdown-menu {
671 #topbar-first .topbar-nav .dropdown-menu ul.media-list {
675 #topbar-first .topbar-nav .dropdown-menu li {
678 #topbar-first .topbar-nav .dropdown-menu li i.approval {
684 #topbar-first .topbar-nav .dropdown-menu li i.accepted {
687 #topbar-first .topbar-nav .dropdown-menu li i.declined {
690 #topbar-first .topbar-nav .dropdown-menu li .media {
693 #topbar-first .topbar-nav .dropdown-menu li .media .img-space {
698 #topbar-first .dropdown-footer {
699 margin: 10px 10px 5px;
701 #topbar-first .caret {
702 border-top-color: #bebebe;
704 #topbar-first .btn-group > a {
705 background-color: #7f9baa;
707 #topbar-first .btn-enter {
708 background-color: #7f9baa;
711 #topbar-first .btn-enter:hover {
712 background-color: #89a2b0;
714 .navbar-fixed-top ul.nav.navbar-nav.navbar-right {
718 #friendica-logo-mask {
722 /* Notification Menu */
723 #topbar-first #nav-notifications-menu {
726 #topbar-first #nav-notifications-menu a {
727 color: $font_color_darker;
730 #topbar-first #nav-notifications-menu li.notif-entry {
731 color: $font_color_darker;
733 border-bottom: 1px solid #eee;
735 border-left: 3px solid #fff;
739 #topbar-first #nav-notifications-menu li.notification-unseen {
740 border-left: 3px solid #e3eff3;
741 background-color: #e3eff3;
743 #topbar-first #nav-notifications-menu li.notif-entry:hover {
744 background-color: #f7f7f7;
745 border-left: 3px solid $link_color;
747 #topbar-first #nav-notifications-menu li.placeholder {
750 #topbar-first #nav-notifications-menu .media .media-body .contactname {
753 #topbar-first #nav-notifications-menu .media .media-body .label {
754 padding: 0.1em 0.5em;
756 #topbar-first #nav-notifications-menu li.notif-entry .media-object a img {
761 /* The Top Nav Bar user menu */
762 #topbar-first .account .user-title {
766 #topbar-first .account .user-title span {
767 color: $nav_icon_color;
769 #topbar-first .account #main-menu .nav-notification {
773 background-color: #ff8989;
777 background-color: $background_color;
781 border-left-color: $nav_icon_color;
782 box-shadow: -3px 0 3px -3px black;
784 #offcanvasUsermenu .nav-container {
785 /* required to compensate for moving the container below the topnav bar */
788 #offcanvasUsermenu li.divider {
789 background-color: transparent;
793 #offcanvasUsermenu ul,
794 #offcanvasUsermenu ul li:first-child,
795 #offcanvasUsermenu ul,
796 #offcanvasUsermenu ul li:last-child {
799 #offcanvasUsermenu li,
800 #offcanvasUsermenu a {
801 background-color: $nav_bg;
802 color: $nav_icon_color;
805 #offcanvasUsermenu li.list-group-item {
806 border-color: $background_color;
808 #offcanvasUsermenu a {
811 #offcanvasUsermenu li.nav-sitename {
814 #topbar-first .dropdown.account li#nav-sitename {
818 word-break: break-word;
820 #topbar-first .dropdown.account li#nav-sitename:hover {
822 background-color: $nav_bg;
825 #topbar-first #search-box .navbar-form {
836 background-color: $background_color;
838 /* fix bootstrap .well class not playing well with data-target slide animation */
844 #search-mobile .navbar-form {
847 #topbar-first #search-box .form-search {
850 background-position: 8px 4px;
852 #topbar-first #search-box .btn {
861 background-color: #fff;
863 background-image: none;
864 -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
865 -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
866 box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
867 border-bottom: 1px solid #d4d4d4;
869 #topbar-second > .container {
872 @media screen and (max-width: 767px) {
873 #topbar-second > .container,
874 #topbar-second #navbar-button {
878 #topbar-second .dropdown-menu {
882 #topbar-second .dropdown-menu .divider {
885 #topbar-second #space-menu-dropdown,
886 #topbar-second #search-menu-dropdown {
889 #topbar-second #space-menu-dropdown .media-list,
890 #topbar-second #search-menu-dropdown .media-list {
898 .intro-wrapper button.intro-action-link {
902 ul li .intro-wrapper button.intro-action-link {
905 @media screen and (max-width: 768px) {
906 #topbar-second #space-menu-dropdown .media-list,
907 #topbar-second #search-menu-dropdown .media-list {
911 #topbar-second #space-menu-dropdown form,
912 #topbar-second #search-menu-dropdown form {
915 #topbar-second #space-menu-dropdown .search-reset,
916 #topbar-second #search-menu-dropdown .search-reset {
925 #topbar-second #space-menu-dropdown li > ul > li > a > .media .media-body p {
931 #topbar-second #nav-short-info .heading {
936 text-overflow: ellipsis;
938 #topbar-second #tabmenu .heading {
940 text-overflow: ellipsis;
947 .nav > li > .btn-link {
952 .nav .open > .btn-link {
953 background-color: #eee;
954 border-color: #337ab7;
956 .nav-pills > li > .btn-link {
959 .nav-pills .dropdown-menu,
960 .nav-tabs .dropdown-menu,
961 .account .dropdown-menu,
962 .contact-photo-wrapper .dropdown-menu {
963 background-color: $nav_bg;
966 .nav-pills .dropdown-menu li.divider,
967 .nav-tabs .dropdown-menu li.divider,
968 .account .dropdown-menu li.divider,
969 .contact-photo-wrapper .dropdown-menu li.divider {
970 background-color: $menu_background_hover_color;
972 margin: 9px 1px !important;
974 .nav-pills .dropdown-menu li > a,
975 .nav-tabs .dropdown-menu li > a,
976 .account .dropdown-menu li > a,
977 .contact-photo-wrapper .dropdown-menu li > a {
978 border-left: 3px solid $nav_bg;
980 .nav-pills .dropdown-menu li a,
981 .nav-pills .dropdown-menu li .btn-link,
982 .nav-tabs .dropdown-menu li a,
983 .nav-tabs .dropdown-menu li .btn-link,
984 .account .dropdown-menu li a,
985 .account .dropdown-menu li .btn-link,
986 .contact-photo-wrapper .dropdown-menu li a,
987 .contact-photo-wrapper .dropdown-menu li .btn-link {
988 color: $nav_icon_color;
995 .nav-pills .dropdown-menu li a i,
996 .nav-pills .dropdown-menu li .btn-link i,
997 .nav-tabs .dropdown-menu li a i,
998 .nav-tabs .dropdown-menu li .btn-link i,
999 .account .dropdown-menu li a i,
1000 .account .dropdown-menu li .btn-link i,
1001 .contact-photo-wrapper .dropdown-menu li a i,
1002 .contact-photo-wrapper .dropdown-menu li .btn-link i {
1005 display: inline-block;
1008 .nav-pills .dropdown-menu li > a:hover,
1009 .nav-tabs .dropdown-menu li > a:hover,
1010 .account .dropdown-menu li > a:hover,
1011 .contact-photo-wrapper .dropdown-menu li > a:hover,
1012 .nav-pills .dropdown-menu li.selected a,
1013 .nav-tabs .dropdown-menu li.selected a,
1014 .account .dropdown-menu li.selected a,
1015 .contact-photo-wrapper .dropdown-menu li.selected a {
1016 border-left: 3px solid $link_color;
1018 background: $menu_background_hover_color;
1020 #photo-edit-link-wrap {
1021 color: $font_color_darker;
1022 margin-bottom: 15px;
1025 #newmember-tab > a {
1036 .nav-container .widget {
1039 background-color: rgba(255, 255, 255, $contentbg_transp);
1040 box-shadow: 0 0 3px #dadada;
1041 -webkit-box-shadow: 0 0 3px #dadada;
1042 -moz-box-shadow: 0 0 3px #dadada;
1045 margin-bottom: 20px;
1051 .nav-container .widget h3 {
1055 padding-bottom: 20px;
1059 .nav-container .widget ul {
1064 margin-right: -10px;
1069 .nav-container .widget li {
1071 padding-bottom: 2px;
1073 padding-right: 10px;
1075 aside .widget li:hover,
1076 aside .widget li.selected,
1077 .nav-container .widget li:hover {
1079 color: $font_color_darker;
1080 background-color: rgba(247, 247, 247, $contentbg_transp);
1081 border-left: 3px solid $link_color !important;
1085 aside .widget li a:hover {
1086 color: $font_color_darker;
1089 /* forumlist widget */
1090 aside > #datebrowse-sidebar li.posted-date-selector-months {
1091 margin-bottom: 10px;
1095 aside > #datebrowse-sidebar li.posted-date-selector-months:hover {
1096 border-left: none !important;
1097 background-color: transparent !important;
1099 aside > #datebrowse-sidebar .posted-date-selector-months > ul {
1102 aside > #datebrowse-sidebar .posted-date-selector-months > ul > li {
1105 aside > #datebrowse-sidebar .posted-date-selector-months > ul > li:hover {
1110 -webkit-filter: grayscale(100%);
1111 filter: grayscale(100%);
1113 filter: alpha(opacity=50); /* For IE8 and earlier */
1114 -webkit-transition: all 0.2s ease-in-out;
1115 -moz-transition: all 0.2s ease-in-out;
1116 -o-transition: all 0.2s ease-in-out;
1117 -ms-transition: all 0.2s ease-in-out;
1118 transition: all 0.2s ease-in-out;
1120 #forumlist-sidbar-ul li:hover a > .forumlist-img {
1121 -webkit-filter: unset;
1126 /* help page widget */
1127 aside > .help-aside-wrapper p strong:first-child {
1131 aside > .help-aside-wrapper h1 {
1135 padding: 20px 0 10px;
1137 aside > .help-aside-wrapper h2 {
1142 /* vcard / h-card */
1143 aside .vcard #profile-photo-wrapper {
1146 aside .vcard img.u-photo,
1147 aside img.vcard-photo {
1151 aside .vcard .tool .action {
1158 background: rgba(0, 0, 0, 0.5);
1162 -webkit-transition: all 0.25s ease-in-out;
1163 -moz-transition: all 0.25s ease-in-out;
1164 -o-transition: all 0.25s ease-in-out;
1165 -ms-transition: all 0.25s ease-in-out;
1166 transition: all 0.25s ease-in-out;
1168 aside .vcard .tool a {
1169 color: rgba(255, 255, 255, 0.85);
1171 aside .vcard #profile-photo-wrapper:hover .tool .action {
1174 aside .vcard #profile-photo-wrapper.crop-preview {
1177 aside .vcard .profile-header {
1178 padding: 5px 0px 20px 0px;
1182 padding: 5px 0px 5px 0px;
1184 aside .vcard .p-addr {
1187 text-overflow: ellipsis;
1188 white-space: nowrap;
1189 padding-bottom: 2px;
1191 aside .vcard .title {
1194 aside .vcard .detail {
1198 aside .xmpp, aside .matrix {
1201 aside .vcard .icon {
1202 display: table-cell;
1203 padding-right: 10px;
1206 #profile-extra-links {
1208 margin-bottom: 10px;
1210 aside .vcard #subscribe-feed-link-button,
1211 aside .vcard #dfrn-request-link-button,
1212 aside .vcard #wallmessage-link-botton {
1218 aside .vcard #subscribe-feed-link,
1219 aside .vcard #dfrn-request-link,
1220 aside .vcard #wallmessage-link {
1223 /* vcard-short-info */
1225 #nav-short-info .contact-wrapper {
1228 white-space: nowrap;
1230 padding-right: 20px;
1233 #nav-short-info .contact-photo-wrapper.media-left {
1236 #vcard-short-photo-wrapper img,
1237 #nav-short-info .contact-wrapper img {
1243 #nav-short-info .contact-wrapper .media-body {
1247 text-overflow: ellipsis;
1249 #vcard-short-desc > .media-heading,
1250 #vcard-short-desc > .vcard-short-addr,
1251 #nav-short-info .contact-wrapper .media-heading,
1252 #nav-short-info .contact-wrapper #contact-entry-url-network {
1253 text-overflow: ellipsis;
1256 #vcard-short-desc > .media-heading,
1257 #nav-short-info .contact-wrapper .media-heading {
1261 #nav-short-info .contact-wrapper .media-heading a {
1262 color: $font_color_darker;
1263 font-size: 14px !important;
1265 #vcard-short-desc > .vcard-short-addr,
1266 #nav-short-info .contact-wrapper #contact-entry-url-network {
1270 .network-content-wrapper > .generic-page-wrapper,
1271 #nav-short-info .contact-wrapper .contact-photo-overlay,
1272 #nav-short-info .contact-wrapper .contact-actions {
1276 aside #peoplefind-sidebar input,
1277 aside #follow-sidebar input {
1279 background-position: 10px 5px;
1281 aside #peoplefind-sidebar label,
1282 aside #follow-sidebar label {
1283 font-weight: normal;
1285 aside #peoplefind-sidebar .form-group-search .form-button-search,
1286 aside #follow-sidebar .form-group-search .form-button-search {
1290 div#sidebar-group-header h3 {
1294 div#sidebar-group-list {
1303 color: $font_color_darker;
1307 color: $font_color_darker;
1309 transition: all 0.1s ease-in-out;
1312 color: $font_color_darker;
1319 aside #group-sidebar .sidebar-group-li:hover .group-edit-tool.faded-icon,
1320 aside #saved-search-list .saved-search-li:hover .savedsearchdrop.faded-icon,
1321 aside .widget:hover .widget-action.faded-icon {
1323 transition: all 0.25s ease-in-out;
1325 aside #group-sidebar .sidebar-group-li .group-edit-tool.faded-icon:hover,
1326 aside #saved-search-list .saved-search-li .savedsearchdrop.faded-icon:hover,
1327 aside .widget .widget-action.faded-icon:hover {
1330 aside #group-sidebar li .group-checkbox {
1333 aside #group-sidebar li .group-edit-tool {
1334 padding-right: 10px;
1336 aside #group-sidebar li .group-edit-tool:first-child {
1340 /* contact block widget */
1341 .contact-block-content {
1346 .contact-block-div {
1348 margin: 0px 5px 5px 0px;
1350 .contact-block-link {
1352 .contact-block-img {
1358 /* Tag cloud widget */
1359 .tagblock.widget > .tag-cloud {
1364 display: none !important;
1378 .modal #jot-sections {
1379 max-height: calc(100vh - 22px);
1381 @media (min-width: 768px) {
1382 .modal #jot-sections {
1383 max-height: calc(100vh - 62px);
1386 #jot-modal #jot-sections,
1387 #jot-modal #jot-modal-body,
1388 #jot-modal #profile-jot-form,
1389 #jot-modal #profile-jot-wrapper,
1390 #jot-modal #jot-text-wrap,
1391 #jot-modal #jot-preview-content,
1392 #jot-modal #tread-wrapper--1,
1393 #jot-modal #item-Q0,
1394 #jot-modal #profile-jot-acl-wrapper,
1395 #jot-modal #acl-wrapper {
1399 flex-direction: column;
1401 #jot-modal .modal-header a,
1402 #jot-modal .modal-header .btn-link,
1403 #profile-jot-submit-wrapper a,
1404 #profile-jot-submit-wrapper .btn-link {
1405 color: $font_color_darker;
1407 #jot-modal .modal-header {
1408 border-bottom: none;
1410 #jot-modal .modal-header .compose-link {
1415 #jot-category-wrap {
1421 #jot-text-wrap textarea {
1423 overflow-y: auto !important;
1424 overflow-y: overlay !important;
1426 #jot-text-wrap .preview textarea {
1429 #preview_profile-jot-text,
1430 .comment-edit-form .preview {
1434 border: 2px solid #ededed;
1437 border-radius: 0 0 4px 4px;
1439 color: $font_color_darker;
1441 textarea#profile-jot-text:focus + #preview_profile-jot-text,
1442 textarea.comment-edit-text:focus + .comment-edit-form .preview {
1443 border: 2px solid #6fdbe8;
1446 .preview hr.previewseparator {
1448 border-color: #d2d2d2;
1450 #previewImgBtn_profile-jot-text,
1462 .preview button.previewActionBtn {
1468 border: 2px solid #fff;
1469 box-shadow: 0 0 3px gray;
1473 text-decoration: none;
1474 padding: 0 0 1px 1px;
1477 .preview button.previewActionBtn:hover {
1480 .preview .closePreview button.previewActionBtn {
1483 #previewInputTitle_profile-jot-text {
1486 #profile-jot-wrapper button#profile-jot-submit {
1489 #profile-jot-wrapper #character-counter {
1492 .modal .wall-item-container.preview {
1494 overflow-y: overlay;
1498 font-family: ForkAwesome;
1502 font-family: ForkAwesome;
1506 #acl-wrapper label.panel-heading {
1513 .fbrowser .breadcrumb {
1516 .fbrowser .path a:before {
1520 .fbrowser .breadcrumb > li:last-of-type a {
1522 pointer-events: none;
1525 .fbrowser .folders {
1526 box-shadow: -1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
1529 .fbrowser .folders ul {
1535 max-height: calc(100vh - 210px);
1538 @media (min-width: 768px) {
1539 .fbrowser .folders ul {
1540 max-height: calc(100vh - 255px);
1543 .fbrowser .folders li {
1545 padding-right: 10px;
1547 padding-bottom: 3px;
1549 .fbrowser .folders li:hover {
1551 color: $font_color_darker;
1552 background-color: rgba(247, 247, 247, $contentbg_transp);
1553 border-left: 3px solid $link_color;
1556 .fbrowser .folders li a,
1557 .fbrowser .folders li a:hover {
1558 color: $font_color_darker;
1561 .fbrowser .folders + .list {
1564 .fbrowser .fbrowser-content-container {
1566 max-height: calc(100vh - 233px);
1568 @media (min-width: 768px) {
1569 .fbrowser .fbrowser-content-container {
1570 max-height: calc(100vh - 277px);
1573 .fbrowser.photo .photo-album-image-wrapper {
1574 box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.2);
1576 .fbrowser.photo .photo-album-image-wrapper .caption {
1577 pointer-events: none;
1579 .fbrowser .profile-rotator-wrapper {
1582 .fbrowser .fa-spin {
1595 background-color: rgba(255, 255, 255, $contentbg_transp);
1596 box-shadow: 0 0 2px #dadada;
1597 -webkit-box-shadow: 0 0 2px #dadada;
1598 -moz-box-shadow: 0 0 2px #dadada;
1602 .panel.panel-inline {
1604 margin-right: -15px;
1608 .panel .panel-body {
1609 word-wrap: break-word;
1611 .tread-wrapper .media {
1613 word-wrap: break-word;
1619 /* Thread hover effects */
1620 .desktop-view .wall-item-container .wall-item-content a,
1621 .desktop-view .wall-item-name,
1622 .desktop-view .wall-item-container .fakelink,
1623 .desktop-view .toplevel_item .fakelink,
1624 .desktop-view .toplevel_item .wall-item-container .wall-item-responses a {
1626 -webkit-transition: all 0.25s ease-in-out;
1627 -moz-transition: all 0.25s ease-in-out;
1628 -o-transition: all 0.25s ease-in-out;
1629 -ms-transition: all 0.25s ease-in-out;
1630 transition: all 0.25s ease-in-out;
1633 .toplevel_item:hover .fakelink,
1634 .wall-item-container:hover .fakelink,
1635 .toplevel_item:hover .wall-item-container:hover .wall-item-responses a,
1636 .toplevel_item:hover .wall-item-content a,
1637 .toplevel_item:hover .wall-item-name,
1638 .wall-item-container:hover .wall-item-content a,
1639 .wall-item-container:hover .wall-item-name,
1640 .wall-item-container:hover .wall-item-location a {
1642 -webkit-transition: all 0.25s ease-in-out;
1643 -moz-transition: all 0.25s ease-in-out;
1644 -o-transition: all 0.25s ease-in-out;
1645 -ms-transition: all 0.25s ease-in-out;
1646 transition: all 0.25s ease-in-out;
1650 .wall-item-container {
1651 border-top: 1px solid rgba(255, 255, 255, 0.8);
1654 .wall-item-container.panel-body {
1659 .comment-edit-preview .wall-item-container.panel-body.preview {
1662 .comment-edit-preview .panel {
1666 .wall-item-container .media {
1669 background-color: rgba(0, 0, 0, 0.03);
1672 /* wall items contact photo */
1677 /*maybe some adional stuff is needed for the different screen sizes */
1679 .contact-photo-image-wrapper {
1686 .contact-photo-overlay {
1694 background: rgba(0, 0, 0, 0.5);
1697 -webkit-transition: opacity 0.25s ease;
1698 -moz-transition: opacity 0.25s ease;
1700 .contact-photo-overlay:hover {
1703 .contact-photo-overlay-content {
1705 text-shadow: 1px 1px 1px #ccc;
1706 color: rgba(255, 255, 255, 0.85);
1708 vertical-align: bottom;
1715 .wwto .contact-photo {
1723 display: inline-block;
1726 /* wall items action dropdown menu */
1727 .media .contact-info {
1731 /* Workaround for Firefox where the post heading covers the avatar, preventing hovercard interaction,
1732 48px is the width of the avatar image and should be adjusted accordingly if it ever changes. */
1733 .media .dropdown.pull-left + .contact-info {
1746 margin-bottom: 10px;
1750 .preferences .plink {
1754 blockquote.shared_content {
1756 margin-inline-start: 0px;
1760 .wall-item-network {
1764 /* wall items contact info */
1765 .media .media-body {
1768 .media .media-body h4.media-heading {
1771 color: $font_color_darker;
1773 .media .media-body .addional-info a {
1776 .media .contact-info-comment {
1777 display: table-cell;
1779 .media .contact-info-xs h5,
1780 .media .contact-info-comment {
1791 .wall-item-name.xs {
1796 /* Contact avatar click card */
1797 .userinfo.click-card {
1801 .userinfo.click-card > *:hover:after {
1806 background-color: #ffffff;
1815 border-radius: 0 0 40% 0;
1818 /* The lock symbol popup */
1822 background-color: $nav_bg;
1832 color: $nav_icon_color;
1836 /* Space between content and head */
1841 /* wall items content */
1842 .wall-item-content {
1843 word-break: break-word;
1845 .wall-item-content img {
1846 object-fit: contain;
1848 .wall-item-body > img,
1849 .wall-item-body > a > img {
1852 .wall-item-body .body-attach > a {
1853 color: $font_color_darker;
1854 display: inline-block;
1856 .wall-item-body .body-attach > a div {
1857 color: $font_color_darker;
1861 /* wall-item content elements */
1869 box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.1) inset, 0 1px 1px rgba(0, 0, 0, 0.05);
1871 @media screen and (max-width: 767px) {
1877 margin: 5px -10px 0;
1881 box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.05);
1884 padding: 10px 10px 1px 0;
1889 .type-link img.attachment-image {
1892 .type-link blockquote,
1893 .type-video blockquote {
1897 .oembed.video .embed_video > div::before {
1898 font-family: ForkAwesome;
1899 font-weight: normal;
1901 display: inline-block;
1902 text-decoration: inherit;
1903 vertical-align: top;
1911 .oembed.video .embed_video > div {
1912 background-color: rgba(0, 0, 0, 0.2);
1913 -webkit-transition: all 0.25s ease-in-out;
1914 -moz-transition: all 0.25s ease-in-out;
1915 -o-transition: all 0.25s ease-in-out;
1916 -ms-transition: all 0.25s ease-in-out;
1917 transition: all 0.25s ease-in-out;
1919 .oembed.video .embed_video > div:hover {
1920 background-color: rgba(0, 0, 0, 0);
1922 .oembed.video .embed_video.active {
1925 .oembed.video .embed_video.active iframe {
1926 width: 100% !important;
1935 color: $font_color_darker;
1938 .wall-item-tags a:hover {
1939 text-decoration: none;
1941 .wall-item-bottom .label,
1942 .wall-item-bottom .label a {
1945 .wall-item-tags .category,
1946 .wall-item-tags .folder {
1950 /* item social action buttons */
1951 .wall-item-actions {
1954 justify-content: space-between;
1956 .wall-item-actions a,
1957 .wall-item-actions button {
1959 color: $font_color_darker;
1961 .wall-item-actions .active {
1965 .wall-item-actions-left {
1966 display: table-cell;
1967 vertical-align: middle;
1969 .wall-item-actions-right {
1972 .wall-item-actions .checkbox {
1976 .wall-item-actions button:hover {
1977 color: $font_color_darker;
1978 text-decoration: underline;
1980 .wall-item-actions .separator {
1984 .wall-item-responses > div > p {
1988 /* wall item hover effects */
1990 @media (min-width: 768px) {
1991 /* Tags and mentions */
1992 .wall-item-container .wall-item-bottom .wall-item-tags span.label {
1993 filter: grayscale(0.5);
1996 -webkit-transition: all 0.25s ease-in-out;
1997 -moz-transition: all 0.25s ease-in-out;
1998 -o-transition: all 0.25s ease-in-out;
1999 -ms-transition: all 0.25s ease-in-out;
2000 transition: all 0.25s ease-in-out;
2003 .wall-item-container:hover .wall-item-bottom .wall-item-tags span.label {
2004 filter: grayscale(0);
2007 -webkit-transition: all 0.25s ease-in-out;
2008 -moz-transition: all 0.25s ease-in-out;
2009 -o-transition: all 0.25s ease-in-out;
2010 -ms-transition: all 0.25s ease-in-out;
2011 transition: all 0.25s ease-in-out;
2013 /* Like/Comment/etc buttons */
2014 .wall-item-container .wall-item-links,
2015 .wall-item-container .wall-item-actions button > a {
2018 -webkit-transition: all 0.25s ease-in-out;
2019 -moz-transition: all 0.25s ease-in-out;
2020 -o-transition: all 0.25s ease-in-out;
2021 -ms-transition: all 0.25s ease-in-out;
2022 transition: all 0.25s ease-in-out;
2024 .wall-item-container:hover .wall-item-links,
2025 .wall-item-container:hover .wall-item-actions button > a {
2028 -webkit-transition: all 0.25s ease-in-out;
2029 -moz-transition: all 0.25s ease-in-out;
2030 -o-transition: all 0.25s ease-in-out;
2031 -ms-transition: all 0.25s ease-in-out;
2032 transition: all 0.25s ease-in-out;
2034 .wall-item-container .wall-item-body .body-attach > a:hover {
2042 wall-item-comment-wrapper.well {
2045 background-color: rgba(237, 237, 237, $contentbg_transp);
2046 background-image: none;
2048 background-color: red;
2050 wall-item-comment-wrapper.well-small {
2054 wall-item-comment-wrapper.well hr {
2055 border-top: 1px solid #d9d9d9;
2057 .wall-entry wall-item-comment-wrapper.well {
2060 .comment-container {
2062 border-top-left-radius: 3px;
2063 border-top-right-radius: 3px;
2064 border-bottom-right-radius: 0px;
2065 border-bottom-left-radius: 0px;
2068 position: relative !important;
2071 .hide-comments-outer {
2072 background-color: rgba(0, 0, 0, 0.03);
2074 border-radius: 0.5em 0.5em 0 0;
2076 .hide-comments-total {
2085 .wall-item-comment-wrapper {
2087 border-top: 1px solid rgba(255, 255, 255, 0.8);
2088 background-color: rgba(0, 0, 0, 0.03);
2089 border-radius: 0 0 4px 4px;
2093 .comment-fake-form {
2094 border-color: #d9d9d9;
2096 .comment-fake-form textarea {
2100 .comment-container .wall-item-comment-wrapper {
2104 .comment-edit-form textarea {
2108 .comment-edit-submit-wrapper {
2113 .comment-icon-list {
2115 justify-content: space-between;
2118 /* acpopup + textcompletion*/
2120 background-color: #ffffff;
2124 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
2129 /** @todo: we schould consider the possebility to overwrite bootstrap dropdowns
2130 at the beginning of this file to get rid of the !important */
2131 .textcomplete-item > a {
2132 color: $font_color_darker !important;
2133 padding: 5px 20px !important;
2135 .textcomplete-item.active > a {
2136 background-color: rgb(247, 247, 247) !important;
2137 background-image: none !important;
2138 border-left: 3px solid $link_color;
2139 padding-left: 17px !important;
2141 .textcomplete-item a .forum {
2148 /* The wall-item thread levels */
2149 .wall-item-container.thread_level_3,
2150 .wall-item-container.thread_level_4,
2151 .wall-item-container.thread_level_5,
2152 .wall-item-container.thread_level_6,
2153 .wall-item-container.thread_level_7 {
2163 background-color: rgba(247, 247, 247, $contentbg_transp);
2164 box-shadow: 0 0 3px #dadada;
2165 -webkit-box-shadow: 0 0 3px #dadada;
2166 -moz-box-shadow: 0 0 3px #dadada;
2171 section > .tabbar-wrapper {
2172 /* The tabbar shouldn't' be visibile inside
2173 the section element. Only after we have
2174 moved it to the nav through js */
2175 display: none !important;
2184 #tabmenu .search-heading {
2186 text-overflow: ellipsis;
2187 white-space: nowrap;
2200 border-bottom: 0 solid $link_color;
2203 transition: all 0.15s ease;
2211 border-bottom-width: 4px;
2213 .tabbar.visible-xs .tabs-extended {
2216 #dropdownMenuTools-xs {
2219 ul.tabbar ul.tabs-extended:hover li.dropdown {
2223 ul.tabbar ul.tabs-extended li.active {
2225 border-bottom-width: 2px;
2227 ul.tabbar ul.tabs-extended li.active a {
2230 ul.dropdown-menu li:hover {
2236 box-sizing: border-box;
2239 .dropdown-menu li a,
2240 .dropdown-menu li .btn-link {
2241 color: $font_color_darker;
2243 .dropdown-menu li > :hover,
2244 .dropdown-menu li > :visited,
2245 .dropdown-menu li > :focus {
2249 .dropdown-menu li:first-child {
2253 /* Notificaiotn badges */
2254 #mail-update-li.show {
2255 display: inline-block !important;
2259 p.wall-item-announce,
2261 .media .shared-time,
2264 .media .location a {
2266 color: $font_color_darker;
2270 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2272 border-left: 3px solid rgba(255, 255, 255, 0);
2275 .media-list > li:hover,
2276 .media-list > li.selected,
2277 .media-list > li.active {
2278 border-left: 3px solid $link_color;
2279 background-color: rgba(247, 247, 247, $contentbg_transp);
2286 .form-control:focus {
2287 border: 2px solid $link_color;
2291 .radio label::before,
2292 .checkbox label::before {
2293 background-color: rgba(255, 255, 255, $contentbg_transp);
2295 .radio label::after {
2296 background-color: $link_color;
2298 .checkbox label::after {
2302 .checkbox input[type="checkbox"]:focus + label::before,
2303 .radio input[type="radio"]:focus + label::before {
2304 outline-color: $link_hover_color;
2308 color: $font_color_darker;
2311 input[type="range"].form-control {
2317 .form-control.form-search {
2318 border-radius: 30px;
2319 background-image: url(img/icon_search16x16.png);
2320 background-repeat: no-repeat;
2321 background-position: 10px 8px;
2324 .form-group-search {
2329 .form-group-search .form-button-search {
2333 border-radius: 30px;
2335 .search-input.form-control.form-search {
2343 .search-content-wrapper > #search-header-wrapper {
2346 .search-content-wrapper > .section-title-wrapper {
2349 #navbar-button > #search-save {
2352 /* Section-Content-Wrapper */
2353 #search-header-wrapper {
2355 padding-bottom: 20px;
2356 margin-bottom: 20px;
2358 background-color: rgba(255, 255, 255, $contentbg_transp);
2361 color: $font_color_darker;
2362 box-shadow: 0 0 3px #dadada;
2363 -webkit-box-shadow: 0 0 3px #dadada;
2364 -moz-box-shadow: 0 0 3px #dadada;
2371 section > .generic-page-wrapper,
2372 .videos-content-wrapper,
2373 .suggest-content-wrapper,
2374 .help-content-wrapper,
2375 .match-content-wrapper,
2376 .dirfind-content-wrapper,
2377 .delegation-content-wrapper,
2378 .notes-content-wrapper,
2379 .message-content-wrapper,
2380 .apps-content-wrapper,
2382 .delegate-content-wrapper,
2383 .uexport-content-wrapper,
2384 .dfrn_request-content-wrapper,
2385 .friendica-content-wrapper,
2386 .credits-content-wrapper,
2387 .nogroup-content-wrapper,
2388 .profperm-content-wrapper,
2389 .invite-content-wrapper,
2390 .tos-content-wrapper,
2391 .fsuggest-content-wrapper {
2392 min-height: calc(100vh - 150px);
2394 padding-bottom: 20px;
2395 margin-bottom: 20px;
2397 background-color: rgba(255, 255, 255, $contentbg_transp);
2400 color: $font_color_darker;
2401 box-shadow: 0 0 3px #dadada;
2402 -webkit-box-shadow: 0 0 3px #dadada;
2403 -moz-box-shadow: 0 0 3px #dadada;
2405 #content:hover .page-action.faded-icon {
2407 transition: all 0.25s ease-in-out;
2409 #content .page-action.faded-icon:hover {
2413 .section-title-wrapper {
2416 /* Home and Login Page */
2417 body.mod-home nav.navbar .nav > li > a:hover {
2418 background-color: rgba(255, 255, 255, 0.2);
2420 body.mod-home .navbar #nav-login,
2421 body.mod-login .navbar #nav-login {
2425 #profile-content-standard,
2426 #profile-content-advanced {
2431 margin-bottom: 20px;
2433 .contact-block-div.forumlist-profile-advanced {
2438 ul.viewcontact_wrapper {
2440 margin-right: -15px;
2442 ul.viewcontact_wrapper > li {
2445 .contact-wrapper .contact-photo-wrapper button {
2448 .contact-wrapper.media {
2450 word-wrap: break-word;
2453 /* bootstrap hack for .media */
2454 .contact-wrapper.media .media-body {
2455 display: table-cell;
2460 .contact-wrapper.media:before,
2465 .contact-wrapper.media:after {
2468 .contact-wrapper .contact-photo-image-wrapper img.contact-photo.xl {
2472 .contact-wrapper .contact-photo-image-wrapper img.contact-photo-xs {
2476 .contact-wrapper .contact-photo-overlay-content.xl {
2479 .contact-wrapper .contact-photo-menu {
2483 .contact-entry-desc {
2484 color: $font_color_darker;
2486 .contact-entry-checkbox {
2489 .contact-wrapper .media-body .contact-entry-name h4.media-heading a {
2490 font-weight: bold !important;
2492 font-size: 15px !important;
2494 .contact-wrapper .contact-actions {
2497 .contact-wrapper .contact-action-link,
2498 .contact-wrapper .contact-action-link:hover,
2499 .textcomplete-item .contact-wrapper .contact-action-link {
2501 color: $font_color_darker;
2504 .contact-wrapper .contact-action-link {
2506 transition: all 0.25s ease-in-out;
2508 ul li:hover .contact-wrapper .contact-action-link {
2510 transition: all 0.25s ease-in-out;
2512 ul li:hover .contact-wrapper .contact-action-link:hover {
2515 #contacts-search-wrapper,
2516 #directory-search-wrapper {
2521 #contact-edit-actions {
2524 #contact-edit-status-wrapper {
2526 background-color: rgba(225, 245, 254, $contentbg_transp);
2529 #contact-edit-settings {
2533 /* directory page */
2534 #directory-search-heading {
2538 /* group edit page */
2541 margin-bottom: 10px;
2544 .group-actions button,
2549 .contact-group-actions .fa-times-circle {
2552 .contact-group-actions .fa-plus-circle {
2556 #group-edit-wrapper {
2560 #group-edit-header {
2563 #group-update-wrapper .contact-photo-overlay {
2566 #group-update-wrapper .viewcontact_wrapper .contact-group-actions {
2569 flex-direction: column;
2570 justify-content: center;
2572 #group-update-wrapper .viewcontact_wrapper .contact-group-link {
2576 #group-update-wrapper .viewcontact_wrapper .contact-action-link:hover {
2579 #group-update-wrapper .shortmode {
2583 #group-update-wrapper .shortmode .contact-photo {
2587 #group-update-wrapper .shortmode .media {
2590 #group-update-wrapper .shortmode .contact-entry-desc {
2591 font-size: 12px !important;
2593 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading {
2596 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading a {
2597 font-size: 13px !important;
2598 white-space: nowrap;
2600 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-rel,
2601 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-network {
2606 .message-content-wrapper > li {
2607 /* we need this overwriting because we have no template file
2608 for the general mail page /message
2610 list-style-type: none;
2613 max-height: calc(100vh - 200px);
2615 #mail-conversation {
2617 max-height: calc(100vh - 400px);
2622 .mail-conv-wrapper .media .contact-photo-wrapper img {
2626 .mail-thread #prvmail-to-label,
2627 .mail-thread #prvmail-subject-label {
2630 .mail-thread #prvmail-message-label > label {
2633 .mail-thread #prvmail-message-label textarea {
2636 .mail-conv-wrapper {
2638 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2641 height: calc(100vh - 150px);
2644 height: calc(100% - 20px);
2646 #message-preview ul {
2649 #message-preview .media-list li {
2653 #message-preview .media-list li:hover {
2654 border-left: none !important;
2656 #message-preview .media-list li a {
2659 .mail-list-outside-wrapper {
2661 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2663 .mail-list-outside-wrapper .contact-photo-wrapper img {
2670 #modal #prvmail-text-edit-bb .bb-img {
2675 #photo-album-edit-name-label {
2678 .photo-album-edit-name {
2682 .photo-album-actions {
2683 margin-bottom: 10px;
2685 .photo-album-actions .photos-order-link {
2690 .fc .fc-month-view .fc-content .fc-title .item-desc:hover {
2691 color: $link_hover_color;
2693 .fc .fc-list-item-title a {
2696 .fc .fc-list-item-title a[href]:hover {
2697 color: $link_hover_color;
2698 text-decoration: none;
2700 .event-wrapper .event-owner {
2701 margin-bottom: 15px;
2703 .event-wrapper .event-owner img {
2712 .event-wrapper .vevent {
2715 box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
2717 .event-wrapper .event-buttons {
2720 #event-form-wrapper {
2723 #event-edit-form-wrapper {
2727 color: $font_color_darker;
2729 #event-edit-form-wrapper #event-edit-time {
2732 .event-buttons .plink-event-link {
2735 .vevent .event-summary {
2738 .vevent .event-description {
2741 .vevent .event-location .location {
2745 .modal-body .vevent .event-summary {
2748 #event-preview .vevent .event-summary {
2753 .event-card-details,
2754 .event-card-header {
2758 .event-card-left-date {
2761 .vevent .event-card-header {
2764 .event-card-left-date {
2765 width: 60px; /* Das muss wahrscheinlich unterschiedlich sein zwischen calendar und stream */
2767 .event-card .event-date-wrapper > span {
2771 white-space: nowrap;
2773 .event-card .event-date-wrapper .event-card-short-month {
2775 text-transform: uppercase;
2777 .event-card .event-date-wrapper.medium .event-card-short-date {
2782 .event-card .event-card-content {
2784 padding: 0 5px 0 15px;
2785 box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
2789 .event-card .event-card-content .event-map-btn {
2795 .event-card .event-card-title {
2797 color: $font_color_darker;
2802 .event-card .event-card-location {
2806 .event-card .event-card-location br {
2809 .event-card .event-card-location br::after {
2812 .event-card-profile-name a {
2815 .event-card-profile-name a:hover {
2816 color: $link_hover_color;
2818 .event-card .event-card-content .event-location-map {
2823 .event-card .event-card-content .event-location-map .map {
2826 .event-card .description {
2828 box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, 0.1) inset;
2841 transform: translateZ(0);
2842 transition: opacity 0.2s;
2847 text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
2849 .photo-next-link > i,
2850 .photo-prev-link > i {
2851 vertical-align: super;
2853 .photo-next-link > i {
2862 #photo-photo:hover .photo-next-link,
2863 #photo-photo:hover .photo-prev-link {
2866 #photo-photo .photo-next-link:hover,
2867 #photo-photo .photo-prev-link:hover {
2871 .photo-comment-wrapper .comment {
2874 .photo-comment-wrapper .wall-item-content {
2875 color: $font_color_darker;
2878 .photo-comment-wrapper .comment-wwedit-wrapper,
2879 .photo-comment-wrapper .wall-item-outside-wrapper.media:first-child {
2884 .profile-listing-table {
2888 .profile-listing-row {
2891 .profile-listing-cell {
2892 display: table-cell;
2894 .profile-listing-photo {
2899 #profile-listing-new-link-wrapper {
2900 margin-bottom: 20px;
2903 #profile-photo-upload-section {
2907 #profile-photo-upload-close {
2912 .section-subtitle-wrapper {
2915 details.profile-jot-net[open] summary:before,
2916 .panel .section-subtitle-wrapper .accordion-toggle:before {
2917 font-family: ForkAwesome;
2921 details.profile-jot-net summary:before,
2922 .panel .section-subtitle-wrapper .accordion-toggle.collapsed:before {
2923 font-family: ForkAwesome;
2926 details.profile-jot-net summary:before {
2930 details.profile-jot-net[open] summary:before {
2934 #settings-nick-wrapper {
2935 margin-bottom: 20px;
2941 /* Emulates Bootstrap display */
2944 background-color: rgba(255, 255, 255, $contentbg_transp);
2947 box-shadow: 0 0 3px #dadada;
2948 -webkit-box-shadow: 0 0 3px #dadada;
2949 -moz-box-shadow: 0 0 3px #dadada;
2952 .settings-block.fakelink,
2953 .settings-block > .fakelink {
2957 .settings-block > .fakelink {
2958 margin: -10px -15px 10px -15px;
2959 border-radius: 4px 4px 0 0;
2962 .settings-block.fakelink:hover,
2963 .settings-block > .fakelink:hover {
2964 color: $link_hover_color;
2966 .settings-block.fakelink > h3,
2967 .settings-block > .fakelink > h3 {
2974 .section-subtitle-wrapper > h2 {
2977 margin-bottom: 10px;
2980 .section-subtitle-wrapper > h3 {
2986 .fakelink > h3:before {
2987 padding-right: 10px;
2989 .widget.fakelink > h3:before {
2990 font-family: ForkAwesome;
2991 content: "\f0da"; /* Right Plain Pointer */
2993 .widget > .fakelink > h3:before,
2994 #sidebar-group-header > .fakelink > h3:before {
2995 font-family: ForkAwesome;
2996 content: "\f0d7"; /* Bottom Plain Pointer */
3003 /* Intro Notifications */
3004 ul.notif-network-list {
3006 margin-right: -15px;
3008 ul.notif-network-list > li {
3010 padding-right: 15px;
3012 .intro-wrapper.media {
3014 word-wrap: break-word;
3017 .intro-photo-wrapper img.intro-photo {
3025 .intro-enty-name h4 {
3026 font-size: 15px !important;
3028 .intro-wrapper button.intro-action-link {
3030 transition: all 0.25s ease-in-out;
3032 .intro-wrapper button.intro-action-link,
3033 .intro-wrapper button.intro-action-link:hover {
3036 color: $font_color_darker;
3038 ul li:hover .intro-wrapper button.intro-action-link {
3040 transition: all 0.25s ease-in-out;
3042 ul li:hover .intro-wrapper button.intro-action-link:hover {
3045 .intro-action-buttons {
3049 transition: max-height 0.1s ease-out;
3051 ul.notif-network-list > li:hover .intro-action-buttons {
3053 transition: max-height 0.1s ease-in;
3057 .intro-network-label,
3058 .intro-location-label,
3059 .intro-keywords-label,
3061 .intro-knowyou-label,
3062 .intro-madeby-label {
3065 .intro-contact-info.xs .intro-url-label,
3066 .intro-contact-info.xs .intro-network-label,
3067 .intro-contact-info.xs .intro-location-label,
3068 .intro-contact-info.xs .intro-keywords-label,
3069 .intro-contact-info.xs .intro-about-label,
3070 .intro-contact-info.xs .intro-knowyou-label {
3075 /* Notifications Page */
3076 ul.notif-network-list li.unseen {
3077 background-color: #e3eff3;
3079 .notif-item img.notif-image {
3084 .notif-item .notif-desc-wrapper {
3087 .notif-item .notif-desc-wrapper a {
3090 color: $font_color_darker;
3097 /* This is a little bit hacky. Since the search page is used for diferent
3098 content types we can't apply the generic-page-wrapper class.
3099 So we apply the css of the generic-page-wrapper class to the ul element with some
3100 little modifications to emulate a standard page template */
3101 .search-content-wrapper > ul.viewcontact_wrapper {
3102 min-height: calc(100vh - 150px);
3104 padding-bottom: 20px;
3106 margin-bottom: 20px;
3108 background-color: rgba(255, 255, 255, $contentbg_transp);
3111 color: $font_color_darker;
3112 box-shadow: 0 0 3px #dadada;
3113 -webkit-box-shadow: 0 0 3px #dadada;
3114 -moz-box-shadow: 0 0 3px #dadada;
3118 section.help-content-wrapper h1 {
3119 padding-bottom: 0.3em;
3121 border-bottom: 1px solid #ddd;
3123 section.help-content-wrapper h2 {
3124 padding-bottom: 0.3em;
3126 border-bottom: 1px solid #ddd;
3128 section.help-content-wrapper h3 {
3131 section.help-content-wrapper h4 {
3134 section.help-content-wrapper h1,
3135 section.help-content-wrapper h2,
3136 section.help-content-wrapper h3,
3137 section.help-content-wrapper h4,
3138 section.help-content-wrapper h5,
3139 section.help-content-wrapper h6 {
3141 margin-bottom: 16px;
3145 section.help-content-wrapper p {
3148 section.help-content-wrapper p,
3149 section.help-content-wrapper a,
3150 section.help-content-wrapper li {
3156 #adminpage #frio_background_image .image-select {
3159 #adminpage #frio_background_image.input-group {
3162 #admin-summary-wrapper {
3165 #adminpage ul#addonslist,
3169 #adminpage li .icon {
3170 display: inline-block;
3171 vertical-align: text-top;
3175 #adminpage li .icon:before {
3177 display: inline-block;
3184 border: 1px solid #cccccc;
3186 background-color: $background_color;
3187 -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3188 -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3189 transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3191 #adminpage li .icon.on:after {
3192 font-family: "ForkAwesome";
3194 display: inline-block;
3207 #adminpage .addon .desc {
3210 #admin-users #users tr.blocked {
3211 background-color: #f8efc0;
3213 .adminpage .table-hover > tbody > tr:hover + tr.details {
3214 background-color: #f5f5f5;
3216 .offset-anchor::before {
3222 pointer-events: none;
3230 #identity-selector-wrapper {
3235 #identity-selector-wrapper .identity-match-photo {
3239 #identity-selector-wrapper .identity-match-photo button {
3242 #identity-selector-wrapper .identity-match-photo .badge {
3247 #identity-selector-wrapper .identity-match-name {
3250 #identity-selector-wrapper .identity-match-details {
3256 #register-openid-wrapper,
3257 #register-name-wrapper,
3258 #register-invite-wrapper,
3259 #profile-publish-wrapper {
3262 #register-openid-end,
3263 #register-nickname-end {
3268 * Overwriting for transparency and other colors
3270 main .nav-tabs > li.active > a,
3271 main .nav-tabs > li.active > a:focus,
3272 main .nav-tabs > li.active > a:hover {
3273 background-color: rgba(255, 255, 255, $contentbg_transp);
3283 @media (min-width: 768px) {
3290 * Framework overwrite
3293 /* textcomplete for contact filtering*/
3294 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list {
3295 position: relative !important;
3296 top: inherit !important;
3297 bottom: inherit !important;
3298 left: inherit !important;
3301 margin-right: -15px;
3302 background-color: transparent;
3306 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li {
3308 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
3310 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li:first-child {
3313 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list .textcomplete-item > a {
3314 padding: 0 !important;
3316 background-color: transparent !important;
3318 /* this is a little hack for texcomplete contact filter
3319 There are for some reasons empty <a> tags. I don't know why */
3320 .textcomplete-item .contact-wrapper a {
3325 body .tread-wrapper .hovercard a,
3326 body .tread-wrapper .hovercard a:hover {
3329 body .tread-wrapper .hovercard:hover .hover-card-content a {
3330 color: $link_color !important;
3333 /* Pagination improvements */
3338 .pagination > li > a,
3339 .pagination > li > span {
3343 .pagination > li > a:hover,
3344 .pagination > li > span:hover {
3345 color: $link_hover_color;
3347 .pagination > .active > a,
3348 .pagination > .active > a:focus,
3349 .pagination > .active > a:hover,
3350 .pagination > .active > span,
3351 .pagination > .active > span:focus,
3352 .pagination > .active > span:hover {
3353 background-color: $link_color;
3354 border-color: $link_color;
3357 .pagination li.pager_n a {
3361 .pagination .pager_prev a {
3364 border-top-right-radius: 3px;
3365 border-bottom-right-radius: 3px;
3367 .pagination .pager_next a {
3370 border-top-left-radius: 3px;
3371 border-bottom-left-radius: 3px;
3374 .pager .previous > a {
3378 .pagination .disabled > a,
3379 .pager .disabled > a {
3385 background-color: rgba(255, 255, 255, $contentbg_transp);
3389 * some temporary workarounds until this will solved
3390 * elsewhere (e.g. new templates)
3392 section .profile-match-wrapper {
3399 #login-submit-wrapper {
3402 #lost-password-link {
3405 #login-lost-password-link {
3406 margin-bottom: 10px;
3412 #id_password_wrapper {
3413 margin-bottom: unset;
3420 background: #8ad0a1;
3427 .mod-home.is-not-singleuser,
3429 background-color: $login_bg_color;
3430 background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4)), url($login_bg_image);
3431 background-size: cover;
3432 background-attachment: fixed;
3433 background-position: center;
3436 .mod-home.is-not-singleuser nav.navbar,
3437 .mod-login nav.navbar {
3438 background-color: transparent;
3441 .mod-home.is-not-singleuser #topbar-second,
3442 .mod-login #topbar-second {
3443 background-color: transparent;
3447 .mod-home.is-not-singleuser .login-content,
3448 .mod-login .login-content {
3453 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3457 .mod-home.is-not-singleuser .login-form > #login-form label,
3458 .mod-login #content #login-form label {
3462 .mod-home.is-not-singleuser .login-panel-content,
3463 .mod-login .login-panel-content {
3464 background-color: rgba(255, 255, 255, 0.85);
3468 background: $nav_bg !important;
3469 color: $btn_primary_color !important;
3472 -webkit-box-shadow: none;
3474 -moz-box-shadow: none;
3475 background-image: none;
3483 width: 100% !important;
3486 .qq-upload-drop-area {
3487 background: white !important;
3490 -webkit-box-shadow: none;
3492 -moz-box-shadow: none;
3493 background-image: none;
3501 width: 100% !important;
3502 display: block !important;
3503 position: relative !important;
3504 border: black 1px dashed !important;
3505 margin-bottom: 5px !important;
3506 margin-top: 15px !important;
3510 * The different views of js fullcalendar
3514 margin-bottom: 10px;
3518 #event-calendar-title {
3519 display: inline-block;
3528 #fc-header-right .dropdown > button {
3531 #event-calendar-title {
3532 vertical-align: middle;
3534 #event-calendar-views {
3541 .fc .fc-month-view td.fc-widget-content,
3543 .fc .fc-list-view .fc-list-table td,
3547 .fc td.fc-widget-header,
3548 .fc th.fc-widget-header {
3553 .fc .fc-month-view td.fc-day {
3556 border-bottom: 1px solid;
3559 .fc .fc-day-grid-container .fc-row {
3560 border-bottom: 1px solid;
3563 .fc tr td.fc-today {
3566 .fc .fc-month-view .fc-content .fc-title .item-desc {
3569 .fc .fc-view-container {
3572 .fc .fc-list-view td {
3575 #events-calendar.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
3580 background-color: #e3f2fd;
3581 border: 1px solid #bbdefb;
3582 color: $font_color_darker;
3584 .fc .fc-month-view .fc-time,
3585 .fc .fc-listMonth-view .fc-list-item-time,
3586 .fc .fc-listMonth-view .fc-list-item-marker,
3587 .fc .fc-listMonth-view .fc-widget-header {
3590 .fc .fc-listMonth-view .fc-list-item:hover td {
3591 background: transparent;
3594 .fc .fc-listMonth-view .seperator {
3605 .event-card .event-label,
3606 .event-card .location-label {
3609 .popover.event-card .event-card-basic-content {
3614 .event-card .event-hover-location .location {
3620 .generic-page-wrapper.contact-follow-wrapper {
3624 /* Medium devices (desktops, 992px and up) */
3625 @media (min-width: 992px) {
3626 .mod-home.is-not-singleuser #content,
3627 .mod-login #content {
3628 margin-top: 100px !important;
3631 .mod-home.is-not-singleuser .login-form > #login-form,
3632 .mod-home.is-not-singleuser .login-form > #login-extra-links,
3633 .mod-login #content #login-form {
3634 background-color: #fff;
3638 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3640 background-color: white;
3643 .mod-home.is-not-singleuser .login-form > #login-form label,
3644 .mod-login #content #login-form label {
3648 .mod-home.is-not-singleuser .login-form::before,
3649 .mod-login #content #login-form::before {
3653 background-color: rgba(255, 255, 255, 0.1);
3661 .mod-home.is-not-singleuser .login-form::after,
3662 .mod-login #content #login-form::after {
3666 background-color: rgba(255, 255, 255, 0.2);
3675 /* Mobile display */
3676 @media (max-width: 600px) {
3684 #friendica-logo-mask {
3698 .panel .panel-body {
3702 .toplevel_item > .wall-item-container {
3710 .wall-item-actions {
3718 .generic-page-wrapper,
3719 .videos-content-wrapper,
3720 .suggest-content-wrapper,
3721 .help-content-wrapper,
3722 .match-content-wrapper,
3723 .dirfind-content-wrapper,
3724 .directory-content-wrapper,
3725 .delegation-content-wrapper,
3726 .notes-content-wrapper,
3727 .message-content-wrapper,
3728 .apps-content-wrapper,
3730 .delegate-content-wrapper,
3731 .uexport-content-wrapper,
3732 .dfrn_request-content-wrapper,
3733 .friendica-content-wrapper,
3734 .credits-content-wrapper,
3735 .nogroup-content-wrapper,
3736 .profperm-content-wrapper,
3737 .invite-content-wrapper,
3738 .tos-content-wrapper,
3739 .fsuggest-content-wrapper {
3799 .wwto .contact-photo {
3807 Prevent automatic zoom on input focus on iOS
3808 see https://stackoverflow.com/a/16255670
3814 .wall-item-container.thread_level_3,
3815 .wall-item-container.thread_level_4,
3816 .wall-item-container.thread_level_5,
3817 .wall-item-container.thread_level_6,
3818 .wall-item-container.thread_level_7 {