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 {
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"] {
1712 .shared_header .preferences {
1716 .wall-item-network {
1720 /* wall items contact info */
1721 .media .media-body {
1724 .media .media-body h4.media-heading {
1727 color: $font_color_darker;
1729 .media .media-body .addional-info a,
1730 .media .media-body h5.media-heading > a {
1733 .media .contact-info-comment {
1734 display: table-cell;
1736 .media .contact-info-xs h5,
1737 .media .contact-info-comment {
1748 .wall-item-name.xs {
1753 /* Contact avatar click card */
1754 .userinfo.click-card {
1758 .userinfo.click-card > *:hover:after {
1763 background-color: #ffffff;
1772 border-radius: 0 0 40% 0;
1775 /* The lock symbol popup */
1779 background-color: $nav_bg;
1789 color: $nav_icon_color;
1793 /* Space between content and head */
1798 /* wall items content */
1799 .wall-item-content {
1800 word-break: break-word;
1802 .wall-item-content img {
1803 object-fit: contain;
1805 .wall-item-body > img,
1806 .wall-item-body > a > img {
1809 .wall-item-body .body-attach > a {
1810 color: $font_color_darker;
1811 display: inline-block;
1813 .wall-item-body .body-attach > a div {
1814 color: $font_color_darker;
1818 /* wall-item content elements */
1826 box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.1) inset, 0 1px 1px rgba(0, 0, 0, 0.05);
1828 @media screen and (max-width: 767px) {
1834 margin: 5px -10px 0;
1838 box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.05);
1844 margin-bottom: 10px;
1848 blockquote.shared_content {
1854 padding: 10px 10px 1px 0;
1859 .type-link img.attachment-image {
1862 .type-link blockquote,
1863 .type-video blockquote {
1867 .oembed.video .embed_video > div::before {
1868 font-family: ForkAwesome;
1869 font-weight: normal;
1871 display: inline-block;
1872 text-decoration: inherit;
1873 vertical-align: top;
1881 .oembed.video .embed_video > div {
1882 background-color: rgba(0, 0, 0, 0.2);
1883 -webkit-transition: all 0.25s ease-in-out;
1884 -moz-transition: all 0.25s ease-in-out;
1885 -o-transition: all 0.25s ease-in-out;
1886 -ms-transition: all 0.25s ease-in-out;
1887 transition: all 0.25s ease-in-out;
1889 .oembed.video .embed_video > div:hover {
1890 background-color: rgba(0, 0, 0, 0);
1892 .oembed.video .embed_video.active {
1895 .oembed.video .embed_video.active iframe {
1896 width: 100% !important;
1905 color: $font_color_darker;
1908 .wall-item-tags a:hover {
1909 text-decoration: none;
1911 .wall-item-bottom .label,
1912 .wall-item-bottom .label a {
1915 .wall-item-tags .category,
1916 .wall-item-tags .folder {
1920 /* item social action buttons */
1921 .wall-item-actions {
1924 justify-content: space-between;
1926 .wall-item-actions a,
1927 .wall-item-actions button {
1929 color: $font_color_darker;
1931 .wall-item-actions .active {
1935 .wall-item-actions-left {
1936 display: table-cell;
1937 vertical-align: middle;
1939 .wall-item-actions-right {
1942 .wall-item-actions .checkbox {
1946 .wall-item-actions button:hover {
1947 color: $font_color_darker;
1948 text-decoration: underline;
1950 .wall-item-actions .separator {
1954 .wall-item-responses > div > p {
1958 /* wall item hover effects */
1960 @media (min-width: 768px) {
1961 /* Tags and mentions */
1962 .wall-item-container .wall-item-bottom .wall-item-tags span.label {
1963 filter: grayscale(0.5);
1966 -webkit-transition: all 0.25s ease-in-out;
1967 -moz-transition: all 0.25s ease-in-out;
1968 -o-transition: all 0.25s ease-in-out;
1969 -ms-transition: all 0.25s ease-in-out;
1970 transition: all 0.25s ease-in-out;
1973 .wall-item-container:hover .wall-item-bottom .wall-item-tags span.label {
1974 filter: grayscale(0);
1977 -webkit-transition: all 0.25s ease-in-out;
1978 -moz-transition: all 0.25s ease-in-out;
1979 -o-transition: all 0.25s ease-in-out;
1980 -ms-transition: all 0.25s ease-in-out;
1981 transition: all 0.25s ease-in-out;
1983 /* Like/Comment/etc buttons */
1984 .wall-item-container .wall-item-links,
1985 .wall-item-container .wall-item-actions button > a {
1988 -webkit-transition: all 0.25s ease-in-out;
1989 -moz-transition: all 0.25s ease-in-out;
1990 -o-transition: all 0.25s ease-in-out;
1991 -ms-transition: all 0.25s ease-in-out;
1992 transition: all 0.25s ease-in-out;
1994 .wall-item-container:hover .wall-item-links,
1995 .wall-item-container:hover .wall-item-actions button > a {
1998 -webkit-transition: all 0.25s ease-in-out;
1999 -moz-transition: all 0.25s ease-in-out;
2000 -o-transition: all 0.25s ease-in-out;
2001 -ms-transition: all 0.25s ease-in-out;
2002 transition: all 0.25s ease-in-out;
2004 .wall-item-container .wall-item-body .body-attach > a:hover {
2012 wall-item-comment-wrapper.well {
2015 background-color: rgba(237, 237, 237, $contentbg_transp);
2016 background-image: none;
2018 background-color: red;
2020 wall-item-comment-wrapper.well-small {
2024 wall-item-comment-wrapper.well hr {
2025 border-top: 1px solid #d9d9d9;
2027 .wall-entry wall-item-comment-wrapper.well {
2030 .comment-container {
2032 border-top-left-radius: 3px;
2033 border-top-right-radius: 3px;
2034 border-bottom-right-radius: 0px;
2035 border-bottom-left-radius: 0px;
2038 position: relative !important;
2041 .hide-comments-outer {
2042 background-color: rgba(0, 0, 0, 0.03);
2044 border-radius: 0.5em 0.5em 0 0;
2046 .hide-comments-total {
2055 .wall-item-comment-wrapper {
2057 border-top: 1px solid rgba(255, 255, 255, 0.8);
2058 background-color: rgba(0, 0, 0, 0.03);
2059 border-radius: 0 0 4px 4px;
2063 .comment-fake-form {
2064 border-color: #d9d9d9;
2066 .comment-fake-form textarea {
2070 .comment-container .wall-item-comment-wrapper {
2074 .comment-edit-form textarea {
2078 .comment-edit-submit-wrapper {
2083 .comment-icon-list {
2085 justify-content: space-between;
2088 /* acpopup + textcompletion*/
2090 background-color: #ffffff;
2094 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
2099 /** @todo: we schould consider the possebility to overwrite bootstrap dropdowns
2100 at the beginning of this file to get rid of the !important */
2101 .textcomplete-item > a {
2102 color: $font_color_darker !important;
2103 padding: 5px 20px !important;
2105 .textcomplete-item.active > a {
2106 background-color: rgb(247, 247, 247) !important;
2107 background-image: none !important;
2108 border-left: 3px solid $link_color;
2109 padding-left: 17px !important;
2111 .textcomplete-item a .forum {
2118 /* The wall-item thread levels */
2119 .wall-item-container.thread_level_3,
2120 .wall-item-container.thread_level_4,
2121 .wall-item-container.thread_level_5,
2122 .wall-item-container.thread_level_6,
2123 .wall-item-container.thread_level_7 {
2133 background-color: rgba(247, 247, 247, $contentbg_transp);
2134 box-shadow: 0 0 3px #dadada;
2135 -webkit-box-shadow: 0 0 3px #dadada;
2136 -moz-box-shadow: 0 0 3px #dadada;
2141 section > .tabbar-wrapper {
2142 /* The tabbar shouldn't' be visibile inside
2143 the section element. Only after we have
2144 moved it to the nav through js */
2145 display: none !important;
2154 #tabmenu .search-heading {
2156 text-overflow: ellipsis;
2157 white-space: nowrap;
2170 border-bottom: 0 solid $link_color;
2173 transition: all 0.15s ease;
2181 border-bottom-width: 4px;
2183 .tabbar.visible-xs .tabs-extended {
2186 #dropdownMenuTools-xs {
2189 ul.tabbar ul.tabs-extended:hover li.dropdown {
2193 ul.tabbar ul.tabs-extended li.active {
2195 border-bottom-width: 2px;
2197 ul.tabbar ul.tabs-extended li.active a {
2200 ul.dropdown-menu li:hover {
2206 box-sizing: border-box;
2209 .dropdown-menu li a,
2210 .dropdown-menu li .btn-link {
2211 color: $font_color_darker;
2213 .dropdown-menu li > :hover,
2214 .dropdown-menu li > :visited,
2215 .dropdown-menu li > :focus {
2219 .dropdown-menu li:first-child {
2223 /* Notificaiotn badges */
2224 #mail-update-li.show {
2225 display: inline-block !important;
2229 p.wall-item-announce,
2231 .media .shared-time,
2234 .media .location a {
2236 color: $font_color_darker;
2240 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2242 border-left: 3px solid rgba(255, 255, 255, 0);
2245 .media-list > li:hover,
2246 .media-list > li.selected,
2247 .media-list > li.active {
2248 border-left: 3px solid $link_color;
2249 background-color: rgba(247, 247, 247, $contentbg_transp);
2256 .form-control:focus {
2257 border: 2px solid $link_color;
2261 .radio label::before,
2262 .checkbox label::before {
2263 background-color: rgba(255, 255, 255, $contentbg_transp);
2265 .radio label::after {
2266 background-color: $link_color;
2268 .checkbox label::after {
2272 .checkbox input[type="checkbox"]:focus + label::before,
2273 .radio input[type="radio"]:focus + label::before {
2274 outline-color: $link_hover_color;
2278 color: $font_color_darker;
2281 input[type="range"].form-control {
2287 .form-control.form-search {
2288 border-radius: 30px;
2289 background-image: url(img/icon_search16x16.png);
2290 background-repeat: no-repeat;
2291 background-position: 10px 8px;
2294 .form-group-search {
2299 .form-group-search .form-button-search {
2303 border-radius: 30px;
2305 .search-input.form-control.form-search {
2313 .search-content-wrapper > #search-header-wrapper {
2316 .search-content-wrapper > .section-title-wrapper {
2319 #navbar-button > #search-save {
2322 /* Section-Content-Wrapper */
2323 #search-header-wrapper {
2325 padding-bottom: 20px;
2326 margin-bottom: 20px;
2328 background-color: rgba(255, 255, 255, $contentbg_transp);
2331 color: $font_color_darker;
2332 box-shadow: 0 0 3px #dadada;
2333 -webkit-box-shadow: 0 0 3px #dadada;
2334 -moz-box-shadow: 0 0 3px #dadada;
2341 section > .generic-page-wrapper,
2342 .videos-content-wrapper,
2343 .suggest-content-wrapper,
2344 .help-content-wrapper,
2345 .match-content-wrapper,
2346 .dirfind-content-wrapper,
2347 .delegation-content-wrapper,
2348 .notes-content-wrapper,
2349 .message-content-wrapper,
2350 .apps-content-wrapper,
2352 .delegate-content-wrapper,
2353 .uexport-content-wrapper,
2354 .dfrn_request-content-wrapper,
2355 .friendica-content-wrapper,
2356 .credits-content-wrapper,
2357 .nogroup-content-wrapper,
2358 .profperm-content-wrapper,
2359 .invite-content-wrapper,
2360 .tos-content-wrapper,
2361 .fsuggest-content-wrapper {
2362 min-height: calc(100vh - 150px);
2364 padding-bottom: 20px;
2365 margin-bottom: 20px;
2367 background-color: rgba(255, 255, 255, $contentbg_transp);
2370 color: $font_color_darker;
2371 box-shadow: 0 0 3px #dadada;
2372 -webkit-box-shadow: 0 0 3px #dadada;
2373 -moz-box-shadow: 0 0 3px #dadada;
2375 #content:hover .page-action.faded-icon {
2377 transition: all 0.25s ease-in-out;
2379 #content .page-action.faded-icon:hover {
2383 .section-title-wrapper {
2386 /* Home and Login Page */
2387 body.mod-home nav.navbar .nav > li > a:hover {
2388 background-color: rgba(255, 255, 255, 0.2);
2390 body.mod-home .navbar #nav-login,
2391 body.mod-login .navbar #nav-login {
2395 #profile-content-standard,
2396 #profile-content-advanced {
2401 margin-bottom: 20px;
2403 .contact-block-div.forumlist-profile-advanced {
2408 ul.viewcontact_wrapper {
2410 margin-right: -15px;
2412 ul.viewcontact_wrapper > li {
2415 .contact-wrapper .contact-photo-wrapper button {
2418 .contact-wrapper.media {
2420 word-wrap: break-word;
2423 /* bootstrap hack for .media */
2424 .contact-wrapper.media .media-body {
2425 display: table-cell;
2430 .contact-wrapper.media:before,
2435 .contact-wrapper.media:after {
2438 .contact-wrapper .contact-photo-image-wrapper img.contact-photo.xl {
2442 .contact-wrapper .contact-photo-image-wrapper img.contact-photo-xs {
2446 .contact-wrapper .contact-photo-overlay-content.xl {
2449 .contact-wrapper .contact-photo-menu {
2453 .contact-entry-desc {
2454 color: $font_color_darker;
2456 .contact-entry-checkbox {
2459 .contact-wrapper .media-body .contact-entry-name h4.media-heading a {
2460 font-weight: bold !important;
2462 font-size: 15px !important;
2464 .contact-wrapper .contact-actions {
2467 .contact-wrapper .contact-action-link,
2468 .contact-wrapper .contact-action-link:hover,
2469 .textcomplete-item .contact-wrapper .contact-action-link {
2471 color: $font_color_darker;
2474 .contact-wrapper .contact-action-link {
2476 transition: all 0.25s ease-in-out;
2478 ul li:hover .contact-wrapper .contact-action-link {
2480 transition: all 0.25s ease-in-out;
2482 ul li:hover .contact-wrapper .contact-action-link:hover {
2485 #contacts-search-wrapper,
2486 #directory-search-wrapper {
2489 #contact-drop-confirm .contact-actions,
2490 #contact-drop-confirm .contact-photo-overlay,
2491 #contact-drop-confirm .contact-photo-menu {
2494 #contact-drop-confirm #confirm-form {
2499 #contact-edit-actions {
2502 #contact-edit-status-wrapper {
2504 background-color: rgba(225, 245, 254, $contentbg_transp);
2507 #contact-edit-settings {
2511 /* directory page */
2512 #directory-search-heading {
2516 /* group edit page */
2519 margin-bottom: 10px;
2522 .group-actions button,
2527 .contact-group-actions .fa-times-circle {
2530 .contact-group-actions .fa-plus-circle {
2534 #group-edit-wrapper {
2538 #group-edit-header {
2541 #group-update-wrapper .contact-photo-overlay {
2544 #group-update-wrapper .viewcontact_wrapper .contact-group-actions {
2549 #group-update-wrapper .viewcontact_wrapper .contact-group-link {
2554 #group-update-wrapper .viewcontact_wrapper .contact-action-link:hover {
2557 #group-update-wrapper .shortmode {
2561 #group-update-wrapper .shortmode .contact-photo {
2565 #group-update-wrapper .shortmode .media {
2568 #group-update-wrapper .shortmode .contact-entry-desc {
2569 font-size: 12px !important;
2571 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading {
2574 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading a {
2575 font-size: 13px !important;
2576 white-space: nowrap;
2578 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-rel,
2579 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-network {
2584 .message-content-wrapper > li {
2585 /* we need this overwriting because we have no template file
2586 for the general mail page /message
2588 list-style-type: none;
2591 max-height: calc(100vh - 200px);
2593 #mail-conversation {
2595 max-height: calc(100vh - 400px);
2600 .mail-conv-wrapper .media .contact-photo-wrapper img {
2604 .mail-thread #prvmail-to-label,
2605 .mail-thread #prvmail-subject-label {
2608 .mail-thread #prvmail-message-label > label {
2611 .mail-thread #prvmail-message-label textarea {
2614 .mail-conv-wrapper {
2616 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2619 height: calc(100vh - 150px);
2622 height: calc(100% - 20px);
2624 #message-preview ul {
2627 #message-preview .media-list li {
2631 #message-preview .media-list li:hover {
2632 border-left: none !important;
2634 #message-preview .media-list li a {
2637 .mail-list-outside-wrapper {
2639 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2641 .mail-list-outside-wrapper .contact-photo-wrapper img {
2648 #modal #prvmail-text-edit-bb .bb-img {
2653 #photo-album-edit-name-label {
2656 .photo-album-edit-name {
2660 .photo-album-actions {
2661 margin-bottom: 10px;
2663 .photo-album-actions .photos-order-link {
2668 .fc .fc-month-view .fc-content .fc-title .item-desc:hover {
2669 color: $link_hover_color;
2671 .fc .fc-list-item-title a {
2674 .fc .fc-list-item-title a[href]:hover {
2675 color: $link_hover_color;
2676 text-decoration: none;
2678 .event-wrapper .event-owner {
2679 margin-bottom: 15px;
2681 .event-wrapper .event-owner img {
2690 .event-wrapper .vevent {
2693 box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
2695 .event-wrapper .event-buttons {
2698 #event-form-wrapper {
2701 #event-edit-form-wrapper {
2705 color: $font_color_darker;
2707 #event-edit-form-wrapper #event-edit-time {
2710 .event-buttons .plink-event-link {
2713 .vevent .event-summary {
2716 .vevent .event-description {
2719 .vevent .event-location .location {
2723 .modal-body .vevent .event-summary {
2726 #event-preview .vevent .event-summary {
2731 .event-card-details,
2732 .event-card-header {
2736 .event-card-left-date {
2739 .vevent .event-card-header {
2742 .event-card-left-date {
2743 width: 60px; /* Das muss wahrscheinlich unterschiedlich sein zwischen calendar und stream */
2745 .event-card .event-date-wrapper > span {
2749 white-space: nowrap;
2751 .event-card .event-date-wrapper .event-card-short-month {
2753 text-transform: uppercase;
2755 .event-card .event-date-wrapper.medium .event-card-short-date {
2760 .event-card .event-card-content {
2762 padding: 0 5px 0 15px;
2763 box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
2767 .event-card .event-card-content .event-map-btn {
2773 .event-card .event-card-title {
2775 color: $font_color_darker;
2780 .event-card .event-card-location {
2784 .event-card .event-card-location br {
2787 .event-card .event-card-location br::after {
2790 .event-card-profile-name a {
2793 .event-card-profile-name a:hover {
2794 color: $link_hover_color;
2796 .event-card .event-card-content .event-location-map {
2801 .event-card .event-card-content .event-location-map .map {
2804 .event-card .description {
2806 box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, 0.1) inset;
2819 transform: translateZ(0);
2820 transition: opacity 0.2s;
2825 text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
2827 .photo-next-link > i,
2828 .photo-prev-link > i {
2829 vertical-align: super;
2831 .photo-next-link > i {
2840 #photo-photo:hover .photo-next-link,
2841 #photo-photo:hover .photo-prev-link {
2844 #photo-photo .photo-next-link:hover,
2845 #photo-photo .photo-prev-link:hover {
2849 .photo-comment-wrapper .comment {
2852 .photo-comment-wrapper .wall-item-content {
2853 color: $font_color_darker;
2856 .photo-comment-wrapper .comment-wwedit-wrapper,
2857 .photo-comment-wrapper .wall-item-outside-wrapper.media:first-child {
2862 .profile-listing-table {
2866 .profile-listing-row {
2869 .profile-listing-cell {
2870 display: table-cell;
2872 .profile-listing-photo {
2877 #profile-listing-new-link-wrapper {
2878 margin-bottom: 20px;
2881 #profile-photo-upload-section {
2885 #profile-photo-upload-close {
2890 .section-subtitle-wrapper {
2893 details.profile-jot-net[open] summary:before,
2894 .panel .section-subtitle-wrapper a.accordion-toggle:before {
2895 font-family: ForkAwesome;
2899 details.profile-jot-net summary:before,
2900 .panel .section-subtitle-wrapper a.accordion-toggle.collapsed:before {
2901 font-family: ForkAwesome;
2904 details.profile-jot-net summary:before {
2908 details.profile-jot-net[open] summary:before {
2912 #settings-nick-wrapper {
2913 margin-bottom: 20px;
2919 /* Emulates Bootstrap display */
2922 background-color: rgba(255, 255, 255, $contentbg_transp);
2925 box-shadow: 0 0 3px #dadada;
2926 -webkit-box-shadow: 0 0 3px #dadada;
2927 -moz-box-shadow: 0 0 3px #dadada;
2930 .settings-block.fakelink,
2931 .settings-block > .fakelink {
2935 .settings-block > .fakelink {
2936 margin: -10px -15px 10px -15px;
2937 border-radius: 4px 4px 0 0;
2940 .settings-block.fakelink:hover,
2941 .settings-block > .fakelink:hover {
2942 color: $link_hover_color;
2944 .settings-block.fakelink > h3,
2945 .settings-block > .fakelink > h3 {
2952 .section-subtitle-wrapper > h2 {
2955 margin-bottom: 10px;
2958 .fakelink > h3:before {
2959 padding-right: 10px;
2961 .widget.fakelink > h3:before,
2962 .settings-block.fakelink > h3:before {
2963 font-family: ForkAwesome;
2964 content: "\f0da"; /* Right Plain Pointer */
2966 .widget > .fakelink > h3:before,
2967 #sidebar-group-header > .fakelink > h3:before,
2968 .settings-block > .fakelink > h3:before {
2969 font-family: ForkAwesome;
2970 content: "\f0d7"; /* Bottom Plain Pointer */
2977 /* Intro Notifications */
2978 ul.notif-network-list {
2980 margin-right: -15px;
2982 ul.notif-network-list > li {
2984 padding-right: 15px;
2986 .intro-wrapper.media {
2988 word-wrap: break-word;
2991 .intro-photo-wrapper img.intro-photo {
2999 .intro-enty-name h4 {
3000 font-size: 15px !important;
3002 .intro-wrapper button.intro-action-link {
3004 transition: all 0.25s ease-in-out;
3006 .intro-wrapper button.intro-action-link,
3007 .intro-wrapper button.intro-action-link:hover {
3010 color: $font_color_darker;
3012 ul li:hover .intro-wrapper button.intro-action-link {
3014 transition: all 0.25s ease-in-out;
3016 ul li:hover .intro-wrapper button.intro-action-link:hover {
3019 .intro-action-buttons {
3023 transition: max-height 0.1s ease-out;
3025 ul.notif-network-list > li:hover .intro-action-buttons {
3027 transition: max-height 0.1s ease-in;
3031 .intro-network-label,
3032 .intro-location-label,
3033 .intro-keywords-label,
3035 .intro-knowyou-label,
3036 .intro-madeby-label {
3039 .intro-contact-info.xs .intro-url-label,
3040 .intro-contact-info.xs .intro-network-label,
3041 .intro-contact-info.xs .intro-location-label,
3042 .intro-contact-info.xs .intro-keywords-label,
3043 .intro-contact-info.xs .intro-about-label,
3044 .intro-contact-info.xs .intro-knowyou-label {
3049 /* Notifications Page */
3050 ul.notif-network-list li.unseen {
3051 background-color: #e3eff3;
3053 .notif-item img.notif-image {
3058 .notif-item .notif-desc-wrapper {
3061 .notif-item .notif-desc-wrapper a {
3064 color: $font_color_darker;
3071 /* This is a little bit hacky. Since the search page is used for diferent
3072 content types we can't apply the generic-page-wrapper class.
3073 So we apply the css of the generic-page-wrapper class to the ul element with some
3074 little modifications to emulate a standard page template */
3075 .search-content-wrapper > ul.viewcontact_wrapper {
3076 min-height: calc(100vh - 150px);
3078 padding-bottom: 20px;
3080 margin-bottom: 20px;
3082 background-color: rgba(255, 255, 255, $contentbg_transp);
3085 color: $font_color_darker;
3086 box-shadow: 0 0 3px #dadada;
3087 -webkit-box-shadow: 0 0 3px #dadada;
3088 -moz-box-shadow: 0 0 3px #dadada;
3092 section.help-content-wrapper h1 {
3093 padding-bottom: 0.3em;
3095 border-bottom: 1px solid #ddd;
3097 section.help-content-wrapper h2 {
3098 padding-bottom: 0.3em;
3100 border-bottom: 1px solid #ddd;
3102 section.help-content-wrapper h3 {
3105 section.help-content-wrapper h4 {
3108 section.help-content-wrapper h1,
3109 section.help-content-wrapper h2,
3110 section.help-content-wrapper h3,
3111 section.help-content-wrapper h4,
3112 section.help-content-wrapper h5,
3113 section.help-content-wrapper h6 {
3115 margin-bottom: 16px;
3119 section.help-content-wrapper p {
3122 section.help-content-wrapper p,
3123 section.help-content-wrapper a,
3124 section.help-content-wrapper li {
3130 #adminpage #frio_background_image .image-select {
3133 #adminpage #frio_background_image.input-group {
3136 #admin-summary-wrapper {
3139 #adminpage ul#addonslist,
3143 #adminpage li .icon {
3144 display: inline-block;
3145 vertical-align: text-top;
3149 #adminpage li .icon:before {
3151 display: inline-block;
3158 border: 1px solid #cccccc;
3160 background-color: $background_color;
3161 -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3162 -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3163 transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3165 #adminpage li .icon.on:after {
3166 font-family: "ForkAwesome";
3168 display: inline-block;
3181 #adminpage .addon .desc {
3184 #admin-users #users tr.blocked {
3185 background-color: #f8efc0;
3187 .adminpage .table-hover > tbody > tr:hover + tr.details {
3188 background-color: #f5f5f5;
3190 .offset-anchor::before {
3196 pointer-events: none;
3204 #identity-selector-wrapper {
3209 #identity-selector-wrapper .identity-match-photo {
3213 #identity-selector-wrapper .identity-match-photo button {
3216 #identity-selector-wrapper .identity-match-photo .badge {
3221 #identity-selector-wrapper .identity-match-name {
3224 #identity-selector-wrapper .identity-match-details {
3230 #register-openid-wrapper,
3231 #register-name-wrapper,
3232 #register-invite-wrapper,
3233 #profile-publish-wrapper {
3236 #register-openid-end,
3237 #register-nickname-end {
3242 * Overwriting for transparency and other colors
3244 main .nav-tabs > li.active > a,
3245 main .nav-tabs > li.active > a:focus,
3246 main .nav-tabs > li.active > a:hover {
3247 background-color: rgba(255, 255, 255, $contentbg_transp);
3257 @media (min-width: 768px) {
3264 * Framework overwrite
3267 /* textcomplete for contact filtering*/
3268 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list {
3269 position: relative !important;
3270 top: inherit !important;
3271 bottom: inherit !important;
3272 left: inherit !important;
3275 margin-right: -15px;
3276 background-color: transparent;
3280 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li {
3282 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
3284 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li:first-child {
3287 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list .textcomplete-item > a {
3288 padding: 0 !important;
3290 background-color: transparent !important;
3292 /* this is a little hack for texcomplete contact filter
3293 There are for some reasons empty <a> tags. I don't know why */
3294 .textcomplete-item .contact-wrapper a {
3299 body .tread-wrapper .hovercard a,
3300 body .tread-wrapper .hovercard a:hover {
3303 body .tread-wrapper .hovercard:hover .hover-card-content a {
3304 color: $link_color !important;
3307 /* Pagination improvements */
3312 .pagination > li > a,
3313 .pagination > li > span {
3317 .pagination > li > a:hover,
3318 .pagination > li > span:hover {
3319 color: $link_hover_color;
3321 .pagination > .active > a,
3322 .pagination > .active > a:focus,
3323 .pagination > .active > a:hover,
3324 .pagination > .active > span,
3325 .pagination > .active > span:focus,
3326 .pagination > .active > span:hover {
3327 background-color: $link_color;
3328 border-color: $link_color;
3331 .pagination li.pager_n a {
3335 .pagination .pager_prev a {
3338 border-top-right-radius: 3px;
3339 border-bottom-right-radius: 3px;
3341 .pagination .pager_next a {
3344 border-top-left-radius: 3px;
3345 border-bottom-left-radius: 3px;
3348 .pager .previous > a {
3352 .pagination .disabled > a,
3353 .pager .disabled > a {
3359 background-color: rgba(255, 255, 255, $contentbg_transp);
3363 * some temporary workarounds until this will solved
3364 * elsewhere (e.g. new templates)
3366 section .profile-match-wrapper {
3373 #login-submit-wrapper {
3376 #lost-password-link {
3379 #login-lost-password-link {
3380 margin-bottom: 10px;
3386 #id_password_wrapper {
3387 margin-bottom: unset;
3394 background: #8ad0a1;
3401 .mod-home.is-not-singleuser,
3403 background-color: $login_bg_color;
3404 background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4)), url($login_bg_image);
3405 background-size: cover;
3406 background-attachment: fixed;
3407 background-position: center;
3410 .mod-home.is-not-singleuser nav.navbar,
3411 .mod-login nav.navbar {
3412 background-color: transparent;
3415 .mod-home.is-not-singleuser #topbar-second,
3416 .mod-login #topbar-second {
3417 background-color: transparent;
3421 .mod-home.is-not-singleuser .login-content,
3422 .mod-login .login-content {
3427 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3431 .mod-home.is-not-singleuser .login-form > #login-form label,
3432 .mod-login #content #login-form label {
3436 .mod-home.is-not-singleuser .login-panel-content,
3437 .mod-login .login-panel-content {
3438 background-color: rgba(255, 255, 255, 0.85);
3442 background: $nav_bg !important;
3443 color: $btn_primary_color !important;
3446 -webkit-box-shadow: none;
3448 -moz-box-shadow: none;
3449 background-image: none;
3457 width: 100% !important;
3460 .qq-upload-drop-area {
3461 background: white !important;
3464 -webkit-box-shadow: none;
3466 -moz-box-shadow: none;
3467 background-image: none;
3475 width: 100% !important;
3476 display: block !important;
3477 position: relative !important;
3478 border: black 1px dashed !important;
3479 margin-bottom: 5px !important;
3480 margin-top: 15px !important;
3484 * The different views of js fullcalendar
3488 margin-bottom: 10px;
3492 #event-calendar-title {
3493 display: inline-block;
3502 #fc-header-right .dropdown > button {
3505 #event-calendar-title {
3506 vertical-align: middle;
3508 #event-calendar-views {
3515 .fc .fc-month-view td.fc-widget-content,
3517 .fc .fc-list-view .fc-list-table td,
3521 .fc td.fc-widget-header,
3522 .fc th.fc-widget-header {
3527 .fc .fc-month-view td.fc-day {
3530 border-bottom: 1px solid;
3533 .fc .fc-day-grid-container .fc-row {
3534 border-bottom: 1px solid;
3537 .fc tr td.fc-today {
3540 .fc .fc-month-view .fc-content .fc-title .item-desc {
3543 .fc .fc-view-container {
3546 .fc .fc-list-view td {
3549 #events-calendar.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
3554 background-color: #e3f2fd;
3555 border: 1px solid #bbdefb;
3556 color: $font_color_darker;
3558 .fc .fc-month-view .fc-time,
3559 .fc .fc-listMonth-view .fc-list-item-time,
3560 .fc .fc-listMonth-view .fc-list-item-marker,
3561 .fc .fc-listMonth-view .fc-widget-header {
3564 .fc .fc-listMonth-view .fc-list-item:hover td {
3565 background: transparent;
3568 .fc .fc-listMonth-view .seperator {
3579 .event-card .event-label,
3580 .event-card .location-label {
3583 .popover.event-card .event-card-basic-content {
3588 .event-card .event-hover-location .location {
3593 /* Medium devices (desktops, 992px and up) */
3594 @media (min-width: 992px) {
3595 .mod-home.is-not-singleuser #content,
3596 .mod-login #content {
3597 margin-top: 100px !important;
3600 .mod-home.is-not-singleuser .login-form > #login-form,
3601 .mod-home.is-not-singleuser .login-form > #login-extra-links,
3602 .mod-login #content #login-form {
3603 background-color: #fff;
3607 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3609 background-color: white;
3612 .mod-home.is-not-singleuser .login-form > #login-form label,
3613 .mod-login #content #login-form label {
3617 .mod-home.is-not-singleuser .login-form::before,
3618 .mod-login #content #login-form::before {
3622 background-color: rgba(255, 255, 255, 0.1);
3630 .mod-home.is-not-singleuser .login-form::after,
3631 .mod-login #content #login-form::after {
3635 background-color: rgba(255, 255, 255, 0.2);
3644 /* Mobile display */
3645 @media (max-width: 600px) {
3653 #friendica-logo-mask {
3667 .panel .panel-body {
3671 .toplevel_item > .wall-item-container {
3679 .wall-item-actions {
3687 .generic-page-wrapper,
3688 .videos-content-wrapper,
3689 .suggest-content-wrapper,
3690 .help-content-wrapper,
3691 .match-content-wrapper,
3692 .dirfind-content-wrapper,
3693 .directory-content-wrapper,
3694 .delegation-content-wrapper,
3695 .notes-content-wrapper,
3696 .message-content-wrapper,
3697 .apps-content-wrapper,
3699 .delegate-content-wrapper,
3700 .uexport-content-wrapper,
3701 .dfrn_request-content-wrapper,
3702 .friendica-content-wrapper,
3703 .credits-content-wrapper,
3704 .nogroup-content-wrapper,
3705 .profperm-content-wrapper,
3706 .invite-content-wrapper,
3707 .tos-content-wrapper,
3708 .fsuggest-content-wrapper {
3768 .wwto .contact-photo {
3776 Prevent automatic zoom on input focus on iOS
3777 see https://stackoverflow.com/a/16255670
3783 .wall-item-container.thread_level_3,
3784 .wall-item-container.thread_level_4,
3785 .wall-item-container.thread_level_5,
3786 .wall-item-container.thread_level_6,
3787 .wall-item-container.thread_level_7 {