2 Created on : 17.02.2016, 23:55:45
3 Author : rabuzarus and contributors
8 background-color: $background_color;
9 background-image: url("$background_image");
10 background-size: $background_size_img;
11 background-repeat: $background_repeat;
12 background-attachment: fixed;
14 font-family: "Open Sans", sans-serif;
22 text-decoration: none;
24 /* Anchors incorrectly display with a fixed top menu. This global rule offsets all
25 * anchors so that accessing them with a # link will actually scroll the associated
26 * content in the visible part of the page.
28 * anchor.top should be the opposite of body.padding-top
30 body a[name]:not([href]) {
45 color: $link_hover_color;
46 outline-color: $link_hover_color;
47 text-decoration: none;
50 .wall-item-container a:hover {
51 text-decoration: underline;
60 border-color: rgba(238, 238, 238, $contentbg_transp);
80 display: none !important;
83 max-height: 0px !important;
84 overflow: hidden !important;
90 @media screen and (max-width: 990px) {
95 position: fixed !important;
97 background-color: $background_color;
104 padding-left: 6px !important;
105 padding-right: 6px !important;
115 background-color: rgba(0, 0, 0, 0.4);
117 transition: opacity 0.5s;
119 aside.canvas-slid::before {
123 /* prevent page scroll when the aside is opened **/
129 * standard page elements
135 color: $nav_icon_color;
142 padding: 0 12px 0 12px;
144 background-color: $nav_bg;
148 #item-delete-selected {
157 padding: 0 12px 0 12px;
159 background-color: $link_color;
164 #toggle_mobile_link {
169 * Overwriting and Extend Bootstrap
181 -webkit-box-shadow: none;
183 -moz-box-shadow: none;
184 background-image: none;
194 outline-color: $link_hover_color;
217 background-color: #ae0f0f;
222 color: $btn_primary_color;
224 .btn.btn-primary:hover,
225 .btn.btn-primary:focus {
226 color: $btn_primary_color;
227 background: $btn_primary_hover_color;
228 text-decoration: none;
230 .btn.btn-primary:active,
231 .btn.btn-primary.active {
232 background: $btn_primary_hover_color;
235 .btn-primary.active.focus,
236 .btn-primary.active:focus,
237 .btn-primary.active:hover,
238 .btn-primary:active.focus,
239 .btn-primary:active:focus,
240 .btn-primary:active:hover,
241 .open > .dropdown-toggle.btn-primary.focus,
242 .open > .dropdown-toggle.btn-primary:focus,
243 .open > .dropdown-toggle.btn-primary:hover,
246 .open > .dropdown-toggle.btn-primary {
247 background: $btn_primary_hover_color;
260 background: transparent;
267 background-color: transparent;
271 border-left: 1px solid #777;
275 border: 1px solid transparent;
284 .toggle .toggle-off:hover {
286 background-color: #eee;
289 .toggle.off .toggle-handle {
290 background-color: #eee;
293 background-color: #fff;
295 border: 1px solid transparent;
299 .input-group-sm > .form-control,
300 .input-group-sm > .input-group-addon,
301 .input-group-sm > .input-group-btn > .btn {
302 padding: 0.275rem 0.75rem;
305 border-radius: 0.2rem;
307 /* Bootstrap media class fix/hack
308 * This is a test. I thought it does have some
309 * issues in some corner cases. Maybe we remove
311 * https://github.com/twbs/bootstrap/issues/6053
334 vertical-align: baseline;
335 background-color: $link_color;
343 /* disabled elements */
344 .community-content-wrapper > h3,
345 .network-content-wrapper > .section-title-wrapper {
349 header #site-location {
360 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
362 font-family: tahoma, "Lucida Sans", sans;
368 header #banner #logo-img,
369 .navbar-brand #logo-img {
370 -webkit-mask-image: url("img/friendica-25.png");
371 background-color: $nav_icon_color;
378 #navbrand-container {
381 #navbrand-container #navbar-brand-text {
383 color: $nav_icon_color;
386 /* offcanvas section */
388 /* Right offcanvas uses: #offcanvasUsermenu, .offcanvas-right-active
389 .offcanvas-right and .offcanvas-right-overlay */
398 background-color: #333;
399 transform: translateX(-100%);
400 transition: 0.4s ease-in-out;
411 background-color: #333;
412 transform: translateX(100%);
413 transition: 0.4s ease-in-out;
416 .offcanvas-active .off-canvas {
417 transform: translateX(0);
419 .offcanvas-right-active #offcanvasUsermenu {
420 transform: translateX(0);
423 transition: 0.4s ease-in-out;
428 transition: 0.4s ease-in-out;
430 .offcanvas-active .page-wrapper,
431 .offcanvas-active .navbar-fixed-top {
432 transform: translateX(300px);
441 background-color: rgba(0, 0, 0, 0.5);
445 transition: 0.4s ease-in-out;
447 .offcanvas-right-overlay {
453 background-color: rgba(0, 0, 0, 0.5);
457 transition: 0.4s ease-in-out;
459 .offcanvas-active .offcanvas-overlay,
460 .offcanvas-right-active .offcanvas-right-overlay {
464 /* offcanvas section ends */
478 .topbar ul.nav > li {
481 @media (min-width: 992px) {
482 .topbar ul.nav > li > a,
483 .topbar ul.nav > li > button {
485 padding-bottom: 15px;
489 @media (max-width: 991px) {
490 .topbar ul.nav > li > a,
491 .topbar ul.nav > li > button {
495 .topbar .dropdown-footer {
498 .topbar .dropdown-header {
505 .topbar .dropdown-header .dropdown-header-link {
510 .topbar .dropdown-header .dropdown-header-link a,
511 .topbar .dropdown-header .dropdown-header-link .btn-link {
512 color: $link_color !important;
516 .topbar .dropdown-header:hover {
521 background-color: $nav_bg;
524 color: $nav_icon_color;
526 @media screen and (max-width: 767px) {
533 #topbar-first .navbar-toggle {
538 #topbar-first .nav > li > a,
539 #topbar-first .nav > li > button,
540 nav.navbar .nav > li > a,
541 nav.navbar .nav > li > button {
542 color: $nav_icon_color;
544 #topbar-first .nav > .open > a,
545 #topbar-first .nav > .open > button {
546 background-color: $nav_bg;
548 #topbar-first .nav > li > a:hover,
549 #topbar-first .nav > li > a:focus,
550 #topbar-first .nav > li > button:not(#main-menu):hover,
551 #topbar-first .nav > li > button:not(#main-menu):focus,
552 nav.navbar .nav > li > a:hover,
553 nav.navbar .nav > li > a:focus,
554 nav.navbar .nav > li > button:hover,
555 nav.navbar .nav > li > button:focus {
556 background-color: $nav_icon_hover_color;
558 #topbar-first .nav > .account {
562 #topbar-first .nav > .account img {
568 #topbar-first .nav > .account .dropdown-toggle {
569 padding: 8px 5px 0px;
573 #topbar-first .nav > .account .dropdown-toggle span {
576 #topbar-first .topbar-brand {
580 #topbar-first .topbar-actions {
584 #topbar-first .topbar-nav {
590 #topbar-first .topbar-nav .nav-segment {
594 #topbar-first .topbar-nav .nav-segment > a {
595 display: inline-block;
596 text-decoration: none;
599 #topbar-first .topbar-nav .nav-segment .nav-notification {
603 background-color: #ff3535;
605 #topbar-first #intro-update {
608 #topbar-first .topbar-nav .arrow:after {
613 border-color: transparent;
620 border-bottom-color: #fff;
623 #topbar-first .topbar-nav .arrow {
628 border-color: transparent;
635 border-bottom-color: rgba(0, 0, 0, 0.15);
639 #topbar-first .topbar-nav .dropdown-menu {
643 #topbar-first .topbar-nav .dropdown-menu ul.media-list {
647 #topbar-first .topbar-nav .dropdown-menu li {
650 #topbar-first .topbar-nav .dropdown-menu li i.approval {
656 #topbar-first .topbar-nav .dropdown-menu li i.accepted {
659 #topbar-first .topbar-nav .dropdown-menu li i.declined {
662 #topbar-first .topbar-nav .dropdown-menu li .media {
665 #topbar-first .topbar-nav .dropdown-menu li .media .img-space {
670 #topbar-first .dropdown-footer {
671 margin: 10px 10px 5px;
673 #topbar-first .caret {
674 border-top-color: #bebebe;
676 #topbar-first .btn-group > a {
677 background-color: #7f9baa;
679 #topbar-first .btn-enter {
680 background-color: #7f9baa;
683 #topbar-first .btn-enter:hover {
684 background-color: #89a2b0;
686 .navbar-fixed-top ul.nav.navbar-nav.navbar-right {
690 #friendica-logo-mask {
694 /* Notification Menu */
695 #topbar-first #nav-notifications-menu {
698 #topbar-first #nav-notifications-menu a {
699 color: $font_color_darker;
702 #topbar-first #nav-notifications-menu li.notif-entry {
703 color: $font_color_darker;
705 border-bottom: 1px solid #eee;
707 border-left: 3px solid #fff;
711 #topbar-first #nav-notifications-menu li.notification-unseen {
712 border-left: 3px solid #e3eff3;
713 background-color: #e3eff3;
715 #topbar-first #nav-notifications-menu li.notif-entry:hover {
716 background-color: #f7f7f7;
717 border-left: 3px solid $link_color;
719 #topbar-first #nav-notifications-menu li.placeholder {
722 #topbar-first #nav-notifications-menu .media .media-body .contactname {
725 #topbar-first #nav-notifications-menu .media .media-body .label {
726 padding: 0.1em 0.5em;
728 #topbar-first #nav-notifications-menu li.notif-entry .media-object a img {
733 /* The Top Nav Bar user menu */
734 #topbar-first .account .user-title {
738 #topbar-first .account .user-title span {
739 color: $nav_icon_color;
741 #topbar-first .account #main-menu .nav-notification {
745 background-color: #ff8989;
749 background-color: $background_color;
753 border-left-color: $nav_icon_color;
754 box-shadow: -3px 0 3px -3px black;
756 #offcanvasUsermenu .nav-container {
757 /* required to compensate for moving the container below the topnav bar */
760 #offcanvasUsermenu li.divider {
761 background-color: transparent;
765 #offcanvasUsermenu ul,
766 #offcanvasUsermenu ul li:first-child,
767 #offcanvasUsermenu ul,
768 #offcanvasUsermenu ul li:last-child {
771 #offcanvasUsermenu li,
772 #offcanvasUsermenu a {
773 background-color: $nav_bg;
774 color: $nav_icon_color;
777 #offcanvasUsermenu li.list-group-item {
778 border-color: $background_color;
780 #offcanvasUsermenu a {
783 #offcanvasUsermenu li.nav-sitename {
786 #topbar-first .dropdown.account li#nav-sitename {
790 word-break: break-word;
792 #topbar-first .dropdown.account li#nav-sitename:hover {
794 background-color: $nav_bg;
797 #topbar-first #search-box .navbar-form {
808 background-color: $background_color;
810 /* fix bootstrap .well class not playing well with data-target slide animation */
816 #search-mobile .navbar-form {
819 #topbar-first #search-box .form-search {
822 background-position: 8px 4px;
824 #topbar-first #search-box .btn {
833 background-color: #fff;
835 background-image: none;
836 -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
837 -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
838 box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
839 border-bottom: 1px solid #d4d4d4;
841 #topbar-second > .container {
844 @media screen and (max-width: 767px) {
845 #topbar-second > .container,
846 #topbar-second #navbar-button {
850 #topbar-second .dropdown-menu {
854 #topbar-second .dropdown-menu .divider {
857 #topbar-second #space-menu-dropdown,
858 #topbar-second #search-menu-dropdown {
861 #topbar-second #space-menu-dropdown .media-list,
862 #topbar-second #search-menu-dropdown .media-list {
870 .intro-wrapper button.intro-action-link {
874 ul li .intro-wrapper button.intro-action-link {
877 @media screen and (max-width: 768px) {
878 #topbar-second #space-menu-dropdown .media-list,
879 #topbar-second #search-menu-dropdown .media-list {
883 #topbar-second #space-menu-dropdown form,
884 #topbar-second #search-menu-dropdown form {
887 #topbar-second #space-menu-dropdown .search-reset,
888 #topbar-second #search-menu-dropdown .search-reset {
897 #topbar-second #space-menu-dropdown li > ul > li > a > .media .media-body p {
903 #topbar-second #nav-short-info .heading {
908 text-overflow: ellipsis;
910 #topbar-second #tabmenu .heading {
912 text-overflow: ellipsis;
919 .nav > li > .btn-link {
924 .nav .open > .btn-link {
925 background-color: #eee;
926 border-color: #337ab7;
928 .nav-pills > li > .btn-link {
931 .nav-pills .dropdown-menu,
932 .nav-tabs .dropdown-menu,
933 .account .dropdown-menu,
934 .contact-photo-wrapper .dropdown-menu {
935 background-color: $nav_bg;
938 .nav-pills .dropdown-menu li.divider,
939 .nav-tabs .dropdown-menu li.divider,
940 .account .dropdown-menu li.divider,
941 .contact-photo-wrapper .dropdown-menu li.divider {
942 background-color: $menu_background_hover_color;
944 margin: 9px 1px !important;
946 .nav-pills .dropdown-menu li > a,
947 .nav-tabs .dropdown-menu li > a,
948 .account .dropdown-menu li > a,
949 .contact-photo-wrapper .dropdown-menu li > a {
950 border-left: 3px solid $nav_bg;
952 .nav-pills .dropdown-menu li a,
953 .nav-pills .dropdown-menu li .btn-link,
954 .nav-tabs .dropdown-menu li a,
955 .nav-tabs .dropdown-menu li .btn-link,
956 .account .dropdown-menu li a,
957 .account .dropdown-menu li .btn-link,
958 .contact-photo-wrapper .dropdown-menu li a,
959 .contact-photo-wrapper .dropdown-menu li .btn-link {
960 color: $nav_icon_color;
964 text-transform: capitalize;
968 .nav-pills .dropdown-menu li a i,
969 .nav-pills .dropdown-menu li .btn-link i,
970 .nav-tabs .dropdown-menu li a i,
971 .nav-tabs .dropdown-menu li .btn-link i,
972 .account .dropdown-menu li a i,
973 .account .dropdown-menu li .btn-link i,
974 .contact-photo-wrapper .dropdown-menu li a i,
975 .contact-photo-wrapper .dropdown-menu li .btn-link i {
978 display: inline-block;
981 .nav-pills .dropdown-menu li > a:hover,
982 .nav-tabs .dropdown-menu li > a:hover,
983 .account .dropdown-menu li > a:hover,
984 .contact-photo-wrapper .dropdown-menu li > a:hover,
985 .nav-pills .dropdown-menu li.selected a,
986 .nav-tabs .dropdown-menu li.selected a,
987 .account .dropdown-menu li.selected a,
988 .contact-photo-wrapper .dropdown-menu li.selected a {
989 border-left: 3px solid $link_color;
991 background: $menu_background_hover_color;
993 #photo-edit-link-wrap {
994 color: $font_color_darker;
1009 .nav-container .widget {
1012 background-color: rgba(255, 255, 255, $contentbg_transp);
1013 box-shadow: 0 0 3px #dadada;
1014 -webkit-box-shadow: 0 0 3px #dadada;
1015 -moz-box-shadow: 0 0 3px #dadada;
1018 margin-bottom: 20px;
1024 .nav-container .widget h3 {
1028 padding-bottom: 20px;
1032 .nav-container .widget ul {
1037 margin-right: -10px;
1042 .nav-container .widget li {
1044 padding-bottom: 2px;
1046 padding-right: 10px;
1048 aside .widget li:hover,
1049 aside .widget li.selected,
1050 .nav-container .widget li:hover {
1052 color: $font_color_darker;
1053 background-color: rgba(247, 247, 247, $contentbg_transp);
1054 border-left: 3px solid $link_color !important;
1058 aside .widget li a:hover {
1059 color: $font_color_darker;
1062 /* forumlist widget */
1063 aside > #datebrowse-sidebar li.posted-date-selector-months {
1064 margin-bottom: 10px;
1068 aside > #datebrowse-sidebar li.posted-date-selector-months:hover {
1069 border-left: none !important;
1070 background-color: transparent !important;
1072 aside > #datebrowse-sidebar .posted-date-selector-months > ul {
1075 aside > #datebrowse-sidebar .posted-date-selector-months > ul > li {
1078 aside > #datebrowse-sidebar .posted-date-selector-months > ul > li:hover {
1083 -webkit-filter: grayscale(100%);
1084 filter: grayscale(100%);
1086 filter: alpha(opacity=50); /* For IE8 and earlier */
1087 -webkit-transition: all 0.2s ease-in-out;
1088 -moz-transition: all 0.2s ease-in-out;
1089 -o-transition: all 0.2s ease-in-out;
1090 -ms-transition: all 0.2s ease-in-out;
1091 transition: all 0.2s ease-in-out;
1093 #forumlist-sidbar-ul li:hover a > .forumlist-img {
1094 -webkit-filter: unset;
1099 /* help page widget */
1100 aside > .help-aside-wrapper p strong:first-child {
1104 aside > .help-aside-wrapper h1 {
1108 padding: 20px 0 10px;
1110 aside > .help-aside-wrapper h2 {
1115 /* vcard / h-card */
1116 aside .vcard #profile-photo-wrapper {
1119 aside .vcard img.u-photo,
1120 aside img.vcard-photo {
1124 aside .vcard .tool .action {
1131 background: rgba(0, 0, 0, 0.5);
1135 -webkit-transition: all 0.25s ease-in-out;
1136 -moz-transition: all 0.25s ease-in-out;
1137 -o-transition: all 0.25s ease-in-out;
1138 -ms-transition: all 0.25s ease-in-out;
1139 transition: all 0.25s ease-in-out;
1141 aside .vcard .tool a {
1142 color: rgba(255, 255, 255, 0.85);
1144 aside .vcard #profile-photo-wrapper:hover .tool .action {
1147 aside .vcard #profile-photo-wrapper.crop-preview {
1150 aside .vcard .profile-header {
1151 padding: 5px 0px 20px 0px;
1155 padding: 5px 0px 5px 0px;
1157 aside .vcard .p-addr {
1160 text-overflow: ellipsis;
1161 white-space: nowrap;
1162 padding-bottom: 2px;
1164 aside .vcard .title {
1167 aside .vcard .detail {
1174 aside .vcard .icon {
1175 display: table-cell;
1176 padding-right: 10px;
1179 #profile-extra-links {
1181 margin-bottom: 10px;
1183 aside .vcard #dfrn-request-link-button,
1184 aside .vcard #wallmessage-link-botton {
1190 aside .vcard #dfrn-request-link,
1191 aside .vcard #wallmessage-link {
1194 /* vcard-short-info */
1196 #nav-short-info .contact-wrapper {
1199 white-space: nowrap;
1201 padding-right: 20px;
1204 #nav-short-info .contact-photo-wrapper.media-left {
1207 #vcard-short-photo-wrapper img,
1208 #nav-short-info .contact-wrapper img {
1214 #nav-short-info .contact-wrapper .media-body {
1218 text-overflow: ellipsis;
1220 #vcard-short-desc > .media-heading,
1221 #vcard-short-desc > .vcard-short-addr,
1222 #nav-short-info .contact-wrapper .media-heading,
1223 #nav-short-info .contact-wrapper #contact-entry-url-network {
1224 text-overflow: ellipsis;
1227 #vcard-short-desc > .media-heading,
1228 #nav-short-info .contact-wrapper .media-heading {
1232 #nav-short-info .contact-wrapper .media-heading a {
1233 color: $font_color_darker;
1234 font-size: 14px !important;
1236 #vcard-short-desc > .vcard-short-addr,
1237 #nav-short-info .contact-wrapper #contact-entry-url-network {
1241 .network-content-wrapper > #viewcontact_wrapper-network,
1242 #nav-short-info .contact-wrapper .contact-photo-overlay,
1243 #nav-short-info .contact-wrapper .contact-actions {
1247 aside #peoplefind-sidebar input,
1248 aside #follow-sidebar input {
1250 background-position: 10px 5px;
1252 aside #peoplefind-sidebar label,
1253 aside #follow-sidebar label {
1254 font-weight: normal;
1256 aside #peoplefind-sidebar .form-group-search .form-button-search,
1257 aside #follow-sidebar .form-group-search .form-button-search {
1261 div#sidebar-group-header h3 {
1265 div#sidebar-group-list {
1274 color: $font_color_darker;
1278 color: $font_color_darker;
1280 transition: all 0.1s ease-in-out;
1283 color: $font_color_darker;
1290 aside #group-sidebar .sidebar-group-li:hover .group-edit-tool.faded-icon,
1291 aside #saved-search-list .saved-search-li:hover .savedsearchdrop.faded-icon,
1292 aside .widget:hover .widget-action.faded-icon {
1294 transition: all 0.25s ease-in-out;
1296 aside #group-sidebar .sidebar-group-li .group-edit-tool.faded-icon:hover,
1297 aside #saved-search-list .saved-search-li .savedsearchdrop.faded-icon:hover,
1298 aside .widget .widget-action.faded-icon:hover {
1301 aside #group-sidebar li .group-checkbox {
1304 aside #group-sidebar li .group-edit-tool {
1305 padding-right: 10px;
1307 aside #group-sidebar li .group-edit-tool:first-child {
1311 /* contact block widget */
1312 .contact-block-content {
1317 .contact-block-div {
1319 margin: 0px 5px 5px 0px;
1321 .contact-block-link {
1323 .contact-block-img {
1329 /* Tag cloud widget */
1330 .tagblock.widget > .tag-cloud {
1335 display: none !important;
1349 .modal #jot-sections {
1350 max-height: calc(100vh - 22px);
1352 @media (min-width: 768px) {
1353 .modal #jot-sections {
1354 max-height: calc(100vh - 62px);
1357 #jot-modal #jot-sections,
1358 #jot-modal #jot-modal-body,
1359 #jot-modal #profile-jot-form,
1360 #jot-modal #profile-jot-wrapper,
1361 #jot-modal #jot-text-wrap,
1362 #jot-modal #jot-preview-content,
1363 #jot-modal #tread-wrapper--1,
1364 #jot-modal #item-Q0,
1365 #jot-modal #profile-jot-acl-wrapper,
1366 #jot-modal #acl-wrapper {
1370 flex-direction: column;
1372 #jot-modal .modal-header a,
1373 #jot-modal .modal-header .btn-link,
1374 #profile-jot-submit-wrapper a,
1375 #profile-jot-submit-wrapper .btn-link {
1376 color: $font_color_darker;
1378 #jot-modal .modal-header {
1379 border-bottom: none;
1381 #jot-modal .modal-header .compose-link {
1386 #jot-category-wrap {
1392 #jot-text-wrap textarea {
1394 overflow-y: auto !important;
1395 overflow-y: overlay !important;
1397 #jot-text-wrap .preview textarea {
1400 #preview_profile-jot-text,
1401 .comment-edit-form .preview {
1405 border: 2px solid #ededed;
1408 border-radius: 0 0 4px 4px;
1410 color: $font_color_darker;
1412 textarea#profile-jot-text:focus + #preview_profile-jot-text,
1413 textarea.comment-edit-text:focus + .comment-edit-form .preview {
1414 border: 2px solid #6fdbe8;
1417 .preview hr.previewseparator {
1419 border-color: #d2d2d2;
1421 #previewImgBtn_profile-jot-text,
1433 .preview button.previewActionBtn {
1439 border: 2px solid #fff;
1440 box-shadow: 0 0 3px gray;
1444 text-decoration: none;
1445 padding: 0 0 1px 1px;
1448 .preview button.previewActionBtn:hover {
1451 .preview .closePreview button.previewActionBtn {
1454 #previewInputTitle_profile-jot-text {
1457 #profile-jot-wrapper button#profile-jot-submit {
1460 #profile-jot-wrapper #character-counter {
1463 .modal .wall-item-container.preview {
1465 overflow-y: overlay;
1469 font-family: ForkAwesome;
1473 font-family: ForkAwesome;
1477 #acl-wrapper label.panel-heading {
1484 .fbrowser .breadcrumb {
1487 .fbrowser .path a:before {
1491 .fbrowser .breadcrumb > li:last-of-type a {
1493 pointer-events: none;
1496 .fbrowser .folders {
1497 box-shadow: -1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
1500 .fbrowser .folders ul {
1506 max-height: calc(100vh - 210px);
1509 @media (min-width: 768px) {
1510 .fbrowser .folders ul {
1511 max-height: calc(100vh - 255px);
1514 .fbrowser .folders li {
1516 padding-right: 10px;
1518 padding-bottom: 3px;
1520 .fbrowser .folders li:hover {
1522 color: $font_color_darker;
1523 background-color: rgba(247, 247, 247, $contentbg_transp);
1524 border-left: 3px solid $link_color;
1527 .fbrowser .folders li a,
1528 .fbrowser .folders li a:hover {
1529 color: $font_color_darker;
1532 .fbrowser .folders + .list {
1535 .fbrowser .fbrowser-content-container {
1537 max-height: calc(100vh - 175px);
1539 @media (min-width: 768px) {
1540 .fbrowser .fbrowser-content-container {
1541 max-height: calc(100vh - 220px);
1544 .fbrowser.image .photo-album-image-wrapper {
1545 box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.2);
1547 .fbrowser.image .photo-album-image-wrapper .caption {
1548 pointer-events: none;
1550 .fbrowser .profile-rotator-wrapper {
1553 .fbrowser .fa-spin {
1566 background-color: rgba(255, 255, 255, $contentbg_transp);
1567 box-shadow: 0 0 2px #dadada;
1568 -webkit-box-shadow: 0 0 2px #dadada;
1569 -moz-box-shadow: 0 0 2px #dadada;
1573 .panel.panel-inline {
1575 margin-right: -15px;
1579 .panel .panel-body {
1580 word-wrap: break-word;
1582 .tread-wrapper .media {
1584 word-wrap: break-word;
1590 /* Thread hover effects */
1591 .desktop-view .wall-item-container .wall-item-content a,
1592 .desktop-view .wall-item-name,
1593 .desktop-view .wall-item-container .fakelink,
1594 .desktop-view .toplevel_item .fakelink,
1595 .desktop-view .toplevel_item .wall-item-container .wall-item-responses a {
1597 -webkit-transition: all 0.25s ease-in-out;
1598 -moz-transition: all 0.25s ease-in-out;
1599 -o-transition: all 0.25s ease-in-out;
1600 -ms-transition: all 0.25s ease-in-out;
1601 transition: all 0.25s ease-in-out;
1604 .toplevel_item:hover .fakelink,
1605 .wall-item-container:hover .fakelink,
1606 .toplevel_item:hover .wall-item-container:hover .wall-item-responses a,
1607 .toplevel_item:hover .wall-item-content a,
1608 .toplevel_item:hover .wall-item-name,
1609 .wall-item-container:hover .wall-item-content a,
1610 .wall-item-container:hover .wall-item-name,
1611 .wall-item-container:hover .wall-item-location a {
1613 -webkit-transition: all 0.25s ease-in-out;
1614 -moz-transition: all 0.25s ease-in-out;
1615 -o-transition: all 0.25s ease-in-out;
1616 -ms-transition: all 0.25s ease-in-out;
1617 transition: all 0.25s ease-in-out;
1621 .wall-item-container {
1622 border-top: 1px solid rgba(255, 255, 255, 0.8);
1625 .wall-item-container.panel-body {
1630 .comment-edit-preview .wall-item-container.panel-body.preview {
1633 .comment-edit-preview .panel {
1637 .wall-item-container .media {
1640 background-color: rgba(0, 0, 0, 0.03);
1643 /* wall items contact photo */
1648 /*maybe some adional stuff is needed for the different screen sizes */
1650 .contact-photo-image-wrapper {
1657 .contact-photo-overlay {
1665 background: rgba(0, 0, 0, 0.5);
1668 -webkit-transition: opacity 0.25s ease;
1669 -moz-transition: opacity 0.25s ease;
1671 .contact-photo-overlay:hover {
1674 .contact-photo-overlay-content {
1676 text-shadow: 1px 1px 1px #ccc;
1677 color: rgba(255, 255, 255, 0.85);
1679 vertical-align: bottom;
1686 .wwto .contact-photo {
1694 display: inline-block;
1697 /* wall items action dropdown menu */
1698 .media [role="heading"] {
1702 /* Workaround for Firefox where the post heading covers the avatar, preventing hovercard interaction,
1703 48px is the width of the avatar image and should be adjusted accordingly if it ever changes. */
1704 .media .dropdown.pull-left + [role="heading"] {
1713 .shared_header .preferences {
1717 .wall-item-network {
1721 /* wall items contact info */
1722 .media .media-body {
1725 .media .media-body h4.media-heading {
1728 color: $font_color_darker;
1730 .media .media-body .addional-info a,
1731 .media .media-body h5.media-heading > a {
1734 .media .contact-info-comment {
1735 display: table-cell;
1737 .media .contact-info-xs h5,
1738 .media .contact-info-comment {
1749 .wall-item-name.xs {
1754 /* Contact avatar click card */
1755 .userinfo.click-card {
1759 .userinfo.click-card > *:hover:after {
1764 background-color: #ffffff;
1773 border-radius: 0 0 40% 0;
1776 /* The lock symbol popup */
1780 background-color: $nav_bg;
1790 color: $nav_icon_color;
1794 /* Space between content and head */
1799 /* wall items content */
1800 .wall-item-content {
1801 word-break: break-word;
1803 .wall-item-content img {
1805 object-fit: contain;
1807 .wall-item-body > img,
1808 .wall-item-body > a > img {
1811 .wall-item-body .body-attach > a {
1812 color: $font_color_darker;
1813 display: inline-block;
1815 .wall-item-body .body-attach > a div {
1816 color: $font_color_darker;
1820 /* wall-item content elements */
1828 box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.1) inset, 0 1px 1px rgba(0, 0, 0, 0.05);
1830 @media screen and (max-width: 767px) {
1836 margin: 5px -10px 0;
1840 box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.05);
1846 margin-bottom: 10px;
1850 blockquote.shared_content {
1856 padding: 10px 10px 1px 0;
1861 .type-link img.attachment-image {
1864 .type-link blockquote,
1865 .type-video blockquote {
1869 .oembed.video .embed_video > div::before {
1870 font-family: ForkAwesome;
1871 font-weight: normal;
1873 display: inline-block;
1874 text-decoration: inherit;
1875 vertical-align: top;
1883 .oembed.video .embed_video > div {
1884 background-color: rgba(0, 0, 0, 0.2);
1885 -webkit-transition: all 0.25s ease-in-out;
1886 -moz-transition: all 0.25s ease-in-out;
1887 -o-transition: all 0.25s ease-in-out;
1888 -ms-transition: all 0.25s ease-in-out;
1889 transition: all 0.25s ease-in-out;
1891 .oembed.video .embed_video > div:hover {
1892 background-color: rgba(0, 0, 0, 0);
1894 .oembed.video .embed_video.active {
1897 .oembed.video .embed_video.active iframe {
1898 width: 100% !important;
1907 color: $font_color_darker;
1910 .wall-item-tags a:hover {
1911 text-decoration: none;
1913 .wall-item-bottom .label,
1914 .wall-item-bottom .label a {
1917 .wall-item-tags .category,
1918 .wall-item-tags .folder {
1922 /* item social action buttons */
1923 .wall-item-actions {
1926 justify-content: space-between;
1928 .wall-item-actions a,
1929 .wall-item-actions button {
1931 color: $font_color_darker;
1933 .wall-item-actions .active {
1937 .wall-item-actions-left {
1938 display: table-cell;
1939 vertical-align: middle;
1941 .wall-item-actions-right {
1944 .wall-item-actions .checkbox {
1948 .wall-item-actions .button-comments,
1949 .wall-item-actions .button-votes,
1950 .wall-item-actions .button-likes {
1951 text-transform: capitalize;
1953 .wall-item-actions button:hover {
1954 color: $font_color_darker;
1955 text-decoration: underline;
1957 .wall-item-actions .separator {
1961 .wall-item-responses > div > p {
1965 /* wall item hover effects */
1967 @media (min-width: 768px) {
1968 /* Tags and mentions */
1969 .wall-item-container .wall-item-bottom .wall-item-tags span.label {
1970 filter: grayscale(0.5);
1973 -webkit-transition: all 0.25s ease-in-out;
1974 -moz-transition: all 0.25s ease-in-out;
1975 -o-transition: all 0.25s ease-in-out;
1976 -ms-transition: all 0.25s ease-in-out;
1977 transition: all 0.25s ease-in-out;
1980 .wall-item-container:hover .wall-item-bottom .wall-item-tags span.label {
1981 filter: grayscale(0);
1984 -webkit-transition: all 0.25s ease-in-out;
1985 -moz-transition: all 0.25s ease-in-out;
1986 -o-transition: all 0.25s ease-in-out;
1987 -ms-transition: all 0.25s ease-in-out;
1988 transition: all 0.25s ease-in-out;
1990 /* Like/Comment/etc buttons */
1991 .wall-item-container .wall-item-links,
1992 .wall-item-container .wall-item-actions button,
1993 .wall-item-container .body-attach > a {
1996 -webkit-transition: all 0.25s ease-in-out;
1997 -moz-transition: all 0.25s ease-in-out;
1998 -o-transition: all 0.25s ease-in-out;
1999 -ms-transition: all 0.25s ease-in-out;
2000 transition: all 0.25s ease-in-out;
2002 .wall-item-container:hover .wall-item-links,
2003 .wall-item-container:hover .wall-item-actions button,
2004 .wall-item-container:hover .body-attach > a {
2007 -webkit-transition: all 0.25s ease-in-out;
2008 -moz-transition: all 0.25s ease-in-out;
2009 -o-transition: all 0.25s ease-in-out;
2010 -ms-transition: all 0.25s ease-in-out;
2011 transition: all 0.25s ease-in-out;
2013 .wall-item-container .wall-item-body .body-attach > a:hover {
2021 wall-item-comment-wrapper.well {
2024 background-color: rgba(237, 237, 237, $contentbg_transp);
2025 background-image: none;
2027 background-color: red;
2029 wall-item-comment-wrapper.well-small {
2033 wall-item-comment-wrapper.well hr {
2034 border-top: 1px solid #d9d9d9;
2036 .wall-entry wall-item-comment-wrapper.well {
2039 .comment-container {
2041 border-top-left-radius: 3px;
2042 border-top-right-radius: 3px;
2043 border-bottom-right-radius: 0px;
2044 border-bottom-left-radius: 0px;
2047 position: relative !important;
2050 .hide-comments-outer {
2051 background-color: rgba(0, 0, 0, 0.03);
2053 border-radius: 0.5em 0.5em 0 0;
2055 .hide-comments-total {
2064 .wall-item-comment-wrapper {
2066 border-top: 1px solid rgba(255, 255, 255, 0.8);
2067 background-color: rgba(0, 0, 0, 0.03);
2068 border-radius: 0 0 4px 4px;
2072 .comment-fake-form {
2073 border-color: #d9d9d9;
2075 .comment-fake-form textarea {
2079 .comment-container .wall-item-comment-wrapper {
2083 .comment-edit-form textarea {
2087 .comment-edit-submit-wrapper {
2092 .comment-icon-list {
2094 justify-content: space-between;
2097 /* acpopup + textcompletion*/
2099 background-color: #ffffff;
2103 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
2108 /** @todo: we schould consider the possebility to overwrite bootstrap dropdowns
2109 at the beginning of this file to get rid of the !important */
2110 .textcomplete-item > a {
2111 color: $font_color_darker !important;
2112 padding: 5px 20px !important;
2114 .textcomplete-item.active > a {
2115 background-color: rgb(247, 247, 247) !important;
2116 background-image: none !important;
2117 border-left: 3px solid $link_color;
2118 padding-left: 17px !important;
2120 .textcomplete-item a .forum {
2127 /* The wall-item thread levels */
2128 .wall-item-container.thread_level_3,
2129 .wall-item-container.thread_level_4,
2130 .wall-item-container.thread_level_5,
2131 .wall-item-container.thread_level_6,
2132 .wall-item-container.thread_level_7 {
2142 background-color: rgba(247, 247, 247, $contentbg_transp);
2143 box-shadow: 0 0 3px #dadada;
2144 -webkit-box-shadow: 0 0 3px #dadada;
2145 -moz-box-shadow: 0 0 3px #dadada;
2150 section > .tabbar-wrapper {
2151 /* The tabbar shouldn't' be visibile inside
2152 the section element. Only after we have
2153 moved it to the nav through js */
2154 display: none !important;
2163 #tabmenu .search-heading {
2165 text-overflow: ellipsis;
2166 white-space: nowrap;
2179 border-bottom: 0 solid $link_color;
2182 transition: all 0.15s ease;
2190 border-bottom-width: 4px;
2192 .tabbar.visible-xs .tabs-extended {
2195 #dropdownMenuTools-xs {
2198 ul.tabbar ul.tabs-extended:hover li.dropdown {
2202 ul.tabbar ul.tabs-extended li.active {
2204 border-bottom-width: 2px;
2206 ul.tabbar ul.tabs-extended li.active a {
2209 ul.dropdown-menu li:hover {
2215 box-sizing: border-box;
2218 .dropdown-menu li a,
2219 .dropdown-menu li .btn-link {
2220 color: $font_color_darker;
2222 .dropdown-menu li > :hover,
2223 .dropdown-menu li > :visited,
2224 .dropdown-menu li > :focus {
2228 .dropdown-menu li:first-child {
2232 /* Notificaiotn badges */
2233 #mail-update-li.show {
2234 display: inline-block !important;
2238 p.wall-item-announce,
2240 .media .shared-time,
2243 .media .location a {
2245 color: $font_color_darker;
2249 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2251 border-left: 3px solid rgba(255, 255, 255, 0);
2254 .media-list > li:hover,
2255 .media-list > li.selected,
2256 .media-list > li.active {
2257 border-left: 3px solid $link_color;
2258 background-color: rgba(247, 247, 247, $contentbg_transp);
2265 .form-control:focus {
2266 border: 2px solid $link_color;
2270 .radio label::before,
2271 .checkbox label::before {
2272 background-color: rgba(255, 255, 255, $contentbg_transp);
2274 .radio label::after {
2275 background-color: $link_color;
2277 .checkbox label::after {
2281 .checkbox input[type="checkbox"]:focus + label::before,
2282 .radio input[type="radio"]:focus + label::before {
2283 outline-color: $link_hover_color;
2287 color: $font_color_darker;
2290 input[type="range"].form-control {
2296 .form-control.form-search {
2297 border-radius: 30px;
2298 background-image: url(img/icon_search16x16.png);
2299 background-repeat: no-repeat;
2300 background-position: 10px 8px;
2303 .form-group-search {
2308 .form-group-search .form-button-search {
2312 border-radius: 30px;
2314 .search-input.form-control.form-search {
2322 .search-content-wrapper > #search-header-wrapper {
2325 .search-content-wrapper > .section-title-wrapper {
2328 #navbar-button > #search-save {
2331 /* Section-Content-Wrapper */
2332 #search-header-wrapper {
2334 padding-bottom: 20px;
2335 margin-bottom: 20px;
2337 background-color: rgba(255, 255, 255, $contentbg_transp);
2340 color: $font_color_darker;
2341 box-shadow: 0 0 3px #dadada;
2342 -webkit-box-shadow: 0 0 3px #dadada;
2343 -moz-box-shadow: 0 0 3px #dadada;
2350 section > .generic-page-wrapper,
2351 .videos-content-wrapper,
2352 .suggest-content-wrapper,
2353 .help-content-wrapper,
2354 .match-content-wrapper,
2355 .dirfind-content-wrapper,
2356 .delegation-content-wrapper,
2357 .notes-content-wrapper,
2358 .message-content-wrapper,
2359 .apps-content-wrapper,
2361 .delegate-content-wrapper,
2362 .uexport-content-wrapper,
2363 .dfrn_request-content-wrapper,
2364 .friendica-content-wrapper,
2365 .credits-content-wrapper,
2366 .nogroup-content-wrapper,
2367 .profperm-content-wrapper,
2368 .invite-content-wrapper,
2369 .tos-content-wrapper,
2370 .fsuggest-content-wrapper {
2371 min-height: calc(100vh - 150px);
2373 padding-bottom: 20px;
2374 margin-bottom: 20px;
2376 background-color: rgba(255, 255, 255, $contentbg_transp);
2379 color: $font_color_darker;
2380 box-shadow: 0 0 3px #dadada;
2381 -webkit-box-shadow: 0 0 3px #dadada;
2382 -moz-box-shadow: 0 0 3px #dadada;
2384 #content:hover .page-action.faded-icon {
2386 transition: all 0.25s ease-in-out;
2388 #content .page-action.faded-icon:hover {
2392 .section-title-wrapper {
2395 /* Home and Login Page */
2396 body.mod-home nav.navbar .nav > li > a:hover {
2397 background-color: rgba(255, 255, 255, 0.2);
2399 body.mod-home .navbar #nav-login,
2400 body.mod-login .navbar #nav-login {
2404 #profile-content-standard,
2405 #profile-content-advanced {
2410 margin-bottom: 20px;
2412 .contact-block-div.forumlist-profile-advanced {
2417 ul.viewcontact_wrapper {
2419 margin-right: -15px;
2421 ul.viewcontact_wrapper > li {
2424 .contact-wrapper .contact-photo-wrapper button {
2427 .contact-wrapper.media {
2429 word-wrap: break-word;
2432 /* bootstrap hack for .media */
2433 .contact-wrapper.media .media-body {
2434 display: table-cell;
2439 .contact-wrapper.media:before,
2444 .contact-wrapper.media:after {
2447 .contact-wrapper .contact-photo-image-wrapper img.contact-photo.xl {
2451 .contact-wrapper .contact-photo-image-wrapper img.contact-photo-xs {
2455 .contact-wrapper .contact-photo-overlay-content.xl {
2458 .contact-wrapper .contact-photo-menu {
2462 .contact-entry-desc {
2463 color: $font_color_darker;
2465 .contact-entry-checkbox {
2468 .contact-wrapper .media-body .contact-entry-name h4.media-heading a {
2469 font-weight: bold !important;
2471 font-size: 15px !important;
2473 .contact-wrapper .contact-actions {
2476 .contact-wrapper .contact-action-link,
2477 .contact-wrapper .contact-action-link:hover,
2478 .textcomplete-item .contact-wrapper .contact-action-link {
2480 color: $font_color_darker;
2483 .contact-wrapper .contact-action-link {
2485 transition: all 0.25s ease-in-out;
2487 ul li:hover .contact-wrapper .contact-action-link {
2489 transition: all 0.25s ease-in-out;
2491 ul li:hover .contact-wrapper .contact-action-link:hover {
2494 #contacts-search-wrapper,
2495 #directory-search-wrapper {
2498 #contact-drop-confirm .contact-actions,
2499 #contact-drop-confirm .contact-photo-overlay,
2500 #contact-drop-confirm .contact-photo-menu {
2503 #contact-drop-confirm #confirm-form {
2508 #contact-edit-actions {
2511 #contact-edit-status-wrapper {
2513 background-color: rgba(225, 245, 254, $contentbg_transp);
2516 #contact-edit-settings {
2520 /* directory page */
2521 #directory-search-heading {
2525 /* group edit page */
2528 margin-bottom: 10px;
2531 .group-actions button,
2536 .contact-group-actions .fa-times-circle {
2539 .contact-group-actions .fa-plus-circle {
2543 #group-edit-wrapper {
2547 #group-edit-header {
2550 #group-update-wrapper .contact-photo-overlay {
2553 #group-update-wrapper .viewcontact_wrapper .contact-group-actions {
2558 #group-update-wrapper .viewcontact_wrapper .contact-group-link {
2563 #group-update-wrapper .viewcontact_wrapper .contact-action-link:hover {
2566 #group-update-wrapper .shortmode {
2570 #group-update-wrapper .shortmode .contact-photo {
2574 #group-update-wrapper .shortmode .media {
2577 #group-update-wrapper .shortmode .contact-entry-desc {
2578 font-size: 12px !important;
2580 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading {
2583 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading a {
2584 font-size: 13px !important;
2585 white-space: nowrap;
2587 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-rel,
2588 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-network {
2593 .message-content-wrapper > li {
2594 /* we need this overwriting because we have no template file
2595 for the general mail page /message
2597 list-style-type: none;
2600 max-height: calc(100vh - 200px);
2602 #mail-conversation {
2604 max-height: calc(100vh - 400px);
2609 .mail-conv-wrapper .media .contact-photo-wrapper img {
2613 .mail-thread #prvmail-to-label,
2614 .mail-thread #prvmail-subject-label {
2617 .mail-thread #prvmail-message-label > label {
2620 .mail-thread #prvmail-message-label textarea {
2623 .mail-conv-wrapper {
2625 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2628 height: calc(100vh - 150px);
2631 height: calc(100% - 20px);
2633 #message-preview ul {
2636 #message-preview .media-list li {
2640 #message-preview .media-list li:hover {
2641 border-left: none !important;
2643 #message-preview .media-list li a {
2646 .mail-list-outside-wrapper {
2648 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2650 .mail-list-outside-wrapper .contact-photo-wrapper img {
2657 #modal #prvmail-text-edit-bb .bb-img {
2662 #photo-album-edit-name-label {
2665 .photo-album-edit-name {
2669 .photo-album-actions {
2670 margin-bottom: 10px;
2672 .photo-album-actions .photos-order-link {
2677 .fc .fc-month-view .fc-content .fc-title .item-desc:hover {
2678 color: $link_hover_color;
2680 .fc .fc-list-item-title a {
2683 .fc .fc-list-item-title a[href]:hover {
2684 color: $link_hover_color;
2685 text-decoration: none;
2687 .event-wrapper .event-owner {
2688 margin-bottom: 15px;
2690 .event-wrapper .event-owner img {
2699 .event-wrapper .vevent {
2702 box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
2704 .event-wrapper .event-buttons {
2707 #event-form-wrapper {
2710 #event-edit-form-wrapper {
2714 color: $font_color_darker;
2716 #event-edit-form-wrapper #event-edit-time {
2719 .event-buttons .plink-event-link {
2722 .vevent .event-summary {
2725 .vevent .event-description {
2728 .vevent .event-location .location {
2732 .modal-body .vevent .event-summary {
2735 #event-preview .vevent .event-summary {
2740 .event-card-details,
2741 .event-card-header {
2745 .event-card-left-date {
2748 .vevent .event-card-header {
2751 .event-card-left-date {
2752 width: 60px; /* Das muss wahrscheinlich unterschiedlich sein zwischen calendar und stream */
2754 .event-card .event-date-wrapper > span {
2758 white-space: nowrap;
2760 .event-card .event-date-wrapper .event-card-short-month {
2762 text-transform: uppercase;
2764 .event-card .event-date-wrapper.medium .event-card-short-date {
2769 .event-card .event-card-content {
2771 padding: 0 5px 0 15px;
2772 box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
2776 .event-card .event-card-content .event-map-btn {
2782 .event-card .event-card-title {
2784 color: $font_color_darker;
2789 .event-card .event-card-location {
2793 .event-card .event-card-location br {
2796 .event-card .event-card-location br::after {
2799 .event-card-profile-name a {
2802 .event-card-profile-name a:hover {
2803 color: $link_hover_color;
2805 .event-card .event-card-content .event-location-map {
2810 .event-card .event-card-content .event-location-map .map {
2813 .event-card .description {
2815 box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, 0.1) inset;
2828 transform: translateZ(0);
2829 transition: opacity 0.2s;
2834 text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
2836 .photo-next-link > i,
2837 .photo-prev-link > i {
2838 vertical-align: super;
2840 .photo-next-link > i {
2849 #photo-photo:hover .photo-next-link,
2850 #photo-photo:hover .photo-prev-link {
2853 #photo-photo .photo-next-link:hover,
2854 #photo-photo .photo-prev-link:hover {
2858 .photo-comment-wrapper .comment {
2861 .photo-comment-wrapper .wall-item-content {
2862 color: $font_color_darker;
2865 .photo-comment-wrapper .comment-wwedit-wrapper,
2866 .photo-comment-wrapper .wall-item-outside-wrapper.media:first-child {
2871 .profile-listing-table {
2875 .profile-listing-row {
2878 .profile-listing-cell {
2879 display: table-cell;
2881 .profile-listing-photo {
2886 #profile-listing-new-link-wrapper {
2887 margin-bottom: 20px;
2890 #profile-photo-upload-section {
2894 #profile-photo-upload-close {
2899 .section-subtitle-wrapper {
2902 details.profile-jot-net[open] summary:before,
2903 .panel .section-subtitle-wrapper a.accordion-toggle:before {
2904 font-family: ForkAwesome;
2908 details.profile-jot-net summary:before,
2909 .panel .section-subtitle-wrapper a.accordion-toggle.collapsed:before {
2910 font-family: ForkAwesome;
2913 details.profile-jot-net summary:before {
2917 details.profile-jot-net[open] summary:before {
2921 #settings-nick-wrapper {
2922 margin-bottom: 20px;
2928 /* Emulates Bootstrap display */
2931 background-color: rgba(255, 255, 255, $contentbg_transp);
2934 box-shadow: 0 0 3px #dadada;
2935 -webkit-box-shadow: 0 0 3px #dadada;
2936 -moz-box-shadow: 0 0 3px #dadada;
2939 .settings-block.fakelink,
2940 .settings-block > .fakelink {
2944 .settings-block > .fakelink {
2945 margin: -10px -15px 10px -15px;
2946 border-radius: 4px 4px 0 0;
2949 .settings-block.fakelink:hover,
2950 .settings-block > .fakelink:hover {
2951 color: $link_hover_color;
2953 .settings-block.fakelink > h3,
2954 .settings-block > .fakelink > h3 {
2961 .section-subtitle-wrapper > h2 {
2964 margin-bottom: 10px;
2967 .fakelink > h3:before {
2968 padding-right: 10px;
2970 .widget.fakelink > h3:before,
2971 .settings-block.fakelink > h3:before {
2972 font-family: ForkAwesome;
2973 content: "\f0da"; /* Right Plain Pointer */
2975 .widget > .fakelink > h3:before,
2976 #sidebar-group-header > .fakelink > h3:before,
2977 .settings-block > .fakelink > h3:before {
2978 font-family: ForkAwesome;
2979 content: "\f0d7"; /* Bottom Plain Pointer */
2986 /* Intro Notifications */
2987 ul.notif-network-list {
2989 margin-right: -15px;
2991 ul.notif-network-list > li {
2993 padding-right: 15px;
2995 .intro-wrapper.media {
2997 word-wrap: break-word;
3000 .intro-photo-wrapper img.intro-photo {
3008 .intro-enty-name h4 {
3009 font-size: 15px !important;
3011 .intro-wrapper button.intro-action-link {
3013 transition: all 0.25s ease-in-out;
3015 .intro-wrapper button.intro-action-link,
3016 .intro-wrapper button.intro-action-link:hover {
3019 color: $font_color_darker;
3021 ul li:hover .intro-wrapper button.intro-action-link {
3023 transition: all 0.25s ease-in-out;
3025 ul li:hover .intro-wrapper button.intro-action-link:hover {
3028 .intro-action-buttons {
3032 transition: max-height 0.1s ease-out;
3034 ul.notif-network-list > li:hover .intro-action-buttons {
3036 transition: max-height 0.1s ease-in;
3040 .intro-network-label,
3041 .intro-location-label,
3042 .intro-keywords-label,
3044 .intro-knowyou-label,
3045 .intro-madeby-label {
3048 .intro-contact-info.xs .intro-url-label,
3049 .intro-contact-info.xs .intro-network-label,
3050 .intro-contact-info.xs .intro-location-label,
3051 .intro-contact-info.xs .intro-keywords-label,
3052 .intro-contact-info.xs .intro-about-label,
3053 .intro-contact-info.xs .intro-knowyou-label {
3058 /* Notifications Page */
3059 ul.notif-network-list li.unseen {
3060 background-color: #e3eff3;
3062 .notif-item img.notif-image {
3067 .notif-item .notif-desc-wrapper {
3070 .notif-item .notif-desc-wrapper a {
3073 color: $font_color_darker;
3080 /* This is a little bit hacky. Since the search page is used for diferent
3081 content types we can't apply the generic-page-wrapper class.
3082 So we apply the css of the generic-page-wrapper class to the ul element with some
3083 little modifications to emulate a standard page template */
3084 .search-content-wrapper > ul.viewcontact_wrapper {
3085 min-height: calc(100vh - 150px);
3087 padding-bottom: 20px;
3089 margin-bottom: 20px;
3091 background-color: rgba(255, 255, 255, $contentbg_transp);
3094 color: $font_color_darker;
3095 box-shadow: 0 0 3px #dadada;
3096 -webkit-box-shadow: 0 0 3px #dadada;
3097 -moz-box-shadow: 0 0 3px #dadada;
3101 section.help-content-wrapper h1 {
3102 padding-bottom: 0.3em;
3104 border-bottom: 1px solid #ddd;
3106 section.help-content-wrapper h2 {
3107 padding-bottom: 0.3em;
3109 border-bottom: 1px solid #ddd;
3111 section.help-content-wrapper h3 {
3114 section.help-content-wrapper h4 {
3117 section.help-content-wrapper h1,
3118 section.help-content-wrapper h2,
3119 section.help-content-wrapper h3,
3120 section.help-content-wrapper h4,
3121 section.help-content-wrapper h5,
3122 section.help-content-wrapper h6 {
3124 margin-bottom: 16px;
3128 section.help-content-wrapper p {
3131 section.help-content-wrapper p,
3132 section.help-content-wrapper a,
3133 section.help-content-wrapper li {
3139 #adminpage #frio_background_image .image-select {
3142 #adminpage #frio_background_image.input-group {
3145 #admin-summary-wrapper {
3148 #adminpage ul#addonslist,
3152 #adminpage li .icon {
3153 display: inline-block;
3154 vertical-align: text-top;
3158 #adminpage li .icon:before {
3160 display: inline-block;
3167 border: 1px solid #cccccc;
3169 background-color: $background_color;
3170 -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3171 -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3172 transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3174 #adminpage li .icon.on:after {
3175 font-family: "ForkAwesome";
3177 display: inline-block;
3190 #adminpage .addon .desc {
3193 #admin-users #users tr.blocked {
3194 background-color: #f8efc0;
3196 .adminpage .table-hover > tbody > tr:hover + tr.details {
3197 background-color: #f5f5f5;
3199 .offset-anchor::before {
3205 pointer-events: none;
3213 #identity-selector-wrapper {
3218 #identity-selector-wrapper .identity-match-photo {
3222 #identity-selector-wrapper .identity-match-photo button {
3225 #identity-selector-wrapper .identity-match-photo .badge {
3230 #identity-selector-wrapper .identity-match-name {
3233 #identity-selector-wrapper .identity-match-details {
3239 #register-openid-wrapper,
3240 #register-name-wrapper,
3241 #register-invite-wrapper,
3242 #profile-publish-wrapper {
3245 #register-openid-end,
3246 #register-nickname-end {
3251 * Overwriting for transparency and other colors
3253 main .nav-tabs > li.active > a,
3254 main .nav-tabs > li.active > a:focus,
3255 main .nav-tabs > li.active > a:hover {
3256 background-color: rgba(255, 255, 255, $contentbg_transp);
3266 @media (min-width: 768px) {
3273 * Framework overwrite
3276 /* textcomplete for contact filtering*/
3277 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list {
3278 position: relative !important;
3279 top: inherit !important;
3280 bottom: inherit !important;
3281 left: inherit !important;
3284 margin-right: -15px;
3285 background-color: transparent;
3289 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li {
3291 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
3293 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li:first-child {
3296 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list .textcomplete-item > a {
3297 padding: 0 !important;
3299 background-color: transparent !important;
3301 /* this is a little hack for texcomplete contact filter
3302 There are for some reasons empty <a> tags. I don't know why */
3303 .textcomplete-item .contact-wrapper a {
3308 body .tread-wrapper .hovercard a,
3309 body .tread-wrapper .hovercard a:hover {
3312 body .tread-wrapper .hovercard:hover .hover-card-content a {
3313 color: $link_color !important;
3316 /* Pagination improvements */
3321 .pagination > li > a,
3322 .pagination > li > span {
3326 .pagination > li > a:hover,
3327 .pagination > li > span:hover {
3328 color: $link_hover_color;
3330 .pagination > .active > a,
3331 .pagination > .active > a:focus,
3332 .pagination > .active > a:hover,
3333 .pagination > .active > span,
3334 .pagination > .active > span:focus,
3335 .pagination > .active > span:hover {
3336 background-color: $link_color;
3337 border-color: $link_color;
3340 .pagination li.pager_n a {
3344 .pagination .pager_prev a {
3347 border-top-right-radius: 3px;
3348 border-bottom-right-radius: 3px;
3350 .pagination .pager_next a {
3353 border-top-left-radius: 3px;
3354 border-bottom-left-radius: 3px;
3357 .pager .previous > a {
3361 .pagination .disabled > a,
3362 .pager .disabled > a {
3368 background-color: rgba(255, 255, 255, $contentbg_transp);
3372 * some temporary workarounds until this will solved
3373 * elsewhere (e.g. new templates)
3375 section .profile-match-wrapper {
3382 #login-submit-wrapper {
3385 #lost-password-link {
3388 #login-lost-password-link {
3389 margin-bottom: 10px;
3395 #id_password_wrapper {
3396 margin-bottom: unset;
3403 background: #8ad0a1;
3410 .mod-home.is-not-singleuser,
3412 background-color: $login_bg_color;
3413 background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4)), url($login_bg_image);
3414 background-size: cover;
3415 background-attachment: fixed;
3416 background-position: center;
3419 .mod-home.is-not-singleuser nav.navbar,
3420 .mod-login nav.navbar {
3421 background-color: transparent;
3423 .mod-home.is-not-singleuser #topbar-second,
3424 .mod-login #topbar-second {
3425 background-color: transparent;
3429 .mod-home.is-not-singleuser .login-content,
3430 .mod-login .login-content {
3435 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3439 .mod-home.is-not-singleuser .login-form > #login-form label,
3440 .mod-login #content #login-form label {
3444 .mod-home.is-not-singleuser .login-panel-content,
3445 .mod-login .login-panel-content {
3446 background-color: rgba(255, 255, 255, 0.85);
3450 background: $nav_bg !important;
3451 color: $btn_primary_color !important;
3454 -webkit-box-shadow: none;
3456 -moz-box-shadow: none;
3457 background-image: none;
3465 width: 100% !important;
3468 .qq-upload-drop-area {
3469 background: white !important;
3472 -webkit-box-shadow: none;
3474 -moz-box-shadow: none;
3475 background-image: none;
3483 width: 100% !important;
3484 display: block !important;
3485 position: relative !important;
3486 border: black 1px dashed !important;
3487 margin-bottom: 5px !important;
3488 margin-top: 15px !important;
3492 * The different views of js fullcalendar
3496 margin-bottom: 10px;
3500 #event-calendar-title {
3501 display: inline-block;
3510 #fc-header-right .dropdown > button {
3513 #event-calendar-title {
3514 vertical-align: middle;
3516 #event-calendar-views {
3523 .fc .fc-month-view td.fc-widget-content,
3525 .fc .fc-list-view .fc-list-table td,
3529 .fc td.fc-widget-header,
3530 .fc th.fc-widget-header {
3535 .fc .fc-month-view td.fc-day {
3538 border-bottom: 1px solid;
3541 .fc .fc-day-grid-container .fc-row {
3542 border-bottom: 1px solid;
3545 .fc tr td.fc-today {
3548 .fc .fc-month-view .fc-content .fc-title .item-desc {
3551 .fc .fc-view-container {
3554 .fc .fc-list-view td {
3557 #events-calendar.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
3562 background-color: #e3f2fd;
3563 border: 1px solid #bbdefb;
3564 color: $font_color_darker;
3566 .fc .fc-month-view .fc-time,
3567 .fc .fc-listMonth-view .fc-list-item-time,
3568 .fc .fc-listMonth-view .fc-list-item-marker,
3569 .fc .fc-listMonth-view .fc-widget-header {
3572 .fc .fc-listMonth-view .fc-list-item:hover td {
3573 background: transparent;
3576 .fc .fc-listMonth-view .seperator {
3587 .event-card .event-label,
3588 .event-card .location-label {
3591 .popover.event-card .event-card-basic-content {
3596 .event-card .event-hover-location .location {
3601 /* Medium devices (desktops, 992px and up) */
3602 @media (min-width: 992px) {
3603 .mod-home.is-not-singleuser #content,
3604 .mod-login #content {
3605 margin-top: 100px !important;
3608 .mod-home.is-not-singleuser .login-form > #login-form,
3609 .mod-home.is-not-singleuser .login-form > #login-extra-links,
3610 .mod-login #content #login-form {
3611 background-color: #fff;
3615 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3617 background-color: white;
3620 .mod-home.is-not-singleuser .login-form > #login-form label,
3621 .mod-login #content #login-form label {
3625 .mod-home.is-not-singleuser .login-form::before,
3626 .mod-login #content #login-form::before {
3630 background-color: rgba(255, 255, 255, 0.1);
3638 .mod-home.is-not-singleuser .login-form::after,
3639 .mod-login #content #login-form::after {
3643 background-color: rgba(255, 255, 255, 0.2);
3652 /* Mobile display */
3653 @media (max-width: 600px) {
3661 #friendica-logo-mask {
3675 .panel .panel-body {
3679 .toplevel_item > .wall-item-container {
3687 .wall-item-actions {
3695 .generic-page-wrapper,
3696 .videos-content-wrapper,
3697 .suggest-content-wrapper,
3698 .help-content-wrapper,
3699 .match-content-wrapper,
3700 .dirfind-content-wrapper,
3701 .directory-content-wrapper,
3702 .delegation-content-wrapper,
3703 .notes-content-wrapper,
3704 .message-content-wrapper,
3705 .apps-content-wrapper,
3707 .delegate-content-wrapper,
3708 .uexport-content-wrapper,
3709 .dfrn_request-content-wrapper,
3710 .friendica-content-wrapper,
3711 .credits-content-wrapper,
3712 .nogroup-content-wrapper,
3713 .profperm-content-wrapper,
3714 .invite-content-wrapper,
3715 .tos-content-wrapper,
3716 .fsuggest-content-wrapper {
3776 .wwto .contact-photo {
3784 Prevent automatic zoom on input focus on iOS
3785 see https://stackoverflow.com/a/16255670
3791 .wall-item-container.thread_level_3,
3792 .wall-item-container.thread_level_4,
3793 .wall-item-container.thread_level_5,
3794 .wall-item-container.thread_level_6,
3795 .wall-item-container.thread_level_7 {