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;
102 * clickable table rows
104 .table > tbody > td[role="button"] {
111 @media screen and (max-width: 990px) {
116 position: fixed !important;
118 background-color: $background_color;
125 padding-left: 6px !important;
126 padding-right: 6px !important;
136 background-color: rgba(0, 0, 0, 0.4);
138 transition: opacity 0.5s;
140 aside.canvas-slid::before {
144 /* prevent page scroll when the aside is opened **/
150 * standard page elements
156 color: $nav_icon_color;
163 padding: 0 12px 0 12px;
165 background-color: $nav_bg;
169 #item-delete-selected {
178 padding: 0 12px 0 12px;
180 background-color: $link_color;
185 #toggle_mobile_link {
190 * Overwriting and Extend Bootstrap
202 -webkit-box-shadow: none;
204 -moz-box-shadow: none;
205 background-image: none;
215 outline-color: $link_hover_color;
238 background-color: #ae0f0f;
243 color: $btn_primary_color;
245 .btn.btn-primary:hover,
246 .btn.btn-primary:focus {
247 color: $btn_primary_color;
248 background: $btn_primary_hover_color;
249 text-decoration: none;
251 .btn.btn-primary:active,
252 .btn.btn-primary.active {
253 background: $btn_primary_hover_color;
256 .btn-primary.active.focus,
257 .btn-primary.active:focus,
258 .btn-primary.active:hover,
259 .btn-primary:active.focus,
260 .btn-primary:active:focus,
261 .btn-primary:active:hover,
262 .open > .dropdown-toggle.btn-primary.focus,
263 .open > .dropdown-toggle.btn-primary:focus,
264 .open > .dropdown-toggle.btn-primary:hover,
267 .open > .dropdown-toggle.btn-primary {
268 background: $btn_primary_hover_color;
281 background: transparent;
288 background-color: transparent;
292 border-left: 1px solid #777;
296 border: 1px solid transparent;
305 .toggle .toggle-off:hover {
307 background-color: #eee;
310 .toggle.off .toggle-handle {
311 background-color: #eee;
314 background-color: #fff;
316 border: 1px solid transparent;
320 .input-group-sm > .form-control,
321 .input-group-sm > .input-group-addon,
322 .input-group-sm > .input-group-btn > .btn {
323 padding: 0.275rem 0.75rem;
326 border-radius: 0.2rem;
328 /* Bootstrap media class fix/hack
329 * This is a test. I thought it does have some
330 * issues in some corner cases. Maybe we remove
332 * https://github.com/twbs/bootstrap/issues/6053
355 vertical-align: baseline;
356 background-color: $link_color;
364 /* disabled elements */
365 .community-content-wrapper > h3,
366 .network-content-wrapper > .section-title-wrapper {
370 header #site-location {
381 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
383 font-family: tahoma, "Lucida Sans", sans;
389 header #banner #logo-img,
390 .navbar-brand #logo-img {
391 -webkit-mask-image: url("img/friendica-25.png");
392 background-color: $nav_icon_color;
399 #navbrand-container {
402 #navbrand-container #navbar-brand-text {
404 color: $nav_icon_color;
407 /* offcanvas section */
409 /* Right offcanvas uses: #offcanvasUsermenu, .offcanvas-right-active
410 .offcanvas-right and .offcanvas-right-overlay */
419 background-color: #333;
420 transform: translateX(-100%);
421 transition: 0.4s ease-in-out;
432 background-color: #333;
433 transform: translateX(100%);
434 transition: 0.4s ease-in-out;
437 .offcanvas-active .off-canvas {
438 transform: translateX(0);
440 .offcanvas-right-active #offcanvasUsermenu {
441 transform: translateX(0);
444 transition: 0.4s ease-in-out;
449 transition: 0.4s ease-in-out;
451 .offcanvas-active .page-wrapper,
452 .offcanvas-active .navbar-fixed-top {
453 transform: translateX(300px);
462 background-color: rgba(0, 0, 0, 0.5);
466 transition: 0.4s ease-in-out;
468 .offcanvas-right-overlay {
474 background-color: rgba(0, 0, 0, 0.5);
478 transition: 0.4s ease-in-out;
480 .offcanvas-active .offcanvas-overlay,
481 .offcanvas-right-active .offcanvas-right-overlay {
485 /* offcanvas section ends */
499 .topbar ul.nav > li {
502 @media (min-width: 992px) {
503 .topbar ul.nav > li > a,
504 .topbar ul.nav > li > button {
506 padding-bottom: 15px;
510 @media (max-width: 991px) {
511 .topbar ul.nav > li > a,
512 .topbar ul.nav > li > button {
516 .topbar .dropdown-footer {
519 .topbar .dropdown-header {
526 .topbar .dropdown-header .dropdown-header-link {
531 .topbar .dropdown-header .dropdown-header-link a,
532 .topbar .dropdown-header .dropdown-header-link .btn-link {
533 color: $link_color !important;
537 .topbar .dropdown-header:hover {
542 background-color: $nav_bg;
545 color: $nav_icon_color;
547 @media screen and (max-width: 767px) {
554 #topbar-first .navbar-toggle {
559 #topbar-first .nav > li > a,
560 #topbar-first .nav > li > button,
561 nav.navbar .nav > li > a,
562 nav.navbar .nav > li > button {
563 color: $nav_icon_color;
565 #topbar-first .nav > .open > a,
566 #topbar-first .nav > .open > button {
567 background-color: $nav_bg;
569 #topbar-first .nav > li > a:hover,
570 #topbar-first .nav > li > a:focus,
571 #topbar-first .nav > li > button:not(#main-menu):hover,
572 #topbar-first .nav > li > button:not(#main-menu):focus,
573 nav.navbar .nav > li > a:hover,
574 nav.navbar .nav > li > a:focus,
575 nav.navbar .nav > li > button:hover,
576 nav.navbar .nav > li > button:focus {
577 background-color: $nav_icon_hover_color;
579 #topbar-first .nav > .account {
583 #topbar-first .nav > .account img {
589 #topbar-first .nav > .account .dropdown-toggle {
590 padding: 8px 5px 0px;
594 #topbar-first .nav > .account .dropdown-toggle span {
597 #topbar-first .topbar-brand {
601 #topbar-first .topbar-actions {
605 #topbar-first .topbar-nav {
611 #topbar-first .topbar-nav .nav-segment {
615 #topbar-first .topbar-nav .nav-segment > a {
616 display: inline-block;
617 text-decoration: none;
620 #topbar-first .topbar-nav .nav-segment .nav-notification {
624 background-color: #ff3535;
626 #topbar-first #intro-update {
629 #topbar-first .topbar-nav .arrow:after {
634 border-color: transparent;
641 border-bottom-color: #fff;
644 #topbar-first .topbar-nav .arrow {
649 border-color: transparent;
656 border-bottom-color: rgba(0, 0, 0, 0.15);
660 #topbar-first .topbar-nav .dropdown-menu {
664 #topbar-first .topbar-nav .dropdown-menu ul.media-list {
668 #topbar-first .topbar-nav .dropdown-menu li {
671 #topbar-first .topbar-nav .dropdown-menu li i.approval {
677 #topbar-first .topbar-nav .dropdown-menu li i.accepted {
680 #topbar-first .topbar-nav .dropdown-menu li i.declined {
683 #topbar-first .topbar-nav .dropdown-menu li .media {
686 #topbar-first .topbar-nav .dropdown-menu li .media .img-space {
691 #topbar-first .dropdown-footer {
692 margin: 10px 10px 5px;
694 #topbar-first .caret {
695 border-top-color: #bebebe;
697 #topbar-first .btn-group > a {
698 background-color: #7f9baa;
700 #topbar-first .btn-enter {
701 background-color: #7f9baa;
704 #topbar-first .btn-enter:hover {
705 background-color: #89a2b0;
707 .navbar-fixed-top ul.nav.navbar-nav.navbar-right {
711 #friendica-logo-mask {
715 /* Notification Menu */
716 #topbar-first #nav-notifications-menu {
719 #topbar-first #nav-notifications-menu a {
720 color: $font_color_darker;
723 #topbar-first #nav-notifications-menu li.notif-entry {
724 color: $font_color_darker;
726 border-bottom: 1px solid #eee;
728 border-left: 3px solid #fff;
732 #topbar-first #nav-notifications-menu li.notification-unseen {
733 border-left: 3px solid #e3eff3;
734 background-color: #e3eff3;
736 #topbar-first #nav-notifications-menu li.notif-entry:hover {
737 background-color: #f7f7f7;
738 border-left: 3px solid $link_color;
740 #topbar-first #nav-notifications-menu li.placeholder {
743 #topbar-first #nav-notifications-menu .media .media-body .contactname {
746 #topbar-first #nav-notifications-menu .media .media-body .label {
747 padding: 0.1em 0.5em;
749 #topbar-first #nav-notifications-menu li.notif-entry .media-object a img {
754 /* The Top Nav Bar user menu */
755 #topbar-first .account .user-title {
759 #topbar-first .account .user-title span {
760 color: $nav_icon_color;
762 #topbar-first .account #main-menu .nav-notification {
766 background-color: #ff8989;
770 background-color: $background_color;
774 border-left-color: $nav_icon_color;
775 box-shadow: -3px 0 3px -3px black;
777 #offcanvasUsermenu .nav-container {
778 /* required to compensate for moving the container below the topnav bar */
781 #offcanvasUsermenu li.divider {
782 background-color: transparent;
786 #offcanvasUsermenu ul,
787 #offcanvasUsermenu ul li:first-child,
788 #offcanvasUsermenu ul,
789 #offcanvasUsermenu ul li:last-child {
792 #offcanvasUsermenu li,
793 #offcanvasUsermenu a {
794 background-color: $nav_bg;
795 color: $nav_icon_color;
798 #offcanvasUsermenu li.list-group-item {
799 border-color: $background_color;
801 #offcanvasUsermenu a {
804 #offcanvasUsermenu li.nav-sitename {
807 #topbar-first .dropdown.account li#nav-sitename {
811 word-break: break-word;
813 #topbar-first .dropdown.account li#nav-sitename:hover {
815 background-color: $nav_bg;
818 #topbar-first #search-box .navbar-form {
829 background-color: $background_color;
831 /* fix bootstrap .well class not playing well with data-target slide animation */
837 #search-mobile .navbar-form {
840 #topbar-first #search-box .form-search {
843 background-position: 8px 4px;
845 #topbar-first #search-box .btn {
854 background-color: #fff;
856 background-image: none;
857 -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
858 -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
859 box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
860 border-bottom: 1px solid #d4d4d4;
862 #topbar-second > .container {
865 @media screen and (max-width: 767px) {
866 #topbar-second > .container,
867 #topbar-second #navbar-button {
871 #topbar-second .dropdown-menu {
875 #topbar-second .dropdown-menu .divider {
878 #topbar-second #space-menu-dropdown,
879 #topbar-second #search-menu-dropdown {
882 #topbar-second #space-menu-dropdown .media-list,
883 #topbar-second #search-menu-dropdown .media-list {
891 .intro-wrapper button.intro-action-link {
895 ul li .intro-wrapper button.intro-action-link {
898 @media screen and (max-width: 768px) {
899 #topbar-second #space-menu-dropdown .media-list,
900 #topbar-second #search-menu-dropdown .media-list {
904 #topbar-second #space-menu-dropdown form,
905 #topbar-second #search-menu-dropdown form {
908 #topbar-second #space-menu-dropdown .search-reset,
909 #topbar-second #search-menu-dropdown .search-reset {
918 #topbar-second #space-menu-dropdown li > ul > li > a > .media .media-body p {
924 #topbar-second #nav-short-info .heading {
929 text-overflow: ellipsis;
931 #topbar-second #tabmenu .heading {
933 text-overflow: ellipsis;
940 .nav > li > .btn-link {
945 .nav .open > .btn-link {
946 background-color: #eee;
947 border-color: #337ab7;
949 .nav-pills > li > .btn-link {
952 .nav-pills .dropdown-menu,
953 .nav-tabs .dropdown-menu,
954 .account .dropdown-menu,
955 .contact-photo-wrapper .dropdown-menu {
956 background-color: $nav_bg;
959 .nav-pills .dropdown-menu li.divider,
960 .nav-tabs .dropdown-menu li.divider,
961 .account .dropdown-menu li.divider,
962 .contact-photo-wrapper .dropdown-menu li.divider {
963 background-color: $menu_background_hover_color;
965 margin: 9px 1px !important;
967 .nav-pills .dropdown-menu li > a,
968 .nav-tabs .dropdown-menu li > a,
969 .account .dropdown-menu li > a,
970 .contact-photo-wrapper .dropdown-menu li > a {
971 border-left: 3px solid $nav_bg;
973 .nav-pills .dropdown-menu li a,
974 .nav-pills .dropdown-menu li .btn-link,
975 .nav-tabs .dropdown-menu li a,
976 .nav-tabs .dropdown-menu li .btn-link,
977 .account .dropdown-menu li a,
978 .account .dropdown-menu li .btn-link,
979 .contact-photo-wrapper .dropdown-menu li a,
980 .contact-photo-wrapper .dropdown-menu li .btn-link {
981 color: $nav_icon_color;
988 .nav-pills .dropdown-menu li a i,
989 .nav-pills .dropdown-menu li .btn-link i,
990 .nav-tabs .dropdown-menu li a i,
991 .nav-tabs .dropdown-menu li .btn-link i,
992 .account .dropdown-menu li a i,
993 .account .dropdown-menu li .btn-link i,
994 .contact-photo-wrapper .dropdown-menu li a i,
995 .contact-photo-wrapper .dropdown-menu li .btn-link i {
998 display: inline-block;
1001 .nav-pills .dropdown-menu li > a:hover,
1002 .nav-tabs .dropdown-menu li > a:hover,
1003 .account .dropdown-menu li > a:hover,
1004 .contact-photo-wrapper .dropdown-menu li > a:hover,
1005 .nav-pills .dropdown-menu li.selected a,
1006 .nav-tabs .dropdown-menu li.selected a,
1007 .account .dropdown-menu li.selected a,
1008 .contact-photo-wrapper .dropdown-menu li.selected a {
1009 border-left: 3px solid $link_color;
1011 background: $menu_background_hover_color;
1013 #photo-edit-link-wrap {
1014 color: $font_color_darker;
1015 margin-bottom: 15px;
1018 #newmember-tab > a {
1029 .nav-container .widget {
1032 background-color: rgba(255, 255, 255, $contentbg_transp);
1033 box-shadow: 0 0 3px #dadada;
1034 -webkit-box-shadow: 0 0 3px #dadada;
1035 -moz-box-shadow: 0 0 3px #dadada;
1038 margin-bottom: 20px;
1044 .nav-container .widget h3 {
1048 padding-bottom: 20px;
1052 .nav-container .widget ul {
1057 margin-right: -10px;
1062 .nav-container .widget li {
1064 padding-bottom: 2px;
1066 padding-right: 10px;
1068 aside .widget li:hover,
1069 aside .widget li.selected,
1070 .nav-container .widget li:hover {
1072 color: $font_color_darker;
1073 background-color: rgba(247, 247, 247, $contentbg_transp);
1074 border-left: 3px solid $link_color !important;
1078 aside .widget li a:hover {
1079 color: $font_color_darker;
1082 /* forumlist widget */
1083 aside > #datebrowse-sidebar li.posted-date-selector-months {
1084 margin-bottom: 10px;
1088 aside > #datebrowse-sidebar li.posted-date-selector-months:hover {
1089 border-left: none !important;
1090 background-color: transparent !important;
1092 aside > #datebrowse-sidebar .posted-date-selector-months > ul {
1095 aside > #datebrowse-sidebar .posted-date-selector-months > ul > li {
1098 aside > #datebrowse-sidebar .posted-date-selector-months > ul > li:hover {
1103 -webkit-filter: grayscale(100%);
1104 filter: grayscale(100%);
1106 filter: alpha(opacity=50); /* For IE8 and earlier */
1107 -webkit-transition: all 0.2s ease-in-out;
1108 -moz-transition: all 0.2s ease-in-out;
1109 -o-transition: all 0.2s ease-in-out;
1110 -ms-transition: all 0.2s ease-in-out;
1111 transition: all 0.2s ease-in-out;
1113 #forumlist-sidbar-ul li:hover a > .forumlist-img {
1114 -webkit-filter: unset;
1119 /* help page widget */
1120 aside > .help-aside-wrapper p strong:first-child {
1124 aside > .help-aside-wrapper h1 {
1128 padding: 20px 0 10px;
1130 aside > .help-aside-wrapper h2 {
1135 /* vcard / h-card */
1136 aside .vcard #profile-photo-wrapper {
1139 aside .vcard img.u-photo,
1140 aside img.vcard-photo {
1144 aside .vcard .tool .action {
1151 background: rgba(0, 0, 0, 0.5);
1155 -webkit-transition: all 0.25s ease-in-out;
1156 -moz-transition: all 0.25s ease-in-out;
1157 -o-transition: all 0.25s ease-in-out;
1158 -ms-transition: all 0.25s ease-in-out;
1159 transition: all 0.25s ease-in-out;
1161 aside .vcard .tool a {
1162 color: rgba(255, 255, 255, 0.85);
1164 aside .vcard #profile-photo-wrapper:hover .tool .action {
1167 aside .vcard #profile-photo-wrapper.crop-preview {
1170 aside .vcard .profile-header {
1171 padding: 5px 0px 20px 0px;
1175 padding: 5px 0px 5px 0px;
1177 aside .vcard .p-addr {
1180 text-overflow: ellipsis;
1181 white-space: nowrap;
1182 padding-bottom: 2px;
1184 aside .vcard .title {
1187 aside .vcard .detail {
1191 aside .xmpp, aside .matrix {
1194 aside .vcard .icon {
1195 display: table-cell;
1196 padding-right: 10px;
1199 #profile-extra-links {
1201 margin-bottom: 10px;
1203 aside .vcard #subscribe-feed-link-button,
1204 aside .vcard #dfrn-request-link-button,
1205 aside .vcard #wallmessage-link-botton {
1211 aside .vcard #subscribe-feed-link,
1212 aside .vcard #dfrn-request-link,
1213 aside .vcard #wallmessage-link {
1216 /* vcard-short-info */
1218 #nav-short-info .contact-wrapper {
1221 white-space: nowrap;
1223 padding-right: 20px;
1226 #nav-short-info .contact-photo-wrapper.media-left {
1229 #vcard-short-photo-wrapper img,
1230 #nav-short-info .contact-wrapper img {
1236 #nav-short-info .contact-wrapper .media-body {
1240 text-overflow: ellipsis;
1242 #vcard-short-desc > .media-heading,
1243 #vcard-short-desc > .vcard-short-addr,
1244 #nav-short-info .contact-wrapper .media-heading,
1245 #nav-short-info .contact-wrapper #contact-entry-url-network {
1246 text-overflow: ellipsis;
1249 #vcard-short-desc > .media-heading,
1250 #nav-short-info .contact-wrapper .media-heading {
1254 #nav-short-info .contact-wrapper .media-heading a {
1255 color: $font_color_darker;
1256 font-size: 14px !important;
1258 #vcard-short-desc > .vcard-short-addr,
1259 #nav-short-info .contact-wrapper #contact-entry-url-network {
1263 .network-content-wrapper > .generic-page-wrapper,
1264 #nav-short-info .contact-wrapper .contact-photo-overlay,
1265 #nav-short-info .contact-wrapper .contact-actions {
1269 aside #peoplefind-sidebar input,
1270 aside #follow-sidebar input {
1272 background-position: 10px 5px;
1274 aside #peoplefind-sidebar label,
1275 aside #follow-sidebar label {
1276 font-weight: normal;
1278 aside #peoplefind-sidebar .form-group-search .form-button-search,
1279 aside #follow-sidebar .form-group-search .form-button-search {
1283 div#sidebar-group-header h3 {
1287 div#sidebar-group-list {
1296 color: $font_color_darker;
1300 color: $font_color_darker;
1302 transition: all 0.1s ease-in-out;
1305 color: $font_color_darker;
1312 aside #group-sidebar .sidebar-group-li:hover .group-edit-tool.faded-icon,
1313 aside #saved-search-list .saved-search-li:hover .savedsearchdrop.faded-icon,
1314 aside .widget:hover .widget-action.faded-icon {
1316 transition: all 0.25s ease-in-out;
1318 aside #group-sidebar .sidebar-group-li .group-edit-tool.faded-icon:hover,
1319 aside #saved-search-list .saved-search-li .savedsearchdrop.faded-icon:hover,
1320 aside .widget .widget-action.faded-icon:hover {
1323 aside #group-sidebar li .group-checkbox {
1326 aside #group-sidebar li .group-edit-tool {
1327 padding-right: 10px;
1329 aside #group-sidebar li .group-edit-tool:first-child {
1333 /* contact block widget */
1334 .contact-block-content {
1339 .contact-block-div {
1341 margin: 0px 5px 5px 0px;
1343 .contact-block-link {
1345 .contact-block-img {
1351 /* Tag cloud widget */
1352 .tagblock.widget > .tag-cloud {
1357 display: none !important;
1371 .modal #jot-sections {
1372 max-height: calc(100vh - 22px);
1374 @media (min-width: 768px) {
1375 .modal #jot-sections {
1376 max-height: calc(100vh - 62px);
1379 #jot-modal #jot-sections,
1380 #jot-modal #jot-modal-body,
1381 #jot-modal #profile-jot-form,
1382 #jot-modal #profile-jot-wrapper,
1383 #jot-modal #jot-text-wrap,
1384 #jot-modal #jot-preview-content,
1385 #jot-modal #tread-wrapper--1,
1386 #jot-modal #item-Q0,
1387 #jot-modal #profile-jot-acl-wrapper,
1388 #jot-modal #acl-wrapper {
1392 flex-direction: column;
1394 #jot-modal .modal-header a,
1395 #jot-modal .modal-header .btn-link,
1396 #profile-jot-submit-wrapper a,
1397 #profile-jot-submit-wrapper .btn-link {
1398 color: $font_color_darker;
1400 #jot-modal .modal-header {
1401 border-bottom: none;
1403 #jot-modal .modal-header .compose-link {
1408 #jot-category-wrap {
1414 #jot-text-wrap textarea {
1416 overflow-y: auto !important;
1417 overflow-y: overlay !important;
1419 #jot-text-wrap .preview textarea {
1422 #preview_profile-jot-text,
1423 .comment-edit-form .preview {
1427 border: 2px solid #ededed;
1430 border-radius: 0 0 4px 4px;
1432 color: $font_color_darker;
1434 textarea#profile-jot-text:focus + #preview_profile-jot-text,
1435 textarea.comment-edit-text:focus + .comment-edit-form .preview {
1436 border: 2px solid #6fdbe8;
1439 .preview hr.previewseparator {
1441 border-color: #d2d2d2;
1443 #previewImgBtn_profile-jot-text,
1455 .preview button.previewActionBtn {
1461 border: 2px solid #fff;
1462 box-shadow: 0 0 3px gray;
1466 text-decoration: none;
1467 padding: 0 0 1px 1px;
1470 .preview button.previewActionBtn:hover {
1473 .preview .closePreview button.previewActionBtn {
1476 #previewInputTitle_profile-jot-text {
1479 #profile-jot-wrapper button#profile-jot-submit {
1482 #profile-jot-wrapper #character-counter {
1485 .modal .wall-item-container.preview {
1487 overflow-y: overlay;
1491 font-family: ForkAwesome;
1495 font-family: ForkAwesome;
1499 #acl-wrapper label.panel-heading {
1506 .fbrowser .breadcrumb {
1509 .fbrowser .path a:before {
1513 .fbrowser .breadcrumb > li:last-of-type a {
1515 pointer-events: none;
1518 .fbrowser .folders {
1519 box-shadow: -1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
1522 .fbrowser .folders ul {
1528 max-height: calc(100vh - 210px);
1531 @media (min-width: 768px) {
1532 .fbrowser .folders ul {
1533 max-height: calc(100vh - 255px);
1536 .fbrowser .folders li {
1538 padding-right: 10px;
1540 padding-bottom: 3px;
1542 .fbrowser .folders li:hover {
1544 color: $font_color_darker;
1545 background-color: rgba(247, 247, 247, $contentbg_transp);
1546 border-left: 3px solid $link_color;
1549 .fbrowser .folders li a,
1550 .fbrowser .folders li a:hover {
1551 color: $font_color_darker;
1554 .fbrowser .folders + .list {
1557 .fbrowser .fbrowser-content-container {
1559 max-height: calc(100vh - 233px);
1561 @media (min-width: 768px) {
1562 .fbrowser .fbrowser-content-container {
1563 max-height: calc(100vh - 277px);
1566 .fbrowser.photo .photo-album-image-wrapper {
1567 box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.2);
1569 .fbrowser.photo .photo-album-image-wrapper .caption {
1570 pointer-events: none;
1572 .fbrowser .profile-rotator-wrapper {
1575 .fbrowser .fa-spin {
1588 background-color: rgba(255, 255, 255, $contentbg_transp);
1589 box-shadow: 0 0 2px #dadada;
1590 -webkit-box-shadow: 0 0 2px #dadada;
1591 -moz-box-shadow: 0 0 2px #dadada;
1595 .panel.panel-inline {
1597 margin-right: -15px;
1601 .panel .panel-body {
1602 word-wrap: break-word;
1604 .tread-wrapper .media {
1606 word-wrap: break-word;
1612 /* Thread hover effects */
1613 .desktop-view .wall-item-container .wall-item-content a,
1614 .desktop-view .wall-item-name,
1615 .desktop-view .wall-item-container .fakelink,
1616 .desktop-view .toplevel_item .fakelink,
1617 .desktop-view .toplevel_item .wall-item-container .wall-item-responses a {
1619 -webkit-transition: all 0.25s ease-in-out;
1620 -moz-transition: all 0.25s ease-in-out;
1621 -o-transition: all 0.25s ease-in-out;
1622 -ms-transition: all 0.25s ease-in-out;
1623 transition: all 0.25s ease-in-out;
1626 .toplevel_item:hover .fakelink,
1627 .wall-item-container:hover .fakelink,
1628 .toplevel_item:hover .wall-item-container:hover .wall-item-responses a,
1629 .toplevel_item:hover .wall-item-content a,
1630 .toplevel_item:hover .wall-item-name,
1631 .wall-item-container:hover .wall-item-content a,
1632 .wall-item-container:hover .wall-item-name,
1633 .wall-item-container:hover .wall-item-location a {
1635 -webkit-transition: all 0.25s ease-in-out;
1636 -moz-transition: all 0.25s ease-in-out;
1637 -o-transition: all 0.25s ease-in-out;
1638 -ms-transition: all 0.25s ease-in-out;
1639 transition: all 0.25s ease-in-out;
1643 .wall-item-container {
1644 border-top: 1px solid rgba(255, 255, 255, 0.8);
1647 .wall-item-container.panel-body {
1652 .comment-edit-preview .wall-item-container.panel-body.preview {
1655 .comment-edit-preview .panel {
1659 .wall-item-container .media {
1662 background-color: rgba(0, 0, 0, 0.03);
1665 /* wall items contact photo */
1670 /*maybe some adional stuff is needed for the different screen sizes */
1672 .contact-photo-image-wrapper {
1679 .contact-photo-overlay {
1687 background: rgba(0, 0, 0, 0.5);
1690 -webkit-transition: opacity 0.25s ease;
1691 -moz-transition: opacity 0.25s ease;
1693 .contact-photo-overlay:hover {
1696 .contact-photo-overlay-content {
1698 text-shadow: 1px 1px 1px #ccc;
1699 color: rgba(255, 255, 255, 0.85);
1701 vertical-align: bottom;
1708 .wwto .contact-photo {
1716 display: inline-block;
1719 /* wall items action dropdown menu */
1720 .media .contact-info {
1724 /* Workaround for Firefox where the post heading covers the avatar, preventing hovercard interaction,
1725 48px is the width of the avatar image and should be adjusted accordingly if it ever changes. */
1726 .media .dropdown.pull-left + .contact-info {
1739 margin-bottom: 10px;
1743 blockquote.shared_content {
1745 margin-inline-start: 0px;
1749 .wall-item-network {
1753 /* wall items contact info */
1754 .media .media-body {
1757 .media .media-body h4.media-heading {
1760 color: $font_color_darker;
1762 .media .media-body .addional-info a {
1765 .media .contact-info-comment {
1766 display: table-cell;
1768 .media .contact-info-xs h5,
1769 .media .contact-info-comment {
1780 .wall-item-name.xs {
1785 /* Contact avatar click card */
1786 .userinfo.click-card {
1790 .userinfo.click-card > *:hover:after {
1795 background-color: #ffffff;
1804 border-radius: 0 0 40% 0;
1807 /* The lock symbol popup */
1811 background-color: $nav_bg;
1821 color: $nav_icon_color;
1825 /* Space between content and head */
1830 /* wall items content */
1831 .wall-item-content {
1832 word-break: break-word;
1834 .wall-item-content img {
1835 object-fit: contain;
1837 .wall-item-body > img,
1838 .wall-item-body > a > img {
1841 .wall-item-body .body-attach > a {
1842 color: $font_color_darker;
1843 display: inline-block;
1845 .wall-item-body .body-attach > a div {
1846 color: $font_color_darker;
1850 /* wall-item content elements */
1858 box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.1) inset, 0 1px 1px rgba(0, 0, 0, 0.05);
1860 @media screen and (max-width: 767px) {
1866 margin: 5px -10px 0;
1870 box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.05);
1873 padding: 10px 10px 1px 0;
1878 .type-link img.attachment-image {
1881 .type-link blockquote,
1882 .type-video blockquote {
1886 .oembed.video .embed_video > div::before {
1887 font-family: ForkAwesome;
1888 font-weight: normal;
1890 display: inline-block;
1891 text-decoration: inherit;
1892 vertical-align: top;
1900 .oembed.video .embed_video > div {
1901 background-color: rgba(0, 0, 0, 0.2);
1902 -webkit-transition: all 0.25s ease-in-out;
1903 -moz-transition: all 0.25s ease-in-out;
1904 -o-transition: all 0.25s ease-in-out;
1905 -ms-transition: all 0.25s ease-in-out;
1906 transition: all 0.25s ease-in-out;
1908 .oembed.video .embed_video > div:hover {
1909 background-color: rgba(0, 0, 0, 0);
1911 .oembed.video .embed_video.active {
1914 .oembed.video .embed_video.active iframe {
1915 width: 100% !important;
1924 color: $font_color_darker;
1927 .wall-item-tags a:hover {
1928 text-decoration: none;
1930 .wall-item-bottom .label,
1931 .wall-item-bottom .label a {
1934 .wall-item-tags .category,
1935 .wall-item-tags .folder {
1939 /* item social action buttons */
1940 .wall-item-actions {
1943 justify-content: space-between;
1945 .wall-item-actions a,
1946 .wall-item-actions button {
1948 color: $font_color_darker;
1950 .wall-item-actions .active {
1954 .wall-item-actions-left {
1955 display: table-cell;
1956 vertical-align: middle;
1958 .wall-item-actions-right {
1961 .wall-item-actions .checkbox {
1965 .wall-item-actions button:hover {
1966 color: $font_color_darker;
1967 text-decoration: underline;
1969 .wall-item-actions .separator {
1973 .wall-item-responses > div > p {
1977 /* wall item hover effects */
1979 @media (min-width: 768px) {
1980 /* Tags and mentions */
1981 .wall-item-container .wall-item-bottom .wall-item-tags span.label {
1982 filter: grayscale(0.5);
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;
1992 .wall-item-container:hover .wall-item-bottom .wall-item-tags span.label {
1993 filter: grayscale(0);
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;
2002 /* Like/Comment/etc buttons */
2003 .wall-item-container .wall-item-links,
2004 .wall-item-container .wall-item-actions button > a {
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 .wall-item-container:hover .wall-item-links,
2014 .wall-item-container:hover .wall-item-actions button > a {
2017 -webkit-transition: all 0.25s ease-in-out;
2018 -moz-transition: all 0.25s ease-in-out;
2019 -o-transition: all 0.25s ease-in-out;
2020 -ms-transition: all 0.25s ease-in-out;
2021 transition: all 0.25s ease-in-out;
2023 .wall-item-container .wall-item-body .body-attach > a:hover {
2031 wall-item-comment-wrapper.well {
2034 background-color: rgba(237, 237, 237, $contentbg_transp);
2035 background-image: none;
2037 background-color: red;
2039 wall-item-comment-wrapper.well-small {
2043 wall-item-comment-wrapper.well hr {
2044 border-top: 1px solid #d9d9d9;
2046 .wall-entry wall-item-comment-wrapper.well {
2049 .comment-container {
2051 border-top-left-radius: 3px;
2052 border-top-right-radius: 3px;
2053 border-bottom-right-radius: 0px;
2054 border-bottom-left-radius: 0px;
2057 position: relative !important;
2060 .hide-comments-outer {
2061 background-color: rgba(0, 0, 0, 0.03);
2063 border-radius: 0.5em 0.5em 0 0;
2065 .hide-comments-total {
2074 .wall-item-comment-wrapper {
2076 border-top: 1px solid rgba(255, 255, 255, 0.8);
2077 background-color: rgba(0, 0, 0, 0.03);
2078 border-radius: 0 0 4px 4px;
2082 .comment-fake-form {
2083 border-color: #d9d9d9;
2085 .comment-fake-form textarea {
2089 .comment-container .wall-item-comment-wrapper {
2093 .comment-edit-form textarea {
2097 .comment-edit-submit-wrapper {
2102 .comment-icon-list {
2104 justify-content: space-between;
2107 /* acpopup + textcompletion*/
2109 background-color: #ffffff;
2113 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
2118 /** @todo: we schould consider the possebility to overwrite bootstrap dropdowns
2119 at the beginning of this file to get rid of the !important */
2120 .textcomplete-item > a {
2121 color: $font_color_darker !important;
2122 padding: 5px 20px !important;
2124 .textcomplete-item.active > a {
2125 background-color: rgb(247, 247, 247) !important;
2126 background-image: none !important;
2127 border-left: 3px solid $link_color;
2128 padding-left: 17px !important;
2130 .textcomplete-item a .forum {
2137 /* The wall-item thread levels */
2138 .wall-item-container.thread_level_3,
2139 .wall-item-container.thread_level_4,
2140 .wall-item-container.thread_level_5,
2141 .wall-item-container.thread_level_6,
2142 .wall-item-container.thread_level_7 {
2152 background-color: rgba(247, 247, 247, $contentbg_transp);
2153 box-shadow: 0 0 3px #dadada;
2154 -webkit-box-shadow: 0 0 3px #dadada;
2155 -moz-box-shadow: 0 0 3px #dadada;
2160 section > .tabbar-wrapper {
2161 /* The tabbar shouldn't' be visibile inside
2162 the section element. Only after we have
2163 moved it to the nav through js */
2164 display: none !important;
2173 #tabmenu .search-heading {
2175 text-overflow: ellipsis;
2176 white-space: nowrap;
2189 border-bottom: 0 solid $link_color;
2192 transition: all 0.15s ease;
2200 border-bottom-width: 4px;
2202 .tabbar.visible-xs .tabs-extended {
2205 #dropdownMenuTools-xs {
2208 ul.tabbar ul.tabs-extended:hover li.dropdown {
2212 ul.tabbar ul.tabs-extended li.active {
2214 border-bottom-width: 2px;
2216 ul.tabbar ul.tabs-extended li.active a {
2219 ul.dropdown-menu li:hover {
2225 box-sizing: border-box;
2228 .dropdown-menu li a,
2229 .dropdown-menu li .btn-link {
2230 color: $font_color_darker;
2232 .dropdown-menu li > :hover,
2233 .dropdown-menu li > :visited,
2234 .dropdown-menu li > :focus {
2238 .dropdown-menu li:first-child {
2242 /* Notificaiotn badges */
2243 #mail-update-li.show {
2244 display: inline-block !important;
2248 p.wall-item-announce,
2250 .media .shared-time,
2253 .media .location a {
2255 color: $font_color_darker;
2259 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2261 border-left: 3px solid rgba(255, 255, 255, 0);
2264 .media-list > li:hover,
2265 .media-list > li.selected,
2266 .media-list > li.active {
2267 border-left: 3px solid $link_color;
2268 background-color: rgba(247, 247, 247, $contentbg_transp);
2275 .form-control:focus {
2276 border: 2px solid $link_color;
2280 .radio label::before,
2281 .checkbox label::before {
2282 background-color: rgba(255, 255, 255, $contentbg_transp);
2284 .radio label::after {
2285 background-color: $link_color;
2287 .checkbox label::after {
2291 .checkbox input[type="checkbox"]:focus + label::before,
2292 .radio input[type="radio"]:focus + label::before {
2293 outline-color: $link_hover_color;
2297 color: $font_color_darker;
2300 input[type="range"].form-control {
2306 .form-control.form-search {
2307 border-radius: 30px;
2308 background-image: url(img/icon_search16x16.png);
2309 background-repeat: no-repeat;
2310 background-position: 10px 8px;
2313 .form-group-search {
2318 .form-group-search .form-button-search {
2322 border-radius: 30px;
2324 .search-input.form-control.form-search {
2332 .search-content-wrapper > #search-header-wrapper {
2335 .search-content-wrapper > .section-title-wrapper {
2338 #navbar-button > #search-save {
2341 /* Section-Content-Wrapper */
2342 #search-header-wrapper {
2344 padding-bottom: 20px;
2345 margin-bottom: 20px;
2347 background-color: rgba(255, 255, 255, $contentbg_transp);
2350 color: $font_color_darker;
2351 box-shadow: 0 0 3px #dadada;
2352 -webkit-box-shadow: 0 0 3px #dadada;
2353 -moz-box-shadow: 0 0 3px #dadada;
2360 section > .generic-page-wrapper,
2361 .videos-content-wrapper,
2362 .suggest-content-wrapper,
2363 .help-content-wrapper,
2364 .match-content-wrapper,
2365 .dirfind-content-wrapper,
2366 .delegation-content-wrapper,
2367 .notes-content-wrapper,
2368 .message-content-wrapper,
2369 .apps-content-wrapper,
2371 .delegate-content-wrapper,
2372 .uexport-content-wrapper,
2373 .dfrn_request-content-wrapper,
2374 .friendica-content-wrapper,
2375 .credits-content-wrapper,
2376 .nogroup-content-wrapper,
2377 .profperm-content-wrapper,
2378 .invite-content-wrapper,
2379 .tos-content-wrapper,
2380 .fsuggest-content-wrapper {
2381 min-height: calc(100vh - 150px);
2383 padding-bottom: 20px;
2384 margin-bottom: 20px;
2386 background-color: rgba(255, 255, 255, $contentbg_transp);
2389 color: $font_color_darker;
2390 box-shadow: 0 0 3px #dadada;
2391 -webkit-box-shadow: 0 0 3px #dadada;
2392 -moz-box-shadow: 0 0 3px #dadada;
2394 #content:hover .page-action.faded-icon {
2396 transition: all 0.25s ease-in-out;
2398 #content .page-action.faded-icon:hover {
2402 .section-title-wrapper {
2405 /* Home and Login Page */
2406 body.mod-home nav.navbar .nav > li > a:hover {
2407 background-color: rgba(255, 255, 255, 0.2);
2409 body.mod-home .navbar #nav-login,
2410 body.mod-login .navbar #nav-login {
2414 #profile-content-standard,
2415 #profile-content-advanced {
2420 margin-bottom: 20px;
2422 .contact-block-div.forumlist-profile-advanced {
2427 ul.viewcontact_wrapper {
2429 margin-right: -15px;
2431 ul.viewcontact_wrapper > li {
2434 .contact-wrapper .contact-photo-wrapper button {
2437 .contact-wrapper.media {
2439 word-wrap: break-word;
2442 /* bootstrap hack for .media */
2443 .contact-wrapper.media .media-body {
2444 display: table-cell;
2449 .contact-wrapper.media:before,
2454 .contact-wrapper.media:after {
2457 .contact-wrapper .contact-photo-image-wrapper img.contact-photo.xl {
2461 .contact-wrapper .contact-photo-image-wrapper img.contact-photo-xs {
2465 .contact-wrapper .contact-photo-overlay-content.xl {
2468 .contact-wrapper .contact-photo-menu {
2472 .contact-entry-desc {
2473 color: $font_color_darker;
2475 .contact-entry-checkbox {
2478 .contact-wrapper .media-body .contact-entry-name h4.media-heading a {
2479 font-weight: bold !important;
2481 font-size: 15px !important;
2483 .contact-wrapper .contact-actions {
2486 .contact-wrapper .contact-action-link,
2487 .contact-wrapper .contact-action-link:hover,
2488 .textcomplete-item .contact-wrapper .contact-action-link {
2490 color: $font_color_darker;
2493 .contact-wrapper .contact-action-link {
2495 transition: all 0.25s ease-in-out;
2497 ul li:hover .contact-wrapper .contact-action-link {
2499 transition: all 0.25s ease-in-out;
2501 ul li:hover .contact-wrapper .contact-action-link:hover {
2504 #contacts-search-wrapper,
2505 #directory-search-wrapper {
2510 #contact-edit-actions {
2513 #contact-edit-status-wrapper {
2515 background-color: rgba(225, 245, 254, $contentbg_transp);
2518 #contact-edit-settings {
2522 /* directory page */
2523 #directory-search-heading {
2527 /* group edit page */
2530 margin-bottom: 10px;
2533 .group-actions button,
2538 .contact-group-actions .fa-times-circle {
2541 .contact-group-actions .fa-plus-circle {
2545 #group-edit-wrapper {
2549 #group-edit-header {
2552 #group-update-wrapper .contact-photo-overlay {
2555 #group-update-wrapper .viewcontact_wrapper .contact-group-actions {
2558 flex-direction: column;
2559 justify-content: center;
2561 #group-update-wrapper .viewcontact_wrapper .contact-group-link {
2565 #group-update-wrapper .viewcontact_wrapper .contact-action-link:hover {
2568 #group-update-wrapper .shortmode {
2572 #group-update-wrapper .shortmode .contact-photo {
2576 #group-update-wrapper .shortmode .media {
2579 #group-update-wrapper .shortmode .contact-entry-desc {
2580 font-size: 12px !important;
2582 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading {
2585 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading a {
2586 font-size: 13px !important;
2587 white-space: nowrap;
2589 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-rel,
2590 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-network {
2595 .message-content-wrapper > li {
2596 /* we need this overwriting because we have no template file
2597 for the general mail page /message
2599 list-style-type: none;
2602 max-height: calc(100vh - 200px);
2604 #mail-conversation {
2606 max-height: calc(100vh - 400px);
2611 .mail-conv-wrapper .media .contact-photo-wrapper img {
2615 .mail-thread #prvmail-to-label,
2616 .mail-thread #prvmail-subject-label {
2619 .mail-thread #prvmail-message-label > label {
2622 .mail-thread #prvmail-message-label textarea {
2625 .mail-conv-wrapper {
2627 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2630 height: calc(100vh - 150px);
2633 height: calc(100% - 20px);
2635 #message-preview ul {
2638 #message-preview .media-list li {
2642 #message-preview .media-list li:hover {
2643 border-left: none !important;
2645 #message-preview .media-list li a {
2648 .mail-list-outside-wrapper {
2650 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2652 .mail-list-outside-wrapper .contact-photo-wrapper img {
2659 #modal #prvmail-text-edit-bb .bb-img {
2664 #photo-album-edit-name-label {
2667 .photo-album-edit-name {
2671 .photo-album-actions {
2672 margin-bottom: 10px;
2674 .photo-album-actions .photos-order-link {
2679 .fc .fc-month-view .fc-content .fc-title .item-desc:hover {
2680 color: $link_hover_color;
2682 .fc .fc-list-item-title a {
2685 .fc .fc-list-item-title a[href]:hover {
2686 color: $link_hover_color;
2687 text-decoration: none;
2689 .event-wrapper .event-owner {
2690 margin-bottom: 15px;
2692 .event-wrapper .event-owner img {
2701 .event-wrapper .vevent {
2704 box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
2706 .event-wrapper .event-buttons {
2709 #event-form-wrapper {
2712 #event-edit-form-wrapper {
2716 color: $font_color_darker;
2718 #event-edit-form-wrapper #event-edit-time {
2721 .event-buttons .plink-event-link {
2724 .vevent .event-summary {
2727 .vevent .event-description {
2730 .vevent .event-location .location {
2734 .modal-body .vevent .event-summary {
2737 #event-preview .vevent .event-summary {
2742 .event-card-details,
2743 .event-card-header {
2747 .event-card-left-date {
2750 .vevent .event-card-header {
2753 .event-card-left-date {
2754 width: 60px; /* Das muss wahrscheinlich unterschiedlich sein zwischen calendar und stream */
2756 .event-card .event-date-wrapper > span {
2760 white-space: nowrap;
2762 .event-card .event-date-wrapper .event-card-short-month {
2764 text-transform: uppercase;
2766 .event-card .event-date-wrapper.medium .event-card-short-date {
2771 .event-card .event-card-content {
2773 padding: 0 5px 0 15px;
2774 box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
2778 .event-card .event-card-content .event-map-btn {
2784 .event-card .event-card-title {
2786 color: $font_color_darker;
2791 .event-card .event-card-location {
2795 .event-card .event-card-location br {
2798 .event-card .event-card-location br::after {
2801 .event-card-profile-name a {
2804 .event-card-profile-name a:hover {
2805 color: $link_hover_color;
2807 .event-card .event-card-content .event-location-map {
2812 .event-card .event-card-content .event-location-map .map {
2815 .event-card .description {
2817 box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, 0.1) inset;
2830 transform: translateZ(0);
2831 transition: opacity 0.2s;
2836 text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
2838 .photo-next-link > i,
2839 .photo-prev-link > i {
2840 vertical-align: super;
2842 .photo-next-link > i {
2851 #photo-photo:hover .photo-next-link,
2852 #photo-photo:hover .photo-prev-link {
2855 #photo-photo .photo-next-link:hover,
2856 #photo-photo .photo-prev-link:hover {
2860 .photo-comment-wrapper .comment {
2863 .photo-comment-wrapper .wall-item-content {
2864 color: $font_color_darker;
2867 .photo-comment-wrapper .comment-wwedit-wrapper,
2868 .photo-comment-wrapper .wall-item-outside-wrapper.media:first-child {
2873 .profile-listing-table {
2877 .profile-listing-row {
2880 .profile-listing-cell {
2881 display: table-cell;
2883 .profile-listing-photo {
2888 #profile-listing-new-link-wrapper {
2889 margin-bottom: 20px;
2892 #profile-photo-upload-section {
2896 #profile-photo-upload-close {
2901 .section-subtitle-wrapper {
2904 details.profile-jot-net[open] summary:before,
2905 .panel .section-subtitle-wrapper .accordion-toggle:before {
2906 font-family: ForkAwesome;
2910 details.profile-jot-net summary:before,
2911 .panel .section-subtitle-wrapper .accordion-toggle.collapsed:before {
2912 font-family: ForkAwesome;
2915 details.profile-jot-net summary:before {
2919 details.profile-jot-net[open] summary:before {
2923 #settings-nick-wrapper {
2924 margin-bottom: 20px;
2930 /* Emulates Bootstrap display */
2933 background-color: rgba(255, 255, 255, $contentbg_transp);
2936 box-shadow: 0 0 3px #dadada;
2937 -webkit-box-shadow: 0 0 3px #dadada;
2938 -moz-box-shadow: 0 0 3px #dadada;
2941 .settings-block.fakelink,
2942 .settings-block > .fakelink {
2946 .settings-block > .fakelink {
2947 margin: -10px -15px 10px -15px;
2948 border-radius: 4px 4px 0 0;
2951 .settings-block.fakelink:hover,
2952 .settings-block > .fakelink:hover {
2953 color: $link_hover_color;
2955 .settings-block.fakelink > h3,
2956 .settings-block > .fakelink > h3 {
2963 .section-subtitle-wrapper > h2 {
2966 margin-bottom: 10px;
2969 .section-subtitle-wrapper > h3 {
2975 .fakelink > h3:before {
2976 padding-right: 10px;
2978 .widget.fakelink > h3:before {
2979 font-family: ForkAwesome;
2980 content: "\f0da"; /* Right Plain Pointer */
2982 .widget > .fakelink > h3:before,
2983 #sidebar-group-header > .fakelink > h3:before {
2984 font-family: ForkAwesome;
2985 content: "\f0d7"; /* Bottom Plain Pointer */
2992 /* Intro Notifications */
2993 ul.notif-network-list {
2995 margin-right: -15px;
2997 ul.notif-network-list > li {
2999 padding-right: 15px;
3001 .intro-wrapper.media {
3003 word-wrap: break-word;
3006 .intro-photo-wrapper img.intro-photo {
3014 .intro-enty-name h4 {
3015 font-size: 15px !important;
3017 .intro-wrapper button.intro-action-link {
3019 transition: all 0.25s ease-in-out;
3021 .intro-wrapper button.intro-action-link,
3022 .intro-wrapper button.intro-action-link:hover {
3025 color: $font_color_darker;
3027 ul li:hover .intro-wrapper button.intro-action-link {
3029 transition: all 0.25s ease-in-out;
3031 ul li:hover .intro-wrapper button.intro-action-link:hover {
3034 .intro-action-buttons {
3038 transition: max-height 0.1s ease-out;
3040 ul.notif-network-list > li:hover .intro-action-buttons {
3042 transition: max-height 0.1s ease-in;
3046 .intro-network-label,
3047 .intro-location-label,
3048 .intro-keywords-label,
3050 .intro-knowyou-label,
3051 .intro-madeby-label {
3054 .intro-contact-info.xs .intro-url-label,
3055 .intro-contact-info.xs .intro-network-label,
3056 .intro-contact-info.xs .intro-location-label,
3057 .intro-contact-info.xs .intro-keywords-label,
3058 .intro-contact-info.xs .intro-about-label,
3059 .intro-contact-info.xs .intro-knowyou-label {
3064 /* Notifications Page */
3065 ul.notif-network-list li.unseen {
3066 background-color: #e3eff3;
3068 .notif-item img.notif-image {
3073 .notif-item .notif-desc-wrapper {
3076 .notif-item .notif-desc-wrapper a {
3079 color: $font_color_darker;
3086 /* This is a little bit hacky. Since the search page is used for diferent
3087 content types we can't apply the generic-page-wrapper class.
3088 So we apply the css of the generic-page-wrapper class to the ul element with some
3089 little modifications to emulate a standard page template */
3090 .search-content-wrapper > ul.viewcontact_wrapper {
3091 min-height: calc(100vh - 150px);
3093 padding-bottom: 20px;
3095 margin-bottom: 20px;
3097 background-color: rgba(255, 255, 255, $contentbg_transp);
3100 color: $font_color_darker;
3101 box-shadow: 0 0 3px #dadada;
3102 -webkit-box-shadow: 0 0 3px #dadada;
3103 -moz-box-shadow: 0 0 3px #dadada;
3107 section.help-content-wrapper h1 {
3108 padding-bottom: 0.3em;
3110 border-bottom: 1px solid #ddd;
3112 section.help-content-wrapper h2 {
3113 padding-bottom: 0.3em;
3115 border-bottom: 1px solid #ddd;
3117 section.help-content-wrapper h3 {
3120 section.help-content-wrapper h4 {
3123 section.help-content-wrapper h1,
3124 section.help-content-wrapper h2,
3125 section.help-content-wrapper h3,
3126 section.help-content-wrapper h4,
3127 section.help-content-wrapper h5,
3128 section.help-content-wrapper h6 {
3130 margin-bottom: 16px;
3134 section.help-content-wrapper p {
3137 section.help-content-wrapper p,
3138 section.help-content-wrapper a,
3139 section.help-content-wrapper li {
3145 #adminpage #frio_background_image .image-select {
3148 #adminpage #frio_background_image.input-group {
3151 #admin-summary-wrapper {
3154 #adminpage ul#addonslist,
3158 #adminpage li .icon {
3159 display: inline-block;
3160 vertical-align: text-top;
3164 #adminpage li .icon:before {
3166 display: inline-block;
3173 border: 1px solid #cccccc;
3175 background-color: $background_color;
3176 -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3177 -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3178 transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3180 #adminpage li .icon.on:after {
3181 font-family: "ForkAwesome";
3183 display: inline-block;
3196 #adminpage .addon .desc {
3199 #admin-users #users tr.blocked {
3200 background-color: #f8efc0;
3202 .adminpage .table-hover > tbody > tr:hover + tr.details {
3203 background-color: #f5f5f5;
3205 .offset-anchor::before {
3211 pointer-events: none;
3219 #identity-selector-wrapper {
3224 #identity-selector-wrapper .identity-match-photo {
3228 #identity-selector-wrapper .identity-match-photo button {
3231 #identity-selector-wrapper .identity-match-photo .badge {
3236 #identity-selector-wrapper .identity-match-name {
3239 #identity-selector-wrapper .identity-match-details {
3245 #register-openid-wrapper,
3246 #register-name-wrapper,
3247 #register-invite-wrapper,
3248 #profile-publish-wrapper {
3251 #register-openid-end,
3252 #register-nickname-end {
3257 * Overwriting for transparency and other colors
3259 main .nav-tabs > li.active > a,
3260 main .nav-tabs > li.active > a:focus,
3261 main .nav-tabs > li.active > a:hover {
3262 background-color: rgba(255, 255, 255, $contentbg_transp);
3272 @media (min-width: 768px) {
3279 * Framework overwrite
3282 /* textcomplete for contact filtering*/
3283 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list {
3284 position: relative !important;
3285 top: inherit !important;
3286 bottom: inherit !important;
3287 left: inherit !important;
3290 margin-right: -15px;
3291 background-color: transparent;
3295 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li {
3297 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
3299 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li:first-child {
3302 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list .textcomplete-item > a {
3303 padding: 0 !important;
3305 background-color: transparent !important;
3307 /* this is a little hack for texcomplete contact filter
3308 There are for some reasons empty <a> tags. I don't know why */
3309 .textcomplete-item .contact-wrapper a {
3314 body .tread-wrapper .hovercard a,
3315 body .tread-wrapper .hovercard a:hover {
3318 body .tread-wrapper .hovercard:hover .hover-card-content a {
3319 color: $link_color !important;
3322 /* Pagination improvements */
3327 .pagination > li > a,
3328 .pagination > li > span {
3332 .pagination > li > a:hover,
3333 .pagination > li > span:hover {
3334 color: $link_hover_color;
3336 .pagination > .active > a,
3337 .pagination > .active > a:focus,
3338 .pagination > .active > a:hover,
3339 .pagination > .active > span,
3340 .pagination > .active > span:focus,
3341 .pagination > .active > span:hover {
3342 background-color: $link_color;
3343 border-color: $link_color;
3346 .pagination li.pager_n a {
3350 .pagination .pager_prev a {
3353 border-top-right-radius: 3px;
3354 border-bottom-right-radius: 3px;
3356 .pagination .pager_next a {
3359 border-top-left-radius: 3px;
3360 border-bottom-left-radius: 3px;
3363 .pager .previous > a {
3367 .pagination .disabled > a,
3368 .pager .disabled > a {
3374 background-color: rgba(255, 255, 255, $contentbg_transp);
3378 * some temporary workarounds until this will solved
3379 * elsewhere (e.g. new templates)
3381 section .profile-match-wrapper {
3388 #login-submit-wrapper {
3391 #lost-password-link {
3394 #login-lost-password-link {
3395 margin-bottom: 10px;
3401 #id_password_wrapper {
3402 margin-bottom: unset;
3409 background: #8ad0a1;
3416 .mod-home.is-not-singleuser,
3418 background-color: $login_bg_color;
3419 background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4)), url($login_bg_image);
3420 background-size: cover;
3421 background-attachment: fixed;
3422 background-position: center;
3425 .mod-home.is-not-singleuser nav.navbar,
3426 .mod-login nav.navbar {
3427 background-color: transparent;
3430 .mod-home.is-not-singleuser #topbar-second,
3431 .mod-login #topbar-second {
3432 background-color: transparent;
3436 .mod-home.is-not-singleuser .login-content,
3437 .mod-login .login-content {
3442 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3446 .mod-home.is-not-singleuser .login-form > #login-form label,
3447 .mod-login #content #login-form label {
3451 .mod-home.is-not-singleuser .login-panel-content,
3452 .mod-login .login-panel-content {
3453 background-color: rgba(255, 255, 255, 0.85);
3457 background: $nav_bg !important;
3458 color: $btn_primary_color !important;
3461 -webkit-box-shadow: none;
3463 -moz-box-shadow: none;
3464 background-image: none;
3472 width: 100% !important;
3475 .qq-upload-drop-area {
3476 background: white !important;
3479 -webkit-box-shadow: none;
3481 -moz-box-shadow: none;
3482 background-image: none;
3490 width: 100% !important;
3491 display: block !important;
3492 position: relative !important;
3493 border: black 1px dashed !important;
3494 margin-bottom: 5px !important;
3495 margin-top: 15px !important;
3499 * The different views of js fullcalendar
3503 margin-bottom: 10px;
3507 #event-calendar-title {
3508 display: inline-block;
3517 #fc-header-right .dropdown > button {
3520 #event-calendar-title {
3521 vertical-align: middle;
3523 #event-calendar-views {
3530 .fc .fc-month-view td.fc-widget-content,
3532 .fc .fc-list-view .fc-list-table td,
3536 .fc td.fc-widget-header,
3537 .fc th.fc-widget-header {
3542 .fc .fc-month-view td.fc-day {
3545 border-bottom: 1px solid;
3548 .fc .fc-day-grid-container .fc-row {
3549 border-bottom: 1px solid;
3552 .fc tr td.fc-today {
3555 .fc .fc-month-view .fc-content .fc-title .item-desc {
3558 .fc .fc-view-container {
3561 .fc .fc-list-view td {
3564 #events-calendar.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
3569 background-color: #e3f2fd;
3570 border: 1px solid #bbdefb;
3571 color: $font_color_darker;
3573 .fc .fc-month-view .fc-time,
3574 .fc .fc-listMonth-view .fc-list-item-time,
3575 .fc .fc-listMonth-view .fc-list-item-marker,
3576 .fc .fc-listMonth-view .fc-widget-header {
3579 .fc .fc-listMonth-view .fc-list-item:hover td {
3580 background: transparent;
3583 .fc .fc-listMonth-view .seperator {
3594 .event-card .event-label,
3595 .event-card .location-label {
3598 .popover.event-card .event-card-basic-content {
3603 .event-card .event-hover-location .location {
3609 .generic-page-wrapper.contact-follow-wrapper {
3613 /* Medium devices (desktops, 992px and up) */
3614 @media (min-width: 992px) {
3615 .mod-home.is-not-singleuser #content,
3616 .mod-login #content {
3617 margin-top: 100px !important;
3620 .mod-home.is-not-singleuser .login-form > #login-form,
3621 .mod-home.is-not-singleuser .login-form > #login-extra-links,
3622 .mod-login #content #login-form {
3623 background-color: #fff;
3627 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3629 background-color: white;
3632 .mod-home.is-not-singleuser .login-form > #login-form label,
3633 .mod-login #content #login-form label {
3637 .mod-home.is-not-singleuser .login-form::before,
3638 .mod-login #content #login-form::before {
3642 background-color: rgba(255, 255, 255, 0.1);
3650 .mod-home.is-not-singleuser .login-form::after,
3651 .mod-login #content #login-form::after {
3655 background-color: rgba(255, 255, 255, 0.2);
3664 /* Mobile display */
3665 @media (max-width: 600px) {
3673 #friendica-logo-mask {
3687 .panel .panel-body {
3691 .toplevel_item > .wall-item-container {
3699 .wall-item-actions {
3707 .generic-page-wrapper,
3708 .videos-content-wrapper,
3709 .suggest-content-wrapper,
3710 .help-content-wrapper,
3711 .match-content-wrapper,
3712 .dirfind-content-wrapper,
3713 .directory-content-wrapper,
3714 .delegation-content-wrapper,
3715 .notes-content-wrapper,
3716 .message-content-wrapper,
3717 .apps-content-wrapper,
3719 .delegate-content-wrapper,
3720 .uexport-content-wrapper,
3721 .dfrn_request-content-wrapper,
3722 .friendica-content-wrapper,
3723 .credits-content-wrapper,
3724 .nogroup-content-wrapper,
3725 .profperm-content-wrapper,
3726 .invite-content-wrapper,
3727 .tos-content-wrapper,
3728 .fsuggest-content-wrapper {
3788 .wwto .contact-photo {
3796 Prevent automatic zoom on input focus on iOS
3797 see https://stackoverflow.com/a/16255670
3803 .wall-item-container.thread_level_3,
3804 .wall-item-container.thread_level_4,
3805 .wall-item-container.thread_level_5,
3806 .wall-item-container.thread_level_6,
3807 .wall-item-container.thread_level_7 {