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 {
1763 .media .contact-info-comment {
1764 display: table-cell;
1766 .media .contact-info-xs h5,
1767 .media .contact-info-comment {
1778 .wall-item-name.xs {
1783 /* Contact avatar click card */
1784 .userinfo.click-card {
1788 .userinfo.click-card > *:hover:after {
1793 background-color: #ffffff;
1802 border-radius: 0 0 40% 0;
1805 /* The lock symbol popup */
1809 background-color: $nav_bg;
1819 color: $nav_icon_color;
1823 /* Space between content and head */
1828 /* wall items content */
1829 .wall-item-content {
1830 word-break: break-word;
1832 .wall-item-content img {
1833 object-fit: contain;
1835 .wall-item-body > img,
1836 .wall-item-body > a > img {
1839 .wall-item-body .body-attach > a {
1840 color: $font_color_darker;
1841 display: inline-block;
1843 .wall-item-body .body-attach > a div {
1844 color: $font_color_darker;
1848 /* wall-item content elements */
1856 box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.1) inset, 0 1px 1px rgba(0, 0, 0, 0.05);
1858 @media screen and (max-width: 767px) {
1864 margin: 5px -10px 0;
1868 box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.05);
1871 padding: 10px 10px 1px 0;
1876 .type-link img.attachment-image {
1879 .type-link blockquote,
1880 .type-video blockquote {
1884 .oembed.video .embed_video > div::before {
1885 font-family: ForkAwesome;
1886 font-weight: normal;
1888 display: inline-block;
1889 text-decoration: inherit;
1890 vertical-align: top;
1898 .oembed.video .embed_video > div {
1899 background-color: rgba(0, 0, 0, 0.2);
1900 -webkit-transition: all 0.25s ease-in-out;
1901 -moz-transition: all 0.25s ease-in-out;
1902 -o-transition: all 0.25s ease-in-out;
1903 -ms-transition: all 0.25s ease-in-out;
1904 transition: all 0.25s ease-in-out;
1906 .oembed.video .embed_video > div:hover {
1907 background-color: rgba(0, 0, 0, 0);
1909 .oembed.video .embed_video.active {
1912 .oembed.video .embed_video.active iframe {
1913 width: 100% !important;
1922 color: $font_color_darker;
1925 .wall-item-tags a:hover {
1926 text-decoration: none;
1928 .wall-item-bottom .label,
1929 .wall-item-bottom .label a {
1932 .wall-item-tags .category,
1933 .wall-item-tags .folder {
1937 /* item social action buttons */
1938 .wall-item-actions {
1941 justify-content: space-between;
1943 .wall-item-actions a,
1944 .wall-item-actions button {
1946 color: $font_color_darker;
1948 .wall-item-actions .active {
1952 .wall-item-actions-left {
1953 display: table-cell;
1954 vertical-align: middle;
1956 .wall-item-actions-right {
1959 .wall-item-actions .checkbox {
1963 .wall-item-actions button:hover {
1964 color: $font_color_darker;
1965 text-decoration: underline;
1967 .wall-item-actions .separator {
1971 .wall-item-responses > div > p {
1975 /* wall item hover effects */
1977 @media (min-width: 768px) {
1978 /* Tags and mentions */
1979 .wall-item-container .wall-item-bottom .wall-item-tags span.label {
1980 filter: grayscale(0.5);
1983 -webkit-transition: all 0.25s ease-in-out;
1984 -moz-transition: all 0.25s ease-in-out;
1985 -o-transition: all 0.25s ease-in-out;
1986 -ms-transition: all 0.25s ease-in-out;
1987 transition: all 0.25s ease-in-out;
1990 .wall-item-container:hover .wall-item-bottom .wall-item-tags span.label {
1991 filter: grayscale(0);
1994 -webkit-transition: all 0.25s ease-in-out;
1995 -moz-transition: all 0.25s ease-in-out;
1996 -o-transition: all 0.25s ease-in-out;
1997 -ms-transition: all 0.25s ease-in-out;
1998 transition: all 0.25s ease-in-out;
2000 /* Like/Comment/etc buttons */
2001 .wall-item-container .wall-item-links,
2002 .wall-item-container .wall-item-actions button > a {
2005 -webkit-transition: all 0.25s ease-in-out;
2006 -moz-transition: all 0.25s ease-in-out;
2007 -o-transition: all 0.25s ease-in-out;
2008 -ms-transition: all 0.25s ease-in-out;
2009 transition: all 0.25s ease-in-out;
2011 .wall-item-container:hover .wall-item-links,
2012 .wall-item-container:hover .wall-item-actions button > a {
2015 -webkit-transition: all 0.25s ease-in-out;
2016 -moz-transition: all 0.25s ease-in-out;
2017 -o-transition: all 0.25s ease-in-out;
2018 -ms-transition: all 0.25s ease-in-out;
2019 transition: all 0.25s ease-in-out;
2021 .wall-item-container .wall-item-body .body-attach > a:hover {
2029 wall-item-comment-wrapper.well {
2032 background-color: rgba(237, 237, 237, $contentbg_transp);
2033 background-image: none;
2035 background-color: red;
2037 wall-item-comment-wrapper.well-small {
2041 wall-item-comment-wrapper.well hr {
2042 border-top: 1px solid #d9d9d9;
2044 .wall-entry wall-item-comment-wrapper.well {
2047 .comment-container {
2049 border-top-left-radius: 3px;
2050 border-top-right-radius: 3px;
2051 border-bottom-right-radius: 0px;
2052 border-bottom-left-radius: 0px;
2055 position: relative !important;
2058 .hide-comments-outer {
2059 background-color: rgba(0, 0, 0, 0.03);
2061 border-radius: 0.5em 0.5em 0 0;
2063 .hide-comments-total {
2072 .wall-item-comment-wrapper {
2074 border-top: 1px solid rgba(255, 255, 255, 0.8);
2075 background-color: rgba(0, 0, 0, 0.03);
2076 border-radius: 0 0 4px 4px;
2080 .comment-fake-form {
2081 border-color: #d9d9d9;
2083 .comment-fake-form textarea {
2087 .comment-container .wall-item-comment-wrapper {
2091 .comment-edit-form textarea {
2095 .comment-edit-submit-wrapper {
2100 .comment-icon-list {
2102 justify-content: space-between;
2105 /* acpopup + textcompletion*/
2107 background-color: #ffffff;
2111 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
2116 /** @todo: we schould consider the possebility to overwrite bootstrap dropdowns
2117 at the beginning of this file to get rid of the !important */
2118 .textcomplete-item > a {
2119 color: $font_color_darker !important;
2120 padding: 5px 20px !important;
2122 .textcomplete-item.active > a {
2123 background-color: rgb(247, 247, 247) !important;
2124 background-image: none !important;
2125 border-left: 3px solid $link_color;
2126 padding-left: 17px !important;
2128 .textcomplete-item a .forum {
2135 /* The wall-item thread levels */
2136 .wall-item-container.thread_level_3,
2137 .wall-item-container.thread_level_4,
2138 .wall-item-container.thread_level_5,
2139 .wall-item-container.thread_level_6,
2140 .wall-item-container.thread_level_7 {
2150 background-color: rgba(247, 247, 247, $contentbg_transp);
2151 box-shadow: 0 0 3px #dadada;
2152 -webkit-box-shadow: 0 0 3px #dadada;
2153 -moz-box-shadow: 0 0 3px #dadada;
2158 section > .tabbar-wrapper {
2159 /* The tabbar shouldn't' be visibile inside
2160 the section element. Only after we have
2161 moved it to the nav through js */
2162 display: none !important;
2171 #tabmenu .search-heading {
2173 text-overflow: ellipsis;
2174 white-space: nowrap;
2187 border-bottom: 0 solid $link_color;
2190 transition: all 0.15s ease;
2198 border-bottom-width: 4px;
2200 .tabbar.visible-xs .tabs-extended {
2203 #dropdownMenuTools-xs {
2206 ul.tabbar ul.tabs-extended:hover li.dropdown {
2210 ul.tabbar ul.tabs-extended li.active {
2212 border-bottom-width: 2px;
2214 ul.tabbar ul.tabs-extended li.active a {
2217 ul.dropdown-menu li:hover {
2223 box-sizing: border-box;
2226 .dropdown-menu li a,
2227 .dropdown-menu li .btn-link {
2228 color: $font_color_darker;
2230 .dropdown-menu li > :hover,
2231 .dropdown-menu li > :visited,
2232 .dropdown-menu li > :focus {
2236 .dropdown-menu li:first-child {
2240 /* Notificaiotn badges */
2241 #mail-update-li.show {
2242 display: inline-block !important;
2246 p.wall-item-announce,
2248 .media .shared-time,
2251 .media .location a {
2253 color: $font_color_darker;
2257 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2259 border-left: 3px solid rgba(255, 255, 255, 0);
2262 .media-list > li:hover,
2263 .media-list > li.selected,
2264 .media-list > li.active {
2265 border-left: 3px solid $link_color;
2266 background-color: rgba(247, 247, 247, $contentbg_transp);
2273 .form-control:focus {
2274 border: 2px solid $link_color;
2278 .radio label::before,
2279 .checkbox label::before {
2280 background-color: rgba(255, 255, 255, $contentbg_transp);
2282 .radio label::after {
2283 background-color: $link_color;
2285 .checkbox label::after {
2289 .checkbox input[type="checkbox"]:focus + label::before,
2290 .radio input[type="radio"]:focus + label::before {
2291 outline-color: $link_hover_color;
2295 color: $font_color_darker;
2298 input[type="range"].form-control {
2304 .form-control.form-search {
2305 border-radius: 30px;
2306 background-image: url(img/icon_search16x16.png);
2307 background-repeat: no-repeat;
2308 background-position: 10px 8px;
2311 .form-group-search {
2316 .form-group-search .form-button-search {
2320 border-radius: 30px;
2322 .search-input.form-control.form-search {
2330 .search-content-wrapper > #search-header-wrapper {
2333 .search-content-wrapper > .section-title-wrapper {
2336 #navbar-button > #search-save {
2339 /* Section-Content-Wrapper */
2340 #search-header-wrapper {
2342 padding-bottom: 20px;
2343 margin-bottom: 20px;
2345 background-color: rgba(255, 255, 255, $contentbg_transp);
2348 color: $font_color_darker;
2349 box-shadow: 0 0 3px #dadada;
2350 -webkit-box-shadow: 0 0 3px #dadada;
2351 -moz-box-shadow: 0 0 3px #dadada;
2358 section > .generic-page-wrapper,
2359 .videos-content-wrapper,
2360 .suggest-content-wrapper,
2361 .help-content-wrapper,
2362 .match-content-wrapper,
2363 .dirfind-content-wrapper,
2364 .delegation-content-wrapper,
2365 .notes-content-wrapper,
2366 .message-content-wrapper,
2367 .apps-content-wrapper,
2369 .delegate-content-wrapper,
2370 .uexport-content-wrapper,
2371 .dfrn_request-content-wrapper,
2372 .friendica-content-wrapper,
2373 .credits-content-wrapper,
2374 .nogroup-content-wrapper,
2375 .profperm-content-wrapper,
2376 .invite-content-wrapper,
2377 .tos-content-wrapper,
2378 .fsuggest-content-wrapper {
2379 min-height: calc(100vh - 150px);
2381 padding-bottom: 20px;
2382 margin-bottom: 20px;
2384 background-color: rgba(255, 255, 255, $contentbg_transp);
2387 color: $font_color_darker;
2388 box-shadow: 0 0 3px #dadada;
2389 -webkit-box-shadow: 0 0 3px #dadada;
2390 -moz-box-shadow: 0 0 3px #dadada;
2392 #content:hover .page-action.faded-icon {
2394 transition: all 0.25s ease-in-out;
2396 #content .page-action.faded-icon:hover {
2400 .section-title-wrapper {
2403 /* Home and Login Page */
2404 body.mod-home nav.navbar .nav > li > a:hover {
2405 background-color: rgba(255, 255, 255, 0.2);
2407 body.mod-home .navbar #nav-login,
2408 body.mod-login .navbar #nav-login {
2412 #profile-content-standard,
2413 #profile-content-advanced {
2418 margin-bottom: 20px;
2420 .contact-block-div.forumlist-profile-advanced {
2425 ul.viewcontact_wrapper {
2427 margin-right: -15px;
2429 ul.viewcontact_wrapper > li {
2432 .contact-wrapper .contact-photo-wrapper button {
2435 .contact-wrapper.media {
2437 word-wrap: break-word;
2440 /* bootstrap hack for .media */
2441 .contact-wrapper.media .media-body {
2442 display: table-cell;
2447 .contact-wrapper.media:before,
2452 .contact-wrapper.media:after {
2455 .contact-wrapper .contact-photo-image-wrapper img.contact-photo.xl {
2459 .contact-wrapper .contact-photo-image-wrapper img.contact-photo-xs {
2463 .contact-wrapper .contact-photo-overlay-content.xl {
2466 .contact-wrapper .contact-photo-menu {
2470 .contact-entry-desc {
2471 color: $font_color_darker;
2473 .contact-entry-checkbox {
2476 .contact-wrapper .media-body .contact-entry-name h4.media-heading a {
2477 font-weight: bold !important;
2479 font-size: 15px !important;
2481 .contact-wrapper .contact-actions {
2484 .contact-wrapper .contact-action-link,
2485 .contact-wrapper .contact-action-link:hover,
2486 .textcomplete-item .contact-wrapper .contact-action-link {
2488 color: $font_color_darker;
2491 .contact-wrapper .contact-action-link {
2493 transition: all 0.25s ease-in-out;
2495 ul li:hover .contact-wrapper .contact-action-link {
2497 transition: all 0.25s ease-in-out;
2499 ul li:hover .contact-wrapper .contact-action-link:hover {
2502 #contacts-search-wrapper,
2503 #directory-search-wrapper {
2508 #contact-edit-actions {
2511 #contact-edit-status-wrapper {
2513 background-color: rgba(225, 245, 254, $contentbg_transp);
2516 #contact-edit-settings {
2520 /* directory page */
2521 #directory-search-heading {
2525 /* group edit page */
2528 margin-bottom: 10px;
2531 .group-actions button,
2536 .contact-group-actions .fa-times-circle {
2539 .contact-group-actions .fa-plus-circle {
2543 #group-edit-wrapper {
2547 #group-edit-header {
2550 #group-update-wrapper .contact-photo-overlay {
2553 #group-update-wrapper .viewcontact_wrapper .contact-group-actions {
2558 #group-update-wrapper .viewcontact_wrapper .contact-group-link {
2563 #group-update-wrapper .viewcontact_wrapper .contact-action-link:hover {
2566 #group-update-wrapper .shortmode {
2570 #group-update-wrapper .shortmode .contact-photo {
2574 #group-update-wrapper .shortmode .media {
2577 #group-update-wrapper .shortmode .contact-entry-desc {
2578 font-size: 12px !important;
2580 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading {
2583 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading a {
2584 font-size: 13px !important;
2585 white-space: nowrap;
2587 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-rel,
2588 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-network {
2593 .message-content-wrapper > li {
2594 /* we need this overwriting because we have no template file
2595 for the general mail page /message
2597 list-style-type: none;
2600 max-height: calc(100vh - 200px);
2602 #mail-conversation {
2604 max-height: calc(100vh - 400px);
2609 .mail-conv-wrapper .media .contact-photo-wrapper img {
2613 .mail-thread #prvmail-to-label,
2614 .mail-thread #prvmail-subject-label {
2617 .mail-thread #prvmail-message-label > label {
2620 .mail-thread #prvmail-message-label textarea {
2623 .mail-conv-wrapper {
2625 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2628 height: calc(100vh - 150px);
2631 height: calc(100% - 20px);
2633 #message-preview ul {
2636 #message-preview .media-list li {
2640 #message-preview .media-list li:hover {
2641 border-left: none !important;
2643 #message-preview .media-list li a {
2646 .mail-list-outside-wrapper {
2648 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2650 .mail-list-outside-wrapper .contact-photo-wrapper img {
2657 #modal #prvmail-text-edit-bb .bb-img {
2662 #photo-album-edit-name-label {
2665 .photo-album-edit-name {
2669 .photo-album-actions {
2670 margin-bottom: 10px;
2672 .photo-album-actions .photos-order-link {
2677 .fc .fc-month-view .fc-content .fc-title .item-desc:hover {
2678 color: $link_hover_color;
2680 .fc .fc-list-item-title a {
2683 .fc .fc-list-item-title a[href]:hover {
2684 color: $link_hover_color;
2685 text-decoration: none;
2687 .event-wrapper .event-owner {
2688 margin-bottom: 15px;
2690 .event-wrapper .event-owner img {
2699 .event-wrapper .vevent {
2702 box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
2704 .event-wrapper .event-buttons {
2707 #event-form-wrapper {
2710 #event-edit-form-wrapper {
2714 color: $font_color_darker;
2716 #event-edit-form-wrapper #event-edit-time {
2719 .event-buttons .plink-event-link {
2722 .vevent .event-summary {
2725 .vevent .event-description {
2728 .vevent .event-location .location {
2732 .modal-body .vevent .event-summary {
2735 #event-preview .vevent .event-summary {
2740 .event-card-details,
2741 .event-card-header {
2745 .event-card-left-date {
2748 .vevent .event-card-header {
2751 .event-card-left-date {
2752 width: 60px; /* Das muss wahrscheinlich unterschiedlich sein zwischen calendar und stream */
2754 .event-card .event-date-wrapper > span {
2758 white-space: nowrap;
2760 .event-card .event-date-wrapper .event-card-short-month {
2762 text-transform: uppercase;
2764 .event-card .event-date-wrapper.medium .event-card-short-date {
2769 .event-card .event-card-content {
2771 padding: 0 5px 0 15px;
2772 box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
2776 .event-card .event-card-content .event-map-btn {
2782 .event-card .event-card-title {
2784 color: $font_color_darker;
2789 .event-card .event-card-location {
2793 .event-card .event-card-location br {
2796 .event-card .event-card-location br::after {
2799 .event-card-profile-name a {
2802 .event-card-profile-name a:hover {
2803 color: $link_hover_color;
2805 .event-card .event-card-content .event-location-map {
2810 .event-card .event-card-content .event-location-map .map {
2813 .event-card .description {
2815 box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, 0.1) inset;
2828 transform: translateZ(0);
2829 transition: opacity 0.2s;
2834 text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
2836 .photo-next-link > i,
2837 .photo-prev-link > i {
2838 vertical-align: super;
2840 .photo-next-link > i {
2849 #photo-photo:hover .photo-next-link,
2850 #photo-photo:hover .photo-prev-link {
2853 #photo-photo .photo-next-link:hover,
2854 #photo-photo .photo-prev-link:hover {
2858 .photo-comment-wrapper .comment {
2861 .photo-comment-wrapper .wall-item-content {
2862 color: $font_color_darker;
2865 .photo-comment-wrapper .comment-wwedit-wrapper,
2866 .photo-comment-wrapper .wall-item-outside-wrapper.media:first-child {
2871 .profile-listing-table {
2875 .profile-listing-row {
2878 .profile-listing-cell {
2879 display: table-cell;
2881 .profile-listing-photo {
2886 #profile-listing-new-link-wrapper {
2887 margin-bottom: 20px;
2890 #profile-photo-upload-section {
2894 #profile-photo-upload-close {
2899 .section-subtitle-wrapper {
2902 details.profile-jot-net[open] summary:before,
2903 .panel .section-subtitle-wrapper .accordion-toggle:before {
2904 font-family: ForkAwesome;
2908 details.profile-jot-net summary:before,
2909 .panel .section-subtitle-wrapper .accordion-toggle.collapsed:before {
2910 font-family: ForkAwesome;
2913 details.profile-jot-net summary:before {
2917 details.profile-jot-net[open] summary:before {
2921 #settings-nick-wrapper {
2922 margin-bottom: 20px;
2928 /* Emulates Bootstrap display */
2931 background-color: rgba(255, 255, 255, $contentbg_transp);
2934 box-shadow: 0 0 3px #dadada;
2935 -webkit-box-shadow: 0 0 3px #dadada;
2936 -moz-box-shadow: 0 0 3px #dadada;
2939 .settings-block.fakelink,
2940 .settings-block > .fakelink {
2944 .settings-block > .fakelink {
2945 margin: -10px -15px 10px -15px;
2946 border-radius: 4px 4px 0 0;
2949 .settings-block.fakelink:hover,
2950 .settings-block > .fakelink:hover {
2951 color: $link_hover_color;
2953 .settings-block.fakelink > h3,
2954 .settings-block > .fakelink > h3 {
2961 .section-subtitle-wrapper > h2 {
2964 margin-bottom: 10px;
2967 .section-subtitle-wrapper > h3 {
2973 .fakelink > h3:before {
2974 padding-right: 10px;
2976 .widget.fakelink > h3:before {
2977 font-family: ForkAwesome;
2978 content: "\f0da"; /* Right Plain Pointer */
2980 .widget > .fakelink > h3:before,
2981 #sidebar-group-header > .fakelink > h3:before {
2982 font-family: ForkAwesome;
2983 content: "\f0d7"; /* Bottom Plain Pointer */
2990 /* Intro Notifications */
2991 ul.notif-network-list {
2993 margin-right: -15px;
2995 ul.notif-network-list > li {
2997 padding-right: 15px;
2999 .intro-wrapper.media {
3001 word-wrap: break-word;
3004 .intro-photo-wrapper img.intro-photo {
3012 .intro-enty-name h4 {
3013 font-size: 15px !important;
3015 .intro-wrapper button.intro-action-link {
3017 transition: all 0.25s ease-in-out;
3019 .intro-wrapper button.intro-action-link,
3020 .intro-wrapper button.intro-action-link:hover {
3023 color: $font_color_darker;
3025 ul li:hover .intro-wrapper button.intro-action-link {
3027 transition: all 0.25s ease-in-out;
3029 ul li:hover .intro-wrapper button.intro-action-link:hover {
3032 .intro-action-buttons {
3036 transition: max-height 0.1s ease-out;
3038 ul.notif-network-list > li:hover .intro-action-buttons {
3040 transition: max-height 0.1s ease-in;
3044 .intro-network-label,
3045 .intro-location-label,
3046 .intro-keywords-label,
3048 .intro-knowyou-label,
3049 .intro-madeby-label {
3052 .intro-contact-info.xs .intro-url-label,
3053 .intro-contact-info.xs .intro-network-label,
3054 .intro-contact-info.xs .intro-location-label,
3055 .intro-contact-info.xs .intro-keywords-label,
3056 .intro-contact-info.xs .intro-about-label,
3057 .intro-contact-info.xs .intro-knowyou-label {
3062 /* Notifications Page */
3063 ul.notif-network-list li.unseen {
3064 background-color: #e3eff3;
3066 .notif-item img.notif-image {
3071 .notif-item .notif-desc-wrapper {
3074 .notif-item .notif-desc-wrapper a {
3077 color: $font_color_darker;
3084 /* This is a little bit hacky. Since the search page is used for diferent
3085 content types we can't apply the generic-page-wrapper class.
3086 So we apply the css of the generic-page-wrapper class to the ul element with some
3087 little modifications to emulate a standard page template */
3088 .search-content-wrapper > ul.viewcontact_wrapper {
3089 min-height: calc(100vh - 150px);
3091 padding-bottom: 20px;
3093 margin-bottom: 20px;
3095 background-color: rgba(255, 255, 255, $contentbg_transp);
3098 color: $font_color_darker;
3099 box-shadow: 0 0 3px #dadada;
3100 -webkit-box-shadow: 0 0 3px #dadada;
3101 -moz-box-shadow: 0 0 3px #dadada;
3105 section.help-content-wrapper h1 {
3106 padding-bottom: 0.3em;
3108 border-bottom: 1px solid #ddd;
3110 section.help-content-wrapper h2 {
3111 padding-bottom: 0.3em;
3113 border-bottom: 1px solid #ddd;
3115 section.help-content-wrapper h3 {
3118 section.help-content-wrapper h4 {
3121 section.help-content-wrapper h1,
3122 section.help-content-wrapper h2,
3123 section.help-content-wrapper h3,
3124 section.help-content-wrapper h4,
3125 section.help-content-wrapper h5,
3126 section.help-content-wrapper h6 {
3128 margin-bottom: 16px;
3132 section.help-content-wrapper p {
3135 section.help-content-wrapper p,
3136 section.help-content-wrapper a,
3137 section.help-content-wrapper li {
3143 #adminpage #frio_background_image .image-select {
3146 #adminpage #frio_background_image.input-group {
3149 #admin-summary-wrapper {
3152 #adminpage ul#addonslist,
3156 #adminpage li .icon {
3157 display: inline-block;
3158 vertical-align: text-top;
3162 #adminpage li .icon:before {
3164 display: inline-block;
3171 border: 1px solid #cccccc;
3173 background-color: $background_color;
3174 -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3175 -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3176 transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3178 #adminpage li .icon.on:after {
3179 font-family: "ForkAwesome";
3181 display: inline-block;
3194 #adminpage .addon .desc {
3197 #admin-users #users tr.blocked {
3198 background-color: #f8efc0;
3200 .adminpage .table-hover > tbody > tr:hover + tr.details {
3201 background-color: #f5f5f5;
3203 .offset-anchor::before {
3209 pointer-events: none;
3217 #identity-selector-wrapper {
3222 #identity-selector-wrapper .identity-match-photo {
3226 #identity-selector-wrapper .identity-match-photo button {
3229 #identity-selector-wrapper .identity-match-photo .badge {
3234 #identity-selector-wrapper .identity-match-name {
3237 #identity-selector-wrapper .identity-match-details {
3243 #register-openid-wrapper,
3244 #register-name-wrapper,
3245 #register-invite-wrapper,
3246 #profile-publish-wrapper {
3249 #register-openid-end,
3250 #register-nickname-end {
3255 * Overwriting for transparency and other colors
3257 main .nav-tabs > li.active > a,
3258 main .nav-tabs > li.active > a:focus,
3259 main .nav-tabs > li.active > a:hover {
3260 background-color: rgba(255, 255, 255, $contentbg_transp);
3270 @media (min-width: 768px) {
3277 * Framework overwrite
3280 /* textcomplete for contact filtering*/
3281 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list {
3282 position: relative !important;
3283 top: inherit !important;
3284 bottom: inherit !important;
3285 left: inherit !important;
3288 margin-right: -15px;
3289 background-color: transparent;
3293 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li {
3295 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
3297 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li:first-child {
3300 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list .textcomplete-item > a {
3301 padding: 0 !important;
3303 background-color: transparent !important;
3305 /* this is a little hack for texcomplete contact filter
3306 There are for some reasons empty <a> tags. I don't know why */
3307 .textcomplete-item .contact-wrapper a {
3312 body .tread-wrapper .hovercard a,
3313 body .tread-wrapper .hovercard a:hover {
3316 body .tread-wrapper .hovercard:hover .hover-card-content a {
3317 color: $link_color !important;
3320 /* Pagination improvements */
3325 .pagination > li > a,
3326 .pagination > li > span {
3330 .pagination > li > a:hover,
3331 .pagination > li > span:hover {
3332 color: $link_hover_color;
3334 .pagination > .active > a,
3335 .pagination > .active > a:focus,
3336 .pagination > .active > a:hover,
3337 .pagination > .active > span,
3338 .pagination > .active > span:focus,
3339 .pagination > .active > span:hover {
3340 background-color: $link_color;
3341 border-color: $link_color;
3344 .pagination li.pager_n a {
3348 .pagination .pager_prev a {
3351 border-top-right-radius: 3px;
3352 border-bottom-right-radius: 3px;
3354 .pagination .pager_next a {
3357 border-top-left-radius: 3px;
3358 border-bottom-left-radius: 3px;
3361 .pager .previous > a {
3365 .pagination .disabled > a,
3366 .pager .disabled > a {
3372 background-color: rgba(255, 255, 255, $contentbg_transp);
3376 * some temporary workarounds until this will solved
3377 * elsewhere (e.g. new templates)
3379 section .profile-match-wrapper {
3386 #login-submit-wrapper {
3389 #lost-password-link {
3392 #login-lost-password-link {
3393 margin-bottom: 10px;
3399 #id_password_wrapper {
3400 margin-bottom: unset;
3407 background: #8ad0a1;
3414 .mod-home.is-not-singleuser,
3416 background-color: $login_bg_color;
3417 background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4)), url($login_bg_image);
3418 background-size: cover;
3419 background-attachment: fixed;
3420 background-position: center;
3423 .mod-home.is-not-singleuser nav.navbar,
3424 .mod-login nav.navbar {
3425 background-color: transparent;
3428 .mod-home.is-not-singleuser #topbar-second,
3429 .mod-login #topbar-second {
3430 background-color: transparent;
3434 .mod-home.is-not-singleuser .login-content,
3435 .mod-login .login-content {
3440 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3444 .mod-home.is-not-singleuser .login-form > #login-form label,
3445 .mod-login #content #login-form label {
3449 .mod-home.is-not-singleuser .login-panel-content,
3450 .mod-login .login-panel-content {
3451 background-color: rgba(255, 255, 255, 0.85);
3455 background: $nav_bg !important;
3456 color: $btn_primary_color !important;
3459 -webkit-box-shadow: none;
3461 -moz-box-shadow: none;
3462 background-image: none;
3470 width: 100% !important;
3473 .qq-upload-drop-area {
3474 background: white !important;
3477 -webkit-box-shadow: none;
3479 -moz-box-shadow: none;
3480 background-image: none;
3488 width: 100% !important;
3489 display: block !important;
3490 position: relative !important;
3491 border: black 1px dashed !important;
3492 margin-bottom: 5px !important;
3493 margin-top: 15px !important;
3497 * The different views of js fullcalendar
3501 margin-bottom: 10px;
3505 #event-calendar-title {
3506 display: inline-block;
3515 #fc-header-right .dropdown > button {
3518 #event-calendar-title {
3519 vertical-align: middle;
3521 #event-calendar-views {
3528 .fc .fc-month-view td.fc-widget-content,
3530 .fc .fc-list-view .fc-list-table td,
3534 .fc td.fc-widget-header,
3535 .fc th.fc-widget-header {
3540 .fc .fc-month-view td.fc-day {
3543 border-bottom: 1px solid;
3546 .fc .fc-day-grid-container .fc-row {
3547 border-bottom: 1px solid;
3550 .fc tr td.fc-today {
3553 .fc .fc-month-view .fc-content .fc-title .item-desc {
3556 .fc .fc-view-container {
3559 .fc .fc-list-view td {
3562 #events-calendar.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
3567 background-color: #e3f2fd;
3568 border: 1px solid #bbdefb;
3569 color: $font_color_darker;
3571 .fc .fc-month-view .fc-time,
3572 .fc .fc-listMonth-view .fc-list-item-time,
3573 .fc .fc-listMonth-view .fc-list-item-marker,
3574 .fc .fc-listMonth-view .fc-widget-header {
3577 .fc .fc-listMonth-view .fc-list-item:hover td {
3578 background: transparent;
3581 .fc .fc-listMonth-view .seperator {
3592 .event-card .event-label,
3593 .event-card .location-label {
3596 .popover.event-card .event-card-basic-content {
3601 .event-card .event-hover-location .location {
3606 /* Medium devices (desktops, 992px and up) */
3607 @media (min-width: 992px) {
3608 .mod-home.is-not-singleuser #content,
3609 .mod-login #content {
3610 margin-top: 100px !important;
3613 .mod-home.is-not-singleuser .login-form > #login-form,
3614 .mod-home.is-not-singleuser .login-form > #login-extra-links,
3615 .mod-login #content #login-form {
3616 background-color: #fff;
3620 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3622 background-color: white;
3625 .mod-home.is-not-singleuser .login-form > #login-form label,
3626 .mod-login #content #login-form label {
3630 .mod-home.is-not-singleuser .login-form::before,
3631 .mod-login #content #login-form::before {
3635 background-color: rgba(255, 255, 255, 0.1);
3643 .mod-home.is-not-singleuser .login-form::after,
3644 .mod-login #content #login-form::after {
3648 background-color: rgba(255, 255, 255, 0.2);
3657 /* Mobile display */
3658 @media (max-width: 600px) {
3666 #friendica-logo-mask {
3680 .panel .panel-body {
3684 .toplevel_item > .wall-item-container {
3692 .wall-item-actions {
3700 .generic-page-wrapper,
3701 .videos-content-wrapper,
3702 .suggest-content-wrapper,
3703 .help-content-wrapper,
3704 .match-content-wrapper,
3705 .dirfind-content-wrapper,
3706 .directory-content-wrapper,
3707 .delegation-content-wrapper,
3708 .notes-content-wrapper,
3709 .message-content-wrapper,
3710 .apps-content-wrapper,
3712 .delegate-content-wrapper,
3713 .uexport-content-wrapper,
3714 .dfrn_request-content-wrapper,
3715 .friendica-content-wrapper,
3716 .credits-content-wrapper,
3717 .nogroup-content-wrapper,
3718 .profperm-content-wrapper,
3719 .invite-content-wrapper,
3720 .tos-content-wrapper,
3721 .fsuggest-content-wrapper {
3781 .wwto .contact-photo {
3789 Prevent automatic zoom on input focus on iOS
3790 see https://stackoverflow.com/a/16255670
3796 .wall-item-container.thread_level_3,
3797 .wall-item-container.thread_level_4,
3798 .wall-item-container.thread_level_5,
3799 .wall-item-container.thread_level_6,
3800 .wall-item-container.thread_level_7 {