2 Created on : 17.02.2016, 23:55:45
3 Author : rabuzarus and contributors
8 background-color: $background_color;
9 background-image: url("$background_image");
10 background-size: $background_size_img;
11 background-repeat: $background_repeat;
12 background-attachment: fixed;
14 font-family: "Open Sans", sans-serif;
22 text-decoration: none;
24 /* Anchors incorrectly display with a fixed top menu. This global rule offsets all
25 * anchors so that accessing them with a # link will actually scroll the associated
26 * content in the visible part of the page.
28 * anchor.top should be the opposite of body.padding-top
30 body a[name]:not([href]) {
45 color: $link_hover_color;
46 outline-color: $link_hover_color;
47 text-decoration: none;
50 .wall-item-container a:hover {
51 text-decoration: underline;
60 border-color: rgba(238, 238, 238, $contentbg_transp);
80 display: none !important;
83 max-height: 0px !important;
84 overflow: hidden !important;
90 @media screen and (max-width: 990px) {
95 position: fixed !important;
97 background-color: $background_color;
104 padding-left: 6px !important;
105 padding-right: 6px !important;
115 background-color: rgba(0, 0, 0, 0.4);
117 transition: opacity 0.5s;
119 aside.canvas-slid::before {
123 /* prevent page scroll when the aside is opened **/
129 * standard page elements
135 color: $nav_icon_color;
142 padding: 0 12px 0 12px;
144 background-color: $nav_bg;
148 #item-delete-selected {
157 padding: 0 12px 0 12px;
159 background-color: $link_color;
164 #toggle_mobile_link {
169 * Overwriting and Extend Bootstrap
181 -webkit-box-shadow: none;
183 -moz-box-shadow: none;
184 background-image: none;
194 outline-color: $link_hover_color;
217 background-color: #ae0f0f;
222 color: $btn_primary_color;
224 .btn.btn-primary:hover,
225 .btn.btn-primary:focus {
226 color: $btn_primary_color;
227 background: $btn_primary_hover_color;
228 text-decoration: none;
230 .btn.btn-primary:active,
231 .btn.btn-primary.active {
232 background: $btn_primary_hover_color;
235 .btn-primary.active.focus,
236 .btn-primary.active:focus,
237 .btn-primary.active:hover,
238 .btn-primary:active.focus,
239 .btn-primary:active:focus,
240 .btn-primary:active:hover,
241 .open > .dropdown-toggle.btn-primary.focus,
242 .open > .dropdown-toggle.btn-primary:focus,
243 .open > .dropdown-toggle.btn-primary:hover,
246 .open > .dropdown-toggle.btn-primary {
247 background: $btn_primary_hover_color;
260 background: transparent;
267 background-color: transparent;
271 border-left: 1px solid #777;
275 border: 1px solid transparent;
284 .toggle .toggle-off:hover {
286 background-color: #eee;
289 .toggle.off .toggle-handle {
290 background-color: #eee;
293 background-color: #fff;
295 border: 1px solid transparent;
299 .input-group-sm > .form-control,
300 .input-group-sm > .input-group-addon,
301 .input-group-sm > .input-group-btn > .btn {
302 padding: 0.275rem 0.75rem;
305 border-radius: 0.2rem;
307 /* Bootstrap media class fix/hack
308 * This is a test. I thought it does have some
309 * issues in some corner cases. Maybe we remove
311 * https://github.com/twbs/bootstrap/issues/6053
334 vertical-align: baseline;
335 background-color: $link_color;
343 /* disabled elements */
344 .community-content-wrapper > h3,
345 .network-content-wrapper > .section-title-wrapper {
349 header #site-location {
360 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
362 font-family: tahoma, "Lucida Sans", sans;
368 header #banner #logo-img,
369 .navbar-brand #logo-img {
370 -webkit-mask-image: url("img/friendica-25.png");
371 background-color: $nav_icon_color;
378 #navbrand-container {
381 #navbrand-container #navbar-brand-text {
383 color: $nav_icon_color;
386 /* offcanvas section */
388 /* Right offcanvas uses: #offcanvasUsermenu, .offcanvas-right-active
389 .offcanvas-right and .offcanvas-right-overlay */
398 background-color: #333;
399 transform: translateX(-100%);
400 transition: 0.4s ease-in-out;
411 background-color: #333;
412 transform: translateX(100%);
413 transition: 0.4s ease-in-out;
416 .offcanvas-active .off-canvas {
417 transform: translateX(0);
419 .offcanvas-right-active #offcanvasUsermenu {
420 transform: translateX(0);
423 transition: 0.4s ease-in-out;
428 transition: 0.4s ease-in-out;
430 .offcanvas-active .page-wrapper,
431 .offcanvas-active .navbar-fixed-top {
432 transform: translateX(300px);
441 background-color: rgba(0, 0, 0, 0.5);
445 transition: 0.4s ease-in-out;
447 .offcanvas-right-overlay {
453 background-color: rgba(0, 0, 0, 0.5);
457 transition: 0.4s ease-in-out;
459 .offcanvas-active .offcanvas-overlay,
460 .offcanvas-right-active .offcanvas-right-overlay {
464 /* offcanvas section ends */
478 .topbar ul.nav > li {
481 @media (min-width: 992px) {
482 .topbar ul.nav > li > a,
483 .topbar ul.nav > li > button {
485 padding-bottom: 15px;
489 @media (max-width: 991px) {
490 .topbar ul.nav > li > a,
491 .topbar ul.nav > li > button {
495 .topbar .dropdown-footer {
498 .topbar .dropdown-header {
505 .topbar .dropdown-header .dropdown-header-link {
510 .topbar .dropdown-header .dropdown-header-link a,
511 .topbar .dropdown-header .dropdown-header-link .btn-link {
512 color: $link_color !important;
516 .topbar .dropdown-header:hover {
521 background-color: $nav_bg;
524 color: $nav_icon_color;
526 @media screen and (max-width: 767px) {
533 #topbar-first .navbar-toggle {
538 #topbar-first .nav > li > a,
539 #topbar-first .nav > li > button,
540 nav.navbar .nav > li > a,
541 nav.navbar .nav > li > button {
542 color: $nav_icon_color;
544 #topbar-first .nav > .open > a,
545 #topbar-first .nav > .open > button {
546 background-color: $nav_bg;
548 #topbar-first .nav > li > a:hover,
549 #topbar-first .nav > li > a:focus,
550 #topbar-first .nav > li > button:not(#main-menu):hover,
551 #topbar-first .nav > li > button:not(#main-menu):focus,
552 nav.navbar .nav > li > a:hover,
553 nav.navbar .nav > li > a:focus,
554 nav.navbar .nav > li > button:hover,
555 nav.navbar .nav > li > button:focus {
556 background-color: $nav_icon_hover_color;
558 #topbar-first .nav > .account {
562 #topbar-first .nav > .account img {
568 #topbar-first .nav > .account .dropdown-toggle {
569 padding: 8px 5px 0px;
573 #topbar-first .nav > .account .dropdown-toggle span {
576 #topbar-first .topbar-brand {
580 #topbar-first .topbar-actions {
584 #topbar-first .topbar-nav {
590 #topbar-first .topbar-nav .nav-segment {
594 #topbar-first .topbar-nav .nav-segment > a {
595 display: inline-block;
596 text-decoration: none;
599 #topbar-first .topbar-nav .nav-segment .nav-notification {
603 background-color: #ff3535;
605 #topbar-first #intro-update {
608 #topbar-first .topbar-nav .arrow:after {
613 border-color: transparent;
620 border-bottom-color: #fff;
623 #topbar-first .topbar-nav .arrow {
628 border-color: transparent;
635 border-bottom-color: rgba(0, 0, 0, 0.15);
639 #topbar-first .topbar-nav .dropdown-menu {
643 #topbar-first .topbar-nav .dropdown-menu ul.media-list {
647 #topbar-first .topbar-nav .dropdown-menu li {
650 #topbar-first .topbar-nav .dropdown-menu li i.approval {
656 #topbar-first .topbar-nav .dropdown-menu li i.accepted {
659 #topbar-first .topbar-nav .dropdown-menu li i.declined {
662 #topbar-first .topbar-nav .dropdown-menu li .media {
665 #topbar-first .topbar-nav .dropdown-menu li .media .img-space {
670 #topbar-first .dropdown-footer {
671 margin: 10px 10px 5px;
673 #topbar-first .caret {
674 border-top-color: #bebebe;
676 #topbar-first .btn-group > a {
677 background-color: #7f9baa;
679 #topbar-first .btn-enter {
680 background-color: #7f9baa;
683 #topbar-first .btn-enter:hover {
684 background-color: #89a2b0;
686 .navbar-fixed-top ul.nav.navbar-nav.navbar-right {
690 #friendica-logo-mask {
694 /* Notification Menu */
695 #topbar-first #nav-notifications-menu {
698 #topbar-first #nav-notifications-menu a {
699 color: $font_color_darker;
702 #topbar-first #nav-notifications-menu li.notif-entry {
703 color: $font_color_darker;
705 border-bottom: 1px solid #eee;
707 border-left: 3px solid #fff;
711 #topbar-first #nav-notifications-menu li.notification-unseen {
712 border-left: 3px solid #e3eff3;
713 background-color: #e3eff3;
715 #topbar-first #nav-notifications-menu li.notif-entry:hover {
716 background-color: #f7f7f7;
717 border-left: 3px solid $link_color;
719 #topbar-first #nav-notifications-menu li.placeholder {
722 #topbar-first #nav-notifications-menu .media .media-body .contactname {
725 #topbar-first #nav-notifications-menu .media .media-body .label {
726 padding: 0.1em 0.5em;
728 #topbar-first #nav-notifications-menu li.notif-entry .media-object a img {
733 /* The Top Nav Bar user menu */
734 #topbar-first .account .user-title {
738 #topbar-first .account .user-title span {
739 color: $nav_icon_color;
741 #topbar-first .account #main-menu .nav-notification {
745 background-color: #ff8989;
749 background-color: $background_color;
753 border-left-color: $nav_icon_color;
754 box-shadow: -3px 0 3px -3px black;
756 #offcanvasUsermenu .nav-container {
757 /* required to compensate for moving the container below the topnav bar */
760 #offcanvasUsermenu li.divider {
761 background-color: transparent;
765 #offcanvasUsermenu ul,
766 #offcanvasUsermenu ul li:first-child,
767 #offcanvasUsermenu ul,
768 #offcanvasUsermenu ul li:last-child {
771 #offcanvasUsermenu li,
772 #offcanvasUsermenu a {
773 background-color: $nav_bg;
774 color: $nav_icon_color;
777 #offcanvasUsermenu li.list-group-item {
778 border-color: $background_color;
780 #offcanvasUsermenu a {
783 #offcanvasUsermenu li.nav-sitename {
786 #topbar-first .dropdown.account li#nav-sitename {
790 word-break: break-word;
792 #topbar-first .dropdown.account li#nav-sitename:hover {
794 background-color: $nav_bg;
797 #topbar-first #search-box .navbar-form {
808 background-color: $background_color;
810 /* fix bootstrap .well class not playing well with data-target slide animation */
816 #search-mobile .navbar-form {
819 #topbar-first #search-box .form-search {
822 background-position: 8px 4px;
824 #topbar-first #search-box .btn {
833 background-color: #fff;
835 background-image: none;
836 -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
837 -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
838 box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
839 border-bottom: 1px solid #d4d4d4;
841 #topbar-second > .container {
844 @media screen and (max-width: 767px) {
845 #topbar-second > .container,
846 #topbar-second #navbar-button {
850 #topbar-second .dropdown-menu {
854 #topbar-second .dropdown-menu .divider {
857 #topbar-second #space-menu-dropdown,
858 #topbar-second #search-menu-dropdown {
861 #topbar-second #space-menu-dropdown .media-list,
862 #topbar-second #search-menu-dropdown .media-list {
870 .intro-wrapper button.intro-action-link {
874 ul li .intro-wrapper button.intro-action-link {
877 @media screen and (max-width: 768px) {
878 #topbar-second #space-menu-dropdown .media-list,
879 #topbar-second #search-menu-dropdown .media-list {
883 #topbar-second #space-menu-dropdown form,
884 #topbar-second #search-menu-dropdown form {
887 #topbar-second #space-menu-dropdown .search-reset,
888 #topbar-second #search-menu-dropdown .search-reset {
897 #topbar-second #space-menu-dropdown li > ul > li > a > .media .media-body p {
903 #topbar-second #nav-short-info .heading {
908 text-overflow: ellipsis;
910 #topbar-second #tabmenu .heading {
912 text-overflow: ellipsis;
919 .nav > li > .btn-link {
924 .nav .open > .btn-link {
925 background-color: #eee;
926 border-color: #337ab7;
928 .nav-pills > li > .btn-link {
931 .nav-pills .dropdown-menu,
932 .nav-tabs .dropdown-menu,
933 .account .dropdown-menu,
934 .contact-photo-wrapper .dropdown-menu {
935 background-color: $nav_bg;
938 .nav-pills .dropdown-menu li.divider,
939 .nav-tabs .dropdown-menu li.divider,
940 .account .dropdown-menu li.divider,
941 .contact-photo-wrapper .dropdown-menu li.divider {
942 background-color: $menu_background_hover_color;
944 margin: 9px 1px !important;
946 .nav-pills .dropdown-menu li > a,
947 .nav-tabs .dropdown-menu li > a,
948 .account .dropdown-menu li > a,
949 .contact-photo-wrapper .dropdown-menu li > a {
950 border-left: 3px solid $nav_bg;
952 .nav-pills .dropdown-menu li a,
953 .nav-pills .dropdown-menu li .btn-link,
954 .nav-tabs .dropdown-menu li a,
955 .nav-tabs .dropdown-menu li .btn-link,
956 .account .dropdown-menu li a,
957 .account .dropdown-menu li .btn-link,
958 .contact-photo-wrapper .dropdown-menu li a,
959 .contact-photo-wrapper .dropdown-menu li .btn-link {
960 color: $nav_icon_color;
964 text-transform: capitalize;
968 .nav-pills .dropdown-menu li a i,
969 .nav-pills .dropdown-menu li .btn-link i,
970 .nav-tabs .dropdown-menu li a i,
971 .nav-tabs .dropdown-menu li .btn-link i,
972 .account .dropdown-menu li a i,
973 .account .dropdown-menu li .btn-link i,
974 .contact-photo-wrapper .dropdown-menu li a i,
975 .contact-photo-wrapper .dropdown-menu li .btn-link i {
978 display: inline-block;
981 .nav-pills .dropdown-menu li > a:hover,
982 .nav-tabs .dropdown-menu li > a:hover,
983 .account .dropdown-menu li > a:hover,
984 .contact-photo-wrapper .dropdown-menu li > a:hover,
985 .nav-pills .dropdown-menu li.selected a,
986 .nav-tabs .dropdown-menu li.selected a,
987 .account .dropdown-menu li.selected a,
988 .contact-photo-wrapper .dropdown-menu li.selected a {
989 border-left: 3px solid $link_color;
991 background: $menu_background_hover_color;
993 #photo-edit-link-wrap {
994 color: $font_color_darker;
1009 .nav-container .widget {
1012 background-color: rgba(255, 255, 255, $contentbg_transp);
1013 box-shadow: 0 0 3px #dadada;
1014 -webkit-box-shadow: 0 0 3px #dadada;
1015 -moz-box-shadow: 0 0 3px #dadada;
1018 margin-bottom: 20px;
1024 .nav-container .widget h3 {
1028 padding-bottom: 20px;
1032 .nav-container .widget ul {
1037 margin-right: -10px;
1042 .nav-container .widget li {
1044 padding-bottom: 2px;
1046 padding-right: 10px;
1048 aside .widget li:hover,
1049 aside .widget li.selected,
1050 .nav-container .widget li:hover {
1052 color: $font_color_darker;
1053 background-color: rgba(247, 247, 247, $contentbg_transp);
1054 border-left: 3px solid $link_color !important;
1058 aside .widget li a:hover {
1059 color: $font_color_darker;
1062 /* forumlist widget */
1063 aside > #datebrowse-sidebar li.posted-date-selector-months {
1064 margin-bottom: 10px;
1068 aside > #datebrowse-sidebar li.posted-date-selector-months:hover {
1069 border-left: none !important;
1070 background-color: transparent !important;
1072 aside > #datebrowse-sidebar .posted-date-selector-months > ul {
1075 aside > #datebrowse-sidebar .posted-date-selector-months > ul > li {
1078 aside > #datebrowse-sidebar .posted-date-selector-months > ul > li:hover {
1083 -webkit-filter: grayscale(100%);
1084 filter: grayscale(100%);
1086 filter: alpha(opacity=50); /* For IE8 and earlier */
1087 -webkit-transition: all 0.2s ease-in-out;
1088 -moz-transition: all 0.2s ease-in-out;
1089 -o-transition: all 0.2s ease-in-out;
1090 -ms-transition: all 0.2s ease-in-out;
1091 transition: all 0.2s ease-in-out;
1093 #forumlist-sidbar-ul li:hover a > .forumlist-img {
1094 -webkit-filter: unset;
1099 /* help page widget */
1100 aside > .help-aside-wrapper p strong:first-child {
1104 aside > .help-aside-wrapper h1 {
1108 padding: 20px 0 10px;
1110 aside > .help-aside-wrapper h2 {
1115 /* vcard / h-card */
1116 aside .vcard #profile-photo-wrapper {
1119 aside .vcard img.u-photo,
1120 aside img.vcard-photo {
1124 aside .vcard .tool .action {
1131 background: rgba(0, 0, 0, 0.5);
1135 -webkit-transition: all 0.25s ease-in-out;
1136 -moz-transition: all 0.25s ease-in-out;
1137 -o-transition: all 0.25s ease-in-out;
1138 -ms-transition: all 0.25s ease-in-out;
1139 transition: all 0.25s ease-in-out;
1141 aside .vcard .tool a {
1142 color: rgba(255, 255, 255, 0.85);
1144 aside .vcard #profile-photo-wrapper:hover .tool .action {
1147 aside .vcard #profile-photo-wrapper.crop-preview {
1150 aside .vcard .profile-header {
1151 padding: 5px 0px 20px 0px;
1155 padding: 5px 0px 5px 0px;
1157 aside .vcard .p-addr {
1160 text-overflow: ellipsis;
1161 white-space: nowrap;
1162 padding-bottom: 2px;
1164 aside .vcard .title {
1167 aside .vcard .detail {
1174 aside .vcard .icon {
1175 display: table-cell;
1176 padding-right: 10px;
1179 #profile-extra-links {
1181 margin-bottom: 10px;
1183 aside .vcard #dfrn-request-link-button,
1184 aside .vcard #wallmessage-link-botton {
1190 aside .vcard #dfrn-request-link,
1191 aside .vcard #wallmessage-link {
1194 /* vcard-short-info */
1196 #nav-short-info .contact-wrapper {
1199 white-space: nowrap;
1201 padding-right: 20px;
1204 #nav-short-info .contact-photo-wrapper.media-left {
1207 #vcard-short-photo-wrapper img,
1208 #nav-short-info .contact-wrapper img {
1214 #nav-short-info .contact-wrapper .media-body {
1218 text-overflow: ellipsis;
1220 #vcard-short-desc > .media-heading,
1221 #vcard-short-desc > .vcard-short-addr,
1222 #nav-short-info .contact-wrapper .media-heading,
1223 #nav-short-info .contact-wrapper #contact-entry-url-network {
1224 text-overflow: ellipsis;
1227 #vcard-short-desc > .media-heading,
1228 #nav-short-info .contact-wrapper .media-heading {
1232 #nav-short-info .contact-wrapper .media-heading a {
1233 color: $font_color_darker;
1234 font-size: 14px !important;
1236 #vcard-short-desc > .vcard-short-addr,
1237 #nav-short-info .contact-wrapper #contact-entry-url-network {
1241 .network-content-wrapper > #viewcontact_wrapper-network,
1242 #nav-short-info .contact-wrapper .contact-photo-overlay,
1243 #nav-short-info .contact-wrapper .contact-actions {
1247 aside #peoplefind-sidebar input,
1248 aside #follow-sidebar input {
1250 background-position: 10px 5px;
1252 aside #peoplefind-sidebar label,
1253 aside #follow-sidebar label {
1254 font-weight: normal;
1256 aside #peoplefind-sidebar .form-group-search .form-button-search,
1257 aside #follow-sidebar .form-group-search .form-button-search {
1261 div#sidebar-group-header h3 {
1265 div#sidebar-group-list {
1274 color: $font_color_darker;
1278 color: $font_color_darker;
1280 transition: all 0.1s ease-in-out;
1283 color: $font_color_darker;
1290 aside #group-sidebar .sidebar-group-li:hover .group-edit-tool.faded-icon,
1291 aside #saved-search-list .saved-search-li:hover .savedsearchdrop.faded-icon,
1292 aside .widget:hover .widget-action.faded-icon {
1294 transition: all 0.25s ease-in-out;
1296 aside #group-sidebar .sidebar-group-li .group-edit-tool.faded-icon:hover,
1297 aside #saved-search-list .saved-search-li .savedsearchdrop.faded-icon:hover,
1298 aside .widget .widget-action.faded-icon:hover {
1301 aside #group-sidebar li .group-checkbox {
1304 aside #group-sidebar li .group-edit-tool {
1305 padding-right: 10px;
1307 aside #group-sidebar li .group-edit-tool:first-child {
1311 /* contact block widget */
1312 .contact-block-content {
1317 .contact-block-div {
1319 margin: 0px 5px 5px 0px;
1321 .contact-block-link {
1323 .contact-block-img {
1329 /* Tag cloud widget */
1330 .tagblock.widget > .tag-cloud {
1335 display: none !important;
1349 .modal #jot-sections {
1350 max-height: calc(100vh - 22px);
1352 @media (min-width: 768px) {
1353 .modal #jot-sections {
1354 max-height: calc(100vh - 62px);
1357 #jot-modal #jot-sections,
1358 #jot-modal #jot-modal-body,
1359 #jot-modal #profile-jot-form,
1360 #jot-modal #profile-jot-wrapper,
1361 #jot-modal #jot-text-wrap,
1362 #jot-modal #jot-preview-content,
1363 #jot-modal #tread-wrapper--1,
1364 #jot-modal #item-Q0,
1365 #jot-modal #profile-jot-acl-wrapper,
1366 #jot-modal #acl-wrapper {
1370 flex-direction: column;
1372 #jot-modal .modal-header a,
1373 #jot-modal .modal-header .btn-link,
1374 #profile-jot-submit-wrapper a,
1375 #profile-jot-submit-wrapper .btn-link {
1376 color: $font_color_darker;
1378 #jot-modal .modal-header {
1379 border-bottom: none;
1381 #jot-modal .modal-header .compose-link {
1386 #jot-category-wrap {
1392 #jot-text-wrap textarea {
1394 overflow-y: auto !important;
1395 overflow-y: overlay !important;
1397 #jot-text-wrap .preview textarea {
1400 #preview_profile-jot-text,
1401 .comment-edit-form .preview {
1405 border: 2px solid #ededed;
1408 border-radius: 0 0 4px 4px;
1410 color: $font_color_darker;
1412 textarea#profile-jot-text:focus + #preview_profile-jot-text,
1413 textarea.comment-edit-text:focus + .comment-edit-form .preview {
1414 border: 2px solid #6fdbe8;
1417 .preview hr.previewseparator {
1419 border-color: #d2d2d2;
1421 #previewImgBtn_profile-jot-text,
1433 .preview button.previewActionBtn {
1439 border: 2px solid #fff;
1440 box-shadow: 0 0 3px gray;
1444 text-decoration: none;
1445 padding: 0 0 1px 1px;
1448 .preview button.previewActionBtn:hover {
1451 .preview .closePreview button.previewActionBtn {
1454 #previewInputTitle_profile-jot-text {
1457 #profile-jot-wrapper button#profile-jot-submit {
1460 #profile-jot-wrapper #character-counter {
1463 .modal .wall-item-container.preview {
1465 overflow-y: overlay;
1469 font-family: ForkAwesome;
1473 font-family: ForkAwesome;
1477 #acl-wrapper label.panel-heading {
1484 .fbrowser .breadcrumb {
1487 .fbrowser .path a:before {
1491 .fbrowser .breadcrumb > li:last-of-type a {
1493 pointer-events: none;
1496 .fbrowser .folders {
1497 box-shadow: -1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
1500 .fbrowser .folders ul {
1506 max-height: calc(100vh - 210px);
1509 @media (min-width: 768px) {
1510 .fbrowser .folders ul {
1511 max-height: calc(100vh - 255px);
1514 .fbrowser .folders li {
1516 padding-right: 10px;
1518 padding-bottom: 3px;
1520 .fbrowser .folders li:hover {
1522 color: $font_color_darker;
1523 background-color: rgba(247, 247, 247, $contentbg_transp);
1524 border-left: 3px solid $link_color;
1527 .fbrowser .folders li a,
1528 .fbrowser .folders li a:hover {
1529 color: $font_color_darker;
1532 .fbrowser .folders + .list {
1535 .fbrowser .fbrowser-content-container {
1537 max-height: calc(100vh - 175px);
1539 @media (min-width: 768px) {
1540 .fbrowser .fbrowser-content-container {
1541 max-height: calc(100vh - 220px);
1544 .fbrowser.image .photo-album-image-wrapper {
1545 box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.2);
1547 .fbrowser.image .photo-album-image-wrapper .caption {
1548 pointer-events: none;
1550 .fbrowser .profile-rotator-wrapper {
1553 .fbrowser .fa-spin {
1566 background-color: rgba(255, 255, 255, $contentbg_transp);
1567 box-shadow: 0 0 2px #dadada;
1568 -webkit-box-shadow: 0 0 2px #dadada;
1569 -moz-box-shadow: 0 0 2px #dadada;
1573 .panel.panel-inline {
1575 margin-right: -15px;
1579 .panel .panel-body {
1580 word-wrap: break-word;
1582 .tread-wrapper .media {
1584 word-wrap: break-word;
1590 /* Thread hover effects */
1591 .desktop-view .wall-item-container .wall-item-content a,
1592 .desktop-view .wall-item-name,
1593 .desktop-view .wall-item-container .fakelink,
1594 .desktop-view .toplevel_item .fakelink,
1595 .desktop-view .toplevel_item .wall-item-container .wall-item-responses a {
1597 -webkit-transition: all 0.25s ease-in-out;
1598 -moz-transition: all 0.25s ease-in-out;
1599 -o-transition: all 0.25s ease-in-out;
1600 -ms-transition: all 0.25s ease-in-out;
1601 transition: all 0.25s ease-in-out;
1604 .toplevel_item:hover .fakelink,
1605 .wall-item-container:hover .fakelink,
1606 .toplevel_item:hover .wall-item-container:hover .wall-item-responses a,
1607 .toplevel_item:hover .wall-item-content a,
1608 .toplevel_item:hover .wall-item-name,
1609 .wall-item-container:hover .wall-item-content a,
1610 .wall-item-container:hover .wall-item-name,
1611 .wall-item-container:hover .wall-item-location a {
1613 -webkit-transition: all 0.25s ease-in-out;
1614 -moz-transition: all 0.25s ease-in-out;
1615 -o-transition: all 0.25s ease-in-out;
1616 -ms-transition: all 0.25s ease-in-out;
1617 transition: all 0.25s ease-in-out;
1621 .wall-item-container {
1622 border-top: 1px solid rgba(255, 255, 255, 0.8);
1625 .wall-item-container.panel-body {
1630 .comment-edit-preview .wall-item-container.panel-body.preview {
1633 .comment-edit-preview .panel {
1637 .wall-item-container .media {
1640 background-color: rgba(0, 0, 0, 0.03);
1643 /* wall items contact photo */
1648 /*maybe some adional stuff is needed for the different screen sizes */
1650 .contact-photo-image-wrapper {
1657 .contact-photo-overlay {
1665 background: rgba(0, 0, 0, 0.5);
1668 -webkit-transition: opacity 0.25s ease;
1669 -moz-transition: opacity 0.25s ease;
1671 .contact-photo-overlay:hover {
1674 .contact-photo-overlay-content {
1676 text-shadow: 1px 1px 1px #ccc;
1677 color: rgba(255, 255, 255, 0.85);
1679 vertical-align: bottom;
1686 .wwto .contact-photo {
1694 display: inline-block;
1697 /* wall items action dropdown menu */
1698 .media [role="heading"] {
1702 /* Workaround for Firefox where the post heading covers the avatar, preventing hovercard interaction,
1703 48px is the width of the avatar image and should be adjusted accordingly if it ever changes. */
1704 .media .dropdown.pull-left + [role="heading"] {
1713 .shared_header .preferences {
1717 .wall-item-network {
1721 /* wall items contact info */
1722 .media .media-body {
1725 .media .media-body h4.media-heading {
1728 color: $font_color_darker;
1730 .media .media-body .addional-info a,
1731 .media .media-body h5.media-heading > a {
1734 .media .contact-info-comment {
1735 display: table-cell;
1737 .media .contact-info-xs h5,
1738 .media .contact-info-comment {
1749 .wall-item-name.xs {
1754 /* Contact avatar click card */
1755 .userinfo.click-card {
1759 .userinfo.click-card > *:hover:after {
1764 background-color: #ffffff;
1773 border-radius: 0 0 40% 0;
1776 /* The lock symbol popup */
1780 background-color: $nav_bg;
1790 color: $nav_icon_color;
1794 /* Space between content and head */
1799 /* wall items content */
1800 .wall-item-content {
1801 word-break: break-word;
1803 .wall-item-content img {
1805 object-fit: contain;
1807 .wall-item-body > img,
1808 .wall-item-body > a > img {
1811 .wall-item-body .body-attach > a {
1812 color: $font_color_darker;
1813 display: inline-block;
1815 .wall-item-body .body-attach > a div {
1816 color: $font_color_darker;
1820 /* wall-item content elements */
1828 box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.1) inset, 0 1px 1px rgba(0, 0, 0, 0.05);
1830 @media screen and (max-width: 767px) {
1836 margin: 5px -10px 0;
1840 box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.05);
1846 margin-bottom: 10px;
1850 blockquote.shared_content {
1856 padding: 10px 10px 1px 0;
1861 .type-link img.attachment-image {
1864 .type-link blockquote,
1865 .type-video blockquote {
1869 .oembed.video .embed_video > div::before {
1870 font-family: ForkAwesome;
1871 font-weight: normal;
1873 display: inline-block;
1874 text-decoration: inherit;
1875 vertical-align: top;
1883 .oembed.video .embed_video > div {
1884 background-color: rgba(0, 0, 0, 0.2);
1885 -webkit-transition: all 0.25s ease-in-out;
1886 -moz-transition: all 0.25s ease-in-out;
1887 -o-transition: all 0.25s ease-in-out;
1888 -ms-transition: all 0.25s ease-in-out;
1889 transition: all 0.25s ease-in-out;
1891 .oembed.video .embed_video > div:hover {
1892 background-color: rgba(0, 0, 0, 0);
1894 .oembed.video .embed_video.active {
1897 .oembed.video .embed_video.active iframe {
1898 width: 100% !important;
1907 color: $font_color_darker;
1910 .wall-item-tags a:hover {
1911 text-decoration: none;
1913 .wall-item-bottom .label,
1914 .wall-item-bottom .label a {
1917 .wall-item-tags .category,
1918 .wall-item-tags .folder {
1922 /* item social action buttons */
1923 .wall-item-actions {
1926 justify-content: space-between;
1928 .wall-item-actions a,
1929 .wall-item-actions button {
1931 color: $font_color_darker;
1933 .wall-item-actions .active {
1937 .wall-item-actions-left {
1938 display: table-cell;
1939 vertical-align: middle;
1941 .wall-item-actions-right {
1944 .wall-item-actions .checkbox {
1948 .wall-item-actions .button-comments,
1949 .wall-item-actions .button-votes,
1950 .wall-item-actions .button-likes {
1951 text-transform: capitalize;
1953 .wall-item-actions button:hover {
1954 color: $font_color_darker;
1955 text-decoration: underline;
1957 .wall-item-actions .separator {
1961 .wall-item-responses > div > p {
1965 /* wall item hover effects */
1967 @media (min-width: 768px) {
1968 /* Tags and mentions */
1969 .wall-item-container .wall-item-bottom .wall-item-tags span.label {
1970 filter: grayscale(0.5);
1973 -webkit-transition: all 0.25s ease-in-out;
1974 -moz-transition: all 0.25s ease-in-out;
1975 -o-transition: all 0.25s ease-in-out;
1976 -ms-transition: all 0.25s ease-in-out;
1977 transition: all 0.25s ease-in-out;
1980 .wall-item-container:hover .wall-item-bottom .wall-item-tags span.label {
1981 filter: grayscale(0);
1984 -webkit-transition: all 0.25s ease-in-out;
1985 -moz-transition: all 0.25s ease-in-out;
1986 -o-transition: all 0.25s ease-in-out;
1987 -ms-transition: all 0.25s ease-in-out;
1988 transition: all 0.25s ease-in-out;
1990 /* Like/Comment/etc buttons */
1991 .wall-item-container .wall-item-links,
1992 .wall-item-container .wall-item-actions button,
1993 .wall-item-container .body-attach > a {
1996 -webkit-transition: all 0.25s ease-in-out;
1997 -moz-transition: all 0.25s ease-in-out;
1998 -o-transition: all 0.25s ease-in-out;
1999 -ms-transition: all 0.25s ease-in-out;
2000 transition: all 0.25s ease-in-out;
2002 .wall-item-container:hover .wall-item-links,
2003 .wall-item-container:hover .wall-item-actions button,
2004 .wall-item-container:hover .body-attach > a {
2007 -webkit-transition: all 0.25s ease-in-out;
2008 -moz-transition: all 0.25s ease-in-out;
2009 -o-transition: all 0.25s ease-in-out;
2010 -ms-transition: all 0.25s ease-in-out;
2011 transition: all 0.25s ease-in-out;
2013 .wall-item-container .wall-item-body .body-attach > a:hover {
2021 wall-item-comment-wrapper.well {
2024 background-color: rgba(237, 237, 237, $contentbg_transp);
2025 background-image: none;
2027 background-color: red;
2029 wall-item-comment-wrapper.well-small {
2033 wall-item-comment-wrapper.well hr {
2034 border-top: 1px solid #d9d9d9;
2036 .wall-entry wall-item-comment-wrapper.well {
2039 .comment-container {
2041 border-top-left-radius: 3px;
2042 border-top-right-radius: 3px;
2043 border-bottom-right-radius: 0px;
2044 border-bottom-left-radius: 0px;
2047 position: relative !important;
2050 .hide-comments-outer {
2051 background-color: rgba(0, 0, 0, 0.03);
2053 border-radius: 0.5em 0.5em 0 0;
2055 .hide-comments-total {
2064 .wall-item-comment-wrapper {
2066 border-top: 1px solid rgba(255, 255, 255, 0.8);
2067 background-color: rgba(0, 0, 0, 0.03);
2068 border-radius: 0 0 4px 4px;
2072 .comment-fake-form {
2073 border-color: #d9d9d9;
2075 .comment-fake-form textarea {
2079 .comment-container .wall-item-comment-wrapper {
2083 .comment-edit-form textarea {
2087 .comment-edit-submit-wrapper {
2092 .comment-icon-list {
2094 justify-content: space-between;
2097 /* acpopup + textcompletion*/
2099 background-color: #ffffff;
2103 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
2108 /** @todo: we schould consider the possebility to overwrite bootstrap dropdowns
2109 at the beginning of this file to get rid of the !important */
2110 .textcomplete-item > a {
2111 color: $font_color_darker !important;
2112 padding: 5px 20px !important;
2114 .textcomplete-item.active > a {
2115 background-color: rgb(247, 247, 247) !important;
2116 background-image: none !important;
2117 border-left: 3px solid $link_color;
2118 padding-left: 17px !important;
2120 .textcomplete-item a .forum {
2127 /* The wall-item thread levels */
2128 .wall-item-container.thread_level_3,
2129 .wall-item-container.thread_level_4,
2130 .wall-item-container.thread_level_5,
2131 .wall-item-container.thread_level_6,
2132 .wall-item-container.thread_level_7 {
2142 background-color: rgba(247, 247, 247, $contentbg_transp);
2143 box-shadow: 0 0 3px #dadada;
2144 -webkit-box-shadow: 0 0 3px #dadada;
2145 -moz-box-shadow: 0 0 3px #dadada;
2150 section > .tabbar-wrapper {
2151 /* The tabbar shouldn't' be visibile inside
2152 the section element. Only after we have
2153 moved it to the nav through js */
2154 display: none !important;
2163 #tabmenu .search-heading {
2165 text-overflow: ellipsis;
2166 white-space: nowrap;
2179 border-bottom: 0 solid $link_color;
2182 transition: all 0.15s ease;
2190 border-bottom-width: 4px;
2192 ul.tabbar ul.tabs-extended:hover li.dropdown {
2196 ul.tabbar ul.tabs-extended li.active {
2198 border-bottom-width: 2px;
2200 ul.tabbar ul.tabs-extended li.active a {
2203 ul.dropdown-menu li:hover {
2209 box-sizing: border-box;
2212 .dropdown-menu li a,
2213 .dropdown-menu li .btn-link {
2214 color: $font_color_darker;
2216 .dropdown-menu li > :hover,
2217 .dropdown-menu li > :visited,
2218 .dropdown-menu li > :focus {
2222 .dropdown-menu li:first-child {
2226 /* Notificaiotn badges */
2227 #mail-update-li.show {
2228 display: inline-block !important;
2232 p.wall-item-announce,
2234 .media .shared-time,
2237 .media .location a {
2239 color: $font_color_darker;
2243 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2245 border-left: 3px solid rgba(255, 255, 255, 0);
2248 .media-list > li:hover,
2249 .media-list > li.selected,
2250 .media-list > li.active {
2251 border-left: 3px solid $link_color;
2252 background-color: rgba(247, 247, 247, $contentbg_transp);
2259 .form-control:focus {
2260 border: 2px solid $link_color;
2264 .radio label::before,
2265 .checkbox label::before {
2266 background-color: rgba(255, 255, 255, $contentbg_transp);
2268 .radio label::after {
2269 background-color: $link_color;
2271 .checkbox label::after {
2275 .checkbox input[type="checkbox"]:focus + label::before,
2276 .radio input[type="radio"]:focus + label::before {
2277 outline-color: $link_hover_color;
2281 color: $font_color_darker;
2284 input[type="range"].form-control {
2290 .form-control.form-search {
2291 border-radius: 30px;
2292 background-image: url(img/icon_search16x16.png);
2293 background-repeat: no-repeat;
2294 background-position: 10px 8px;
2297 .form-group-search {
2302 .form-group-search .form-button-search {
2306 border-radius: 30px;
2308 .search-input.form-control.form-search {
2316 .search-content-wrapper > #search-header-wrapper {
2319 .search-content-wrapper > .section-title-wrapper {
2322 #navbar-button > #search-save {
2325 /* Section-Content-Wrapper */
2326 #search-header-wrapper {
2328 padding-bottom: 20px;
2329 margin-bottom: 20px;
2331 background-color: rgba(255, 255, 255, $contentbg_transp);
2334 color: $font_color_darker;
2335 box-shadow: 0 0 3px #dadada;
2336 -webkit-box-shadow: 0 0 3px #dadada;
2337 -moz-box-shadow: 0 0 3px #dadada;
2344 section > .generic-page-wrapper,
2345 .videos-content-wrapper,
2346 .suggest-content-wrapper,
2347 .help-content-wrapper,
2348 .match-content-wrapper,
2349 .dirfind-content-wrapper,
2350 .delegation-content-wrapper,
2351 .notes-content-wrapper,
2352 .message-content-wrapper,
2353 .apps-content-wrapper,
2355 .delegate-content-wrapper,
2356 .uexport-content-wrapper,
2357 .dfrn_request-content-wrapper,
2358 .friendica-content-wrapper,
2359 .credits-content-wrapper,
2360 .nogroup-content-wrapper,
2361 .profperm-content-wrapper,
2362 .invite-content-wrapper,
2363 .tos-content-wrapper,
2364 .fsuggest-content-wrapper {
2365 min-height: calc(100vh - 150px);
2367 padding-bottom: 20px;
2368 margin-bottom: 20px;
2370 background-color: rgba(255, 255, 255, $contentbg_transp);
2373 color: $font_color_darker;
2374 box-shadow: 0 0 3px #dadada;
2375 -webkit-box-shadow: 0 0 3px #dadada;
2376 -moz-box-shadow: 0 0 3px #dadada;
2378 #content:hover .page-action.faded-icon {
2380 transition: all 0.25s ease-in-out;
2382 #content .page-action.faded-icon:hover {
2386 .section-title-wrapper {
2389 /* Home and Login Page */
2390 body.mod-home nav.navbar .nav > li > a:hover {
2391 background-color: rgba(255, 255, 255, 0.2);
2393 body.mod-home .navbar #nav-login,
2394 body.mod-login .navbar #nav-login {
2398 #profile-content-standard,
2399 #profile-content-advanced {
2404 margin-bottom: 20px;
2406 .contact-block-div.forumlist-profile-advanced {
2411 ul.viewcontact_wrapper {
2413 margin-right: -15px;
2415 ul.viewcontact_wrapper > li {
2418 .contact-wrapper .contact-photo-wrapper button {
2421 .contact-wrapper.media {
2423 word-wrap: break-word;
2426 /* bootstrap hack for .media */
2427 .contact-wrapper.media .media-body {
2428 display: table-cell;
2433 .contact-wrapper.media:before,
2438 .contact-wrapper.media:after {
2441 .contact-wrapper .contact-photo-image-wrapper img.contact-photo.xl {
2445 .contact-wrapper .contact-photo-image-wrapper img.contact-photo-xs {
2449 .contact-wrapper .contact-photo-overlay-content.xl {
2452 .contact-wrapper .contact-photo-menu {
2456 .contact-entry-desc {
2457 color: $font_color_darker;
2459 .contact-entry-checkbox {
2462 .contact-wrapper .media-body .contact-entry-name h4.media-heading a {
2463 font-weight: bold !important;
2465 font-size: 15px !important;
2467 .contact-wrapper .contact-actions {
2470 .contact-wrapper .contact-action-link,
2471 .contact-wrapper .contact-action-link:hover,
2472 .textcomplete-item .contact-wrapper .contact-action-link {
2474 color: $font_color_darker;
2477 .contact-wrapper .contact-action-link {
2479 transition: all 0.25s ease-in-out;
2481 ul li:hover .contact-wrapper .contact-action-link {
2483 transition: all 0.25s ease-in-out;
2485 ul li:hover .contact-wrapper .contact-action-link:hover {
2488 #contacts-search-wrapper,
2489 #directory-search-wrapper {
2492 #contact-drop-confirm .contact-actions,
2493 #contact-drop-confirm .contact-photo-overlay,
2494 #contact-drop-confirm .contact-photo-menu {
2497 #contact-drop-confirm #confirm-form {
2502 #contact-edit-actions {
2505 #contact-edit-status-wrapper {
2507 background-color: rgba(225, 245, 254, $contentbg_transp);
2510 #contact-edit-settings {
2514 /* directory page */
2515 #directory-search-heading {
2519 /* group edit page */
2522 margin-bottom: 10px;
2525 .group-actions button,
2530 .contact-group-actions .fa-times-circle {
2533 .contact-group-actions .fa-plus-circle {
2537 #group-edit-wrapper {
2541 #group-edit-header {
2544 #group-update-wrapper .contact-photo-overlay {
2547 #group-update-wrapper .viewcontact_wrapper .contact-group-actions {
2552 #group-update-wrapper .viewcontact_wrapper .contact-group-link {
2557 #group-update-wrapper .viewcontact_wrapper .contact-action-link:hover {
2560 #group-update-wrapper .shortmode {
2564 #group-update-wrapper .shortmode .contact-photo {
2568 #group-update-wrapper .shortmode .media {
2571 #group-update-wrapper .shortmode .contact-entry-desc {
2572 font-size: 12px !important;
2574 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading {
2577 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading a {
2578 font-size: 13px !important;
2579 white-space: nowrap;
2581 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-rel,
2582 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-network {
2587 .message-content-wrapper > li {
2588 /* we need this overwriting because we have no template file
2589 for the general mail page /message
2591 list-style-type: none;
2594 max-height: calc(100vh - 200px);
2596 #mail-conversation {
2598 max-height: calc(100vh - 400px);
2603 .mail-conv-wrapper .media .contact-photo-wrapper img {
2607 .mail-thread #prvmail-to-label,
2608 .mail-thread #prvmail-subject-label {
2611 .mail-thread #prvmail-message-label > label {
2614 .mail-thread #prvmail-message-label textarea {
2617 .mail-conv-wrapper {
2619 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2622 height: calc(100vh - 150px);
2625 height: calc(100% - 20px);
2627 #message-preview ul {
2630 #message-preview .media-list li {
2634 #message-preview .media-list li:hover {
2635 border-left: none !important;
2637 #message-preview .media-list li a {
2640 .mail-list-outside-wrapper {
2642 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2644 .mail-list-outside-wrapper .contact-photo-wrapper img {
2651 #modal #prvmail-text-edit-bb .bb-img {
2656 #photo-album-edit-name-label {
2659 .photo-album-edit-name {
2663 .photo-album-actions {
2664 margin-bottom: 10px;
2666 .photo-album-actions .photos-order-link {
2671 .fc .fc-month-view .fc-content .fc-title .item-desc:hover {
2672 color: $link_hover_color;
2674 .fc .fc-list-item-title a {
2677 .fc .fc-list-item-title a[href]:hover {
2678 color: $link_hover_color;
2679 text-decoration: none;
2681 .event-wrapper .event-owner {
2682 margin-bottom: 15px;
2684 .event-wrapper .event-owner img {
2693 .event-wrapper .vevent {
2696 box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
2698 .event-wrapper .event-buttons {
2701 #event-form-wrapper {
2704 #event-edit-form-wrapper {
2708 color: $font_color_darker;
2710 #event-edit-form-wrapper #event-edit-time {
2713 .event-buttons .plink-event-link {
2716 .vevent .event-summary {
2719 .vevent .event-description {
2722 .vevent .event-location .location {
2726 .modal-body .vevent .event-summary {
2729 #event-preview .vevent .event-summary {
2734 .event-card-details,
2735 .event-card-header {
2739 .event-card-left-date {
2742 .vevent .event-card-header {
2745 .event-card-left-date {
2746 width: 60px; /* Das muss wahrscheinlich unterschiedlich sein zwischen calendar und stream */
2748 .event-card .event-date-wrapper > span {
2752 white-space: nowrap;
2754 .event-card .event-date-wrapper .event-card-short-month {
2756 text-transform: uppercase;
2758 .event-card .event-date-wrapper.medium .event-card-short-date {
2763 .event-card .event-card-content {
2765 padding: 0 5px 0 15px;
2766 box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
2770 .event-card .event-card-content .event-map-btn {
2776 .event-card .event-card-title {
2778 color: $font_color_darker;
2783 .event-card .event-card-location {
2787 .event-card .event-card-location br {
2790 .event-card .event-card-location br::after {
2793 .event-card-profile-name a {
2796 .event-card-profile-name a:hover {
2797 color: $link_hover_color;
2799 .event-card .event-card-content .event-location-map {
2804 .event-card .event-card-content .event-location-map .map {
2807 .event-card .description {
2809 box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, 0.1) inset;
2822 transform: translateZ(0);
2823 transition: opacity 0.2s;
2828 text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
2830 .photo-next-link > i,
2831 .photo-prev-link > i {
2832 vertical-align: super;
2834 .photo-next-link > i {
2843 #photo-photo:hover .photo-next-link,
2844 #photo-photo:hover .photo-prev-link {
2847 #photo-photo .photo-next-link:hover,
2848 #photo-photo .photo-prev-link:hover {
2852 .photo-comment-wrapper .comment {
2855 .photo-comment-wrapper .wall-item-content {
2856 color: $font_color_darker;
2859 .photo-comment-wrapper .comment-wwedit-wrapper,
2860 .photo-comment-wrapper .wall-item-outside-wrapper.media:first-child {
2865 .profile-listing-table {
2869 .profile-listing-row {
2872 .profile-listing-cell {
2873 display: table-cell;
2875 .profile-listing-photo {
2880 #profile-listing-new-link-wrapper {
2881 margin-bottom: 20px;
2884 #profile-photo-upload-section {
2888 #profile-photo-upload-close {
2893 .section-subtitle-wrapper {
2896 details.profile-jot-net[open] summary:before,
2897 .panel .section-subtitle-wrapper a.accordion-toggle:before {
2898 font-family: ForkAwesome;
2902 details.profile-jot-net summary:before,
2903 .panel .section-subtitle-wrapper a.accordion-toggle.collapsed:before {
2904 font-family: ForkAwesome;
2907 details.profile-jot-net summary:before {
2911 details.profile-jot-net[open] summary:before {
2915 #settings-nick-wrapper {
2916 margin-bottom: 20px;
2922 /* Emulates Bootstrap display */
2925 background-color: rgba(255, 255, 255, $contentbg_transp);
2928 box-shadow: 0 0 3px #dadada;
2929 -webkit-box-shadow: 0 0 3px #dadada;
2930 -moz-box-shadow: 0 0 3px #dadada;
2933 .settings-block.fakelink,
2934 .settings-block > .fakelink {
2938 .settings-block > .fakelink {
2939 margin: -10px -15px 10px -15px;
2940 border-radius: 4px 4px 0 0;
2943 .settings-block.fakelink:hover,
2944 .settings-block > .fakelink:hover {
2945 color: $link_hover_color;
2947 .settings-block.fakelink > h3,
2948 .settings-block > .fakelink > h3 {
2955 .section-subtitle-wrapper > h2 {
2958 margin-bottom: 10px;
2961 .fakelink > h3:before {
2962 padding-right: 10px;
2964 .widget.fakelink > h3:before,
2965 .settings-block.fakelink > h3:before {
2966 font-family: ForkAwesome;
2967 content: "\f0da"; /* Right Plain Pointer */
2969 .widget > .fakelink > h3:before,
2970 #sidebar-group-header > .fakelink > h3:before,
2971 .settings-block > .fakelink > h3:before {
2972 font-family: ForkAwesome;
2973 content: "\f0d7"; /* Bottom Plain Pointer */
2980 /* Intro Notifications */
2981 ul.notif-network-list {
2983 margin-right: -15px;
2985 ul.notif-network-list > li {
2987 padding-right: 15px;
2989 .intro-wrapper.media {
2991 word-wrap: break-word;
2994 .intro-photo-wrapper img.intro-photo {
3002 .intro-enty-name h4 {
3003 font-size: 15px !important;
3005 .intro-wrapper button.intro-action-link {
3007 transition: all 0.25s ease-in-out;
3009 .intro-wrapper button.intro-action-link,
3010 .intro-wrapper button.intro-action-link:hover {
3013 color: $font_color_darker;
3015 ul li:hover .intro-wrapper button.intro-action-link {
3017 transition: all 0.25s ease-in-out;
3019 ul li:hover .intro-wrapper button.intro-action-link:hover {
3022 .intro-action-buttons {
3026 transition: max-height 0.1s ease-out;
3028 ul.notif-network-list > li:hover .intro-action-buttons {
3030 transition: max-height 0.1s ease-in;
3034 .intro-network-label,
3035 .intro-location-label,
3036 .intro-keywords-label,
3038 .intro-knowyou-label,
3039 .intro-madeby-label {
3042 .intro-contact-info.xs .intro-url-label,
3043 .intro-contact-info.xs .intro-network-label,
3044 .intro-contact-info.xs .intro-location-label,
3045 .intro-contact-info.xs .intro-keywords-label,
3046 .intro-contact-info.xs .intro-about-label,
3047 .intro-contact-info.xs .intro-knowyou-label {
3052 /* Notifications Page */
3053 ul.notif-network-list li.unseen {
3054 background-color: #e3eff3;
3056 .notif-item img.notif-image {
3061 .notif-item .notif-desc-wrapper {
3064 .notif-item .notif-desc-wrapper a {
3067 color: $font_color_darker;
3074 /* This is a little bit hacky. Since the search page is used for diferent
3075 content types we can't apply the generic-page-wrapper class.
3076 So we apply the css of the generic-page-wrapper class to the ul element with some
3077 little modifications to emulate a standard page template */
3078 .search-content-wrapper > ul.viewcontact_wrapper {
3079 min-height: calc(100vh - 150px);
3081 padding-bottom: 20px;
3083 margin-bottom: 20px;
3085 background-color: rgba(255, 255, 255, $contentbg_transp);
3088 color: $font_color_darker;
3089 box-shadow: 0 0 3px #dadada;
3090 -webkit-box-shadow: 0 0 3px #dadada;
3091 -moz-box-shadow: 0 0 3px #dadada;
3095 section.help-content-wrapper h1 {
3096 padding-bottom: 0.3em;
3098 border-bottom: 1px solid #ddd;
3100 section.help-content-wrapper h2 {
3101 padding-bottom: 0.3em;
3103 border-bottom: 1px solid #ddd;
3105 section.help-content-wrapper h3 {
3108 section.help-content-wrapper h4 {
3111 section.help-content-wrapper h1,
3112 section.help-content-wrapper h2,
3113 section.help-content-wrapper h3,
3114 section.help-content-wrapper h4,
3115 section.help-content-wrapper h5,
3116 section.help-content-wrapper h6 {
3118 margin-bottom: 16px;
3122 section.help-content-wrapper p {
3125 section.help-content-wrapper p,
3126 section.help-content-wrapper a,
3127 section.help-content-wrapper li {
3133 #adminpage #frio_background_image .image-select {
3136 #adminpage #frio_background_image.input-group {
3139 #admin-summary-wrapper {
3142 #adminpage ul#addonslist,
3146 #adminpage li .icon {
3147 display: inline-block;
3148 vertical-align: text-top;
3152 #adminpage li .icon:before {
3154 display: inline-block;
3161 border: 1px solid #cccccc;
3163 background-color: $background_color;
3164 -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3165 -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3166 transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3168 #adminpage li .icon.on:after {
3169 font-family: "ForkAwesome";
3171 display: inline-block;
3184 #adminpage .addon .desc {
3187 #admin-users #users tr.blocked {
3188 background-color: #f8efc0;
3190 .adminpage .table-hover > tbody > tr:hover + tr.details {
3191 background-color: #f5f5f5;
3193 .offset-anchor::before {
3199 pointer-events: none;
3207 #identity-selector-wrapper {
3212 #identity-selector-wrapper .identity-match-photo {
3216 #identity-selector-wrapper .identity-match-photo button {
3219 #identity-selector-wrapper .identity-match-photo .badge {
3224 #identity-selector-wrapper .identity-match-name {
3227 #identity-selector-wrapper .identity-match-details {
3233 #register-openid-wrapper,
3234 #register-name-wrapper,
3235 #register-invite-wrapper,
3236 #profile-publish-wrapper {
3239 #register-openid-end,
3240 #register-nickname-end {
3245 * Overwriting for transparency and other colors
3247 main .nav-tabs > li.active > a,
3248 main .nav-tabs > li.active > a:focus,
3249 main .nav-tabs > li.active > a:hover {
3250 background-color: rgba(255, 255, 255, $contentbg_transp);
3260 @media (min-width: 768px) {
3267 * Framework overwrite
3270 /* textcomplete for contact filtering*/
3271 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list {
3272 position: relative !important;
3273 top: inherit !important;
3274 bottom: inherit !important;
3275 left: inherit !important;
3278 margin-right: -15px;
3279 background-color: transparent;
3283 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li {
3285 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
3287 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li:first-child {
3290 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list .textcomplete-item > a {
3291 padding: 0 !important;
3293 background-color: transparent !important;
3295 /* this is a little hack for texcomplete contact filter
3296 There are for some reasons empty <a> tags. I don't know why */
3297 .textcomplete-item .contact-wrapper a {
3302 body .tread-wrapper .hovercard a,
3303 body .tread-wrapper .hovercard a:hover {
3306 body .tread-wrapper .hovercard:hover .hover-card-content a {
3307 color: $link_color !important;
3310 /* Pagination improvements */
3315 .pagination > li > a,
3316 .pagination > li > span {
3320 .pagination > li > a:hover,
3321 .pagination > li > span:hover {
3322 color: $link_hover_color;
3324 .pagination > .active > a,
3325 .pagination > .active > a:focus,
3326 .pagination > .active > a:hover,
3327 .pagination > .active > span,
3328 .pagination > .active > span:focus,
3329 .pagination > .active > span:hover {
3330 background-color: $link_color;
3331 border-color: $link_color;
3334 .pagination li.pager_n a {
3338 .pagination .pager_prev a {
3341 border-top-right-radius: 3px;
3342 border-bottom-right-radius: 3px;
3344 .pagination .pager_next a {
3347 border-top-left-radius: 3px;
3348 border-bottom-left-radius: 3px;
3351 .pager .previous > a {
3355 .pagination .disabled > a,
3356 .pager .disabled > a {
3362 background-color: rgba(255, 255, 255, $contentbg_transp);
3366 * some temporary workarounds until this will solved
3367 * elsewhere (e.g. new templates)
3369 section .profile-match-wrapper {
3376 #login-submit-wrapper {
3379 #lost-password-link {
3382 #login-lost-password-link {
3383 margin-bottom: 10px;
3389 #id_password_wrapper {
3390 margin-bottom: unset;
3397 background: #8ad0a1;
3404 .mod-home.is-not-singleuser,
3406 background-color: $login_bg_color;
3407 background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4)), url($login_bg_image);
3408 background-size: cover;
3409 background-attachment: fixed;
3410 background-position: center;
3413 .mod-home.is-not-singleuser nav.navbar,
3414 .mod-login nav.navbar {
3415 background-color: transparent;
3417 .mod-home.is-not-singleuser #topbar-second,
3418 .mod-login #topbar-second {
3419 background-color: transparent;
3423 .mod-home.is-not-singleuser .login-content,
3424 .mod-login .login-content {
3429 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3433 .mod-home.is-not-singleuser .login-form > #login-form label,
3434 .mod-login #content #login-form label {
3438 .mod-home.is-not-singleuser .login-panel-content,
3439 .mod-login .login-panel-content {
3440 background-color: rgba(255, 255, 255, 0.85);
3444 background: $nav_bg !important;
3445 color: $btn_primary_color !important;
3448 -webkit-box-shadow: none;
3450 -moz-box-shadow: none;
3451 background-image: none;
3459 width: 100% !important;
3462 .qq-upload-drop-area {
3463 background: white !important;
3466 -webkit-box-shadow: none;
3468 -moz-box-shadow: none;
3469 background-image: none;
3477 width: 100% !important;
3478 display: block !important;
3479 position: relative !important;
3480 border: black 1px dashed !important;
3481 margin-bottom: 5px !important;
3482 margin-top: 15px !important;
3486 * The different views of js fullcalendar
3490 margin-bottom: 10px;
3494 #event-calendar-title {
3495 display: inline-block;
3504 #fc-header-right .dropdown > button {
3507 #event-calendar-title {
3508 vertical-align: middle;
3510 #event-calendar-views {
3517 .fc .fc-month-view td.fc-widget-content,
3519 .fc .fc-list-view .fc-list-table td,
3523 .fc td.fc-widget-header,
3524 .fc th.fc-widget-header {
3529 .fc .fc-month-view td.fc-day {
3532 border-bottom: 1px solid;
3535 .fc .fc-day-grid-container .fc-row {
3536 border-bottom: 1px solid;
3539 .fc tr td.fc-today {
3542 .fc .fc-month-view .fc-content .fc-title .item-desc {
3545 .fc .fc-view-container {
3548 .fc .fc-list-view td {
3551 #events-calendar.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
3556 background-color: #e3f2fd;
3557 border: 1px solid #bbdefb;
3558 color: $font_color_darker;
3560 .fc .fc-month-view .fc-time,
3561 .fc .fc-listMonth-view .fc-list-item-time,
3562 .fc .fc-listMonth-view .fc-list-item-marker,
3563 .fc .fc-listMonth-view .fc-widget-header {
3566 .fc .fc-listMonth-view .fc-list-item:hover td {
3567 background: transparent;
3570 .fc .fc-listMonth-view .seperator {
3581 .event-card .event-label,
3582 .event-card .location-label {
3585 .popover.event-card .event-card-basic-content {
3590 .event-card .event-hover-location .location {
3595 /* Medium devices (desktops, 992px and up) */
3596 @media (min-width: 992px) {
3597 .mod-home.is-not-singleuser #content,
3598 .mod-login #content {
3599 margin-top: 100px !important;
3602 .mod-home.is-not-singleuser .login-form > #login-form,
3603 .mod-home.is-not-singleuser .login-form > #login-extra-links,
3604 .mod-login #content #login-form {
3605 background-color: #fff;
3609 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3611 background-color: white;
3614 .mod-home.is-not-singleuser .login-form > #login-form label,
3615 .mod-login #content #login-form label {
3619 .mod-home.is-not-singleuser .login-form::before,
3620 .mod-login #content #login-form::before {
3624 background-color: rgba(255, 255, 255, 0.1);
3632 .mod-home.is-not-singleuser .login-form::after,
3633 .mod-login #content #login-form::after {
3637 background-color: rgba(255, 255, 255, 0.2);
3646 /* Mobile display */
3647 @media (max-width: 600px) {
3655 #friendica-logo-mask {
3669 .panel .panel-body {
3673 .toplevel_item > .wall-item-container {
3681 .wall-item-actions {
3689 .generic-page-wrapper,
3690 .videos-content-wrapper,
3691 .suggest-content-wrapper,
3692 .help-content-wrapper,
3693 .match-content-wrapper,
3694 .dirfind-content-wrapper,
3695 .directory-content-wrapper,
3696 .delegation-content-wrapper,
3697 .notes-content-wrapper,
3698 .message-content-wrapper,
3699 .apps-content-wrapper,
3701 .delegate-content-wrapper,
3702 .uexport-content-wrapper,
3703 .dfrn_request-content-wrapper,
3704 .friendica-content-wrapper,
3705 .credits-content-wrapper,
3706 .nogroup-content-wrapper,
3707 .profperm-content-wrapper,
3708 .invite-content-wrapper,
3709 .tos-content-wrapper,
3710 .fsuggest-content-wrapper {
3770 .wwto .contact-photo {
3778 Prevent automatic zoom on input focus on iOS
3779 see https://stackoverflow.com/a/16255670
3785 .wall-item-container.thread_level_3,
3786 .wall-item-container.thread_level_4,
3787 .wall-item-container.thread_level_5,
3788 .wall-item-container.thread_level_6,
3789 .wall-item-container.thread_level_7 {