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 .wall-item-container .wall-item-links,
1792 .wall-item-container .wall-item-actions button,
1793 .wall-item-container .body-attach > a {
1795 -webkit-transition: all 0.25s ease-in-out;
1796 -moz-transition: all 0.25s ease-in-out;
1797 -o-transition: all 0.25s ease-in-out;
1798 -ms-transition: all 0.25s ease-in-out;
1799 transition: all 0.25s ease-in-out;
1801 .wall-item-container:hover .wall-item-links,
1802 .wall-item-container:hover .wall-item-actions button,
1803 .wall-item-container:hover .body-attach > a {
1805 -webkit-transition: all 0.25s ease-in-out;
1806 -moz-transition: all 0.25s ease-in-out;
1807 -o-transition: all 0.25s ease-in-out;
1808 -ms-transition: all 0.25s ease-in-out;
1809 transition: all 0.25s ease-in-out;
1811 .wall-item-container .wall-item-body .body-attach > a:hover {
1819 wall-item-comment-wrapper.well {
1822 background-color: rgba(237, 237, 237, $contentbg_transp);
1823 background-image: none;
1826 wall-item-comment-wrapper.well-small {
1830 wall-item-comment-wrapper.well hr {
1831 border-top: 1px solid #d9d9d9;
1833 .wall-entry wall-item-comment-wrapper.well {
1836 .comment-container {
1838 border-top-left-radius: 3px;
1839 border-top-right-radius: 3px;
1840 border-bottom-right-radius: 0px;
1841 border-bottom-left-radius: 0px;
1844 position: relative!important;
1847 .hide-comments-outer {
1848 background-color: rgba(0, 0, 0, 0.03);
1850 border-radius: 0.5em 0.5em 0 0;
1852 .hide-comments-total {
1861 .wall-item-comment-wrapper {
1863 border-top: 1px solid rgba(255, 255, 255, 0.8);
1864 background-color: rgba(0, 0, 0, 0.03);
1865 border-radius: 0 0 4px 4px;
1869 .comment-fake-form {
1870 border-color: #d9d9d9;
1872 .comment-fake-form textarea {
1876 .comment-container .wall-item-comment-wrapper {
1880 .comment-edit-form textarea {
1884 .comment-edit-submit-wrapper {
1888 .comment-icon-list {
1890 justify-content: space-between;
1893 /* acpopup + textcompletion*/
1895 background-color: #ffffff;
1899 box-shadow: 0 6px 12px rgba(0,0,0,.175);
1904 /** @todo: we schould consider the possebility to overwrite bootstrap dropdowns
1905 at the beginning of this file to get rid of the !important */
1906 .textcomplete-item > a {
1907 color: $font_color_darker !important;
1908 padding: 5px 20px !important;
1910 .textcomplete-item.active > a {
1911 background-color: rgb(247, 247, 247) !important;
1912 background-image: none !important;
1913 border-left: 3px solid $link_color;
1914 padding-left: 17px !important;
1916 .textcomplete-item a .forum {
1924 /* The wall-item thread levels */
1925 .wall-item-container.thread_level_3,
1926 .wall-item-container.thread_level_4,
1927 .wall-item-container.thread_level_5,
1928 .wall-item-container.thread_level_6,
1929 .wall-item-container.thread_level_7 {
1934 #birthday-notice, #birthday-wrapper {
1938 background-color: rgba(247,247,247,$contentbg_transp);
1939 box-shadow: 0 0 3px #dadada;
1940 -webkit-box-shadow: 0 0 3px #dadada;
1941 -moz-box-shadow: 0 0 3px #dadada;
1946 section > .tabbar-wrapper {
1947 /* The tabbar shouldn't' be visibile inside
1948 the section element. Only after we have
1949 moved it to the nav through js */
1950 display: none !important;
1959 #tabmenu .search-heading {
1961 text-overflow: ellipsis;
1962 white-space: nowrap;
1975 border-bottom: 0 solid $link_color;
1978 transition: all .15s ease;
1984 ul.tabs li:hover, ul.tabs li.active {
1985 border-bottom-width: 4px;
1987 ul.tabbar ul.tabs-extended li.active {
1989 border-bottom-width: 2px;
1991 ul.tabbar ul.tabs-extended li.active a {
1994 ul.dropdown-menu li:hover {
1995 border-bottom-width: 0;
2000 .dropdown-menu li a,
2001 .dropdown-menu li .btn-link {
2004 .dropdown-menu li > :hover,
2005 .dropdown-menu li > :visited,
2006 .dropdown-menu li > :focus {
2010 .dropdown-menu li:first-child {
2014 /* Notificaiotn badges */
2015 #mail-update-li.show {
2016 display: inline-block!important;
2020 p.wall-item-announce,
2022 .media .shared-time,
2025 .media .location a {
2027 color: $font_color_darker;
2031 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2033 border-left: 3px solid rgba(255,255,255,0);
2036 .media-list > li:hover,
2037 .media-list > li.selected,
2038 .media-list > li.active {
2039 border-left: 3px solid $link_color;
2040 background-color: rgba(247, 247, 247, $contentbg_transp);
2047 .form-control:focus {
2048 border: 2px solid $link_color;
2052 .radio label::before,
2053 .checkbox label::before {
2054 background-color: rgba(255,255,255,$contentbg_transp);
2056 .radio label::after {
2057 background-color: $link_color;
2059 .checkbox label::after {
2063 .checkbox input[type="checkbox"]:focus + label::before,
2064 .radio input[type="radio"]:focus + label::before {
2065 outline-color: $link_hover_color;
2069 color: $font_color_darker;
2072 input[type=range].form-control {
2078 .form-control.form-search {
2079 border-radius: 30px;
2080 background-image: url(img/icon_search16x16.png);
2081 background-repeat: no-repeat;
2082 background-position: 10px 8px;
2085 .form-group-search {
2090 .form-group-search .form-button-search {
2094 border-radius: 30px;
2096 .search-input.form-control.form-search {
2104 .search-content-wrapper > #search-header-wrapper {
2107 .search-content-wrapper > .section-title-wrapper {
2110 #navbar-button > #search-save {
2113 /* Section-Content-Wrapper */
2114 #search-header-wrapper {
2116 padding-bottom: 20px;
2117 margin-bottom: 20px;
2119 background-color: rgba(255,255,255,$contentbg_transp);
2122 color: $font_color_darker;
2123 box-shadow: 0 0 3px #dadada;
2124 -webkit-box-shadow: 0 0 3px #dadada;
2125 -moz-box-shadow: 0 0 3px #dadada;
2132 section > .generic-page-wrapper, .videos-content-wrapper,
2133 .suggest-content-wrapper, .help-content-wrapper,
2134 .match-content-wrapper, .dirfind-content-wrapper,
2135 .delegation-content-wrapper, .notes-content-wrapper,
2136 .message-content-wrapper, .apps-content-wrapper,
2137 #adminpage, .delegate-content-wrapper, .uexport-content-wrapper,
2138 .dfrn_request-content-wrapper,
2139 .friendica-content-wrapper, .credits-content-wrapper, .nogroup-content-wrapper,
2140 .profperm-content-wrapper, .invite-content-wrapper, .tos-content-wrapper,
2141 .fsuggest-content-wrapper {
2142 min-height: calc(100vh - 150px);
2144 padding-bottom: 20px;
2145 margin-bottom: 20px;
2147 background-color: rgba(255,255,255,$contentbg_transp);
2150 color: $font_color_darker;
2151 box-shadow: 0 0 3px #dadada;
2152 -webkit-box-shadow: 0 0 3px #dadada;
2153 -moz-box-shadow: 0 0 3px #dadada;
2155 #content:hover .page-action.faded-icon {
2157 transition: all 0.25s ease-in-out;
2159 #content .page-action.faded-icon:hover {
2163 .section-title-wrapper {
2166 /* Home and Login Page */
2167 body.mod-home nav.navbar .nav>li>a:hover {
2168 background-color: rgba(255,255,255,0.2);
2170 body.mod-home .navbar #nav-login,
2171 body.mod-login .navbar #nav-login {
2175 #profile-content-standard,
2176 #profile-content-advanced {
2181 margin-bottom: 20px;
2183 .contact-block-div.forumlist-profile-advanced {
2188 ul.viewcontact_wrapper {
2190 margin-right: -15px;
2192 ul.viewcontact_wrapper > li {
2195 .contact-wrapper .contact-photo-wrapper button {
2198 .contact-wrapper.media {
2200 word-wrap: break-word;
2203 /* bootstrap hack for .media */
2204 .contact-wrapper.media .media-body {
2205 display: table-cell;
2210 .contact-wrapper.media:before, .media:after {
2214 .contact-wrapper.media:after {
2217 .contact-wrapper .contact-photo-image-wrapper img.contact-photo.xl {
2221 .contact-wrapper .contact-photo-image-wrapper img.contact-photo-xs {
2225 .contact-wrapper .contact-photo-overlay-content.xl {
2228 .contact-wrapper .contact-photo-menu {
2232 .contact-entry-desc {
2233 color: $font_color_darker;
2235 .contact-entry-checkbox {
2238 .contact-wrapper .media-body .contact-entry-name h4.media-heading a {
2239 font-weight: bold !important;
2241 font-size: 15px !important;
2243 .contact-wrapper .contact-actions {
2246 .contact-wrapper .contact-action-link,
2247 .contact-wrapper .contact-action-link:hover,
2248 .textcomplete-item .contact-wrapper .contact-action-link {
2250 color: $font_color_darker;
2253 .contact-wrapper .contact-action-link {
2255 transition: all 0.25s ease-in-out;
2257 ul li:hover .contact-wrapper .contact-action-link {
2259 transition: all 0.25s ease-in-out;
2261 ul li:hover .contact-wrapper .contact-action-link:hover {
2264 #contacts-search-wrapper,
2265 #directory-search-wrapper{
2268 #contact-drop-confirm .contact-actions,
2269 #contact-drop-confirm .contact-photo-overlay,
2270 #contact-drop-confirm .contact-photo-menu {
2273 #contact-drop-confirm #confirm-form {
2278 #contact-edit-actions {
2281 #contact-edit-status-wrapper {
2283 background-color: rgba(225, 245, 254, $contentbg_transp);
2286 #contact-edit-settings {
2290 /* directory page */
2291 #directory-search-heading {
2295 /* group edit page */
2298 margin-bottom: 10px;
2301 .group-actions button,
2306 .contact-group-actions .fa-times-circle { color: #D00000;}
2307 .contact-group-actions .fa-plus-circle { color: #008000;}
2309 #group-edit-wrapper {
2313 #group-edit-header {
2316 #group-update-wrapper .contact-photo-overlay {
2319 #group-update-wrapper .viewcontact_wrapper .contact-group-actions {
2324 #group-update-wrapper .viewcontact_wrapper .contact-group-link {
2329 #group-update-wrapper .viewcontact_wrapper .contact-action-link:hover {
2332 #group-update-wrapper .shortmode {
2336 #group-update-wrapper .shortmode .contact-photo {
2340 #group-update-wrapper .shortmode .media {
2343 #group-update-wrapper .shortmode .contact-entry-desc {
2344 font-size: 12px !important;
2346 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading {
2349 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading a {
2350 font-size: 13px !important;
2351 white-space: nowrap;
2353 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-rel,
2354 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-network {
2359 .message-content-wrapper > li {
2360 /* we need this overwriting because we have no template file
2361 for the general mail page /message
2363 list-style-type: none;
2366 max-height: calc(100vh - 200px);
2368 #mail-conversation {
2370 max-height: calc(100vh - 400px);
2375 .mail-conv-wrapper .media .contact-photo-wrapper img {
2379 .mail-thread #prvmail-to-label,
2380 .mail-thread #prvmail-subject-label {
2383 .mail-thread #prvmail-message-label > label {
2386 .mail-thread #prvmail-message-label textarea {
2389 .mail-conv-wrapper {
2391 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2394 height: calc(100vh - 150px);
2397 height: calc(100% - 20px);
2399 #message-preview ul {
2402 #message-preview .media-list li {
2406 #message-preview .media-list li:hover {
2407 border-left: none !important;
2409 #message-preview .media-list li a {
2412 .mail-list-outside-wrapper {
2414 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2416 .mail-list-outside-wrapper .contact-photo-wrapper img {
2423 #modal #prvmail-text-edit-bb .bb-img {
2428 #photo-album-edit-name-label {
2431 .photo-album-edit-name {
2435 .photo-album-actions {
2436 margin-bottom: 10px;
2438 .photo-album-actions .photos-order-link {
2443 .fc .fc-month-view .fc-content .fc-title .item-desc:hover {
2444 color: $link_hover_color;
2446 .fc .fc-list-item-title a {
2449 .fc .fc-list-item-title a[href]:hover {
2450 color: $link_hover_color;
2451 text-decoration: none;
2453 .event-wrapper .event-owner {
2454 margin-bottom: 15px;
2456 .event-wrapper .event-owner img {
2465 .event-wrapper .vevent {
2468 box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, .1) inset;
2470 .event-wrapper .event-buttons {
2473 #event-form-wrapper {
2476 #event-edit-form-wrapper {
2480 color: $font_color_darker;
2482 #event-edit-form-wrapper #event-edit-time {
2485 .event-buttons .plink-event-link {
2488 .vevent .event-summary {
2491 .vevent .event-description {
2494 .vevent .event-location .location {
2498 .modal-body .vevent .event-summary {
2501 #event-preview .vevent .event-summary {
2506 .event-card-details, .event-card-header {
2509 .event-card-header, .event-card-left-date {
2512 .vevent .event-card-header {
2515 .event-card-left-date {
2516 width: 60px; /* Das muss wahrscheinlich unterschiedlich sein zwischen calendar und stream */
2518 .event-card .event-date-wrapper > span {
2522 white-space: nowrap;
2524 .event-card .event-date-wrapper .event-card-short-month {
2526 text-transform: uppercase;
2528 .event-card .event-date-wrapper.medium .event-card-short-date {
2533 .event-card .event-card-content {
2535 padding: 0 5px 0 15px;
2536 box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, .1) inset;
2540 .event-card .event-card-content .event-map-btn {
2546 .event-card .event-card-title {
2548 color: $font_color_darker;
2553 .event-card .event-card-location {
2557 .event-card .event-card-location br {
2560 .event-card .event-card-location br::after {
2563 .event-card-profile-name a {
2566 .event-card-profile-name a:hover {
2567 color: $link_hover_color;
2569 .event-card .event-card-content .event-location-map {
2574 .event-card .event-card-content .event-location-map .map{
2577 .event-card .description {
2579 box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, .1) inset;
2585 .photo-next-link, .photo-prev-link {
2591 transform: translateZ(0);
2592 transition: opacity .2s;
2603 .photo-next-link > i, .photo-prev-link > i {
2604 vertical-align: super;
2606 .photo-next-link > i {
2615 #photo-photo:hover .photo-next-link,
2616 #photo-photo:hover .photo-prev-link {
2619 #photo-photo .photo-next-link:hover,
2620 #photo-photo .photo-prev-link:hover {
2624 .photo-comment-wrapper .comment {
2627 .photo-comment-wrapper .wall-item-content {
2628 color: $font_color_darker;
2631 .photo-comment-wrapper .comment-wwedit-wrapper,
2632 .photo-comment-wrapper .wall-item-outside-wrapper.media:first-child {
2637 .profile-listing-table {
2641 .profile-listing-row {
2644 .profile-listing-cell {
2645 display: table-cell;
2647 .profile-listing-photo {
2652 #profile-listing-new-link-wrapper {
2653 margin-bottom: 20px;
2656 #profile-photo-upload-section {
2660 #profile-photo-upload-close {
2665 .section-subtitle-wrapper {
2668 details.profile-jot-net[open] summary:before, .panel .section-subtitle-wrapper a.accordion-toggle:before {
2669 font-family: ForkAwesome;
2673 details.profile-jot-net summary:before, .panel .section-subtitle-wrapper a.accordion-toggle.collapsed:before {
2674 font-family: ForkAwesome;
2677 details.profile-jot-net summary:before {
2681 details.profile-jot-net[open] summary:before {
2685 #settings-nick-wrapper {
2686 margin-bottom: 20px;
2692 /* Emulates Bootstrap display */
2695 background-color: rgba(255, 255, 255, $contentbg_transp);
2698 box-shadow: 0 0 3px #dadada;
2699 -webkit-box-shadow: 0 0 3px #dadada;
2700 -moz-box-shadow: 0 0 3px #dadada;
2703 .settings-block.fakelink, .settings-block > .fakelink {
2707 .settings-block > .fakelink {
2708 margin: -10px -15px 10px -15px;
2709 border-radius: 4px 4px 0 0;
2712 .settings-block.fakelink:hover, .settings-block > .fakelink:hover {
2713 color: $link_hover_color;
2715 .settings-block.fakelink > h3, .settings-block > .fakelink > h3 {
2722 .section-subtitle-wrapper > h2 {
2725 margin-bottom: 10px;
2728 .fakelink > h3:before {
2729 padding-right: 10px;
2731 .widget.fakelink > h3:before,
2732 .settings-block.fakelink > h3:before {
2733 font-family: ForkAwesome;
2734 content: "\f0da"; /* Right Plain Pointer */
2736 .widget > .fakelink > h3:before,
2737 #sidebar-group-header > .fakelink > h3:before,
2738 .settings-block > .fakelink > h3:before {
2739 font-family: ForkAwesome;
2740 content: "\f0d7"; /* Bottom Plain Pointer */
2747 /* Intro Notifications */
2748 ul.notif-network-list {
2750 margin-right: -15px;
2752 ul.notif-network-list > li {
2754 padding-right: 15px;
2756 .intro-wrapper.media {
2758 word-wrap: break-word;
2761 .intro-photo-wrapper img.intro-photo {
2769 .intro-enty-name h4 {
2770 font-size: 15px !important;
2772 .intro-wrapper button.intro-action-link {
2774 transition: all 0.25s ease-in-out;
2776 .intro-wrapper button.intro-action-link,
2777 .intro-wrapper button.intro-action-link:hover {
2780 color: $font_color_darker;
2782 ul li:hover .intro-wrapper button.intro-action-link {
2784 transition: all 0.25s ease-in-out;
2786 ul li:hover .intro-wrapper button.intro-action-link:hover {
2789 .intro-action-buttons {
2793 transition: max-height 0.1s ease-out;
2795 ul.notif-network-list > li:hover .intro-action-buttons {
2797 transition: max-height 0.1s ease-in;
2799 .intro-desc-label, .intro-url-label, .intro-network-label,
2800 .intro-location-label, .intro-keywords-label,
2801 .intro-about-label, .intro-knowyou-label, .intro-madeby-label {
2804 .intro-contact-info.xs .intro-url-label, .intro-contact-info.xs .intro-network-label,
2805 .intro-contact-info.xs .intro-location-label,
2806 .intro-contact-info.xs .intro-keywords-label, .intro-contact-info.xs .intro-about-label,
2807 .intro-contact-info.xs .intro-knowyou-label {
2812 /* Notifications Page */
2813 ul.notif-network-list li.unseen {
2814 background-color: #e3eff3;
2816 .notif-item img.notif-image {
2821 .notif-item .notif-desc-wrapper {
2824 .notif-item .notif-desc-wrapper a {
2827 color: $font_color_darker;
2834 /* This is a little bit hacky. Since the search page is used for diferent
2835 content types we can't apply the generic-page-wrapper class.
2836 So we apply the css of the generic-page-wrapper class to the ul element with some
2837 little modifications to emulate a standard page template */
2838 .search-content-wrapper > ul.viewcontact_wrapper {
2839 min-height: calc(100vh - 150px);
2841 padding-bottom: 20px;
2843 margin-bottom: 20px;
2845 background-color: rgba(255,255,255,$contentbg_transp);
2848 color: $font_color_darker;
2849 box-shadow: 0 0 3px #dadada;
2850 -webkit-box-shadow: 0 0 3px #dadada;
2851 -moz-box-shadow: 0 0 3px #dadada;
2855 section.help-content-wrapper h1 {
2856 padding-bottom: 0.3em;
2858 border-bottom: 1px solid #ddd;
2860 section.help-content-wrapper h2 {
2861 padding-bottom: 0.3em;
2863 border-bottom: 1px solid #ddd;
2865 section.help-content-wrapper h3 {
2868 section.help-content-wrapper h4 {
2871 section.help-content-wrapper h1,
2872 section.help-content-wrapper h2,
2873 section.help-content-wrapper h3,
2874 section.help-content-wrapper h4,
2875 section.help-content-wrapper h5,
2876 section.help-content-wrapper h6 {
2878 margin-bottom: 16px;
2882 section.help-content-wrapper p {
2885 section.help-content-wrapper p,
2886 section.help-content-wrapper a,
2887 section.help-content-wrapper li {
2893 #adminpage #frio_background_image .image-select {
2896 #adminpage #frio_background_image.input-group {
2899 #admin-summary-wrapper {
2902 #adminpage ul#addonslist, li.addon {
2905 #adminpage li .icon {
2906 display: inline-block;
2907 vertical-align: text-top;
2911 #adminpage li .icon:before {
2913 display: inline-block;
2920 border: 1px solid #cccccc;
2922 background-color: $background_color;
2923 -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
2924 -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
2925 transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
2927 #adminpage li .icon.on:after {
2928 font-family: "ForkAwesome";
2930 display: inline-block;
2943 #adminpage .addon .desc {
2946 #admin-users #users tr.blocked {
2947 background-color: #f8efc0;
2949 .adminpage .table-hover > tbody > tr:hover + tr.details {
2950 background-color: #f5f5f5;
2952 .offset-anchor::before {
2958 pointer-events: none;
2966 #identity-selector-wrapper {
2971 #identity-selector-wrapper .identity-match-photo {
2975 #identity-selector-wrapper .identity-match-photo button {
2978 #identity-selector-wrapper .identity-match-photo .badge {
2983 #identity-selector-wrapper .identity-match-name {
2986 #identity-selector-wrapper .identity-match-details {
2992 #register-openid-wrapper, #register-name-wrapper, #register-invite-wrapper, #profile-publish-wrapper {
2995 #register-openid-end, #register-nickname-end
3001 * Overwriting for transparency and other colors
3003 main .nav-tabs>li.active>a,
3004 main .nav-tabs>li.active>a:focus,
3005 main .nav-tabs>li.active>a:hover {
3006 background-color: rgba(255,255,255,$contentbg_transp);
3016 @media (min-width: 768px) {
3023 * Framework overwrite
3026 /* textcomplete for contact filtering*/
3027 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list {
3028 position: relative !important;
3029 top: inherit !important;
3030 bottom: inherit !important;
3031 left: inherit !important;
3034 margin-right: -15px;
3035 background-color: transparent;
3039 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li {
3041 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
3043 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li:first-child {
3046 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list
3047 .textcomplete-item > a {
3048 padding: 0 !important;
3050 background-color: transparent !important;
3052 /* this is a little hack for texcomplete contact filter
3053 There are for some reasons empty <a> tags. I don't know why */
3054 .textcomplete-item .contact-wrapper a {
3059 body .tread-wrapper .hovercard a,
3060 body .tread-wrapper .hovercard a:hover {
3063 body .tread-wrapper .hovercard:hover .hover-card-content a {
3064 color: $link_color !important;
3067 /* Pagination improvements */
3072 .pagination > li > a,
3073 .pagination > li > span {
3077 .pagination>li>a:hover,
3078 .pagination>li>span:hover {
3079 color: $link_hover_color;
3081 .pagination > .active > a,
3082 .pagination > .active > a:focus,
3083 .pagination > .active > a:hover,
3084 .pagination > .active > span,
3085 .pagination > .active > span:focus,
3086 .pagination > .active > span:hover {
3087 background-color: $link_color;
3088 border-color: $link_color;
3091 .pagination li.pager_n a {
3095 .pagination .pager_prev a {
3098 border-top-right-radius: 3px;
3099 border-bottom-right-radius: 3px;
3101 .pagination .pager_next a {
3104 border-top-left-radius: 3px;
3105 border-bottom-left-radius: 3px;
3108 .pager .previous > a {
3112 .pagination .disabled > a,
3113 .pager .disabled > a {
3119 background-color: rgba(255, 255, 255, $contentbg_transp);
3123 * some temporary workarounds until this will solved
3124 * elsewhere (e.g. new templates)
3126 section .profile-match-wrapper {
3133 #login-submit-wrapper {
3136 #lost-password-link { flex-grow: 2; }
3137 #login-lost-password-link {
3138 margin-bottom: 10px;
3144 #id_password_wrapper {
3145 margin-bottom: unset;
3152 background: #8ad0a1;
3159 .mod-home.is-not-singleuser,
3161 background-color: $login_bg_color;
3162 background-image: linear-gradient(to right, rgba(0,0,0, 0.7) , rgba(0,0,0, 0.4)), url($login_bg_image);
3163 background-size: cover;
3164 background-attachment: fixed;
3165 background-position: center;
3168 .mod-home.is-not-singleuser nav.navbar,
3169 .mod-login nav.navbar { background-color: transparent }
3170 .mod-home.is-not-singleuser #topbar-second,
3171 .mod-login #topbar-second {
3172 background-color: transparent;
3176 .mod-home.is-not-singleuser .login-content,
3177 .mod-login .login-content {
3182 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3186 .mod-home.is-not-singleuser .login-form > #login-form label,
3187 .mod-login #content #login-form label {
3191 .mod-home.is-not-singleuser .login-panel-content,
3192 .mod-login .login-panel-content {
3193 background-color: rgba(255,255,255,.85);
3197 background: $nav_bg !important;
3198 color: $btn_primary_color !important;
3201 -webkit-box-shadow: none;
3203 -moz-box-shadow: none;
3204 background-image: none;
3212 width: 100% !important;
3215 .qq-upload-drop-area {
3216 background: white !important;
3219 -webkit-box-shadow: none;
3221 -moz-box-shadow: none;
3222 background-image: none;
3230 width: 100% !important;
3231 display: block !important;
3232 position: relative !important;
3233 border: black 1px dashed !important;
3234 margin-bottom: 5px !important;
3235 margin-top: 15px !important;
3239 * The different views of js fullcalendar
3243 margin-bottom: 10px;
3247 #event-calendar-title {
3248 display: inline-block;
3258 #fc-header-right .dropdown > button {
3261 #event-calendar-title {
3262 vertical-align: middle;
3264 #event-calendar-views {
3271 .fc .fc-month-view td.fc-widget-content,
3273 .fc .fc-list-view .fc-list-table td,
3277 .fc td.fc-widget-header,
3278 .fc th.fc-widget-header {
3283 .fc .fc-month-view td.fc-day {
3286 border-bottom: 1px solid;
3289 .fc .fc-day-grid-container .fc-row {
3290 border-bottom: 1px solid;
3293 .fc tr td.fc-today {
3296 .fc .fc-month-view .fc-content .fc-title .item-desc {
3299 .fc .fc-view-container {
3302 .fc .fc-list-view td {
3305 #events-calendar.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
3310 background-color: #E3F2FD;
3311 border: 1px solid #BBDEFB;
3312 color: $font_color_darker;
3314 .fc .fc-month-view .fc-time,
3315 .fc .fc-listMonth-view .fc-list-item-time,
3316 .fc .fc-listMonth-view .fc-list-item-marker,
3317 .fc .fc-listMonth-view .fc-widget-header {
3320 .fc .fc-listMonth-view .fc-list-item:hover td {
3321 background: transparent;
3324 .fc .fc-listMonth-view .seperator {
3335 .event-card .event-label,
3336 .event-card .location-label {
3339 .popover.event-card .event-card-basic-content {
3344 .event-card .event-hover-location .location {
3349 /* Medium devices (desktops, 992px and up) */
3350 @media (min-width: 992px) {
3351 .mod-home.is-not-singleuser #content,
3352 .mod-login #content {
3353 margin-top: 100px!important;
3356 .mod-home.is-not-singleuser .login-form > #login-form,
3357 .mod-home.is-not-singleuser .login-form > #login-extra-links,
3358 .mod-login #content #login-form {
3359 background-color: #fff;
3363 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3365 background-color: white;
3368 .mod-home.is-not-singleuser .login-form > #login-form label,
3369 .mod-login #content #login-form label {
3373 .mod-home.is-not-singleuser .login-form::before,
3374 .mod-login #content #login-form::before {
3378 background-color: rgba(255,255,255,0.1);
3386 .mod-home.is-not-singleuser .login-form::after,
3387 .mod-login #content #login-form::after {
3391 background-color: rgba(255,255,255,0.2);
3401 /* Mobile display */
3402 @media (max-width: 600px) {
3410 #friendica-logo-mask {
3424 .panel .panel-body {
3428 .toplevel_item > .wall-item-container {
3436 .wall-item-actions {
3444 .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 {
3453 .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 {
3457 .wwto .contact-photo {
3465 Prevent automatic zoom on input focus on iOS
3466 see https://stackoverflow.com/a/16255670
3472 .wall-item-container.thread_level_3,
3473 .wall-item-container.thread_level_4,
3474 .wall-item-container.thread_level_5,
3475 .wall-item-container.thread_level_6,
3476 .wall-item-container.thread_level_7 {