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);
79 .btn.btn-link.fakelink {
82 vertical-align: baseline;
87 display: none !important;
90 max-height: 0px !important;
91 overflow: hidden !important;
109 * clickable table rows
111 .table > tbody > td[role="button"] {
118 @media screen and (max-width: 990px) {
123 position: fixed !important;
125 background-color: $background_color;
132 padding-left: 6px !important;
133 padding-right: 6px !important;
143 background-color: rgba(0, 0, 0, 0.4);
145 transition: opacity 0.5s;
147 aside.canvas-slid::before {
151 /* prevent page scroll when the aside is opened **/
157 * standard page elements
163 color: $nav_icon_color;
170 padding: 0 12px 0 12px;
172 background-color: $nav_bg;
176 #item-delete-selected {
185 padding: 0 12px 0 12px;
187 background-color: $link_color;
192 #toggle_mobile_link {
197 * Overwriting and Extend Bootstrap
209 -webkit-box-shadow: none;
211 -moz-box-shadow: none;
212 background-image: none;
222 outline-color: $link_hover_color;
245 background-color: #ae0f0f;
250 color: $btn_primary_color;
252 .btn.btn-primary:hover,
253 .btn.btn-primary:focus {
254 color: $btn_primary_color;
255 background: $btn_primary_hover_color;
256 text-decoration: none;
258 .btn.btn-primary:active,
259 .btn.btn-primary.active {
260 background: $btn_primary_hover_color;
263 .btn-primary.active.focus,
264 .btn-primary.active:focus,
265 .btn-primary.active:hover,
266 .btn-primary:active.focus,
267 .btn-primary:active:focus,
268 .btn-primary:active:hover,
269 .open > .dropdown-toggle.btn-primary.focus,
270 .open > .dropdown-toggle.btn-primary:focus,
271 .open > .dropdown-toggle.btn-primary:hover,
274 .open > .dropdown-toggle.btn-primary {
275 background: $btn_primary_hover_color;
288 background: transparent;
295 background-color: transparent;
299 border-left: 1px solid #777;
303 border: 1px solid transparent;
312 .toggle .toggle-off:hover {
314 background-color: #eee;
317 .toggle.off .toggle-handle {
318 background-color: #eee;
321 background-color: #fff;
323 border: 1px solid transparent;
327 .input-group-sm > .form-control,
328 .input-group-sm > .input-group-addon,
329 .input-group-sm > .input-group-btn > .btn {
330 padding: 0.275rem 0.75rem;
333 border-radius: 0.2rem;
335 /* Bootstrap media class fix/hack
336 * This is a test. I thought it does have some
337 * issues in some corner cases. Maybe we remove
339 * https://github.com/twbs/bootstrap/issues/6053
362 vertical-align: baseline;
363 background-color: $link_color;
370 .forum-widget-entry .badge,
371 .sidebar-group-li .badge {
375 /* disabled elements */
376 .community-content-wrapper > h3,
377 .network-content-wrapper > .section-title-wrapper {
381 header #site-location {
392 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
394 font-family: tahoma, "Lucida Sans", sans;
400 header #banner #logo-img,
401 .navbar-brand #logo-img {
402 -webkit-mask-image: url("img/friendica-25.png");
403 background-color: $nav_icon_color;
410 #navbrand-container {
413 #navbrand-container #navbar-brand-text {
415 color: $nav_icon_color;
418 /* offcanvas section */
420 /* Right offcanvas uses: #offcanvasUsermenu, .offcanvas-right-active
421 .offcanvas-right and .offcanvas-right-overlay */
430 background-color: #333;
431 transform: translateX(-100%);
432 transition: 0.4s ease-in-out;
443 background-color: #333;
444 transform: translateX(100%);
445 transition: 0.4s ease-in-out;
448 .offcanvas-active .off-canvas {
449 transform: translateX(0);
451 .offcanvas-right-active #offcanvasUsermenu {
452 transform: translateX(0);
455 transition: 0.4s ease-in-out;
460 transition: 0.4s ease-in-out;
462 .offcanvas-active .page-wrapper,
463 .offcanvas-active .navbar-fixed-top {
464 transform: translateX(300px);
473 background-color: rgba(0, 0, 0, 0.5);
477 transition: 0.4s ease-in-out;
479 .offcanvas-right-overlay {
485 background-color: rgba(0, 0, 0, 0.5);
489 transition: 0.4s ease-in-out;
491 .offcanvas-active .offcanvas-overlay,
492 .offcanvas-right-active .offcanvas-right-overlay {
496 /* offcanvas section ends */
510 .topbar ul.nav > li {
513 @media (min-width: 992px) {
514 .topbar ul.nav > li > a,
515 .topbar ul.nav > li > button {
517 padding-bottom: 15px;
521 @media (max-width: 991px) {
522 .topbar ul.nav > li > a,
523 .topbar ul.nav > li > button {
527 .topbar .dropdown-footer {
530 .topbar .dropdown-header {
537 .topbar .dropdown-header .dropdown-header-link {
542 .topbar .dropdown-header .dropdown-header-link a,
543 .topbar .dropdown-header .dropdown-header-link .btn-link {
544 color: $link_color !important;
548 .topbar .dropdown-header:hover {
553 background-color: $nav_bg;
556 color: $nav_icon_color;
558 @media screen and (max-width: 767px) {
565 #topbar-first .navbar-toggle {
570 #topbar-first .nav > li > a,
571 #topbar-first .nav > li > button,
572 nav.navbar .nav > li > a,
573 nav.navbar .nav > li > button {
574 color: $nav_icon_color;
576 #topbar-first .nav > .open > a,
577 #topbar-first .nav > .open > button {
578 background-color: $nav_bg;
580 #topbar-first .nav > li > a:hover,
581 #topbar-first .nav > li > a:focus,
582 #topbar-first .nav > li > button:not(#main-menu):hover,
583 #topbar-first .nav > li > button:not(#main-menu):focus,
584 nav.navbar .nav > li > a:hover,
585 nav.navbar .nav > li > a:focus,
586 nav.navbar .nav > li > button:hover,
587 nav.navbar .nav > li > button:focus {
588 background-color: $nav_icon_hover_color;
590 #topbar-first .nav > .account {
594 #topbar-first .nav > .account img {
600 #topbar-first .nav > .account .dropdown-toggle {
601 padding: 8px 5px 0px;
605 #topbar-first .nav > .account .dropdown-toggle span {
608 #topbar-first .topbar-brand {
612 #topbar-first .topbar-actions {
616 #topbar-first .topbar-nav {
622 #topbar-first .topbar-nav .nav-segment {
626 #topbar-first .topbar-nav .nav-segment > a {
627 display: inline-block;
628 text-decoration: none;
631 #topbar-first .topbar-nav .nav-segment .nav-notification {
635 background-color: #ff3535;
637 #topbar-first #intro-update {
640 #topbar-first .topbar-nav .arrow:after {
645 border-color: transparent;
652 border-bottom-color: #fff;
655 #topbar-first .topbar-nav .arrow {
660 border-color: transparent;
667 border-bottom-color: rgba(0, 0, 0, 0.15);
671 #topbar-first .topbar-nav .dropdown-menu {
675 #topbar-first .topbar-nav .dropdown-menu ul.media-list {
679 #topbar-first .topbar-nav .dropdown-menu li {
682 #topbar-first .topbar-nav .dropdown-menu li i.approval {
688 #topbar-first .topbar-nav .dropdown-menu li i.accepted {
691 #topbar-first .topbar-nav .dropdown-menu li i.declined {
694 #topbar-first .topbar-nav .dropdown-menu li .media {
697 #topbar-first .topbar-nav .dropdown-menu li .media .img-space {
702 #topbar-first .dropdown-footer {
703 margin: 10px 10px 5px;
705 #topbar-first .caret {
706 border-top-color: #bebebe;
708 #topbar-first .btn-group > a {
709 background-color: #7f9baa;
711 #topbar-first .btn-enter {
712 background-color: #7f9baa;
715 #topbar-first .btn-enter:hover {
716 background-color: #89a2b0;
718 .navbar-fixed-top ul.nav.navbar-nav.navbar-right {
722 #friendica-logo-mask {
726 /* Notification Menu */
727 #topbar-first #nav-notifications-menu {
730 #topbar-first #nav-notifications-menu a {
731 color: $font_color_darker;
734 #topbar-first #nav-notifications-menu li.notif-entry {
735 color: $font_color_darker;
737 border-bottom: 1px solid #eee;
739 border-left: 3px solid #fff;
743 #topbar-first #nav-notifications-menu li.notification-unseen {
744 border-left: 3px solid #e3eff3;
745 background-color: #e3eff3;
747 #topbar-first #nav-notifications-menu li.notif-entry:hover {
748 background-color: #f7f7f7;
749 border-left: 3px solid $link_color;
751 #topbar-first #nav-notifications-menu li.placeholder {
754 #topbar-first #nav-notifications-menu .media .media-body .contactname {
757 #topbar-first #nav-notifications-menu .media .media-body .label {
758 padding: 0.1em 0.5em;
760 #topbar-first #nav-notifications-menu li.notif-entry .media-object a img {
765 /* The Top Nav Bar user menu */
766 #topbar-first .account .user-title {
770 #topbar-first .account .user-title span {
771 color: $nav_icon_color;
773 #topbar-first .account #main-menu .nav-notification {
777 background-color: #ff8989;
781 background-color: $background_color;
785 border-left-color: $nav_icon_color;
786 box-shadow: -3px 0 3px -3px black;
788 #offcanvasUsermenu .nav-container {
789 /* required to compensate for moving the container below the topnav bar */
792 #offcanvasUsermenu li.divider {
793 background-color: transparent;
797 #offcanvasUsermenu ul,
798 #offcanvasUsermenu ul li:first-child,
799 #offcanvasUsermenu ul,
800 #offcanvasUsermenu ul li:last-child {
803 #offcanvasUsermenu li,
804 #offcanvasUsermenu a {
805 background-color: $nav_bg;
806 color: $nav_icon_color;
809 #offcanvasUsermenu li.list-group-item {
810 border-color: $background_color;
812 #offcanvasUsermenu a {
817 #offcanvasUsermenu li.nav-sitename {
820 #topbar-first .dropdown.account li#nav-sitename {
824 word-break: break-word;
826 #topbar-first .dropdown.account li#nav-sitename:hover {
828 background-color: $nav_bg;
832 max-height: calc(100vh - 55px);
835 #topbar-first #search-box .navbar-form {
846 background-color: $background_color;
848 /* fix bootstrap .well class not playing well with data-target slide animation */
854 #search-mobile .navbar-form {
857 #topbar-first #search-box .form-search {
860 background-position: 8px 4px;
862 #topbar-first #search-box .btn {
871 background-color: #fff;
873 background-image: none;
874 -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
875 -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
876 box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
877 border-bottom: 1px solid #d4d4d4;
879 #topbar-second > .container {
882 @media screen and (max-width: 767px) {
883 #topbar-second > .container,
884 #topbar-second #navbar-button {
888 #topbar-second .dropdown-menu {
892 #topbar-second .dropdown-menu .divider {
895 #topbar-second #space-menu-dropdown,
896 #topbar-second #search-menu-dropdown {
899 #topbar-second #space-menu-dropdown .media-list,
900 #topbar-second #search-menu-dropdown .media-list {
908 .intro-wrapper button.intro-action-link {
912 ul li .intro-wrapper button.intro-action-link {
915 @media screen and (max-width: 768px) {
916 #topbar-second #space-menu-dropdown .media-list,
917 #topbar-second #search-menu-dropdown .media-list {
921 #topbar-second #space-menu-dropdown form,
922 #topbar-second #search-menu-dropdown form {
925 #topbar-second #space-menu-dropdown .search-reset,
926 #topbar-second #search-menu-dropdown .search-reset {
935 #topbar-second #space-menu-dropdown li > ul > li > a > .media .media-body p {
941 #topbar-second #nav-short-info .heading {
946 text-overflow: ellipsis;
948 #topbar-second #tabmenu .heading {
950 text-overflow: ellipsis;
957 .nav > li > .btn-link {
962 .nav .open > .btn-link {
963 background-color: #eee;
964 border-color: #337ab7;
966 .nav-pills > li > .btn-link {
969 .nav-pills .dropdown-menu,
970 .nav-tabs .dropdown-menu,
971 .account .dropdown-menu,
972 .contact-photo-wrapper .dropdown-menu {
973 background-color: $nav_bg;
976 .dropdown-menu .divider {
979 .nav-pills .dropdown-menu li.divider,
980 .nav-tabs .dropdown-menu li.divider,
981 .account .dropdown-menu li.divider,
982 .contact-photo-wrapper .dropdown-menu li.divider {
983 background-color: $menu_background_hover_color;
986 .nav-pills .dropdown-menu li > a,
987 .nav-tabs .dropdown-menu li > a,
988 .account .dropdown-menu li > a,
989 .contact-photo-wrapper .dropdown-menu li > a {
990 border-left: 3px solid $nav_bg;
992 .nav-pills .dropdown-menu li a,
993 .nav-pills .dropdown-menu li .btn-link,
994 .nav-tabs .dropdown-menu li a,
995 .nav-tabs .dropdown-menu li .btn-link,
996 .account .dropdown-menu li a,
997 .account .dropdown-menu li .btn-link,
998 .contact-photo-wrapper .dropdown-menu li a,
999 .contact-photo-wrapper .dropdown-menu li .btn-link {
1000 color: $nav_icon_color;
1005 .nav-pills .dropdown-menu li a i,
1006 .nav-pills .dropdown-menu li .btn-link i,
1007 .nav-tabs .dropdown-menu li a i,
1008 .nav-tabs .dropdown-menu li .btn-link i,
1009 .account .dropdown-menu li a i,
1010 .account .dropdown-menu li .btn-link i,
1011 .contact-photo-wrapper .dropdown-menu li a i,
1012 .contact-photo-wrapper .dropdown-menu li .btn-link i {
1015 display: inline-block;
1018 .nav-pills .dropdown-menu li > a:hover,
1019 .nav-tabs .dropdown-menu li > a:hover,
1020 .account .dropdown-menu li > a:hover,
1021 .contact-photo-wrapper .dropdown-menu li > a:hover,
1022 .nav-pills .dropdown-menu li.selected a,
1023 .nav-tabs .dropdown-menu li.selected a,
1024 .account .dropdown-menu li.selected a,
1025 .contact-photo-wrapper .dropdown-menu li.selected a {
1026 border-left: 3px solid $link_color;
1028 background: $menu_background_hover_color;
1030 #photo-edit-link-wrap {
1031 color: $font_color_darker;
1032 margin-bottom: 15px;
1035 #newmember-tab > a {
1046 .nav-container .widget {
1049 background-color: rgba(255, 255, 255, $contentbg_transp);
1050 box-shadow: 0 0 3px #dadada;
1051 -webkit-box-shadow: 0 0 3px #dadada;
1052 -moz-box-shadow: 0 0 3px #dadada;
1055 margin-bottom: 20px;
1060 .nav-container .widget h3 {
1064 padding-bottom: 10px;
1068 .nav-container .widget ul {
1073 margin-right: -10px;
1077 aside .widget li .label {
1081 .nav-container .widget li {
1083 padding-right: 10px;
1085 aside .widget li:hover,
1086 aside .widget li.selected,
1087 .nav-container .widget li:hover {
1089 color: $font_color_darker;
1090 background-color: rgba(247, 247, 247, $contentbg_transp);
1091 border-left: 3px solid $link_color !important;
1095 aside .widget li a {
1098 padding-bottom: 6px;
1101 aside .widget li a:hover {
1102 color: $font_color_darker;
1105 /* forumlist widget */
1106 aside > #datebrowse-sidebar li.posted-date-selector-months {
1107 margin-bottom: 10px;
1111 aside > #datebrowse-sidebar li.posted-date-selector-months:hover {
1112 border-left: none !important;
1113 background-color: transparent !important;
1115 aside > #datebrowse-sidebar .posted-date-selector-months > ul {
1118 aside > #datebrowse-sidebar .posted-date-selector-months > ul > li {
1121 aside > #datebrowse-sidebar .posted-date-selector-months > ul > li:hover {
1126 -webkit-filter: grayscale(100%);
1127 filter: grayscale(100%);
1129 filter: alpha(opacity=50); /* For IE8 and earlier */
1130 -webkit-transition: all 0.2s ease-in-out;
1131 -moz-transition: all 0.2s ease-in-out;
1132 -o-transition: all 0.2s ease-in-out;
1133 -ms-transition: all 0.2s ease-in-out;
1134 transition: all 0.2s ease-in-out;
1136 #forumlist-sidebar-ul li:hover a > .forumlist-img {
1137 -webkit-filter: unset;
1142 /* help page widget */
1143 aside > .help-aside-wrapper p strong:first-child {
1147 aside > .help-aside-wrapper h1 {
1151 padding: 20px 0 10px;
1153 aside > .help-aside-wrapper h2 {
1158 /* vcard / h-card */
1159 aside .vcard #profile-photo-wrapper {
1162 aside .vcard img.u-photo,
1163 aside img.vcard-photo {
1167 aside .vcard .tool .action {
1174 background: rgba(0, 0, 0, 0.5);
1178 -webkit-transition: all 0.25s ease-in-out;
1179 -moz-transition: all 0.25s ease-in-out;
1180 -o-transition: all 0.25s ease-in-out;
1181 -ms-transition: all 0.25s ease-in-out;
1182 transition: all 0.25s ease-in-out;
1184 aside .vcard .tool a {
1185 color: rgba(255, 255, 255, 0.85);
1187 aside .vcard #profile-photo-wrapper:hover .tool .action {
1190 aside .vcard #profile-photo-wrapper.crop-preview {
1193 aside .vcard .profile-header {
1194 padding: 5px 0px 20px 0px;
1198 padding: 5px 0px 5px 0px;
1200 aside .vcard .p-addr {
1203 text-overflow: ellipsis;
1204 white-space: nowrap;
1205 padding-bottom: 2px;
1207 aside .vcard .title {
1210 aside .vcard .detail {
1214 aside .xmpp, aside .matrix {
1217 aside .vcard .icon {
1218 display: table-cell;
1219 padding-right: 10px;
1222 #profile-extra-links {
1224 margin-bottom: 10px;
1226 aside .vcard #subscribe-feed-link-button,
1227 aside .vcard #dfrn-request-link-button,
1228 aside .vcard #wallmessage-link-button {
1234 aside .vcard #subscribe-feed-link,
1235 aside .vcard #dfrn-request-link,
1236 aside .vcard #wallmessage-link {
1239 /* vcard-short-info */
1241 #nav-short-info .contact-wrapper {
1244 white-space: nowrap;
1246 padding-right: 20px;
1249 #nav-short-info .contact-photo-wrapper.media-left {
1252 #vcard-short-photo-wrapper img,
1253 #nav-short-info .contact-wrapper img {
1259 #nav-short-info .contact-wrapper .media-body {
1263 text-overflow: ellipsis;
1265 #vcard-short-desc > .media-heading,
1266 #vcard-short-desc > .vcard-short-addr,
1267 #nav-short-info .contact-wrapper .media-heading,
1268 #nav-short-info .contact-wrapper #contact-entry-url-network {
1269 text-overflow: ellipsis;
1272 #vcard-short-desc > .media-heading,
1273 #nav-short-info .contact-wrapper .media-heading {
1277 #nav-short-info .contact-wrapper .media-heading a {
1278 color: $font_color_darker;
1279 font-size: 14px !important;
1281 #vcard-short-desc > .vcard-short-addr,
1282 #nav-short-info .contact-wrapper #contact-entry-url-network {
1286 .network-content-wrapper > .generic-page-wrapper,
1287 #nav-short-info .contact-wrapper .contact-photo-overlay,
1288 #nav-short-info .contact-wrapper .contact-actions {
1292 aside #peoplefind-sidebar input,
1293 aside #follow-sidebar input {
1295 background-position: 10px 5px;
1297 aside #peoplefind-sidebar label,
1298 aside #follow-sidebar label {
1299 font-weight: normal;
1301 aside #peoplefind-sidebar .form-group-search .form-button-search,
1302 aside #follow-sidebar .form-group-search .form-button-search {
1306 div#sidebar-group-header h3 {
1310 div#sidebar-group-list {
1320 color: $font_color_darker;
1322 .sidebar-widget-header .group-edit-tool {
1327 color: $font_color_darker;
1329 transition: all 0.1s ease-in-out;
1332 color: $font_color_darker;
1339 aside .widget-action {
1342 aside #group-sidebar .sidebar-group-li .group-edit-tool.faded-icon:hover,
1343 aside #saved-search-list .saved-search-li .savedsearchdrop.faded-icon:hover,
1344 aside .widget.widget-action.faded-icon:hover {
1346 transition: all 0.25s ease-in-out;
1348 aside #group-sidebar .sidebar-group-li .group-edit-tool.faded-icon:hover,
1349 aside #saved-search-list .saved-search-li .savedsearchdrop.faded-icon:hover,
1350 aside .widget .widget-action.faded-icon:hover {
1353 aside #group-sidebar li .group-checkbox {
1356 aside #group-sidebar li .group-edit-tool {
1357 padding-right: 10px;
1359 aside #group-sidebar li .group-edit-tool:first-child {
1363 /* contact block widget */
1364 .contact-block-content {
1369 .contact-block-div {
1371 margin: 0px 5px 5px 0px;
1373 .contact-block-link {
1375 .contact-block-img {
1381 /* Tag cloud widget */
1382 .tagblock.widget > .tag-cloud {
1387 display: none !important;
1401 .modal #jot-sections {
1402 max-height: calc(100vh - 22px);
1404 @media (min-width: 768px) {
1405 .modal #jot-sections {
1406 max-height: calc(100vh - 62px);
1409 #jot-modal #jot-sections,
1410 #jot-modal #jot-modal-body,
1411 #jot-modal #profile-jot-form,
1412 #jot-modal #profile-jot-wrapper,
1413 #jot-modal #jot-text-wrap,
1414 #jot-modal #jot-preview-content,
1415 #jot-modal #tread-wrapper--1,
1416 #jot-modal #item-Q0,
1417 #jot-modal #profile-jot-acl-wrapper,
1418 #jot-modal #acl-wrapper {
1422 flex-direction: column;
1424 #jot-modal .modal-header a,
1425 #jot-modal .modal-header .btn-link,
1426 #profile-jot-submit-wrapper a,
1427 #profile-jot-submit-wrapper .btn-link {
1428 color: $font_color_darker;
1430 #jot-modal .modal-header {
1431 border-bottom: none;
1433 #jot-modal .modal-header .compose-link {
1438 #jot-category-wrap {
1444 #jot-text-wrap textarea {
1446 overflow-y: auto !important;
1447 overflow-y: overlay !important;
1449 #jot-text-wrap .preview textarea {
1452 #preview_profile-jot-text,
1453 .comment-edit-form .preview {
1457 border: 2px solid #ededed;
1460 border-radius: 0 0 4px 4px;
1462 color: $font_color_darker;
1464 textarea#profile-jot-text:focus + #preview_profile-jot-text,
1465 textarea.comment-edit-text:focus + .comment-edit-form .preview {
1466 border: 2px solid #6fdbe8;
1469 .preview hr.previewseparator {
1471 border-color: #d2d2d2;
1473 #previewImgBtn_profile-jot-text,
1485 .preview button.previewActionBtn {
1491 border: 2px solid #fff;
1492 box-shadow: 0 0 3px gray;
1496 text-decoration: none;
1497 padding: 0 0 1px 1px;
1500 .preview button.previewActionBtn:hover {
1503 .preview .closePreview button.previewActionBtn {
1506 #previewInputTitle_profile-jot-text {
1509 #profile-jot-wrapper button#profile-jot-submit {
1512 #profile-jot-wrapper #character-counter {
1515 .modal .wall-item-container.preview {
1517 overflow-y: overlay;
1521 font-family: ForkAwesome;
1525 font-family: ForkAwesome;
1529 #acl-wrapper label.panel-heading {
1536 .fbrowser .breadcrumb {
1539 .fbrowser .path a:before {
1543 .fbrowser .breadcrumb > li:last-of-type a {
1545 pointer-events: none;
1548 .fbrowser .folders {
1549 box-shadow: -1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
1552 .fbrowser .folders ul {
1558 max-height: calc(100vh - 210px);
1561 @media (min-width: 768px) {
1562 .fbrowser .folders ul {
1563 max-height: calc(100vh - 255px);
1566 .fbrowser .folders li {
1568 padding-right: 10px;
1570 padding-bottom: 3px;
1572 .fbrowser .folders li:hover {
1574 color: $font_color_darker;
1575 background-color: rgba(247, 247, 247, $contentbg_transp);
1576 border-left: 3px solid $link_color;
1579 .fbrowser .folders li a,
1580 .fbrowser .folders li a:hover {
1581 color: $font_color_darker;
1584 .fbrowser .folders + .list {
1587 .fbrowser .fbrowser-content-container {
1589 max-height: calc(100vh - 233px);
1591 @media (min-width: 768px) {
1592 .fbrowser .fbrowser-content-container {
1593 max-height: calc(100vh - 277px);
1596 .fbrowser.photo .photo-album-image-wrapper {
1597 box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.2);
1599 .fbrowser.photo .photo-album-image-wrapper .caption {
1600 pointer-events: none;
1602 .fbrowser .profile-rotator-wrapper {
1605 .fbrowser .fa-spin {
1618 background-color: rgba(255, 255, 255, $contentbg_transp);
1619 box-shadow: 0 0 2px #dadada;
1620 -webkit-box-shadow: 0 0 2px #dadada;
1621 -moz-box-shadow: 0 0 2px #dadada;
1625 .panel.panel-inline {
1627 margin-right: -15px;
1631 .panel .panel-body {
1632 word-wrap: break-word;
1634 .tread-wrapper .media {
1636 word-wrap: break-word;
1642 /* Thread hover effects */
1643 .desktop-view .wall-item-container .wall-item-content a,
1644 .desktop-view .wall-item-name,
1645 .desktop-view .wall-item-container .fakelink,
1646 .desktop-view .toplevel_item .fakelink,
1647 .desktop-view .toplevel_item .wall-item-container .wall-item-responses a {
1649 -webkit-transition: all 0.25s ease-in-out;
1650 -moz-transition: all 0.25s ease-in-out;
1651 -o-transition: all 0.25s ease-in-out;
1652 -ms-transition: all 0.25s ease-in-out;
1653 transition: all 0.25s ease-in-out;
1656 .toplevel_item:hover .fakelink,
1657 .wall-item-container:hover .fakelink,
1658 .toplevel_item:hover .wall-item-container:hover .wall-item-responses a,
1659 .toplevel_item:hover .wall-item-content a,
1660 .toplevel_item:hover .wall-item-name,
1661 .wall-item-container:hover .wall-item-content a,
1662 .wall-item-container:hover .wall-item-name,
1663 .wall-item-container:hover .wall-item-location a {
1665 -webkit-transition: all 0.25s ease-in-out;
1666 -moz-transition: all 0.25s ease-in-out;
1667 -o-transition: all 0.25s ease-in-out;
1668 -ms-transition: all 0.25s ease-in-out;
1669 transition: all 0.25s ease-in-out;
1673 .wall-item-container {
1674 border-top: 1px solid rgba(255, 255, 255, 0.8);
1677 .wall-item-container.panel-body {
1682 .comment-edit-preview .wall-item-container.panel-body.preview {
1685 .comment-edit-preview .panel {
1689 .wall-item-container .media {
1692 background-color: rgba(0, 0, 0, 0.03);
1695 /* wall items contact photo */
1700 /*maybe some adional stuff is needed for the different screen sizes */
1702 .contact-photo-image-wrapper {
1709 .contact-photo-overlay {
1717 background: rgba(0, 0, 0, 0.5);
1720 -webkit-transition: opacity 0.25s ease;
1721 -moz-transition: opacity 0.25s ease;
1723 .contact-photo-overlay:hover {
1726 .contact-photo-overlay-content {
1728 text-shadow: 1px 1px 1px #ccc;
1729 color: rgba(255, 255, 255, 0.85);
1731 vertical-align: bottom;
1738 .wwto .contact-photo {
1746 display: inline-block;
1749 /* wall items action dropdown menu */
1750 .media .contact-info {
1754 /* Workaround for Firefox where the post heading covers the avatar, preventing hovercard interaction,
1755 48px is the width of the avatar image and should be adjusted accordingly if it ever changes. */
1756 .media .dropdown.pull-left + .contact-info {
1769 margin-bottom: 10px;
1773 .preferences .plink {
1777 blockquote.shared_content {
1779 margin-inline-start: 0px;
1783 .wall-item-network {
1787 /* wall items contact info */
1788 .media .media-body h4.media-heading {
1791 color: $font_color_darker;
1793 .media .media-body .additional-info a {
1796 .media .contact-info-comment {
1797 display: table-cell;
1799 .media .contact-info-xs h5,
1800 .media .contact-info-comment {
1811 .wall-item-name.xs {
1816 /* Contact avatar click card */
1817 .userinfo.click-card {
1821 .userinfo.click-card > *:hover:after {
1826 background-color: #ffffff;
1835 border-radius: 0 0 40% 0;
1838 /* The lock symbol popup */
1842 background-color: $nav_bg;
1852 color: $nav_icon_color;
1856 /* Space between content and head */
1861 /* wall items content */
1862 .wall-item-content {
1863 word-break: break-word;
1865 .wall-item-content img {
1866 object-fit: contain;
1868 .wall-item-body > img,
1869 .wall-item-body > a > img {
1872 .wall-item-body .body-attach > a {
1873 color: $font_color_darker;
1874 display: inline-block;
1876 .wall-item-body .body-attach > a div {
1877 color: $font_color_darker;
1881 /* wall-item content elements */
1889 box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.1) inset, 0 1px 1px rgba(0, 0, 0, 0.05);
1891 @media screen and (max-width: 767px) {
1897 margin: 5px -10px 0;
1901 box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.05);
1904 padding: 10px 10px 1px 0;
1909 .type-link img.attachment-image {
1912 .type-link blockquote,
1913 .type-video blockquote {
1917 .oembed.video .embed_video > div::before {
1918 font-family: ForkAwesome;
1919 font-weight: normal;
1921 display: inline-block;
1922 text-decoration: inherit;
1923 vertical-align: top;
1931 .oembed.video .embed_video > div {
1932 background-color: rgba(0, 0, 0, 0.2);
1933 -webkit-transition: all 0.25s ease-in-out;
1934 -moz-transition: all 0.25s ease-in-out;
1935 -o-transition: all 0.25s ease-in-out;
1936 -ms-transition: all 0.25s ease-in-out;
1937 transition: all 0.25s ease-in-out;
1939 .oembed.video .embed_video > div:hover {
1940 background-color: rgba(0, 0, 0, 0);
1942 .oembed.video .embed_video.active {
1945 .oembed.video .embed_video.active iframe {
1946 width: 100% !important;
1953 .wall-item-tags:empty {
1958 color: $font_color_darker;
1961 .wall-item-tags a:hover {
1962 text-decoration: none;
1964 .wall-item-bottom .label,
1965 .wall-item-bottom .label a {
1968 .wall-item-tags .category,
1969 .wall-item-tags .folder {
1973 /* item social action buttons */
1974 .wall-item-actions {
1977 justify-content: space-between;
1979 .wall-item-actions .btn,
1980 .wall-item-actions a,
1981 .wall-item-actions button {
1982 color: $font_color_darker;
1983 background-color: transparent;
1985 .wall-item-actions .active {
1990 .wall-item-actions-left {
1991 display: table-cell;
1992 vertical-align: middle;
1994 .wall-item-actions-right {
1997 .wall-item-actions-items {
2000 .wall-item-actions-row {
2003 .wall-item-actions-row .btn {
2006 .wall-item-actions-row > * {
2009 .wall-item-actions .checkbox {
2012 @media screen and (max-width: 767px) {
2013 .wall-item-actions .btn,
2014 .wall-item-actions a,
2015 .wall-item-actions button {
2019 .wall-item-actions .checkbox {
2023 .wall-item-actions .like-rotator {
2029 .wall-item-actions button:hover {
2030 text-decoration: underline;
2032 .wall-item-actions .separator {
2035 .wall-item-responses {
2038 .wall-item-responses > div > p {
2045 /* wall item hover effects */
2047 @media (min-width: 768px) {
2048 /* Tags and mentions */
2049 .wall-item-container .wall-item-bottom .wall-item-tags span.label {
2050 filter: grayscale(0.5);
2053 -webkit-transition: all 0.25s ease-in-out;
2054 -moz-transition: all 0.25s ease-in-out;
2055 -o-transition: all 0.25s ease-in-out;
2056 -ms-transition: all 0.25s ease-in-out;
2057 transition: all 0.25s ease-in-out;
2060 .wall-item-container:hover .wall-item-bottom .wall-item-tags span.label {
2061 filter: grayscale(0);
2064 -webkit-transition: all 0.25s ease-in-out;
2065 -moz-transition: all 0.25s ease-in-out;
2066 -o-transition: all 0.25s ease-in-out;
2067 -ms-transition: all 0.25s ease-in-out;
2068 transition: all 0.25s ease-in-out;
2070 /* Like/Comment/etc buttons */
2071 .wall-item-container .wall-item-links,
2072 .wall-item-container .wall-item-actions button > a {
2075 -webkit-transition: all 0.25s ease-in-out;
2076 -moz-transition: all 0.25s ease-in-out;
2077 -o-transition: all 0.25s ease-in-out;
2078 -ms-transition: all 0.25s ease-in-out;
2079 transition: all 0.25s ease-in-out;
2081 .wall-item-container:hover .wall-item-links,
2082 .wall-item-container:hover .wall-item-actions button > a {
2085 -webkit-transition: all 0.25s ease-in-out;
2086 -moz-transition: all 0.25s ease-in-out;
2087 -o-transition: all 0.25s ease-in-out;
2088 -ms-transition: all 0.25s ease-in-out;
2089 transition: all 0.25s ease-in-out;
2091 .wall-item-container .wall-item-body .body-attach > a:hover {
2099 wall-item-comment-wrapper.well {
2102 background-color: rgba(237, 237, 237, $contentbg_transp);
2103 background-image: none;
2105 background-color: red;
2107 wall-item-comment-wrapper.well-small {
2111 wall-item-comment-wrapper.well hr {
2112 border-top: 1px solid #d9d9d9;
2114 .wall-entry wall-item-comment-wrapper.well {
2117 .comment-container {
2119 border-top-left-radius: 3px;
2120 border-top-right-radius: 3px;
2121 border-bottom-right-radius: 0px;
2122 border-bottom-left-radius: 0px;
2125 position: relative !important;
2128 .hide-comments-outer {
2130 background-color: rgba(0, 0, 0, 0.03);
2131 padding: 0.3em 10px;
2142 .wall-item-comment-wrapper {
2144 border-top: 1px solid rgba(255, 255, 255, 0.8);
2145 background-color: rgba(0, 0, 0, 0.03);
2146 border-radius: 0 0 4px 4px;
2150 .comment-fake-form {
2151 border-color: #d9d9d9;
2153 .comment-fake-form textarea {
2157 .comment-container .wall-item-comment-wrapper {
2161 .comment-edit-form textarea {
2165 .comment-edit-submit-wrapper {
2170 .comment-icon-list {
2172 justify-content: space-between;
2175 /* acpopup + textcompletion*/
2177 background-color: #ffffff;
2181 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
2186 /** @todo: we schould consider the possibility to overwrite bootstrap dropdowns
2187 at the beginning of this file to get rid of the !important */
2188 .textcomplete-item > a {
2189 color: $font_color_darker !important;
2190 padding: 5px 20px !important;
2192 .textcomplete-item.active > a {
2193 background-color: rgb(247, 247, 247) !important;
2194 background-image: none !important;
2195 border-left: 3px solid $link_color;
2196 padding-left: 17px !important;
2198 .textcomplete-item a .forum {
2205 /* The wall-item thread levels */
2206 .wall-item-container.thread_level_3,
2207 .wall-item-container.thread_level_4,
2208 .wall-item-container.thread_level_5,
2209 .wall-item-container.thread_level_6,
2210 .wall-item-container.thread_level_7 {
2220 background-color: rgba(247, 247, 247, $contentbg_transp);
2221 box-shadow: 0 0 3px #dadada;
2222 -webkit-box-shadow: 0 0 3px #dadada;
2223 -moz-box-shadow: 0 0 3px #dadada;
2228 section > .tabbar-wrapper {
2229 /* The tabbar shouldn't' be visible inside
2230 the section element. Only after we have
2231 moved it to the nav through js */
2232 display: none !important;
2234 .tabbar-wrapper__link {
2235 padding-right: 10px;
2245 #tabmenu .search-heading {
2247 text-overflow: ellipsis;
2248 white-space: nowrap;
2260 border-bottom: 0 solid $link_color;
2263 transition: all 0.15s ease;
2268 padding-bottom: 11px;
2272 border-bottom-width: 4px;
2274 .tabbar.visible-xs .tabs-extended {
2277 #dropdownMenuTools-xs {
2280 ul.tabbar ul.tabs-extended:hover li.dropdown {
2284 ul.tabbar ul.tabs-extended li.active {
2286 border-bottom-width: 2px;
2288 ul.tabbar ul.tabs-extended li.active a {
2291 ul.dropdown-menu li:hover {
2297 box-sizing: border-box;
2300 .dropdown-menu li .btn-link,
2301 .dropdown-menu li a,
2302 .tabs .dropdown-menu li a {
2306 .dropdown-menu li a,
2307 .dropdown-menu li .btn-link {
2308 color: $font_color_darker;
2310 .dropdown-menu li > :hover,
2311 .dropdown-menu li > :visited,
2312 .dropdown-menu li > :focus {
2316 .dropdown-menu li:first-child {
2320 /* Notification badges */
2321 #mail-update-li.show {
2322 display: inline-block !important;
2326 p.wall-item-announce,
2328 .media .shared-time,
2331 .media .location a {
2333 color: $font_color_darker;
2337 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2339 border-left: 3px solid rgba(255, 255, 255, 0);
2342 .media-list > li:hover,
2343 .media-list > li.selected,
2344 .media-list > li.active {
2345 border-left: 3px solid $link_color;
2346 background-color: rgba(247, 247, 247, $contentbg_transp);
2353 .form-control:focus {
2354 border: 2px solid $link_color;
2358 .radio label::before,
2359 .checkbox label::before {
2360 background-color: rgba(255, 255, 255, $contentbg_transp);
2362 .radio label::after {
2363 background-color: $link_color;
2365 .checkbox label::after {
2369 .checkbox input[type="checkbox"]:focus + label::before,
2370 .radio input[type="radio"]:focus + label::before {
2371 outline-color: $link_hover_color;
2375 color: $font_color_darker;
2378 input[type="range"].form-control {
2384 .form-control.form-search {
2385 border-radius: 30px;
2386 background-image: url(img/icon_search16x16.png);
2387 background-repeat: no-repeat;
2388 background-position: 10px 8px;
2391 .form-group-search {
2396 .form-group-search .form-button-search {
2400 border-radius: 30px;
2402 .search-input.form-control.form-search {
2410 .search-content-wrapper > #search-header-wrapper {
2413 .search-content-wrapper > .section-title-wrapper {
2416 #navbar-button > #search-save {
2419 /* Section-Content-Wrapper */
2420 #search-header-wrapper {
2422 padding-bottom: 20px;
2423 margin-bottom: 20px;
2425 background-color: rgba(255, 255, 255, $contentbg_transp);
2428 color: $font_color_darker;
2429 box-shadow: 0 0 3px #dadada;
2430 -webkit-box-shadow: 0 0 3px #dadada;
2431 -moz-box-shadow: 0 0 3px #dadada;
2438 section > .generic-page-wrapper,
2439 .videos-content-wrapper,
2440 .suggest-content-wrapper,
2441 .help-content-wrapper,
2442 .match-content-wrapper,
2443 .dirfind-content-wrapper,
2444 .delegation-content-wrapper,
2445 .notes-content-wrapper,
2446 .message-content-wrapper,
2447 .apps-content-wrapper,
2449 .delegate-content-wrapper,
2450 .uexport-content-wrapper,
2451 .dfrn_request-content-wrapper,
2452 .friendica-content-wrapper,
2453 .credits-content-wrapper,
2454 .nogroup-content-wrapper,
2455 .profperm-content-wrapper,
2456 .invite-content-wrapper,
2457 .tos-content-wrapper,
2458 .fsuggest-content-wrapper {
2459 min-height: calc(100vh - 150px);
2461 padding-bottom: 20px;
2462 margin-bottom: 20px;
2464 background-color: rgba(255, 255, 255, $contentbg_transp);
2467 color: $font_color_darker;
2468 box-shadow: 0 0 3px #dadada;
2469 -webkit-box-shadow: 0 0 3px #dadada;
2470 -moz-box-shadow: 0 0 3px #dadada;
2472 #content:hover .page-action.faded-icon {
2474 transition: all 0.25s ease-in-out;
2476 #content .page-action.faded-icon:hover {
2480 .section-title-wrapper {
2483 /* Home and Login Page */
2484 body.mod-home nav.navbar .nav > li > a:hover {
2485 background-color: rgba(255, 255, 255, 0.2);
2487 body.mod-home .navbar #nav-login,
2488 body.mod-login .navbar #nav-login {
2492 #profile-content-standard,
2493 #profile-content-advanced {
2498 margin-bottom: 20px;
2500 .contact-block-div.forumlist-profile-advanced {
2505 ul.viewcontact_wrapper {
2507 margin-right: -15px;
2509 ul.viewcontact_wrapper > li {
2512 .contact-wrapper .contact-photo-wrapper button {
2515 .contact-wrapper.media {
2517 word-wrap: break-word;
2520 /* bootstrap hack for .media */
2521 .contact-wrapper.media .media-body {
2522 display: table-cell;
2527 .contact-wrapper.media:before,
2532 .contact-wrapper.media:after {
2535 .contact-wrapper .contact-photo-image-wrapper img.contact-photo.xl {
2539 .contact-wrapper .contact-photo-image-wrapper img.contact-photo-xs {
2543 .contact-wrapper .contact-photo-overlay-content.xl {
2546 .contact-wrapper .contact-photo-menu {
2550 .contact-entry-desc {
2551 color: $font_color_darker;
2553 .contact-entry-checkbox {
2556 .contact-wrapper .media-body .contact-entry-name h4.media-heading a {
2557 font-weight: bold !important;
2559 font-size: 15px !important;
2561 .contact-wrapper .contact-actions {
2564 margin: -8px -8px 0 0;
2566 .contact-wrapper .contact-action-link,
2567 .contact-wrapper .contact-action-link:hover,
2568 .textcomplete-item .contact-wrapper .contact-action-link {
2569 color: $font_color_darker;
2572 .contact-wrapper .contact-action-link {
2573 background-color: transparent;
2575 transition: all 0.25s ease-in-out;
2577 ul li:hover .contact-wrapper .contact-action-link:hover {
2580 #contacts-search-wrapper,
2581 #directory-search-wrapper {
2586 #contact-edit-actions {
2589 #contact-edit-status-wrapper {
2591 background-color: rgba(225, 245, 254, $contentbg_transp);
2594 #contact-edit-settings {
2598 /* directory page */
2599 #directory-search-heading {
2603 /* group edit page */
2606 margin-bottom: 10px;
2609 .group-actions button,
2614 .contact-group-actions .fa-times-circle {
2617 .contact-group-actions .fa-plus-circle {
2621 #group-edit-wrapper {
2625 #group-edit-header {
2628 #group-update-wrapper .contact-photo-overlay {
2631 #group-update-wrapper .viewcontact_wrapper .contact-group-actions {
2634 flex-direction: column;
2635 justify-content: center;
2637 #group-update-wrapper .viewcontact_wrapper .contact-group-link {
2641 #group-update-wrapper .viewcontact_wrapper .contact-action-link:hover {
2644 #group-update-wrapper .shortmode {
2648 #group-update-wrapper .shortmode .contact-photo {
2652 #group-update-wrapper .shortmode .media {
2655 #group-update-wrapper .shortmode .contact-entry-desc {
2656 font-size: 12px !important;
2658 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading {
2661 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading a {
2662 font-size: 13px !important;
2663 white-space: nowrap;
2665 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-rel,
2666 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-network {
2671 .message-content-wrapper > li {
2672 /* we need this overwriting because we have no template file
2673 for the general mail page /message
2675 list-style-type: none;
2678 max-height: calc(100vh - 200px);
2680 #mail-conversation {
2682 max-height: calc(100vh - 400px);
2687 .mail-conv-wrapper .media .contact-photo-wrapper img {
2691 .mail-thread #prvmail-to-label,
2692 .mail-thread #prvmail-subject-label {
2695 .mail-thread #prvmail-message-label > label {
2698 .mail-thread #prvmail-message-label textarea {
2701 .mail-conv-wrapper {
2703 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2706 height: calc(100vh - 150px);
2709 height: calc(100% - 20px);
2711 #message-preview ul {
2714 #message-preview .media-list li {
2718 #message-preview .media-list li:hover {
2719 border-left: none !important;
2721 #message-preview .media-list li a {
2724 .mail-list-outside-wrapper {
2726 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2728 .mail-list-outside-wrapper .contact-photo-wrapper img {
2735 #modal #prvmail-text-edit-bb .bb-img {
2740 #photo-album-edit-name-label {
2743 .photo-album-edit-name {
2747 .photo-album-actions {
2748 margin-bottom: 10px;
2750 .photo-album-actions .photos-order-link {
2755 .fc .fc-month-view .fc-content .fc-title .item-desc:hover {
2756 color: $link_hover_color;
2758 .fc .fc-list-item-title a {
2761 .fc .fc-list-item-title a[href]:hover {
2762 color: $link_hover_color;
2763 text-decoration: none;
2765 .event-wrapper .event-owner {
2766 margin-bottom: 15px;
2768 .event-wrapper .event-owner img {
2777 .event-wrapper .vevent {
2780 box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
2782 .event-wrapper .event-buttons {
2785 #event-form-wrapper {
2788 #event-edit-form-wrapper {
2792 color: $font_color_darker;
2794 #event-edit-form-wrapper #event-edit-time {
2797 .event-buttons .plink-event-link {
2800 .vevent .event-summary {
2803 .vevent .event-description {
2806 .vevent .event-location .location {
2810 .modal-body .vevent .event-summary {
2813 #event-preview .vevent .event-summary {
2818 .event-card-details,
2819 .event-card-header {
2823 .event-card-left-date {
2826 .vevent .event-card-header {
2829 .event-card-left-date {
2830 width: 60px; /* Das muss wahrscheinlich unterschiedlich sein zwischen calendar und stream */
2832 .event-card .event-date-wrapper > span {
2836 white-space: nowrap;
2838 .event-card .event-date-wrapper .event-card-short-month {
2840 text-transform: uppercase;
2842 .event-card .event-date-wrapper.medium .event-card-short-date {
2847 .event-card .event-card-content {
2849 padding: 0 5px 0 15px;
2850 box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
2854 .event-card .event-card-content .event-map-btn {
2860 .event-card .event-card-title {
2862 color: $font_color_darker;
2867 .event-card .event-card-location {
2871 .event-card .event-card-location br {
2874 .event-card .event-card-location br::after {
2877 .event-card-profile-name a {
2880 .event-card-profile-name a:hover {
2881 color: $link_hover_color;
2883 .event-card .event-card-content .event-location-map {
2888 .event-card .event-card-content .event-location-map .map {
2891 .event-card .description {
2893 box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, 0.1) inset;
2906 transform: translateZ(0);
2907 transition: opacity 0.2s;
2912 text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
2914 .photo-next-link > i,
2915 .photo-prev-link > i {
2916 vertical-align: super;
2918 .photo-next-link > i {
2927 #photo-photo:hover .photo-next-link,
2928 #photo-photo:hover .photo-prev-link {
2931 #photo-photo .photo-next-link:hover,
2932 #photo-photo .photo-prev-link:hover {
2936 .photo-comment-wrapper .comment {
2939 .photo-comment-wrapper .wall-item-content {
2940 color: $font_color_darker;
2943 .photo-comment-wrapper .comment-wwedit-wrapper,
2944 .photo-comment-wrapper .wall-item-outside-wrapper.media:first-child {
2949 .profile-listing-table {
2953 .profile-listing-row {
2956 .profile-listing-cell {
2957 display: table-cell;
2959 .profile-listing-photo {
2964 #profile-listing-new-link-wrapper {
2965 margin-bottom: 20px;
2968 #profile-photo-upload-section {
2972 #profile-photo-upload-close {
2977 .section-subtitle-wrapper {
2984 details.profile-jot-net[open] summary:before,
2985 .panel .section-subtitle-wrapper .accordion-toggle:before {
2986 font-family: ForkAwesome;
2990 details.profile-jot-net summary:before,
2991 .panel .section-subtitle-wrapper .accordion-toggle.collapsed:before {
2992 font-family: ForkAwesome;
2995 details.profile-jot-net summary:before {
2999 details.profile-jot-net[open] summary:before {
3003 #settings-nick-wrapper {
3004 margin-bottom: 20px;
3010 /* Emulates Bootstrap display */
3013 background-color: rgba(255, 255, 255, $contentbg_transp);
3016 box-shadow: 0 0 3px #dadada;
3017 -webkit-box-shadow: 0 0 3px #dadada;
3018 -moz-box-shadow: 0 0 3px #dadada;
3021 .settings-block.fakelink,
3022 .settings-block > .fakelink {
3026 .settings-block > .fakelink {
3027 margin: -10px -15px 10px -15px;
3028 border-radius: 4px 4px 0 0;
3031 .settings-block.fakelink:hover,
3032 .settings-block > .fakelink:hover {
3033 color: $link_hover_color;
3035 .settings-block.fakelink > h3,
3036 .settings-block > .fakelink > h3 {
3043 .section-subtitle-wrapper > h2 {
3046 margin-bottom: 10px;
3048 .section-subtitle-wrapper > h2 .accordion-toggle {
3050 margin-bottom: -10px;
3052 padding-bottom: 10px;
3055 .section-subtitle-wrapper > h3 {
3061 .fakelink > h3:before {
3062 padding-right: 10px;
3064 .widget.fakelink > h3:before {
3065 font-family: ForkAwesome;
3066 content: "\f0da"; /* Right Plain Pointer */
3068 .widget > .fakelink > h3:before,
3069 #sidebar-group-header > .fakelink > h3:before {
3070 font-family: ForkAwesome;
3071 content: "\f0d7"; /* Bottom Plain Pointer */
3078 /* Intro Notifications */
3079 ul.notif-network-list {
3081 margin-right: -15px;
3083 ul.notif-network-list > li {
3085 padding-right: 15px;
3087 .intro-wrapper.media {
3089 word-wrap: break-word;
3092 .intro-photo-wrapper img.intro-photo {
3100 .intro-enty-name h4 {
3101 font-size: 15px !important;
3103 .intro-wrapper button.intro-action-link {
3105 transition: all 0.25s ease-in-out;
3107 .intro-wrapper button.intro-action-link,
3108 .intro-wrapper button.intro-action-link:hover {
3111 color: $font_color_darker;
3113 ul li:hover .intro-wrapper button.intro-action-link {
3115 transition: all 0.25s ease-in-out;
3117 ul li:hover .intro-wrapper button.intro-action-link:hover {
3120 .intro-action-buttons {
3124 transition: max-height 0.1s ease-out;
3126 ul.notif-network-list > li:hover .intro-action-buttons {
3128 transition: max-height 0.1s ease-in;
3132 .intro-network-label,
3133 .intro-location-label,
3134 .intro-keywords-label,
3136 .intro-knowyou-label,
3137 .intro-madeby-label {
3140 .intro-contact-info.xs .intro-url-label,
3141 .intro-contact-info.xs .intro-network-label,
3142 .intro-contact-info.xs .intro-location-label,
3143 .intro-contact-info.xs .intro-keywords-label,
3144 .intro-contact-info.xs .intro-about-label,
3145 .intro-contact-info.xs .intro-knowyou-label {
3150 /* Notifications Page */
3151 ul.notif-network-list li.unseen {
3152 background-color: #e3eff3;
3154 .notif-item img.notif-image {
3159 .notif-item .notif-desc-wrapper {
3162 .notif-item .notif-desc-wrapper a {
3165 color: $font_color_darker;
3172 /* This is a little bit hacky. Since the search page is used for different
3173 content types we can't apply the generic-page-wrapper class.
3174 So we apply the css of the generic-page-wrapper class to the ul element with some
3175 little modifications to emulate a standard page template */
3176 .search-content-wrapper > ul.viewcontact_wrapper {
3177 min-height: calc(100vh - 150px);
3179 padding-bottom: 20px;
3181 margin-bottom: 20px;
3183 background-color: rgba(255, 255, 255, $contentbg_transp);
3186 color: $font_color_darker;
3187 box-shadow: 0 0 3px #dadada;
3188 -webkit-box-shadow: 0 0 3px #dadada;
3189 -moz-box-shadow: 0 0 3px #dadada;
3193 section.help-content-wrapper h1 {
3194 padding-bottom: 0.3em;
3196 border-bottom: 1px solid #ddd;
3198 section.help-content-wrapper h2 {
3199 padding-bottom: 0.3em;
3201 border-bottom: 1px solid #ddd;
3203 section.help-content-wrapper h3 {
3206 section.help-content-wrapper h4 {
3209 section.help-content-wrapper h1,
3210 section.help-content-wrapper h2,
3211 section.help-content-wrapper h3,
3212 section.help-content-wrapper h4,
3213 section.help-content-wrapper h5,
3214 section.help-content-wrapper h6 {
3216 margin-bottom: 16px;
3220 section.help-content-wrapper p {
3223 section.help-content-wrapper p,
3224 section.help-content-wrapper a,
3225 section.help-content-wrapper li {
3231 #adminpage #frio_background_image .image-select {
3234 #adminpage #frio_background_image.input-group {
3237 #admin-summary-wrapper {
3240 #adminpage ul#addonslist,
3244 #adminpage li .icon {
3245 display: inline-block;
3246 vertical-align: text-top;
3250 #adminpage li .icon:before {
3252 display: inline-block;
3259 border: 1px solid #cccccc;
3261 background-color: $background_color;
3262 -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3263 -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3264 transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3266 #adminpage li .icon.on:after {
3267 font-family: "ForkAwesome";
3269 display: inline-block;
3282 #adminpage .addon .desc {
3285 #admin-users #users tr.blocked {
3286 background-color: #f8efc0;
3288 .adminpage .table-hover > tbody > tr:hover + tr.details {
3289 background-color: #f5f5f5;
3291 .offset-anchor::before {
3297 pointer-events: none;
3305 #identity-selector-wrapper {
3310 #identity-selector-wrapper .identity-match-photo {
3314 #identity-selector-wrapper .identity-match-photo button {
3317 #identity-selector-wrapper .identity-match-photo .badge {
3322 #identity-selector-wrapper .identity-match-name {
3325 #identity-selector-wrapper .identity-match-details {
3331 #register-openid-wrapper,
3332 #register-name-wrapper,
3333 #register-invite-wrapper,
3334 #profile-publish-wrapper {
3337 #register-openid-end,
3338 #register-nickname-end {
3343 * Overwriting for transparency and other colors
3345 main .nav-tabs > li.active > a,
3346 main .nav-tabs > li.active > a:focus,
3347 main .nav-tabs > li.active > a:hover {
3348 background-color: rgba(255, 255, 255, $contentbg_transp);
3358 @media (min-width: 768px) {
3365 * Framework overwrite
3368 /* textcomplete for contact filtering*/
3369 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list {
3370 position: relative !important;
3371 top: inherit !important;
3372 bottom: inherit !important;
3373 left: inherit !important;
3376 margin-right: -15px;
3377 background-color: transparent;
3381 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li {
3383 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
3385 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li:first-child {
3388 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list .textcomplete-item > a {
3389 padding: 0 !important;
3391 background-color: transparent !important;
3393 /* this is a little hack for texcomplete contact filter
3394 There are for some reasons empty <a> tags. I don't know why */
3395 .textcomplete-item .contact-wrapper a {
3400 body .tread-wrapper .hovercard a,
3401 body .tread-wrapper .hovercard a:hover {
3404 body .tread-wrapper .hovercard:hover .hover-card-content a {
3405 color: $link_color !important;
3408 /* Pagination improvements */
3413 .pagination > li > a,
3414 .pagination > li > span {
3418 .pagination > li > a:hover,
3419 .pagination > li > span:hover {
3420 color: $link_hover_color;
3422 .pagination > .active > a,
3423 .pagination > .active > a:focus,
3424 .pagination > .active > a:hover,
3425 .pagination > .active > span,
3426 .pagination > .active > span:focus,
3427 .pagination > .active > span:hover {
3428 background-color: $link_color;
3429 border-color: $link_color;
3432 .pagination li.pager_n a {
3436 .pagination .pager_prev a {
3439 border-top-right-radius: 3px;
3440 border-bottom-right-radius: 3px;
3442 .pagination .pager_next a {
3445 border-top-left-radius: 3px;
3446 border-bottom-left-radius: 3px;
3449 .pager .previous > a {
3453 .pagination .disabled > a,
3454 .pager .disabled > a {
3460 background-color: rgba(255, 255, 255, $contentbg_transp);
3464 * some temporary workarounds until this will solved
3465 * elsewhere (e.g. new templates)
3467 section .profile-match-wrapper {
3474 #login-submit-wrapper {
3477 #lost-password-link {
3480 #login-lost-password-link {
3481 margin-bottom: 10px;
3487 #id_password_wrapper {
3488 margin-bottom: unset;
3495 background: #8ad0a1;
3502 .mod-home.is-not-singleuser,
3504 background-color: $login_bg_color;
3505 background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4)), url($login_bg_image);
3506 background-size: cover;
3507 background-attachment: fixed;
3508 background-position: center;
3511 .mod-home.is-not-singleuser nav.navbar,
3512 .mod-login nav.navbar {
3513 background-color: transparent;
3516 .mod-home.is-not-singleuser #topbar-second,
3517 .mod-login #topbar-second {
3518 background-color: transparent;
3522 .mod-home.is-not-singleuser .login-content,
3523 .mod-login .login-content {
3528 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3532 .mod-home.is-not-singleuser .login-form > #login-form label,
3533 .mod-login #content #login-form label {
3537 .mod-home.is-not-singleuser .login-panel-content,
3538 .mod-login .login-panel-content {
3539 background-color: rgba(255, 255, 255, 0.85);
3543 background: $nav_bg !important;
3544 color: $btn_primary_color !important;
3547 -webkit-box-shadow: none;
3549 -moz-box-shadow: none;
3550 background-image: none;
3558 width: 100% !important;
3561 .qq-upload-drop-area {
3562 background: white !important;
3565 -webkit-box-shadow: none;
3567 -moz-box-shadow: none;
3568 background-image: none;
3576 width: 100% !important;
3577 display: block !important;
3578 position: relative !important;
3579 border: black 1px dashed !important;
3580 margin-bottom: 5px !important;
3581 margin-top: 15px !important;
3585 * The different views of js fullcalendar
3589 margin-bottom: 10px;
3593 #event-calendar-title {
3594 display: inline-block;
3603 #fc-header-right .dropdown > button {
3606 #event-calendar-title {
3607 vertical-align: middle;
3609 #event-calendar-views {
3616 .fc .fc-month-view td.fc-widget-content,
3618 .fc .fc-list-view .fc-list-table td,
3622 .fc td.fc-widget-header,
3623 .fc th.fc-widget-header {
3628 .fc .fc-month-view td.fc-day {
3631 border-bottom: 1px solid;
3634 .fc .fc-day-grid-container .fc-row {
3635 border-bottom: 1px solid;
3638 .fc tr td.fc-today {
3641 .fc .fc-month-view .fc-content .fc-title .item-desc {
3644 .fc .fc-view-container {
3647 .fc .fc-list-view td {
3650 #events-calendar.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
3655 background-color: #e3f2fd;
3656 border: 1px solid #bbdefb;
3657 color: $font_color_darker;
3659 .fc .fc-month-view .fc-time,
3660 .fc .fc-listMonth-view .fc-list-item-time,
3661 .fc .fc-listMonth-view .fc-list-item-marker,
3662 .fc .fc-listMonth-view .fc-widget-header {
3665 .fc .fc-listMonth-view .fc-list-item:hover td {
3666 background: transparent;
3669 .fc .fc-listMonth-view .separator {
3680 .event-card .event-label,
3681 .event-card .location-label {
3684 .popover.event-card .event-card-basic-content {
3689 .event-card .event-hover-location .location {
3695 .generic-page-wrapper.contact-follow-wrapper {
3699 /* Medium devices (desktops, 992px and up) */
3700 @media (min-width: 992px) {
3701 .mod-home.is-not-singleuser #content,
3702 .mod-login #content {
3703 margin-top: 100px !important;
3706 .mod-home.is-not-singleuser .login-form > #login-form,
3707 .mod-home.is-not-singleuser .login-form > #login-extra-links,
3708 .mod-login #content #login-form {
3709 background-color: #fff;
3713 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3715 background-color: white;
3718 .mod-home.is-not-singleuser .login-form > #login-form label,
3719 .mod-login #content #login-form label {
3723 .mod-home.is-not-singleuser .login-form::before,
3724 .mod-login #content #login-form::before {
3728 background-color: rgba(255, 255, 255, 0.1);
3736 .mod-home.is-not-singleuser .login-form::after,
3737 .mod-login #content #login-form::after {
3741 background-color: rgba(255, 255, 255, 0.2);
3750 /* Mobile display */
3751 @media (max-width: 600px) {
3759 #friendica-logo-mask {
3773 .panel .panel-body {
3777 .toplevel_item > .wall-item-container {
3785 .wall-item-actions {
3793 .generic-page-wrapper,
3794 .videos-content-wrapper,
3795 .suggest-content-wrapper,
3796 .help-content-wrapper,
3797 .match-content-wrapper,
3798 .dirfind-content-wrapper,
3799 .directory-content-wrapper,
3800 .delegation-content-wrapper,
3801 .notes-content-wrapper,
3802 .message-content-wrapper,
3803 .apps-content-wrapper,
3805 .delegate-content-wrapper,
3806 .uexport-content-wrapper,
3807 .dfrn_request-content-wrapper,
3808 .friendica-content-wrapper,
3809 .credits-content-wrapper,
3810 .nogroup-content-wrapper,
3811 .profperm-content-wrapper,
3812 .invite-content-wrapper,
3813 .tos-content-wrapper,
3814 .fsuggest-content-wrapper {
3874 .wwto .contact-photo {
3882 Prevent automatic zoom on input focus on iOS
3883 see https://stackoverflow.com/a/16255670
3889 .wall-item-container.thread_level_3,
3890 .wall-item-container.thread_level_4,
3891 .wall-item-container.thread_level_5,
3892 .wall-item-container.thread_level_6,
3893 .wall-item-container.thread_level_7 {