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 {
1804 object-fit: contain;
1806 .wall-item-body > img,
1807 .wall-item-body > a > img {
1810 .wall-item-body .body-attach > a {
1811 color: $font_color_darker;
1812 display: inline-block;
1814 .wall-item-body .body-attach > a div {
1815 color: $font_color_darker;
1819 /* wall-item content elements */
1827 box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.1) inset, 0 1px 1px rgba(0, 0, 0, 0.05);
1829 @media screen and (max-width: 767px) {
1835 margin: 5px -10px 0;
1839 box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.05);
1845 margin-bottom: 10px;
1849 blockquote.shared_content {
1855 padding: 10px 10px 1px 0;
1860 .type-link img.attachment-image {
1863 .type-link blockquote,
1864 .type-video blockquote {
1868 .oembed.video .embed_video > div::before {
1869 font-family: ForkAwesome;
1870 font-weight: normal;
1872 display: inline-block;
1873 text-decoration: inherit;
1874 vertical-align: top;
1882 .oembed.video .embed_video > div {
1883 background-color: rgba(0, 0, 0, 0.2);
1884 -webkit-transition: all 0.25s ease-in-out;
1885 -moz-transition: all 0.25s ease-in-out;
1886 -o-transition: all 0.25s ease-in-out;
1887 -ms-transition: all 0.25s ease-in-out;
1888 transition: all 0.25s ease-in-out;
1890 .oembed.video .embed_video > div:hover {
1891 background-color: rgba(0, 0, 0, 0);
1893 .oembed.video .embed_video.active {
1896 .oembed.video .embed_video.active iframe {
1897 width: 100% !important;
1906 color: $font_color_darker;
1909 .wall-item-tags a:hover {
1910 text-decoration: none;
1912 .wall-item-bottom .label,
1913 .wall-item-bottom .label a {
1916 .wall-item-tags .category,
1917 .wall-item-tags .folder {
1921 /* item social action buttons */
1922 .wall-item-actions {
1925 justify-content: space-between;
1927 .wall-item-actions a,
1928 .wall-item-actions button {
1930 color: $font_color_darker;
1932 .wall-item-actions .active {
1936 .wall-item-actions-left {
1937 display: table-cell;
1938 vertical-align: middle;
1940 .wall-item-actions-right {
1943 .wall-item-actions .checkbox {
1947 .wall-item-actions .button-comments,
1948 .wall-item-actions .button-votes,
1949 .wall-item-actions .button-likes {
1950 text-transform: capitalize;
1952 .wall-item-actions button:hover {
1953 color: $font_color_darker;
1954 text-decoration: underline;
1956 .wall-item-actions .separator {
1960 .wall-item-responses > div > p {
1964 /* wall item hover effects */
1966 @media (min-width: 768px) {
1967 /* Tags and mentions */
1968 .wall-item-container .wall-item-bottom .wall-item-tags span.label {
1969 filter: grayscale(0.5);
1972 -webkit-transition: all 0.25s ease-in-out;
1973 -moz-transition: all 0.25s ease-in-out;
1974 -o-transition: all 0.25s ease-in-out;
1975 -ms-transition: all 0.25s ease-in-out;
1976 transition: all 0.25s ease-in-out;
1979 .wall-item-container:hover .wall-item-bottom .wall-item-tags span.label {
1980 filter: grayscale(0);
1983 -webkit-transition: all 0.25s ease-in-out;
1984 -moz-transition: all 0.25s ease-in-out;
1985 -o-transition: all 0.25s ease-in-out;
1986 -ms-transition: all 0.25s ease-in-out;
1987 transition: all 0.25s ease-in-out;
1989 /* Like/Comment/etc buttons */
1990 .wall-item-container .wall-item-links,
1991 .wall-item-container .wall-item-actions button > a {
1994 -webkit-transition: all 0.25s ease-in-out;
1995 -moz-transition: all 0.25s ease-in-out;
1996 -o-transition: all 0.25s ease-in-out;
1997 -ms-transition: all 0.25s ease-in-out;
1998 transition: all 0.25s ease-in-out;
2000 .wall-item-container:hover .wall-item-links,
2001 .wall-item-container:hover .wall-item-actions button > a {
2004 -webkit-transition: all 0.25s ease-in-out;
2005 -moz-transition: all 0.25s ease-in-out;
2006 -o-transition: all 0.25s ease-in-out;
2007 -ms-transition: all 0.25s ease-in-out;
2008 transition: all 0.25s ease-in-out;
2010 .wall-item-container .wall-item-body .body-attach > a:hover {
2018 wall-item-comment-wrapper.well {
2021 background-color: rgba(237, 237, 237, $contentbg_transp);
2022 background-image: none;
2024 background-color: red;
2026 wall-item-comment-wrapper.well-small {
2030 wall-item-comment-wrapper.well hr {
2031 border-top: 1px solid #d9d9d9;
2033 .wall-entry wall-item-comment-wrapper.well {
2036 .comment-container {
2038 border-top-left-radius: 3px;
2039 border-top-right-radius: 3px;
2040 border-bottom-right-radius: 0px;
2041 border-bottom-left-radius: 0px;
2044 position: relative !important;
2047 .hide-comments-outer {
2048 background-color: rgba(0, 0, 0, 0.03);
2050 border-radius: 0.5em 0.5em 0 0;
2052 .hide-comments-total {
2061 .wall-item-comment-wrapper {
2063 border-top: 1px solid rgba(255, 255, 255, 0.8);
2064 background-color: rgba(0, 0, 0, 0.03);
2065 border-radius: 0 0 4px 4px;
2069 .comment-fake-form {
2070 border-color: #d9d9d9;
2072 .comment-fake-form textarea {
2076 .comment-container .wall-item-comment-wrapper {
2080 .comment-edit-form textarea {
2084 .comment-edit-submit-wrapper {
2089 .comment-icon-list {
2091 justify-content: space-between;
2094 /* acpopup + textcompletion*/
2096 background-color: #ffffff;
2100 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
2105 /** @todo: we schould consider the possebility to overwrite bootstrap dropdowns
2106 at the beginning of this file to get rid of the !important */
2107 .textcomplete-item > a {
2108 color: $font_color_darker !important;
2109 padding: 5px 20px !important;
2111 .textcomplete-item.active > a {
2112 background-color: rgb(247, 247, 247) !important;
2113 background-image: none !important;
2114 border-left: 3px solid $link_color;
2115 padding-left: 17px !important;
2117 .textcomplete-item a .forum {
2124 /* The wall-item thread levels */
2125 .wall-item-container.thread_level_3,
2126 .wall-item-container.thread_level_4,
2127 .wall-item-container.thread_level_5,
2128 .wall-item-container.thread_level_6,
2129 .wall-item-container.thread_level_7 {
2139 background-color: rgba(247, 247, 247, $contentbg_transp);
2140 box-shadow: 0 0 3px #dadada;
2141 -webkit-box-shadow: 0 0 3px #dadada;
2142 -moz-box-shadow: 0 0 3px #dadada;
2147 section > .tabbar-wrapper {
2148 /* The tabbar shouldn't' be visibile inside
2149 the section element. Only after we have
2150 moved it to the nav through js */
2151 display: none !important;
2160 #tabmenu .search-heading {
2162 text-overflow: ellipsis;
2163 white-space: nowrap;
2176 border-bottom: 0 solid $link_color;
2179 transition: all 0.15s ease;
2187 border-bottom-width: 4px;
2189 .tabbar.visible-xs .tabs-extended {
2192 #dropdownMenuTools-xs {
2195 ul.tabbar ul.tabs-extended:hover li.dropdown {
2199 ul.tabbar ul.tabs-extended li.active {
2201 border-bottom-width: 2px;
2203 ul.tabbar ul.tabs-extended li.active a {
2206 ul.dropdown-menu li:hover {
2212 box-sizing: border-box;
2215 .dropdown-menu li a,
2216 .dropdown-menu li .btn-link {
2217 color: $font_color_darker;
2219 .dropdown-menu li > :hover,
2220 .dropdown-menu li > :visited,
2221 .dropdown-menu li > :focus {
2225 .dropdown-menu li:first-child {
2229 /* Notificaiotn badges */
2230 #mail-update-li.show {
2231 display: inline-block !important;
2235 p.wall-item-announce,
2237 .media .shared-time,
2240 .media .location a {
2242 color: $font_color_darker;
2246 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2248 border-left: 3px solid rgba(255, 255, 255, 0);
2251 .media-list > li:hover,
2252 .media-list > li.selected,
2253 .media-list > li.active {
2254 border-left: 3px solid $link_color;
2255 background-color: rgba(247, 247, 247, $contentbg_transp);
2262 .form-control:focus {
2263 border: 2px solid $link_color;
2267 .radio label::before,
2268 .checkbox label::before {
2269 background-color: rgba(255, 255, 255, $contentbg_transp);
2271 .radio label::after {
2272 background-color: $link_color;
2274 .checkbox label::after {
2278 .checkbox input[type="checkbox"]:focus + label::before,
2279 .radio input[type="radio"]:focus + label::before {
2280 outline-color: $link_hover_color;
2284 color: $font_color_darker;
2287 input[type="range"].form-control {
2293 .form-control.form-search {
2294 border-radius: 30px;
2295 background-image: url(img/icon_search16x16.png);
2296 background-repeat: no-repeat;
2297 background-position: 10px 8px;
2300 .form-group-search {
2305 .form-group-search .form-button-search {
2309 border-radius: 30px;
2311 .search-input.form-control.form-search {
2319 .search-content-wrapper > #search-header-wrapper {
2322 .search-content-wrapper > .section-title-wrapper {
2325 #navbar-button > #search-save {
2328 /* Section-Content-Wrapper */
2329 #search-header-wrapper {
2331 padding-bottom: 20px;
2332 margin-bottom: 20px;
2334 background-color: rgba(255, 255, 255, $contentbg_transp);
2337 color: $font_color_darker;
2338 box-shadow: 0 0 3px #dadada;
2339 -webkit-box-shadow: 0 0 3px #dadada;
2340 -moz-box-shadow: 0 0 3px #dadada;
2347 section > .generic-page-wrapper,
2348 .videos-content-wrapper,
2349 .suggest-content-wrapper,
2350 .help-content-wrapper,
2351 .match-content-wrapper,
2352 .dirfind-content-wrapper,
2353 .delegation-content-wrapper,
2354 .notes-content-wrapper,
2355 .message-content-wrapper,
2356 .apps-content-wrapper,
2358 .delegate-content-wrapper,
2359 .uexport-content-wrapper,
2360 .dfrn_request-content-wrapper,
2361 .friendica-content-wrapper,
2362 .credits-content-wrapper,
2363 .nogroup-content-wrapper,
2364 .profperm-content-wrapper,
2365 .invite-content-wrapper,
2366 .tos-content-wrapper,
2367 .fsuggest-content-wrapper {
2368 min-height: calc(100vh - 150px);
2370 padding-bottom: 20px;
2371 margin-bottom: 20px;
2373 background-color: rgba(255, 255, 255, $contentbg_transp);
2376 color: $font_color_darker;
2377 box-shadow: 0 0 3px #dadada;
2378 -webkit-box-shadow: 0 0 3px #dadada;
2379 -moz-box-shadow: 0 0 3px #dadada;
2381 #content:hover .page-action.faded-icon {
2383 transition: all 0.25s ease-in-out;
2385 #content .page-action.faded-icon:hover {
2389 .section-title-wrapper {
2392 /* Home and Login Page */
2393 body.mod-home nav.navbar .nav > li > a:hover {
2394 background-color: rgba(255, 255, 255, 0.2);
2396 body.mod-home .navbar #nav-login,
2397 body.mod-login .navbar #nav-login {
2401 #profile-content-standard,
2402 #profile-content-advanced {
2407 margin-bottom: 20px;
2409 .contact-block-div.forumlist-profile-advanced {
2414 ul.viewcontact_wrapper {
2416 margin-right: -15px;
2418 ul.viewcontact_wrapper > li {
2421 .contact-wrapper .contact-photo-wrapper button {
2424 .contact-wrapper.media {
2426 word-wrap: break-word;
2429 /* bootstrap hack for .media */
2430 .contact-wrapper.media .media-body {
2431 display: table-cell;
2436 .contact-wrapper.media:before,
2441 .contact-wrapper.media:after {
2444 .contact-wrapper .contact-photo-image-wrapper img.contact-photo.xl {
2448 .contact-wrapper .contact-photo-image-wrapper img.contact-photo-xs {
2452 .contact-wrapper .contact-photo-overlay-content.xl {
2455 .contact-wrapper .contact-photo-menu {
2459 .contact-entry-desc {
2460 color: $font_color_darker;
2462 .contact-entry-checkbox {
2465 .contact-wrapper .media-body .contact-entry-name h4.media-heading a {
2466 font-weight: bold !important;
2468 font-size: 15px !important;
2470 .contact-wrapper .contact-actions {
2473 .contact-wrapper .contact-action-link,
2474 .contact-wrapper .contact-action-link:hover,
2475 .textcomplete-item .contact-wrapper .contact-action-link {
2477 color: $font_color_darker;
2480 .contact-wrapper .contact-action-link {
2482 transition: all 0.25s ease-in-out;
2484 ul li:hover .contact-wrapper .contact-action-link {
2486 transition: all 0.25s ease-in-out;
2488 ul li:hover .contact-wrapper .contact-action-link:hover {
2491 #contacts-search-wrapper,
2492 #directory-search-wrapper {
2495 #contact-drop-confirm .contact-actions,
2496 #contact-drop-confirm .contact-photo-overlay,
2497 #contact-drop-confirm .contact-photo-menu {
2500 #contact-drop-confirm #confirm-form {
2505 #contact-edit-actions {
2508 #contact-edit-status-wrapper {
2510 background-color: rgba(225, 245, 254, $contentbg_transp);
2513 #contact-edit-settings {
2517 /* directory page */
2518 #directory-search-heading {
2522 /* group edit page */
2525 margin-bottom: 10px;
2528 .group-actions button,
2533 .contact-group-actions .fa-times-circle {
2536 .contact-group-actions .fa-plus-circle {
2540 #group-edit-wrapper {
2544 #group-edit-header {
2547 #group-update-wrapper .contact-photo-overlay {
2550 #group-update-wrapper .viewcontact_wrapper .contact-group-actions {
2555 #group-update-wrapper .viewcontact_wrapper .contact-group-link {
2560 #group-update-wrapper .viewcontact_wrapper .contact-action-link:hover {
2563 #group-update-wrapper .shortmode {
2567 #group-update-wrapper .shortmode .contact-photo {
2571 #group-update-wrapper .shortmode .media {
2574 #group-update-wrapper .shortmode .contact-entry-desc {
2575 font-size: 12px !important;
2577 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading {
2580 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading a {
2581 font-size: 13px !important;
2582 white-space: nowrap;
2584 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-rel,
2585 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-network {
2590 .message-content-wrapper > li {
2591 /* we need this overwriting because we have no template file
2592 for the general mail page /message
2594 list-style-type: none;
2597 max-height: calc(100vh - 200px);
2599 #mail-conversation {
2601 max-height: calc(100vh - 400px);
2606 .mail-conv-wrapper .media .contact-photo-wrapper img {
2610 .mail-thread #prvmail-to-label,
2611 .mail-thread #prvmail-subject-label {
2614 .mail-thread #prvmail-message-label > label {
2617 .mail-thread #prvmail-message-label textarea {
2620 .mail-conv-wrapper {
2622 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2625 height: calc(100vh - 150px);
2628 height: calc(100% - 20px);
2630 #message-preview ul {
2633 #message-preview .media-list li {
2637 #message-preview .media-list li:hover {
2638 border-left: none !important;
2640 #message-preview .media-list li a {
2643 .mail-list-outside-wrapper {
2645 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2647 .mail-list-outside-wrapper .contact-photo-wrapper img {
2654 #modal #prvmail-text-edit-bb .bb-img {
2659 #photo-album-edit-name-label {
2662 .photo-album-edit-name {
2666 .photo-album-actions {
2667 margin-bottom: 10px;
2669 .photo-album-actions .photos-order-link {
2674 .fc .fc-month-view .fc-content .fc-title .item-desc:hover {
2675 color: $link_hover_color;
2677 .fc .fc-list-item-title a {
2680 .fc .fc-list-item-title a[href]:hover {
2681 color: $link_hover_color;
2682 text-decoration: none;
2684 .event-wrapper .event-owner {
2685 margin-bottom: 15px;
2687 .event-wrapper .event-owner img {
2696 .event-wrapper .vevent {
2699 box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
2701 .event-wrapper .event-buttons {
2704 #event-form-wrapper {
2707 #event-edit-form-wrapper {
2711 color: $font_color_darker;
2713 #event-edit-form-wrapper #event-edit-time {
2716 .event-buttons .plink-event-link {
2719 .vevent .event-summary {
2722 .vevent .event-description {
2725 .vevent .event-location .location {
2729 .modal-body .vevent .event-summary {
2732 #event-preview .vevent .event-summary {
2737 .event-card-details,
2738 .event-card-header {
2742 .event-card-left-date {
2745 .vevent .event-card-header {
2748 .event-card-left-date {
2749 width: 60px; /* Das muss wahrscheinlich unterschiedlich sein zwischen calendar und stream */
2751 .event-card .event-date-wrapper > span {
2755 white-space: nowrap;
2757 .event-card .event-date-wrapper .event-card-short-month {
2759 text-transform: uppercase;
2761 .event-card .event-date-wrapper.medium .event-card-short-date {
2766 .event-card .event-card-content {
2768 padding: 0 5px 0 15px;
2769 box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
2773 .event-card .event-card-content .event-map-btn {
2779 .event-card .event-card-title {
2781 color: $font_color_darker;
2786 .event-card .event-card-location {
2790 .event-card .event-card-location br {
2793 .event-card .event-card-location br::after {
2796 .event-card-profile-name a {
2799 .event-card-profile-name a:hover {
2800 color: $link_hover_color;
2802 .event-card .event-card-content .event-location-map {
2807 .event-card .event-card-content .event-location-map .map {
2810 .event-card .description {
2812 box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, 0.1) inset;
2825 transform: translateZ(0);
2826 transition: opacity 0.2s;
2831 text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
2833 .photo-next-link > i,
2834 .photo-prev-link > i {
2835 vertical-align: super;
2837 .photo-next-link > i {
2846 #photo-photo:hover .photo-next-link,
2847 #photo-photo:hover .photo-prev-link {
2850 #photo-photo .photo-next-link:hover,
2851 #photo-photo .photo-prev-link:hover {
2855 .photo-comment-wrapper .comment {
2858 .photo-comment-wrapper .wall-item-content {
2859 color: $font_color_darker;
2862 .photo-comment-wrapper .comment-wwedit-wrapper,
2863 .photo-comment-wrapper .wall-item-outside-wrapper.media:first-child {
2868 .profile-listing-table {
2872 .profile-listing-row {
2875 .profile-listing-cell {
2876 display: table-cell;
2878 .profile-listing-photo {
2883 #profile-listing-new-link-wrapper {
2884 margin-bottom: 20px;
2887 #profile-photo-upload-section {
2891 #profile-photo-upload-close {
2896 .section-subtitle-wrapper {
2899 details.profile-jot-net[open] summary:before,
2900 .panel .section-subtitle-wrapper a.accordion-toggle:before {
2901 font-family: ForkAwesome;
2905 details.profile-jot-net summary:before,
2906 .panel .section-subtitle-wrapper a.accordion-toggle.collapsed:before {
2907 font-family: ForkAwesome;
2910 details.profile-jot-net summary:before {
2914 details.profile-jot-net[open] summary:before {
2918 #settings-nick-wrapper {
2919 margin-bottom: 20px;
2925 /* Emulates Bootstrap display */
2928 background-color: rgba(255, 255, 255, $contentbg_transp);
2931 box-shadow: 0 0 3px #dadada;
2932 -webkit-box-shadow: 0 0 3px #dadada;
2933 -moz-box-shadow: 0 0 3px #dadada;
2936 .settings-block.fakelink,
2937 .settings-block > .fakelink {
2941 .settings-block > .fakelink {
2942 margin: -10px -15px 10px -15px;
2943 border-radius: 4px 4px 0 0;
2946 .settings-block.fakelink:hover,
2947 .settings-block > .fakelink:hover {
2948 color: $link_hover_color;
2950 .settings-block.fakelink > h3,
2951 .settings-block > .fakelink > h3 {
2958 .section-subtitle-wrapper > h2 {
2961 margin-bottom: 10px;
2964 .fakelink > h3:before {
2965 padding-right: 10px;
2967 .widget.fakelink > h3:before,
2968 .settings-block.fakelink > h3:before {
2969 font-family: ForkAwesome;
2970 content: "\f0da"; /* Right Plain Pointer */
2972 .widget > .fakelink > h3:before,
2973 #sidebar-group-header > .fakelink > h3:before,
2974 .settings-block > .fakelink > h3:before {
2975 font-family: ForkAwesome;
2976 content: "\f0d7"; /* Bottom Plain Pointer */
2983 /* Intro Notifications */
2984 ul.notif-network-list {
2986 margin-right: -15px;
2988 ul.notif-network-list > li {
2990 padding-right: 15px;
2992 .intro-wrapper.media {
2994 word-wrap: break-word;
2997 .intro-photo-wrapper img.intro-photo {
3005 .intro-enty-name h4 {
3006 font-size: 15px !important;
3008 .intro-wrapper button.intro-action-link {
3010 transition: all 0.25s ease-in-out;
3012 .intro-wrapper button.intro-action-link,
3013 .intro-wrapper button.intro-action-link:hover {
3016 color: $font_color_darker;
3018 ul li:hover .intro-wrapper button.intro-action-link {
3020 transition: all 0.25s ease-in-out;
3022 ul li:hover .intro-wrapper button.intro-action-link:hover {
3025 .intro-action-buttons {
3029 transition: max-height 0.1s ease-out;
3031 ul.notif-network-list > li:hover .intro-action-buttons {
3033 transition: max-height 0.1s ease-in;
3037 .intro-network-label,
3038 .intro-location-label,
3039 .intro-keywords-label,
3041 .intro-knowyou-label,
3042 .intro-madeby-label {
3045 .intro-contact-info.xs .intro-url-label,
3046 .intro-contact-info.xs .intro-network-label,
3047 .intro-contact-info.xs .intro-location-label,
3048 .intro-contact-info.xs .intro-keywords-label,
3049 .intro-contact-info.xs .intro-about-label,
3050 .intro-contact-info.xs .intro-knowyou-label {
3055 /* Notifications Page */
3056 ul.notif-network-list li.unseen {
3057 background-color: #e3eff3;
3059 .notif-item img.notif-image {
3064 .notif-item .notif-desc-wrapper {
3067 .notif-item .notif-desc-wrapper a {
3070 color: $font_color_darker;
3077 /* This is a little bit hacky. Since the search page is used for diferent
3078 content types we can't apply the generic-page-wrapper class.
3079 So we apply the css of the generic-page-wrapper class to the ul element with some
3080 little modifications to emulate a standard page template */
3081 .search-content-wrapper > ul.viewcontact_wrapper {
3082 min-height: calc(100vh - 150px);
3084 padding-bottom: 20px;
3086 margin-bottom: 20px;
3088 background-color: rgba(255, 255, 255, $contentbg_transp);
3091 color: $font_color_darker;
3092 box-shadow: 0 0 3px #dadada;
3093 -webkit-box-shadow: 0 0 3px #dadada;
3094 -moz-box-shadow: 0 0 3px #dadada;
3098 section.help-content-wrapper h1 {
3099 padding-bottom: 0.3em;
3101 border-bottom: 1px solid #ddd;
3103 section.help-content-wrapper h2 {
3104 padding-bottom: 0.3em;
3106 border-bottom: 1px solid #ddd;
3108 section.help-content-wrapper h3 {
3111 section.help-content-wrapper h4 {
3114 section.help-content-wrapper h1,
3115 section.help-content-wrapper h2,
3116 section.help-content-wrapper h3,
3117 section.help-content-wrapper h4,
3118 section.help-content-wrapper h5,
3119 section.help-content-wrapper h6 {
3121 margin-bottom: 16px;
3125 section.help-content-wrapper p {
3128 section.help-content-wrapper p,
3129 section.help-content-wrapper a,
3130 section.help-content-wrapper li {
3136 #adminpage #frio_background_image .image-select {
3139 #adminpage #frio_background_image.input-group {
3142 #admin-summary-wrapper {
3145 #adminpage ul#addonslist,
3149 #adminpage li .icon {
3150 display: inline-block;
3151 vertical-align: text-top;
3155 #adminpage li .icon:before {
3157 display: inline-block;
3164 border: 1px solid #cccccc;
3166 background-color: $background_color;
3167 -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3168 -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3169 transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3171 #adminpage li .icon.on:after {
3172 font-family: "ForkAwesome";
3174 display: inline-block;
3187 #adminpage .addon .desc {
3190 #admin-users #users tr.blocked {
3191 background-color: #f8efc0;
3193 .adminpage .table-hover > tbody > tr:hover + tr.details {
3194 background-color: #f5f5f5;
3196 .offset-anchor::before {
3202 pointer-events: none;
3210 #identity-selector-wrapper {
3215 #identity-selector-wrapper .identity-match-photo {
3219 #identity-selector-wrapper .identity-match-photo button {
3222 #identity-selector-wrapper .identity-match-photo .badge {
3227 #identity-selector-wrapper .identity-match-name {
3230 #identity-selector-wrapper .identity-match-details {
3236 #register-openid-wrapper,
3237 #register-name-wrapper,
3238 #register-invite-wrapper,
3239 #profile-publish-wrapper {
3242 #register-openid-end,
3243 #register-nickname-end {
3248 * Overwriting for transparency and other colors
3250 main .nav-tabs > li.active > a,
3251 main .nav-tabs > li.active > a:focus,
3252 main .nav-tabs > li.active > a:hover {
3253 background-color: rgba(255, 255, 255, $contentbg_transp);
3263 @media (min-width: 768px) {
3270 * Framework overwrite
3273 /* textcomplete for contact filtering*/
3274 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list {
3275 position: relative !important;
3276 top: inherit !important;
3277 bottom: inherit !important;
3278 left: inherit !important;
3281 margin-right: -15px;
3282 background-color: transparent;
3286 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li {
3288 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
3290 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li:first-child {
3293 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list .textcomplete-item > a {
3294 padding: 0 !important;
3296 background-color: transparent !important;
3298 /* this is a little hack for texcomplete contact filter
3299 There are for some reasons empty <a> tags. I don't know why */
3300 .textcomplete-item .contact-wrapper a {
3305 body .tread-wrapper .hovercard a,
3306 body .tread-wrapper .hovercard a:hover {
3309 body .tread-wrapper .hovercard:hover .hover-card-content a {
3310 color: $link_color !important;
3313 /* Pagination improvements */
3318 .pagination > li > a,
3319 .pagination > li > span {
3323 .pagination > li > a:hover,
3324 .pagination > li > span:hover {
3325 color: $link_hover_color;
3327 .pagination > .active > a,
3328 .pagination > .active > a:focus,
3329 .pagination > .active > a:hover,
3330 .pagination > .active > span,
3331 .pagination > .active > span:focus,
3332 .pagination > .active > span:hover {
3333 background-color: $link_color;
3334 border-color: $link_color;
3337 .pagination li.pager_n a {
3341 .pagination .pager_prev a {
3344 border-top-right-radius: 3px;
3345 border-bottom-right-radius: 3px;
3347 .pagination .pager_next a {
3350 border-top-left-radius: 3px;
3351 border-bottom-left-radius: 3px;
3354 .pager .previous > a {
3358 .pagination .disabled > a,
3359 .pager .disabled > a {
3365 background-color: rgba(255, 255, 255, $contentbg_transp);
3369 * some temporary workarounds until this will solved
3370 * elsewhere (e.g. new templates)
3372 section .profile-match-wrapper {
3379 #login-submit-wrapper {
3382 #lost-password-link {
3385 #login-lost-password-link {
3386 margin-bottom: 10px;
3392 #id_password_wrapper {
3393 margin-bottom: unset;
3400 background: #8ad0a1;
3407 .mod-home.is-not-singleuser,
3409 background-color: $login_bg_color;
3410 background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4)), url($login_bg_image);
3411 background-size: cover;
3412 background-attachment: fixed;
3413 background-position: center;
3416 .mod-home.is-not-singleuser nav.navbar,
3417 .mod-login nav.navbar {
3418 background-color: transparent;
3421 .mod-home.is-not-singleuser #topbar-second,
3422 .mod-login #topbar-second {
3423 background-color: transparent;
3427 .mod-home.is-not-singleuser .login-content,
3428 .mod-login .login-content {
3433 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3437 .mod-home.is-not-singleuser .login-form > #login-form label,
3438 .mod-login #content #login-form label {
3442 .mod-home.is-not-singleuser .login-panel-content,
3443 .mod-login .login-panel-content {
3444 background-color: rgba(255, 255, 255, 0.85);
3448 background: $nav_bg !important;
3449 color: $btn_primary_color !important;
3452 -webkit-box-shadow: none;
3454 -moz-box-shadow: none;
3455 background-image: none;
3463 width: 100% !important;
3466 .qq-upload-drop-area {
3467 background: white !important;
3470 -webkit-box-shadow: none;
3472 -moz-box-shadow: none;
3473 background-image: none;
3481 width: 100% !important;
3482 display: block !important;
3483 position: relative !important;
3484 border: black 1px dashed !important;
3485 margin-bottom: 5px !important;
3486 margin-top: 15px !important;
3490 * The different views of js fullcalendar
3494 margin-bottom: 10px;
3498 #event-calendar-title {
3499 display: inline-block;
3508 #fc-header-right .dropdown > button {
3511 #event-calendar-title {
3512 vertical-align: middle;
3514 #event-calendar-views {
3521 .fc .fc-month-view td.fc-widget-content,
3523 .fc .fc-list-view .fc-list-table td,
3527 .fc td.fc-widget-header,
3528 .fc th.fc-widget-header {
3533 .fc .fc-month-view td.fc-day {
3536 border-bottom: 1px solid;
3539 .fc .fc-day-grid-container .fc-row {
3540 border-bottom: 1px solid;
3543 .fc tr td.fc-today {
3546 .fc .fc-month-view .fc-content .fc-title .item-desc {
3549 .fc .fc-view-container {
3552 .fc .fc-list-view td {
3555 #events-calendar.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
3560 background-color: #e3f2fd;
3561 border: 1px solid #bbdefb;
3562 color: $font_color_darker;
3564 .fc .fc-month-view .fc-time,
3565 .fc .fc-listMonth-view .fc-list-item-time,
3566 .fc .fc-listMonth-view .fc-list-item-marker,
3567 .fc .fc-listMonth-view .fc-widget-header {
3570 .fc .fc-listMonth-view .fc-list-item:hover td {
3571 background: transparent;
3574 .fc .fc-listMonth-view .seperator {
3585 .event-card .event-label,
3586 .event-card .location-label {
3589 .popover.event-card .event-card-basic-content {
3594 .event-card .event-hover-location .location {
3599 /* Medium devices (desktops, 992px and up) */
3600 @media (min-width: 992px) {
3601 .mod-home.is-not-singleuser #content,
3602 .mod-login #content {
3603 margin-top: 100px !important;
3606 .mod-home.is-not-singleuser .login-form > #login-form,
3607 .mod-home.is-not-singleuser .login-form > #login-extra-links,
3608 .mod-login #content #login-form {
3609 background-color: #fff;
3613 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3615 background-color: white;
3618 .mod-home.is-not-singleuser .login-form > #login-form label,
3619 .mod-login #content #login-form label {
3623 .mod-home.is-not-singleuser .login-form::before,
3624 .mod-login #content #login-form::before {
3628 background-color: rgba(255, 255, 255, 0.1);
3636 .mod-home.is-not-singleuser .login-form::after,
3637 .mod-login #content #login-form::after {
3641 background-color: rgba(255, 255, 255, 0.2);
3650 /* Mobile display */
3651 @media (max-width: 600px) {
3659 #friendica-logo-mask {
3673 .panel .panel-body {
3677 .toplevel_item > .wall-item-container {
3685 .wall-item-actions {
3693 .generic-page-wrapper,
3694 .videos-content-wrapper,
3695 .suggest-content-wrapper,
3696 .help-content-wrapper,
3697 .match-content-wrapper,
3698 .dirfind-content-wrapper,
3699 .directory-content-wrapper,
3700 .delegation-content-wrapper,
3701 .notes-content-wrapper,
3702 .message-content-wrapper,
3703 .apps-content-wrapper,
3705 .delegate-content-wrapper,
3706 .uexport-content-wrapper,
3707 .dfrn_request-content-wrapper,
3708 .friendica-content-wrapper,
3709 .credits-content-wrapper,
3710 .nogroup-content-wrapper,
3711 .profperm-content-wrapper,
3712 .invite-content-wrapper,
3713 .tos-content-wrapper,
3714 .fsuggest-content-wrapper {
3774 .wwto .contact-photo {
3782 Prevent automatic zoom on input focus on iOS
3783 see https://stackoverflow.com/a/16255670
3789 .wall-item-container.thread_level_3,
3790 .wall-item-container.thread_level_4,
3791 .wall-item-container.thread_level_5,
3792 .wall-item-container.thread_level_6,
3793 .wall-item-container.thread_level_7 {