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 .navbar-toggle {
424 #topbar-first .nav > li > a,
425 #topbar-first .nav > li > button,
426 nav.navbar .nav > li > a,
427 nav.navbar .nav > li > button
429 color: $nav_icon_color;
431 #topbar-first .nav > .open > a,
432 #topbar-first .nav > .open > button
434 background-color: $nav_bg;
436 #topbar-first .nav > li > a:hover,
437 #topbar-first .nav > li > a:focus,
438 #topbar-first .nav > li > button:not(#main-menu):hover,
439 #topbar-first .nav > li > button:not(#main-menu):focus,
440 nav.navbar .nav > li > a:hover,
441 nav.navbar .nav > li > a:focus
442 nav.navbar .nav > li > button:hover,
443 nav.navbar .nav > li > button:focus
445 background-color: $nav_icon_hover_color;
447 #topbar-first .nav>.account {
451 #topbar-first .nav>.account img {
457 #topbar-first .nav>.account .dropdown-toggle {
458 padding: 8px 5px 0px;
462 #topbar-first .nav>.account .dropdown-toggle span {
465 #topbar-first .topbar-brand {
469 #topbar-first .topbar-actions {
473 #topbar-first .topbar-nav {
479 #topbar-first .topbar-nav .nav-segment {
483 #topbar-first .topbar-nav .nav-segment > a
485 display: inline-block;
486 text-decoration: none;
489 #topbar-first .topbar-nav .nav-segment .nav-notification {
493 background-color: #ff3535;
495 #topbar-first #intro-update{
498 #topbar-first .topbar-nav .arrow:after {
503 border-color: transparent;
510 border-bottom-color: #fff;
513 #topbar-first .topbar-nav .arrow {
518 border-color: transparent;
525 border-bottom-color: rgba(0, 0, 0, .15);
529 #topbar-first .topbar-nav .dropdown-menu {
533 #topbar-first .topbar-nav .dropdown-menu ul.media-list {
537 #topbar-first .topbar-nav .dropdown-menu li {
540 #topbar-first .topbar-nav .dropdown-menu li i.approval {
546 #topbar-first .topbar-nav .dropdown-menu li i.accepted {
549 #topbar-first .topbar-nav .dropdown-menu li i.declined {
552 #topbar-first .topbar-nav .dropdown-menu li .media {
555 #topbar-first .topbar-nav .dropdown-menu li .media .img-space {
560 #topbar-first .dropdown-footer {
561 margin: 10px 10px 5px
563 #topbar-first .caret {
564 border-top-color: #bebebe
566 #topbar-first .btn-group>a {
567 background-color: #7f9baa
569 #topbar-first .btn-enter {
570 background-color: #7f9baa;
573 #topbar-first .btn-enter:hover {
574 background-color: #89a2b0
576 .navbar-fixed-top ul.nav.navbar-nav.navbar-right {
580 #friendica-logo-mask {
585 /* Notification Menu */
586 #topbar-first #nav-notifications-menu {
589 #topbar-first #nav-notifications-menu a {
590 color: $font_color_darker;
593 #topbar-first #nav-notifications-menu li.notif-entry {
594 color: $font_color_darker;
596 border-bottom: 1px solid #eee;
598 border-left: 3px solid #fff;
602 #topbar-first #nav-notifications-menu li.notification-unseen {
603 border-left: 3px solid #e3eff3;
604 background-color: #e3eff3;
606 #topbar-first #nav-notifications-menu li.notif-entry:hover {
607 background-color: #f7f7f7;
608 border-left: 3px solid $link_color;
610 #topbar-first #nav-notifications-menu li.placeholder {
613 #topbar-first #nav-notifications-menu .media .media-body .contactname {
616 #topbar-first #nav-notifications-menu .media .media-body .label {
619 #topbar-first #nav-notifications-menu li.notif-entry .media-object a img {
624 /* The Top Nav Bar user menu */
625 #topbar-first .account .user-title {
629 #topbar-first .account .user-title span {
630 color: $nav_icon_color;
632 #topbar-first .account #main-menu .nav-notification {
636 background-color: #ff8989;
640 background-color: $nav_bg;
641 color: $nav_icon_color;
643 #myNavmenu li.nav-sitename {
649 #topbar-first .dropdown.account li#nav-sitename {
653 word-break: break-word;
655 #topbar-first .dropdown.account li#nav-sitename:hover {
657 background-color: $nav_bg;
660 #topbar-first #search-box .navbar-form {
671 background-color: $background_color;
673 /* fix bootstrap .well class not playing well with data-target slide animation */
679 #search-mobile .navbar-form {
682 #topbar-first #search-box .form-search {
685 background-position: 8px 4px;
687 #topbar-first #search-box .btn {
696 background-color: #fff;
698 background-image: none;
699 -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
700 -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
701 box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
702 border-bottom: 1px solid #d4d4d4;
704 #topbar-second > .container {
707 @media screen and (max-width: 767px) {
708 #topbar-second > .container,
709 #topbar-second #navbar-button {
713 #topbar-second .dropdown-menu {
717 #topbar-second .dropdown-menu .divider {
720 #topbar-second #space-menu-dropdown,
721 #topbar-second #search-menu-dropdown {
724 #topbar-second #space-menu-dropdown .media-list,
725 #topbar-second #search-menu-dropdown .media-list {
733 .intro-wrapper button.intro-action-link {
737 ul li .intro-wrapper button.intro-action-link {
740 @media screen and (max-width: 768px) {
741 #topbar-second #space-menu-dropdown .media-list,
742 #topbar-second #search-menu-dropdown .media-list {
746 #topbar-second #space-menu-dropdown form,
747 #topbar-second #search-menu-dropdown form {
750 #topbar-second #space-menu-dropdown .search-reset,
751 #topbar-second #search-menu-dropdown .search-reset {
760 #topbar-second #space-menu-dropdown li>ul>li>a>.media .media-body p {
766 #topbar-second #nav-short-info .heading {
771 text-overflow: ellipsis;
773 #topbar-second #tabmenu .heading {
775 text-overflow: ellipsis;
782 .nav > li > .btn-link {
787 .nav .open > .btn-link {
788 background-color: #eee;
789 border-color: #337ab7;
791 .nav-pills > li > .btn-link {
794 .nav-pills .dropdown-menu,
795 .nav-tabs .dropdown-menu,
796 .account .dropdown-menu,
797 .contact-photo-wrapper .dropdown-menu {
798 background-color: $nav_bg;
801 .nav-pills .dropdown-menu li.divider,
802 .nav-tabs .dropdown-menu li.divider,
803 .account .dropdown-menu li.divider,
804 .contact-photo-wrapper .dropdown-menu li.divider {
805 background-color: $menu_background_hover_color;
807 margin: 9px 1px!important
809 .nav-pills .dropdown-menu li > a,
810 .nav-tabs .dropdown-menu li > a,
811 .account .dropdown-menu li > a,
812 .contact-photo-wrapper .dropdown-menu li > a {
813 border-left: 3px solid $nav_bg;
815 .nav-pills .dropdown-menu li a, .nav-pills .dropdown-menu li .btn-link,
816 .nav-tabs .dropdown-menu li a, .nav-tabs .dropdown-menu li .btn-link,
817 .account .dropdown-menu li a, .account .dropdown-menu li .btn-link,
818 .contact-photo-wrapper .dropdown-menu li a, .contact-photo-wrapper .dropdown-menu li .btn-link {
819 color: $nav_icon_color;
823 text-transform: capitalize;
827 .nav-pills .dropdown-menu li a i, .nav-pills .dropdown-menu li .btn-link i,
828 .nav-tabs .dropdown-menu li a i, .nav-tabs .dropdown-menu li .btn-link i,
829 .account .dropdown-menu li a i, .account .dropdown-menu li .btn-link i,
830 .contact-photo-wrapper .dropdown-menu li a i, .contact-photo-wrapper .dropdown-menu li .btn-link i {
833 display: inline-block;
836 .nav-pills .dropdown-menu li > a:hover,
837 .nav-tabs .dropdown-menu li > a:hover,
838 .account .dropdown-menu li > a:hover,
839 .contact-photo-wrapper .dropdown-menu li > a:hover,
840 .nav-pills .dropdown-menu li.selected a,
841 .nav-tabs .dropdown-menu li.selected a,
842 .account .dropdown-menu li.selected a,
843 .contact-photo-wrapper .dropdown-menu li.selected a {
844 border-left: 3px solid $link_color;
846 background: $menu_background_hover_color;
848 #photo-edit-link-wrap {
849 color: $font_color_darker;
864 .nav-container .widget {
867 background-color: rgba(255, 255, 255, $contentbg_transp);
868 box-shadow: 0 0 3px #dadada;
869 -webkit-box-shadow: 0 0 3px #dadada;
870 -moz-box-shadow: 0 0 3px #dadada;
879 .nav-container .widget h3 {
883 padding-bottom: 20px;
887 .nav-container .widget ul {
897 .nav-container .widget li {
903 aside .widget li:hover,
904 aside .widget li.selected,
905 .nav-container .widget li:hover {
907 color: $font_color_darker;
908 background-color: rgba(247, 247, 247, $contentbg_transp);
909 border-left: 3px solid $link_color !important;
913 aside .widget li a:hover {
914 color: $font_color_darker;
917 /* forumlist widget */
918 aside > #datebrowse-sidebar li.posted-date-selector-months {
919 margin-bottom: 10px;;
923 aside > #datebrowse-sidebar li.posted-date-selector-months:hover {
924 border-left: none !important;
925 background-color: transparent !important;
927 aside > #datebrowse-sidebar .posted-date-selector-months > ul {
930 aside > #datebrowse-sidebar .posted-date-selector-months > ul > li{
933 aside > #datebrowse-sidebar .posted-date-selector-months > ul > li:hover{
938 -webkit-filter: grayscale(100%);
939 filter: grayscale(100%);
941 filter: alpha(opacity=50); /* For IE8 and earlier */
942 -webkit-transition: all 0.2s ease-in-out;
943 -moz-transition: all 0.2s ease-in-out;
944 -o-transition: all 0.2s ease-in-out;
945 -ms-transition: all 0.2s ease-in-out;
946 transition: all 0.2s ease-in-out;
948 #forumlist-sidbar-ul li:hover a > .forumlist-img {
949 -webkit-filter: unset;
954 /* help page widget */
955 aside > .help-aside-wrapper p strong:first-child {
959 aside > .help-aside-wrapper h1 {
963 padding: 20px 0 10px;
965 aside > .help-aside-wrapper h2 {
971 aside .vcard #profile-photo-wrapper{
974 aside .vcard img.u-photo,
975 aside img.vcard-photo {
979 aside .vcard .tool .action{
986 background: rgba(0,0,0,.50);
990 -webkit-transition: all 0.25s ease-in-out;
991 -moz-transition: all 0.25s ease-in-out;
992 -o-transition: all 0.25s ease-in-out;
993 -ms-transition: all 0.25s ease-in-out;
994 transition: all 0.25s ease-in-out;
996 aside .vcard .tool a {
997 color: rgba(255,255,255,.85);
999 aside .vcard #profile-photo-wrapper:hover .tool .action {
1002 aside .vcard #profile-photo-wrapper.crop-preview {
1005 aside .vcard .profile-header {
1006 padding: 5px 0px 20px 0px;
1010 padding: 5px 0px 5px 0px;
1012 aside .vcard .p-addr {
1015 text-overflow: ellipsis;
1016 white-space: nowrap;
1017 padding-bottom: 2px;
1019 aside .vcard .title {
1022 aside .vcard .detail {
1029 aside .vcard .icon {
1030 display: table-cell;
1031 padding-right: 10px;
1034 #profile-extra-links {
1036 margin-bottom: 10px;
1038 aside .vcard #dfrn-request-link-button,
1039 aside .vcard #wallmessage-link-botton {
1045 aside .vcard #dfrn-request-link,
1046 aside .vcard #wallmessage-link {
1049 /* vcard-short-info */
1051 #nav-short-info .contact-wrapper {
1054 white-space: nowrap;
1056 padding-right: 20px;
1059 #nav-short-info .contact-photo-wrapper.media-left {
1062 #vcard-short-photo-wrapper img,
1063 #nav-short-info .contact-wrapper img {
1069 #nav-short-info .contact-wrapper .media-body {
1073 text-overflow: ellipsis;
1075 #vcard-short-desc > .media-heading,
1076 #vcard-short-desc > .vcard-short-addr,
1077 #nav-short-info .contact-wrapper .media-heading,
1078 #nav-short-info .contact-wrapper #contact-entry-url-network {
1079 text-overflow: ellipsis;
1082 #vcard-short-desc > .media-heading,
1083 #nav-short-info .contact-wrapper .media-heading {
1087 #nav-short-info .contact-wrapper .media-heading a {
1088 color: $font_color_darker;
1089 font-size: 14px !important;
1091 #vcard-short-desc > .vcard-short-addr,
1092 #nav-short-info .contact-wrapper #contact-entry-url-network {
1096 .network-content-wrapper > #viewcontact_wrapper-network,
1097 #nav-short-info .contact-wrapper .contact-photo-overlay,
1098 #nav-short-info .contact-wrapper .contact-actions{
1102 aside #peoplefind-sidebar input,
1103 aside #follow-sidebar input {
1105 background-position: 10px 5px;
1107 aside #peoplefind-sidebar label,
1108 aside #follow-sidebar label {
1109 font-weight: normal;
1111 aside #peoplefind-sidebar .form-group-search .form-button-search,
1112 aside #follow-sidebar .form-group-search .form-button-search {
1116 div#sidebar-group-header h3 {
1120 div#sidebar-group-list {
1129 color: $font_color_darker;
1133 color: $font_color_darker;
1135 transition: all 0.1s ease-in-out;
1138 color: $font_color_darker;
1145 aside #group-sidebar .sidebar-group-li:hover .group-edit-tool.faded-icon,
1146 aside #saved-search-list .saved-search-li:hover .savedsearchdrop.faded-icon,
1147 aside .widget:hover .widget-action.faded-icon {
1149 transition: all 0.25s ease-in-out;
1151 aside #group-sidebar .sidebar-group-li .group-edit-tool.faded-icon:hover,
1152 aside #saved-search-list .saved-search-li .savedsearchdrop.faded-icon:hover,
1153 aside .widget .widget-action.faded-icon:hover {
1156 aside #group-sidebar li .group-checkbox {
1159 aside #group-sidebar li .group-edit-tool {
1160 padding-right: 10px;
1162 aside #group-sidebar li .group-edit-tool:first-child {
1166 /* contact block widget */
1167 .contact-block-content {
1172 .contact-block-div {
1174 margin: 0px 5px 5px 0px;
1176 .contact-block-link {
1179 .contact-block-img {
1185 /* Tag cloud widget */
1186 .tagblock.widget > .tag-cloud {
1191 display: none !important;
1205 .modal #jot-sections {
1206 max-height: calc(100vh - 22px);
1208 @media (min-width: 768px) {
1209 .modal #jot-sections {
1210 max-height: calc(100vh - 62px);
1213 #jot-modal #jot-sections,
1214 #jot-modal #jot-modal-body,
1215 #jot-modal #profile-jot-form,
1216 #jot-modal #profile-jot-wrapper,
1217 #jot-modal #jot-text-wrap,
1218 #jot-modal #jot-preview-content,
1219 #jot-modal #tread-wrapper--1,
1220 #jot-modal #item-Q0,
1221 #jot-modal #profile-jot-acl-wrapper,
1222 #jot-modal #acl-wrapper {
1226 flex-direction: column;
1228 #jot-modal .modal-header a, #jot-modal .modal-header .btn-link,
1229 #profile-jot-submit-wrapper a, #profile-jot-submit-wrapper .btn-link {
1230 color: $font_color_darker;
1232 #jot-modal .modal-header {
1233 border-bottom: none;
1235 #jot-modal .modal-header .compose-link {
1239 #jot-title-wrap, #jot-category-wrap {
1245 #jot-text-wrap textarea {
1247 overflow-y: auto !important;
1248 overflow-y: overlay !important;
1250 #jot-text-wrap .preview textarea {
1253 #preview_profile-jot-text,
1254 .comment-edit-form .preview {
1258 border: 2px solid #ededed;
1261 border-radius: 0 0 4px 4px;
1263 color: $font_color_darker;
1265 textarea#profile-jot-text:focus + #preview_profile-jot-text,
1266 textarea.comment-edit-text:focus + .comment-edit-form .preview {
1267 border: 2px solid #6fdbe8;
1270 .preview hr.previewseparator {
1272 border-color: #D2D2D2;
1274 #previewImgBtn_profile-jot-text,
1286 .preview button.previewActionBtn {
1292 border: 2px solid #fff;
1293 box-shadow: 0 0 3px gray;
1297 text-decoration: none;
1298 padding: 0 0 1px 1px;
1301 .preview button.previewActionBtn:hover {
1304 .preview .closePreview button.previewActionBtn {
1307 #previewInputTitle_profile-jot-text {
1310 #profile-jot-wrapper button#profile-jot-submit {
1313 #profile-jot-wrapper #character-counter {
1316 .modal .wall-item-container.preview {
1318 overflow-y: overlay;
1322 font-family: ForkAwesome;
1326 font-family: ForkAwesome;
1330 #acl-wrapper label.panel-heading {
1337 .fbrowser .breadcrumb {
1340 .fbrowser .path a:before {
1344 .fbrowser .breadcrumb > li:last-of-type a{
1346 pointer-events: none;
1349 .fbrowser .folders {
1350 box-shadow: -1.5px 0 0 0 rgba(0, 0, 0, .1) inset;
1353 .fbrowser .folders ul {
1359 max-height: calc(100vh - 210px);
1362 @media (min-width: 768px) {
1363 .fbrowser .folders ul {
1364 max-height: calc(100vh - 255px);
1367 .fbrowser .folders li {
1369 padding-right: 10px;
1371 padding-bottom: 3px;
1373 .fbrowser .folders li:hover {
1375 color: $font_color_darker;
1376 background-color: rgba(247, 247, 247, $contentbg_transp);
1377 border-left: 3px solid $link_color;
1380 .fbrowser .folders li a,
1381 .fbrowser .folders li a:hover {
1382 color: $font_color_darker;
1385 .fbrowser .folders + .list {
1388 .fbrowser .fbrowser-content-container {
1390 max-height: calc(100vh - 175px);
1392 @media (min-width: 768px) {
1393 .fbrowser .fbrowser-content-container {
1394 max-height: calc(100vh - 220px);
1397 .fbrowser.image .photo-album-image-wrapper {
1398 box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.2);
1400 .fbrowser.image .photo-album-image-wrapper .caption {
1401 pointer-events: none;
1403 .fbrowser .profile-rotator-wrapper {
1406 .fbrowser .fa-spin {
1419 background-color: rgba(255,255,255,$contentbg_transp);
1420 box-shadow: 0 0 2px #dadada;
1421 -webkit-box-shadow: 0 0 2px #dadada;
1422 -moz-box-shadow: 0 0 2px #dadada;
1426 .panel.panel-inline {
1428 margin-right: -15px;
1432 .panel .panel-body {
1433 word-wrap: break-word;
1435 .tread-wrapper .media {
1437 word-wrap: break-word;
1443 /* Thread hover effects */
1444 .desktop-view .wall-item-container .wall-item-content a,
1445 .desktop-view .wall-item-name,
1446 .desktop-view .wall-item-container .fakelink,
1447 .desktop-view .toplevel_item .fakelink,
1448 .desktop-view .toplevel_item .wall-item-container .wall-item-responses a {
1450 -webkit-transition: all 0.25s ease-in-out;
1451 -moz-transition: all 0.25s ease-in-out;
1452 -o-transition: all 0.25s ease-in-out;
1453 -ms-transition: all 0.25s ease-in-out;
1454 transition: all 0.25s ease-in-out;
1457 .toplevel_item:hover .fakelink, .wall-item-container:hover .fakelink,
1458 .toplevel_item:hover .wall-item-container:hover .wall-item-responses a,
1459 .toplevel_item:hover .wall-item-content a,
1460 .toplevel_item:hover .wall-item-name,
1461 .wall-item-container:hover .wall-item-content a,
1462 .wall-item-container:hover .wall-item-name,
1463 .wall-item-container:hover .wall-item-location a {
1465 -webkit-transition: all 0.25s ease-in-out;
1466 -moz-transition: all 0.25s ease-in-out;
1467 -o-transition: all 0.25s ease-in-out;
1468 -ms-transition: all 0.25s ease-in-out;
1469 transition: all 0.25s ease-in-out;
1473 .wall-item-container {
1474 border-top: 1px solid rgba(255, 255, 255, 0.8);
1477 .wall-item-container.panel-body {
1482 .comment-edit-preview .wall-item-container.panel-body.preview {
1485 .comment-edit-preview .panel {
1489 .wall-item-container .media {
1492 background-color: rgba(0, 0, 0, 0.03);
1495 /* wall items contact photo */
1500 /*maybe some adional stuff is needed for the different screen sizes */
1502 .contact-photo-image-wrapper {
1509 .contact-photo-overlay {
1517 background:rgba(0,0,0,.50);
1520 -webkit-transition: opacity .25s ease;
1521 -moz-transition: opacity .25s ease;
1523 .contact-photo-overlay:hover {
1526 .contact-photo-overlay-content {
1528 text-shadow: 1px 1px 1px #ccc;
1529 color:rgba(255,255,255,.85);
1531 vertical-align: bottom;
1538 .wwto .contact-photo {
1546 display: inline-block;
1549 /* wall items action dropdown menu */
1550 .media [role=heading] {
1554 /* Workaround for Firefox where the post heading covers the avatar, preventing hovercard interaction,
1555 48px is the width of the avatar image and should be adjusted accordingly if it ever changes. */
1556 .media .dropdown.pull-left + [role=heading] {
1565 .shared_header .preferences {
1569 .wall-item-network {
1573 /* wall items contact info */
1574 .media .media-body {
1577 .media .media-body h4.media-heading {
1580 color: $font_color_darker;
1582 .media .media-body .addional-info a, .media .media-body h5.media-heading > a {
1585 .media .contact-info-comment {
1586 display: table-cell;
1588 .media .contact-info-xs h5,
1589 .media .contact-info-comment {
1600 .wall-item-name.xs {
1605 /* Contact avatar click card */
1606 .userinfo.click-card {
1610 .userinfo.click-card > *:hover:after {
1615 background-color: #ffffff;
1624 border-radius: 0 0 40% 0;
1627 /* The lock symbol popup */
1631 background-color: $nav_bg;
1641 color: $nav_icon_color;
1645 /* Space between content and head */
1650 /* wall items content */
1651 .wall-item-content {
1652 word-break: break-word;
1654 .wall-item-content img {
1656 object-fit: contain;
1658 .wall-item-body > img,
1659 .wall-item-body > a > img {
1662 .wall-item-body .body-attach > a {
1663 color: $font_color_darker;
1664 display: inline-block;
1666 .wall-item-body .body-attach > a div {
1667 color: $font_color_darker;
1671 /* wall-item content elements */
1679 box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .1) inset, 0 1px 1px rgba(0, 0, 0, .05);
1681 @media screen and (max-width: 767px) {
1687 margin: 5px -10px 0;
1691 box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .15) inset, 0 1px 1px rgba(0, 0, 0, .05);
1697 margin-bottom: 10px;
1701 blockquote.shared_content {
1707 padding: 10px 10px 1px 0;
1712 .type-link img.attachment-image {
1715 .type-link blockquote, .type-video blockquote {
1719 .oembed.video .embed_video > div::before {
1720 font-family: ForkAwesome;
1721 font-weight: normal;
1723 display: inline-block;
1724 text-decoration: inherit;
1725 vertical-align: top;
1733 .oembed.video .embed_video > div {
1734 background-color: rgba(0,0,0,0.2);
1735 -webkit-transition: all 0.25s ease-in-out;
1736 -moz-transition: all 0.25s ease-in-out;
1737 -o-transition: all 0.25s ease-in-out;
1738 -ms-transition: all 0.25s ease-in-out;
1739 transition: all 0.25s ease-in-out;
1741 .oembed.video .embed_video > div:hover {
1742 background-color: rgba(0,0,0,0);
1744 .oembed.video .embed_video.active {
1747 .oembed.video .embed_video.active iframe {
1748 width: 100% !important;
1757 color: $font_color_darker;
1760 .wall-item-tags a:hover {
1761 text-decoration: none;
1763 .wall-item-bottom .label,
1764 .wall-item-bottom .label a {
1767 .wall-item-tags .category,
1768 .wall-item-tags .folder {
1772 /* item social action buttons */
1773 .wall-item-actions {
1776 justify-content: space-between;
1778 .wall-item-actions a, .wall-item-actions button {
1780 color: $font_color_darker;
1782 .wall-item-actions .active {
1786 .wall-item-actions-left {
1787 display: table-cell;
1788 vertical-align: middle;
1790 .wall-item-actions-right {
1793 .wall-item-actions .checkbox {
1797 .wall-item-actions .button-comments,
1798 .wall-item-actions .button-votes,
1799 .wall-item-actions .button-likes {
1800 text-transform: capitalize;
1802 .wall-item-actions button:hover {
1803 color: $font_color_darker;
1804 text-decoration: underline;
1806 .wall-item-actions .separator {
1810 .wall-item-responses > div > p {
1814 /* wall item hover effects */
1816 @media (min-width: 768px) {
1817 /* Tags and mentions */
1818 .wall-item-container .wall-item-bottom .wall-item-tags span.label {
1819 filter:grayscale(0.5);
1822 -webkit-transition: all 0.25s ease-in-out;
1823 -moz-transition: all 0.25s ease-in-out;
1824 -o-transition: all 0.25s ease-in-out;
1825 -ms-transition: all 0.25s ease-in-out;
1826 transition: all 0.25s ease-in-out;
1829 .wall-item-container:hover .wall-item-bottom .wall-item-tags span.label {
1830 filter:grayscale(0);
1833 -webkit-transition: all 0.25s ease-in-out;
1834 -moz-transition: all 0.25s ease-in-out;
1835 -o-transition: all 0.25s ease-in-out;
1836 -ms-transition: all 0.25s ease-in-out;
1837 transition: all 0.25s ease-in-out;
1839 /* Like/Comment/etc buttons */
1840 .wall-item-container .wall-item-links,
1841 .wall-item-container .wall-item-actions button,
1842 .wall-item-container .body-attach > a {
1845 -webkit-transition: all 0.25s ease-in-out;
1846 -moz-transition: all 0.25s ease-in-out;
1847 -o-transition: all 0.25s ease-in-out;
1848 -ms-transition: all 0.25s ease-in-out;
1849 transition: all 0.25s ease-in-out;
1851 .wall-item-container:hover .wall-item-links,
1852 .wall-item-container:hover .wall-item-actions button,
1853 .wall-item-container:hover .body-attach > a {
1856 -webkit-transition: all 0.25s ease-in-out;
1857 -moz-transition: all 0.25s ease-in-out;
1858 -o-transition: all 0.25s ease-in-out;
1859 -ms-transition: all 0.25s ease-in-out;
1860 transition: all 0.25s ease-in-out;
1862 .wall-item-container .wall-item-body .body-attach > a:hover {
1870 wall-item-comment-wrapper.well {
1873 background-color: rgba(237, 237, 237, $contentbg_transp);
1874 background-image: none;
1876 background-color: red;
1878 wall-item-comment-wrapper.well-small {
1882 wall-item-comment-wrapper.well hr {
1883 border-top: 1px solid #d9d9d9;
1885 .wall-entry wall-item-comment-wrapper.well {
1888 .comment-container {
1890 border-top-left-radius: 3px;
1891 border-top-right-radius: 3px;
1892 border-bottom-right-radius: 0px;
1893 border-bottom-left-radius: 0px;
1896 position: relative!important;
1899 .hide-comments-outer {
1900 background-color: rgba(0, 0, 0, 0.03);
1902 border-radius: 0.5em 0.5em 0 0;
1904 .hide-comments-total {
1913 .wall-item-comment-wrapper {
1915 border-top: 1px solid rgba(255, 255, 255, 0.8);
1916 background-color: rgba(0, 0, 0, 0.03);
1917 border-radius: 0 0 4px 4px;
1921 .comment-fake-form {
1922 border-color: #d9d9d9;
1924 .comment-fake-form textarea {
1928 .comment-container .wall-item-comment-wrapper {
1932 .comment-edit-form textarea {
1936 .comment-edit-submit-wrapper {
1941 .comment-icon-list {
1943 justify-content: space-between;
1946 /* acpopup + textcompletion*/
1948 background-color: #ffffff;
1952 box-shadow: 0 6px 12px rgba(0,0,0,.175);
1957 /** @todo: we schould consider the possebility to overwrite bootstrap dropdowns
1958 at the beginning of this file to get rid of the !important */
1959 .textcomplete-item > a {
1960 color: $font_color_darker !important;
1961 padding: 5px 20px !important;
1963 .textcomplete-item.active > a {
1964 background-color: rgb(247, 247, 247) !important;
1965 background-image: none !important;
1966 border-left: 3px solid $link_color;
1967 padding-left: 17px !important;
1969 .textcomplete-item a .forum {
1977 /* The wall-item thread levels */
1978 .wall-item-container.thread_level_3,
1979 .wall-item-container.thread_level_4,
1980 .wall-item-container.thread_level_5,
1981 .wall-item-container.thread_level_6,
1982 .wall-item-container.thread_level_7 {
1987 #birthday-notice, #birthday-wrapper {
1991 background-color: rgba(247,247,247,$contentbg_transp);
1992 box-shadow: 0 0 3px #dadada;
1993 -webkit-box-shadow: 0 0 3px #dadada;
1994 -moz-box-shadow: 0 0 3px #dadada;
1999 section > .tabbar-wrapper {
2000 /* The tabbar shouldn't' be visibile inside
2001 the section element. Only after we have
2002 moved it to the nav through js */
2003 display: none !important;
2012 #tabmenu .search-heading {
2014 text-overflow: ellipsis;
2015 white-space: nowrap;
2028 border-bottom: 0 solid $link_color;
2031 transition: all .15s ease;
2037 ul.tabs li:hover, ul.tabs li.active {
2038 border-bottom-width: 4px;
2040 ul.tabbar ul.tabs-extended li.active {
2042 border-bottom-width: 2px;
2044 ul.tabbar ul.tabs-extended li.active a {
2047 ul.dropdown-menu li:hover {
2048 border-bottom-width: 0;
2053 .dropdown-menu li a,
2054 .dropdown-menu li .btn-link {
2057 .dropdown-menu li > :hover,
2058 .dropdown-menu li > :visited,
2059 .dropdown-menu li > :focus {
2063 .dropdown-menu li:first-child {
2067 /* Notificaiotn badges */
2068 #mail-update-li.show {
2069 display: inline-block!important;
2073 p.wall-item-announce,
2075 .media .shared-time,
2078 .media .location a {
2080 color: $font_color_darker;
2084 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2086 border-left: 3px solid rgba(255,255,255,0);
2089 .media-list > li:hover,
2090 .media-list > li.selected,
2091 .media-list > li.active {
2092 border-left: 3px solid $link_color;
2093 background-color: rgba(247, 247, 247, $contentbg_transp);
2100 .form-control:focus {
2101 border: 2px solid $link_color;
2105 .radio label::before,
2106 .checkbox label::before {
2107 background-color: rgba(255,255,255,$contentbg_transp);
2109 .radio label::after {
2110 background-color: $link_color;
2112 .checkbox label::after {
2116 .checkbox input[type="checkbox"]:focus + label::before,
2117 .radio input[type="radio"]:focus + label::before {
2118 outline-color: $link_hover_color;
2122 color: $font_color_darker;
2125 input[type=range].form-control {
2131 .form-control.form-search {
2132 border-radius: 30px;
2133 background-image: url(img/icon_search16x16.png);
2134 background-repeat: no-repeat;
2135 background-position: 10px 8px;
2138 .form-group-search {
2143 .form-group-search .form-button-search {
2147 border-radius: 30px;
2149 .search-input.form-control.form-search {
2157 .search-content-wrapper > #search-header-wrapper {
2160 .search-content-wrapper > .section-title-wrapper {
2163 #navbar-button > #search-save {
2166 /* Section-Content-Wrapper */
2167 #search-header-wrapper {
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;
2185 section > .generic-page-wrapper, .videos-content-wrapper,
2186 .suggest-content-wrapper, .help-content-wrapper,
2187 .match-content-wrapper, .dirfind-content-wrapper,
2188 .delegation-content-wrapper, .notes-content-wrapper,
2189 .message-content-wrapper, .apps-content-wrapper,
2190 #adminpage, .delegate-content-wrapper, .uexport-content-wrapper,
2191 .dfrn_request-content-wrapper,
2192 .friendica-content-wrapper, .credits-content-wrapper, .nogroup-content-wrapper,
2193 .profperm-content-wrapper, .invite-content-wrapper, .tos-content-wrapper,
2194 .fsuggest-content-wrapper {
2195 min-height: calc(100vh - 150px);
2197 padding-bottom: 20px;
2198 margin-bottom: 20px;
2200 background-color: rgba(255,255,255,$contentbg_transp);
2203 color: $font_color_darker;
2204 box-shadow: 0 0 3px #dadada;
2205 -webkit-box-shadow: 0 0 3px #dadada;
2206 -moz-box-shadow: 0 0 3px #dadada;
2208 #content:hover .page-action.faded-icon {
2210 transition: all 0.25s ease-in-out;
2212 #content .page-action.faded-icon:hover {
2216 .section-title-wrapper {
2219 /* Home and Login Page */
2220 body.mod-home nav.navbar .nav>li>a:hover {
2221 background-color: rgba(255,255,255,0.2);
2223 body.mod-home .navbar #nav-login,
2224 body.mod-login .navbar #nav-login {
2228 #profile-content-standard,
2229 #profile-content-advanced {
2234 margin-bottom: 20px;
2236 .contact-block-div.forumlist-profile-advanced {
2241 ul.viewcontact_wrapper {
2243 margin-right: -15px;
2245 ul.viewcontact_wrapper > li {
2248 .contact-wrapper .contact-photo-wrapper button {
2251 .contact-wrapper.media {
2253 word-wrap: break-word;
2256 /* bootstrap hack for .media */
2257 .contact-wrapper.media .media-body {
2258 display: table-cell;
2263 .contact-wrapper.media:before, .media:after {
2267 .contact-wrapper.media:after {
2270 .contact-wrapper .contact-photo-image-wrapper img.contact-photo.xl {
2274 .contact-wrapper .contact-photo-image-wrapper img.contact-photo-xs {
2278 .contact-wrapper .contact-photo-overlay-content.xl {
2281 .contact-wrapper .contact-photo-menu {
2285 .contact-entry-desc {
2286 color: $font_color_darker;
2288 .contact-entry-checkbox {
2291 .contact-wrapper .media-body .contact-entry-name h4.media-heading a {
2292 font-weight: bold !important;
2294 font-size: 15px !important;
2296 .contact-wrapper .contact-actions {
2299 .contact-wrapper .contact-action-link,
2300 .contact-wrapper .contact-action-link:hover,
2301 .textcomplete-item .contact-wrapper .contact-action-link {
2303 color: $font_color_darker;
2306 .contact-wrapper .contact-action-link {
2308 transition: all 0.25s ease-in-out;
2310 ul li:hover .contact-wrapper .contact-action-link {
2312 transition: all 0.25s ease-in-out;
2314 ul li:hover .contact-wrapper .contact-action-link:hover {
2317 #contacts-search-wrapper,
2318 #directory-search-wrapper{
2321 #contact-drop-confirm .contact-actions,
2322 #contact-drop-confirm .contact-photo-overlay,
2323 #contact-drop-confirm .contact-photo-menu {
2326 #contact-drop-confirm #confirm-form {
2331 #contact-edit-actions {
2334 #contact-edit-status-wrapper {
2336 background-color: rgba(225, 245, 254, $contentbg_transp);
2339 #contact-edit-settings {
2343 /* directory page */
2344 #directory-search-heading {
2348 /* group edit page */
2351 margin-bottom: 10px;
2354 .group-actions button,
2359 .contact-group-actions .fa-times-circle { color: #D00000;}
2360 .contact-group-actions .fa-plus-circle { color: #008000;}
2362 #group-edit-wrapper {
2366 #group-edit-header {
2369 #group-update-wrapper .contact-photo-overlay {
2372 #group-update-wrapper .viewcontact_wrapper .contact-group-actions {
2377 #group-update-wrapper .viewcontact_wrapper .contact-group-link {
2382 #group-update-wrapper .viewcontact_wrapper .contact-action-link:hover {
2385 #group-update-wrapper .shortmode {
2389 #group-update-wrapper .shortmode .contact-photo {
2393 #group-update-wrapper .shortmode .media {
2396 #group-update-wrapper .shortmode .contact-entry-desc {
2397 font-size: 12px !important;
2399 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading {
2402 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading a {
2403 font-size: 13px !important;
2404 white-space: nowrap;
2406 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-rel,
2407 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-network {
2412 .message-content-wrapper > li {
2413 /* we need this overwriting because we have no template file
2414 for the general mail page /message
2416 list-style-type: none;
2419 max-height: calc(100vh - 200px);
2421 #mail-conversation {
2423 max-height: calc(100vh - 400px);
2428 .mail-conv-wrapper .media .contact-photo-wrapper img {
2432 .mail-thread #prvmail-to-label,
2433 .mail-thread #prvmail-subject-label {
2436 .mail-thread #prvmail-message-label > label {
2439 .mail-thread #prvmail-message-label textarea {
2442 .mail-conv-wrapper {
2444 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2447 height: calc(100vh - 150px);
2450 height: calc(100% - 20px);
2452 #message-preview ul {
2455 #message-preview .media-list li {
2459 #message-preview .media-list li:hover {
2460 border-left: none !important;
2462 #message-preview .media-list li a {
2465 .mail-list-outside-wrapper {
2467 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2469 .mail-list-outside-wrapper .contact-photo-wrapper img {
2476 #modal #prvmail-text-edit-bb .bb-img {
2481 #photo-album-edit-name-label {
2484 .photo-album-edit-name {
2488 .photo-album-actions {
2489 margin-bottom: 10px;
2491 .photo-album-actions .photos-order-link {
2496 .fc .fc-month-view .fc-content .fc-title .item-desc:hover {
2497 color: $link_hover_color;
2499 .fc .fc-list-item-title a {
2502 .fc .fc-list-item-title a[href]:hover {
2503 color: $link_hover_color;
2504 text-decoration: none;
2506 .event-wrapper .event-owner {
2507 margin-bottom: 15px;
2509 .event-wrapper .event-owner img {
2518 .event-wrapper .vevent {
2521 box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, .1) inset;
2523 .event-wrapper .event-buttons {
2526 #event-form-wrapper {
2529 #event-edit-form-wrapper {
2533 color: $font_color_darker;
2535 #event-edit-form-wrapper #event-edit-time {
2538 .event-buttons .plink-event-link {
2541 .vevent .event-summary {
2544 .vevent .event-description {
2547 .vevent .event-location .location {
2551 .modal-body .vevent .event-summary {
2554 #event-preview .vevent .event-summary {
2559 .event-card-details, .event-card-header {
2562 .event-card-header, .event-card-left-date {
2565 .vevent .event-card-header {
2568 .event-card-left-date {
2569 width: 60px; /* Das muss wahrscheinlich unterschiedlich sein zwischen calendar und stream */
2571 .event-card .event-date-wrapper > span {
2575 white-space: nowrap;
2577 .event-card .event-date-wrapper .event-card-short-month {
2579 text-transform: uppercase;
2581 .event-card .event-date-wrapper.medium .event-card-short-date {
2586 .event-card .event-card-content {
2588 padding: 0 5px 0 15px;
2589 box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, .1) inset;
2593 .event-card .event-card-content .event-map-btn {
2599 .event-card .event-card-title {
2601 color: $font_color_darker;
2606 .event-card .event-card-location {
2610 .event-card .event-card-location br {
2613 .event-card .event-card-location br::after {
2616 .event-card-profile-name a {
2619 .event-card-profile-name a:hover {
2620 color: $link_hover_color;
2622 .event-card .event-card-content .event-location-map {
2627 .event-card .event-card-content .event-location-map .map{
2630 .event-card .description {
2632 box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, .1) inset;
2638 .photo-next-link, .photo-prev-link {
2644 transform: translateZ(0);
2645 transition: opacity .2s;
2656 .photo-next-link > i, .photo-prev-link > i {
2657 vertical-align: super;
2659 .photo-next-link > i {
2668 #photo-photo:hover .photo-next-link,
2669 #photo-photo:hover .photo-prev-link {
2672 #photo-photo .photo-next-link:hover,
2673 #photo-photo .photo-prev-link:hover {
2677 .photo-comment-wrapper .comment {
2680 .photo-comment-wrapper .wall-item-content {
2681 color: $font_color_darker;
2684 .photo-comment-wrapper .comment-wwedit-wrapper,
2685 .photo-comment-wrapper .wall-item-outside-wrapper.media:first-child {
2690 .profile-listing-table {
2694 .profile-listing-row {
2697 .profile-listing-cell {
2698 display: table-cell;
2700 .profile-listing-photo {
2705 #profile-listing-new-link-wrapper {
2706 margin-bottom: 20px;
2709 #profile-photo-upload-section {
2713 #profile-photo-upload-close {
2718 .section-subtitle-wrapper {
2721 details.profile-jot-net[open] summary:before, .panel .section-subtitle-wrapper a.accordion-toggle:before {
2722 font-family: ForkAwesome;
2726 details.profile-jot-net summary:before, .panel .section-subtitle-wrapper a.accordion-toggle.collapsed:before {
2727 font-family: ForkAwesome;
2730 details.profile-jot-net summary:before {
2734 details.profile-jot-net[open] summary:before {
2738 #settings-nick-wrapper {
2739 margin-bottom: 20px;
2745 /* Emulates Bootstrap display */
2748 background-color: rgba(255, 255, 255, $contentbg_transp);
2751 box-shadow: 0 0 3px #dadada;
2752 -webkit-box-shadow: 0 0 3px #dadada;
2753 -moz-box-shadow: 0 0 3px #dadada;
2756 .settings-block.fakelink, .settings-block > .fakelink {
2760 .settings-block > .fakelink {
2761 margin: -10px -15px 10px -15px;
2762 border-radius: 4px 4px 0 0;
2765 .settings-block.fakelink:hover, .settings-block > .fakelink:hover {
2766 color: $link_hover_color;
2768 .settings-block.fakelink > h3, .settings-block > .fakelink > h3 {
2775 .section-subtitle-wrapper > h2 {
2778 margin-bottom: 10px;
2781 .fakelink > h3:before {
2782 padding-right: 10px;
2784 .widget.fakelink > h3:before,
2785 .settings-block.fakelink > h3:before {
2786 font-family: ForkAwesome;
2787 content: "\f0da"; /* Right Plain Pointer */
2789 .widget > .fakelink > h3:before,
2790 #sidebar-group-header > .fakelink > h3:before,
2791 .settings-block > .fakelink > h3:before {
2792 font-family: ForkAwesome;
2793 content: "\f0d7"; /* Bottom Plain Pointer */
2800 /* Intro Notifications */
2801 ul.notif-network-list {
2803 margin-right: -15px;
2805 ul.notif-network-list > li {
2807 padding-right: 15px;
2809 .intro-wrapper.media {
2811 word-wrap: break-word;
2814 .intro-photo-wrapper img.intro-photo {
2822 .intro-enty-name h4 {
2823 font-size: 15px !important;
2825 .intro-wrapper button.intro-action-link {
2827 transition: all 0.25s ease-in-out;
2829 .intro-wrapper button.intro-action-link,
2830 .intro-wrapper button.intro-action-link:hover {
2833 color: $font_color_darker;
2835 ul li:hover .intro-wrapper button.intro-action-link {
2837 transition: all 0.25s ease-in-out;
2839 ul li:hover .intro-wrapper button.intro-action-link:hover {
2842 .intro-action-buttons {
2846 transition: max-height 0.1s ease-out;
2848 ul.notif-network-list > li:hover .intro-action-buttons {
2850 transition: max-height 0.1s ease-in;
2852 .intro-desc-label, .intro-url-label, .intro-network-label,
2853 .intro-location-label, .intro-keywords-label,
2854 .intro-about-label, .intro-knowyou-label, .intro-madeby-label {
2857 .intro-contact-info.xs .intro-url-label, .intro-contact-info.xs .intro-network-label,
2858 .intro-contact-info.xs .intro-location-label,
2859 .intro-contact-info.xs .intro-keywords-label, .intro-contact-info.xs .intro-about-label,
2860 .intro-contact-info.xs .intro-knowyou-label {
2865 /* Notifications Page */
2866 ul.notif-network-list li.unseen {
2867 background-color: #e3eff3;
2869 .notif-item img.notif-image {
2874 .notif-item .notif-desc-wrapper {
2877 .notif-item .notif-desc-wrapper a {
2880 color: $font_color_darker;
2887 /* This is a little bit hacky. Since the search page is used for diferent
2888 content types we can't apply the generic-page-wrapper class.
2889 So we apply the css of the generic-page-wrapper class to the ul element with some
2890 little modifications to emulate a standard page template */
2891 .search-content-wrapper > ul.viewcontact_wrapper {
2892 min-height: calc(100vh - 150px);
2894 padding-bottom: 20px;
2896 margin-bottom: 20px;
2898 background-color: rgba(255,255,255,$contentbg_transp);
2901 color: $font_color_darker;
2902 box-shadow: 0 0 3px #dadada;
2903 -webkit-box-shadow: 0 0 3px #dadada;
2904 -moz-box-shadow: 0 0 3px #dadada;
2908 section.help-content-wrapper h1 {
2909 padding-bottom: 0.3em;
2911 border-bottom: 1px solid #ddd;
2913 section.help-content-wrapper h2 {
2914 padding-bottom: 0.3em;
2916 border-bottom: 1px solid #ddd;
2918 section.help-content-wrapper h3 {
2921 section.help-content-wrapper h4 {
2924 section.help-content-wrapper h1,
2925 section.help-content-wrapper h2,
2926 section.help-content-wrapper h3,
2927 section.help-content-wrapper h4,
2928 section.help-content-wrapper h5,
2929 section.help-content-wrapper h6 {
2931 margin-bottom: 16px;
2935 section.help-content-wrapper p {
2938 section.help-content-wrapper p,
2939 section.help-content-wrapper a,
2940 section.help-content-wrapper li {
2946 #adminpage #frio_background_image .image-select {
2949 #adminpage #frio_background_image.input-group {
2952 #admin-summary-wrapper {
2955 #adminpage ul#addonslist, li.addon {
2958 #adminpage li .icon {
2959 display: inline-block;
2960 vertical-align: text-top;
2964 #adminpage li .icon:before {
2966 display: inline-block;
2973 border: 1px solid #cccccc;
2975 background-color: $background_color;
2976 -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
2977 -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
2978 transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
2980 #adminpage li .icon.on:after {
2981 font-family: "ForkAwesome";
2983 display: inline-block;
2996 #adminpage .addon .desc {
2999 #admin-users #users tr.blocked {
3000 background-color: #f8efc0;
3002 .adminpage .table-hover > tbody > tr:hover + tr.details {
3003 background-color: #f5f5f5;
3005 .offset-anchor::before {
3011 pointer-events: none;
3019 #identity-selector-wrapper {
3024 #identity-selector-wrapper .identity-match-photo {
3028 #identity-selector-wrapper .identity-match-photo button {
3031 #identity-selector-wrapper .identity-match-photo .badge {
3036 #identity-selector-wrapper .identity-match-name {
3039 #identity-selector-wrapper .identity-match-details {
3045 #register-openid-wrapper, #register-name-wrapper, #register-invite-wrapper, #profile-publish-wrapper {
3048 #register-openid-end, #register-nickname-end
3054 * Overwriting for transparency and other colors
3056 main .nav-tabs>li.active>a,
3057 main .nav-tabs>li.active>a:focus,
3058 main .nav-tabs>li.active>a:hover {
3059 background-color: rgba(255,255,255,$contentbg_transp);
3069 @media (min-width: 768px) {
3076 * Framework overwrite
3079 /* textcomplete for contact filtering*/
3080 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list {
3081 position: relative !important;
3082 top: inherit !important;
3083 bottom: inherit !important;
3084 left: inherit !important;
3087 margin-right: -15px;
3088 background-color: transparent;
3092 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li {
3094 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
3096 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li:first-child {
3099 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list
3100 .textcomplete-item > a {
3101 padding: 0 !important;
3103 background-color: transparent !important;
3105 /* this is a little hack for texcomplete contact filter
3106 There are for some reasons empty <a> tags. I don't know why */
3107 .textcomplete-item .contact-wrapper a {
3112 body .tread-wrapper .hovercard a,
3113 body .tread-wrapper .hovercard a:hover {
3116 body .tread-wrapper .hovercard:hover .hover-card-content a {
3117 color: $link_color !important;
3120 /* Pagination improvements */
3125 .pagination > li > a,
3126 .pagination > li > span {
3130 .pagination>li>a:hover,
3131 .pagination>li>span:hover {
3132 color: $link_hover_color;
3134 .pagination > .active > a,
3135 .pagination > .active > a:focus,
3136 .pagination > .active > a:hover,
3137 .pagination > .active > span,
3138 .pagination > .active > span:focus,
3139 .pagination > .active > span:hover {
3140 background-color: $link_color;
3141 border-color: $link_color;
3144 .pagination li.pager_n a {
3148 .pagination .pager_prev a {
3151 border-top-right-radius: 3px;
3152 border-bottom-right-radius: 3px;
3154 .pagination .pager_next a {
3157 border-top-left-radius: 3px;
3158 border-bottom-left-radius: 3px;
3161 .pager .previous > a {
3165 .pagination .disabled > a,
3166 .pager .disabled > a {
3172 background-color: rgba(255, 255, 255, $contentbg_transp);
3176 * some temporary workarounds until this will solved
3177 * elsewhere (e.g. new templates)
3179 section .profile-match-wrapper {
3186 #login-submit-wrapper {
3189 #lost-password-link { flex-grow: 2; }
3190 #login-lost-password-link {
3191 margin-bottom: 10px;
3197 #id_password_wrapper {
3198 margin-bottom: unset;
3205 background: #8ad0a1;
3212 .mod-home.is-not-singleuser,
3214 background-color: $login_bg_color;
3215 background-image: linear-gradient(to right, rgba(0,0,0, 0.7) , rgba(0,0,0, 0.4)), url($login_bg_image);
3216 background-size: cover;
3217 background-attachment: fixed;
3218 background-position: center;
3221 .mod-home.is-not-singleuser nav.navbar,
3222 .mod-login nav.navbar { background-color: transparent }
3223 .mod-home.is-not-singleuser #topbar-second,
3224 .mod-login #topbar-second {
3225 background-color: transparent;
3229 .mod-home.is-not-singleuser .login-content,
3230 .mod-login .login-content {
3235 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3239 .mod-home.is-not-singleuser .login-form > #login-form label,
3240 .mod-login #content #login-form label {
3244 .mod-home.is-not-singleuser .login-panel-content,
3245 .mod-login .login-panel-content {
3246 background-color: rgba(255,255,255,.85);
3250 background: $nav_bg !important;
3251 color: $btn_primary_color !important;
3254 -webkit-box-shadow: none;
3256 -moz-box-shadow: none;
3257 background-image: none;
3265 width: 100% !important;
3268 .qq-upload-drop-area {
3269 background: white !important;
3272 -webkit-box-shadow: none;
3274 -moz-box-shadow: none;
3275 background-image: none;
3283 width: 100% !important;
3284 display: block !important;
3285 position: relative !important;
3286 border: black 1px dashed !important;
3287 margin-bottom: 5px !important;
3288 margin-top: 15px !important;
3292 * The different views of js fullcalendar
3296 margin-bottom: 10px;
3300 #event-calendar-title {
3301 display: inline-block;
3311 #fc-header-right .dropdown > button {
3314 #event-calendar-title {
3315 vertical-align: middle;
3317 #event-calendar-views {
3324 .fc .fc-month-view td.fc-widget-content,
3326 .fc .fc-list-view .fc-list-table td,
3330 .fc td.fc-widget-header,
3331 .fc th.fc-widget-header {
3336 .fc .fc-month-view td.fc-day {
3339 border-bottom: 1px solid;
3342 .fc .fc-day-grid-container .fc-row {
3343 border-bottom: 1px solid;
3346 .fc tr td.fc-today {
3349 .fc .fc-month-view .fc-content .fc-title .item-desc {
3352 .fc .fc-view-container {
3355 .fc .fc-list-view td {
3358 #events-calendar.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
3363 background-color: #E3F2FD;
3364 border: 1px solid #BBDEFB;
3365 color: $font_color_darker;
3367 .fc .fc-month-view .fc-time,
3368 .fc .fc-listMonth-view .fc-list-item-time,
3369 .fc .fc-listMonth-view .fc-list-item-marker,
3370 .fc .fc-listMonth-view .fc-widget-header {
3373 .fc .fc-listMonth-view .fc-list-item:hover td {
3374 background: transparent;
3377 .fc .fc-listMonth-view .seperator {
3388 .event-card .event-label,
3389 .event-card .location-label {
3392 .popover.event-card .event-card-basic-content {
3397 .event-card .event-hover-location .location {
3402 /* Medium devices (desktops, 992px and up) */
3403 @media (min-width: 992px) {
3404 .mod-home.is-not-singleuser #content,
3405 .mod-login #content {
3406 margin-top: 100px!important;
3409 .mod-home.is-not-singleuser .login-form > #login-form,
3410 .mod-home.is-not-singleuser .login-form > #login-extra-links,
3411 .mod-login #content #login-form {
3412 background-color: #fff;
3416 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3418 background-color: white;
3421 .mod-home.is-not-singleuser .login-form > #login-form label,
3422 .mod-login #content #login-form label {
3426 .mod-home.is-not-singleuser .login-form::before,
3427 .mod-login #content #login-form::before {
3431 background-color: rgba(255,255,255,0.1);
3439 .mod-home.is-not-singleuser .login-form::after,
3440 .mod-login #content #login-form::after {
3444 background-color: rgba(255,255,255,0.2);
3453 /* Mobile display */
3454 @media (max-width: 600px) {
3462 #friendica-logo-mask {
3476 .panel .panel-body {
3480 .toplevel_item > .wall-item-container {
3488 .wall-item-actions {
3496 .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 {
3505 .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 {
3509 .wwto .contact-photo {
3517 Prevent automatic zoom on input focus on iOS
3518 see https://stackoverflow.com/a/16255670
3524 .wall-item-container.thread_level_3,
3525 .wall-item-container.thread_level_4,
3526 .wall-item-container.thread_level_5,
3527 .wall-item-container.thread_level_6,
3528 .wall-item-container.thread_level_7 {