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 #dfrn-request-link-button,
1204 aside .vcard #wallmessage-link-botton {
1210 aside .vcard #dfrn-request-link,
1211 aside .vcard #wallmessage-link {
1214 /* vcard-short-info */
1216 #nav-short-info .contact-wrapper {
1219 white-space: nowrap;
1221 padding-right: 20px;
1224 #nav-short-info .contact-photo-wrapper.media-left {
1227 #vcard-short-photo-wrapper img,
1228 #nav-short-info .contact-wrapper img {
1234 #nav-short-info .contact-wrapper .media-body {
1238 text-overflow: ellipsis;
1240 #vcard-short-desc > .media-heading,
1241 #vcard-short-desc > .vcard-short-addr,
1242 #nav-short-info .contact-wrapper .media-heading,
1243 #nav-short-info .contact-wrapper #contact-entry-url-network {
1244 text-overflow: ellipsis;
1247 #vcard-short-desc > .media-heading,
1248 #nav-short-info .contact-wrapper .media-heading {
1252 #nav-short-info .contact-wrapper .media-heading a {
1253 color: $font_color_darker;
1254 font-size: 14px !important;
1256 #vcard-short-desc > .vcard-short-addr,
1257 #nav-short-info .contact-wrapper #contact-entry-url-network {
1261 .network-content-wrapper > #viewcontact_wrapper-network,
1262 #nav-short-info .contact-wrapper .contact-photo-overlay,
1263 #nav-short-info .contact-wrapper .contact-actions {
1267 aside #peoplefind-sidebar input,
1268 aside #follow-sidebar input {
1270 background-position: 10px 5px;
1272 aside #peoplefind-sidebar label,
1273 aside #follow-sidebar label {
1274 font-weight: normal;
1276 aside #peoplefind-sidebar .form-group-search .form-button-search,
1277 aside #follow-sidebar .form-group-search .form-button-search {
1281 div#sidebar-group-header h3 {
1285 div#sidebar-group-list {
1294 color: $font_color_darker;
1298 color: $font_color_darker;
1300 transition: all 0.1s ease-in-out;
1303 color: $font_color_darker;
1310 aside #group-sidebar .sidebar-group-li:hover .group-edit-tool.faded-icon,
1311 aside #saved-search-list .saved-search-li:hover .savedsearchdrop.faded-icon,
1312 aside .widget:hover .widget-action.faded-icon {
1314 transition: all 0.25s ease-in-out;
1316 aside #group-sidebar .sidebar-group-li .group-edit-tool.faded-icon:hover,
1317 aside #saved-search-list .saved-search-li .savedsearchdrop.faded-icon:hover,
1318 aside .widget .widget-action.faded-icon:hover {
1321 aside #group-sidebar li .group-checkbox {
1324 aside #group-sidebar li .group-edit-tool {
1325 padding-right: 10px;
1327 aside #group-sidebar li .group-edit-tool:first-child {
1331 /* contact block widget */
1332 .contact-block-content {
1337 .contact-block-div {
1339 margin: 0px 5px 5px 0px;
1341 .contact-block-link {
1343 .contact-block-img {
1349 /* Tag cloud widget */
1350 .tagblock.widget > .tag-cloud {
1355 display: none !important;
1369 .modal #jot-sections {
1370 max-height: calc(100vh - 22px);
1372 @media (min-width: 768px) {
1373 .modal #jot-sections {
1374 max-height: calc(100vh - 62px);
1377 #jot-modal #jot-sections,
1378 #jot-modal #jot-modal-body,
1379 #jot-modal #profile-jot-form,
1380 #jot-modal #profile-jot-wrapper,
1381 #jot-modal #jot-text-wrap,
1382 #jot-modal #jot-preview-content,
1383 #jot-modal #tread-wrapper--1,
1384 #jot-modal #item-Q0,
1385 #jot-modal #profile-jot-acl-wrapper,
1386 #jot-modal #acl-wrapper {
1390 flex-direction: column;
1392 #jot-modal .modal-header a,
1393 #jot-modal .modal-header .btn-link,
1394 #profile-jot-submit-wrapper a,
1395 #profile-jot-submit-wrapper .btn-link {
1396 color: $font_color_darker;
1398 #jot-modal .modal-header {
1399 border-bottom: none;
1401 #jot-modal .modal-header .compose-link {
1406 #jot-category-wrap {
1412 #jot-text-wrap textarea {
1414 overflow-y: auto !important;
1415 overflow-y: overlay !important;
1417 #jot-text-wrap .preview textarea {
1420 #preview_profile-jot-text,
1421 .comment-edit-form .preview {
1425 border: 2px solid #ededed;
1428 border-radius: 0 0 4px 4px;
1430 color: $font_color_darker;
1432 textarea#profile-jot-text:focus + #preview_profile-jot-text,
1433 textarea.comment-edit-text:focus + .comment-edit-form .preview {
1434 border: 2px solid #6fdbe8;
1437 .preview hr.previewseparator {
1439 border-color: #d2d2d2;
1441 #previewImgBtn_profile-jot-text,
1453 .preview button.previewActionBtn {
1459 border: 2px solid #fff;
1460 box-shadow: 0 0 3px gray;
1464 text-decoration: none;
1465 padding: 0 0 1px 1px;
1468 .preview button.previewActionBtn:hover {
1471 .preview .closePreview button.previewActionBtn {
1474 #previewInputTitle_profile-jot-text {
1477 #profile-jot-wrapper button#profile-jot-submit {
1480 #profile-jot-wrapper #character-counter {
1483 .modal .wall-item-container.preview {
1485 overflow-y: overlay;
1489 font-family: ForkAwesome;
1493 font-family: ForkAwesome;
1497 #acl-wrapper label.panel-heading {
1504 .fbrowser .breadcrumb {
1507 .fbrowser .path a:before {
1511 .fbrowser .breadcrumb > li:last-of-type a {
1513 pointer-events: none;
1516 .fbrowser .folders {
1517 box-shadow: -1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
1520 .fbrowser .folders ul {
1526 max-height: calc(100vh - 210px);
1529 @media (min-width: 768px) {
1530 .fbrowser .folders ul {
1531 max-height: calc(100vh - 255px);
1534 .fbrowser .folders li {
1536 padding-right: 10px;
1538 padding-bottom: 3px;
1540 .fbrowser .folders li:hover {
1542 color: $font_color_darker;
1543 background-color: rgba(247, 247, 247, $contentbg_transp);
1544 border-left: 3px solid $link_color;
1547 .fbrowser .folders li a,
1548 .fbrowser .folders li a:hover {
1549 color: $font_color_darker;
1552 .fbrowser .folders + .list {
1555 .fbrowser .fbrowser-content-container {
1557 max-height: calc(100vh - 175px);
1559 @media (min-width: 768px) {
1560 .fbrowser .fbrowser-content-container {
1561 max-height: calc(100vh - 220px);
1564 .fbrowser.image .photo-album-image-wrapper {
1565 box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.2);
1567 .fbrowser.image .photo-album-image-wrapper .caption {
1568 pointer-events: none;
1570 .fbrowser .profile-rotator-wrapper {
1573 .fbrowser .fa-spin {
1586 background-color: rgba(255, 255, 255, $contentbg_transp);
1587 box-shadow: 0 0 2px #dadada;
1588 -webkit-box-shadow: 0 0 2px #dadada;
1589 -moz-box-shadow: 0 0 2px #dadada;
1593 .panel.panel-inline {
1595 margin-right: -15px;
1599 .panel .panel-body {
1600 word-wrap: break-word;
1602 .tread-wrapper .media {
1604 word-wrap: break-word;
1610 /* Thread hover effects */
1611 .desktop-view .wall-item-container .wall-item-content a,
1612 .desktop-view .wall-item-name,
1613 .desktop-view .wall-item-container .fakelink,
1614 .desktop-view .toplevel_item .fakelink,
1615 .desktop-view .toplevel_item .wall-item-container .wall-item-responses a {
1617 -webkit-transition: all 0.25s ease-in-out;
1618 -moz-transition: all 0.25s ease-in-out;
1619 -o-transition: all 0.25s ease-in-out;
1620 -ms-transition: all 0.25s ease-in-out;
1621 transition: all 0.25s ease-in-out;
1624 .toplevel_item:hover .fakelink,
1625 .wall-item-container:hover .fakelink,
1626 .toplevel_item:hover .wall-item-container:hover .wall-item-responses a,
1627 .toplevel_item:hover .wall-item-content a,
1628 .toplevel_item:hover .wall-item-name,
1629 .wall-item-container:hover .wall-item-content a,
1630 .wall-item-container:hover .wall-item-name,
1631 .wall-item-container:hover .wall-item-location a {
1633 -webkit-transition: all 0.25s ease-in-out;
1634 -moz-transition: all 0.25s ease-in-out;
1635 -o-transition: all 0.25s ease-in-out;
1636 -ms-transition: all 0.25s ease-in-out;
1637 transition: all 0.25s ease-in-out;
1641 .wall-item-container {
1642 border-top: 1px solid rgba(255, 255, 255, 0.8);
1645 .wall-item-container.panel-body {
1650 .comment-edit-preview .wall-item-container.panel-body.preview {
1653 .comment-edit-preview .panel {
1657 .wall-item-container .media {
1660 background-color: rgba(0, 0, 0, 0.03);
1663 /* wall items contact photo */
1668 /*maybe some adional stuff is needed for the different screen sizes */
1670 .contact-photo-image-wrapper {
1677 .contact-photo-overlay {
1685 background: rgba(0, 0, 0, 0.5);
1688 -webkit-transition: opacity 0.25s ease;
1689 -moz-transition: opacity 0.25s ease;
1691 .contact-photo-overlay:hover {
1694 .contact-photo-overlay-content {
1696 text-shadow: 1px 1px 1px #ccc;
1697 color: rgba(255, 255, 255, 0.85);
1699 vertical-align: bottom;
1706 .wwto .contact-photo {
1714 display: inline-block;
1717 /* wall items action dropdown menu */
1718 .media [role="heading"] {
1722 /* Workaround for Firefox where the post heading covers the avatar, preventing hovercard interaction,
1723 48px is the width of the avatar image and should be adjusted accordingly if it ever changes. */
1724 .media .dropdown.pull-left + [role="heading"] {
1737 margin-bottom: 10px;
1741 blockquote.shared_content {
1743 margin-inline-start: 0px;
1747 .wall-item-network {
1751 /* wall items contact info */
1752 .media .media-body {
1755 .media .media-body h4.media-heading {
1758 color: $font_color_darker;
1760 .media .media-body .addional-info a,
1761 .media .media-body h5.media-heading > a {
1764 .media .contact-info-comment {
1765 display: table-cell;
1767 .media .contact-info-xs h5,
1768 .media .contact-info-comment {
1779 .wall-item-name.xs {
1784 /* Contact avatar click card */
1785 .userinfo.click-card {
1789 .userinfo.click-card > *:hover:after {
1794 background-color: #ffffff;
1803 border-radius: 0 0 40% 0;
1806 /* The lock symbol popup */
1810 background-color: $nav_bg;
1820 color: $nav_icon_color;
1824 /* Space between content and head */
1829 /* wall items content */
1830 .wall-item-content {
1831 word-break: break-word;
1833 .wall-item-content img {
1834 object-fit: contain;
1836 .wall-item-body > img,
1837 .wall-item-body > a > img {
1840 .wall-item-body .body-attach > a {
1841 color: $font_color_darker;
1842 display: inline-block;
1844 .wall-item-body .body-attach > a div {
1845 color: $font_color_darker;
1849 /* wall-item content elements */
1857 box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.1) inset, 0 1px 1px rgba(0, 0, 0, 0.05);
1859 @media screen and (max-width: 767px) {
1865 margin: 5px -10px 0;
1869 box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.05);
1872 padding: 10px 10px 1px 0;
1877 .type-link img.attachment-image {
1880 .type-link blockquote,
1881 .type-video blockquote {
1885 .oembed.video .embed_video > div::before {
1886 font-family: ForkAwesome;
1887 font-weight: normal;
1889 display: inline-block;
1890 text-decoration: inherit;
1891 vertical-align: top;
1899 .oembed.video .embed_video > div {
1900 background-color: rgba(0, 0, 0, 0.2);
1901 -webkit-transition: all 0.25s ease-in-out;
1902 -moz-transition: all 0.25s ease-in-out;
1903 -o-transition: all 0.25s ease-in-out;
1904 -ms-transition: all 0.25s ease-in-out;
1905 transition: all 0.25s ease-in-out;
1907 .oembed.video .embed_video > div:hover {
1908 background-color: rgba(0, 0, 0, 0);
1910 .oembed.video .embed_video.active {
1913 .oembed.video .embed_video.active iframe {
1914 width: 100% !important;
1923 color: $font_color_darker;
1926 .wall-item-tags a:hover {
1927 text-decoration: none;
1929 .wall-item-bottom .label,
1930 .wall-item-bottom .label a {
1933 .wall-item-tags .category,
1934 .wall-item-tags .folder {
1938 /* item social action buttons */
1939 .wall-item-actions {
1942 justify-content: space-between;
1944 .wall-item-actions a,
1945 .wall-item-actions button {
1947 color: $font_color_darker;
1949 .wall-item-actions .active {
1953 .wall-item-actions-left {
1954 display: table-cell;
1955 vertical-align: middle;
1957 .wall-item-actions-right {
1960 .wall-item-actions .checkbox {
1964 .wall-item-actions button:hover {
1965 color: $font_color_darker;
1966 text-decoration: underline;
1968 .wall-item-actions .separator {
1972 .wall-item-responses > div > p {
1976 /* wall item hover effects */
1978 @media (min-width: 768px) {
1979 /* Tags and mentions */
1980 .wall-item-container .wall-item-bottom .wall-item-tags span.label {
1981 filter: grayscale(0.5);
1984 -webkit-transition: all 0.25s ease-in-out;
1985 -moz-transition: all 0.25s ease-in-out;
1986 -o-transition: all 0.25s ease-in-out;
1987 -ms-transition: all 0.25s ease-in-out;
1988 transition: all 0.25s ease-in-out;
1991 .wall-item-container:hover .wall-item-bottom .wall-item-tags span.label {
1992 filter: grayscale(0);
1995 -webkit-transition: all 0.25s ease-in-out;
1996 -moz-transition: all 0.25s ease-in-out;
1997 -o-transition: all 0.25s ease-in-out;
1998 -ms-transition: all 0.25s ease-in-out;
1999 transition: all 0.25s ease-in-out;
2001 /* Like/Comment/etc buttons */
2002 .wall-item-container .wall-item-links,
2003 .wall-item-container .wall-item-actions button > a {
2006 -webkit-transition: all 0.25s ease-in-out;
2007 -moz-transition: all 0.25s ease-in-out;
2008 -o-transition: all 0.25s ease-in-out;
2009 -ms-transition: all 0.25s ease-in-out;
2010 transition: all 0.25s ease-in-out;
2012 .wall-item-container:hover .wall-item-links,
2013 .wall-item-container:hover .wall-item-actions button > a {
2016 -webkit-transition: all 0.25s ease-in-out;
2017 -moz-transition: all 0.25s ease-in-out;
2018 -o-transition: all 0.25s ease-in-out;
2019 -ms-transition: all 0.25s ease-in-out;
2020 transition: all 0.25s ease-in-out;
2022 .wall-item-container .wall-item-body .body-attach > a:hover {
2030 wall-item-comment-wrapper.well {
2033 background-color: rgba(237, 237, 237, $contentbg_transp);
2034 background-image: none;
2036 background-color: red;
2038 wall-item-comment-wrapper.well-small {
2042 wall-item-comment-wrapper.well hr {
2043 border-top: 1px solid #d9d9d9;
2045 .wall-entry wall-item-comment-wrapper.well {
2048 .comment-container {
2050 border-top-left-radius: 3px;
2051 border-top-right-radius: 3px;
2052 border-bottom-right-radius: 0px;
2053 border-bottom-left-radius: 0px;
2056 position: relative !important;
2059 .hide-comments-outer {
2060 background-color: rgba(0, 0, 0, 0.03);
2062 border-radius: 0.5em 0.5em 0 0;
2064 .hide-comments-total {
2073 .wall-item-comment-wrapper {
2075 border-top: 1px solid rgba(255, 255, 255, 0.8);
2076 background-color: rgba(0, 0, 0, 0.03);
2077 border-radius: 0 0 4px 4px;
2081 .comment-fake-form {
2082 border-color: #d9d9d9;
2084 .comment-fake-form textarea {
2088 .comment-container .wall-item-comment-wrapper {
2092 .comment-edit-form textarea {
2096 .comment-edit-submit-wrapper {
2101 .comment-icon-list {
2103 justify-content: space-between;
2106 /* acpopup + textcompletion*/
2108 background-color: #ffffff;
2112 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
2117 /** @todo: we schould consider the possebility to overwrite bootstrap dropdowns
2118 at the beginning of this file to get rid of the !important */
2119 .textcomplete-item > a {
2120 color: $font_color_darker !important;
2121 padding: 5px 20px !important;
2123 .textcomplete-item.active > a {
2124 background-color: rgb(247, 247, 247) !important;
2125 background-image: none !important;
2126 border-left: 3px solid $link_color;
2127 padding-left: 17px !important;
2129 .textcomplete-item a .forum {
2136 /* The wall-item thread levels */
2137 .wall-item-container.thread_level_3,
2138 .wall-item-container.thread_level_4,
2139 .wall-item-container.thread_level_5,
2140 .wall-item-container.thread_level_6,
2141 .wall-item-container.thread_level_7 {
2151 background-color: rgba(247, 247, 247, $contentbg_transp);
2152 box-shadow: 0 0 3px #dadada;
2153 -webkit-box-shadow: 0 0 3px #dadada;
2154 -moz-box-shadow: 0 0 3px #dadada;
2159 section > .tabbar-wrapper {
2160 /* The tabbar shouldn't' be visibile inside
2161 the section element. Only after we have
2162 moved it to the nav through js */
2163 display: none !important;
2172 #tabmenu .search-heading {
2174 text-overflow: ellipsis;
2175 white-space: nowrap;
2188 border-bottom: 0 solid $link_color;
2191 transition: all 0.15s ease;
2199 border-bottom-width: 4px;
2201 .tabbar.visible-xs .tabs-extended {
2204 #dropdownMenuTools-xs {
2207 ul.tabbar ul.tabs-extended:hover li.dropdown {
2211 ul.tabbar ul.tabs-extended li.active {
2213 border-bottom-width: 2px;
2215 ul.tabbar ul.tabs-extended li.active a {
2218 ul.dropdown-menu li:hover {
2224 box-sizing: border-box;
2227 .dropdown-menu li a,
2228 .dropdown-menu li .btn-link {
2229 color: $font_color_darker;
2231 .dropdown-menu li > :hover,
2232 .dropdown-menu li > :visited,
2233 .dropdown-menu li > :focus {
2237 .dropdown-menu li:first-child {
2241 /* Notificaiotn badges */
2242 #mail-update-li.show {
2243 display: inline-block !important;
2247 p.wall-item-announce,
2249 .media .shared-time,
2252 .media .location a {
2254 color: $font_color_darker;
2258 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2260 border-left: 3px solid rgba(255, 255, 255, 0);
2263 .media-list > li:hover,
2264 .media-list > li.selected,
2265 .media-list > li.active {
2266 border-left: 3px solid $link_color;
2267 background-color: rgba(247, 247, 247, $contentbg_transp);
2274 .form-control:focus {
2275 border: 2px solid $link_color;
2279 .radio label::before,
2280 .checkbox label::before {
2281 background-color: rgba(255, 255, 255, $contentbg_transp);
2283 .radio label::after {
2284 background-color: $link_color;
2286 .checkbox label::after {
2290 .checkbox input[type="checkbox"]:focus + label::before,
2291 .radio input[type="radio"]:focus + label::before {
2292 outline-color: $link_hover_color;
2296 color: $font_color_darker;
2299 input[type="range"].form-control {
2305 .form-control.form-search {
2306 border-radius: 30px;
2307 background-image: url(img/icon_search16x16.png);
2308 background-repeat: no-repeat;
2309 background-position: 10px 8px;
2312 .form-group-search {
2317 .form-group-search .form-button-search {
2321 border-radius: 30px;
2323 .search-input.form-control.form-search {
2331 .search-content-wrapper > #search-header-wrapper {
2334 .search-content-wrapper > .section-title-wrapper {
2337 #navbar-button > #search-save {
2340 /* Section-Content-Wrapper */
2341 #search-header-wrapper {
2343 padding-bottom: 20px;
2344 margin-bottom: 20px;
2346 background-color: rgba(255, 255, 255, $contentbg_transp);
2349 color: $font_color_darker;
2350 box-shadow: 0 0 3px #dadada;
2351 -webkit-box-shadow: 0 0 3px #dadada;
2352 -moz-box-shadow: 0 0 3px #dadada;
2359 section > .generic-page-wrapper,
2360 .videos-content-wrapper,
2361 .suggest-content-wrapper,
2362 .help-content-wrapper,
2363 .match-content-wrapper,
2364 .dirfind-content-wrapper,
2365 .delegation-content-wrapper,
2366 .notes-content-wrapper,
2367 .message-content-wrapper,
2368 .apps-content-wrapper,
2370 .delegate-content-wrapper,
2371 .uexport-content-wrapper,
2372 .dfrn_request-content-wrapper,
2373 .friendica-content-wrapper,
2374 .credits-content-wrapper,
2375 .nogroup-content-wrapper,
2376 .profperm-content-wrapper,
2377 .invite-content-wrapper,
2378 .tos-content-wrapper,
2379 .fsuggest-content-wrapper {
2380 min-height: calc(100vh - 150px);
2382 padding-bottom: 20px;
2383 margin-bottom: 20px;
2385 background-color: rgba(255, 255, 255, $contentbg_transp);
2388 color: $font_color_darker;
2389 box-shadow: 0 0 3px #dadada;
2390 -webkit-box-shadow: 0 0 3px #dadada;
2391 -moz-box-shadow: 0 0 3px #dadada;
2393 #content:hover .page-action.faded-icon {
2395 transition: all 0.25s ease-in-out;
2397 #content .page-action.faded-icon:hover {
2401 .section-title-wrapper {
2404 /* Home and Login Page */
2405 body.mod-home nav.navbar .nav > li > a:hover {
2406 background-color: rgba(255, 255, 255, 0.2);
2408 body.mod-home .navbar #nav-login,
2409 body.mod-login .navbar #nav-login {
2413 #profile-content-standard,
2414 #profile-content-advanced {
2419 margin-bottom: 20px;
2421 .contact-block-div.forumlist-profile-advanced {
2426 ul.viewcontact_wrapper {
2428 margin-right: -15px;
2430 ul.viewcontact_wrapper > li {
2433 .contact-wrapper .contact-photo-wrapper button {
2436 .contact-wrapper.media {
2438 word-wrap: break-word;
2441 /* bootstrap hack for .media */
2442 .contact-wrapper.media .media-body {
2443 display: table-cell;
2448 .contact-wrapper.media:before,
2453 .contact-wrapper.media:after {
2456 .contact-wrapper .contact-photo-image-wrapper img.contact-photo.xl {
2460 .contact-wrapper .contact-photo-image-wrapper img.contact-photo-xs {
2464 .contact-wrapper .contact-photo-overlay-content.xl {
2467 .contact-wrapper .contact-photo-menu {
2471 .contact-entry-desc {
2472 color: $font_color_darker;
2474 .contact-entry-checkbox {
2477 .contact-wrapper .media-body .contact-entry-name h4.media-heading a {
2478 font-weight: bold !important;
2480 font-size: 15px !important;
2482 .contact-wrapper .contact-actions {
2485 .contact-wrapper .contact-action-link,
2486 .contact-wrapper .contact-action-link:hover,
2487 .textcomplete-item .contact-wrapper .contact-action-link {
2489 color: $font_color_darker;
2492 .contact-wrapper .contact-action-link {
2494 transition: all 0.25s ease-in-out;
2496 ul li:hover .contact-wrapper .contact-action-link {
2498 transition: all 0.25s ease-in-out;
2500 ul li:hover .contact-wrapper .contact-action-link:hover {
2503 #contacts-search-wrapper,
2504 #directory-search-wrapper {
2509 #contact-edit-actions {
2512 #contact-edit-status-wrapper {
2514 background-color: rgba(225, 245, 254, $contentbg_transp);
2517 #contact-edit-settings {
2521 /* directory page */
2522 #directory-search-heading {
2526 /* group edit page */
2529 margin-bottom: 10px;
2532 .group-actions button,
2537 .contact-group-actions .fa-times-circle {
2540 .contact-group-actions .fa-plus-circle {
2544 #group-edit-wrapper {
2548 #group-edit-header {
2551 #group-update-wrapper .contact-photo-overlay {
2554 #group-update-wrapper .viewcontact_wrapper .contact-group-actions {
2559 #group-update-wrapper .viewcontact_wrapper .contact-group-link {
2564 #group-update-wrapper .viewcontact_wrapper .contact-action-link:hover {
2567 #group-update-wrapper .shortmode {
2571 #group-update-wrapper .shortmode .contact-photo {
2575 #group-update-wrapper .shortmode .media {
2578 #group-update-wrapper .shortmode .contact-entry-desc {
2579 font-size: 12px !important;
2581 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading {
2584 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading a {
2585 font-size: 13px !important;
2586 white-space: nowrap;
2588 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-rel,
2589 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-network {
2594 .message-content-wrapper > li {
2595 /* we need this overwriting because we have no template file
2596 for the general mail page /message
2598 list-style-type: none;
2601 max-height: calc(100vh - 200px);
2603 #mail-conversation {
2605 max-height: calc(100vh - 400px);
2610 .mail-conv-wrapper .media .contact-photo-wrapper img {
2614 .mail-thread #prvmail-to-label,
2615 .mail-thread #prvmail-subject-label {
2618 .mail-thread #prvmail-message-label > label {
2621 .mail-thread #prvmail-message-label textarea {
2624 .mail-conv-wrapper {
2626 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2629 height: calc(100vh - 150px);
2632 height: calc(100% - 20px);
2634 #message-preview ul {
2637 #message-preview .media-list li {
2641 #message-preview .media-list li:hover {
2642 border-left: none !important;
2644 #message-preview .media-list li a {
2647 .mail-list-outside-wrapper {
2649 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2651 .mail-list-outside-wrapper .contact-photo-wrapper img {
2658 #modal #prvmail-text-edit-bb .bb-img {
2663 #photo-album-edit-name-label {
2666 .photo-album-edit-name {
2670 .photo-album-actions {
2671 margin-bottom: 10px;
2673 .photo-album-actions .photos-order-link {
2678 .fc .fc-month-view .fc-content .fc-title .item-desc:hover {
2679 color: $link_hover_color;
2681 .fc .fc-list-item-title a {
2684 .fc .fc-list-item-title a[href]:hover {
2685 color: $link_hover_color;
2686 text-decoration: none;
2688 .event-wrapper .event-owner {
2689 margin-bottom: 15px;
2691 .event-wrapper .event-owner img {
2700 .event-wrapper .vevent {
2703 box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
2705 .event-wrapper .event-buttons {
2708 #event-form-wrapper {
2711 #event-edit-form-wrapper {
2715 color: $font_color_darker;
2717 #event-edit-form-wrapper #event-edit-time {
2720 .event-buttons .plink-event-link {
2723 .vevent .event-summary {
2726 .vevent .event-description {
2729 .vevent .event-location .location {
2733 .modal-body .vevent .event-summary {
2736 #event-preview .vevent .event-summary {
2741 .event-card-details,
2742 .event-card-header {
2746 .event-card-left-date {
2749 .vevent .event-card-header {
2752 .event-card-left-date {
2753 width: 60px; /* Das muss wahrscheinlich unterschiedlich sein zwischen calendar und stream */
2755 .event-card .event-date-wrapper > span {
2759 white-space: nowrap;
2761 .event-card .event-date-wrapper .event-card-short-month {
2763 text-transform: uppercase;
2765 .event-card .event-date-wrapper.medium .event-card-short-date {
2770 .event-card .event-card-content {
2772 padding: 0 5px 0 15px;
2773 box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
2777 .event-card .event-card-content .event-map-btn {
2783 .event-card .event-card-title {
2785 color: $font_color_darker;
2790 .event-card .event-card-location {
2794 .event-card .event-card-location br {
2797 .event-card .event-card-location br::after {
2800 .event-card-profile-name a {
2803 .event-card-profile-name a:hover {
2804 color: $link_hover_color;
2806 .event-card .event-card-content .event-location-map {
2811 .event-card .event-card-content .event-location-map .map {
2814 .event-card .description {
2816 box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, 0.1) inset;
2829 transform: translateZ(0);
2830 transition: opacity 0.2s;
2835 text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
2837 .photo-next-link > i,
2838 .photo-prev-link > i {
2839 vertical-align: super;
2841 .photo-next-link > i {
2850 #photo-photo:hover .photo-next-link,
2851 #photo-photo:hover .photo-prev-link {
2854 #photo-photo .photo-next-link:hover,
2855 #photo-photo .photo-prev-link:hover {
2859 .photo-comment-wrapper .comment {
2862 .photo-comment-wrapper .wall-item-content {
2863 color: $font_color_darker;
2866 .photo-comment-wrapper .comment-wwedit-wrapper,
2867 .photo-comment-wrapper .wall-item-outside-wrapper.media:first-child {
2872 .profile-listing-table {
2876 .profile-listing-row {
2879 .profile-listing-cell {
2880 display: table-cell;
2882 .profile-listing-photo {
2887 #profile-listing-new-link-wrapper {
2888 margin-bottom: 20px;
2891 #profile-photo-upload-section {
2895 #profile-photo-upload-close {
2900 .section-subtitle-wrapper {
2903 details.profile-jot-net[open] summary:before,
2904 .panel .section-subtitle-wrapper a.accordion-toggle:before {
2905 font-family: ForkAwesome;
2909 details.profile-jot-net summary:before,
2910 .panel .section-subtitle-wrapper a.accordion-toggle.collapsed:before {
2911 font-family: ForkAwesome;
2914 details.profile-jot-net summary:before {
2918 details.profile-jot-net[open] summary:before {
2922 #settings-nick-wrapper {
2923 margin-bottom: 20px;
2929 /* Emulates Bootstrap display */
2932 background-color: rgba(255, 255, 255, $contentbg_transp);
2935 box-shadow: 0 0 3px #dadada;
2936 -webkit-box-shadow: 0 0 3px #dadada;
2937 -moz-box-shadow: 0 0 3px #dadada;
2940 .settings-block.fakelink,
2941 .settings-block > .fakelink {
2945 .settings-block > .fakelink {
2946 margin: -10px -15px 10px -15px;
2947 border-radius: 4px 4px 0 0;
2950 .settings-block.fakelink:hover,
2951 .settings-block > .fakelink:hover {
2952 color: $link_hover_color;
2954 .settings-block.fakelink > h3,
2955 .settings-block > .fakelink > h3 {
2962 .section-subtitle-wrapper > h2 {
2965 margin-bottom: 10px;
2968 .fakelink > h3:before {
2969 padding-right: 10px;
2971 .widget.fakelink > h3:before,
2972 .settings-block.fakelink > h3:before {
2973 font-family: ForkAwesome;
2974 content: "\f0da"; /* Right Plain Pointer */
2976 .widget > .fakelink > h3:before,
2977 #sidebar-group-header > .fakelink > h3:before,
2978 .settings-block > .fakelink > h3:before {
2979 font-family: ForkAwesome;
2980 content: "\f0d7"; /* Bottom Plain Pointer */
2987 /* Intro Notifications */
2988 ul.notif-network-list {
2990 margin-right: -15px;
2992 ul.notif-network-list > li {
2994 padding-right: 15px;
2996 .intro-wrapper.media {
2998 word-wrap: break-word;
3001 .intro-photo-wrapper img.intro-photo {
3009 .intro-enty-name h4 {
3010 font-size: 15px !important;
3012 .intro-wrapper button.intro-action-link {
3014 transition: all 0.25s ease-in-out;
3016 .intro-wrapper button.intro-action-link,
3017 .intro-wrapper button.intro-action-link:hover {
3020 color: $font_color_darker;
3022 ul li:hover .intro-wrapper button.intro-action-link {
3024 transition: all 0.25s ease-in-out;
3026 ul li:hover .intro-wrapper button.intro-action-link:hover {
3029 .intro-action-buttons {
3033 transition: max-height 0.1s ease-out;
3035 ul.notif-network-list > li:hover .intro-action-buttons {
3037 transition: max-height 0.1s ease-in;
3041 .intro-network-label,
3042 .intro-location-label,
3043 .intro-keywords-label,
3045 .intro-knowyou-label,
3046 .intro-madeby-label {
3049 .intro-contact-info.xs .intro-url-label,
3050 .intro-contact-info.xs .intro-network-label,
3051 .intro-contact-info.xs .intro-location-label,
3052 .intro-contact-info.xs .intro-keywords-label,
3053 .intro-contact-info.xs .intro-about-label,
3054 .intro-contact-info.xs .intro-knowyou-label {
3059 /* Notifications Page */
3060 ul.notif-network-list li.unseen {
3061 background-color: #e3eff3;
3063 .notif-item img.notif-image {
3068 .notif-item .notif-desc-wrapper {
3071 .notif-item .notif-desc-wrapper a {
3074 color: $font_color_darker;
3081 /* This is a little bit hacky. Since the search page is used for diferent
3082 content types we can't apply the generic-page-wrapper class.
3083 So we apply the css of the generic-page-wrapper class to the ul element with some
3084 little modifications to emulate a standard page template */
3085 .search-content-wrapper > ul.viewcontact_wrapper {
3086 min-height: calc(100vh - 150px);
3088 padding-bottom: 20px;
3090 margin-bottom: 20px;
3092 background-color: rgba(255, 255, 255, $contentbg_transp);
3095 color: $font_color_darker;
3096 box-shadow: 0 0 3px #dadada;
3097 -webkit-box-shadow: 0 0 3px #dadada;
3098 -moz-box-shadow: 0 0 3px #dadada;
3102 section.help-content-wrapper h1 {
3103 padding-bottom: 0.3em;
3105 border-bottom: 1px solid #ddd;
3107 section.help-content-wrapper h2 {
3108 padding-bottom: 0.3em;
3110 border-bottom: 1px solid #ddd;
3112 section.help-content-wrapper h3 {
3115 section.help-content-wrapper h4 {
3118 section.help-content-wrapper h1,
3119 section.help-content-wrapper h2,
3120 section.help-content-wrapper h3,
3121 section.help-content-wrapper h4,
3122 section.help-content-wrapper h5,
3123 section.help-content-wrapper h6 {
3125 margin-bottom: 16px;
3129 section.help-content-wrapper p {
3132 section.help-content-wrapper p,
3133 section.help-content-wrapper a,
3134 section.help-content-wrapper li {
3140 #adminpage #frio_background_image .image-select {
3143 #adminpage #frio_background_image.input-group {
3146 #admin-summary-wrapper {
3149 #adminpage ul#addonslist,
3153 #adminpage li .icon {
3154 display: inline-block;
3155 vertical-align: text-top;
3159 #adminpage li .icon:before {
3161 display: inline-block;
3168 border: 1px solid #cccccc;
3170 background-color: $background_color;
3171 -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3172 -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3173 transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3175 #adminpage li .icon.on:after {
3176 font-family: "ForkAwesome";
3178 display: inline-block;
3191 #adminpage .addon .desc {
3194 #admin-users #users tr.blocked {
3195 background-color: #f8efc0;
3197 .adminpage .table-hover > tbody > tr:hover + tr.details {
3198 background-color: #f5f5f5;
3200 .offset-anchor::before {
3206 pointer-events: none;
3214 #identity-selector-wrapper {
3219 #identity-selector-wrapper .identity-match-photo {
3223 #identity-selector-wrapper .identity-match-photo button {
3226 #identity-selector-wrapper .identity-match-photo .badge {
3231 #identity-selector-wrapper .identity-match-name {
3234 #identity-selector-wrapper .identity-match-details {
3240 #register-openid-wrapper,
3241 #register-name-wrapper,
3242 #register-invite-wrapper,
3243 #profile-publish-wrapper {
3246 #register-openid-end,
3247 #register-nickname-end {
3252 * Overwriting for transparency and other colors
3254 main .nav-tabs > li.active > a,
3255 main .nav-tabs > li.active > a:focus,
3256 main .nav-tabs > li.active > a:hover {
3257 background-color: rgba(255, 255, 255, $contentbg_transp);
3267 @media (min-width: 768px) {
3274 * Framework overwrite
3277 /* textcomplete for contact filtering*/
3278 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list {
3279 position: relative !important;
3280 top: inherit !important;
3281 bottom: inherit !important;
3282 left: inherit !important;
3285 margin-right: -15px;
3286 background-color: transparent;
3290 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li {
3292 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
3294 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li:first-child {
3297 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list .textcomplete-item > a {
3298 padding: 0 !important;
3300 background-color: transparent !important;
3302 /* this is a little hack for texcomplete contact filter
3303 There are for some reasons empty <a> tags. I don't know why */
3304 .textcomplete-item .contact-wrapper a {
3309 body .tread-wrapper .hovercard a,
3310 body .tread-wrapper .hovercard a:hover {
3313 body .tread-wrapper .hovercard:hover .hover-card-content a {
3314 color: $link_color !important;
3317 /* Pagination improvements */
3322 .pagination > li > a,
3323 .pagination > li > span {
3327 .pagination > li > a:hover,
3328 .pagination > li > span:hover {
3329 color: $link_hover_color;
3331 .pagination > .active > a,
3332 .pagination > .active > a:focus,
3333 .pagination > .active > a:hover,
3334 .pagination > .active > span,
3335 .pagination > .active > span:focus,
3336 .pagination > .active > span:hover {
3337 background-color: $link_color;
3338 border-color: $link_color;
3341 .pagination li.pager_n a {
3345 .pagination .pager_prev a {
3348 border-top-right-radius: 3px;
3349 border-bottom-right-radius: 3px;
3351 .pagination .pager_next a {
3354 border-top-left-radius: 3px;
3355 border-bottom-left-radius: 3px;
3358 .pager .previous > a {
3362 .pagination .disabled > a,
3363 .pager .disabled > a {
3369 background-color: rgba(255, 255, 255, $contentbg_transp);
3373 * some temporary workarounds until this will solved
3374 * elsewhere (e.g. new templates)
3376 section .profile-match-wrapper {
3383 #login-submit-wrapper {
3386 #lost-password-link {
3389 #login-lost-password-link {
3390 margin-bottom: 10px;
3396 #id_password_wrapper {
3397 margin-bottom: unset;
3404 background: #8ad0a1;
3411 .mod-home.is-not-singleuser,
3413 background-color: $login_bg_color;
3414 background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4)), url($login_bg_image);
3415 background-size: cover;
3416 background-attachment: fixed;
3417 background-position: center;
3420 .mod-home.is-not-singleuser nav.navbar,
3421 .mod-login nav.navbar {
3422 background-color: transparent;
3425 .mod-home.is-not-singleuser #topbar-second,
3426 .mod-login #topbar-second {
3427 background-color: transparent;
3431 .mod-home.is-not-singleuser .login-content,
3432 .mod-login .login-content {
3437 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3441 .mod-home.is-not-singleuser .login-form > #login-form label,
3442 .mod-login #content #login-form label {
3446 .mod-home.is-not-singleuser .login-panel-content,
3447 .mod-login .login-panel-content {
3448 background-color: rgba(255, 255, 255, 0.85);
3452 background: $nav_bg !important;
3453 color: $btn_primary_color !important;
3456 -webkit-box-shadow: none;
3458 -moz-box-shadow: none;
3459 background-image: none;
3467 width: 100% !important;
3470 .qq-upload-drop-area {
3471 background: white !important;
3474 -webkit-box-shadow: none;
3476 -moz-box-shadow: none;
3477 background-image: none;
3485 width: 100% !important;
3486 display: block !important;
3487 position: relative !important;
3488 border: black 1px dashed !important;
3489 margin-bottom: 5px !important;
3490 margin-top: 15px !important;
3494 * The different views of js fullcalendar
3498 margin-bottom: 10px;
3502 #event-calendar-title {
3503 display: inline-block;
3512 #fc-header-right .dropdown > button {
3515 #event-calendar-title {
3516 vertical-align: middle;
3518 #event-calendar-views {
3525 .fc .fc-month-view td.fc-widget-content,
3527 .fc .fc-list-view .fc-list-table td,
3531 .fc td.fc-widget-header,
3532 .fc th.fc-widget-header {
3537 .fc .fc-month-view td.fc-day {
3540 border-bottom: 1px solid;
3543 .fc .fc-day-grid-container .fc-row {
3544 border-bottom: 1px solid;
3547 .fc tr td.fc-today {
3550 .fc .fc-month-view .fc-content .fc-title .item-desc {
3553 .fc .fc-view-container {
3556 .fc .fc-list-view td {
3559 #events-calendar.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
3564 background-color: #e3f2fd;
3565 border: 1px solid #bbdefb;
3566 color: $font_color_darker;
3568 .fc .fc-month-view .fc-time,
3569 .fc .fc-listMonth-view .fc-list-item-time,
3570 .fc .fc-listMonth-view .fc-list-item-marker,
3571 .fc .fc-listMonth-view .fc-widget-header {
3574 .fc .fc-listMonth-view .fc-list-item:hover td {
3575 background: transparent;
3578 .fc .fc-listMonth-view .seperator {
3589 .event-card .event-label,
3590 .event-card .location-label {
3593 .popover.event-card .event-card-basic-content {
3598 .event-card .event-hover-location .location {
3603 /* Medium devices (desktops, 992px and up) */
3604 @media (min-width: 992px) {
3605 .mod-home.is-not-singleuser #content,
3606 .mod-login #content {
3607 margin-top: 100px !important;
3610 .mod-home.is-not-singleuser .login-form > #login-form,
3611 .mod-home.is-not-singleuser .login-form > #login-extra-links,
3612 .mod-login #content #login-form {
3613 background-color: #fff;
3617 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3619 background-color: white;
3622 .mod-home.is-not-singleuser .login-form > #login-form label,
3623 .mod-login #content #login-form label {
3627 .mod-home.is-not-singleuser .login-form::before,
3628 .mod-login #content #login-form::before {
3632 background-color: rgba(255, 255, 255, 0.1);
3640 .mod-home.is-not-singleuser .login-form::after,
3641 .mod-login #content #login-form::after {
3645 background-color: rgba(255, 255, 255, 0.2);
3654 /* Mobile display */
3655 @media (max-width: 600px) {
3663 #friendica-logo-mask {
3677 .panel .panel-body {
3681 .toplevel_item > .wall-item-container {
3689 .wall-item-actions {
3697 .generic-page-wrapper,
3698 .videos-content-wrapper,
3699 .suggest-content-wrapper,
3700 .help-content-wrapper,
3701 .match-content-wrapper,
3702 .dirfind-content-wrapper,
3703 .directory-content-wrapper,
3704 .delegation-content-wrapper,
3705 .notes-content-wrapper,
3706 .message-content-wrapper,
3707 .apps-content-wrapper,
3709 .delegate-content-wrapper,
3710 .uexport-content-wrapper,
3711 .dfrn_request-content-wrapper,
3712 .friendica-content-wrapper,
3713 .credits-content-wrapper,
3714 .nogroup-content-wrapper,
3715 .profperm-content-wrapper,
3716 .invite-content-wrapper,
3717 .tos-content-wrapper,
3718 .fsuggest-content-wrapper {
3778 .wwto .contact-photo {
3786 Prevent automatic zoom on input focus on iOS
3787 see https://stackoverflow.com/a/16255670
3793 .wall-item-container.thread_level_3,
3794 .wall-item-container.thread_level_4,
3795 .wall-item-container.thread_level_5,
3796 .wall-item-container.thread_level_6,
3797 .wall-item-container.thread_level_7 {