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,
1992 .wall-item-container .body-attach > a {
1995 -webkit-transition: all 0.25s ease-in-out;
1996 -moz-transition: all 0.25s ease-in-out;
1997 -o-transition: all 0.25s ease-in-out;
1998 -ms-transition: all 0.25s ease-in-out;
1999 transition: all 0.25s ease-in-out;
2001 .wall-item-container:hover .wall-item-links,
2002 .wall-item-container:hover .wall-item-actions button,
2003 .wall-item-container:hover .body-attach > a {
2006 -webkit-transition: all 0.25s ease-in-out;
2007 -moz-transition: all 0.25s ease-in-out;
2008 -o-transition: all 0.25s ease-in-out;
2009 -ms-transition: all 0.25s ease-in-out;
2010 transition: all 0.25s ease-in-out;
2012 .wall-item-container .wall-item-body .body-attach > a:hover {
2020 wall-item-comment-wrapper.well {
2023 background-color: rgba(237, 237, 237, $contentbg_transp);
2024 background-image: none;
2026 background-color: red;
2028 wall-item-comment-wrapper.well-small {
2032 wall-item-comment-wrapper.well hr {
2033 border-top: 1px solid #d9d9d9;
2035 .wall-entry wall-item-comment-wrapper.well {
2038 .comment-container {
2040 border-top-left-radius: 3px;
2041 border-top-right-radius: 3px;
2042 border-bottom-right-radius: 0px;
2043 border-bottom-left-radius: 0px;
2046 position: relative !important;
2049 .hide-comments-outer {
2050 background-color: rgba(0, 0, 0, 0.03);
2052 border-radius: 0.5em 0.5em 0 0;
2054 .hide-comments-total {
2063 .wall-item-comment-wrapper {
2065 border-top: 1px solid rgba(255, 255, 255, 0.8);
2066 background-color: rgba(0, 0, 0, 0.03);
2067 border-radius: 0 0 4px 4px;
2071 .comment-fake-form {
2072 border-color: #d9d9d9;
2074 .comment-fake-form textarea {
2078 .comment-container .wall-item-comment-wrapper {
2082 .comment-edit-form textarea {
2086 .comment-edit-submit-wrapper {
2091 .comment-icon-list {
2093 justify-content: space-between;
2096 /* acpopup + textcompletion*/
2098 background-color: #ffffff;
2102 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
2107 /** @todo: we schould consider the possebility to overwrite bootstrap dropdowns
2108 at the beginning of this file to get rid of the !important */
2109 .textcomplete-item > a {
2110 color: $font_color_darker !important;
2111 padding: 5px 20px !important;
2113 .textcomplete-item.active > a {
2114 background-color: rgb(247, 247, 247) !important;
2115 background-image: none !important;
2116 border-left: 3px solid $link_color;
2117 padding-left: 17px !important;
2119 .textcomplete-item a .forum {
2126 /* The wall-item thread levels */
2127 .wall-item-container.thread_level_3,
2128 .wall-item-container.thread_level_4,
2129 .wall-item-container.thread_level_5,
2130 .wall-item-container.thread_level_6,
2131 .wall-item-container.thread_level_7 {
2141 background-color: rgba(247, 247, 247, $contentbg_transp);
2142 box-shadow: 0 0 3px #dadada;
2143 -webkit-box-shadow: 0 0 3px #dadada;
2144 -moz-box-shadow: 0 0 3px #dadada;
2149 section > .tabbar-wrapper {
2150 /* The tabbar shouldn't' be visibile inside
2151 the section element. Only after we have
2152 moved it to the nav through js */
2153 display: none !important;
2162 #tabmenu .search-heading {
2164 text-overflow: ellipsis;
2165 white-space: nowrap;
2178 border-bottom: 0 solid $link_color;
2181 transition: all 0.15s ease;
2189 border-bottom-width: 4px;
2191 .tabbar.visible-xs .tabs-extended {
2194 #dropdownMenuTools-xs {
2197 ul.tabbar ul.tabs-extended:hover li.dropdown {
2201 ul.tabbar ul.tabs-extended li.active {
2203 border-bottom-width: 2px;
2205 ul.tabbar ul.tabs-extended li.active a {
2208 ul.dropdown-menu li:hover {
2214 box-sizing: border-box;
2217 .dropdown-menu li a,
2218 .dropdown-menu li .btn-link {
2219 color: $font_color_darker;
2221 .dropdown-menu li > :hover,
2222 .dropdown-menu li > :visited,
2223 .dropdown-menu li > :focus {
2227 .dropdown-menu li:first-child {
2231 /* Notificaiotn badges */
2232 #mail-update-li.show {
2233 display: inline-block !important;
2237 p.wall-item-announce,
2239 .media .shared-time,
2242 .media .location a {
2244 color: $font_color_darker;
2248 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2250 border-left: 3px solid rgba(255, 255, 255, 0);
2253 .media-list > li:hover,
2254 .media-list > li.selected,
2255 .media-list > li.active {
2256 border-left: 3px solid $link_color;
2257 background-color: rgba(247, 247, 247, $contentbg_transp);
2264 .form-control:focus {
2265 border: 2px solid $link_color;
2269 .radio label::before,
2270 .checkbox label::before {
2271 background-color: rgba(255, 255, 255, $contentbg_transp);
2273 .radio label::after {
2274 background-color: $link_color;
2276 .checkbox label::after {
2280 .checkbox input[type="checkbox"]:focus + label::before,
2281 .radio input[type="radio"]:focus + label::before {
2282 outline-color: $link_hover_color;
2286 color: $font_color_darker;
2289 input[type="range"].form-control {
2295 .form-control.form-search {
2296 border-radius: 30px;
2297 background-image: url(img/icon_search16x16.png);
2298 background-repeat: no-repeat;
2299 background-position: 10px 8px;
2302 .form-group-search {
2307 .form-group-search .form-button-search {
2311 border-radius: 30px;
2313 .search-input.form-control.form-search {
2321 .search-content-wrapper > #search-header-wrapper {
2324 .search-content-wrapper > .section-title-wrapper {
2327 #navbar-button > #search-save {
2330 /* Section-Content-Wrapper */
2331 #search-header-wrapper {
2333 padding-bottom: 20px;
2334 margin-bottom: 20px;
2336 background-color: rgba(255, 255, 255, $contentbg_transp);
2339 color: $font_color_darker;
2340 box-shadow: 0 0 3px #dadada;
2341 -webkit-box-shadow: 0 0 3px #dadada;
2342 -moz-box-shadow: 0 0 3px #dadada;
2349 section > .generic-page-wrapper,
2350 .videos-content-wrapper,
2351 .suggest-content-wrapper,
2352 .help-content-wrapper,
2353 .match-content-wrapper,
2354 .dirfind-content-wrapper,
2355 .delegation-content-wrapper,
2356 .notes-content-wrapper,
2357 .message-content-wrapper,
2358 .apps-content-wrapper,
2360 .delegate-content-wrapper,
2361 .uexport-content-wrapper,
2362 .dfrn_request-content-wrapper,
2363 .friendica-content-wrapper,
2364 .credits-content-wrapper,
2365 .nogroup-content-wrapper,
2366 .profperm-content-wrapper,
2367 .invite-content-wrapper,
2368 .tos-content-wrapper,
2369 .fsuggest-content-wrapper {
2370 min-height: calc(100vh - 150px);
2372 padding-bottom: 20px;
2373 margin-bottom: 20px;
2375 background-color: rgba(255, 255, 255, $contentbg_transp);
2378 color: $font_color_darker;
2379 box-shadow: 0 0 3px #dadada;
2380 -webkit-box-shadow: 0 0 3px #dadada;
2381 -moz-box-shadow: 0 0 3px #dadada;
2383 #content:hover .page-action.faded-icon {
2385 transition: all 0.25s ease-in-out;
2387 #content .page-action.faded-icon:hover {
2391 .section-title-wrapper {
2394 /* Home and Login Page */
2395 body.mod-home nav.navbar .nav > li > a:hover {
2396 background-color: rgba(255, 255, 255, 0.2);
2398 body.mod-home .navbar #nav-login,
2399 body.mod-login .navbar #nav-login {
2403 #profile-content-standard,
2404 #profile-content-advanced {
2409 margin-bottom: 20px;
2411 .contact-block-div.forumlist-profile-advanced {
2416 ul.viewcontact_wrapper {
2418 margin-right: -15px;
2420 ul.viewcontact_wrapper > li {
2423 .contact-wrapper .contact-photo-wrapper button {
2426 .contact-wrapper.media {
2428 word-wrap: break-word;
2431 /* bootstrap hack for .media */
2432 .contact-wrapper.media .media-body {
2433 display: table-cell;
2438 .contact-wrapper.media:before,
2443 .contact-wrapper.media:after {
2446 .contact-wrapper .contact-photo-image-wrapper img.contact-photo.xl {
2450 .contact-wrapper .contact-photo-image-wrapper img.contact-photo-xs {
2454 .contact-wrapper .contact-photo-overlay-content.xl {
2457 .contact-wrapper .contact-photo-menu {
2461 .contact-entry-desc {
2462 color: $font_color_darker;
2464 .contact-entry-checkbox {
2467 .contact-wrapper .media-body .contact-entry-name h4.media-heading a {
2468 font-weight: bold !important;
2470 font-size: 15px !important;
2472 .contact-wrapper .contact-actions {
2475 .contact-wrapper .contact-action-link,
2476 .contact-wrapper .contact-action-link:hover,
2477 .textcomplete-item .contact-wrapper .contact-action-link {
2479 color: $font_color_darker;
2482 .contact-wrapper .contact-action-link {
2484 transition: all 0.25s ease-in-out;
2486 ul li:hover .contact-wrapper .contact-action-link {
2488 transition: all 0.25s ease-in-out;
2490 ul li:hover .contact-wrapper .contact-action-link:hover {
2493 #contacts-search-wrapper,
2494 #directory-search-wrapper {
2497 #contact-drop-confirm .contact-actions,
2498 #contact-drop-confirm .contact-photo-overlay,
2499 #contact-drop-confirm .contact-photo-menu {
2502 #contact-drop-confirm #confirm-form {
2507 #contact-edit-actions {
2510 #contact-edit-status-wrapper {
2512 background-color: rgba(225, 245, 254, $contentbg_transp);
2515 #contact-edit-settings {
2519 /* directory page */
2520 #directory-search-heading {
2524 /* group edit page */
2527 margin-bottom: 10px;
2530 .group-actions button,
2535 .contact-group-actions .fa-times-circle {
2538 .contact-group-actions .fa-plus-circle {
2542 #group-edit-wrapper {
2546 #group-edit-header {
2549 #group-update-wrapper .contact-photo-overlay {
2552 #group-update-wrapper .viewcontact_wrapper .contact-group-actions {
2557 #group-update-wrapper .viewcontact_wrapper .contact-group-link {
2562 #group-update-wrapper .viewcontact_wrapper .contact-action-link:hover {
2565 #group-update-wrapper .shortmode {
2569 #group-update-wrapper .shortmode .contact-photo {
2573 #group-update-wrapper .shortmode .media {
2576 #group-update-wrapper .shortmode .contact-entry-desc {
2577 font-size: 12px !important;
2579 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading {
2582 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading a {
2583 font-size: 13px !important;
2584 white-space: nowrap;
2586 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-rel,
2587 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-network {
2592 .message-content-wrapper > li {
2593 /* we need this overwriting because we have no template file
2594 for the general mail page /message
2596 list-style-type: none;
2599 max-height: calc(100vh - 200px);
2601 #mail-conversation {
2603 max-height: calc(100vh - 400px);
2608 .mail-conv-wrapper .media .contact-photo-wrapper img {
2612 .mail-thread #prvmail-to-label,
2613 .mail-thread #prvmail-subject-label {
2616 .mail-thread #prvmail-message-label > label {
2619 .mail-thread #prvmail-message-label textarea {
2622 .mail-conv-wrapper {
2624 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2627 height: calc(100vh - 150px);
2630 height: calc(100% - 20px);
2632 #message-preview ul {
2635 #message-preview .media-list li {
2639 #message-preview .media-list li:hover {
2640 border-left: none !important;
2642 #message-preview .media-list li a {
2645 .mail-list-outside-wrapper {
2647 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2649 .mail-list-outside-wrapper .contact-photo-wrapper img {
2656 #modal #prvmail-text-edit-bb .bb-img {
2661 #photo-album-edit-name-label {
2664 .photo-album-edit-name {
2668 .photo-album-actions {
2669 margin-bottom: 10px;
2671 .photo-album-actions .photos-order-link {
2676 .fc .fc-month-view .fc-content .fc-title .item-desc:hover {
2677 color: $link_hover_color;
2679 .fc .fc-list-item-title a {
2682 .fc .fc-list-item-title a[href]:hover {
2683 color: $link_hover_color;
2684 text-decoration: none;
2686 .event-wrapper .event-owner {
2687 margin-bottom: 15px;
2689 .event-wrapper .event-owner img {
2698 .event-wrapper .vevent {
2701 box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
2703 .event-wrapper .event-buttons {
2706 #event-form-wrapper {
2709 #event-edit-form-wrapper {
2713 color: $font_color_darker;
2715 #event-edit-form-wrapper #event-edit-time {
2718 .event-buttons .plink-event-link {
2721 .vevent .event-summary {
2724 .vevent .event-description {
2727 .vevent .event-location .location {
2731 .modal-body .vevent .event-summary {
2734 #event-preview .vevent .event-summary {
2739 .event-card-details,
2740 .event-card-header {
2744 .event-card-left-date {
2747 .vevent .event-card-header {
2750 .event-card-left-date {
2751 width: 60px; /* Das muss wahrscheinlich unterschiedlich sein zwischen calendar und stream */
2753 .event-card .event-date-wrapper > span {
2757 white-space: nowrap;
2759 .event-card .event-date-wrapper .event-card-short-month {
2761 text-transform: uppercase;
2763 .event-card .event-date-wrapper.medium .event-card-short-date {
2768 .event-card .event-card-content {
2770 padding: 0 5px 0 15px;
2771 box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
2775 .event-card .event-card-content .event-map-btn {
2781 .event-card .event-card-title {
2783 color: $font_color_darker;
2788 .event-card .event-card-location {
2792 .event-card .event-card-location br {
2795 .event-card .event-card-location br::after {
2798 .event-card-profile-name a {
2801 .event-card-profile-name a:hover {
2802 color: $link_hover_color;
2804 .event-card .event-card-content .event-location-map {
2809 .event-card .event-card-content .event-location-map .map {
2812 .event-card .description {
2814 box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, 0.1) inset;
2827 transform: translateZ(0);
2828 transition: opacity 0.2s;
2833 text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
2835 .photo-next-link > i,
2836 .photo-prev-link > i {
2837 vertical-align: super;
2839 .photo-next-link > i {
2848 #photo-photo:hover .photo-next-link,
2849 #photo-photo:hover .photo-prev-link {
2852 #photo-photo .photo-next-link:hover,
2853 #photo-photo .photo-prev-link:hover {
2857 .photo-comment-wrapper .comment {
2860 .photo-comment-wrapper .wall-item-content {
2861 color: $font_color_darker;
2864 .photo-comment-wrapper .comment-wwedit-wrapper,
2865 .photo-comment-wrapper .wall-item-outside-wrapper.media:first-child {
2870 .profile-listing-table {
2874 .profile-listing-row {
2877 .profile-listing-cell {
2878 display: table-cell;
2880 .profile-listing-photo {
2885 #profile-listing-new-link-wrapper {
2886 margin-bottom: 20px;
2889 #profile-photo-upload-section {
2893 #profile-photo-upload-close {
2898 .section-subtitle-wrapper {
2901 details.profile-jot-net[open] summary:before,
2902 .panel .section-subtitle-wrapper a.accordion-toggle:before {
2903 font-family: ForkAwesome;
2907 details.profile-jot-net summary:before,
2908 .panel .section-subtitle-wrapper a.accordion-toggle.collapsed:before {
2909 font-family: ForkAwesome;
2912 details.profile-jot-net summary:before {
2916 details.profile-jot-net[open] summary:before {
2920 #settings-nick-wrapper {
2921 margin-bottom: 20px;
2927 /* Emulates Bootstrap display */
2930 background-color: rgba(255, 255, 255, $contentbg_transp);
2933 box-shadow: 0 0 3px #dadada;
2934 -webkit-box-shadow: 0 0 3px #dadada;
2935 -moz-box-shadow: 0 0 3px #dadada;
2938 .settings-block.fakelink,
2939 .settings-block > .fakelink {
2943 .settings-block > .fakelink {
2944 margin: -10px -15px 10px -15px;
2945 border-radius: 4px 4px 0 0;
2948 .settings-block.fakelink:hover,
2949 .settings-block > .fakelink:hover {
2950 color: $link_hover_color;
2952 .settings-block.fakelink > h3,
2953 .settings-block > .fakelink > h3 {
2960 .section-subtitle-wrapper > h2 {
2963 margin-bottom: 10px;
2966 .fakelink > h3:before {
2967 padding-right: 10px;
2969 .widget.fakelink > h3:before,
2970 .settings-block.fakelink > h3:before {
2971 font-family: ForkAwesome;
2972 content: "\f0da"; /* Right Plain Pointer */
2974 .widget > .fakelink > h3:before,
2975 #sidebar-group-header > .fakelink > h3:before,
2976 .settings-block > .fakelink > h3:before {
2977 font-family: ForkAwesome;
2978 content: "\f0d7"; /* Bottom Plain Pointer */
2985 /* Intro Notifications */
2986 ul.notif-network-list {
2988 margin-right: -15px;
2990 ul.notif-network-list > li {
2992 padding-right: 15px;
2994 .intro-wrapper.media {
2996 word-wrap: break-word;
2999 .intro-photo-wrapper img.intro-photo {
3007 .intro-enty-name h4 {
3008 font-size: 15px !important;
3010 .intro-wrapper button.intro-action-link {
3012 transition: all 0.25s ease-in-out;
3014 .intro-wrapper button.intro-action-link,
3015 .intro-wrapper button.intro-action-link:hover {
3018 color: $font_color_darker;
3020 ul li:hover .intro-wrapper button.intro-action-link {
3022 transition: all 0.25s ease-in-out;
3024 ul li:hover .intro-wrapper button.intro-action-link:hover {
3027 .intro-action-buttons {
3031 transition: max-height 0.1s ease-out;
3033 ul.notif-network-list > li:hover .intro-action-buttons {
3035 transition: max-height 0.1s ease-in;
3039 .intro-network-label,
3040 .intro-location-label,
3041 .intro-keywords-label,
3043 .intro-knowyou-label,
3044 .intro-madeby-label {
3047 .intro-contact-info.xs .intro-url-label,
3048 .intro-contact-info.xs .intro-network-label,
3049 .intro-contact-info.xs .intro-location-label,
3050 .intro-contact-info.xs .intro-keywords-label,
3051 .intro-contact-info.xs .intro-about-label,
3052 .intro-contact-info.xs .intro-knowyou-label {
3057 /* Notifications Page */
3058 ul.notif-network-list li.unseen {
3059 background-color: #e3eff3;
3061 .notif-item img.notif-image {
3066 .notif-item .notif-desc-wrapper {
3069 .notif-item .notif-desc-wrapper a {
3072 color: $font_color_darker;
3079 /* This is a little bit hacky. Since the search page is used for diferent
3080 content types we can't apply the generic-page-wrapper class.
3081 So we apply the css of the generic-page-wrapper class to the ul element with some
3082 little modifications to emulate a standard page template */
3083 .search-content-wrapper > ul.viewcontact_wrapper {
3084 min-height: calc(100vh - 150px);
3086 padding-bottom: 20px;
3088 margin-bottom: 20px;
3090 background-color: rgba(255, 255, 255, $contentbg_transp);
3093 color: $font_color_darker;
3094 box-shadow: 0 0 3px #dadada;
3095 -webkit-box-shadow: 0 0 3px #dadada;
3096 -moz-box-shadow: 0 0 3px #dadada;
3100 section.help-content-wrapper h1 {
3101 padding-bottom: 0.3em;
3103 border-bottom: 1px solid #ddd;
3105 section.help-content-wrapper h2 {
3106 padding-bottom: 0.3em;
3108 border-bottom: 1px solid #ddd;
3110 section.help-content-wrapper h3 {
3113 section.help-content-wrapper h4 {
3116 section.help-content-wrapper h1,
3117 section.help-content-wrapper h2,
3118 section.help-content-wrapper h3,
3119 section.help-content-wrapper h4,
3120 section.help-content-wrapper h5,
3121 section.help-content-wrapper h6 {
3123 margin-bottom: 16px;
3127 section.help-content-wrapper p {
3130 section.help-content-wrapper p,
3131 section.help-content-wrapper a,
3132 section.help-content-wrapper li {
3138 #adminpage #frio_background_image .image-select {
3141 #adminpage #frio_background_image.input-group {
3144 #admin-summary-wrapper {
3147 #adminpage ul#addonslist,
3151 #adminpage li .icon {
3152 display: inline-block;
3153 vertical-align: text-top;
3157 #adminpage li .icon:before {
3159 display: inline-block;
3166 border: 1px solid #cccccc;
3168 background-color: $background_color;
3169 -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3170 -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3171 transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3173 #adminpage li .icon.on:after {
3174 font-family: "ForkAwesome";
3176 display: inline-block;
3189 #adminpage .addon .desc {
3192 #admin-users #users tr.blocked {
3193 background-color: #f8efc0;
3195 .adminpage .table-hover > tbody > tr:hover + tr.details {
3196 background-color: #f5f5f5;
3198 .offset-anchor::before {
3204 pointer-events: none;
3212 #identity-selector-wrapper {
3217 #identity-selector-wrapper .identity-match-photo {
3221 #identity-selector-wrapper .identity-match-photo button {
3224 #identity-selector-wrapper .identity-match-photo .badge {
3229 #identity-selector-wrapper .identity-match-name {
3232 #identity-selector-wrapper .identity-match-details {
3238 #register-openid-wrapper,
3239 #register-name-wrapper,
3240 #register-invite-wrapper,
3241 #profile-publish-wrapper {
3244 #register-openid-end,
3245 #register-nickname-end {
3250 * Overwriting for transparency and other colors
3252 main .nav-tabs > li.active > a,
3253 main .nav-tabs > li.active > a:focus,
3254 main .nav-tabs > li.active > a:hover {
3255 background-color: rgba(255, 255, 255, $contentbg_transp);
3265 @media (min-width: 768px) {
3272 * Framework overwrite
3275 /* textcomplete for contact filtering*/
3276 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list {
3277 position: relative !important;
3278 top: inherit !important;
3279 bottom: inherit !important;
3280 left: inherit !important;
3283 margin-right: -15px;
3284 background-color: transparent;
3288 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li {
3290 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
3292 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li:first-child {
3295 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list .textcomplete-item > a {
3296 padding: 0 !important;
3298 background-color: transparent !important;
3300 /* this is a little hack for texcomplete contact filter
3301 There are for some reasons empty <a> tags. I don't know why */
3302 .textcomplete-item .contact-wrapper a {
3307 body .tread-wrapper .hovercard a,
3308 body .tread-wrapper .hovercard a:hover {
3311 body .tread-wrapper .hovercard:hover .hover-card-content a {
3312 color: $link_color !important;
3315 /* Pagination improvements */
3320 .pagination > li > a,
3321 .pagination > li > span {
3325 .pagination > li > a:hover,
3326 .pagination > li > span:hover {
3327 color: $link_hover_color;
3329 .pagination > .active > a,
3330 .pagination > .active > a:focus,
3331 .pagination > .active > a:hover,
3332 .pagination > .active > span,
3333 .pagination > .active > span:focus,
3334 .pagination > .active > span:hover {
3335 background-color: $link_color;
3336 border-color: $link_color;
3339 .pagination li.pager_n a {
3343 .pagination .pager_prev a {
3346 border-top-right-radius: 3px;
3347 border-bottom-right-radius: 3px;
3349 .pagination .pager_next a {
3352 border-top-left-radius: 3px;
3353 border-bottom-left-radius: 3px;
3356 .pager .previous > a {
3360 .pagination .disabled > a,
3361 .pager .disabled > a {
3367 background-color: rgba(255, 255, 255, $contentbg_transp);
3371 * some temporary workarounds until this will solved
3372 * elsewhere (e.g. new templates)
3374 section .profile-match-wrapper {
3381 #login-submit-wrapper {
3384 #lost-password-link {
3387 #login-lost-password-link {
3388 margin-bottom: 10px;
3394 #id_password_wrapper {
3395 margin-bottom: unset;
3402 background: #8ad0a1;
3409 .mod-home.is-not-singleuser,
3411 background-color: $login_bg_color;
3412 background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4)), url($login_bg_image);
3413 background-size: cover;
3414 background-attachment: fixed;
3415 background-position: center;
3418 .mod-home.is-not-singleuser nav.navbar,
3419 .mod-login nav.navbar {
3420 background-color: transparent;
3422 .mod-home.is-not-singleuser #topbar-second,
3423 .mod-login #topbar-second {
3424 background-color: transparent;
3428 .mod-home.is-not-singleuser .login-content,
3429 .mod-login .login-content {
3434 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3438 .mod-home.is-not-singleuser .login-form > #login-form label,
3439 .mod-login #content #login-form label {
3443 .mod-home.is-not-singleuser .login-panel-content,
3444 .mod-login .login-panel-content {
3445 background-color: rgba(255, 255, 255, 0.85);
3449 background: $nav_bg !important;
3450 color: $btn_primary_color !important;
3453 -webkit-box-shadow: none;
3455 -moz-box-shadow: none;
3456 background-image: none;
3464 width: 100% !important;
3467 .qq-upload-drop-area {
3468 background: white !important;
3471 -webkit-box-shadow: none;
3473 -moz-box-shadow: none;
3474 background-image: none;
3482 width: 100% !important;
3483 display: block !important;
3484 position: relative !important;
3485 border: black 1px dashed !important;
3486 margin-bottom: 5px !important;
3487 margin-top: 15px !important;
3491 * The different views of js fullcalendar
3495 margin-bottom: 10px;
3499 #event-calendar-title {
3500 display: inline-block;
3509 #fc-header-right .dropdown > button {
3512 #event-calendar-title {
3513 vertical-align: middle;
3515 #event-calendar-views {
3522 .fc .fc-month-view td.fc-widget-content,
3524 .fc .fc-list-view .fc-list-table td,
3528 .fc td.fc-widget-header,
3529 .fc th.fc-widget-header {
3534 .fc .fc-month-view td.fc-day {
3537 border-bottom: 1px solid;
3540 .fc .fc-day-grid-container .fc-row {
3541 border-bottom: 1px solid;
3544 .fc tr td.fc-today {
3547 .fc .fc-month-view .fc-content .fc-title .item-desc {
3550 .fc .fc-view-container {
3553 .fc .fc-list-view td {
3556 #events-calendar.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
3561 background-color: #e3f2fd;
3562 border: 1px solid #bbdefb;
3563 color: $font_color_darker;
3565 .fc .fc-month-view .fc-time,
3566 .fc .fc-listMonth-view .fc-list-item-time,
3567 .fc .fc-listMonth-view .fc-list-item-marker,
3568 .fc .fc-listMonth-view .fc-widget-header {
3571 .fc .fc-listMonth-view .fc-list-item:hover td {
3572 background: transparent;
3575 .fc .fc-listMonth-view .seperator {
3586 .event-card .event-label,
3587 .event-card .location-label {
3590 .popover.event-card .event-card-basic-content {
3595 .event-card .event-hover-location .location {
3600 /* Medium devices (desktops, 992px and up) */
3601 @media (min-width: 992px) {
3602 .mod-home.is-not-singleuser #content,
3603 .mod-login #content {
3604 margin-top: 100px !important;
3607 .mod-home.is-not-singleuser .login-form > #login-form,
3608 .mod-home.is-not-singleuser .login-form > #login-extra-links,
3609 .mod-login #content #login-form {
3610 background-color: #fff;
3614 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3616 background-color: white;
3619 .mod-home.is-not-singleuser .login-form > #login-form label,
3620 .mod-login #content #login-form label {
3624 .mod-home.is-not-singleuser .login-form::before,
3625 .mod-login #content #login-form::before {
3629 background-color: rgba(255, 255, 255, 0.1);
3637 .mod-home.is-not-singleuser .login-form::after,
3638 .mod-login #content #login-form::after {
3642 background-color: rgba(255, 255, 255, 0.2);
3651 /* Mobile display */
3652 @media (max-width: 600px) {
3660 #friendica-logo-mask {
3674 .panel .panel-body {
3678 .toplevel_item > .wall-item-container {
3686 .wall-item-actions {
3694 .generic-page-wrapper,
3695 .videos-content-wrapper,
3696 .suggest-content-wrapper,
3697 .help-content-wrapper,
3698 .match-content-wrapper,
3699 .dirfind-content-wrapper,
3700 .directory-content-wrapper,
3701 .delegation-content-wrapper,
3702 .notes-content-wrapper,
3703 .message-content-wrapper,
3704 .apps-content-wrapper,
3706 .delegate-content-wrapper,
3707 .uexport-content-wrapper,
3708 .dfrn_request-content-wrapper,
3709 .friendica-content-wrapper,
3710 .credits-content-wrapper,
3711 .nogroup-content-wrapper,
3712 .profperm-content-wrapper,
3713 .invite-content-wrapper,
3714 .tos-content-wrapper,
3715 .fsuggest-content-wrapper {
3775 .wwto .contact-photo {
3783 Prevent automatic zoom on input focus on iOS
3784 see https://stackoverflow.com/a/16255670
3790 .wall-item-container.thread_level_3,
3791 .wall-item-container.thread_level_4,
3792 .wall-item-container.thread_level_5,
3793 .wall-item-container.thread_level_6,
3794 .wall-item-container.thread_level_7 {