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);
80 display: none !important;
83 max-height: 0px !important;
84 overflow: hidden !important;
90 @media screen and (max-width: 990px) {
95 position: fixed !important;
97 background-color: $background_color;
104 padding-left: 6px !important;
105 padding-right: 6px !important;
115 background-color: rgba(0, 0, 0, 0.4);
117 transition: opacity 0.5s;
119 aside.canvas-slid::before {
123 /* prevent page scroll when the aside is opened **/
129 * standard page elements
135 color: $nav_icon_color;
142 padding: 0 12px 0 12px;
144 background-color: $nav_bg;
148 #item-delete-selected {
157 padding: 0 12px 0 12px;
159 background-color: $link_color;
164 #toggle_mobile_link {
169 * Overwriting and Extend Bootstrap
181 -webkit-box-shadow: none;
183 -moz-box-shadow: none;
184 background-image: none;
194 outline-color: $link_hover_color;
217 background-color: #ae0f0f;
222 color: $btn_primary_color;
224 .btn.btn-primary:hover,
225 .btn.btn-primary:focus {
226 color: $btn_primary_color;
227 background: $btn_primary_hover_color;
228 text-decoration: none;
230 .btn.btn-primary:active,
231 .btn.btn-primary.active {
232 background: $btn_primary_hover_color;
235 .btn-primary.active.focus,
236 .btn-primary.active:focus,
237 .btn-primary.active:hover,
238 .btn-primary:active.focus,
239 .btn-primary:active:focus,
240 .btn-primary:active:hover,
241 .open > .dropdown-toggle.btn-primary.focus,
242 .open > .dropdown-toggle.btn-primary:focus,
243 .open > .dropdown-toggle.btn-primary:hover,
246 .open > .dropdown-toggle.btn-primary {
247 background: $btn_primary_hover_color;
260 background: transparent;
267 background-color: transparent;
271 border-left: 1px solid #777;
275 border: 1px solid transparent;
284 .toggle .toggle-off:hover {
286 background-color: #eee;
289 .toggle.off .toggle-handle {
290 background-color: #eee;
293 background-color: #fff;
295 border: 1px solid transparent;
299 .input-group-sm > .form-control,
300 .input-group-sm > .input-group-addon,
301 .input-group-sm > .input-group-btn > .btn {
302 padding: 0.275rem 0.75rem;
305 border-radius: 0.2rem;
307 /* Bootstrap media class fix/hack
308 * This is a test. I thought it does have some
309 * issues in some corner cases. Maybe we remove
311 * https://github.com/twbs/bootstrap/issues/6053
334 vertical-align: baseline;
335 background-color: $link_color;
343 /* disabled elements */
344 .community-content-wrapper > h3,
345 .network-content-wrapper > .section-title-wrapper {
349 header #site-location {
360 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
362 font-family: tahoma, "Lucida Sans", sans;
368 header #banner #logo-img,
369 .navbar-brand #logo-img {
370 -webkit-mask-image: url("img/friendica-25.png");
371 background-color: $nav_icon_color;
378 #navbrand-container {
381 #navbrand-container #navbar-brand-text {
383 color: $nav_icon_color;
386 /* offcanvas section */
388 /* Right offcanvas uses: #offcanvasUsermenu, .offcanvas-right-active
389 .offcanvas-right and .offcanvas-right-overlay */
398 background-color: #333;
399 transform: translateX(-100%);
400 transition: 0.4s ease-in-out;
411 background-color: #333;
412 transform: translateX(100%);
413 transition: 0.4s ease-in-out;
416 .offcanvas-active .off-canvas {
417 transform: translateX(0);
419 .offcanvas-right-active #offcanvasUsermenu {
420 transform: translateX(0);
423 transition: 0.4s ease-in-out;
428 transition: 0.4s ease-in-out;
430 .offcanvas-active .page-wrapper,
431 .offcanvas-active .navbar-fixed-top {
432 transform: translateX(300px);
441 background-color: rgba(0, 0, 0, 0.5);
445 transition: 0.4s ease-in-out;
447 .offcanvas-right-overlay {
453 background-color: rgba(0, 0, 0, 0.5);
457 transition: 0.4s ease-in-out;
459 .offcanvas-active .offcanvas-overlay,
460 .offcanvas-right-active .offcanvas-right-overlay {
464 /* offcanvas section ends */
478 .topbar ul.nav > li {
481 @media (min-width: 992px) {
482 .topbar ul.nav > li > a,
483 .topbar ul.nav > li > button {
485 padding-bottom: 15px;
489 @media (max-width: 991px) {
490 .topbar ul.nav > li > a,
491 .topbar ul.nav > li > button {
495 .topbar .dropdown-footer {
498 .topbar .dropdown-header {
505 .topbar .dropdown-header .dropdown-header-link {
510 .topbar .dropdown-header .dropdown-header-link a,
511 .topbar .dropdown-header .dropdown-header-link .btn-link {
512 color: $link_color !important;
516 .topbar .dropdown-header:hover {
521 background-color: $nav_bg;
524 color: $nav_icon_color;
526 @media screen and (max-width: 767px) {
533 #topbar-first .navbar-toggle {
538 #topbar-first .nav > li > a,
539 #topbar-first .nav > li > button,
540 nav.navbar .nav > li > a,
541 nav.navbar .nav > li > button {
542 color: $nav_icon_color;
544 #topbar-first .nav > .open > a,
545 #topbar-first .nav > .open > button {
546 background-color: $nav_bg;
548 #topbar-first .nav > li > a:hover,
549 #topbar-first .nav > li > a:focus,
550 #topbar-first .nav > li > button:not(#main-menu):hover,
551 #topbar-first .nav > li > button:not(#main-menu):focus,
552 nav.navbar .nav > li > a:hover,
553 nav.navbar .nav > li > a:focus,
554 nav.navbar .nav > li > button:hover,
555 nav.navbar .nav > li > button:focus {
556 background-color: $nav_icon_hover_color;
558 #topbar-first .nav > .account {
562 #topbar-first .nav > .account img {
568 #topbar-first .nav > .account .dropdown-toggle {
569 padding: 8px 5px 0px;
573 #topbar-first .nav > .account .dropdown-toggle span {
576 #topbar-first .topbar-brand {
580 #topbar-first .topbar-actions {
584 #topbar-first .topbar-nav {
590 #topbar-first .topbar-nav .nav-segment {
594 #topbar-first .topbar-nav .nav-segment > a {
595 display: inline-block;
596 text-decoration: none;
599 #topbar-first .topbar-nav .nav-segment .nav-notification {
603 background-color: #ff3535;
605 #topbar-first #intro-update {
608 #topbar-first .topbar-nav .arrow:after {
613 border-color: transparent;
620 border-bottom-color: #fff;
623 #topbar-first .topbar-nav .arrow {
628 border-color: transparent;
635 border-bottom-color: rgba(0, 0, 0, 0.15);
639 #topbar-first .topbar-nav .dropdown-menu {
643 #topbar-first .topbar-nav .dropdown-menu ul.media-list {
647 #topbar-first .topbar-nav .dropdown-menu li {
650 #topbar-first .topbar-nav .dropdown-menu li i.approval {
656 #topbar-first .topbar-nav .dropdown-menu li i.accepted {
659 #topbar-first .topbar-nav .dropdown-menu li i.declined {
662 #topbar-first .topbar-nav .dropdown-menu li .media {
665 #topbar-first .topbar-nav .dropdown-menu li .media .img-space {
670 #topbar-first .dropdown-footer {
671 margin: 10px 10px 5px;
673 #topbar-first .caret {
674 border-top-color: #bebebe;
676 #topbar-first .btn-group > a {
677 background-color: #7f9baa;
679 #topbar-first .btn-enter {
680 background-color: #7f9baa;
683 #topbar-first .btn-enter:hover {
684 background-color: #89a2b0;
686 .navbar-fixed-top ul.nav.navbar-nav.navbar-right {
690 #friendica-logo-mask {
694 /* Notification Menu */
695 #topbar-first #nav-notifications-menu {
698 #topbar-first #nav-notifications-menu a {
699 color: $font_color_darker;
702 #topbar-first #nav-notifications-menu li.notif-entry {
703 color: $font_color_darker;
705 border-bottom: 1px solid #eee;
707 border-left: 3px solid #fff;
711 #topbar-first #nav-notifications-menu li.notification-unseen {
712 border-left: 3px solid #e3eff3;
713 background-color: #e3eff3;
715 #topbar-first #nav-notifications-menu li.notif-entry:hover {
716 background-color: #f7f7f7;
717 border-left: 3px solid $link_color;
719 #topbar-first #nav-notifications-menu li.placeholder {
722 #topbar-first #nav-notifications-menu .media .media-body .contactname {
725 #topbar-first #nav-notifications-menu .media .media-body .label {
726 padding: 0.1em 0.5em;
728 #topbar-first #nav-notifications-menu li.notif-entry .media-object a img {
733 /* The Top Nav Bar user menu */
734 #topbar-first .account .user-title {
738 #topbar-first .account .user-title span {
739 color: $nav_icon_color;
741 #topbar-first .account #main-menu .nav-notification {
745 background-color: #ff8989;
749 background-color: $background_color;
753 border-left-color: $nav_icon_color;
754 box-shadow: -3px 0 3px -3px black;
756 #offcanvasUsermenu .nav-container {
757 /* required to compensate for moving the container below the topnav bar */
760 #offcanvasUsermenu li.divider {
761 background-color: transparent;
765 #offcanvasUsermenu ul,
766 #offcanvasUsermenu ul li:first-child,
767 #offcanvasUsermenu ul,
768 #offcanvasUsermenu ul li:last-child {
771 #offcanvasUsermenu li,
772 #offcanvasUsermenu a {
773 background-color: $nav_bg;
774 color: $nav_icon_color;
777 #offcanvasUsermenu li.list-group-item {
778 border-color: $background_color;
780 #offcanvasUsermenu a {
783 #offcanvasUsermenu li.nav-sitename {
786 #topbar-first .dropdown.account li#nav-sitename {
790 word-break: break-word;
792 #topbar-first .dropdown.account li#nav-sitename:hover {
794 background-color: $nav_bg;
797 #topbar-first #search-box .navbar-form {
808 background-color: $background_color;
810 /* fix bootstrap .well class not playing well with data-target slide animation */
816 #search-mobile .navbar-form {
819 #topbar-first #search-box .form-search {
822 background-position: 8px 4px;
824 #topbar-first #search-box .btn {
833 background-color: #fff;
835 background-image: none;
836 -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
837 -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
838 box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
839 border-bottom: 1px solid #d4d4d4;
841 #topbar-second > .container {
844 @media screen and (max-width: 767px) {
845 #topbar-second > .container,
846 #topbar-second #navbar-button {
850 #topbar-second .dropdown-menu {
854 #topbar-second .dropdown-menu .divider {
857 #topbar-second #space-menu-dropdown,
858 #topbar-second #search-menu-dropdown {
861 #topbar-second #space-menu-dropdown .media-list,
862 #topbar-second #search-menu-dropdown .media-list {
870 .intro-wrapper button.intro-action-link {
874 ul li .intro-wrapper button.intro-action-link {
877 @media screen and (max-width: 768px) {
878 #topbar-second #space-menu-dropdown .media-list,
879 #topbar-second #search-menu-dropdown .media-list {
883 #topbar-second #space-menu-dropdown form,
884 #topbar-second #search-menu-dropdown form {
887 #topbar-second #space-menu-dropdown .search-reset,
888 #topbar-second #search-menu-dropdown .search-reset {
897 #topbar-second #space-menu-dropdown li > ul > li > a > .media .media-body p {
903 #topbar-second #nav-short-info .heading {
908 text-overflow: ellipsis;
910 #topbar-second #tabmenu .heading {
912 text-overflow: ellipsis;
919 .nav > li > .btn-link {
924 .nav .open > .btn-link {
925 background-color: #eee;
926 border-color: #337ab7;
928 .nav-pills > li > .btn-link {
931 .nav-pills .dropdown-menu,
932 .nav-tabs .dropdown-menu,
933 .account .dropdown-menu,
934 .contact-photo-wrapper .dropdown-menu {
935 background-color: $nav_bg;
938 .nav-pills .dropdown-menu li.divider,
939 .nav-tabs .dropdown-menu li.divider,
940 .account .dropdown-menu li.divider,
941 .contact-photo-wrapper .dropdown-menu li.divider {
942 background-color: $menu_background_hover_color;
944 margin: 9px 1px !important;
946 .nav-pills .dropdown-menu li > a,
947 .nav-tabs .dropdown-menu li > a,
948 .account .dropdown-menu li > a,
949 .contact-photo-wrapper .dropdown-menu li > a {
950 border-left: 3px solid $nav_bg;
952 .nav-pills .dropdown-menu li a,
953 .nav-pills .dropdown-menu li .btn-link,
954 .nav-tabs .dropdown-menu li a,
955 .nav-tabs .dropdown-menu li .btn-link,
956 .account .dropdown-menu li a,
957 .account .dropdown-menu li .btn-link,
958 .contact-photo-wrapper .dropdown-menu li a,
959 .contact-photo-wrapper .dropdown-menu li .btn-link {
960 color: $nav_icon_color;
967 .nav-pills .dropdown-menu li a i,
968 .nav-pills .dropdown-menu li .btn-link i,
969 .nav-tabs .dropdown-menu li a i,
970 .nav-tabs .dropdown-menu li .btn-link i,
971 .account .dropdown-menu li a i,
972 .account .dropdown-menu li .btn-link i,
973 .contact-photo-wrapper .dropdown-menu li a i,
974 .contact-photo-wrapper .dropdown-menu li .btn-link i {
977 display: inline-block;
980 .nav-pills .dropdown-menu li > a:hover,
981 .nav-tabs .dropdown-menu li > a:hover,
982 .account .dropdown-menu li > a:hover,
983 .contact-photo-wrapper .dropdown-menu li > a:hover,
984 .nav-pills .dropdown-menu li.selected a,
985 .nav-tabs .dropdown-menu li.selected a,
986 .account .dropdown-menu li.selected a,
987 .contact-photo-wrapper .dropdown-menu li.selected a {
988 border-left: 3px solid $link_color;
990 background: $menu_background_hover_color;
992 #photo-edit-link-wrap {
993 color: $font_color_darker;
1008 .nav-container .widget {
1011 background-color: rgba(255, 255, 255, $contentbg_transp);
1012 box-shadow: 0 0 3px #dadada;
1013 -webkit-box-shadow: 0 0 3px #dadada;
1014 -moz-box-shadow: 0 0 3px #dadada;
1017 margin-bottom: 20px;
1023 .nav-container .widget h3 {
1027 padding-bottom: 20px;
1031 .nav-container .widget ul {
1036 margin-right: -10px;
1041 .nav-container .widget li {
1043 padding-bottom: 2px;
1045 padding-right: 10px;
1047 aside .widget li:hover,
1048 aside .widget li.selected,
1049 .nav-container .widget li:hover {
1051 color: $font_color_darker;
1052 background-color: rgba(247, 247, 247, $contentbg_transp);
1053 border-left: 3px solid $link_color !important;
1057 aside .widget li a:hover {
1058 color: $font_color_darker;
1061 /* forumlist widget */
1062 aside > #datebrowse-sidebar li.posted-date-selector-months {
1063 margin-bottom: 10px;
1067 aside > #datebrowse-sidebar li.posted-date-selector-months:hover {
1068 border-left: none !important;
1069 background-color: transparent !important;
1071 aside > #datebrowse-sidebar .posted-date-selector-months > ul {
1074 aside > #datebrowse-sidebar .posted-date-selector-months > ul > li {
1077 aside > #datebrowse-sidebar .posted-date-selector-months > ul > li:hover {
1082 -webkit-filter: grayscale(100%);
1083 filter: grayscale(100%);
1085 filter: alpha(opacity=50); /* For IE8 and earlier */
1086 -webkit-transition: all 0.2s ease-in-out;
1087 -moz-transition: all 0.2s ease-in-out;
1088 -o-transition: all 0.2s ease-in-out;
1089 -ms-transition: all 0.2s ease-in-out;
1090 transition: all 0.2s ease-in-out;
1092 #forumlist-sidbar-ul li:hover a > .forumlist-img {
1093 -webkit-filter: unset;
1098 /* help page widget */
1099 aside > .help-aside-wrapper p strong:first-child {
1103 aside > .help-aside-wrapper h1 {
1107 padding: 20px 0 10px;
1109 aside > .help-aside-wrapper h2 {
1114 /* vcard / h-card */
1115 aside .vcard #profile-photo-wrapper {
1118 aside .vcard img.u-photo,
1119 aside img.vcard-photo {
1123 aside .vcard .tool .action {
1130 background: rgba(0, 0, 0, 0.5);
1134 -webkit-transition: all 0.25s ease-in-out;
1135 -moz-transition: all 0.25s ease-in-out;
1136 -o-transition: all 0.25s ease-in-out;
1137 -ms-transition: all 0.25s ease-in-out;
1138 transition: all 0.25s ease-in-out;
1140 aside .vcard .tool a {
1141 color: rgba(255, 255, 255, 0.85);
1143 aside .vcard #profile-photo-wrapper:hover .tool .action {
1146 aside .vcard #profile-photo-wrapper.crop-preview {
1149 aside .vcard .profile-header {
1150 padding: 5px 0px 20px 0px;
1154 padding: 5px 0px 5px 0px;
1156 aside .vcard .p-addr {
1159 text-overflow: ellipsis;
1160 white-space: nowrap;
1161 padding-bottom: 2px;
1163 aside .vcard .title {
1166 aside .vcard .detail {
1170 aside .xmpp, aside .matrix {
1173 aside .vcard .icon {
1174 display: table-cell;
1175 padding-right: 10px;
1178 #profile-extra-links {
1180 margin-bottom: 10px;
1182 aside .vcard #dfrn-request-link-button,
1183 aside .vcard #wallmessage-link-botton {
1189 aside .vcard #dfrn-request-link,
1190 aside .vcard #wallmessage-link {
1193 /* vcard-short-info */
1195 #nav-short-info .contact-wrapper {
1198 white-space: nowrap;
1200 padding-right: 20px;
1203 #nav-short-info .contact-photo-wrapper.media-left {
1206 #vcard-short-photo-wrapper img,
1207 #nav-short-info .contact-wrapper img {
1213 #nav-short-info .contact-wrapper .media-body {
1217 text-overflow: ellipsis;
1219 #vcard-short-desc > .media-heading,
1220 #vcard-short-desc > .vcard-short-addr,
1221 #nav-short-info .contact-wrapper .media-heading,
1222 #nav-short-info .contact-wrapper #contact-entry-url-network {
1223 text-overflow: ellipsis;
1226 #vcard-short-desc > .media-heading,
1227 #nav-short-info .contact-wrapper .media-heading {
1231 #nav-short-info .contact-wrapper .media-heading a {
1232 color: $font_color_darker;
1233 font-size: 14px !important;
1235 #vcard-short-desc > .vcard-short-addr,
1236 #nav-short-info .contact-wrapper #contact-entry-url-network {
1240 .network-content-wrapper > #viewcontact_wrapper-network,
1241 #nav-short-info .contact-wrapper .contact-photo-overlay,
1242 #nav-short-info .contact-wrapper .contact-actions {
1246 aside #peoplefind-sidebar input,
1247 aside #follow-sidebar input {
1249 background-position: 10px 5px;
1251 aside #peoplefind-sidebar label,
1252 aside #follow-sidebar label {
1253 font-weight: normal;
1255 aside #peoplefind-sidebar .form-group-search .form-button-search,
1256 aside #follow-sidebar .form-group-search .form-button-search {
1260 div#sidebar-group-header h3 {
1264 div#sidebar-group-list {
1273 color: $font_color_darker;
1277 color: $font_color_darker;
1279 transition: all 0.1s ease-in-out;
1282 color: $font_color_darker;
1289 aside #group-sidebar .sidebar-group-li:hover .group-edit-tool.faded-icon,
1290 aside #saved-search-list .saved-search-li:hover .savedsearchdrop.faded-icon,
1291 aside .widget:hover .widget-action.faded-icon {
1293 transition: all 0.25s ease-in-out;
1295 aside #group-sidebar .sidebar-group-li .group-edit-tool.faded-icon:hover,
1296 aside #saved-search-list .saved-search-li .savedsearchdrop.faded-icon:hover,
1297 aside .widget .widget-action.faded-icon:hover {
1300 aside #group-sidebar li .group-checkbox {
1303 aside #group-sidebar li .group-edit-tool {
1304 padding-right: 10px;
1306 aside #group-sidebar li .group-edit-tool:first-child {
1310 /* contact block widget */
1311 .contact-block-content {
1316 .contact-block-div {
1318 margin: 0px 5px 5px 0px;
1320 .contact-block-link {
1322 .contact-block-img {
1328 /* Tag cloud widget */
1329 .tagblock.widget > .tag-cloud {
1334 display: none !important;
1348 .modal #jot-sections {
1349 max-height: calc(100vh - 22px);
1351 @media (min-width: 768px) {
1352 .modal #jot-sections {
1353 max-height: calc(100vh - 62px);
1356 #jot-modal #jot-sections,
1357 #jot-modal #jot-modal-body,
1358 #jot-modal #profile-jot-form,
1359 #jot-modal #profile-jot-wrapper,
1360 #jot-modal #jot-text-wrap,
1361 #jot-modal #jot-preview-content,
1362 #jot-modal #tread-wrapper--1,
1363 #jot-modal #item-Q0,
1364 #jot-modal #profile-jot-acl-wrapper,
1365 #jot-modal #acl-wrapper {
1369 flex-direction: column;
1371 #jot-modal .modal-header a,
1372 #jot-modal .modal-header .btn-link,
1373 #profile-jot-submit-wrapper a,
1374 #profile-jot-submit-wrapper .btn-link {
1375 color: $font_color_darker;
1377 #jot-modal .modal-header {
1378 border-bottom: none;
1380 #jot-modal .modal-header .compose-link {
1385 #jot-category-wrap {
1391 #jot-text-wrap textarea {
1393 overflow-y: auto !important;
1394 overflow-y: overlay !important;
1396 #jot-text-wrap .preview textarea {
1399 #preview_profile-jot-text,
1400 .comment-edit-form .preview {
1404 border: 2px solid #ededed;
1407 border-radius: 0 0 4px 4px;
1409 color: $font_color_darker;
1411 textarea#profile-jot-text:focus + #preview_profile-jot-text,
1412 textarea.comment-edit-text:focus + .comment-edit-form .preview {
1413 border: 2px solid #6fdbe8;
1416 .preview hr.previewseparator {
1418 border-color: #d2d2d2;
1420 #previewImgBtn_profile-jot-text,
1432 .preview button.previewActionBtn {
1438 border: 2px solid #fff;
1439 box-shadow: 0 0 3px gray;
1443 text-decoration: none;
1444 padding: 0 0 1px 1px;
1447 .preview button.previewActionBtn:hover {
1450 .preview .closePreview button.previewActionBtn {
1453 #previewInputTitle_profile-jot-text {
1456 #profile-jot-wrapper button#profile-jot-submit {
1459 #profile-jot-wrapper #character-counter {
1462 .modal .wall-item-container.preview {
1464 overflow-y: overlay;
1468 font-family: ForkAwesome;
1472 font-family: ForkAwesome;
1476 #acl-wrapper label.panel-heading {
1483 .fbrowser .breadcrumb {
1486 .fbrowser .path a:before {
1490 .fbrowser .breadcrumb > li:last-of-type a {
1492 pointer-events: none;
1495 .fbrowser .folders {
1496 box-shadow: -1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
1499 .fbrowser .folders ul {
1505 max-height: calc(100vh - 210px);
1508 @media (min-width: 768px) {
1509 .fbrowser .folders ul {
1510 max-height: calc(100vh - 255px);
1513 .fbrowser .folders li {
1515 padding-right: 10px;
1517 padding-bottom: 3px;
1519 .fbrowser .folders li:hover {
1521 color: $font_color_darker;
1522 background-color: rgba(247, 247, 247, $contentbg_transp);
1523 border-left: 3px solid $link_color;
1526 .fbrowser .folders li a,
1527 .fbrowser .folders li a:hover {
1528 color: $font_color_darker;
1531 .fbrowser .folders + .list {
1534 .fbrowser .fbrowser-content-container {
1536 max-height: calc(100vh - 175px);
1538 @media (min-width: 768px) {
1539 .fbrowser .fbrowser-content-container {
1540 max-height: calc(100vh - 220px);
1543 .fbrowser.image .photo-album-image-wrapper {
1544 box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.2);
1546 .fbrowser.image .photo-album-image-wrapper .caption {
1547 pointer-events: none;
1549 .fbrowser .profile-rotator-wrapper {
1552 .fbrowser .fa-spin {
1565 background-color: rgba(255, 255, 255, $contentbg_transp);
1566 box-shadow: 0 0 2px #dadada;
1567 -webkit-box-shadow: 0 0 2px #dadada;
1568 -moz-box-shadow: 0 0 2px #dadada;
1572 .panel.panel-inline {
1574 margin-right: -15px;
1578 .panel .panel-body {
1579 word-wrap: break-word;
1581 .tread-wrapper .media {
1583 word-wrap: break-word;
1589 /* Thread hover effects */
1590 .desktop-view .wall-item-container .wall-item-content a,
1591 .desktop-view .wall-item-name,
1592 .desktop-view .wall-item-container .fakelink,
1593 .desktop-view .toplevel_item .fakelink,
1594 .desktop-view .toplevel_item .wall-item-container .wall-item-responses a {
1596 -webkit-transition: all 0.25s ease-in-out;
1597 -moz-transition: all 0.25s ease-in-out;
1598 -o-transition: all 0.25s ease-in-out;
1599 -ms-transition: all 0.25s ease-in-out;
1600 transition: all 0.25s ease-in-out;
1603 .toplevel_item:hover .fakelink,
1604 .wall-item-container:hover .fakelink,
1605 .toplevel_item:hover .wall-item-container:hover .wall-item-responses a,
1606 .toplevel_item:hover .wall-item-content a,
1607 .toplevel_item:hover .wall-item-name,
1608 .wall-item-container:hover .wall-item-content a,
1609 .wall-item-container:hover .wall-item-name,
1610 .wall-item-container:hover .wall-item-location a {
1612 -webkit-transition: all 0.25s ease-in-out;
1613 -moz-transition: all 0.25s ease-in-out;
1614 -o-transition: all 0.25s ease-in-out;
1615 -ms-transition: all 0.25s ease-in-out;
1616 transition: all 0.25s ease-in-out;
1620 .wall-item-container {
1621 border-top: 1px solid rgba(255, 255, 255, 0.8);
1624 .wall-item-container.panel-body {
1629 .comment-edit-preview .wall-item-container.panel-body.preview {
1632 .comment-edit-preview .panel {
1636 .wall-item-container .media {
1639 background-color: rgba(0, 0, 0, 0.03);
1642 /* wall items contact photo */
1647 /*maybe some adional stuff is needed for the different screen sizes */
1649 .contact-photo-image-wrapper {
1656 .contact-photo-overlay {
1664 background: rgba(0, 0, 0, 0.5);
1667 -webkit-transition: opacity 0.25s ease;
1668 -moz-transition: opacity 0.25s ease;
1670 .contact-photo-overlay:hover {
1673 .contact-photo-overlay-content {
1675 text-shadow: 1px 1px 1px #ccc;
1676 color: rgba(255, 255, 255, 0.85);
1678 vertical-align: bottom;
1685 .wwto .contact-photo {
1693 display: inline-block;
1696 /* wall items action dropdown menu */
1697 .media [role="heading"] {
1701 /* Workaround for Firefox where the post heading covers the avatar, preventing hovercard interaction,
1702 48px is the width of the avatar image and should be adjusted accordingly if it ever changes. */
1703 .media .dropdown.pull-left + [role="heading"] {
1716 margin-bottom: 10px;
1720 blockquote.shared_content {
1722 margin-inline-start: 0px;
1726 .wall-item-network {
1730 /* wall items contact info */
1731 .media .media-body {
1734 .media .media-body h4.media-heading {
1737 color: $font_color_darker;
1739 .media .media-body .addional-info a,
1740 .media .media-body h5.media-heading > a {
1743 .media .contact-info-comment {
1744 display: table-cell;
1746 .media .contact-info-xs h5,
1747 .media .contact-info-comment {
1758 .wall-item-name.xs {
1763 /* Contact avatar click card */
1764 .userinfo.click-card {
1768 .userinfo.click-card > *:hover:after {
1773 background-color: #ffffff;
1782 border-radius: 0 0 40% 0;
1785 /* The lock symbol popup */
1789 background-color: $nav_bg;
1799 color: $nav_icon_color;
1803 /* Space between content and head */
1808 /* wall items content */
1809 .wall-item-content {
1810 word-break: break-word;
1812 .wall-item-content img {
1813 object-fit: contain;
1815 .wall-item-body > img,
1816 .wall-item-body > a > img {
1819 .wall-item-body .body-attach > a {
1820 color: $font_color_darker;
1821 display: inline-block;
1823 .wall-item-body .body-attach > a div {
1824 color: $font_color_darker;
1828 /* wall-item content elements */
1836 box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.1) inset, 0 1px 1px rgba(0, 0, 0, 0.05);
1838 @media screen and (max-width: 767px) {
1844 margin: 5px -10px 0;
1848 box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.05);
1851 padding: 10px 10px 1px 0;
1856 .type-link img.attachment-image {
1859 .type-link blockquote,
1860 .type-video blockquote {
1864 .oembed.video .embed_video > div::before {
1865 font-family: ForkAwesome;
1866 font-weight: normal;
1868 display: inline-block;
1869 text-decoration: inherit;
1870 vertical-align: top;
1878 .oembed.video .embed_video > div {
1879 background-color: rgba(0, 0, 0, 0.2);
1880 -webkit-transition: all 0.25s ease-in-out;
1881 -moz-transition: all 0.25s ease-in-out;
1882 -o-transition: all 0.25s ease-in-out;
1883 -ms-transition: all 0.25s ease-in-out;
1884 transition: all 0.25s ease-in-out;
1886 .oembed.video .embed_video > div:hover {
1887 background-color: rgba(0, 0, 0, 0);
1889 .oembed.video .embed_video.active {
1892 .oembed.video .embed_video.active iframe {
1893 width: 100% !important;
1902 color: $font_color_darker;
1905 .wall-item-tags a:hover {
1906 text-decoration: none;
1908 .wall-item-bottom .label,
1909 .wall-item-bottom .label a {
1912 .wall-item-tags .category,
1913 .wall-item-tags .folder {
1917 /* item social action buttons */
1918 .wall-item-actions {
1921 justify-content: space-between;
1923 .wall-item-actions a,
1924 .wall-item-actions button {
1926 color: $font_color_darker;
1928 .wall-item-actions .active {
1932 .wall-item-actions-left {
1933 display: table-cell;
1934 vertical-align: middle;
1936 .wall-item-actions-right {
1939 .wall-item-actions .checkbox {
1943 .wall-item-actions button:hover {
1944 color: $font_color_darker;
1945 text-decoration: underline;
1947 .wall-item-actions .separator {
1951 .wall-item-responses > div > p {
1955 /* wall item hover effects */
1957 @media (min-width: 768px) {
1958 /* Tags and mentions */
1959 .wall-item-container .wall-item-bottom .wall-item-tags span.label {
1960 filter: grayscale(0.5);
1963 -webkit-transition: all 0.25s ease-in-out;
1964 -moz-transition: all 0.25s ease-in-out;
1965 -o-transition: all 0.25s ease-in-out;
1966 -ms-transition: all 0.25s ease-in-out;
1967 transition: all 0.25s ease-in-out;
1970 .wall-item-container:hover .wall-item-bottom .wall-item-tags span.label {
1971 filter: grayscale(0);
1974 -webkit-transition: all 0.25s ease-in-out;
1975 -moz-transition: all 0.25s ease-in-out;
1976 -o-transition: all 0.25s ease-in-out;
1977 -ms-transition: all 0.25s ease-in-out;
1978 transition: all 0.25s ease-in-out;
1980 /* Like/Comment/etc buttons */
1981 .wall-item-container .wall-item-links,
1982 .wall-item-container .wall-item-actions button > a {
1985 -webkit-transition: all 0.25s ease-in-out;
1986 -moz-transition: all 0.25s ease-in-out;
1987 -o-transition: all 0.25s ease-in-out;
1988 -ms-transition: all 0.25s ease-in-out;
1989 transition: all 0.25s ease-in-out;
1991 .wall-item-container:hover .wall-item-links,
1992 .wall-item-container:hover .wall-item-actions button > a {
1995 -webkit-transition: all 0.25s ease-in-out;
1996 -moz-transition: all 0.25s ease-in-out;
1997 -o-transition: all 0.25s ease-in-out;
1998 -ms-transition: all 0.25s ease-in-out;
1999 transition: all 0.25s ease-in-out;
2001 .wall-item-container .wall-item-body .body-attach > a:hover {
2009 wall-item-comment-wrapper.well {
2012 background-color: rgba(237, 237, 237, $contentbg_transp);
2013 background-image: none;
2015 background-color: red;
2017 wall-item-comment-wrapper.well-small {
2021 wall-item-comment-wrapper.well hr {
2022 border-top: 1px solid #d9d9d9;
2024 .wall-entry wall-item-comment-wrapper.well {
2027 .comment-container {
2029 border-top-left-radius: 3px;
2030 border-top-right-radius: 3px;
2031 border-bottom-right-radius: 0px;
2032 border-bottom-left-radius: 0px;
2035 position: relative !important;
2038 .hide-comments-outer {
2039 background-color: rgba(0, 0, 0, 0.03);
2041 border-radius: 0.5em 0.5em 0 0;
2043 .hide-comments-total {
2052 .wall-item-comment-wrapper {
2054 border-top: 1px solid rgba(255, 255, 255, 0.8);
2055 background-color: rgba(0, 0, 0, 0.03);
2056 border-radius: 0 0 4px 4px;
2060 .comment-fake-form {
2061 border-color: #d9d9d9;
2063 .comment-fake-form textarea {
2067 .comment-container .wall-item-comment-wrapper {
2071 .comment-edit-form textarea {
2075 .comment-edit-submit-wrapper {
2080 .comment-icon-list {
2082 justify-content: space-between;
2085 /* acpopup + textcompletion*/
2087 background-color: #ffffff;
2091 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
2096 /** @todo: we schould consider the possebility to overwrite bootstrap dropdowns
2097 at the beginning of this file to get rid of the !important */
2098 .textcomplete-item > a {
2099 color: $font_color_darker !important;
2100 padding: 5px 20px !important;
2102 .textcomplete-item.active > a {
2103 background-color: rgb(247, 247, 247) !important;
2104 background-image: none !important;
2105 border-left: 3px solid $link_color;
2106 padding-left: 17px !important;
2108 .textcomplete-item a .forum {
2115 /* The wall-item thread levels */
2116 .wall-item-container.thread_level_3,
2117 .wall-item-container.thread_level_4,
2118 .wall-item-container.thread_level_5,
2119 .wall-item-container.thread_level_6,
2120 .wall-item-container.thread_level_7 {
2130 background-color: rgba(247, 247, 247, $contentbg_transp);
2131 box-shadow: 0 0 3px #dadada;
2132 -webkit-box-shadow: 0 0 3px #dadada;
2133 -moz-box-shadow: 0 0 3px #dadada;
2138 section > .tabbar-wrapper {
2139 /* The tabbar shouldn't' be visibile inside
2140 the section element. Only after we have
2141 moved it to the nav through js */
2142 display: none !important;
2151 #tabmenu .search-heading {
2153 text-overflow: ellipsis;
2154 white-space: nowrap;
2167 border-bottom: 0 solid $link_color;
2170 transition: all 0.15s ease;
2178 border-bottom-width: 4px;
2180 .tabbar.visible-xs .tabs-extended {
2183 #dropdownMenuTools-xs {
2186 ul.tabbar ul.tabs-extended:hover li.dropdown {
2190 ul.tabbar ul.tabs-extended li.active {
2192 border-bottom-width: 2px;
2194 ul.tabbar ul.tabs-extended li.active a {
2197 ul.dropdown-menu li:hover {
2203 box-sizing: border-box;
2206 .dropdown-menu li a,
2207 .dropdown-menu li .btn-link {
2208 color: $font_color_darker;
2210 .dropdown-menu li > :hover,
2211 .dropdown-menu li > :visited,
2212 .dropdown-menu li > :focus {
2216 .dropdown-menu li:first-child {
2220 /* Notificaiotn badges */
2221 #mail-update-li.show {
2222 display: inline-block !important;
2226 p.wall-item-announce,
2228 .media .shared-time,
2231 .media .location a {
2233 color: $font_color_darker;
2237 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2239 border-left: 3px solid rgba(255, 255, 255, 0);
2242 .media-list > li:hover,
2243 .media-list > li.selected,
2244 .media-list > li.active {
2245 border-left: 3px solid $link_color;
2246 background-color: rgba(247, 247, 247, $contentbg_transp);
2253 .form-control:focus {
2254 border: 2px solid $link_color;
2258 .radio label::before,
2259 .checkbox label::before {
2260 background-color: rgba(255, 255, 255, $contentbg_transp);
2262 .radio label::after {
2263 background-color: $link_color;
2265 .checkbox label::after {
2269 .checkbox input[type="checkbox"]:focus + label::before,
2270 .radio input[type="radio"]:focus + label::before {
2271 outline-color: $link_hover_color;
2275 color: $font_color_darker;
2278 input[type="range"].form-control {
2284 .form-control.form-search {
2285 border-radius: 30px;
2286 background-image: url(img/icon_search16x16.png);
2287 background-repeat: no-repeat;
2288 background-position: 10px 8px;
2291 .form-group-search {
2296 .form-group-search .form-button-search {
2300 border-radius: 30px;
2302 .search-input.form-control.form-search {
2310 .search-content-wrapper > #search-header-wrapper {
2313 .search-content-wrapper > .section-title-wrapper {
2316 #navbar-button > #search-save {
2319 /* Section-Content-Wrapper */
2320 #search-header-wrapper {
2322 padding-bottom: 20px;
2323 margin-bottom: 20px;
2325 background-color: rgba(255, 255, 255, $contentbg_transp);
2328 color: $font_color_darker;
2329 box-shadow: 0 0 3px #dadada;
2330 -webkit-box-shadow: 0 0 3px #dadada;
2331 -moz-box-shadow: 0 0 3px #dadada;
2338 section > .generic-page-wrapper,
2339 .videos-content-wrapper,
2340 .suggest-content-wrapper,
2341 .help-content-wrapper,
2342 .match-content-wrapper,
2343 .dirfind-content-wrapper,
2344 .delegation-content-wrapper,
2345 .notes-content-wrapper,
2346 .message-content-wrapper,
2347 .apps-content-wrapper,
2349 .delegate-content-wrapper,
2350 .uexport-content-wrapper,
2351 .dfrn_request-content-wrapper,
2352 .friendica-content-wrapper,
2353 .credits-content-wrapper,
2354 .nogroup-content-wrapper,
2355 .profperm-content-wrapper,
2356 .invite-content-wrapper,
2357 .tos-content-wrapper,
2358 .fsuggest-content-wrapper {
2359 min-height: calc(100vh - 150px);
2361 padding-bottom: 20px;
2362 margin-bottom: 20px;
2364 background-color: rgba(255, 255, 255, $contentbg_transp);
2367 color: $font_color_darker;
2368 box-shadow: 0 0 3px #dadada;
2369 -webkit-box-shadow: 0 0 3px #dadada;
2370 -moz-box-shadow: 0 0 3px #dadada;
2372 #content:hover .page-action.faded-icon {
2374 transition: all 0.25s ease-in-out;
2376 #content .page-action.faded-icon:hover {
2380 .section-title-wrapper {
2383 /* Home and Login Page */
2384 body.mod-home nav.navbar .nav > li > a:hover {
2385 background-color: rgba(255, 255, 255, 0.2);
2387 body.mod-home .navbar #nav-login,
2388 body.mod-login .navbar #nav-login {
2392 #profile-content-standard,
2393 #profile-content-advanced {
2398 margin-bottom: 20px;
2400 .contact-block-div.forumlist-profile-advanced {
2405 ul.viewcontact_wrapper {
2407 margin-right: -15px;
2409 ul.viewcontact_wrapper > li {
2412 .contact-wrapper .contact-photo-wrapper button {
2415 .contact-wrapper.media {
2417 word-wrap: break-word;
2420 /* bootstrap hack for .media */
2421 .contact-wrapper.media .media-body {
2422 display: table-cell;
2427 .contact-wrapper.media:before,
2432 .contact-wrapper.media:after {
2435 .contact-wrapper .contact-photo-image-wrapper img.contact-photo.xl {
2439 .contact-wrapper .contact-photo-image-wrapper img.contact-photo-xs {
2443 .contact-wrapper .contact-photo-overlay-content.xl {
2446 .contact-wrapper .contact-photo-menu {
2450 .contact-entry-desc {
2451 color: $font_color_darker;
2453 .contact-entry-checkbox {
2456 .contact-wrapper .media-body .contact-entry-name h4.media-heading a {
2457 font-weight: bold !important;
2459 font-size: 15px !important;
2461 .contact-wrapper .contact-actions {
2464 .contact-wrapper .contact-action-link,
2465 .contact-wrapper .contact-action-link:hover,
2466 .textcomplete-item .contact-wrapper .contact-action-link {
2468 color: $font_color_darker;
2471 .contact-wrapper .contact-action-link {
2473 transition: all 0.25s ease-in-out;
2475 ul li:hover .contact-wrapper .contact-action-link {
2477 transition: all 0.25s ease-in-out;
2479 ul li:hover .contact-wrapper .contact-action-link:hover {
2482 #contacts-search-wrapper,
2483 #directory-search-wrapper {
2486 #contact-drop-confirm .contact-actions,
2487 #contact-drop-confirm .contact-photo-overlay,
2488 #contact-drop-confirm .contact-photo-menu {
2491 #contact-drop-confirm #confirm-form {
2496 #contact-edit-actions {
2499 #contact-edit-status-wrapper {
2501 background-color: rgba(225, 245, 254, $contentbg_transp);
2504 #contact-edit-settings {
2508 /* directory page */
2509 #directory-search-heading {
2513 /* group edit page */
2516 margin-bottom: 10px;
2519 .group-actions button,
2524 .contact-group-actions .fa-times-circle {
2527 .contact-group-actions .fa-plus-circle {
2531 #group-edit-wrapper {
2535 #group-edit-header {
2538 #group-update-wrapper .contact-photo-overlay {
2541 #group-update-wrapper .viewcontact_wrapper .contact-group-actions {
2546 #group-update-wrapper .viewcontact_wrapper .contact-group-link {
2551 #group-update-wrapper .viewcontact_wrapper .contact-action-link:hover {
2554 #group-update-wrapper .shortmode {
2558 #group-update-wrapper .shortmode .contact-photo {
2562 #group-update-wrapper .shortmode .media {
2565 #group-update-wrapper .shortmode .contact-entry-desc {
2566 font-size: 12px !important;
2568 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading {
2571 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading a {
2572 font-size: 13px !important;
2573 white-space: nowrap;
2575 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-rel,
2576 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-network {
2581 .message-content-wrapper > li {
2582 /* we need this overwriting because we have no template file
2583 for the general mail page /message
2585 list-style-type: none;
2588 max-height: calc(100vh - 200px);
2590 #mail-conversation {
2592 max-height: calc(100vh - 400px);
2597 .mail-conv-wrapper .media .contact-photo-wrapper img {
2601 .mail-thread #prvmail-to-label,
2602 .mail-thread #prvmail-subject-label {
2605 .mail-thread #prvmail-message-label > label {
2608 .mail-thread #prvmail-message-label textarea {
2611 .mail-conv-wrapper {
2613 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2616 height: calc(100vh - 150px);
2619 height: calc(100% - 20px);
2621 #message-preview ul {
2624 #message-preview .media-list li {
2628 #message-preview .media-list li:hover {
2629 border-left: none !important;
2631 #message-preview .media-list li a {
2634 .mail-list-outside-wrapper {
2636 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2638 .mail-list-outside-wrapper .contact-photo-wrapper img {
2645 #modal #prvmail-text-edit-bb .bb-img {
2650 #photo-album-edit-name-label {
2653 .photo-album-edit-name {
2657 .photo-album-actions {
2658 margin-bottom: 10px;
2660 .photo-album-actions .photos-order-link {
2665 .fc .fc-month-view .fc-content .fc-title .item-desc:hover {
2666 color: $link_hover_color;
2668 .fc .fc-list-item-title a {
2671 .fc .fc-list-item-title a[href]:hover {
2672 color: $link_hover_color;
2673 text-decoration: none;
2675 .event-wrapper .event-owner {
2676 margin-bottom: 15px;
2678 .event-wrapper .event-owner img {
2687 .event-wrapper .vevent {
2690 box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
2692 .event-wrapper .event-buttons {
2695 #event-form-wrapper {
2698 #event-edit-form-wrapper {
2702 color: $font_color_darker;
2704 #event-edit-form-wrapper #event-edit-time {
2707 .event-buttons .plink-event-link {
2710 .vevent .event-summary {
2713 .vevent .event-description {
2716 .vevent .event-location .location {
2720 .modal-body .vevent .event-summary {
2723 #event-preview .vevent .event-summary {
2728 .event-card-details,
2729 .event-card-header {
2733 .event-card-left-date {
2736 .vevent .event-card-header {
2739 .event-card-left-date {
2740 width: 60px; /* Das muss wahrscheinlich unterschiedlich sein zwischen calendar und stream */
2742 .event-card .event-date-wrapper > span {
2746 white-space: nowrap;
2748 .event-card .event-date-wrapper .event-card-short-month {
2750 text-transform: uppercase;
2752 .event-card .event-date-wrapper.medium .event-card-short-date {
2757 .event-card .event-card-content {
2759 padding: 0 5px 0 15px;
2760 box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
2764 .event-card .event-card-content .event-map-btn {
2770 .event-card .event-card-title {
2772 color: $font_color_darker;
2777 .event-card .event-card-location {
2781 .event-card .event-card-location br {
2784 .event-card .event-card-location br::after {
2787 .event-card-profile-name a {
2790 .event-card-profile-name a:hover {
2791 color: $link_hover_color;
2793 .event-card .event-card-content .event-location-map {
2798 .event-card .event-card-content .event-location-map .map {
2801 .event-card .description {
2803 box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, 0.1) inset;
2816 transform: translateZ(0);
2817 transition: opacity 0.2s;
2822 text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
2824 .photo-next-link > i,
2825 .photo-prev-link > i {
2826 vertical-align: super;
2828 .photo-next-link > i {
2837 #photo-photo:hover .photo-next-link,
2838 #photo-photo:hover .photo-prev-link {
2841 #photo-photo .photo-next-link:hover,
2842 #photo-photo .photo-prev-link:hover {
2846 .photo-comment-wrapper .comment {
2849 .photo-comment-wrapper .wall-item-content {
2850 color: $font_color_darker;
2853 .photo-comment-wrapper .comment-wwedit-wrapper,
2854 .photo-comment-wrapper .wall-item-outside-wrapper.media:first-child {
2859 .profile-listing-table {
2863 .profile-listing-row {
2866 .profile-listing-cell {
2867 display: table-cell;
2869 .profile-listing-photo {
2874 #profile-listing-new-link-wrapper {
2875 margin-bottom: 20px;
2878 #profile-photo-upload-section {
2882 #profile-photo-upload-close {
2887 .section-subtitle-wrapper {
2890 details.profile-jot-net[open] summary:before,
2891 .panel .section-subtitle-wrapper a.accordion-toggle:before {
2892 font-family: ForkAwesome;
2896 details.profile-jot-net summary:before,
2897 .panel .section-subtitle-wrapper a.accordion-toggle.collapsed:before {
2898 font-family: ForkAwesome;
2901 details.profile-jot-net summary:before {
2905 details.profile-jot-net[open] summary:before {
2909 #settings-nick-wrapper {
2910 margin-bottom: 20px;
2916 /* Emulates Bootstrap display */
2919 background-color: rgba(255, 255, 255, $contentbg_transp);
2922 box-shadow: 0 0 3px #dadada;
2923 -webkit-box-shadow: 0 0 3px #dadada;
2924 -moz-box-shadow: 0 0 3px #dadada;
2927 .settings-block.fakelink,
2928 .settings-block > .fakelink {
2932 .settings-block > .fakelink {
2933 margin: -10px -15px 10px -15px;
2934 border-radius: 4px 4px 0 0;
2937 .settings-block.fakelink:hover,
2938 .settings-block > .fakelink:hover {
2939 color: $link_hover_color;
2941 .settings-block.fakelink > h3,
2942 .settings-block > .fakelink > h3 {
2949 .section-subtitle-wrapper > h2 {
2952 margin-bottom: 10px;
2955 .fakelink > h3:before {
2956 padding-right: 10px;
2958 .widget.fakelink > h3:before,
2959 .settings-block.fakelink > h3:before {
2960 font-family: ForkAwesome;
2961 content: "\f0da"; /* Right Plain Pointer */
2963 .widget > .fakelink > h3:before,
2964 #sidebar-group-header > .fakelink > h3:before,
2965 .settings-block > .fakelink > h3:before {
2966 font-family: ForkAwesome;
2967 content: "\f0d7"; /* Bottom Plain Pointer */
2974 /* Intro Notifications */
2975 ul.notif-network-list {
2977 margin-right: -15px;
2979 ul.notif-network-list > li {
2981 padding-right: 15px;
2983 .intro-wrapper.media {
2985 word-wrap: break-word;
2988 .intro-photo-wrapper img.intro-photo {
2996 .intro-enty-name h4 {
2997 font-size: 15px !important;
2999 .intro-wrapper button.intro-action-link {
3001 transition: all 0.25s ease-in-out;
3003 .intro-wrapper button.intro-action-link,
3004 .intro-wrapper button.intro-action-link:hover {
3007 color: $font_color_darker;
3009 ul li:hover .intro-wrapper button.intro-action-link {
3011 transition: all 0.25s ease-in-out;
3013 ul li:hover .intro-wrapper button.intro-action-link:hover {
3016 .intro-action-buttons {
3020 transition: max-height 0.1s ease-out;
3022 ul.notif-network-list > li:hover .intro-action-buttons {
3024 transition: max-height 0.1s ease-in;
3028 .intro-network-label,
3029 .intro-location-label,
3030 .intro-keywords-label,
3032 .intro-knowyou-label,
3033 .intro-madeby-label {
3036 .intro-contact-info.xs .intro-url-label,
3037 .intro-contact-info.xs .intro-network-label,
3038 .intro-contact-info.xs .intro-location-label,
3039 .intro-contact-info.xs .intro-keywords-label,
3040 .intro-contact-info.xs .intro-about-label,
3041 .intro-contact-info.xs .intro-knowyou-label {
3046 /* Notifications Page */
3047 ul.notif-network-list li.unseen {
3048 background-color: #e3eff3;
3050 .notif-item img.notif-image {
3055 .notif-item .notif-desc-wrapper {
3058 .notif-item .notif-desc-wrapper a {
3061 color: $font_color_darker;
3068 /* This is a little bit hacky. Since the search page is used for diferent
3069 content types we can't apply the generic-page-wrapper class.
3070 So we apply the css of the generic-page-wrapper class to the ul element with some
3071 little modifications to emulate a standard page template */
3072 .search-content-wrapper > ul.viewcontact_wrapper {
3073 min-height: calc(100vh - 150px);
3075 padding-bottom: 20px;
3077 margin-bottom: 20px;
3079 background-color: rgba(255, 255, 255, $contentbg_transp);
3082 color: $font_color_darker;
3083 box-shadow: 0 0 3px #dadada;
3084 -webkit-box-shadow: 0 0 3px #dadada;
3085 -moz-box-shadow: 0 0 3px #dadada;
3089 section.help-content-wrapper h1 {
3090 padding-bottom: 0.3em;
3092 border-bottom: 1px solid #ddd;
3094 section.help-content-wrapper h2 {
3095 padding-bottom: 0.3em;
3097 border-bottom: 1px solid #ddd;
3099 section.help-content-wrapper h3 {
3102 section.help-content-wrapper h4 {
3105 section.help-content-wrapper h1,
3106 section.help-content-wrapper h2,
3107 section.help-content-wrapper h3,
3108 section.help-content-wrapper h4,
3109 section.help-content-wrapper h5,
3110 section.help-content-wrapper h6 {
3112 margin-bottom: 16px;
3116 section.help-content-wrapper p {
3119 section.help-content-wrapper p,
3120 section.help-content-wrapper a,
3121 section.help-content-wrapper li {
3127 #adminpage #frio_background_image .image-select {
3130 #adminpage #frio_background_image.input-group {
3133 #admin-summary-wrapper {
3136 #adminpage ul#addonslist,
3140 #adminpage li .icon {
3141 display: inline-block;
3142 vertical-align: text-top;
3146 #adminpage li .icon:before {
3148 display: inline-block;
3155 border: 1px solid #cccccc;
3157 background-color: $background_color;
3158 -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3159 -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3160 transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3162 #adminpage li .icon.on:after {
3163 font-family: "ForkAwesome";
3165 display: inline-block;
3178 #adminpage .addon .desc {
3181 #admin-users #users tr.blocked {
3182 background-color: #f8efc0;
3184 .adminpage .table-hover > tbody > tr:hover + tr.details {
3185 background-color: #f5f5f5;
3187 .offset-anchor::before {
3193 pointer-events: none;
3201 #identity-selector-wrapper {
3206 #identity-selector-wrapper .identity-match-photo {
3210 #identity-selector-wrapper .identity-match-photo button {
3213 #identity-selector-wrapper .identity-match-photo .badge {
3218 #identity-selector-wrapper .identity-match-name {
3221 #identity-selector-wrapper .identity-match-details {
3227 #register-openid-wrapper,
3228 #register-name-wrapper,
3229 #register-invite-wrapper,
3230 #profile-publish-wrapper {
3233 #register-openid-end,
3234 #register-nickname-end {
3239 * Overwriting for transparency and other colors
3241 main .nav-tabs > li.active > a,
3242 main .nav-tabs > li.active > a:focus,
3243 main .nav-tabs > li.active > a:hover {
3244 background-color: rgba(255, 255, 255, $contentbg_transp);
3254 @media (min-width: 768px) {
3261 * Framework overwrite
3264 /* textcomplete for contact filtering*/
3265 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list {
3266 position: relative !important;
3267 top: inherit !important;
3268 bottom: inherit !important;
3269 left: inherit !important;
3272 margin-right: -15px;
3273 background-color: transparent;
3277 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li {
3279 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
3281 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li:first-child {
3284 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list .textcomplete-item > a {
3285 padding: 0 !important;
3287 background-color: transparent !important;
3289 /* this is a little hack for texcomplete contact filter
3290 There are for some reasons empty <a> tags. I don't know why */
3291 .textcomplete-item .contact-wrapper a {
3296 body .tread-wrapper .hovercard a,
3297 body .tread-wrapper .hovercard a:hover {
3300 body .tread-wrapper .hovercard:hover .hover-card-content a {
3301 color: $link_color !important;
3304 /* Pagination improvements */
3309 .pagination > li > a,
3310 .pagination > li > span {
3314 .pagination > li > a:hover,
3315 .pagination > li > span:hover {
3316 color: $link_hover_color;
3318 .pagination > .active > a,
3319 .pagination > .active > a:focus,
3320 .pagination > .active > a:hover,
3321 .pagination > .active > span,
3322 .pagination > .active > span:focus,
3323 .pagination > .active > span:hover {
3324 background-color: $link_color;
3325 border-color: $link_color;
3328 .pagination li.pager_n a {
3332 .pagination .pager_prev a {
3335 border-top-right-radius: 3px;
3336 border-bottom-right-radius: 3px;
3338 .pagination .pager_next a {
3341 border-top-left-radius: 3px;
3342 border-bottom-left-radius: 3px;
3345 .pager .previous > a {
3349 .pagination .disabled > a,
3350 .pager .disabled > a {
3356 background-color: rgba(255, 255, 255, $contentbg_transp);
3360 * some temporary workarounds until this will solved
3361 * elsewhere (e.g. new templates)
3363 section .profile-match-wrapper {
3370 #login-submit-wrapper {
3373 #lost-password-link {
3376 #login-lost-password-link {
3377 margin-bottom: 10px;
3383 #id_password_wrapper {
3384 margin-bottom: unset;
3391 background: #8ad0a1;
3398 .mod-home.is-not-singleuser,
3400 background-color: $login_bg_color;
3401 background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4)), url($login_bg_image);
3402 background-size: cover;
3403 background-attachment: fixed;
3404 background-position: center;
3407 .mod-home.is-not-singleuser nav.navbar,
3408 .mod-login nav.navbar {
3409 background-color: transparent;
3412 .mod-home.is-not-singleuser #topbar-second,
3413 .mod-login #topbar-second {
3414 background-color: transparent;
3418 .mod-home.is-not-singleuser .login-content,
3419 .mod-login .login-content {
3424 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3428 .mod-home.is-not-singleuser .login-form > #login-form label,
3429 .mod-login #content #login-form label {
3433 .mod-home.is-not-singleuser .login-panel-content,
3434 .mod-login .login-panel-content {
3435 background-color: rgba(255, 255, 255, 0.85);
3439 background: $nav_bg !important;
3440 color: $btn_primary_color !important;
3443 -webkit-box-shadow: none;
3445 -moz-box-shadow: none;
3446 background-image: none;
3454 width: 100% !important;
3457 .qq-upload-drop-area {
3458 background: white !important;
3461 -webkit-box-shadow: none;
3463 -moz-box-shadow: none;
3464 background-image: none;
3472 width: 100% !important;
3473 display: block !important;
3474 position: relative !important;
3475 border: black 1px dashed !important;
3476 margin-bottom: 5px !important;
3477 margin-top: 15px !important;
3481 * The different views of js fullcalendar
3485 margin-bottom: 10px;
3489 #event-calendar-title {
3490 display: inline-block;
3499 #fc-header-right .dropdown > button {
3502 #event-calendar-title {
3503 vertical-align: middle;
3505 #event-calendar-views {
3512 .fc .fc-month-view td.fc-widget-content,
3514 .fc .fc-list-view .fc-list-table td,
3518 .fc td.fc-widget-header,
3519 .fc th.fc-widget-header {
3524 .fc .fc-month-view td.fc-day {
3527 border-bottom: 1px solid;
3530 .fc .fc-day-grid-container .fc-row {
3531 border-bottom: 1px solid;
3534 .fc tr td.fc-today {
3537 .fc .fc-month-view .fc-content .fc-title .item-desc {
3540 .fc .fc-view-container {
3543 .fc .fc-list-view td {
3546 #events-calendar.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
3551 background-color: #e3f2fd;
3552 border: 1px solid #bbdefb;
3553 color: $font_color_darker;
3555 .fc .fc-month-view .fc-time,
3556 .fc .fc-listMonth-view .fc-list-item-time,
3557 .fc .fc-listMonth-view .fc-list-item-marker,
3558 .fc .fc-listMonth-view .fc-widget-header {
3561 .fc .fc-listMonth-view .fc-list-item:hover td {
3562 background: transparent;
3565 .fc .fc-listMonth-view .seperator {
3576 .event-card .event-label,
3577 .event-card .location-label {
3580 .popover.event-card .event-card-basic-content {
3585 .event-card .event-hover-location .location {
3590 /* Medium devices (desktops, 992px and up) */
3591 @media (min-width: 992px) {
3592 .mod-home.is-not-singleuser #content,
3593 .mod-login #content {
3594 margin-top: 100px !important;
3597 .mod-home.is-not-singleuser .login-form > #login-form,
3598 .mod-home.is-not-singleuser .login-form > #login-extra-links,
3599 .mod-login #content #login-form {
3600 background-color: #fff;
3604 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3606 background-color: white;
3609 .mod-home.is-not-singleuser .login-form > #login-form label,
3610 .mod-login #content #login-form label {
3614 .mod-home.is-not-singleuser .login-form::before,
3615 .mod-login #content #login-form::before {
3619 background-color: rgba(255, 255, 255, 0.1);
3627 .mod-home.is-not-singleuser .login-form::after,
3628 .mod-login #content #login-form::after {
3632 background-color: rgba(255, 255, 255, 0.2);
3641 /* Mobile display */
3642 @media (max-width: 600px) {
3650 #friendica-logo-mask {
3664 .panel .panel-body {
3668 .toplevel_item > .wall-item-container {
3676 .wall-item-actions {
3684 .generic-page-wrapper,
3685 .videos-content-wrapper,
3686 .suggest-content-wrapper,
3687 .help-content-wrapper,
3688 .match-content-wrapper,
3689 .dirfind-content-wrapper,
3690 .directory-content-wrapper,
3691 .delegation-content-wrapper,
3692 .notes-content-wrapper,
3693 .message-content-wrapper,
3694 .apps-content-wrapper,
3696 .delegate-content-wrapper,
3697 .uexport-content-wrapper,
3698 .dfrn_request-content-wrapper,
3699 .friendica-content-wrapper,
3700 .credits-content-wrapper,
3701 .nogroup-content-wrapper,
3702 .profperm-content-wrapper,
3703 .invite-content-wrapper,
3704 .tos-content-wrapper,
3705 .fsuggest-content-wrapper {
3765 .wwto .contact-photo {
3773 Prevent automatic zoom on input focus on iOS
3774 see https://stackoverflow.com/a/16255670
3780 .wall-item-container.thread_level_3,
3781 .wall-item-container.thread_level_4,
3782 .wall-item-container.thread_level_5,
3783 .wall-item-container.thread_level_6,
3784 .wall-item-container.thread_level_7 {