2 Created on : 17.02.2016, 23:55:45
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]) {
37 body a:hover, .btn-link:hover,
38 body a:focus, .btn-link:focus,
39 body a:active, .btn-link:active,
40 body a.active, .btn-link.active {
41 color: $link_hover_color;
42 outline-color: $link_hover_color;;
43 text-decoration: none;
46 .wall-item-container a:hover {
47 text-decoration: underline;
56 border-color: rgba(238, 238, 238, $contentbg_transp);
74 display: none !important;
77 max-height: 0px !important;
78 overflow: hidden !important;
84 @media screen and (max-width: 990px) {
89 position: fixed!important;
91 background-color: $background_color;
98 padding-left: 6px!important;
99 padding-right: 6px!important;
105 top: 0; left: 300px; right: 0; bottom: 0;
106 background-color: rgba(0,0,0,0.4);
108 transition: opacity 0.5s;
110 aside.canvas-slid::before {
114 /* prevent page scroll when the aside is opened **/
115 body.aside-out { overflow: hidden; }
118 * standard page elements
124 color: $nav_icon_color;
131 padding: 0 12px 0 12px;
133 background-color: $nav_bg;
137 #item-delete-selected {
146 padding: 0 12px 0 12px;
148 background-color: $link_color;
153 #toggle_mobile_link {
158 * Overwriting and Extend Bootstrap
169 -webkit-box-shadow: none;
171 -moz-box-shadow: none;
172 background-image: none;
182 outline-color: $link_hover_color;
205 background-color: #AE0F0F;
210 color: $btn_primary_color;
212 .btn.btn-primary:hover, .btn.btn-primary:focus {
213 color: $btn_primary_color;
214 background: $btn_primary_hover_color;
215 text-decoration: none;
217 .btn.btn-primary:active, .btn.btn-primary.active {
218 background: $btn_primary_hover_color;
221 .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover,
222 .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover,
223 .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus,
224 .open>.dropdown-toggle.btn-primary:hover,.btn-primary.active, .btn-primary:active,
225 .open>.dropdown-toggle.btn-primary {
226 background: $btn_primary_hover_color;
239 background: transparent;
242 .btn-eventnav, btn-eventnav:hover {
245 background-color: transparent;
249 border-left: 1px solid #777;
253 border: 1px solid transparent;
262 .toggle .toggle-off:hover {
264 background-color: #eee;
267 .toggle.off .toggle-handle {
268 background-color: #eee;
271 background-color: #fff;
273 border: 1px solid transparent;
276 .form-control-sm, .input-group-sm>.form-control, .input-group-sm>.input-group-addon, .input-group-sm>.input-group-btn>.btn {
277 padding: .275rem .75rem;
280 border-radius: .2rem;
282 /* Bootstrap media class fix/hack
283 * This is a test. I thought it does have some
284 * issues in some corner cases. Maybe we remove
286 * https://github.com/twbs/bootstrap/issues/6053
288 .media, .media-body {
297 .media:before, .media:after {
307 vertical-align: baseline;
308 background-color: $link_color;
316 /* disabled elements */
317 .community-content-wrapper > h3, .network-content-wrapper > .section-title-wrapper {
321 header #site-location {
332 text-shadow: 1px 1px 2px rgba(0,0,0,.5);
334 font-family: tahoma, "Lucida Sans", sans;
340 header #banner #logo-img,
341 .navbar-brand #logo-img {
342 -webkit-mask-image: url('img/friendica-25.png');
343 background-color: $nav_icon_color;
350 #navbrand-container {
353 #navbrand-container #navbar-brand-text {
355 color: $nav_icon_color;
373 @media (min-width: 992px) {
374 .topbar ul.nav > li > a,
375 .topbar ul.nav > li > button
378 padding-bottom: 15px;
382 @media (max-width: 991px) {
383 .topbar ul.nav > li > a,
384 .topbar ul.nav > li > button
389 .topbar .dropdown-footer {
392 .topbar .dropdown-header {
399 .topbar .dropdown-header .dropdown-header-link {
404 .topbar .dropdown-header .dropdown-header-link a,
405 .topbar .dropdown-header .dropdown-header-link .btn-link {
406 color: $link_color !important;
410 .topbar .dropdown-header:hover {
415 background-color: $nav_bg;
418 color: $nav_icon_color;
420 #topbar-first .nav > li > a,
421 #topbar-first .nav > li > button,
422 nav.navbar .nav > li > a,
423 nav.navbar .nav > li > button
425 color: $nav_icon_color;
427 #topbar-first .nav > .open > a,
428 #topbar-first .nav > .open > button
430 background-color: $nav_bg;
432 #topbar-first .nav > li > a:hover,
433 #topbar-first .nav > li > a:focus,
434 #topbar-first .nav > li > button:not(#main-menu):hover,
435 #topbar-first .nav > li > button:not(#main-menu):focus,
436 nav.navbar .nav > li > a:hover,
437 nav.navbar .nav > li > a:focus
438 nav.navbar .nav > li > button:hover,
439 nav.navbar .nav > li > button:focus
441 background-color: $nav_icon_hover_color;
443 #topbar-first .nav>.account {
447 #topbar-first .nav>.account img {
453 #topbar-first .nav>.account .dropdown-toggle {
454 padding: 8px 5px 0px;
458 #topbar-first .nav>.account .dropdown-toggle span {
461 #topbar-first .topbar-brand {
465 #topbar-first .topbar-actions {
469 #topbar-first .topbar-nav {
475 #topbar-first .topbar-nav .nav-segment {
479 #topbar-first .topbar-nav .nav-segment > a
481 display: inline-block;
482 text-decoration: none;
485 #topbar-first .topbar-nav .nav-segment .nav-notification {
489 background-color: #ff3535;
491 #topbar-first #intro-update{
494 #topbar-first .topbar-nav .arrow:after {
499 border-color: transparent;
506 border-bottom-color: #fff;
509 #topbar-first .topbar-nav .arrow {
514 border-color: transparent;
521 border-bottom-color: rgba(0, 0, 0, .15);
525 #topbar-first .topbar-nav .dropdown-menu {
529 #topbar-first .topbar-nav .dropdown-menu ul.media-list {
533 #topbar-first .topbar-nav .dropdown-menu li {
536 #topbar-first .topbar-nav .dropdown-menu li i.approval {
542 #topbar-first .topbar-nav .dropdown-menu li i.accepted {
545 #topbar-first .topbar-nav .dropdown-menu li i.declined {
548 #topbar-first .topbar-nav .dropdown-menu li .media {
551 #topbar-first .topbar-nav .dropdown-menu li .media .img-space {
556 #topbar-first .dropdown-footer {
557 margin: 10px 10px 5px
559 #topbar-first .caret {
560 border-top-color: #bebebe
562 #topbar-first .btn-group>a {
563 background-color: #7f9baa
565 #topbar-first .btn-enter {
566 background-color: #7f9baa;
569 #topbar-first .btn-enter:hover {
570 background-color: #89a2b0
572 .navbar-fixed-top ul.nav.navbar-nav.navbar-right {
576 #friendica-logo-mask {
581 /* Notification Menu */
582 #topbar-first #nav-notifications-menu {
585 #topbar-first #nav-notifications-menu a {
586 color: $font_color_darker;
589 #topbar-first #nav-notifications-menu li.notif-entry {
590 color: $font_color_darker;
592 border-bottom: 1px solid #eee;
594 border-left: 3px solid #fff;
598 #topbar-first #nav-notifications-menu li.notification-unseen {
599 border-left: 3px solid #e3eff3;
600 background-color: #e3eff3;
602 #topbar-first #nav-notifications-menu li.notif-entry:hover {
603 background-color: #f7f7f7;
604 border-left: 3px solid $link_color;
606 #topbar-first #nav-notifications-menu li.placeholder {
609 #topbar-first #nav-notifications-menu .media .media-body .contactname {
612 #topbar-first #nav-notifications-menu .media .media-body .label {
615 #topbar-first #nav-notifications-menu li.notif-entry .media-object a img {
620 /* The Top Nav Bar user menu */
621 #topbar-first .account .user-title {
625 #topbar-first .account .user-title span {
626 color: $nav_icon_color;
628 #topbar-first .account #main-menu .nav-notification {
632 background-color: #ff8989;
636 background-color: $nav_bg;
637 color: $nav_icon_color;
639 #myNavmenu li.nav-sitename {
645 #topbar-first .dropdown.account li#nav-sitename {
649 word-break: break-word;
651 #topbar-first .dropdown.account li#nav-sitename:hover {
653 background-color: $nav_bg;
656 #topbar-first #search-box .navbar-form {
660 #search-mobile .navbar-form {
663 #topbar-first #search-box .form-search {
666 background-position: 8px 4px;
668 #topbar-first #search-box .btn {
677 background-color: #fff;
679 background-image: none;
680 -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
681 -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
682 box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
683 border-bottom: 1px solid #d4d4d4;
685 #topbar-second > .container {
688 @media screen and (max-width: 767px) {
689 #topbar-second > .container,
690 #topbar-second #navbar-button {
694 #topbar-second .dropdown-menu {
698 #topbar-second .dropdown-menu .divider {
701 #topbar-second #space-menu-dropdown,
702 #topbar-second #search-menu-dropdown {
705 #topbar-second #space-menu-dropdown .media-list,
706 #topbar-second #search-menu-dropdown .media-list {
714 .intro-wrapper button.intro-action-link {
718 ul li .intro-wrapper button.intro-action-link {
721 @media screen and (max-width: 768px) {
722 #topbar-second #space-menu-dropdown .media-list,
723 #topbar-second #search-menu-dropdown .media-list {
727 #topbar-second #space-menu-dropdown form,
728 #topbar-second #search-menu-dropdown form {
731 #topbar-second #space-menu-dropdown .search-reset,
732 #topbar-second #search-menu-dropdown .search-reset {
741 #topbar-second #space-menu-dropdown li>ul>li>a>.media .media-body p {
747 #topbar-second #nav-short-info .heading {
752 text-overflow: ellipsis;
754 #topbar-second #tabmenu .heading {
756 text-overflow: ellipsis;
763 .nav > li > .btn-link {
768 .nav .open > .btn-link {
769 background-color: #eee;
770 border-color: #337ab7;
772 .nav-pills > li > .btn-link {
775 .nav-pills .dropdown-menu,
776 .nav-tabs .dropdown-menu,
777 .account .dropdown-menu,
778 .contact-photo-wrapper .dropdown-menu {
779 background-color: $nav_bg;
782 .nav-pills .dropdown-menu li.divider,
783 .nav-tabs .dropdown-menu li.divider,
784 .account .dropdown-menu li.divider,
785 .contact-photo-wrapper .dropdown-menu li.divider {
786 background-color: $menu_background_hover_color;
788 margin: 9px 1px!important
790 .nav-pills .dropdown-menu li > a,
791 .nav-tabs .dropdown-menu li > a,
792 .account .dropdown-menu li > a,
793 .contact-photo-wrapper .dropdown-menu li > a {
794 border-left: 3px solid $nav_bg;
796 .nav-pills .dropdown-menu li a, .nav-pills .dropdown-menu li .btn-link,
797 .nav-tabs .dropdown-menu li a, .nav-tabs .dropdown-menu li .btn-link,
798 .account .dropdown-menu li a, .account .dropdown-menu li .btn-link,
799 .contact-photo-wrapper .dropdown-menu li a, .contact-photo-wrapper .dropdown-menu li .btn-link {
800 color: $nav_icon_color;
804 text-transform: capitalize;
808 .nav-pills .dropdown-menu li a i, .nav-pills .dropdown-menu li .btn-link i,
809 .nav-tabs .dropdown-menu li a i, .nav-tabs .dropdown-menu li .btn-link i,
810 .account .dropdown-menu li a i, .account .dropdown-menu li .btn-link i,
811 .contact-photo-wrapper .dropdown-menu li a i, .contact-photo-wrapper .dropdown-menu li .btn-link i {
814 display: inline-block;
817 .nav-pills .dropdown-menu li > a:hover,
818 .nav-tabs .dropdown-menu li > a:hover,
819 .account .dropdown-menu li > a:hover,
820 .contact-photo-wrapper .dropdown-menu li > a:hover,
821 .nav-pills .dropdown-menu li.selected a,
822 .nav-tabs .dropdown-menu li.selected a,
823 .account .dropdown-menu li.selected a,
824 .contact-photo-wrapper .dropdown-menu li.selected a {
825 border-left: 3px solid $link_color;
827 background: $menu_background_hover_color;
829 #photo-edit-link-wrap {
830 color: $font_color_darker;
845 .nav-container .widget {
848 background-color: rgba(255, 255, 255, $contentbg_transp);
849 box-shadow: 0 0 3px #dadada;
850 -webkit-box-shadow: 0 0 3px #dadada;
851 -moz-box-shadow: 0 0 3px #dadada;
860 .nav-container .widget h3 {
864 padding-bottom: 20px;
868 .nav-container .widget ul {
878 .nav-container .widget li {
884 aside .widget li:hover,
885 aside .widget li.selected,
886 .nav-container .widget li:hover {
888 color: $font_color_darker;
889 background-color: rgba(247, 247, 247, $contentbg_transp);
890 border-left: 3px solid $link_color !important;
894 aside .widget li a:hover {
895 color: $font_color_darker;
898 /* forumlist widget */
899 aside > #datebrowse-sidebar li.posted-date-selector-months {
900 margin-bottom: 10px;;
904 aside > #datebrowse-sidebar li.posted-date-selector-months:hover {
905 border-left: none !important;
906 background-color: transparent !important;
908 aside > #datebrowse-sidebar .posted-date-selector-months > ul {
911 aside > #datebrowse-sidebar .posted-date-selector-months > ul > li{
914 aside > #datebrowse-sidebar .posted-date-selector-months > ul > li:hover{
919 -webkit-filter: grayscale(100%);
920 filter: grayscale(100%);
922 filter: alpha(opacity=50); /* For IE8 and earlier */
923 -webkit-transition: all 0.2s ease-in-out;
924 -moz-transition: all 0.2s ease-in-out;
925 -o-transition: all 0.2s ease-in-out;
926 -ms-transition: all 0.2s ease-in-out;
927 transition: all 0.2s ease-in-out;
929 #forumlist-sidbar-ul li:hover a > .forumlist-img {
930 -webkit-filter: unset;
935 /* help page widget */
936 aside > .help-aside-wrapper p strong:first-child {
940 aside > .help-aside-wrapper h1 {
944 padding: 20px 0 10px;
946 aside > .help-aside-wrapper h2 {
952 aside .vcard #profile-photo-wrapper{
955 aside .vcard img.u-photo,
956 aside img.vcard-photo {
960 aside .vcard .tool .action{
967 background: rgba(0,0,0,.50);
971 -webkit-transition: all 0.25s ease-in-out;
972 -moz-transition: all 0.25s ease-in-out;
973 -o-transition: all 0.25s ease-in-out;
974 -ms-transition: all 0.25s ease-in-out;
975 transition: all 0.25s ease-in-out;
977 aside .vcard .tool a {
978 color: rgba(255,255,255,.85);
980 aside .vcard #profile-photo-wrapper:hover .tool .action {
983 aside .vcard #profile-photo-wrapper.crop-preview {
986 aside .vcard .profile-header {
987 padding: 5px 0px 20px 0px;
991 padding: 5px 0px 5px 0px;
993 aside .vcard .p-addr {
996 text-overflow: ellipsis;
1000 aside .vcard .title {
1003 aside .vcard .detail {
1010 aside .vcard .icon {
1011 display: table-cell;
1012 padding-right: 10px;
1015 #profile-extra-links {
1017 margin-bottom: 10px;
1019 aside .vcard #dfrn-request-link-button,
1020 aside .vcard #wallmessage-link-botton {
1026 aside .vcard #dfrn-request-link,
1027 aside .vcard #wallmessage-link {
1030 /* vcard-short-info */
1032 #nav-short-info .contact-wrapper {
1035 white-space: nowrap;
1037 padding-right: 20px;
1040 #nav-short-info .contact-photo-wrapper.media-left {
1043 #vcard-short-photo-wrapper img,
1044 #nav-short-info .contact-wrapper img {
1050 #nav-short-info .contact-wrapper .media-body {
1054 text-overflow: ellipsis;
1056 #vcard-short-desc > .media-heading,
1057 #vcard-short-desc > .vcard-short-addr,
1058 #nav-short-info .contact-wrapper .media-heading,
1059 #nav-short-info .contact-wrapper #contact-entry-url-network {
1060 text-overflow: ellipsis;
1063 #vcard-short-desc > .media-heading,
1064 #nav-short-info .contact-wrapper .media-heading {
1068 #nav-short-info .contact-wrapper .media-heading a {
1069 color: $font_color_darker;
1070 font-size: 14px !important;
1072 #vcard-short-desc > .vcard-short-addr,
1073 #nav-short-info .contact-wrapper #contact-entry-url-network {
1077 .network-content-wrapper > #viewcontact_wrapper-network,
1078 #nav-short-info .contact-wrapper .contact-photo-overlay,
1079 #nav-short-info .contact-wrapper .contact-actions{
1083 aside #peoplefind-sidebar input,
1084 aside #follow-sidebar input {
1086 background-position: 10px 5px;
1088 aside #peoplefind-sidebar label,
1089 aside #follow-sidebar label {
1090 font-weight: normal;
1092 aside #peoplefind-sidebar .form-group-search .form-button-search,
1093 aside #follow-sidebar .form-group-search .form-button-search {
1097 div#sidebar-group-header h3 {
1101 div#sidebar-group-list {
1110 color: $font_color_darker;
1114 color: $font_color_darker;
1116 transition: all 0.1s ease-in-out;
1119 color: $font_color_darker;
1126 aside #group-sidebar .sidebar-group-li:hover .group-edit-tool.faded-icon,
1127 aside #saved-search-list .saved-search-li:hover .savedsearchdrop.faded-icon,
1128 aside .widget:hover .widget-action.faded-icon {
1130 transition: all 0.25s ease-in-out;
1132 aside #group-sidebar .sidebar-group-li .group-edit-tool.faded-icon:hover,
1133 aside #saved-search-list .saved-search-li .savedsearchdrop.faded-icon:hover,
1134 aside .widget .widget-action.faded-icon:hover {
1137 aside #group-sidebar li .group-checkbox {
1140 aside #group-sidebar li .group-edit-tool {
1141 padding-right: 10px;
1143 aside #group-sidebar li .group-edit-tool:first-child {
1147 /* contact block widget */
1148 .contact-block-content {
1153 .contact-block-div {
1155 margin: 0px 5px 5px 0px;
1157 .contact-block-link {
1160 .contact-block-img {
1166 /* Tag cloud widget */
1167 .tagblock.widget > .tag-cloud {
1172 display: none !important;
1186 .modal #jot-sections {
1187 max-height: calc(100vh - 22px);
1189 @media (min-width: 768px) {
1190 .modal #jot-sections {
1191 max-height: calc(100vh - 62px);
1194 #jot-modal #jot-sections,
1195 #jot-modal #jot-modal-body,
1196 #jot-modal #profile-jot-form,
1197 #jot-modal #profile-jot-wrapper,
1198 #jot-modal #jot-text-wrap,
1199 #jot-modal #jot-preview-content,
1200 #jot-modal #tread-wrapper--1,
1201 #jot-modal #item-Q0,
1202 #jot-modal #profile-jot-acl-wrapper,
1203 #jot-modal #acl-wrapper {
1207 flex-direction: column;
1209 #jot-modal .modal-header a, #jot-modal .modal-header .btn-link,
1210 #profile-jot-submit-wrapper a, #profile-jot-submit-wrapper .btn-link {
1211 color: $font_color_darker;
1213 #jot-modal .modal-header {
1214 border-bottom: none;
1216 #jot-modal .modal-header .compose-link {
1220 #jot-title-wrap, #jot-category-wrap {
1226 #jot-text-wrap textarea {
1228 overflow-y: auto !important;
1229 overflow-y: overlay !important;
1231 #jot-text-wrap .preview textarea {
1234 #preview_profile-jot-text,
1235 .comment-edit-form .preview {
1239 border: 2px solid #ededed;
1242 border-radius: 0 0 4px 4px;
1244 color: $font_color_darker;
1246 textarea#profile-jot-text:focus + #preview_profile-jot-text,
1247 textarea.comment-edit-text:focus + .comment-edit-form .preview {
1248 border: 2px solid #6fdbe8;
1251 .preview hr.previewseparator {
1253 border-color: #D2D2D2;
1255 #previewImgBtn_profile-jot-text,
1267 .preview button.previewActionBtn {
1273 border: 2px solid #fff;
1274 box-shadow: 0 0 3px gray;
1278 text-decoration: none;
1279 padding: 0 0 1px 1px;
1282 .preview button.previewActionBtn:hover {
1285 .preview .closePreview button.previewActionBtn {
1288 #previewInputTitle_profile-jot-text {
1291 #profile-jot-wrapper button#profile-jot-submit {
1294 #profile-jot-wrapper #character-counter {
1297 .modal .wall-item-container.preview {
1299 overflow-y: overlay;
1303 font-family: ForkAwesome;
1307 font-family: ForkAwesome;
1311 #acl-wrapper label.panel-heading {
1318 .fbrowser .breadcrumb {
1321 .fbrowser .path a:before {
1325 .fbrowser .breadcrumb > li:last-of-type a{
1327 pointer-events: none;
1330 .fbrowser .folders {
1331 box-shadow: -1.5px 0 0 0 rgba(0, 0, 0, .1) inset;
1334 .fbrowser .folders ul {
1340 max-height: calc(100vh - 210px);
1343 @media (min-width: 768px) {
1344 .fbrowser .folders ul {
1345 max-height: calc(100vh - 255px);
1348 .fbrowser .folders li {
1350 padding-right: 10px;
1352 padding-bottom: 3px;
1354 .fbrowser .folders li:hover {
1356 color: $font_color_darker;
1357 background-color: rgba(247, 247, 247, $contentbg_transp);
1358 border-left: 3px solid $link_color;
1361 .fbrowser .folders li a,
1362 .fbrowser .folders li a:hover {
1363 color: $font_color_darker;
1366 .fbrowser .folders + .list {
1369 .fbrowser .fbrowser-content-container {
1371 max-height: calc(100vh - 175px);
1373 @media (min-width: 768px) {
1374 .fbrowser .fbrowser-content-container {
1375 max-height: calc(100vh - 220px);
1378 .fbrowser.image .photo-album-image-wrapper {
1379 box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.2);
1381 .fbrowser.image .photo-album-image-wrapper .caption {
1382 pointer-events: none;
1384 .fbrowser .profile-rotator-wrapper {
1387 .fbrowser .fa-spin {
1400 background-color: rgba(255,255,255,$contentbg_transp);
1401 box-shadow: 0 0 3px #dadada;
1402 -webkit-box-shadow: 0 0 3px #dadada;
1403 -moz-box-shadow: 0 0 3px #dadada;
1407 .panel.panel-inline {
1409 margin-right: -15px;
1413 .panel .panel-body {
1414 word-wrap: break-word;
1416 .tread-wrapper .media {
1418 word-wrap: break-word;
1424 /* Thread hover effects */
1425 .desktop-view .wall-item-container .wall-item-content a,
1426 .desktop-view .wall-item-name,
1427 .desktop-view .wall-item-container .fakelink,
1428 .desktop-view .toplevel_item .fakelink,
1429 .desktop-view .toplevel_item .wall-item-container .wall-item-responses a {
1431 -webkit-transition: all 0.25s ease-in-out;
1432 -moz-transition: all 0.25s ease-in-out;
1433 -o-transition: all 0.25s ease-in-out;
1434 -ms-transition: all 0.25s ease-in-out;
1435 transition: all 0.25s ease-in-out;
1438 .toplevel_item:hover .fakelink, .wall-item-container:hover .fakelink,
1439 .toplevel_item:hover .wall-item-container:hover .wall-item-responses a,
1440 .toplevel_item:hover .wall-item-content a,
1441 .toplevel_item:hover .wall-item-name,
1442 .wall-item-container:hover .wall-item-content a,
1443 .wall-item-container:hover .wall-item-name,
1444 .wall-item-container:hover .wall-item-location a {
1446 -webkit-transition: all 0.25s ease-in-out;
1447 -moz-transition: all 0.25s ease-in-out;
1448 -o-transition: all 0.25s ease-in-out;
1449 -ms-transition: all 0.25s ease-in-out;
1450 transition: all 0.25s ease-in-out;
1454 .wall-item-container {
1455 border-top: 1px solid rgba(255, 255, 255, 0.8);
1458 .wall-item-container.panel-body {
1463 .wall-item-container .media {
1466 background-color: rgba(0, 0, 0, 0.03);
1469 /* wall items contact photo */
1474 /*maybe some adional stuff is needed for the different screen sizes */
1476 .contact-photo-image-wrapper {
1483 .contact-photo-overlay {
1491 background:rgba(0,0,0,.50);
1494 -webkit-transition: opacity .25s ease;
1495 -moz-transition: opacity .25s ease;
1497 .contact-photo-overlay:hover {
1500 .contact-photo-overlay-content {
1502 text-shadow: 1px 1px 1px #ccc;
1503 color:rgba(255,255,255,.85);
1505 vertical-align: bottom;
1512 .wwto .contact-photo {
1520 display: inline-block;
1523 /* wall items action dropdown menu */
1524 .media [role=heading] {
1528 /* Workaround for Firefox where the post heading covers the avatar, preventing hovercard interaction,
1529 48px is the width of the avatar image and should be adjusted accordingly if it ever changes. */
1530 .media .dropdown.pull-left + [role=heading] {
1539 .shared_header .preferences {
1543 .wall-item-network {
1547 /* wall items contact info */
1548 .media .media-body {
1551 .media .media-body h4.media-heading {
1554 color: $font_color_darker;
1556 .media .media-body .addional-info a, .media .media-body h5.media-heading > a {
1559 .media .contact-info-comment {
1560 display: table-cell;
1562 .media .contact-info-xs h5,
1563 .media .contact-info-comment {
1574 .wall-item-name.xs {
1579 /* Contact avatar click card */
1580 .userinfo.click-card {
1584 .userinfo.click-card > *:hover:after {
1589 background-color: #ffffff;
1598 border-radius: 0 0 40% 0;
1601 /* The lock symbol popup */
1605 background-color: $nav_bg;
1615 color: $nav_icon_color;
1619 /* Space between content and head */
1624 /* wall items content */
1625 .wall-item-content {
1626 word-break: break-word;
1628 .wall-item-content img {
1630 object-fit: contain;
1632 .wall-item-body > img,
1633 .wall-item-body > a > img {
1636 .wall-item-body .body-attach > a {
1637 color: $font_color_darker;
1638 display: inline-block;
1640 .wall-item-body .body-attach > a div {
1641 color: $font_color_darker;
1645 /* wall-item content elements */
1653 box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .1) inset, 0 1px 1px rgba(0, 0, 0, .05);
1655 @media screen and (max-width: 767px) {
1661 margin: 5px -10px 0;
1665 box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .15) inset, 0 1px 1px rgba(0, 0, 0, .05);
1671 margin-bottom: 10px;
1675 blockquote.shared_content {
1681 padding: 10px 10px 1px 0;
1686 .type-link img.attachment-image {
1689 .type-link blockquote, .type-video blockquote {
1693 .oembed.video .embed_video > div::before {
1694 font-family: ForkAwesome;
1695 font-weight: normal;
1697 display: inline-block;
1698 text-decoration: inherit;
1699 vertical-align: top;
1707 .oembed.video .embed_video > div {
1708 background-color: rgba(0,0,0,0.2);
1709 -webkit-transition: all 0.25s ease-in-out;
1710 -moz-transition: all 0.25s ease-in-out;
1711 -o-transition: all 0.25s ease-in-out;
1712 -ms-transition: all 0.25s ease-in-out;
1713 transition: all 0.25s ease-in-out;
1715 .oembed.video .embed_video > div:hover {
1716 background-color: rgba(0,0,0,0);
1718 .oembed.video .embed_video.active {
1721 .oembed.video .embed_video.active iframe {
1722 width: 100% !important;
1731 color: $font_color_darker;
1734 .wall-item-tags a:hover {
1735 text-decoration: none;
1737 .wall-item-bottom .label,
1738 .wall-item-bottom .label a {
1741 .wall-item-tags .category,
1742 .wall-item-tags .folder {
1746 /* item social action buttons */
1747 .wall-item-actions {
1750 justify-content: space-between;
1752 .wall-item-actions a, .wall-item-actions button {
1754 color: $font_color_darker;
1756 .wall-item-actions .active {
1760 .wall-item-actions-left {
1761 display: table-cell;
1762 vertical-align: middle;
1764 .wall-item-actions-right {
1767 .wall-item-actions .checkbox {
1771 .wall-item-actions .button-comments,
1772 .wall-item-actions .button-votes,
1773 .wall-item-actions .button-likes {
1774 text-transform: capitalize;
1776 .wall-item-actions button:hover {
1777 color: $font_color_darker;
1778 text-decoration: underline;
1780 .wall-item-actions .separator {
1784 .wall-item-responses > div > p {
1788 /* wall item hover effects */
1790 @media (min-width: 768px) {
1791 /* Tags and mentions */
1792 .wall-item-container .wall-item-bottom .wall-item-tags span.label {
1793 filter:grayscale(0.5);
1796 -webkit-transition: all 0.25s ease-in-out;
1797 -moz-transition: all 0.25s ease-in-out;
1798 -o-transition: all 0.25s ease-in-out;
1799 -ms-transition: all 0.25s ease-in-out;
1800 transition: all 0.25s ease-in-out;
1803 .wall-item-container:hover .wall-item-bottom .wall-item-tags span.label {
1804 filter:grayscale(0);
1807 -webkit-transition: all 0.25s ease-in-out;
1808 -moz-transition: all 0.25s ease-in-out;
1809 -o-transition: all 0.25s ease-in-out;
1810 -ms-transition: all 0.25s ease-in-out;
1811 transition: all 0.25s ease-in-out;
1813 /* Like/Comment/etc buttons */
1814 .wall-item-container .wall-item-links,
1815 .wall-item-container .wall-item-actions button,
1816 .wall-item-container .body-attach > a {
1819 -webkit-transition: all 0.25s ease-in-out;
1820 -moz-transition: all 0.25s ease-in-out;
1821 -o-transition: all 0.25s ease-in-out;
1822 -ms-transition: all 0.25s ease-in-out;
1823 transition: all 0.25s ease-in-out;
1825 .wall-item-container:hover .wall-item-links,
1826 .wall-item-container:hover .wall-item-actions button,
1827 .wall-item-container:hover .body-attach > a {
1830 -webkit-transition: all 0.25s ease-in-out;
1831 -moz-transition: all 0.25s ease-in-out;
1832 -o-transition: all 0.25s ease-in-out;
1833 -ms-transition: all 0.25s ease-in-out;
1834 transition: all 0.25s ease-in-out;
1836 .wall-item-container .wall-item-body .body-attach > a:hover {
1844 wall-item-comment-wrapper.well {
1847 background-color: rgba(237, 237, 237, $contentbg_transp);
1848 background-image: none;
1851 wall-item-comment-wrapper.well-small {
1855 wall-item-comment-wrapper.well hr {
1856 border-top: 1px solid #d9d9d9;
1858 .wall-entry wall-item-comment-wrapper.well {
1861 .comment-container {
1863 border-top-left-radius: 3px;
1864 border-top-right-radius: 3px;
1865 border-bottom-right-radius: 0px;
1866 border-bottom-left-radius: 0px;
1869 position: relative!important;
1872 .hide-comments-outer {
1873 background-color: rgba(0, 0, 0, 0.03);
1875 border-radius: 0.5em 0.5em 0 0;
1877 .hide-comments-total {
1886 .wall-item-comment-wrapper {
1888 border-top: 1px solid rgba(255, 255, 255, 0.8);
1889 background-color: rgba(0, 0, 0, 0.03);
1890 border-radius: 0 0 4px 4px;
1894 .comment-fake-form {
1895 border-color: #d9d9d9;
1897 .comment-fake-form textarea {
1901 .comment-container .wall-item-comment-wrapper {
1905 .comment-edit-form textarea {
1909 .comment-edit-submit-wrapper {
1913 .comment-icon-list {
1915 justify-content: space-between;
1918 /* acpopup + textcompletion*/
1920 background-color: #ffffff;
1924 box-shadow: 0 6px 12px rgba(0,0,0,.175);
1929 /** @todo: we schould consider the possebility to overwrite bootstrap dropdowns
1930 at the beginning of this file to get rid of the !important */
1931 .textcomplete-item > a {
1932 color: $font_color_darker !important;
1933 padding: 5px 20px !important;
1935 .textcomplete-item.active > a {
1936 background-color: rgb(247, 247, 247) !important;
1937 background-image: none !important;
1938 border-left: 3px solid $link_color;
1939 padding-left: 17px !important;
1941 .textcomplete-item a .forum {
1949 /* The wall-item thread levels */
1950 .wall-item-container.thread_level_3,
1951 .wall-item-container.thread_level_4,
1952 .wall-item-container.thread_level_5,
1953 .wall-item-container.thread_level_6,
1954 .wall-item-container.thread_level_7 {
1959 #birthday-notice, #birthday-wrapper {
1963 background-color: rgba(247,247,247,$contentbg_transp);
1964 box-shadow: 0 0 3px #dadada;
1965 -webkit-box-shadow: 0 0 3px #dadada;
1966 -moz-box-shadow: 0 0 3px #dadada;
1971 section > .tabbar-wrapper {
1972 /* The tabbar shouldn't' be visibile inside
1973 the section element. Only after we have
1974 moved it to the nav through js */
1975 display: none !important;
1984 #tabmenu .search-heading {
1986 text-overflow: ellipsis;
1987 white-space: nowrap;
2000 border-bottom: 0 solid $link_color;
2003 transition: all .15s ease;
2009 ul.tabs li:hover, ul.tabs li.active {
2010 border-bottom-width: 4px;
2012 ul.tabbar ul.tabs-extended li.active {
2014 border-bottom-width: 2px;
2016 ul.tabbar ul.tabs-extended li.active a {
2019 ul.dropdown-menu li:hover {
2020 border-bottom-width: 0;
2025 .dropdown-menu li a,
2026 .dropdown-menu li .btn-link {
2029 .dropdown-menu li > :hover,
2030 .dropdown-menu li > :visited,
2031 .dropdown-menu li > :focus {
2035 .dropdown-menu li:first-child {
2039 /* Notificaiotn badges */
2040 #mail-update-li.show {
2041 display: inline-block!important;
2045 p.wall-item-announce,
2047 .media .shared-time,
2050 .media .location a {
2052 color: $font_color_darker;
2056 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2058 border-left: 3px solid rgba(255,255,255,0);
2061 .media-list > li:hover,
2062 .media-list > li.selected,
2063 .media-list > li.active {
2064 border-left: 3px solid $link_color;
2065 background-color: rgba(247, 247, 247, $contentbg_transp);
2072 .form-control:focus {
2073 border: 2px solid $link_color;
2077 .radio label::before,
2078 .checkbox label::before {
2079 background-color: rgba(255,255,255,$contentbg_transp);
2081 .radio label::after {
2082 background-color: $link_color;
2084 .checkbox label::after {
2088 .checkbox input[type="checkbox"]:focus + label::before,
2089 .radio input[type="radio"]:focus + label::before {
2090 outline-color: $link_hover_color;
2094 color: $font_color_darker;
2097 input[type=range].form-control {
2103 .form-control.form-search {
2104 border-radius: 30px;
2105 background-image: url(img/icon_search16x16.png);
2106 background-repeat: no-repeat;
2107 background-position: 10px 8px;
2110 .form-group-search {
2115 .form-group-search .form-button-search {
2119 border-radius: 30px;
2121 .search-input.form-control.form-search {
2129 .search-content-wrapper > #search-header-wrapper {
2132 .search-content-wrapper > .section-title-wrapper {
2135 #navbar-button > #search-save {
2138 /* Section-Content-Wrapper */
2139 #search-header-wrapper {
2141 padding-bottom: 20px;
2142 margin-bottom: 20px;
2144 background-color: rgba(255,255,255,$contentbg_transp);
2147 color: $font_color_darker;
2148 box-shadow: 0 0 3px #dadada;
2149 -webkit-box-shadow: 0 0 3px #dadada;
2150 -moz-box-shadow: 0 0 3px #dadada;
2157 section > .generic-page-wrapper, .videos-content-wrapper,
2158 .suggest-content-wrapper, .help-content-wrapper,
2159 .match-content-wrapper, .dirfind-content-wrapper,
2160 .delegation-content-wrapper, .notes-content-wrapper,
2161 .message-content-wrapper, .apps-content-wrapper,
2162 #adminpage, .delegate-content-wrapper, .uexport-content-wrapper,
2163 .dfrn_request-content-wrapper,
2164 .friendica-content-wrapper, .credits-content-wrapper, .nogroup-content-wrapper,
2165 .profperm-content-wrapper, .invite-content-wrapper, .tos-content-wrapper,
2166 .fsuggest-content-wrapper {
2167 min-height: calc(100vh - 150px);
2169 padding-bottom: 20px;
2170 margin-bottom: 20px;
2172 background-color: rgba(255,255,255,$contentbg_transp);
2175 color: $font_color_darker;
2176 box-shadow: 0 0 3px #dadada;
2177 -webkit-box-shadow: 0 0 3px #dadada;
2178 -moz-box-shadow: 0 0 3px #dadada;
2180 #content:hover .page-action.faded-icon {
2182 transition: all 0.25s ease-in-out;
2184 #content .page-action.faded-icon:hover {
2188 .section-title-wrapper {
2191 /* Home and Login Page */
2192 body.mod-home nav.navbar .nav>li>a:hover {
2193 background-color: rgba(255,255,255,0.2);
2195 body.mod-home .navbar #nav-login,
2196 body.mod-login .navbar #nav-login {
2200 #profile-content-standard,
2201 #profile-content-advanced {
2206 margin-bottom: 20px;
2208 .contact-block-div.forumlist-profile-advanced {
2213 ul.viewcontact_wrapper {
2215 margin-right: -15px;
2217 ul.viewcontact_wrapper > li {
2220 .contact-wrapper .contact-photo-wrapper button {
2223 .contact-wrapper.media {
2225 word-wrap: break-word;
2228 /* bootstrap hack for .media */
2229 .contact-wrapper.media .media-body {
2230 display: table-cell;
2235 .contact-wrapper.media:before, .media:after {
2239 .contact-wrapper.media:after {
2242 .contact-wrapper .contact-photo-image-wrapper img.contact-photo.xl {
2246 .contact-wrapper .contact-photo-image-wrapper img.contact-photo-xs {
2250 .contact-wrapper .contact-photo-overlay-content.xl {
2253 .contact-wrapper .contact-photo-menu {
2257 .contact-entry-desc {
2258 color: $font_color_darker;
2260 .contact-entry-checkbox {
2263 .contact-wrapper .media-body .contact-entry-name h4.media-heading a {
2264 font-weight: bold !important;
2266 font-size: 15px !important;
2268 .contact-wrapper .contact-actions {
2271 .contact-wrapper .contact-action-link,
2272 .contact-wrapper .contact-action-link:hover,
2273 .textcomplete-item .contact-wrapper .contact-action-link {
2275 color: $font_color_darker;
2278 .contact-wrapper .contact-action-link {
2280 transition: all 0.25s ease-in-out;
2282 ul li:hover .contact-wrapper .contact-action-link {
2284 transition: all 0.25s ease-in-out;
2286 ul li:hover .contact-wrapper .contact-action-link:hover {
2289 #contacts-search-wrapper,
2290 #directory-search-wrapper{
2293 #contact-drop-confirm .contact-actions,
2294 #contact-drop-confirm .contact-photo-overlay,
2295 #contact-drop-confirm .contact-photo-menu {
2298 #contact-drop-confirm #confirm-form {
2303 #contact-edit-actions {
2306 #contact-edit-status-wrapper {
2308 background-color: rgba(225, 245, 254, $contentbg_transp);
2311 #contact-edit-settings {
2315 /* directory page */
2316 #directory-search-heading {
2320 /* group edit page */
2323 margin-bottom: 10px;
2326 .group-actions button,
2331 .contact-group-actions .fa-times-circle { color: #D00000;}
2332 .contact-group-actions .fa-plus-circle { color: #008000;}
2334 #group-edit-wrapper {
2338 #group-edit-header {
2341 #group-update-wrapper .contact-photo-overlay {
2344 #group-update-wrapper .viewcontact_wrapper .contact-group-actions {
2349 #group-update-wrapper .viewcontact_wrapper .contact-group-link {
2354 #group-update-wrapper .viewcontact_wrapper .contact-action-link:hover {
2357 #group-update-wrapper .shortmode {
2361 #group-update-wrapper .shortmode .contact-photo {
2365 #group-update-wrapper .shortmode .media {
2368 #group-update-wrapper .shortmode .contact-entry-desc {
2369 font-size: 12px !important;
2371 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading {
2374 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading a {
2375 font-size: 13px !important;
2376 white-space: nowrap;
2378 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-rel,
2379 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-network {
2384 .message-content-wrapper > li {
2385 /* we need this overwriting because we have no template file
2386 for the general mail page /message
2388 list-style-type: none;
2391 max-height: calc(100vh - 200px);
2393 #mail-conversation {
2395 max-height: calc(100vh - 400px);
2400 .mail-conv-wrapper .media .contact-photo-wrapper img {
2404 .mail-thread #prvmail-to-label,
2405 .mail-thread #prvmail-subject-label {
2408 .mail-thread #prvmail-message-label > label {
2411 .mail-thread #prvmail-message-label textarea {
2414 .mail-conv-wrapper {
2416 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2419 height: calc(100vh - 150px);
2422 height: calc(100% - 20px);
2424 #message-preview ul {
2427 #message-preview .media-list li {
2431 #message-preview .media-list li:hover {
2432 border-left: none !important;
2434 #message-preview .media-list li a {
2437 .mail-list-outside-wrapper {
2439 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2441 .mail-list-outside-wrapper .contact-photo-wrapper img {
2448 #modal #prvmail-text-edit-bb .bb-img {
2453 #photo-album-edit-name-label {
2456 .photo-album-edit-name {
2460 .photo-album-actions {
2461 margin-bottom: 10px;
2463 .photo-album-actions .photos-order-link {
2468 .fc .fc-month-view .fc-content .fc-title .item-desc:hover {
2469 color: $link_hover_color;
2471 .fc .fc-list-item-title a {
2474 .fc .fc-list-item-title a[href]:hover {
2475 color: $link_hover_color;
2476 text-decoration: none;
2478 .event-wrapper .event-owner {
2479 margin-bottom: 15px;
2481 .event-wrapper .event-owner img {
2490 .event-wrapper .vevent {
2493 box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, .1) inset;
2495 .event-wrapper .event-buttons {
2498 #event-form-wrapper {
2501 #event-edit-form-wrapper {
2505 color: $font_color_darker;
2507 #event-edit-form-wrapper #event-edit-time {
2510 .event-buttons .plink-event-link {
2513 .vevent .event-summary {
2516 .vevent .event-description {
2519 .vevent .event-location .location {
2523 .modal-body .vevent .event-summary {
2526 #event-preview .vevent .event-summary {
2531 .event-card-details, .event-card-header {
2534 .event-card-header, .event-card-left-date {
2537 .vevent .event-card-header {
2540 .event-card-left-date {
2541 width: 60px; /* Das muss wahrscheinlich unterschiedlich sein zwischen calendar und stream */
2543 .event-card .event-date-wrapper > span {
2547 white-space: nowrap;
2549 .event-card .event-date-wrapper .event-card-short-month {
2551 text-transform: uppercase;
2553 .event-card .event-date-wrapper.medium .event-card-short-date {
2558 .event-card .event-card-content {
2560 padding: 0 5px 0 15px;
2561 box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, .1) inset;
2565 .event-card .event-card-content .event-map-btn {
2571 .event-card .event-card-title {
2573 color: $font_color_darker;
2578 .event-card .event-card-location {
2582 .event-card .event-card-location br {
2585 .event-card .event-card-location br::after {
2588 .event-card-profile-name a {
2591 .event-card-profile-name a:hover {
2592 color: $link_hover_color;
2594 .event-card .event-card-content .event-location-map {
2599 .event-card .event-card-content .event-location-map .map{
2602 .event-card .description {
2604 box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, .1) inset;
2610 .photo-next-link, .photo-prev-link {
2616 transform: translateZ(0);
2617 transition: opacity .2s;
2628 .photo-next-link > i, .photo-prev-link > i {
2629 vertical-align: super;
2631 .photo-next-link > i {
2640 #photo-photo:hover .photo-next-link,
2641 #photo-photo:hover .photo-prev-link {
2644 #photo-photo .photo-next-link:hover,
2645 #photo-photo .photo-prev-link:hover {
2649 .photo-comment-wrapper .comment {
2652 .photo-comment-wrapper .wall-item-content {
2653 color: $font_color_darker;
2656 .photo-comment-wrapper .comment-wwedit-wrapper,
2657 .photo-comment-wrapper .wall-item-outside-wrapper.media:first-child {
2662 .profile-listing-table {
2666 .profile-listing-row {
2669 .profile-listing-cell {
2670 display: table-cell;
2672 .profile-listing-photo {
2677 #profile-listing-new-link-wrapper {
2678 margin-bottom: 20px;
2681 #profile-photo-upload-section {
2685 #profile-photo-upload-close {
2690 .section-subtitle-wrapper {
2693 details.profile-jot-net[open] summary:before, .panel .section-subtitle-wrapper a.accordion-toggle:before {
2694 font-family: ForkAwesome;
2698 details.profile-jot-net summary:before, .panel .section-subtitle-wrapper a.accordion-toggle.collapsed:before {
2699 font-family: ForkAwesome;
2702 details.profile-jot-net summary:before {
2706 details.profile-jot-net[open] summary:before {
2710 #settings-nick-wrapper {
2711 margin-bottom: 20px;
2717 /* Emulates Bootstrap display */
2720 background-color: rgba(255, 255, 255, $contentbg_transp);
2723 box-shadow: 0 0 3px #dadada;
2724 -webkit-box-shadow: 0 0 3px #dadada;
2725 -moz-box-shadow: 0 0 3px #dadada;
2728 .settings-block.fakelink, .settings-block > .fakelink {
2732 .settings-block > .fakelink {
2733 margin: -10px -15px 10px -15px;
2734 border-radius: 4px 4px 0 0;
2737 .settings-block.fakelink:hover, .settings-block > .fakelink:hover {
2738 color: $link_hover_color;
2740 .settings-block.fakelink > h3, .settings-block > .fakelink > h3 {
2747 .section-subtitle-wrapper > h2 {
2750 margin-bottom: 10px;
2753 .fakelink > h3:before {
2754 padding-right: 10px;
2756 .widget.fakelink > h3:before,
2757 .settings-block.fakelink > h3:before {
2758 font-family: ForkAwesome;
2759 content: "\f0da"; /* Right Plain Pointer */
2761 .widget > .fakelink > h3:before,
2762 #sidebar-group-header > .fakelink > h3:before,
2763 .settings-block > .fakelink > h3:before {
2764 font-family: ForkAwesome;
2765 content: "\f0d7"; /* Bottom Plain Pointer */
2772 /* Intro Notifications */
2773 ul.notif-network-list {
2775 margin-right: -15px;
2777 ul.notif-network-list > li {
2779 padding-right: 15px;
2781 .intro-wrapper.media {
2783 word-wrap: break-word;
2786 .intro-photo-wrapper img.intro-photo {
2794 .intro-enty-name h4 {
2795 font-size: 15px !important;
2797 .intro-wrapper button.intro-action-link {
2799 transition: all 0.25s ease-in-out;
2801 .intro-wrapper button.intro-action-link,
2802 .intro-wrapper button.intro-action-link:hover {
2805 color: $font_color_darker;
2807 ul li:hover .intro-wrapper button.intro-action-link {
2809 transition: all 0.25s ease-in-out;
2811 ul li:hover .intro-wrapper button.intro-action-link:hover {
2814 .intro-action-buttons {
2818 transition: max-height 0.1s ease-out;
2820 ul.notif-network-list > li:hover .intro-action-buttons {
2822 transition: max-height 0.1s ease-in;
2824 .intro-desc-label, .intro-url-label, .intro-network-label,
2825 .intro-location-label, .intro-keywords-label,
2826 .intro-about-label, .intro-knowyou-label, .intro-madeby-label {
2829 .intro-contact-info.xs .intro-url-label, .intro-contact-info.xs .intro-network-label,
2830 .intro-contact-info.xs .intro-location-label,
2831 .intro-contact-info.xs .intro-keywords-label, .intro-contact-info.xs .intro-about-label,
2832 .intro-contact-info.xs .intro-knowyou-label {
2837 /* Notifications Page */
2838 ul.notif-network-list li.unseen {
2839 background-color: #e3eff3;
2841 .notif-item img.notif-image {
2846 .notif-item .notif-desc-wrapper {
2849 .notif-item .notif-desc-wrapper a {
2852 color: $font_color_darker;
2859 /* This is a little bit hacky. Since the search page is used for diferent
2860 content types we can't apply the generic-page-wrapper class.
2861 So we apply the css of the generic-page-wrapper class to the ul element with some
2862 little modifications to emulate a standard page template */
2863 .search-content-wrapper > ul.viewcontact_wrapper {
2864 min-height: calc(100vh - 150px);
2866 padding-bottom: 20px;
2868 margin-bottom: 20px;
2870 background-color: rgba(255,255,255,$contentbg_transp);
2873 color: $font_color_darker;
2874 box-shadow: 0 0 3px #dadada;
2875 -webkit-box-shadow: 0 0 3px #dadada;
2876 -moz-box-shadow: 0 0 3px #dadada;
2880 section.help-content-wrapper h1 {
2881 padding-bottom: 0.3em;
2883 border-bottom: 1px solid #ddd;
2885 section.help-content-wrapper h2 {
2886 padding-bottom: 0.3em;
2888 border-bottom: 1px solid #ddd;
2890 section.help-content-wrapper h3 {
2893 section.help-content-wrapper h4 {
2896 section.help-content-wrapper h1,
2897 section.help-content-wrapper h2,
2898 section.help-content-wrapper h3,
2899 section.help-content-wrapper h4,
2900 section.help-content-wrapper h5,
2901 section.help-content-wrapper h6 {
2903 margin-bottom: 16px;
2907 section.help-content-wrapper p {
2910 section.help-content-wrapper p,
2911 section.help-content-wrapper a,
2912 section.help-content-wrapper li {
2918 #adminpage #frio_background_image .image-select {
2921 #adminpage #frio_background_image.input-group {
2924 #admin-summary-wrapper {
2927 #adminpage ul#addonslist, li.addon {
2930 #adminpage li .icon {
2931 display: inline-block;
2932 vertical-align: text-top;
2936 #adminpage li .icon:before {
2938 display: inline-block;
2945 border: 1px solid #cccccc;
2947 background-color: $background_color;
2948 -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
2949 -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
2950 transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
2952 #adminpage li .icon.on:after {
2953 font-family: "ForkAwesome";
2955 display: inline-block;
2968 #adminpage .addon .desc {
2971 #admin-users #users tr.blocked {
2972 background-color: #f8efc0;
2974 .adminpage .table-hover > tbody > tr:hover + tr.details {
2975 background-color: #f5f5f5;
2977 .offset-anchor::before {
2983 pointer-events: none;
2991 #identity-selector-wrapper {
2996 #identity-selector-wrapper .identity-match-photo {
3000 #identity-selector-wrapper .identity-match-photo button {
3003 #identity-selector-wrapper .identity-match-photo .badge {
3008 #identity-selector-wrapper .identity-match-name {
3011 #identity-selector-wrapper .identity-match-details {
3017 #register-openid-wrapper, #register-name-wrapper, #register-invite-wrapper, #profile-publish-wrapper {
3020 #register-openid-end, #register-nickname-end
3026 * Overwriting for transparency and other colors
3028 main .nav-tabs>li.active>a,
3029 main .nav-tabs>li.active>a:focus,
3030 main .nav-tabs>li.active>a:hover {
3031 background-color: rgba(255,255,255,$contentbg_transp);
3041 @media (min-width: 768px) {
3048 * Framework overwrite
3051 /* textcomplete for contact filtering*/
3052 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list {
3053 position: relative !important;
3054 top: inherit !important;
3055 bottom: inherit !important;
3056 left: inherit !important;
3059 margin-right: -15px;
3060 background-color: transparent;
3064 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li {
3066 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
3068 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li:first-child {
3071 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list
3072 .textcomplete-item > a {
3073 padding: 0 !important;
3075 background-color: transparent !important;
3077 /* this is a little hack for texcomplete contact filter
3078 There are for some reasons empty <a> tags. I don't know why */
3079 .textcomplete-item .contact-wrapper a {
3084 body .tread-wrapper .hovercard a,
3085 body .tread-wrapper .hovercard a:hover {
3088 body .tread-wrapper .hovercard:hover .hover-card-content a {
3089 color: $link_color !important;
3092 /* Pagination improvements */
3097 .pagination > li > a,
3098 .pagination > li > span {
3102 .pagination>li>a:hover,
3103 .pagination>li>span:hover {
3104 color: $link_hover_color;
3106 .pagination > .active > a,
3107 .pagination > .active > a:focus,
3108 .pagination > .active > a:hover,
3109 .pagination > .active > span,
3110 .pagination > .active > span:focus,
3111 .pagination > .active > span:hover {
3112 background-color: $link_color;
3113 border-color: $link_color;
3116 .pagination li.pager_n a {
3120 .pagination .pager_prev a {
3123 border-top-right-radius: 3px;
3124 border-bottom-right-radius: 3px;
3126 .pagination .pager_next a {
3129 border-top-left-radius: 3px;
3130 border-bottom-left-radius: 3px;
3133 .pager .previous > a {
3137 .pagination .disabled > a,
3138 .pager .disabled > a {
3144 background-color: rgba(255, 255, 255, $contentbg_transp);
3148 * some temporary workarounds until this will solved
3149 * elsewhere (e.g. new templates)
3151 section .profile-match-wrapper {
3158 #login-submit-wrapper {
3161 #lost-password-link { flex-grow: 2; }
3162 #login-lost-password-link {
3163 margin-bottom: 10px;
3169 #id_password_wrapper {
3170 margin-bottom: unset;
3177 background: #8ad0a1;
3184 .mod-home.is-not-singleuser,
3186 background-color: $login_bg_color;
3187 background-image: linear-gradient(to right, rgba(0,0,0, 0.7) , rgba(0,0,0, 0.4)), url($login_bg_image);
3188 background-size: cover;
3189 background-attachment: fixed;
3190 background-position: center;
3193 .mod-home.is-not-singleuser nav.navbar,
3194 .mod-login nav.navbar { background-color: transparent }
3195 .mod-home.is-not-singleuser #topbar-second,
3196 .mod-login #topbar-second {
3197 background-color: transparent;
3201 .mod-home.is-not-singleuser .login-content,
3202 .mod-login .login-content {
3207 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3211 .mod-home.is-not-singleuser .login-form > #login-form label,
3212 .mod-login #content #login-form label {
3216 .mod-home.is-not-singleuser .login-panel-content,
3217 .mod-login .login-panel-content {
3218 background-color: rgba(255,255,255,.85);
3222 background: $nav_bg !important;
3223 color: $btn_primary_color !important;
3226 -webkit-box-shadow: none;
3228 -moz-box-shadow: none;
3229 background-image: none;
3237 width: 100% !important;
3240 .qq-upload-drop-area {
3241 background: white !important;
3244 -webkit-box-shadow: none;
3246 -moz-box-shadow: none;
3247 background-image: none;
3255 width: 100% !important;
3256 display: block !important;
3257 position: relative !important;
3258 border: black 1px dashed !important;
3259 margin-bottom: 5px !important;
3260 margin-top: 15px !important;
3264 * The different views of js fullcalendar
3268 margin-bottom: 10px;
3272 #event-calendar-title {
3273 display: inline-block;
3283 #fc-header-right .dropdown > button {
3286 #event-calendar-title {
3287 vertical-align: middle;
3289 #event-calendar-views {
3296 .fc .fc-month-view td.fc-widget-content,
3298 .fc .fc-list-view .fc-list-table td,
3302 .fc td.fc-widget-header,
3303 .fc th.fc-widget-header {
3308 .fc .fc-month-view td.fc-day {
3311 border-bottom: 1px solid;
3314 .fc .fc-day-grid-container .fc-row {
3315 border-bottom: 1px solid;
3318 .fc tr td.fc-today {
3321 .fc .fc-month-view .fc-content .fc-title .item-desc {
3324 .fc .fc-view-container {
3327 .fc .fc-list-view td {
3330 #events-calendar.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
3335 background-color: #E3F2FD;
3336 border: 1px solid #BBDEFB;
3337 color: $font_color_darker;
3339 .fc .fc-month-view .fc-time,
3340 .fc .fc-listMonth-view .fc-list-item-time,
3341 .fc .fc-listMonth-view .fc-list-item-marker,
3342 .fc .fc-listMonth-view .fc-widget-header {
3345 .fc .fc-listMonth-view .fc-list-item:hover td {
3346 background: transparent;
3349 .fc .fc-listMonth-view .seperator {
3360 .event-card .event-label,
3361 .event-card .location-label {
3364 .popover.event-card .event-card-basic-content {
3369 .event-card .event-hover-location .location {
3374 /* Medium devices (desktops, 992px and up) */
3375 @media (min-width: 992px) {
3376 .mod-home.is-not-singleuser #content,
3377 .mod-login #content {
3378 margin-top: 100px!important;
3381 .mod-home.is-not-singleuser .login-form > #login-form,
3382 .mod-home.is-not-singleuser .login-form > #login-extra-links,
3383 .mod-login #content #login-form {
3384 background-color: #fff;
3388 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3390 background-color: white;
3393 .mod-home.is-not-singleuser .login-form > #login-form label,
3394 .mod-login #content #login-form label {
3398 .mod-home.is-not-singleuser .login-form::before,
3399 .mod-login #content #login-form::before {
3403 background-color: rgba(255,255,255,0.1);
3411 .mod-home.is-not-singleuser .login-form::after,
3412 .mod-login #content #login-form::after {
3416 background-color: rgba(255,255,255,0.2);
3426 /* Mobile display */
3427 @media (max-width: 600px) {
3435 #friendica-logo-mask {
3449 .panel .panel-body {
3453 .toplevel_item > .wall-item-container {
3461 .wall-item-actions {
3469 .generic-page-wrapper, .videos-content-wrapper, .suggest-content-wrapper, .help-content-wrapper, .match-content-wrapper, .dirfind-content-wrapper, .directory-content-wrapper, .delegation-content-wrapper, .notes-content-wrapper, .message-content-wrapper, .apps-content-wrapper, #adminpage, .delegate-content-wrapper, .uexport-content-wrapper, .dfrn_request-content-wrapper, .friendica-content-wrapper, .credits-content-wrapper, .nogroup-content-wrapper, .profperm-content-wrapper, .invite-content-wrapper, .tos-content-wrapper, .fsuggest-content-wrapper {
3478 .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
3482 .wwto .contact-photo {
3490 Prevent automatic zoom on input focus on iOS
3491 see https://stackoverflow.com/a/16255670
3497 .wall-item-container.thread_level_3,
3498 .wall-item-container.thread_level_4,
3499 .wall-item-container.thread_level_5,
3500 .wall-item-container.thread_level_6,
3501 .wall-item-container.thread_level_7 {