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;
223 outline-color: $link_hover_color;
246 background-color: #ae0f0f;
251 color: $btn_primary_color;
253 .btn.btn-primary:hover,
254 .btn.btn-primary:focus {
255 color: $btn_primary_color;
256 background: $btn_primary_hover_color;
257 text-decoration: none;
259 .btn.btn-primary:active,
260 .btn.btn-primary.active {
261 background: $btn_primary_hover_color;
264 .btn-primary.active.focus,
265 .btn-primary.active:focus,
266 .btn-primary.active:hover,
267 .btn-primary:active.focus,
268 .btn-primary:active:focus,
269 .btn-primary:active:hover,
270 .open > .dropdown-toggle.btn-primary.focus,
271 .open > .dropdown-toggle.btn-primary:focus,
272 .open > .dropdown-toggle.btn-primary:hover,
275 .open > .dropdown-toggle.btn-primary {
276 background: $btn_primary_hover_color;
289 background: transparent;
296 background-color: transparent;
300 border-left: 1px solid #777;
304 border: 1px solid transparent;
313 .toggle .toggle-off:hover {
315 background-color: #eee;
318 .toggle.off .toggle-handle {
319 background-color: #eee;
322 background-color: #fff;
324 border: 1px solid transparent;
328 .input-group-sm > .form-control,
329 .input-group-sm > .input-group-addon,
330 .input-group-sm > .input-group-btn > .btn {
331 padding: 0.275rem 0.75rem;
334 border-radius: 0.2rem;
336 /* Bootstrap media class fix/hack
337 * This is a test. I thought it does have some
338 * issues in some corner cases. Maybe we remove
340 * https://github.com/twbs/bootstrap/issues/6053
363 vertical-align: baseline;
364 background-color: $link_color;
371 .group-widget-entry .badge,
372 .sidebar-circle-li .badge {
376 /* disabled elements */
377 .community-content-wrapper > h3,
378 .network-content-wrapper > .section-title-wrapper {
382 header #site-location {
393 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
395 font-family: tahoma, "Lucida Sans", sans;
401 header #banner #logo-img,
402 .navbar-brand #logo-img {
403 -webkit-mask-image: url("img/friendica-25.png");
404 background-color: $nav_icon_color;
411 #navbrand-container {
414 #navbrand-container #navbar-brand-text {
416 color: $nav_icon_color;
419 /* offcanvas section */
421 /* Right offcanvas uses: #offcanvasUsermenu, .offcanvas-right-active
422 .offcanvas-right and .offcanvas-right-overlay */
431 background-color: #333;
432 transform: translateX(-100%);
433 transition: 0.4s ease-in-out;
444 background-color: #333;
445 transform: translateX(100%);
446 transition: 0.4s ease-in-out;
449 .offcanvas-active .off-canvas {
450 transform: translateX(0);
452 .offcanvas-right-active #offcanvasUsermenu {
453 transform: translateX(0);
456 transition: 0.4s ease-in-out;
461 transition: 0.4s ease-in-out;
463 .offcanvas-active .page-wrapper,
464 .offcanvas-active .navbar-fixed-top {
465 transform: translateX(300px);
474 background-color: rgba(0, 0, 0, 0.5);
478 transition: 0.4s ease-in-out;
480 .offcanvas-right-overlay {
486 background-color: rgba(0, 0, 0, 0.5);
490 transition: 0.4s ease-in-out;
492 .offcanvas-active .offcanvas-overlay,
493 .offcanvas-right-active .offcanvas-right-overlay {
497 /* offcanvas section ends */
511 .topbar ul.nav > li {
514 @media (min-width: 992px) {
515 .topbar ul.nav > li > a,
516 .topbar ul.nav > li > button {
518 padding-bottom: 15px;
522 @media (max-width: 991px) {
523 .topbar ul.nav > li > a,
524 .topbar ul.nav > li > button {
528 .topbar .dropdown-footer {
531 .topbar .dropdown-header {
538 .topbar .dropdown-header .dropdown-header-link {
543 .topbar .dropdown-header .dropdown-header-link a,
544 .topbar .dropdown-header .dropdown-header-link .btn-link {
545 color: $link_color !important;
549 .topbar .dropdown-header:hover {
554 background-color: $nav_bg;
557 color: $nav_icon_color;
559 @media screen and (max-width: 767px) {
566 #topbar-first .navbar-toggle {
571 #topbar-first .nav > li > a,
572 #topbar-first .nav > li > button,
573 nav.navbar .nav > li > a,
574 nav.navbar .nav > li > button {
575 color: $nav_icon_color;
577 #topbar-first .nav > .open > a,
578 #topbar-first .nav > .open > button {
579 background-color: $nav_bg;
581 #topbar-first .nav > li > a:hover,
582 #topbar-first .nav > li > a:focus,
583 #topbar-first .nav > li > button:not(#main-menu):hover,
584 #topbar-first .nav > li > button:not(#main-menu):focus,
585 nav.navbar .nav > li > a:hover,
586 nav.navbar .nav > li > a:focus,
587 nav.navbar .nav > li > button:hover,
588 nav.navbar .nav > li > button:focus {
589 background-color: $nav_icon_hover_color;
591 #topbar-first .nav > .account {
595 #topbar-first .nav > .account img {
601 #topbar-first .nav > .account .dropdown-toggle {
602 padding: 8px 5px 0px;
606 #topbar-first .nav > .account .dropdown-toggle span {
609 #topbar-first .topbar-brand {
613 #topbar-first .topbar-actions {
617 #topbar-first .topbar-nav {
623 #topbar-first .topbar-nav .nav-segment {
627 #topbar-first .topbar-nav .nav-segment > a {
628 display: inline-block;
629 text-decoration: none;
632 #topbar-first .topbar-nav .nav-segment .nav-notification {
636 background-color: #ff3535;
638 #topbar-first #intro-update {
641 #topbar-first .topbar-nav .arrow:after {
646 border-color: transparent;
653 border-bottom-color: #fff;
656 #topbar-first .topbar-nav .arrow {
661 border-color: transparent;
668 border-bottom-color: rgba(0, 0, 0, 0.15);
672 #topbar-first .topbar-nav .dropdown-menu {
676 #topbar-first .topbar-nav .dropdown-menu ul.media-list {
680 #topbar-first .topbar-nav .dropdown-menu li {
683 #topbar-first .topbar-nav .dropdown-menu li i.approval {
689 #topbar-first .topbar-nav .dropdown-menu li i.accepted {
692 #topbar-first .topbar-nav .dropdown-menu li i.declined {
695 #topbar-first .topbar-nav .dropdown-menu li .media {
698 #topbar-first .topbar-nav .dropdown-menu li .media .img-space {
703 #topbar-first .dropdown-footer {
704 margin: 10px 10px 5px;
706 #topbar-first .caret {
707 border-top-color: #bebebe;
709 #topbar-first .btn-group > a {
710 background-color: #7f9baa;
712 #topbar-first .btn-enter {
713 background-color: #7f9baa;
716 #topbar-first .btn-enter:hover {
717 background-color: #89a2b0;
719 .navbar-fixed-top ul.nav.navbar-nav.navbar-right {
723 #friendica-logo-mask {
727 /* Notification Menu */
728 #topbar-first #nav-notifications-menu {
731 #topbar-first #nav-notifications-menu a {
732 color: $font_color_darker;
735 #topbar-first #nav-notifications-menu li.notif-entry {
736 color: $font_color_darker;
738 border-bottom: 1px solid #eee;
740 border-left: 3px solid #fff;
744 #topbar-first #nav-notifications-menu li.notification-unseen {
745 border-left: 3px solid #e3eff3;
746 background-color: #e3eff3;
748 #topbar-first #nav-notifications-menu li.notif-entry:hover {
749 background-color: #f7f7f7;
750 border-left: 3px solid $link_color;
752 #topbar-first #nav-notifications-menu li.placeholder {
755 #topbar-first #nav-notifications-menu .media .media-body .contactname {
758 #topbar-first #nav-notifications-menu .media .media-body .label {
759 padding: 0.1em 0.5em;
761 #topbar-first #nav-notifications-menu li.notif-entry .media-object a img {
766 /* The Top Nav Bar user menu */
767 #topbar-first .account .user-title {
771 #topbar-first .account .user-title span {
772 color: $nav_icon_color;
774 #topbar-first .account #main-menu .nav-notification {
778 background-color: #ff8989;
782 background-color: $background_color;
786 border-left-color: $nav_icon_color;
787 box-shadow: -3px 0 3px -3px black;
789 #offcanvasUsermenu .nav-container {
790 /* required to compensate for moving the container below the topnav bar */
793 #offcanvasUsermenu li.divider {
794 background-color: transparent;
798 #offcanvasUsermenu ul,
799 #offcanvasUsermenu ul li:first-child,
800 #offcanvasUsermenu ul,
801 #offcanvasUsermenu ul li:last-child {
804 #offcanvasUsermenu li,
805 #offcanvasUsermenu a {
806 background-color: $nav_bg;
807 color: $nav_icon_color;
810 #offcanvasUsermenu li.list-group-item {
811 border-color: $background_color;
813 #offcanvasUsermenu a {
818 #offcanvasUsermenu li.nav-sitename {
821 #topbar-first .dropdown.account li#nav-sitename {
825 word-break: break-word;
827 #topbar-first .dropdown.account li#nav-sitename:hover {
829 background-color: $nav_bg;
833 max-height: calc(100vh - 55px);
836 #topbar-first #search-box .navbar-form {
847 background-color: $background_color;
849 /* fix bootstrap .well class not playing well with data-target slide animation */
855 #search-mobile .navbar-form {
858 #topbar-first #search-box .form-search {
861 background-position: 8px 4px;
863 #topbar-first #search-box .btn {
872 background-color: #fff;
874 background-image: none;
875 -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
876 -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
877 box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
878 border-bottom: 1px solid #d4d4d4;
880 #topbar-second > .container {
883 @media screen and (max-width: 767px) {
884 #topbar-second > .container,
885 #topbar-second #navbar-button {
889 #topbar-second .dropdown-menu {
893 #topbar-second .dropdown-menu .divider {
896 #topbar-second #space-menu-dropdown,
897 #topbar-second #search-menu-dropdown {
900 #topbar-second #space-menu-dropdown .media-list,
901 #topbar-second #search-menu-dropdown .media-list {
909 .intro-wrapper button.intro-action-link {
913 ul li .intro-wrapper button.intro-action-link {
916 @media screen and (max-width: 768px) {
917 #topbar-second #space-menu-dropdown .media-list,
918 #topbar-second #search-menu-dropdown .media-list {
922 #topbar-second #space-menu-dropdown form,
923 #topbar-second #search-menu-dropdown form {
926 #topbar-second #space-menu-dropdown .search-reset,
927 #topbar-second #search-menu-dropdown .search-reset {
936 #topbar-second #space-menu-dropdown li > ul > li > a > .media .media-body p {
942 #topbar-second #nav-short-info .heading {
947 text-overflow: ellipsis;
949 #topbar-second #tabmenu .heading {
951 text-overflow: ellipsis;
958 .nav > li > .btn-link {
963 .nav .open > .btn-link {
964 background-color: #eee;
965 border-color: #337ab7;
967 .nav-pills > li > .btn-link {
970 .nav-pills .dropdown-menu,
971 .nav-tabs .dropdown-menu,
972 .account .dropdown-menu,
973 .contact-photo-wrapper .dropdown-menu {
974 background-color: $nav_bg;
977 .dropdown-menu .divider {
980 .nav-pills .dropdown-menu li.divider,
981 .nav-tabs .dropdown-menu li.divider,
982 .account .dropdown-menu li.divider,
983 .contact-photo-wrapper .dropdown-menu li.divider {
984 background-color: $menu_background_hover_color;
987 .nav-pills .dropdown-menu li > a,
988 .nav-tabs .dropdown-menu li > a,
989 .account .dropdown-menu li > a,
990 .contact-photo-wrapper .dropdown-menu li > a {
991 border-left: 3px solid $nav_bg;
993 .nav-pills .dropdown-menu li a,
994 .nav-pills .dropdown-menu li .btn-link,
995 .nav-tabs .dropdown-menu li a,
996 .nav-tabs .dropdown-menu li .btn-link,
997 .account .dropdown-menu li a,
998 .account .dropdown-menu li .btn-link,
999 .contact-photo-wrapper .dropdown-menu li a,
1000 .contact-photo-wrapper .dropdown-menu li .btn-link {
1001 color: $nav_icon_color;
1006 .nav-pills .dropdown-menu li a i,
1007 .nav-pills .dropdown-menu li .btn-link i,
1008 .nav-tabs .dropdown-menu li a i,
1009 .nav-tabs .dropdown-menu li .btn-link i,
1010 .account .dropdown-menu li a i,
1011 .account .dropdown-menu li .btn-link i,
1012 .contact-photo-wrapper .dropdown-menu li a i,
1013 .contact-photo-wrapper .dropdown-menu li .btn-link i {
1016 display: inline-block;
1019 .nav-pills .dropdown-menu li > a:hover,
1020 .nav-tabs .dropdown-menu li > a:hover,
1021 .account .dropdown-menu li > a:hover,
1022 .contact-photo-wrapper .dropdown-menu li > a:hover,
1023 .nav-pills .dropdown-menu li.selected a,
1024 .nav-tabs .dropdown-menu li.selected a,
1025 .account .dropdown-menu li.selected a,
1026 .contact-photo-wrapper .dropdown-menu li.selected a {
1027 border-left: 3px solid $link_color;
1029 background: $menu_background_hover_color;
1031 #photo-edit-link-wrap {
1032 color: $font_color_darker;
1033 margin-bottom: 15px;
1036 #newmember-tab > a {
1047 .nav-container .widget {
1050 background-color: rgba(255, 255, 255, $contentbg_transp);
1051 box-shadow: 0 0 3px #dadada;
1052 -webkit-box-shadow: 0 0 3px #dadada;
1053 -moz-box-shadow: 0 0 3px #dadada;
1056 margin-bottom: 20px;
1061 .nav-container .widget h3 {
1065 padding-bottom: 10px;
1069 .nav-container .widget ul {
1074 margin-right: -10px;
1078 aside .widget li .label {
1082 .nav-container .widget li {
1084 padding-right: 10px;
1086 aside .widget li:hover,
1087 aside .widget li.selected,
1088 .nav-container .widget li:hover {
1090 color: $font_color_darker;
1091 background-color: rgba(247, 247, 247, $contentbg_transp);
1092 border-left: 3px solid $link_color !important;
1096 aside .widget li a {
1099 padding-bottom: 6px;
1102 aside .widget li a:hover {
1103 color: $font_color_darker;
1106 /* group-list widget */
1107 aside > #datebrowse-sidebar li.posted-date-selector-months {
1108 margin-bottom: 10px;
1112 aside > #datebrowse-sidebar li.posted-date-selector-months:hover {
1113 border-left: none !important;
1114 background-color: transparent !important;
1116 aside > #datebrowse-sidebar .posted-date-selector-months > ul {
1119 aside > #datebrowse-sidebar .posted-date-selector-months > ul > li {
1122 aside > #datebrowse-sidebar .posted-date-selector-months > ul > li:hover {
1127 -webkit-filter: grayscale(100%);
1128 filter: grayscale(100%);
1130 filter: alpha(opacity=50); /* For IE8 and earlier */
1131 -webkit-transition: all 0.2s ease-in-out;
1132 -moz-transition: all 0.2s ease-in-out;
1133 -o-transition: all 0.2s ease-in-out;
1134 -ms-transition: all 0.2s ease-in-out;
1135 transition: all 0.2s ease-in-out;
1137 #group-list-sidebar-ul li:hover a > .group-list-img {
1138 -webkit-filter: unset;
1143 /* help page widget */
1144 aside > .help-aside-wrapper p strong:first-child {
1148 aside > .help-aside-wrapper h1 {
1152 padding: 20px 0 10px;
1154 aside > .help-aside-wrapper h2 {
1159 /* vcard / h-card */
1160 aside .vcard #profile-photo-wrapper {
1163 aside .vcard img.u-photo,
1164 aside img.vcard-photo {
1168 aside .vcard .tool .action {
1175 background: rgba(0, 0, 0, 0.5);
1179 -webkit-transition: all 0.25s ease-in-out;
1180 -moz-transition: all 0.25s ease-in-out;
1181 -o-transition: all 0.25s ease-in-out;
1182 -ms-transition: all 0.25s ease-in-out;
1183 transition: all 0.25s ease-in-out;
1185 aside .vcard .tool a {
1186 color: rgba(255, 255, 255, 0.85);
1188 aside .vcard #profile-photo-wrapper:hover .tool .action {
1191 aside .vcard #profile-photo-wrapper.crop-preview {
1194 aside .vcard .profile-header {
1195 padding: 5px 0px 20px 0px;
1199 padding: 5px 0px 5px 0px;
1201 aside .vcard .p-addr {
1204 text-overflow: ellipsis;
1205 white-space: nowrap;
1206 padding-bottom: 2px;
1208 aside .vcard .title {
1211 aside .vcard .detail {
1215 aside .xmpp, aside .matrix {
1218 aside .vcard .icon {
1219 display: table-cell;
1220 padding-right: 10px;
1223 #profile-extra-links {
1225 margin-bottom: 10px;
1227 aside .vcard #subscribe-feed-link-button,
1228 aside .vcard #dfrn-request-link-button,
1229 aside .vcard #wallmessage-link-button {
1235 aside .vcard #subscribe-feed-link,
1236 aside .vcard #dfrn-request-link,
1237 aside .vcard #wallmessage-link {
1240 /* vcard-short-info */
1242 #nav-short-info .contact-wrapper {
1245 white-space: nowrap;
1247 padding-right: 20px;
1250 #nav-short-info .contact-photo-wrapper.media-left {
1253 #vcard-short-photo-wrapper img,
1254 #nav-short-info .contact-wrapper img {
1260 #nav-short-info .contact-wrapper .media-body {
1264 text-overflow: ellipsis;
1266 #vcard-short-desc > .media-heading,
1267 #vcard-short-desc > .vcard-short-addr,
1268 #nav-short-info .contact-wrapper .media-heading,
1269 #nav-short-info .contact-wrapper #contact-entry-url-network {
1270 text-overflow: ellipsis;
1273 #vcard-short-desc > .media-heading,
1274 #nav-short-info .contact-wrapper .media-heading {
1278 #nav-short-info .contact-wrapper .media-heading a {
1279 color: $font_color_darker;
1280 font-size: 14px !important;
1282 #vcard-short-desc > .vcard-short-addr,
1283 #nav-short-info .contact-wrapper #contact-entry-url-network {
1287 .network-content-wrapper > .generic-page-wrapper,
1288 #nav-short-info .contact-wrapper .contact-photo-overlay,
1289 #nav-short-info .contact-wrapper .contact-actions {
1293 aside #peoplefind-sidebar input,
1294 aside #follow-sidebar input {
1296 background-position: 10px 5px;
1298 aside #peoplefind-sidebar label,
1299 aside #follow-sidebar label {
1300 font-weight: normal;
1302 aside #peoplefind-sidebar .form-group-search .form-button-search,
1303 aside #follow-sidebar .form-group-search .form-button-search {
1307 div#sidebar-circle-header h3,
1308 div#sidebar-group-header h3 {
1312 div#sidebar-circle-list,
1313 div#sidebar-group-list {
1324 color: $font_color_darker;
1326 .sidebar-widget-header .circle-edit-tool,
1332 color: $font_color_darker;
1334 transition: all 0.1s ease-in-out;
1337 color: $font_color_darker;
1344 aside .widget-action {
1347 aside #circle-sidebar .sidebar-circle-li .circle-edit-tool.faded-icon:hover,
1348 aside #group-sidebar .group-new-tool.faded-icon:hover,
1349 aside #saved-search-list .saved-search-li .savedsearchdrop.faded-icon:hover,
1350 aside .widget.widget-action.faded-icon:hover {
1352 transition: all 0.25s ease-in-out;
1354 aside #circle-sidebar .sidebar-circle-li .circle-edit-tool.faded-icon:hover,
1355 aside #group-sidebar .group-new-tool.faded-icon:hover,
1356 aside #saved-search-list .saved-search-li .savedsearchdrop.faded-icon:hover,
1357 aside .widget .widget-action.faded-icon:hover {
1360 aside #circle-sidebar li .circle-checkbox {
1363 aside #circle-sidebar li .circle-edit-tool {
1364 padding-right: 10px;
1366 aside #circle-sidebar li .circle-edit-tool:first-child {
1370 /* contact block widget */
1371 .contact-block-content {
1376 .contact-block-div {
1378 margin: 0px 5px 5px 0px;
1380 .contact-block-link {
1382 .contact-block-img {
1388 /* Tag cloud widget */
1389 .tagblock.widget > .tag-cloud {
1394 display: none !important;
1408 .modal #jot-sections {
1409 max-height: calc(100vh - 22px);
1411 @media (min-width: 768px) {
1412 .modal #jot-sections {
1413 max-height: calc(100vh - 62px);
1416 #jot-modal #jot-modal-body {
1419 #jot-modal #jot-sections,
1420 #jot-modal #jot-modal-body,
1421 #jot-modal #profile-jot-form,
1422 #jot-modal #profile-jot-wrapper,
1423 #jot-modal #jot-text-wrap,
1424 #jot-modal #jot-preview-content,
1425 #jot-modal #tread-wrapper--1,
1426 #jot-modal #item-Q0,
1427 #jot-modal #profile-jot-acl-wrapper,
1428 #jot-modal #acl-wrapper {
1431 flex-direction: column;
1433 #jot-modal .modal-header a,
1434 #jot-modal .modal-header .btn-link,
1435 #profile-jot-submit-wrapper a,
1436 #profile-jot-submit-wrapper .btn-link {
1437 color: $font_color_darker;
1439 #jot-modal .modal-header {
1440 border-bottom: none;
1442 #jot-modal .modal-header .compose-link {
1447 #jot-category-wrap {
1453 #jot-text-wrap textarea {
1455 overflow-y: auto !important;
1456 overflow-y: overlay !important;
1458 #jot-text-wrap .preview textarea {
1461 #preview_profile-jot-text,
1462 .comment-edit-form .preview {
1466 border: 2px solid #ededed;
1469 border-radius: 0 0 4px 4px;
1471 color: $font_color_darker;
1473 textarea#profile-jot-text:focus + #preview_profile-jot-text,
1474 textarea.comment-edit-text:focus + .comment-edit-form .preview {
1475 border: 2px solid #6fdbe8;
1478 .preview hr.previewseparator {
1480 border-color: #d2d2d2;
1482 #previewImgBtn_profile-jot-text,
1494 .preview button.previewActionBtn {
1500 border: 2px solid #fff;
1501 box-shadow: 0 0 3px gray;
1505 text-decoration: none;
1506 padding: 0 0 1px 1px;
1509 .preview button.previewActionBtn:hover {
1512 .preview .closePreview button.previewActionBtn {
1515 #previewInputTitle_profile-jot-text {
1518 #profile-jot-wrapper button#profile-jot-submit {
1521 #profile-jot-wrapper #character-counter {
1524 .modal .wall-item-container.preview {
1526 overflow-y: overlay;
1530 font-family: ForkAwesome;
1534 font-family: ForkAwesome;
1538 #acl-wrapper label.panel-heading {
1545 .fbrowser .breadcrumb {
1548 .fbrowser .path a:before {
1552 .fbrowser .breadcrumb > li:last-of-type a {
1554 pointer-events: none;
1557 .fbrowser .folders {
1558 box-shadow: -1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
1561 .fbrowser .folders ul {
1567 max-height: calc(100vh - 210px);
1570 @media (min-width: 768px) {
1571 .fbrowser .folders ul {
1572 max-height: calc(100vh - 255px);
1575 .fbrowser .folders li {
1577 padding-right: 10px;
1579 padding-bottom: 3px;
1581 .fbrowser .folders li:hover {
1583 color: $font_color_darker;
1584 background-color: rgba(247, 247, 247, $contentbg_transp);
1585 border-left: 3px solid $link_color;
1588 .fbrowser .folders li a,
1589 .fbrowser .folders li a:hover {
1590 color: $font_color_darker;
1593 .fbrowser .folders + .list {
1596 .fbrowser .fbrowser-content-container {
1598 max-height: calc(100vh - 233px);
1600 @media (min-width: 768px) {
1601 .fbrowser .fbrowser-content-container {
1602 max-height: calc(100vh - 277px);
1605 .fbrowser.photo .photo-album-image-wrapper {
1606 box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.2);
1608 .fbrowser.photo .photo-album-image-wrapper .caption {
1609 pointer-events: none;
1611 .fbrowser.photo .photo-album-image-wrapper .jg-caption {
1612 pointer-events: none;
1614 .fbrowser .profile-rotator-wrapper {
1617 .fbrowser .fa-spin {
1630 background-color: rgba(255, 255, 255, $contentbg_transp);
1631 box-shadow: 0 0 2px #dadada;
1632 -webkit-box-shadow: 0 0 2px #dadada;
1633 -moz-box-shadow: 0 0 2px #dadada;
1637 .panel.panel-inline {
1639 margin-right: -15px;
1643 .panel .panel-body {
1644 word-wrap: break-word;
1646 .tread-wrapper .media {
1648 word-wrap: break-word;
1654 /* Thread hover effects */
1655 .desktop-view .wall-item-container .wall-item-content a,
1656 .desktop-view .wall-item-name,
1657 .desktop-view .wall-item-container .fakelink,
1658 .desktop-view .toplevel_item .fakelink,
1659 .desktop-view .toplevel_item .wall-item-container .wall-item-responses a {
1661 -webkit-transition: all 0.25s ease-in-out;
1662 -moz-transition: all 0.25s ease-in-out;
1663 -o-transition: all 0.25s ease-in-out;
1664 -ms-transition: all 0.25s ease-in-out;
1665 transition: all 0.25s ease-in-out;
1668 .toplevel_item:hover .fakelink,
1669 .wall-item-container:hover .fakelink,
1670 .toplevel_item:hover .wall-item-container:hover .wall-item-responses a,
1671 .toplevel_item:hover .wall-item-content a,
1672 .toplevel_item:hover .wall-item-name,
1673 .wall-item-container:hover .wall-item-content a,
1674 .wall-item-container:hover .wall-item-name,
1675 .wall-item-container:hover .wall-item-location a {
1677 -webkit-transition: all 0.25s ease-in-out;
1678 -moz-transition: all 0.25s ease-in-out;
1679 -o-transition: all 0.25s ease-in-out;
1680 -ms-transition: all 0.25s ease-in-out;
1681 transition: all 0.25s ease-in-out;
1685 .wall-item-container {
1686 border-top: 1px solid rgba(255, 255, 255, 0.8);
1689 .wall-item-container.panel-body {
1694 .comment-edit-preview .wall-item-container.panel-body.preview {
1697 .comment-edit-preview .panel {
1701 .wall-item-container .media {
1704 background-color: rgba(0, 0, 0, 0.03);
1707 /* wall items contact photo */
1712 /*maybe some adional stuff is needed for the different screen sizes */
1714 .contact-photo-image-wrapper {
1721 .contact-photo-overlay {
1729 background: rgba(0, 0, 0, 0.5);
1732 -webkit-transition: opacity 0.25s ease;
1733 -moz-transition: opacity 0.25s ease;
1735 .contact-photo-overlay:hover {
1738 .contact-photo-overlay-content {
1740 text-shadow: 1px 1px 1px #ccc;
1741 color: rgba(255, 255, 255, 0.85);
1743 vertical-align: bottom;
1750 .wwto .contact-photo {
1758 display: inline-block;
1761 /* wall items action dropdown menu */
1762 .media .contact-info {
1766 /* Workaround for Firefox where the post heading covers the avatar, preventing hovercard interaction,
1767 48px is the width of the avatar image and should be adjusted accordingly if it ever changes. */
1768 .media .dropdown.pull-left + .contact-info {
1781 margin-bottom: 10px;
1785 .preferences .plink {
1789 blockquote.shared_content {
1791 margin-inline-start: 0px;
1795 .wall-item-network {
1799 /* wall items contact info */
1800 .media .media-body h4.media-heading {
1803 color: $font_color_darker;
1805 .media .contact-info-comment {
1806 display: table-cell;
1808 .media .contact-info-xs h5,
1809 .media .contact-info-comment {
1820 .wall-item-name.xs {
1825 /* Contact avatar click card */
1826 .userinfo.click-card {
1830 .userinfo.click-card > *:hover:after {
1835 background-color: #ffffff;
1844 border-radius: 0 0 40% 0;
1847 /* The lock symbol popup */
1851 background-color: $nav_bg;
1861 color: $nav_icon_color;
1865 /* Space between content and head */
1870 /* wall items content */
1871 .wall-item-content {
1872 word-break: break-word;
1874 .wall-item-content img {
1875 object-fit: contain;
1877 .wall-item-body > img,
1878 .wall-item-body > a > img {
1881 .wall-item-body .body-attach > a {
1882 color: $font_color_darker;
1883 display: inline-block;
1885 .wall-item-body .body-attach > a div {
1886 color: $font_color_darker;
1890 /* wall-item content elements */
1898 box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.1) inset, 0 1px 1px rgba(0, 0, 0, 0.05);
1900 @media screen and (max-width: 767px) {
1906 margin: 5px -10px 0;
1910 box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.05);
1913 padding: 10px 10px 1px 0;
1918 .type-link img.attachment-image {
1921 .type-link blockquote,
1922 .type-video blockquote {
1926 .oembed.video .embed_video > div::before {
1927 font-family: ForkAwesome;
1928 font-weight: normal;
1930 display: inline-block;
1931 text-decoration: inherit;
1932 vertical-align: top;
1940 .oembed.video .embed_video > div {
1941 background-color: rgba(0, 0, 0, 0.2);
1942 -webkit-transition: all 0.25s ease-in-out;
1943 -moz-transition: all 0.25s ease-in-out;
1944 -o-transition: all 0.25s ease-in-out;
1945 -ms-transition: all 0.25s ease-in-out;
1946 transition: all 0.25s ease-in-out;
1948 .oembed.video .embed_video > div:hover {
1949 background-color: rgba(0, 0, 0, 0);
1951 .oembed.video .embed_video.active {
1954 .oembed.video .embed_video.active iframe {
1955 width: 100% !important;
1962 .wall-item-tags:empty {
1967 color: $font_color_darker;
1970 .wall-item-tags a:hover {
1971 text-decoration: none;
1973 .wall-item-bottom .label,
1974 .wall-item-bottom .label a {
1977 .wall-item-tags .category,
1978 .wall-item-tags .folder {
1982 /* item social action buttons */
1983 .wall-item-actions {
1986 justify-content: space-between;
1988 .wall-item-actions .btn,
1989 .wall-item-actions a,
1990 .wall-item-actions button {
1991 color: $font_color_darker;
1992 background-color: transparent;
1996 .wall-item-actions button:disabled,
1998 color: $font_color_lighter;
2000 .wall-item-actions .active {
2005 .wall-item-actions-left {
2006 display: table-cell;
2007 vertical-align: middle;
2009 .wall-item-actions-right {
2012 .wall-item-actions-items {
2015 .wall-item-actions-row {
2018 .wall-item-actions-row .btn {
2021 .wall-item-actions-row > * {
2024 .wall-item-actions .checkbox {
2027 @media screen and (max-width: 767px) {
2028 .wall-item-actions .btn,
2029 .wall-item-actions a,
2030 .wall-item-actions button {
2034 .wall-item-actions .checkbox {
2038 .wall-item-actions .like-rotator {
2044 .wall-item-actions button:hover {
2045 text-decoration: underline;
2047 .wall-item-actions .separator {
2050 .wall-item-responses {
2053 .wall-item-responses > div > p {
2060 /* wall item hover effects */
2062 @media (min-width: 768px) {
2063 /* Tags and mentions */
2064 .wall-item-container .wall-item-bottom .wall-item-tags span.label {
2065 filter: grayscale(0.5);
2068 -webkit-transition: all 0.25s ease-in-out;
2069 -moz-transition: all 0.25s ease-in-out;
2070 -o-transition: all 0.25s ease-in-out;
2071 -ms-transition: all 0.25s ease-in-out;
2072 transition: all 0.25s ease-in-out;
2075 .wall-item-container:hover .wall-item-bottom .wall-item-tags span.label {
2076 filter: grayscale(0);
2079 -webkit-transition: all 0.25s ease-in-out;
2080 -moz-transition: all 0.25s ease-in-out;
2081 -o-transition: all 0.25s ease-in-out;
2082 -ms-transition: all 0.25s ease-in-out;
2083 transition: all 0.25s ease-in-out;
2085 /* Like/Comment/etc buttons */
2086 .wall-item-container .wall-item-links,
2087 .wall-item-container .wall-item-actions button > a {
2090 -webkit-transition: all 0.25s ease-in-out;
2091 -moz-transition: all 0.25s ease-in-out;
2092 -o-transition: all 0.25s ease-in-out;
2093 -ms-transition: all 0.25s ease-in-out;
2094 transition: all 0.25s ease-in-out;
2096 .wall-item-container:hover .wall-item-links,
2097 .wall-item-container:hover .wall-item-actions button > a {
2100 -webkit-transition: all 0.25s ease-in-out;
2101 -moz-transition: all 0.25s ease-in-out;
2102 -o-transition: all 0.25s ease-in-out;
2103 -ms-transition: all 0.25s ease-in-out;
2104 transition: all 0.25s ease-in-out;
2106 .wall-item-container .wall-item-body .body-attach > a:hover {
2114 wall-item-comment-wrapper.well {
2117 background-color: rgba(237, 237, 237, $contentbg_transp);
2118 background-image: none;
2120 background-color: red;
2122 wall-item-comment-wrapper.well-small {
2126 wall-item-comment-wrapper.well hr {
2127 border-top: 1px solid #d9d9d9;
2129 .wall-entry wall-item-comment-wrapper.well {
2132 .comment-container {
2134 border-top-left-radius: 3px;
2135 border-top-right-radius: 3px;
2136 border-bottom-right-radius: 0px;
2137 border-bottom-left-radius: 0px;
2140 position: relative !important;
2143 .hide-comments-outer {
2145 background-color: rgba(0, 0, 0, 0.03);
2146 padding: 0.3em 10px;
2157 .wall-item-comment-wrapper {
2159 border-top: 1px solid rgba(255, 255, 255, 0.8);
2160 background-color: rgba(0, 0, 0, 0.03);
2161 border-radius: 0 0 4px 4px;
2165 .comment-fake-form {
2166 border-color: #d9d9d9;
2168 .comment-fake-form textarea {
2172 .comment-container .wall-item-comment-wrapper {
2176 .comment-edit-form textarea {
2180 .comment-edit-submit-wrapper {
2185 .comment-icon-list {
2187 justify-content: space-between;
2190 /* acpopup + textcompletion*/
2192 background-color: #ffffff;
2196 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
2201 /** @todo: we should consider the possibility to overwrite bootstrap dropdowns
2202 at the beginning of this file to get rid of the !important */
2203 .textcomplete-item > a {
2204 color: $font_color_darker !important;
2205 padding: 5px 20px !important;
2207 .textcomplete-item.active > a {
2208 background-color: rgb(247, 247, 247) !important;
2209 background-image: none !important;
2210 border-left: 3px solid $link_color;
2211 padding-left: 17px !important;
2213 .textcomplete-item a .group {
2220 /* The wall-item thread levels */
2221 .wall-item-container.thread_level_3,
2222 .wall-item-container.thread_level_4,
2223 .wall-item-container.thread_level_5,
2224 .wall-item-container.thread_level_6,
2225 .wall-item-container.thread_level_7,
2226 .wall-item-container.thread_level_8,
2227 .wall-item-container.thread_level_9 {
2231 /* Birthday and Event Reminders */
2239 background-color: rgba(247, 247, 247, $contentbg_transp);
2240 box-shadow: 0 0 3px #dadada;
2241 -webkit-box-shadow: 0 0 3px #dadada;
2242 -moz-box-shadow: 0 0 3px #dadada;
2247 section > .tabbar-wrapper {
2248 /* The tabbar shouldn't' be visible inside
2249 the section element. Only after we have
2250 moved it to the nav through js */
2251 display: none !important;
2253 .tabbar-wrapper__link {
2254 padding-right: 10px;
2264 #tabmenu .search-heading {
2266 text-overflow: ellipsis;
2267 white-space: nowrap;
2279 border-bottom: 0 solid $link_color;
2282 transition: all 0.15s ease;
2287 padding-bottom: 11px;
2291 border-bottom-width: 4px;
2293 .tabbar.visible-xs .tabs-extended {
2296 #dropdownMenuTools-xs {
2299 ul.tabbar ul.tabs-extended:hover li.dropdown {
2303 ul.tabbar ul.tabs-extended li.active {
2305 border-bottom-width: 2px;
2307 ul.tabbar ul.tabs-extended li.active a {
2310 ul.dropdown-menu li:hover {
2316 box-sizing: border-box;
2319 .dropdown-menu li .btn-link,
2320 .dropdown-menu li a,
2321 .tabs .dropdown-menu li a {
2325 .dropdown-menu li a,
2326 .dropdown-menu li .btn-link {
2327 color: $font_color_darker;
2329 .dropdown-menu li > :hover,
2330 .dropdown-menu li > :visited,
2331 .dropdown-menu li > :focus {
2335 .dropdown-menu li:first-child {
2339 /* Notification badges */
2340 #mail-update-li.show {
2341 display: inline-block !important;
2345 p.wall-item-announce,
2347 .media .shared-time,
2350 .media .location a {
2352 color: $font_color_darker;
2356 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2358 border-left: 3px solid rgba(255, 255, 255, 0);
2361 .media-list > li:hover,
2362 .media-list > li.selected,
2363 .media-list > li.active {
2364 border-left: 3px solid $link_color;
2365 background-color: rgba(247, 247, 247, $contentbg_transp);
2372 .form-control:focus {
2373 border: 2px solid $link_color;
2377 .radio label::before,
2378 .checkbox label::before {
2379 background-color: rgba(255, 255, 255, $contentbg_transp);
2381 .radio label::after {
2382 background-color: $link_color;
2384 .checkbox label::after {
2388 .checkbox input[type="checkbox"]:focus + label::before,
2389 .radio input[type="radio"]:focus + label::before {
2390 outline-color: $link_hover_color;
2394 color: $font_color_darker;
2397 input[type="range"].form-control {
2403 .form-control.form-search {
2404 border-radius: 30px;
2405 background-image: url(img/icon_search16x16.png);
2406 background-repeat: no-repeat;
2407 background-position: 10px 8px;
2410 .form-group-search {
2415 .form-group-search .form-button-search {
2419 border-radius: 30px;
2421 .search-input.form-control.form-search {
2429 .search-content-wrapper > #search-header-wrapper {
2432 .search-content-wrapper > .section-title-wrapper {
2435 #navbar-button > #search-save {
2438 /* Section-Content-Wrapper */
2439 #search-header-wrapper {
2441 padding-bottom: 20px;
2442 margin-bottom: 20px;
2444 background-color: rgba(255, 255, 255, $contentbg_transp);
2447 color: $font_color_darker;
2448 box-shadow: 0 0 3px #dadada;
2449 -webkit-box-shadow: 0 0 3px #dadada;
2450 -moz-box-shadow: 0 0 3px #dadada;
2457 section > .generic-page-wrapper,
2458 .videos-content-wrapper,
2459 .suggest-content-wrapper,
2460 .help-content-wrapper,
2461 .match-content-wrapper,
2462 .dirfind-content-wrapper,
2463 .delegation-content-wrapper,
2464 .notes-content-wrapper,
2465 .message-content-wrapper,
2466 .apps-content-wrapper,
2468 .delegate-content-wrapper,
2469 .uexport-content-wrapper,
2470 .dfrn_request-content-wrapper,
2471 .friendica-content-wrapper,
2472 .credits-content-wrapper,
2473 .nocircle-content-wrapper,
2474 .profperm-content-wrapper,
2475 .invite-content-wrapper,
2476 .tos-content-wrapper,
2477 .fsuggest-content-wrapper {
2478 min-height: calc(100vh - 150px);
2480 padding-bottom: 20px;
2481 margin-bottom: 20px;
2483 background-color: rgba(255, 255, 255, $contentbg_transp);
2486 color: $font_color_darker;
2487 box-shadow: 0 0 3px #dadada;
2488 -webkit-box-shadow: 0 0 3px #dadada;
2489 -moz-box-shadow: 0 0 3px #dadada;
2491 #content:hover .page-action.faded-icon {
2493 transition: all 0.25s ease-in-out;
2495 #content .page-action.faded-icon:hover {
2499 .section-title-wrapper {
2502 /* Home and Login Page */
2503 body.mod-home nav.navbar .nav > li > a:hover {
2504 background-color: rgba(255, 255, 255, 0.2);
2506 body.mod-home .navbar #nav-login,
2507 body.mod-login .navbar #nav-login {
2511 #profile-content-standard,
2512 #profile-content-advanced {
2517 margin-bottom: 20px;
2519 .contact-block-div.group-list-profile-advanced {
2524 ul.viewcontact_wrapper {
2526 margin-right: -15px;
2528 ul.viewcontact_wrapper > li {
2531 .contact-wrapper .contact-photo-wrapper button {
2534 .contact-wrapper.media {
2536 word-wrap: break-word;
2539 /* bootstrap hack for .media */
2540 .contact-wrapper.media .media-body {
2541 display: table-cell;
2546 .contact-wrapper.media:before,
2551 .contact-wrapper.media:after {
2554 .contact-wrapper .contact-photo-image-wrapper img.contact-photo.xl {
2558 .contact-wrapper .contact-photo-image-wrapper img.contact-photo-xs {
2562 .contact-wrapper .contact-photo-overlay-content.xl {
2565 .contact-wrapper .contact-photo-menu {
2569 .contact-entry-desc {
2570 color: $font_color_darker;
2572 .contact-entry-checkbox {
2575 .contact-wrapper .media-body .contact-entry-name h4.media-heading a {
2576 font-weight: bold !important;
2578 font-size: 15px !important;
2580 .contact-wrapper .contact-actions {
2583 margin: -8px -8px 0 0;
2585 .contact-wrapper .contact-action-link,
2586 .contact-wrapper .contact-action-link:hover,
2587 .textcomplete-item .contact-wrapper .contact-action-link {
2588 color: $font_color_darker;
2591 .contact-wrapper .contact-action-link {
2592 background-color: transparent;
2594 transition: all 0.25s ease-in-out;
2596 ul li:hover .contact-wrapper .contact-action-link:hover {
2599 #contacts-search-wrapper,
2600 #directory-search-wrapper {
2605 #contact-edit-actions {
2608 #contact-edit-status-wrapper {
2610 background-color: rgba(225, 245, 254, $contentbg_transp);
2613 #contact-edit-settings {
2617 /* directory page */
2618 #directory-search-heading {
2622 /* circle edit page */
2625 margin-bottom: 10px;
2628 .circle-actions button,
2633 .contact-circle-actions .fa-times-circle {
2636 .contact-circle-actions .fa-plus-circle {
2640 #circle-edit-wrapper {
2644 #circle-edit-header {
2647 #circle-update-wrapper .contact-photo-overlay {
2650 #circle-update-wrapper .viewcontact_wrapper .contact-circle-actions {
2653 flex-direction: column;
2654 justify-content: center;
2656 #circle-update-wrapper .viewcontact_wrapper .contact-circle-link {
2660 #circle-update-wrapper .viewcontact_wrapper .contact-action-link:hover {
2663 #circle-update-wrapper .shortmode {
2667 #circle-update-wrapper .shortmode .contact-photo {
2671 #circle-update-wrapper .shortmode .media {
2674 #circle-update-wrapper .shortmode .contact-entry-desc {
2675 font-size: 12px !important;
2677 #circle-update-wrapper .shortmode .contact-entry-desc h4.media-heading {
2680 #circle-update-wrapper .shortmode .contact-entry-desc h4.media-heading a {
2681 font-size: 13px !important;
2682 white-space: nowrap;
2684 #circle-update-wrapper .shortmode .contact-entry-desc .contact-entry-rel,
2685 #circle-update-wrapper .shortmode .contact-entry-desc .contact-entry-network {
2690 .message-content-wrapper > li {
2691 /* we need this overwriting because we have no template file
2692 for the general mail page /message
2694 list-style-type: none;
2697 max-height: calc(100vh - 200px);
2699 #mail-conversation {
2701 max-height: calc(100vh - 400px);
2706 .mail-conv-wrapper .media .contact-photo-wrapper img {
2710 .mail-thread #prvmail-to-label,
2711 .mail-thread #prvmail-subject-label {
2714 .mail-thread #prvmail-message-label > label {
2717 .mail-thread #prvmail-message-label textarea {
2720 .mail-conv-wrapper {
2722 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2725 height: calc(100vh - 150px);
2728 height: calc(100% - 20px);
2730 #message-preview ul {
2733 #message-preview .media-list li {
2737 #message-preview .media-list li:hover {
2738 border-left: none !important;
2740 #message-preview .media-list li a {
2743 .mail-list-outside-wrapper {
2745 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2747 .mail-list-outside-wrapper .contact-photo-wrapper img {
2754 #modal #prvmail-text-edit-bb .bb-img {
2759 #photo-album-edit-name-label {
2762 .photo-album-edit-name {
2766 .photo-album-actions {
2767 margin-bottom: 10px;
2769 .photo-album-actions .photos-order-link {
2773 #photo-edit-submit-button {
2779 .fc .fc-month-view .fc-content .fc-title .item-desc:hover {
2780 color: $link_hover_color;
2782 .fc .fc-list-item-title a {
2785 .fc .fc-list-item-title a[href]:hover {
2786 color: $link_hover_color;
2787 text-decoration: none;
2789 .event-wrapper .event-owner {
2790 margin-bottom: 15px;
2792 .event-wrapper .event-owner img {
2801 .event-wrapper .vevent {
2804 box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
2806 .event-wrapper .event-buttons {
2809 #event-form-wrapper {
2812 #event-edit-form-wrapper {
2816 color: $font_color_darker;
2818 #event-edit-form-wrapper #event-edit-time {
2821 .event-buttons .plink-event-link {
2824 .vevent .event-summary {
2827 .vevent .event-description {
2830 .vevent .event-location .location {
2834 .modal-body .vevent .event-summary {
2837 #event-preview .vevent .event-summary {
2842 .event-card-details,
2843 .event-card-header {
2847 .event-card-left-date {
2850 .vevent .event-card-header {
2853 .event-card-left-date {
2854 width: 60px; /* Das muss wahrscheinlich unterschiedlich sein zwischen calendar und stream */
2856 .event-card .event-date-wrapper > span {
2860 white-space: nowrap;
2862 .event-card .event-date-wrapper .event-card-short-month {
2864 text-transform: uppercase;
2866 .event-card .event-date-wrapper.medium .event-card-short-date {
2871 .event-card .event-card-content {
2873 padding: 0 5px 0 15px;
2874 box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
2878 .event-card .event-card-content .event-map-btn {
2884 .event-card .event-card-title {
2886 color: $font_color_darker;
2891 .event-card .event-card-location {
2895 .event-card .event-card-location br {
2898 .event-card .event-card-location br::after {
2901 .event-card-profile-name a {
2904 .event-card-profile-name a:hover {
2905 color: $link_hover_color;
2907 .event-card .event-card-content .event-location-map {
2912 .event-card .event-card-content .event-location-map .map {
2915 .event-card .description {
2917 box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, 0.1) inset;
2930 transform: translateZ(0);
2931 transition: opacity 0.2s;
2936 text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
2938 .photo-next-link > i,
2939 .photo-prev-link > i {
2940 vertical-align: super;
2942 .photo-next-link > i {
2951 #photo-photo:hover .photo-next-link,
2952 #photo-photo:hover .photo-prev-link {
2955 #photo-photo .photo-next-link:hover,
2956 #photo-photo .photo-prev-link:hover {
2960 .photo-comment-wrapper .comment {
2963 .photo-comment-wrapper .wall-item-content {
2964 color: $font_color_darker;
2967 .photo-comment-wrapper .comment-wwedit-wrapper,
2968 .photo-comment-wrapper .wall-item-outside-wrapper.media:first-child {
2973 .profile-listing-table {
2977 .profile-listing-row {
2980 .profile-listing-cell {
2981 display: table-cell;
2983 .profile-listing-photo {
2988 #profile-listing-new-link-wrapper {
2989 margin-bottom: 20px;
2992 #profile-photo-upload-section {
2996 #profile-photo-upload-close {
3001 .section-subtitle-wrapper {
3008 details.profile-jot-net[open] summary:before,
3009 .panel .section-subtitle-wrapper .accordion-toggle:before {
3010 font-family: ForkAwesome;
3014 details.profile-jot-net summary:before,
3015 .panel .section-subtitle-wrapper .accordion-toggle.collapsed:before {
3016 font-family: ForkAwesome;
3019 details.profile-jot-net summary:before {
3023 details.profile-jot-net[open] summary:before {
3027 #settings-nick-wrapper {
3028 margin-bottom: 20px;
3034 /* Emulates Bootstrap display */
3037 background-color: rgba(255, 255, 255, $contentbg_transp);
3040 box-shadow: 0 0 3px #dadada;
3041 -webkit-box-shadow: 0 0 3px #dadada;
3042 -moz-box-shadow: 0 0 3px #dadada;
3045 .settings-block.fakelink,
3046 .settings-block > .fakelink {
3050 .settings-block > .fakelink {
3051 margin: -10px -15px 10px -15px;
3052 border-radius: 4px 4px 0 0;
3055 .settings-block.fakelink:hover,
3056 .settings-block > .fakelink:hover {
3057 color: $link_hover_color;
3059 .settings-block.fakelink > h3,
3060 .settings-block > .fakelink > h3 {
3067 .section-subtitle-wrapper > h2 {
3070 margin-bottom: 10px;
3072 .section-subtitle-wrapper > h2 .accordion-toggle {
3074 margin-bottom: -10px;
3076 padding-bottom: 10px;
3079 .section-subtitle-wrapper > h3 {
3085 .fakelink > h3:before {
3086 padding-right: 10px;
3088 .widget.fakelink > h3:before {
3089 font-family: ForkAwesome;
3090 content: "\f0da"; /* Right Plain Pointer */
3092 .widget > .fakelink > h3:before,
3093 #sidebar-circle-header > .fakelink > h3:before,
3094 #sidebar-group-header > .fakelink > h3:before {
3095 font-family: ForkAwesome;
3096 content: "\f0d7"; /* Bottom Plain Pointer */
3103 /* Intro Notifications */
3104 ul.notif-network-list {
3106 margin-right: -15px;
3108 ul.notif-network-list > li {
3110 padding-right: 15px;
3112 .intro-wrapper.media {
3114 word-wrap: break-word;
3117 .intro-photo-wrapper img.intro-photo {
3125 .intro-enty-name h4 {
3126 font-size: 15px !important;
3128 .intro-wrapper button.intro-action-link {
3130 transition: all 0.25s ease-in-out;
3132 .intro-wrapper button.intro-action-link,
3133 .intro-wrapper button.intro-action-link:hover {
3136 color: $font_color_darker;
3138 ul li:hover .intro-wrapper button.intro-action-link {
3140 transition: all 0.25s ease-in-out;
3142 ul li:hover .intro-wrapper button.intro-action-link:hover {
3145 .intro-action-buttons {
3149 transition: max-height 0.1s ease-out;
3151 ul.notif-network-list > li:hover .intro-action-buttons {
3153 transition: max-height 0.1s ease-in;
3157 .intro-network-label,
3158 .intro-location-label,
3159 .intro-keywords-label,
3161 .intro-knowyou-label,
3162 .intro-madeby-label {
3165 .intro-contact-info.xs .intro-url-label,
3166 .intro-contact-info.xs .intro-network-label,
3167 .intro-contact-info.xs .intro-location-label,
3168 .intro-contact-info.xs .intro-keywords-label,
3169 .intro-contact-info.xs .intro-about-label,
3170 .intro-contact-info.xs .intro-knowyou-label {
3175 /* Notifications Page */
3176 ul.notif-network-list li.unseen {
3177 background-color: #e3eff3;
3179 .notif-item img.notif-image {
3184 .notif-item .notif-desc-wrapper {
3187 .notif-item .notif-desc-wrapper a {
3190 color: $font_color_darker;
3197 /* This is a little bit hacky. Since the search page is used for different
3198 content types we can't apply the generic-page-wrapper class.
3199 So we apply the css of the generic-page-wrapper class to the ul element with some
3200 little modifications to emulate a standard page template */
3201 .search-content-wrapper > ul.viewcontact_wrapper {
3202 min-height: calc(100vh - 150px);
3204 padding-bottom: 20px;
3206 margin-bottom: 20px;
3208 background-color: rgba(255, 255, 255, $contentbg_transp);
3211 color: $font_color_darker;
3212 box-shadow: 0 0 3px #dadada;
3213 -webkit-box-shadow: 0 0 3px #dadada;
3214 -moz-box-shadow: 0 0 3px #dadada;
3218 section.help-content-wrapper h1 {
3219 padding-bottom: 0.3em;
3221 border-bottom: 1px solid #ddd;
3223 section.help-content-wrapper h2 {
3224 padding-bottom: 0.3em;
3226 border-bottom: 1px solid #ddd;
3228 section.help-content-wrapper h3 {
3231 section.help-content-wrapper h4 {
3234 section.help-content-wrapper h1,
3235 section.help-content-wrapper h2,
3236 section.help-content-wrapper h3,
3237 section.help-content-wrapper h4,
3238 section.help-content-wrapper h5,
3239 section.help-content-wrapper h6 {
3241 margin-bottom: 16px;
3245 section.help-content-wrapper p {
3248 section.help-content-wrapper p,
3249 section.help-content-wrapper a,
3250 section.help-content-wrapper li {
3256 #adminpage #frio_background_image .image-select {
3259 #adminpage #frio_background_image.input-group {
3262 #admin-summary-wrapper {
3265 #adminpage ul#addonslist,
3269 #adminpage li .icon {
3270 display: inline-block;
3271 vertical-align: text-top;
3275 #adminpage li .icon:before {
3277 display: inline-block;
3284 border: 1px solid #cccccc;
3286 background-color: $background_color;
3287 -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3288 -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3289 transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3291 #adminpage li .icon.on:after {
3292 font-family: "ForkAwesome";
3294 display: inline-block;
3307 #adminpage .addon .desc {
3310 #admin-users #users tr.blocked {
3311 background-color: #f8efc0;
3313 .adminpage .table-hover > tbody > tr:hover + tr.details {
3314 background-color: #f5f5f5;
3316 .offset-anchor::before {
3322 pointer-events: none;
3330 #identity-selector-wrapper {
3335 #identity-selector-wrapper .identity-match-photo {
3339 #identity-selector-wrapper .identity-match-photo button {
3342 #identity-selector-wrapper .identity-match-photo .badge {
3347 #identity-selector-wrapper .identity-match-name {
3350 #identity-selector-wrapper .identity-match-details {
3356 #register-openid-wrapper,
3357 #register-name-wrapper,
3358 #register-invite-wrapper,
3359 #profile-publish-wrapper {
3362 #register-openid-end,
3363 #register-nickname-end {
3368 * Overwriting for transparency and other colors
3370 main .nav-tabs > li.active > a,
3371 main .nav-tabs > li.active > a:focus,
3372 main .nav-tabs > li.active > a:hover {
3373 background-color: rgba(255, 255, 255, $contentbg_transp);
3383 @media (min-width: 768px) {
3390 * Framework overwrite
3393 /* textcomplete for contact filtering*/
3394 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list {
3395 position: relative !important;
3396 top: inherit !important;
3397 bottom: inherit !important;
3398 left: inherit !important;
3401 margin-right: -15px;
3402 background-color: transparent;
3406 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li {
3408 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
3410 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li:first-child {
3413 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list .textcomplete-item > a {
3414 padding: 0 !important;
3416 background-color: transparent !important;
3418 /* this is a little hack for texcomplete contact filter
3419 There are for some reasons empty <a> tags. I don't know why */
3420 .textcomplete-item .contact-wrapper a {
3425 body .tread-wrapper .hovercard a,
3426 body .tread-wrapper .hovercard a:hover {
3429 body .tread-wrapper .hovercard:hover .hover-card-content a {
3430 color: $link_color !important;
3433 /* Pagination improvements */
3438 .pagination > li > a,
3439 .pagination > li > span {
3443 .pagination > li > a:hover,
3444 .pagination > li > span:hover {
3445 color: $link_hover_color;
3447 .pagination > .active > a,
3448 .pagination > .active > a:focus,
3449 .pagination > .active > a:hover,
3450 .pagination > .active > span,
3451 .pagination > .active > span:focus,
3452 .pagination > .active > span:hover {
3453 background-color: $link_color;
3454 border-color: $link_color;
3457 .pagination li.pager_n a {
3461 .pagination .pager_prev a {
3464 border-top-right-radius: 3px;
3465 border-bottom-right-radius: 3px;
3467 .pagination .pager_next a {
3470 border-top-left-radius: 3px;
3471 border-bottom-left-radius: 3px;
3474 .pager .previous > a {
3478 .pagination .disabled > a,
3479 .pager .disabled > a {
3485 background-color: rgba(255, 255, 255, $contentbg_transp);
3489 * some temporary workarounds until this will solved
3490 * elsewhere (e.g. new templates)
3492 #remote-friends-in-common {
3493 background-color: #fff;
3497 grid-template-columns: repeat(4, 1fr);
3499 margin-bottom: 15px;
3503 section .profile-match-wrapper {
3507 .profile-match-photo {
3508 align-items: center;
3510 justify-content: center;
3514 .profile-match-name {
3515 align-items: center;
3517 justify-content: center;
3521 .profile-match-break {
3525 .profile-match-end {
3532 #login-submit-wrapper {
3535 #lost-password-link {
3538 #login-lost-password-link {
3539 margin-bottom: 10px;
3545 #id_password_wrapper {
3546 margin-bottom: unset;
3553 background: #8ad0a1;
3560 .mod-home.is-not-singleuser,
3562 background-color: $login_bg_color;
3563 background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4)), url($login_bg_image);
3564 background-size: cover;
3565 background-attachment: fixed;
3566 background-position: center;
3569 .mod-home.is-not-singleuser nav.navbar,
3570 .mod-login nav.navbar {
3571 background-color: transparent;
3574 .mod-home.is-not-singleuser #topbar-second,
3575 .mod-login #topbar-second {
3576 background-color: transparent;
3580 .mod-home.is-not-singleuser .login-content,
3581 .mod-login .login-content {
3586 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3590 .mod-home.is-not-singleuser .login-form > #login-form label,
3591 .mod-login #content #login-form label {
3595 .mod-home.is-not-singleuser .login-panel-content,
3596 .mod-login .login-panel-content {
3597 background-color: rgba(255, 255, 255, 0.85);
3601 background: $nav_bg !important;
3602 color: $btn_primary_color !important;
3605 -webkit-box-shadow: none;
3607 -moz-box-shadow: none;
3608 background-image: none;
3616 width: 100% !important;
3619 .qq-upload-drop-area {
3620 background: white !important;
3623 -webkit-box-shadow: none;
3625 -moz-box-shadow: none;
3626 background-image: none;
3634 width: 100% !important;
3635 display: block !important;
3636 position: relative !important;
3637 border: black 1px dashed !important;
3638 margin-bottom: 5px !important;
3639 margin-top: 15px !important;
3643 * The different views of js fullcalendar
3647 margin-bottom: 10px;
3651 #event-calendar-title {
3652 display: inline-block;
3661 #fc-header-right .dropdown > button {
3664 #event-calendar-title {
3665 vertical-align: middle;
3667 #event-calendar-views {
3674 .fc .fc-month-view td.fc-widget-content,
3676 .fc .fc-list-view .fc-list-table td,
3680 .fc td.fc-widget-header,
3681 .fc th.fc-widget-header {
3686 .fc .fc-month-view td.fc-day {
3689 border-bottom: 1px solid;
3692 .fc .fc-day-grid-container .fc-row {
3693 border-bottom: 1px solid;
3696 .fc tr td.fc-today {
3699 .fc .fc-month-view .fc-content .fc-title .item-desc {
3702 .fc .fc-view-container {
3705 .fc .fc-list-view td {
3708 #events-calendar.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
3713 background-color: #e3f2fd;
3714 border: 1px solid #bbdefb;
3715 color: $font_color_darker;
3717 .fc .fc-month-view .fc-time,
3718 .fc .fc-listMonth-view .fc-list-item-time,
3719 .fc .fc-listMonth-view .fc-list-item-marker,
3720 .fc .fc-listMonth-view .fc-widget-header {
3723 .fc .fc-listMonth-view .fc-list-item:hover td {
3724 background: transparent;
3727 .fc .fc-listMonth-view .separator {
3738 .event-card .event-label,
3739 .event-card .location-label {
3742 .popover.event-card .event-card-basic-content {
3747 .event-card .event-hover-location .location {
3753 .generic-page-wrapper.contact-follow-wrapper {
3757 /* Medium devices (desktops, 992px and up) */
3758 @media (min-width: 992px) {
3759 .mod-home.is-not-singleuser #content,
3760 .mod-login #content {
3761 margin-top: 100px !important;
3764 .mod-home.is-not-singleuser .login-form > #login-form,
3765 .mod-home.is-not-singleuser .login-form > #login-extra-links,
3766 .mod-login #content #login-form {
3767 background-color: #fff;
3771 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3773 background-color: white;
3776 .mod-home.is-not-singleuser .login-form > #login-form label,
3777 .mod-login #content #login-form label {
3781 .mod-home.is-not-singleuser .login-form::before,
3782 .mod-login #content #login-form::before {
3786 background-color: rgba(255, 255, 255, 0.1);
3794 .mod-home.is-not-singleuser .login-form::after,
3795 .mod-login #content #login-form::after {
3799 background-color: rgba(255, 255, 255, 0.2);
3808 /* Mobile display */
3809 @media (max-width: 600px) {
3817 #friendica-logo-mask {
3831 .toplevel_item > .wall-item-container {
3839 .wall-item-actions {
3847 .generic-page-wrapper,
3848 .videos-content-wrapper,
3849 .suggest-content-wrapper,
3850 .help-content-wrapper,
3851 .match-content-wrapper,
3852 .dirfind-content-wrapper,
3853 .directory-content-wrapper,
3854 .delegation-content-wrapper,
3855 .notes-content-wrapper,
3856 .message-content-wrapper,
3857 .apps-content-wrapper,
3859 .delegate-content-wrapper,
3860 .uexport-content-wrapper,
3861 .dfrn_request-content-wrapper,
3862 .friendica-content-wrapper,
3863 .credits-content-wrapper,
3864 .nocircle-content-wrapper,
3865 .profperm-content-wrapper,
3866 .invite-content-wrapper,
3867 .tos-content-wrapper,
3868 .fsuggest-content-wrapper {
3928 .wwto .contact-photo {
3936 Prevent automatic zoom on input focus on iOS
3937 see https://stackoverflow.com/a/16255670
3943 .wall-item-container.thread_level_3,
3944 .wall-item-container.thread_level_4,
3945 .wall-item-container.thread_level_5,
3946 .wall-item-container.thread_level_6,
3947 .wall-item-container.thread_level_7,
3948 .wall-item-container.thread_level_8,
3949 .wall-item-container.thread_level_9 {