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;
104 @media screen and (max-width: 990px) {
109 position: fixed !important;
111 background-color: $background_color;
118 padding-left: 6px !important;
119 padding-right: 6px !important;
129 background-color: rgba(0, 0, 0, 0.4);
131 transition: opacity 0.5s;
133 aside.canvas-slid::before {
137 /* prevent page scroll when the aside is opened **/
143 * standard page elements
149 color: $nav_icon_color;
156 padding: 0 12px 0 12px;
158 background-color: $nav_bg;
162 #item-delete-selected {
171 padding: 0 12px 0 12px;
173 background-color: $link_color;
178 #toggle_mobile_link {
183 * Overwriting and Extend Bootstrap
195 -webkit-box-shadow: none;
197 -moz-box-shadow: none;
198 background-image: none;
208 outline-color: $link_hover_color;
231 background-color: #ae0f0f;
236 color: $btn_primary_color;
238 .btn.btn-primary:hover,
239 .btn.btn-primary:focus {
240 color: $btn_primary_color;
241 background: $btn_primary_hover_color;
242 text-decoration: none;
244 .btn.btn-primary:active,
245 .btn.btn-primary.active {
246 background: $btn_primary_hover_color;
249 .btn-primary.active.focus,
250 .btn-primary.active:focus,
251 .btn-primary.active:hover,
252 .btn-primary:active.focus,
253 .btn-primary:active:focus,
254 .btn-primary:active:hover,
255 .open > .dropdown-toggle.btn-primary.focus,
256 .open > .dropdown-toggle.btn-primary:focus,
257 .open > .dropdown-toggle.btn-primary:hover,
260 .open > .dropdown-toggle.btn-primary {
261 background: $btn_primary_hover_color;
274 background: transparent;
281 background-color: transparent;
285 border-left: 1px solid #777;
289 border: 1px solid transparent;
298 .toggle .toggle-off:hover {
300 background-color: #eee;
303 .toggle.off .toggle-handle {
304 background-color: #eee;
307 background-color: #fff;
309 border: 1px solid transparent;
313 .input-group-sm > .form-control,
314 .input-group-sm > .input-group-addon,
315 .input-group-sm > .input-group-btn > .btn {
316 padding: 0.275rem 0.75rem;
319 border-radius: 0.2rem;
321 /* Bootstrap media class fix/hack
322 * This is a test. I thought it does have some
323 * issues in some corner cases. Maybe we remove
325 * https://github.com/twbs/bootstrap/issues/6053
348 vertical-align: baseline;
349 background-color: $link_color;
357 /* disabled elements */
358 .community-content-wrapper > h3,
359 .network-content-wrapper > .section-title-wrapper {
363 header #site-location {
374 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
376 font-family: tahoma, "Lucida Sans", sans;
382 header #banner #logo-img,
383 .navbar-brand #logo-img {
384 -webkit-mask-image: url("img/friendica-25.png");
385 background-color: $nav_icon_color;
392 #navbrand-container {
395 #navbrand-container #navbar-brand-text {
397 color: $nav_icon_color;
400 /* offcanvas section */
402 /* Right offcanvas uses: #offcanvasUsermenu, .offcanvas-right-active
403 .offcanvas-right and .offcanvas-right-overlay */
412 background-color: #333;
413 transform: translateX(-100%);
414 transition: 0.4s ease-in-out;
425 background-color: #333;
426 transform: translateX(100%);
427 transition: 0.4s ease-in-out;
430 .offcanvas-active .off-canvas {
431 transform: translateX(0);
433 .offcanvas-right-active #offcanvasUsermenu {
434 transform: translateX(0);
437 transition: 0.4s ease-in-out;
442 transition: 0.4s ease-in-out;
444 .offcanvas-active .page-wrapper,
445 .offcanvas-active .navbar-fixed-top {
446 transform: translateX(300px);
455 background-color: rgba(0, 0, 0, 0.5);
459 transition: 0.4s ease-in-out;
461 .offcanvas-right-overlay {
467 background-color: rgba(0, 0, 0, 0.5);
471 transition: 0.4s ease-in-out;
473 .offcanvas-active .offcanvas-overlay,
474 .offcanvas-right-active .offcanvas-right-overlay {
478 /* offcanvas section ends */
492 .topbar ul.nav > li {
495 @media (min-width: 992px) {
496 .topbar ul.nav > li > a,
497 .topbar ul.nav > li > button {
499 padding-bottom: 15px;
503 @media (max-width: 991px) {
504 .topbar ul.nav > li > a,
505 .topbar ul.nav > li > button {
509 .topbar .dropdown-footer {
512 .topbar .dropdown-header {
519 .topbar .dropdown-header .dropdown-header-link {
524 .topbar .dropdown-header .dropdown-header-link a,
525 .topbar .dropdown-header .dropdown-header-link .btn-link {
526 color: $link_color !important;
530 .topbar .dropdown-header:hover {
535 background-color: $nav_bg;
538 color: $nav_icon_color;
540 @media screen and (max-width: 767px) {
547 #topbar-first .navbar-toggle {
552 #topbar-first .nav > li > a,
553 #topbar-first .nav > li > button,
554 nav.navbar .nav > li > a,
555 nav.navbar .nav > li > button {
556 color: $nav_icon_color;
558 #topbar-first .nav > .open > a,
559 #topbar-first .nav > .open > button {
560 background-color: $nav_bg;
562 #topbar-first .nav > li > a:hover,
563 #topbar-first .nav > li > a:focus,
564 #topbar-first .nav > li > button:not(#main-menu):hover,
565 #topbar-first .nav > li > button:not(#main-menu):focus,
566 nav.navbar .nav > li > a:hover,
567 nav.navbar .nav > li > a:focus,
568 nav.navbar .nav > li > button:hover,
569 nav.navbar .nav > li > button:focus {
570 background-color: $nav_icon_hover_color;
572 #topbar-first .nav > .account {
576 #topbar-first .nav > .account img {
582 #topbar-first .nav > .account .dropdown-toggle {
583 padding: 8px 5px 0px;
587 #topbar-first .nav > .account .dropdown-toggle span {
590 #topbar-first .topbar-brand {
594 #topbar-first .topbar-actions {
598 #topbar-first .topbar-nav {
604 #topbar-first .topbar-nav .nav-segment {
608 #topbar-first .topbar-nav .nav-segment > a {
609 display: inline-block;
610 text-decoration: none;
613 #topbar-first .topbar-nav .nav-segment .nav-notification {
617 background-color: #ff3535;
619 #topbar-first #intro-update {
622 #topbar-first .topbar-nav .arrow:after {
627 border-color: transparent;
634 border-bottom-color: #fff;
637 #topbar-first .topbar-nav .arrow {
642 border-color: transparent;
649 border-bottom-color: rgba(0, 0, 0, 0.15);
653 #topbar-first .topbar-nav .dropdown-menu {
657 #topbar-first .topbar-nav .dropdown-menu ul.media-list {
661 #topbar-first .topbar-nav .dropdown-menu li {
664 #topbar-first .topbar-nav .dropdown-menu li i.approval {
670 #topbar-first .topbar-nav .dropdown-menu li i.accepted {
673 #topbar-first .topbar-nav .dropdown-menu li i.declined {
676 #topbar-first .topbar-nav .dropdown-menu li .media {
679 #topbar-first .topbar-nav .dropdown-menu li .media .img-space {
684 #topbar-first .dropdown-footer {
685 margin: 10px 10px 5px;
687 #topbar-first .caret {
688 border-top-color: #bebebe;
690 #topbar-first .btn-group > a {
691 background-color: #7f9baa;
693 #topbar-first .btn-enter {
694 background-color: #7f9baa;
697 #topbar-first .btn-enter:hover {
698 background-color: #89a2b0;
700 .navbar-fixed-top ul.nav.navbar-nav.navbar-right {
704 #friendica-logo-mask {
708 /* Notification Menu */
709 #topbar-first #nav-notifications-menu {
712 #topbar-first #nav-notifications-menu a {
713 color: $font_color_darker;
716 #topbar-first #nav-notifications-menu li.notif-entry {
717 color: $font_color_darker;
719 border-bottom: 1px solid #eee;
721 border-left: 3px solid #fff;
725 #topbar-first #nav-notifications-menu li.notification-unseen {
726 border-left: 3px solid #e3eff3;
727 background-color: #e3eff3;
729 #topbar-first #nav-notifications-menu li.notif-entry:hover {
730 background-color: #f7f7f7;
731 border-left: 3px solid $link_color;
733 #topbar-first #nav-notifications-menu li.placeholder {
736 #topbar-first #nav-notifications-menu .media .media-body .contactname {
739 #topbar-first #nav-notifications-menu .media .media-body .label {
740 padding: 0.1em 0.5em;
742 #topbar-first #nav-notifications-menu li.notif-entry .media-object a img {
747 /* The Top Nav Bar user menu */
748 #topbar-first .account .user-title {
752 #topbar-first .account .user-title span {
753 color: $nav_icon_color;
755 #topbar-first .account #main-menu .nav-notification {
759 background-color: #ff8989;
763 background-color: $background_color;
767 border-left-color: $nav_icon_color;
768 box-shadow: -3px 0 3px -3px black;
770 #offcanvasUsermenu .nav-container {
771 /* required to compensate for moving the container below the topnav bar */
774 #offcanvasUsermenu li.divider {
775 background-color: transparent;
779 #offcanvasUsermenu ul,
780 #offcanvasUsermenu ul li:first-child,
781 #offcanvasUsermenu ul,
782 #offcanvasUsermenu ul li:last-child {
785 #offcanvasUsermenu li,
786 #offcanvasUsermenu a {
787 background-color: $nav_bg;
788 color: $nav_icon_color;
791 #offcanvasUsermenu li.list-group-item {
792 border-color: $background_color;
794 #offcanvasUsermenu a {
797 #offcanvasUsermenu li.nav-sitename {
800 #topbar-first .dropdown.account li#nav-sitename {
804 word-break: break-word;
806 #topbar-first .dropdown.account li#nav-sitename:hover {
808 background-color: $nav_bg;
811 #topbar-first #search-box .navbar-form {
822 background-color: $background_color;
824 /* fix bootstrap .well class not playing well with data-target slide animation */
830 #search-mobile .navbar-form {
833 #topbar-first #search-box .form-search {
836 background-position: 8px 4px;
838 #topbar-first #search-box .btn {
847 background-color: #fff;
849 background-image: none;
850 -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
851 -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
852 box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
853 border-bottom: 1px solid #d4d4d4;
855 #topbar-second > .container {
858 @media screen and (max-width: 767px) {
859 #topbar-second > .container,
860 #topbar-second #navbar-button {
864 #topbar-second .dropdown-menu {
868 #topbar-second .dropdown-menu .divider {
871 #topbar-second #space-menu-dropdown,
872 #topbar-second #search-menu-dropdown {
875 #topbar-second #space-menu-dropdown .media-list,
876 #topbar-second #search-menu-dropdown .media-list {
884 .intro-wrapper button.intro-action-link {
888 ul li .intro-wrapper button.intro-action-link {
891 @media screen and (max-width: 768px) {
892 #topbar-second #space-menu-dropdown .media-list,
893 #topbar-second #search-menu-dropdown .media-list {
897 #topbar-second #space-menu-dropdown form,
898 #topbar-second #search-menu-dropdown form {
901 #topbar-second #space-menu-dropdown .search-reset,
902 #topbar-second #search-menu-dropdown .search-reset {
911 #topbar-second #space-menu-dropdown li > ul > li > a > .media .media-body p {
917 #topbar-second #nav-short-info .heading {
922 text-overflow: ellipsis;
924 #topbar-second #tabmenu .heading {
926 text-overflow: ellipsis;
933 .nav > li > .btn-link {
938 .nav .open > .btn-link {
939 background-color: #eee;
940 border-color: #337ab7;
942 .nav-pills > li > .btn-link {
945 .nav-pills .dropdown-menu,
946 .nav-tabs .dropdown-menu,
947 .account .dropdown-menu,
948 .contact-photo-wrapper .dropdown-menu {
949 background-color: $nav_bg;
952 .nav-pills .dropdown-menu li.divider,
953 .nav-tabs .dropdown-menu li.divider,
954 .account .dropdown-menu li.divider,
955 .contact-photo-wrapper .dropdown-menu li.divider {
956 background-color: $menu_background_hover_color;
958 margin: 9px 1px !important;
960 .nav-pills .dropdown-menu li > a,
961 .nav-tabs .dropdown-menu li > a,
962 .account .dropdown-menu li > a,
963 .contact-photo-wrapper .dropdown-menu li > a {
964 border-left: 3px solid $nav_bg;
966 .nav-pills .dropdown-menu li a,
967 .nav-pills .dropdown-menu li .btn-link,
968 .nav-tabs .dropdown-menu li a,
969 .nav-tabs .dropdown-menu li .btn-link,
970 .account .dropdown-menu li a,
971 .account .dropdown-menu li .btn-link,
972 .contact-photo-wrapper .dropdown-menu li a,
973 .contact-photo-wrapper .dropdown-menu li .btn-link {
974 color: $nav_icon_color;
981 .nav-pills .dropdown-menu li a i,
982 .nav-pills .dropdown-menu li .btn-link i,
983 .nav-tabs .dropdown-menu li a i,
984 .nav-tabs .dropdown-menu li .btn-link i,
985 .account .dropdown-menu li a i,
986 .account .dropdown-menu li .btn-link i,
987 .contact-photo-wrapper .dropdown-menu li a i,
988 .contact-photo-wrapper .dropdown-menu li .btn-link i {
991 display: inline-block;
994 .nav-pills .dropdown-menu li > a:hover,
995 .nav-tabs .dropdown-menu li > a:hover,
996 .account .dropdown-menu li > a:hover,
997 .contact-photo-wrapper .dropdown-menu li > a:hover,
998 .nav-pills .dropdown-menu li.selected a,
999 .nav-tabs .dropdown-menu li.selected a,
1000 .account .dropdown-menu li.selected a,
1001 .contact-photo-wrapper .dropdown-menu li.selected a {
1002 border-left: 3px solid $link_color;
1004 background: $menu_background_hover_color;
1006 #photo-edit-link-wrap {
1007 color: $font_color_darker;
1008 margin-bottom: 15px;
1011 #newmember-tab > a {
1022 .nav-container .widget {
1025 background-color: rgba(255, 255, 255, $contentbg_transp);
1026 box-shadow: 0 0 3px #dadada;
1027 -webkit-box-shadow: 0 0 3px #dadada;
1028 -moz-box-shadow: 0 0 3px #dadada;
1031 margin-bottom: 20px;
1037 .nav-container .widget h3 {
1041 padding-bottom: 20px;
1045 .nav-container .widget ul {
1050 margin-right: -10px;
1055 .nav-container .widget li {
1057 padding-bottom: 2px;
1059 padding-right: 10px;
1061 aside .widget li:hover,
1062 aside .widget li.selected,
1063 .nav-container .widget li:hover {
1065 color: $font_color_darker;
1066 background-color: rgba(247, 247, 247, $contentbg_transp);
1067 border-left: 3px solid $link_color !important;
1071 aside .widget li a:hover {
1072 color: $font_color_darker;
1075 /* forumlist widget */
1076 aside > #datebrowse-sidebar li.posted-date-selector-months {
1077 margin-bottom: 10px;
1081 aside > #datebrowse-sidebar li.posted-date-selector-months:hover {
1082 border-left: none !important;
1083 background-color: transparent !important;
1085 aside > #datebrowse-sidebar .posted-date-selector-months > ul {
1088 aside > #datebrowse-sidebar .posted-date-selector-months > ul > li {
1091 aside > #datebrowse-sidebar .posted-date-selector-months > ul > li:hover {
1096 -webkit-filter: grayscale(100%);
1097 filter: grayscale(100%);
1099 filter: alpha(opacity=50); /* For IE8 and earlier */
1100 -webkit-transition: all 0.2s ease-in-out;
1101 -moz-transition: all 0.2s ease-in-out;
1102 -o-transition: all 0.2s ease-in-out;
1103 -ms-transition: all 0.2s ease-in-out;
1104 transition: all 0.2s ease-in-out;
1106 #forumlist-sidbar-ul li:hover a > .forumlist-img {
1107 -webkit-filter: unset;
1112 /* help page widget */
1113 aside > .help-aside-wrapper p strong:first-child {
1117 aside > .help-aside-wrapper h1 {
1121 padding: 20px 0 10px;
1123 aside > .help-aside-wrapper h2 {
1128 /* vcard / h-card */
1129 aside .vcard #profile-photo-wrapper {
1132 aside .vcard img.u-photo,
1133 aside img.vcard-photo {
1137 aside .vcard .tool .action {
1144 background: rgba(0, 0, 0, 0.5);
1148 -webkit-transition: all 0.25s ease-in-out;
1149 -moz-transition: all 0.25s ease-in-out;
1150 -o-transition: all 0.25s ease-in-out;
1151 -ms-transition: all 0.25s ease-in-out;
1152 transition: all 0.25s ease-in-out;
1154 aside .vcard .tool a {
1155 color: rgba(255, 255, 255, 0.85);
1157 aside .vcard #profile-photo-wrapper:hover .tool .action {
1160 aside .vcard #profile-photo-wrapper.crop-preview {
1163 aside .vcard .profile-header {
1164 padding: 5px 0px 20px 0px;
1168 padding: 5px 0px 5px 0px;
1170 aside .vcard .p-addr {
1173 text-overflow: ellipsis;
1174 white-space: nowrap;
1175 padding-bottom: 2px;
1177 aside .vcard .title {
1180 aside .vcard .detail {
1184 aside .xmpp, aside .matrix {
1187 aside .vcard .icon {
1188 display: table-cell;
1189 padding-right: 10px;
1192 #profile-extra-links {
1194 margin-bottom: 10px;
1196 aside .vcard #dfrn-request-link-button,
1197 aside .vcard #wallmessage-link-botton {
1203 aside .vcard #dfrn-request-link,
1204 aside .vcard #wallmessage-link {
1207 /* vcard-short-info */
1209 #nav-short-info .contact-wrapper {
1212 white-space: nowrap;
1214 padding-right: 20px;
1217 #nav-short-info .contact-photo-wrapper.media-left {
1220 #vcard-short-photo-wrapper img,
1221 #nav-short-info .contact-wrapper img {
1227 #nav-short-info .contact-wrapper .media-body {
1231 text-overflow: ellipsis;
1233 #vcard-short-desc > .media-heading,
1234 #vcard-short-desc > .vcard-short-addr,
1235 #nav-short-info .contact-wrapper .media-heading,
1236 #nav-short-info .contact-wrapper #contact-entry-url-network {
1237 text-overflow: ellipsis;
1240 #vcard-short-desc > .media-heading,
1241 #nav-short-info .contact-wrapper .media-heading {
1245 #nav-short-info .contact-wrapper .media-heading a {
1246 color: $font_color_darker;
1247 font-size: 14px !important;
1249 #vcard-short-desc > .vcard-short-addr,
1250 #nav-short-info .contact-wrapper #contact-entry-url-network {
1254 .network-content-wrapper > #viewcontact_wrapper-network,
1255 #nav-short-info .contact-wrapper .contact-photo-overlay,
1256 #nav-short-info .contact-wrapper .contact-actions {
1260 aside #peoplefind-sidebar input,
1261 aside #follow-sidebar input {
1263 background-position: 10px 5px;
1265 aside #peoplefind-sidebar label,
1266 aside #follow-sidebar label {
1267 font-weight: normal;
1269 aside #peoplefind-sidebar .form-group-search .form-button-search,
1270 aside #follow-sidebar .form-group-search .form-button-search {
1274 div#sidebar-group-header h3 {
1278 div#sidebar-group-list {
1287 color: $font_color_darker;
1291 color: $font_color_darker;
1293 transition: all 0.1s ease-in-out;
1296 color: $font_color_darker;
1303 aside #group-sidebar .sidebar-group-li:hover .group-edit-tool.faded-icon,
1304 aside #saved-search-list .saved-search-li:hover .savedsearchdrop.faded-icon,
1305 aside .widget:hover .widget-action.faded-icon {
1307 transition: all 0.25s ease-in-out;
1309 aside #group-sidebar .sidebar-group-li .group-edit-tool.faded-icon:hover,
1310 aside #saved-search-list .saved-search-li .savedsearchdrop.faded-icon:hover,
1311 aside .widget .widget-action.faded-icon:hover {
1314 aside #group-sidebar li .group-checkbox {
1317 aside #group-sidebar li .group-edit-tool {
1318 padding-right: 10px;
1320 aside #group-sidebar li .group-edit-tool:first-child {
1324 /* contact block widget */
1325 .contact-block-content {
1330 .contact-block-div {
1332 margin: 0px 5px 5px 0px;
1334 .contact-block-link {
1336 .contact-block-img {
1342 /* Tag cloud widget */
1343 .tagblock.widget > .tag-cloud {
1348 display: none !important;
1362 .modal #jot-sections {
1363 max-height: calc(100vh - 22px);
1365 @media (min-width: 768px) {
1366 .modal #jot-sections {
1367 max-height: calc(100vh - 62px);
1370 #jot-modal #jot-sections,
1371 #jot-modal #jot-modal-body,
1372 #jot-modal #profile-jot-form,
1373 #jot-modal #profile-jot-wrapper,
1374 #jot-modal #jot-text-wrap,
1375 #jot-modal #jot-preview-content,
1376 #jot-modal #tread-wrapper--1,
1377 #jot-modal #item-Q0,
1378 #jot-modal #profile-jot-acl-wrapper,
1379 #jot-modal #acl-wrapper {
1383 flex-direction: column;
1385 #jot-modal .modal-header a,
1386 #jot-modal .modal-header .btn-link,
1387 #profile-jot-submit-wrapper a,
1388 #profile-jot-submit-wrapper .btn-link {
1389 color: $font_color_darker;
1391 #jot-modal .modal-header {
1392 border-bottom: none;
1394 #jot-modal .modal-header .compose-link {
1399 #jot-category-wrap {
1405 #jot-text-wrap textarea {
1407 overflow-y: auto !important;
1408 overflow-y: overlay !important;
1410 #jot-text-wrap .preview textarea {
1413 #preview_profile-jot-text,
1414 .comment-edit-form .preview {
1418 border: 2px solid #ededed;
1421 border-radius: 0 0 4px 4px;
1423 color: $font_color_darker;
1425 textarea#profile-jot-text:focus + #preview_profile-jot-text,
1426 textarea.comment-edit-text:focus + .comment-edit-form .preview {
1427 border: 2px solid #6fdbe8;
1430 .preview hr.previewseparator {
1432 border-color: #d2d2d2;
1434 #previewImgBtn_profile-jot-text,
1446 .preview button.previewActionBtn {
1452 border: 2px solid #fff;
1453 box-shadow: 0 0 3px gray;
1457 text-decoration: none;
1458 padding: 0 0 1px 1px;
1461 .preview button.previewActionBtn:hover {
1464 .preview .closePreview button.previewActionBtn {
1467 #previewInputTitle_profile-jot-text {
1470 #profile-jot-wrapper button#profile-jot-submit {
1473 #profile-jot-wrapper #character-counter {
1476 .modal .wall-item-container.preview {
1478 overflow-y: overlay;
1482 font-family: ForkAwesome;
1486 font-family: ForkAwesome;
1490 #acl-wrapper label.panel-heading {
1497 .fbrowser .breadcrumb {
1500 .fbrowser .path a:before {
1504 .fbrowser .breadcrumb > li:last-of-type a {
1506 pointer-events: none;
1509 .fbrowser .folders {
1510 box-shadow: -1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
1513 .fbrowser .folders ul {
1519 max-height: calc(100vh - 210px);
1522 @media (min-width: 768px) {
1523 .fbrowser .folders ul {
1524 max-height: calc(100vh - 255px);
1527 .fbrowser .folders li {
1529 padding-right: 10px;
1531 padding-bottom: 3px;
1533 .fbrowser .folders li:hover {
1535 color: $font_color_darker;
1536 background-color: rgba(247, 247, 247, $contentbg_transp);
1537 border-left: 3px solid $link_color;
1540 .fbrowser .folders li a,
1541 .fbrowser .folders li a:hover {
1542 color: $font_color_darker;
1545 .fbrowser .folders + .list {
1548 .fbrowser .fbrowser-content-container {
1550 max-height: calc(100vh - 175px);
1552 @media (min-width: 768px) {
1553 .fbrowser .fbrowser-content-container {
1554 max-height: calc(100vh - 220px);
1557 .fbrowser.image .photo-album-image-wrapper {
1558 box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.2);
1560 .fbrowser.image .photo-album-image-wrapper .caption {
1561 pointer-events: none;
1563 .fbrowser .profile-rotator-wrapper {
1566 .fbrowser .fa-spin {
1579 background-color: rgba(255, 255, 255, $contentbg_transp);
1580 box-shadow: 0 0 2px #dadada;
1581 -webkit-box-shadow: 0 0 2px #dadada;
1582 -moz-box-shadow: 0 0 2px #dadada;
1586 .panel.panel-inline {
1588 margin-right: -15px;
1592 .panel .panel-body {
1593 word-wrap: break-word;
1595 .tread-wrapper .media {
1597 word-wrap: break-word;
1603 /* Thread hover effects */
1604 .desktop-view .wall-item-container .wall-item-content a,
1605 .desktop-view .wall-item-name,
1606 .desktop-view .wall-item-container .fakelink,
1607 .desktop-view .toplevel_item .fakelink,
1608 .desktop-view .toplevel_item .wall-item-container .wall-item-responses a {
1610 -webkit-transition: all 0.25s ease-in-out;
1611 -moz-transition: all 0.25s ease-in-out;
1612 -o-transition: all 0.25s ease-in-out;
1613 -ms-transition: all 0.25s ease-in-out;
1614 transition: all 0.25s ease-in-out;
1617 .toplevel_item:hover .fakelink,
1618 .wall-item-container:hover .fakelink,
1619 .toplevel_item:hover .wall-item-container:hover .wall-item-responses a,
1620 .toplevel_item:hover .wall-item-content a,
1621 .toplevel_item:hover .wall-item-name,
1622 .wall-item-container:hover .wall-item-content a,
1623 .wall-item-container:hover .wall-item-name,
1624 .wall-item-container:hover .wall-item-location a {
1626 -webkit-transition: all 0.25s ease-in-out;
1627 -moz-transition: all 0.25s ease-in-out;
1628 -o-transition: all 0.25s ease-in-out;
1629 -ms-transition: all 0.25s ease-in-out;
1630 transition: all 0.25s ease-in-out;
1634 .wall-item-container {
1635 border-top: 1px solid rgba(255, 255, 255, 0.8);
1638 .wall-item-container.panel-body {
1643 .comment-edit-preview .wall-item-container.panel-body.preview {
1646 .comment-edit-preview .panel {
1650 .wall-item-container .media {
1653 background-color: rgba(0, 0, 0, 0.03);
1656 /* wall items contact photo */
1661 /*maybe some adional stuff is needed for the different screen sizes */
1663 .contact-photo-image-wrapper {
1670 .contact-photo-overlay {
1678 background: rgba(0, 0, 0, 0.5);
1681 -webkit-transition: opacity 0.25s ease;
1682 -moz-transition: opacity 0.25s ease;
1684 .contact-photo-overlay:hover {
1687 .contact-photo-overlay-content {
1689 text-shadow: 1px 1px 1px #ccc;
1690 color: rgba(255, 255, 255, 0.85);
1692 vertical-align: bottom;
1699 .wwto .contact-photo {
1707 display: inline-block;
1710 /* wall items action dropdown menu */
1711 .media [role="heading"] {
1715 /* Workaround for Firefox where the post heading covers the avatar, preventing hovercard interaction,
1716 48px is the width of the avatar image and should be adjusted accordingly if it ever changes. */
1717 .media .dropdown.pull-left + [role="heading"] {
1730 margin-bottom: 10px;
1734 blockquote.shared_content {
1736 margin-inline-start: 0px;
1740 .wall-item-network {
1744 /* wall items contact info */
1745 .media .media-body {
1748 .media .media-body h4.media-heading {
1751 color: $font_color_darker;
1753 .media .media-body .addional-info a,
1754 .media .media-body h5.media-heading > a {
1757 .media .contact-info-comment {
1758 display: table-cell;
1760 .media .contact-info-xs h5,
1761 .media .contact-info-comment {
1772 .wall-item-name.xs {
1777 /* Contact avatar click card */
1778 .userinfo.click-card {
1782 .userinfo.click-card > *:hover:after {
1787 background-color: #ffffff;
1796 border-radius: 0 0 40% 0;
1799 /* The lock symbol popup */
1803 background-color: $nav_bg;
1813 color: $nav_icon_color;
1817 /* Space between content and head */
1822 /* wall items content */
1823 .wall-item-content {
1824 word-break: break-word;
1826 .wall-item-content img {
1827 object-fit: contain;
1829 .wall-item-body > img,
1830 .wall-item-body > a > img {
1833 .wall-item-body .body-attach > a {
1834 color: $font_color_darker;
1835 display: inline-block;
1837 .wall-item-body .body-attach > a div {
1838 color: $font_color_darker;
1842 /* wall-item content elements */
1850 box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.1) inset, 0 1px 1px rgba(0, 0, 0, 0.05);
1852 @media screen and (max-width: 767px) {
1858 margin: 5px -10px 0;
1862 box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.05);
1865 padding: 10px 10px 1px 0;
1870 .type-link img.attachment-image {
1873 .type-link blockquote,
1874 .type-video blockquote {
1878 .oembed.video .embed_video > div::before {
1879 font-family: ForkAwesome;
1880 font-weight: normal;
1882 display: inline-block;
1883 text-decoration: inherit;
1884 vertical-align: top;
1892 .oembed.video .embed_video > div {
1893 background-color: rgba(0, 0, 0, 0.2);
1894 -webkit-transition: all 0.25s ease-in-out;
1895 -moz-transition: all 0.25s ease-in-out;
1896 -o-transition: all 0.25s ease-in-out;
1897 -ms-transition: all 0.25s ease-in-out;
1898 transition: all 0.25s ease-in-out;
1900 .oembed.video .embed_video > div:hover {
1901 background-color: rgba(0, 0, 0, 0);
1903 .oembed.video .embed_video.active {
1906 .oembed.video .embed_video.active iframe {
1907 width: 100% !important;
1916 color: $font_color_darker;
1919 .wall-item-tags a:hover {
1920 text-decoration: none;
1922 .wall-item-bottom .label,
1923 .wall-item-bottom .label a {
1926 .wall-item-tags .category,
1927 .wall-item-tags .folder {
1931 /* item social action buttons */
1932 .wall-item-actions {
1935 justify-content: space-between;
1937 .wall-item-actions a,
1938 .wall-item-actions button {
1940 color: $font_color_darker;
1942 .wall-item-actions .active {
1946 .wall-item-actions-left {
1947 display: table-cell;
1948 vertical-align: middle;
1950 .wall-item-actions-right {
1953 .wall-item-actions .checkbox {
1957 .wall-item-actions button:hover {
1958 color: $font_color_darker;
1959 text-decoration: underline;
1961 .wall-item-actions .separator {
1965 .wall-item-responses > div > p {
1969 /* wall item hover effects */
1971 @media (min-width: 768px) {
1972 /* Tags and mentions */
1973 .wall-item-container .wall-item-bottom .wall-item-tags span.label {
1974 filter: grayscale(0.5);
1977 -webkit-transition: all 0.25s ease-in-out;
1978 -moz-transition: all 0.25s ease-in-out;
1979 -o-transition: all 0.25s ease-in-out;
1980 -ms-transition: all 0.25s ease-in-out;
1981 transition: all 0.25s ease-in-out;
1984 .wall-item-container:hover .wall-item-bottom .wall-item-tags span.label {
1985 filter: grayscale(0);
1988 -webkit-transition: all 0.25s ease-in-out;
1989 -moz-transition: all 0.25s ease-in-out;
1990 -o-transition: all 0.25s ease-in-out;
1991 -ms-transition: all 0.25s ease-in-out;
1992 transition: all 0.25s ease-in-out;
1994 /* Like/Comment/etc buttons */
1995 .wall-item-container .wall-item-links,
1996 .wall-item-container .wall-item-actions button > a {
1999 -webkit-transition: all 0.25s ease-in-out;
2000 -moz-transition: all 0.25s ease-in-out;
2001 -o-transition: all 0.25s ease-in-out;
2002 -ms-transition: all 0.25s ease-in-out;
2003 transition: all 0.25s ease-in-out;
2005 .wall-item-container:hover .wall-item-links,
2006 .wall-item-container:hover .wall-item-actions button > a {
2009 -webkit-transition: all 0.25s ease-in-out;
2010 -moz-transition: all 0.25s ease-in-out;
2011 -o-transition: all 0.25s ease-in-out;
2012 -ms-transition: all 0.25s ease-in-out;
2013 transition: all 0.25s ease-in-out;
2015 .wall-item-container .wall-item-body .body-attach > a:hover {
2023 wall-item-comment-wrapper.well {
2026 background-color: rgba(237, 237, 237, $contentbg_transp);
2027 background-image: none;
2029 background-color: red;
2031 wall-item-comment-wrapper.well-small {
2035 wall-item-comment-wrapper.well hr {
2036 border-top: 1px solid #d9d9d9;
2038 .wall-entry wall-item-comment-wrapper.well {
2041 .comment-container {
2043 border-top-left-radius: 3px;
2044 border-top-right-radius: 3px;
2045 border-bottom-right-radius: 0px;
2046 border-bottom-left-radius: 0px;
2049 position: relative !important;
2052 .hide-comments-outer {
2053 background-color: rgba(0, 0, 0, 0.03);
2055 border-radius: 0.5em 0.5em 0 0;
2057 .hide-comments-total {
2066 .wall-item-comment-wrapper {
2068 border-top: 1px solid rgba(255, 255, 255, 0.8);
2069 background-color: rgba(0, 0, 0, 0.03);
2070 border-radius: 0 0 4px 4px;
2074 .comment-fake-form {
2075 border-color: #d9d9d9;
2077 .comment-fake-form textarea {
2081 .comment-container .wall-item-comment-wrapper {
2085 .comment-edit-form textarea {
2089 .comment-edit-submit-wrapper {
2094 .comment-icon-list {
2096 justify-content: space-between;
2099 /* acpopup + textcompletion*/
2101 background-color: #ffffff;
2105 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
2110 /** @todo: we schould consider the possebility to overwrite bootstrap dropdowns
2111 at the beginning of this file to get rid of the !important */
2112 .textcomplete-item > a {
2113 color: $font_color_darker !important;
2114 padding: 5px 20px !important;
2116 .textcomplete-item.active > a {
2117 background-color: rgb(247, 247, 247) !important;
2118 background-image: none !important;
2119 border-left: 3px solid $link_color;
2120 padding-left: 17px !important;
2122 .textcomplete-item a .forum {
2129 /* The wall-item thread levels */
2130 .wall-item-container.thread_level_3,
2131 .wall-item-container.thread_level_4,
2132 .wall-item-container.thread_level_5,
2133 .wall-item-container.thread_level_6,
2134 .wall-item-container.thread_level_7 {
2144 background-color: rgba(247, 247, 247, $contentbg_transp);
2145 box-shadow: 0 0 3px #dadada;
2146 -webkit-box-shadow: 0 0 3px #dadada;
2147 -moz-box-shadow: 0 0 3px #dadada;
2152 section > .tabbar-wrapper {
2153 /* The tabbar shouldn't' be visibile inside
2154 the section element. Only after we have
2155 moved it to the nav through js */
2156 display: none !important;
2165 #tabmenu .search-heading {
2167 text-overflow: ellipsis;
2168 white-space: nowrap;
2181 border-bottom: 0 solid $link_color;
2184 transition: all 0.15s ease;
2192 border-bottom-width: 4px;
2194 .tabbar.visible-xs .tabs-extended {
2197 #dropdownMenuTools-xs {
2200 ul.tabbar ul.tabs-extended:hover li.dropdown {
2204 ul.tabbar ul.tabs-extended li.active {
2206 border-bottom-width: 2px;
2208 ul.tabbar ul.tabs-extended li.active a {
2211 ul.dropdown-menu li:hover {
2217 box-sizing: border-box;
2220 .dropdown-menu li a,
2221 .dropdown-menu li .btn-link {
2222 color: $font_color_darker;
2224 .dropdown-menu li > :hover,
2225 .dropdown-menu li > :visited,
2226 .dropdown-menu li > :focus {
2230 .dropdown-menu li:first-child {
2234 /* Notificaiotn badges */
2235 #mail-update-li.show {
2236 display: inline-block !important;
2240 p.wall-item-announce,
2242 .media .shared-time,
2245 .media .location a {
2247 color: $font_color_darker;
2251 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2253 border-left: 3px solid rgba(255, 255, 255, 0);
2256 .media-list > li:hover,
2257 .media-list > li.selected,
2258 .media-list > li.active {
2259 border-left: 3px solid $link_color;
2260 background-color: rgba(247, 247, 247, $contentbg_transp);
2267 .form-control:focus {
2268 border: 2px solid $link_color;
2272 .radio label::before,
2273 .checkbox label::before {
2274 background-color: rgba(255, 255, 255, $contentbg_transp);
2276 .radio label::after {
2277 background-color: $link_color;
2279 .checkbox label::after {
2283 .checkbox input[type="checkbox"]:focus + label::before,
2284 .radio input[type="radio"]:focus + label::before {
2285 outline-color: $link_hover_color;
2289 color: $font_color_darker;
2292 input[type="range"].form-control {
2298 .form-control.form-search {
2299 border-radius: 30px;
2300 background-image: url(img/icon_search16x16.png);
2301 background-repeat: no-repeat;
2302 background-position: 10px 8px;
2305 .form-group-search {
2310 .form-group-search .form-button-search {
2314 border-radius: 30px;
2316 .search-input.form-control.form-search {
2324 .search-content-wrapper > #search-header-wrapper {
2327 .search-content-wrapper > .section-title-wrapper {
2330 #navbar-button > #search-save {
2333 /* Section-Content-Wrapper */
2334 #search-header-wrapper {
2336 padding-bottom: 20px;
2337 margin-bottom: 20px;
2339 background-color: rgba(255, 255, 255, $contentbg_transp);
2342 color: $font_color_darker;
2343 box-shadow: 0 0 3px #dadada;
2344 -webkit-box-shadow: 0 0 3px #dadada;
2345 -moz-box-shadow: 0 0 3px #dadada;
2352 section > .generic-page-wrapper,
2353 .videos-content-wrapper,
2354 .suggest-content-wrapper,
2355 .help-content-wrapper,
2356 .match-content-wrapper,
2357 .dirfind-content-wrapper,
2358 .delegation-content-wrapper,
2359 .notes-content-wrapper,
2360 .message-content-wrapper,
2361 .apps-content-wrapper,
2363 .delegate-content-wrapper,
2364 .uexport-content-wrapper,
2365 .dfrn_request-content-wrapper,
2366 .friendica-content-wrapper,
2367 .credits-content-wrapper,
2368 .nogroup-content-wrapper,
2369 .profperm-content-wrapper,
2370 .invite-content-wrapper,
2371 .tos-content-wrapper,
2372 .fsuggest-content-wrapper {
2373 min-height: calc(100vh - 150px);
2375 padding-bottom: 20px;
2376 margin-bottom: 20px;
2378 background-color: rgba(255, 255, 255, $contentbg_transp);
2381 color: $font_color_darker;
2382 box-shadow: 0 0 3px #dadada;
2383 -webkit-box-shadow: 0 0 3px #dadada;
2384 -moz-box-shadow: 0 0 3px #dadada;
2386 #content:hover .page-action.faded-icon {
2388 transition: all 0.25s ease-in-out;
2390 #content .page-action.faded-icon:hover {
2394 .section-title-wrapper {
2397 /* Home and Login Page */
2398 body.mod-home nav.navbar .nav > li > a:hover {
2399 background-color: rgba(255, 255, 255, 0.2);
2401 body.mod-home .navbar #nav-login,
2402 body.mod-login .navbar #nav-login {
2406 #profile-content-standard,
2407 #profile-content-advanced {
2412 margin-bottom: 20px;
2414 .contact-block-div.forumlist-profile-advanced {
2419 ul.viewcontact_wrapper {
2421 margin-right: -15px;
2423 ul.viewcontact_wrapper > li {
2426 .contact-wrapper .contact-photo-wrapper button {
2429 .contact-wrapper.media {
2431 word-wrap: break-word;
2434 /* bootstrap hack for .media */
2435 .contact-wrapper.media .media-body {
2436 display: table-cell;
2441 .contact-wrapper.media:before,
2446 .contact-wrapper.media:after {
2449 .contact-wrapper .contact-photo-image-wrapper img.contact-photo.xl {
2453 .contact-wrapper .contact-photo-image-wrapper img.contact-photo-xs {
2457 .contact-wrapper .contact-photo-overlay-content.xl {
2460 .contact-wrapper .contact-photo-menu {
2464 .contact-entry-desc {
2465 color: $font_color_darker;
2467 .contact-entry-checkbox {
2470 .contact-wrapper .media-body .contact-entry-name h4.media-heading a {
2471 font-weight: bold !important;
2473 font-size: 15px !important;
2475 .contact-wrapper .contact-actions {
2478 .contact-wrapper .contact-action-link,
2479 .contact-wrapper .contact-action-link:hover,
2480 .textcomplete-item .contact-wrapper .contact-action-link {
2482 color: $font_color_darker;
2485 .contact-wrapper .contact-action-link {
2487 transition: all 0.25s ease-in-out;
2489 ul li:hover .contact-wrapper .contact-action-link {
2491 transition: all 0.25s ease-in-out;
2493 ul li:hover .contact-wrapper .contact-action-link:hover {
2496 #contacts-search-wrapper,
2497 #directory-search-wrapper {
2500 #contact-drop-confirm .contact-actions,
2501 #contact-drop-confirm .contact-photo-overlay,
2502 #contact-drop-confirm .contact-photo-menu {
2505 #contact-drop-confirm #confirm-form {
2510 #contact-edit-actions {
2513 #contact-edit-status-wrapper {
2515 background-color: rgba(225, 245, 254, $contentbg_transp);
2518 #contact-edit-settings {
2522 /* directory page */
2523 #directory-search-heading {
2527 /* group edit page */
2530 margin-bottom: 10px;
2533 .group-actions button,
2538 .contact-group-actions .fa-times-circle {
2541 .contact-group-actions .fa-plus-circle {
2545 #group-edit-wrapper {
2549 #group-edit-header {
2552 #group-update-wrapper .contact-photo-overlay {
2555 #group-update-wrapper .viewcontact_wrapper .contact-group-actions {
2560 #group-update-wrapper .viewcontact_wrapper .contact-group-link {
2565 #group-update-wrapper .viewcontact_wrapper .contact-action-link:hover {
2568 #group-update-wrapper .shortmode {
2572 #group-update-wrapper .shortmode .contact-photo {
2576 #group-update-wrapper .shortmode .media {
2579 #group-update-wrapper .shortmode .contact-entry-desc {
2580 font-size: 12px !important;
2582 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading {
2585 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading a {
2586 font-size: 13px !important;
2587 white-space: nowrap;
2589 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-rel,
2590 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-network {
2595 .message-content-wrapper > li {
2596 /* we need this overwriting because we have no template file
2597 for the general mail page /message
2599 list-style-type: none;
2602 max-height: calc(100vh - 200px);
2604 #mail-conversation {
2606 max-height: calc(100vh - 400px);
2611 .mail-conv-wrapper .media .contact-photo-wrapper img {
2615 .mail-thread #prvmail-to-label,
2616 .mail-thread #prvmail-subject-label {
2619 .mail-thread #prvmail-message-label > label {
2622 .mail-thread #prvmail-message-label textarea {
2625 .mail-conv-wrapper {
2627 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2630 height: calc(100vh - 150px);
2633 height: calc(100% - 20px);
2635 #message-preview ul {
2638 #message-preview .media-list li {
2642 #message-preview .media-list li:hover {
2643 border-left: none !important;
2645 #message-preview .media-list li a {
2648 .mail-list-outside-wrapper {
2650 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2652 .mail-list-outside-wrapper .contact-photo-wrapper img {
2659 #modal #prvmail-text-edit-bb .bb-img {
2664 #photo-album-edit-name-label {
2667 .photo-album-edit-name {
2671 .photo-album-actions {
2672 margin-bottom: 10px;
2674 .photo-album-actions .photos-order-link {
2679 .fc .fc-month-view .fc-content .fc-title .item-desc:hover {
2680 color: $link_hover_color;
2682 .fc .fc-list-item-title a {
2685 .fc .fc-list-item-title a[href]:hover {
2686 color: $link_hover_color;
2687 text-decoration: none;
2689 .event-wrapper .event-owner {
2690 margin-bottom: 15px;
2692 .event-wrapper .event-owner img {
2701 .event-wrapper .vevent {
2704 box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
2706 .event-wrapper .event-buttons {
2709 #event-form-wrapper {
2712 #event-edit-form-wrapper {
2716 color: $font_color_darker;
2718 #event-edit-form-wrapper #event-edit-time {
2721 .event-buttons .plink-event-link {
2724 .vevent .event-summary {
2727 .vevent .event-description {
2730 .vevent .event-location .location {
2734 .modal-body .vevent .event-summary {
2737 #event-preview .vevent .event-summary {
2742 .event-card-details,
2743 .event-card-header {
2747 .event-card-left-date {
2750 .vevent .event-card-header {
2753 .event-card-left-date {
2754 width: 60px; /* Das muss wahrscheinlich unterschiedlich sein zwischen calendar und stream */
2756 .event-card .event-date-wrapper > span {
2760 white-space: nowrap;
2762 .event-card .event-date-wrapper .event-card-short-month {
2764 text-transform: uppercase;
2766 .event-card .event-date-wrapper.medium .event-card-short-date {
2771 .event-card .event-card-content {
2773 padding: 0 5px 0 15px;
2774 box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
2778 .event-card .event-card-content .event-map-btn {
2784 .event-card .event-card-title {
2786 color: $font_color_darker;
2791 .event-card .event-card-location {
2795 .event-card .event-card-location br {
2798 .event-card .event-card-location br::after {
2801 .event-card-profile-name a {
2804 .event-card-profile-name a:hover {
2805 color: $link_hover_color;
2807 .event-card .event-card-content .event-location-map {
2812 .event-card .event-card-content .event-location-map .map {
2815 .event-card .description {
2817 box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, 0.1) inset;
2830 transform: translateZ(0);
2831 transition: opacity 0.2s;
2836 text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
2838 .photo-next-link > i,
2839 .photo-prev-link > i {
2840 vertical-align: super;
2842 .photo-next-link > i {
2851 #photo-photo:hover .photo-next-link,
2852 #photo-photo:hover .photo-prev-link {
2855 #photo-photo .photo-next-link:hover,
2856 #photo-photo .photo-prev-link:hover {
2860 .photo-comment-wrapper .comment {
2863 .photo-comment-wrapper .wall-item-content {
2864 color: $font_color_darker;
2867 .photo-comment-wrapper .comment-wwedit-wrapper,
2868 .photo-comment-wrapper .wall-item-outside-wrapper.media:first-child {
2873 .profile-listing-table {
2877 .profile-listing-row {
2880 .profile-listing-cell {
2881 display: table-cell;
2883 .profile-listing-photo {
2888 #profile-listing-new-link-wrapper {
2889 margin-bottom: 20px;
2892 #profile-photo-upload-section {
2896 #profile-photo-upload-close {
2901 .section-subtitle-wrapper {
2904 details.profile-jot-net[open] summary:before,
2905 .panel .section-subtitle-wrapper a.accordion-toggle:before {
2906 font-family: ForkAwesome;
2910 details.profile-jot-net summary:before,
2911 .panel .section-subtitle-wrapper a.accordion-toggle.collapsed:before {
2912 font-family: ForkAwesome;
2915 details.profile-jot-net summary:before {
2919 details.profile-jot-net[open] summary:before {
2923 #settings-nick-wrapper {
2924 margin-bottom: 20px;
2930 /* Emulates Bootstrap display */
2933 background-color: rgba(255, 255, 255, $contentbg_transp);
2936 box-shadow: 0 0 3px #dadada;
2937 -webkit-box-shadow: 0 0 3px #dadada;
2938 -moz-box-shadow: 0 0 3px #dadada;
2941 .settings-block.fakelink,
2942 .settings-block > .fakelink {
2946 .settings-block > .fakelink {
2947 margin: -10px -15px 10px -15px;
2948 border-radius: 4px 4px 0 0;
2951 .settings-block.fakelink:hover,
2952 .settings-block > .fakelink:hover {
2953 color: $link_hover_color;
2955 .settings-block.fakelink > h3,
2956 .settings-block > .fakelink > h3 {
2963 .section-subtitle-wrapper > h2 {
2966 margin-bottom: 10px;
2969 .fakelink > h3:before {
2970 padding-right: 10px;
2972 .widget.fakelink > h3:before,
2973 .settings-block.fakelink > h3:before {
2974 font-family: ForkAwesome;
2975 content: "\f0da"; /* Right Plain Pointer */
2977 .widget > .fakelink > h3:before,
2978 #sidebar-group-header > .fakelink > h3:before,
2979 .settings-block > .fakelink > h3:before {
2980 font-family: ForkAwesome;
2981 content: "\f0d7"; /* Bottom Plain Pointer */
2988 /* Intro Notifications */
2989 ul.notif-network-list {
2991 margin-right: -15px;
2993 ul.notif-network-list > li {
2995 padding-right: 15px;
2997 .intro-wrapper.media {
2999 word-wrap: break-word;
3002 .intro-photo-wrapper img.intro-photo {
3010 .intro-enty-name h4 {
3011 font-size: 15px !important;
3013 .intro-wrapper button.intro-action-link {
3015 transition: all 0.25s ease-in-out;
3017 .intro-wrapper button.intro-action-link,
3018 .intro-wrapper button.intro-action-link:hover {
3021 color: $font_color_darker;
3023 ul li:hover .intro-wrapper button.intro-action-link {
3025 transition: all 0.25s ease-in-out;
3027 ul li:hover .intro-wrapper button.intro-action-link:hover {
3030 .intro-action-buttons {
3034 transition: max-height 0.1s ease-out;
3036 ul.notif-network-list > li:hover .intro-action-buttons {
3038 transition: max-height 0.1s ease-in;
3042 .intro-network-label,
3043 .intro-location-label,
3044 .intro-keywords-label,
3046 .intro-knowyou-label,
3047 .intro-madeby-label {
3050 .intro-contact-info.xs .intro-url-label,
3051 .intro-contact-info.xs .intro-network-label,
3052 .intro-contact-info.xs .intro-location-label,
3053 .intro-contact-info.xs .intro-keywords-label,
3054 .intro-contact-info.xs .intro-about-label,
3055 .intro-contact-info.xs .intro-knowyou-label {
3060 /* Notifications Page */
3061 ul.notif-network-list li.unseen {
3062 background-color: #e3eff3;
3064 .notif-item img.notif-image {
3069 .notif-item .notif-desc-wrapper {
3072 .notif-item .notif-desc-wrapper a {
3075 color: $font_color_darker;
3082 /* This is a little bit hacky. Since the search page is used for diferent
3083 content types we can't apply the generic-page-wrapper class.
3084 So we apply the css of the generic-page-wrapper class to the ul element with some
3085 little modifications to emulate a standard page template */
3086 .search-content-wrapper > ul.viewcontact_wrapper {
3087 min-height: calc(100vh - 150px);
3089 padding-bottom: 20px;
3091 margin-bottom: 20px;
3093 background-color: rgba(255, 255, 255, $contentbg_transp);
3096 color: $font_color_darker;
3097 box-shadow: 0 0 3px #dadada;
3098 -webkit-box-shadow: 0 0 3px #dadada;
3099 -moz-box-shadow: 0 0 3px #dadada;
3103 section.help-content-wrapper h1 {
3104 padding-bottom: 0.3em;
3106 border-bottom: 1px solid #ddd;
3108 section.help-content-wrapper h2 {
3109 padding-bottom: 0.3em;
3111 border-bottom: 1px solid #ddd;
3113 section.help-content-wrapper h3 {
3116 section.help-content-wrapper h4 {
3119 section.help-content-wrapper h1,
3120 section.help-content-wrapper h2,
3121 section.help-content-wrapper h3,
3122 section.help-content-wrapper h4,
3123 section.help-content-wrapper h5,
3124 section.help-content-wrapper h6 {
3126 margin-bottom: 16px;
3130 section.help-content-wrapper p {
3133 section.help-content-wrapper p,
3134 section.help-content-wrapper a,
3135 section.help-content-wrapper li {
3141 #adminpage #frio_background_image .image-select {
3144 #adminpage #frio_background_image.input-group {
3147 #admin-summary-wrapper {
3150 #adminpage ul#addonslist,
3154 #adminpage li .icon {
3155 display: inline-block;
3156 vertical-align: text-top;
3160 #adminpage li .icon:before {
3162 display: inline-block;
3169 border: 1px solid #cccccc;
3171 background-color: $background_color;
3172 -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3173 -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3174 transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3176 #adminpage li .icon.on:after {
3177 font-family: "ForkAwesome";
3179 display: inline-block;
3192 #adminpage .addon .desc {
3195 #admin-users #users tr.blocked {
3196 background-color: #f8efc0;
3198 .adminpage .table-hover > tbody > tr:hover + tr.details {
3199 background-color: #f5f5f5;
3201 .offset-anchor::before {
3207 pointer-events: none;
3215 #identity-selector-wrapper {
3220 #identity-selector-wrapper .identity-match-photo {
3224 #identity-selector-wrapper .identity-match-photo button {
3227 #identity-selector-wrapper .identity-match-photo .badge {
3232 #identity-selector-wrapper .identity-match-name {
3235 #identity-selector-wrapper .identity-match-details {
3241 #register-openid-wrapper,
3242 #register-name-wrapper,
3243 #register-invite-wrapper,
3244 #profile-publish-wrapper {
3247 #register-openid-end,
3248 #register-nickname-end {
3253 * Overwriting for transparency and other colors
3255 main .nav-tabs > li.active > a,
3256 main .nav-tabs > li.active > a:focus,
3257 main .nav-tabs > li.active > a:hover {
3258 background-color: rgba(255, 255, 255, $contentbg_transp);
3268 @media (min-width: 768px) {
3275 * Framework overwrite
3278 /* textcomplete for contact filtering*/
3279 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list {
3280 position: relative !important;
3281 top: inherit !important;
3282 bottom: inherit !important;
3283 left: inherit !important;
3286 margin-right: -15px;
3287 background-color: transparent;
3291 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li {
3293 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
3295 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li:first-child {
3298 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list .textcomplete-item > a {
3299 padding: 0 !important;
3301 background-color: transparent !important;
3303 /* this is a little hack for texcomplete contact filter
3304 There are for some reasons empty <a> tags. I don't know why */
3305 .textcomplete-item .contact-wrapper a {
3310 body .tread-wrapper .hovercard a,
3311 body .tread-wrapper .hovercard a:hover {
3314 body .tread-wrapper .hovercard:hover .hover-card-content a {
3315 color: $link_color !important;
3318 /* Pagination improvements */
3323 .pagination > li > a,
3324 .pagination > li > span {
3328 .pagination > li > a:hover,
3329 .pagination > li > span:hover {
3330 color: $link_hover_color;
3332 .pagination > .active > a,
3333 .pagination > .active > a:focus,
3334 .pagination > .active > a:hover,
3335 .pagination > .active > span,
3336 .pagination > .active > span:focus,
3337 .pagination > .active > span:hover {
3338 background-color: $link_color;
3339 border-color: $link_color;
3342 .pagination li.pager_n a {
3346 .pagination .pager_prev a {
3349 border-top-right-radius: 3px;
3350 border-bottom-right-radius: 3px;
3352 .pagination .pager_next a {
3355 border-top-left-radius: 3px;
3356 border-bottom-left-radius: 3px;
3359 .pager .previous > a {
3363 .pagination .disabled > a,
3364 .pager .disabled > a {
3370 background-color: rgba(255, 255, 255, $contentbg_transp);
3374 * some temporary workarounds until this will solved
3375 * elsewhere (e.g. new templates)
3377 section .profile-match-wrapper {
3384 #login-submit-wrapper {
3387 #lost-password-link {
3390 #login-lost-password-link {
3391 margin-bottom: 10px;
3397 #id_password_wrapper {
3398 margin-bottom: unset;
3405 background: #8ad0a1;
3412 .mod-home.is-not-singleuser,
3414 background-color: $login_bg_color;
3415 background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4)), url($login_bg_image);
3416 background-size: cover;
3417 background-attachment: fixed;
3418 background-position: center;
3421 .mod-home.is-not-singleuser nav.navbar,
3422 .mod-login nav.navbar {
3423 background-color: transparent;
3426 .mod-home.is-not-singleuser #topbar-second,
3427 .mod-login #topbar-second {
3428 background-color: transparent;
3432 .mod-home.is-not-singleuser .login-content,
3433 .mod-login .login-content {
3438 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3442 .mod-home.is-not-singleuser .login-form > #login-form label,
3443 .mod-login #content #login-form label {
3447 .mod-home.is-not-singleuser .login-panel-content,
3448 .mod-login .login-panel-content {
3449 background-color: rgba(255, 255, 255, 0.85);
3453 background: $nav_bg !important;
3454 color: $btn_primary_color !important;
3457 -webkit-box-shadow: none;
3459 -moz-box-shadow: none;
3460 background-image: none;
3468 width: 100% !important;
3471 .qq-upload-drop-area {
3472 background: white !important;
3475 -webkit-box-shadow: none;
3477 -moz-box-shadow: none;
3478 background-image: none;
3486 width: 100% !important;
3487 display: block !important;
3488 position: relative !important;
3489 border: black 1px dashed !important;
3490 margin-bottom: 5px !important;
3491 margin-top: 15px !important;
3495 * The different views of js fullcalendar
3499 margin-bottom: 10px;
3503 #event-calendar-title {
3504 display: inline-block;
3513 #fc-header-right .dropdown > button {
3516 #event-calendar-title {
3517 vertical-align: middle;
3519 #event-calendar-views {
3526 .fc .fc-month-view td.fc-widget-content,
3528 .fc .fc-list-view .fc-list-table td,
3532 .fc td.fc-widget-header,
3533 .fc th.fc-widget-header {
3538 .fc .fc-month-view td.fc-day {
3541 border-bottom: 1px solid;
3544 .fc .fc-day-grid-container .fc-row {
3545 border-bottom: 1px solid;
3548 .fc tr td.fc-today {
3551 .fc .fc-month-view .fc-content .fc-title .item-desc {
3554 .fc .fc-view-container {
3557 .fc .fc-list-view td {
3560 #events-calendar.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
3565 background-color: #e3f2fd;
3566 border: 1px solid #bbdefb;
3567 color: $font_color_darker;
3569 .fc .fc-month-view .fc-time,
3570 .fc .fc-listMonth-view .fc-list-item-time,
3571 .fc .fc-listMonth-view .fc-list-item-marker,
3572 .fc .fc-listMonth-view .fc-widget-header {
3575 .fc .fc-listMonth-view .fc-list-item:hover td {
3576 background: transparent;
3579 .fc .fc-listMonth-view .seperator {
3590 .event-card .event-label,
3591 .event-card .location-label {
3594 .popover.event-card .event-card-basic-content {
3599 .event-card .event-hover-location .location {
3604 /* Medium devices (desktops, 992px and up) */
3605 @media (min-width: 992px) {
3606 .mod-home.is-not-singleuser #content,
3607 .mod-login #content {
3608 margin-top: 100px !important;
3611 .mod-home.is-not-singleuser .login-form > #login-form,
3612 .mod-home.is-not-singleuser .login-form > #login-extra-links,
3613 .mod-login #content #login-form {
3614 background-color: #fff;
3618 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3620 background-color: white;
3623 .mod-home.is-not-singleuser .login-form > #login-form label,
3624 .mod-login #content #login-form label {
3628 .mod-home.is-not-singleuser .login-form::before,
3629 .mod-login #content #login-form::before {
3633 background-color: rgba(255, 255, 255, 0.1);
3641 .mod-home.is-not-singleuser .login-form::after,
3642 .mod-login #content #login-form::after {
3646 background-color: rgba(255, 255, 255, 0.2);
3655 /* Mobile display */
3656 @media (max-width: 600px) {
3664 #friendica-logo-mask {
3678 .panel .panel-body {
3682 .toplevel_item > .wall-item-container {
3690 .wall-item-actions {
3698 .generic-page-wrapper,
3699 .videos-content-wrapper,
3700 .suggest-content-wrapper,
3701 .help-content-wrapper,
3702 .match-content-wrapper,
3703 .dirfind-content-wrapper,
3704 .directory-content-wrapper,
3705 .delegation-content-wrapper,
3706 .notes-content-wrapper,
3707 .message-content-wrapper,
3708 .apps-content-wrapper,
3710 .delegate-content-wrapper,
3711 .uexport-content-wrapper,
3712 .dfrn_request-content-wrapper,
3713 .friendica-content-wrapper,
3714 .credits-content-wrapper,
3715 .nogroup-content-wrapper,
3716 .profperm-content-wrapper,
3717 .invite-content-wrapper,
3718 .tos-content-wrapper,
3719 .fsuggest-content-wrapper {
3779 .wwto .contact-photo {
3787 Prevent automatic zoom on input focus on iOS
3788 see https://stackoverflow.com/a/16255670
3794 .wall-item-container.thread_level_3,
3795 .wall-item-container.thread_level_4,
3796 .wall-item-container.thread_level_5,
3797 .wall-item-container.thread_level_6,
3798 .wall-item-container.thread_level_7 {