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 @media screen and (max-width: 767px) {
427 #topbar-first .navbar-toggle {
432 #topbar-first .nav > li > a,
433 #topbar-first .nav > li > button,
434 nav.navbar .nav > li > a,
435 nav.navbar .nav > li > button
437 color: $nav_icon_color;
439 #topbar-first .nav > .open > a,
440 #topbar-first .nav > .open > button
442 background-color: $nav_bg;
444 #topbar-first .nav > li > a:hover,
445 #topbar-first .nav > li > a:focus,
446 #topbar-first .nav > li > button:not(#main-menu):hover,
447 #topbar-first .nav > li > button:not(#main-menu):focus,
448 nav.navbar .nav > li > a:hover,
449 nav.navbar .nav > li > a:focus
450 nav.navbar .nav > li > button:hover,
451 nav.navbar .nav > li > button:focus
453 background-color: $nav_icon_hover_color;
455 #topbar-first .nav>.account {
459 #topbar-first .nav>.account img {
465 #topbar-first .nav>.account .dropdown-toggle {
466 padding: 8px 5px 0px;
470 #topbar-first .nav>.account .dropdown-toggle span {
473 #topbar-first .topbar-brand {
477 #topbar-first .topbar-actions {
481 #topbar-first .topbar-nav {
487 #topbar-first .topbar-nav .nav-segment {
491 #topbar-first .topbar-nav .nav-segment > a
493 display: inline-block;
494 text-decoration: none;
497 #topbar-first .topbar-nav .nav-segment .nav-notification {
501 background-color: #ff3535;
503 #topbar-first #intro-update{
506 #topbar-first .topbar-nav .arrow:after {
511 border-color: transparent;
518 border-bottom-color: #fff;
521 #topbar-first .topbar-nav .arrow {
526 border-color: transparent;
533 border-bottom-color: rgba(0, 0, 0, .15);
537 #topbar-first .topbar-nav .dropdown-menu {
541 #topbar-first .topbar-nav .dropdown-menu ul.media-list {
545 #topbar-first .topbar-nav .dropdown-menu li {
548 #topbar-first .topbar-nav .dropdown-menu li i.approval {
554 #topbar-first .topbar-nav .dropdown-menu li i.accepted {
557 #topbar-first .topbar-nav .dropdown-menu li i.declined {
560 #topbar-first .topbar-nav .dropdown-menu li .media {
563 #topbar-first .topbar-nav .dropdown-menu li .media .img-space {
568 #topbar-first .dropdown-footer {
569 margin: 10px 10px 5px
571 #topbar-first .caret {
572 border-top-color: #bebebe
574 #topbar-first .btn-group>a {
575 background-color: #7f9baa
577 #topbar-first .btn-enter {
578 background-color: #7f9baa;
581 #topbar-first .btn-enter:hover {
582 background-color: #89a2b0
584 .navbar-fixed-top ul.nav.navbar-nav.navbar-right {
588 #friendica-logo-mask {
593 /* Notification Menu */
594 #topbar-first #nav-notifications-menu {
597 #topbar-first #nav-notifications-menu a {
598 color: $font_color_darker;
601 #topbar-first #nav-notifications-menu li.notif-entry {
602 color: $font_color_darker;
604 border-bottom: 1px solid #eee;
606 border-left: 3px solid #fff;
610 #topbar-first #nav-notifications-menu li.notification-unseen {
611 border-left: 3px solid #e3eff3;
612 background-color: #e3eff3;
614 #topbar-first #nav-notifications-menu li.notif-entry:hover {
615 background-color: #f7f7f7;
616 border-left: 3px solid $link_color;
618 #topbar-first #nav-notifications-menu li.placeholder {
621 #topbar-first #nav-notifications-menu .media .media-body .contactname {
624 #topbar-first #nav-notifications-menu .media .media-body .label {
627 #topbar-first #nav-notifications-menu li.notif-entry .media-object a img {
632 /* The Top Nav Bar user menu */
633 #topbar-first .account .user-title {
637 #topbar-first .account .user-title span {
638 color: $nav_icon_color;
640 #topbar-first .account #main-menu .nav-notification {
644 background-color: #ff8989;
648 background-color: $nav_bg;
649 color: $nav_icon_color;
651 #myNavmenu li.nav-sitename {
657 #topbar-first .dropdown.account li#nav-sitename {
661 word-break: break-word;
663 #topbar-first .dropdown.account li#nav-sitename:hover {
665 background-color: $nav_bg;
668 #topbar-first #search-box .navbar-form {
679 background-color: $background_color;
681 /* fix bootstrap .well class not playing well with data-target slide animation */
687 #search-mobile .navbar-form {
690 #topbar-first #search-box .form-search {
693 background-position: 8px 4px;
695 #topbar-first #search-box .btn {
704 background-color: #fff;
706 background-image: none;
707 -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
708 -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
709 box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
710 border-bottom: 1px solid #d4d4d4;
712 #topbar-second > .container {
715 @media screen and (max-width: 767px) {
716 #topbar-second > .container,
717 #topbar-second #navbar-button {
721 #topbar-second .dropdown-menu {
725 #topbar-second .dropdown-menu .divider {
728 #topbar-second #space-menu-dropdown,
729 #topbar-second #search-menu-dropdown {
732 #topbar-second #space-menu-dropdown .media-list,
733 #topbar-second #search-menu-dropdown .media-list {
741 .intro-wrapper button.intro-action-link {
745 ul li .intro-wrapper button.intro-action-link {
748 @media screen and (max-width: 768px) {
749 #topbar-second #space-menu-dropdown .media-list,
750 #topbar-second #search-menu-dropdown .media-list {
754 #topbar-second #space-menu-dropdown form,
755 #topbar-second #search-menu-dropdown form {
758 #topbar-second #space-menu-dropdown .search-reset,
759 #topbar-second #search-menu-dropdown .search-reset {
768 #topbar-second #space-menu-dropdown li>ul>li>a>.media .media-body p {
774 #topbar-second #nav-short-info .heading {
779 text-overflow: ellipsis;
781 #topbar-second #tabmenu .heading {
783 text-overflow: ellipsis;
790 .nav > li > .btn-link {
795 .nav .open > .btn-link {
796 background-color: #eee;
797 border-color: #337ab7;
799 .nav-pills > li > .btn-link {
802 .nav-pills .dropdown-menu,
803 .nav-tabs .dropdown-menu,
804 .account .dropdown-menu,
805 .contact-photo-wrapper .dropdown-menu {
806 background-color: $nav_bg;
809 .nav-pills .dropdown-menu li.divider,
810 .nav-tabs .dropdown-menu li.divider,
811 .account .dropdown-menu li.divider,
812 .contact-photo-wrapper .dropdown-menu li.divider {
813 background-color: $menu_background_hover_color;
815 margin: 9px 1px!important
817 .nav-pills .dropdown-menu li > a,
818 .nav-tabs .dropdown-menu li > a,
819 .account .dropdown-menu li > a,
820 .contact-photo-wrapper .dropdown-menu li > a {
821 border-left: 3px solid $nav_bg;
823 .nav-pills .dropdown-menu li a, .nav-pills .dropdown-menu li .btn-link,
824 .nav-tabs .dropdown-menu li a, .nav-tabs .dropdown-menu li .btn-link,
825 .account .dropdown-menu li a, .account .dropdown-menu li .btn-link,
826 .contact-photo-wrapper .dropdown-menu li a, .contact-photo-wrapper .dropdown-menu li .btn-link {
827 color: $nav_icon_color;
831 text-transform: capitalize;
835 .nav-pills .dropdown-menu li a i, .nav-pills .dropdown-menu li .btn-link i,
836 .nav-tabs .dropdown-menu li a i, .nav-tabs .dropdown-menu li .btn-link i,
837 .account .dropdown-menu li a i, .account .dropdown-menu li .btn-link i,
838 .contact-photo-wrapper .dropdown-menu li a i, .contact-photo-wrapper .dropdown-menu li .btn-link i {
841 display: inline-block;
844 .nav-pills .dropdown-menu li > a:hover,
845 .nav-tabs .dropdown-menu li > a:hover,
846 .account .dropdown-menu li > a:hover,
847 .contact-photo-wrapper .dropdown-menu li > a:hover,
848 .nav-pills .dropdown-menu li.selected a,
849 .nav-tabs .dropdown-menu li.selected a,
850 .account .dropdown-menu li.selected a,
851 .contact-photo-wrapper .dropdown-menu li.selected a {
852 border-left: 3px solid $link_color;
854 background: $menu_background_hover_color;
856 #photo-edit-link-wrap {
857 color: $font_color_darker;
872 .nav-container .widget {
875 background-color: rgba(255, 255, 255, $contentbg_transp);
876 box-shadow: 0 0 3px #dadada;
877 -webkit-box-shadow: 0 0 3px #dadada;
878 -moz-box-shadow: 0 0 3px #dadada;
887 .nav-container .widget h3 {
891 padding-bottom: 20px;
895 .nav-container .widget ul {
905 .nav-container .widget li {
911 aside .widget li:hover,
912 aside .widget li.selected,
913 .nav-container .widget li:hover {
915 color: $font_color_darker;
916 background-color: rgba(247, 247, 247, $contentbg_transp);
917 border-left: 3px solid $link_color !important;
921 aside .widget li a:hover {
922 color: $font_color_darker;
925 /* forumlist widget */
926 aside > #datebrowse-sidebar li.posted-date-selector-months {
927 margin-bottom: 10px;;
931 aside > #datebrowse-sidebar li.posted-date-selector-months:hover {
932 border-left: none !important;
933 background-color: transparent !important;
935 aside > #datebrowse-sidebar .posted-date-selector-months > ul {
938 aside > #datebrowse-sidebar .posted-date-selector-months > ul > li{
941 aside > #datebrowse-sidebar .posted-date-selector-months > ul > li:hover{
946 -webkit-filter: grayscale(100%);
947 filter: grayscale(100%);
949 filter: alpha(opacity=50); /* For IE8 and earlier */
950 -webkit-transition: all 0.2s ease-in-out;
951 -moz-transition: all 0.2s ease-in-out;
952 -o-transition: all 0.2s ease-in-out;
953 -ms-transition: all 0.2s ease-in-out;
954 transition: all 0.2s ease-in-out;
956 #forumlist-sidbar-ul li:hover a > .forumlist-img {
957 -webkit-filter: unset;
962 /* help page widget */
963 aside > .help-aside-wrapper p strong:first-child {
967 aside > .help-aside-wrapper h1 {
971 padding: 20px 0 10px;
973 aside > .help-aside-wrapper h2 {
979 aside .vcard #profile-photo-wrapper{
982 aside .vcard img.u-photo,
983 aside img.vcard-photo {
987 aside .vcard .tool .action{
994 background: rgba(0,0,0,.50);
998 -webkit-transition: all 0.25s ease-in-out;
999 -moz-transition: all 0.25s ease-in-out;
1000 -o-transition: all 0.25s ease-in-out;
1001 -ms-transition: all 0.25s ease-in-out;
1002 transition: all 0.25s ease-in-out;
1004 aside .vcard .tool a {
1005 color: rgba(255,255,255,.85);
1007 aside .vcard #profile-photo-wrapper:hover .tool .action {
1010 aside .vcard #profile-photo-wrapper.crop-preview {
1013 aside .vcard .profile-header {
1014 padding: 5px 0px 20px 0px;
1018 padding: 5px 0px 5px 0px;
1020 aside .vcard .p-addr {
1023 text-overflow: ellipsis;
1024 white-space: nowrap;
1025 padding-bottom: 2px;
1027 aside .vcard .title {
1030 aside .vcard .detail {
1037 aside .vcard .icon {
1038 display: table-cell;
1039 padding-right: 10px;
1042 #profile-extra-links {
1044 margin-bottom: 10px;
1046 aside .vcard #dfrn-request-link-button,
1047 aside .vcard #wallmessage-link-botton {
1053 aside .vcard #dfrn-request-link,
1054 aside .vcard #wallmessage-link {
1057 /* vcard-short-info */
1059 #nav-short-info .contact-wrapper {
1062 white-space: nowrap;
1064 padding-right: 20px;
1067 #nav-short-info .contact-photo-wrapper.media-left {
1070 #vcard-short-photo-wrapper img,
1071 #nav-short-info .contact-wrapper img {
1077 #nav-short-info .contact-wrapper .media-body {
1081 text-overflow: ellipsis;
1083 #vcard-short-desc > .media-heading,
1084 #vcard-short-desc > .vcard-short-addr,
1085 #nav-short-info .contact-wrapper .media-heading,
1086 #nav-short-info .contact-wrapper #contact-entry-url-network {
1087 text-overflow: ellipsis;
1090 #vcard-short-desc > .media-heading,
1091 #nav-short-info .contact-wrapper .media-heading {
1095 #nav-short-info .contact-wrapper .media-heading a {
1096 color: $font_color_darker;
1097 font-size: 14px !important;
1099 #vcard-short-desc > .vcard-short-addr,
1100 #nav-short-info .contact-wrapper #contact-entry-url-network {
1104 .network-content-wrapper > #viewcontact_wrapper-network,
1105 #nav-short-info .contact-wrapper .contact-photo-overlay,
1106 #nav-short-info .contact-wrapper .contact-actions{
1110 aside #peoplefind-sidebar input,
1111 aside #follow-sidebar input {
1113 background-position: 10px 5px;
1115 aside #peoplefind-sidebar label,
1116 aside #follow-sidebar label {
1117 font-weight: normal;
1119 aside #peoplefind-sidebar .form-group-search .form-button-search,
1120 aside #follow-sidebar .form-group-search .form-button-search {
1124 div#sidebar-group-header h3 {
1128 div#sidebar-group-list {
1137 color: $font_color_darker;
1141 color: $font_color_darker;
1143 transition: all 0.1s ease-in-out;
1146 color: $font_color_darker;
1153 aside #group-sidebar .sidebar-group-li:hover .group-edit-tool.faded-icon,
1154 aside #saved-search-list .saved-search-li:hover .savedsearchdrop.faded-icon,
1155 aside .widget:hover .widget-action.faded-icon {
1157 transition: all 0.25s ease-in-out;
1159 aside #group-sidebar .sidebar-group-li .group-edit-tool.faded-icon:hover,
1160 aside #saved-search-list .saved-search-li .savedsearchdrop.faded-icon:hover,
1161 aside .widget .widget-action.faded-icon:hover {
1164 aside #group-sidebar li .group-checkbox {
1167 aside #group-sidebar li .group-edit-tool {
1168 padding-right: 10px;
1170 aside #group-sidebar li .group-edit-tool:first-child {
1174 /* contact block widget */
1175 .contact-block-content {
1180 .contact-block-div {
1182 margin: 0px 5px 5px 0px;
1184 .contact-block-link {
1187 .contact-block-img {
1193 /* Tag cloud widget */
1194 .tagblock.widget > .tag-cloud {
1199 display: none !important;
1213 .modal #jot-sections {
1214 max-height: calc(100vh - 22px);
1216 @media (min-width: 768px) {
1217 .modal #jot-sections {
1218 max-height: calc(100vh - 62px);
1221 #jot-modal #jot-sections,
1222 #jot-modal #jot-modal-body,
1223 #jot-modal #profile-jot-form,
1224 #jot-modal #profile-jot-wrapper,
1225 #jot-modal #jot-text-wrap,
1226 #jot-modal #jot-preview-content,
1227 #jot-modal #tread-wrapper--1,
1228 #jot-modal #item-Q0,
1229 #jot-modal #profile-jot-acl-wrapper,
1230 #jot-modal #acl-wrapper {
1234 flex-direction: column;
1236 #jot-modal .modal-header a, #jot-modal .modal-header .btn-link,
1237 #profile-jot-submit-wrapper a, #profile-jot-submit-wrapper .btn-link {
1238 color: $font_color_darker;
1240 #jot-modal .modal-header {
1241 border-bottom: none;
1243 #jot-modal .modal-header .compose-link {
1247 #jot-title-wrap, #jot-category-wrap {
1253 #jot-text-wrap textarea {
1255 overflow-y: auto !important;
1256 overflow-y: overlay !important;
1258 #jot-text-wrap .preview textarea {
1261 #preview_profile-jot-text,
1262 .comment-edit-form .preview {
1266 border: 2px solid #ededed;
1269 border-radius: 0 0 4px 4px;
1271 color: $font_color_darker;
1273 textarea#profile-jot-text:focus + #preview_profile-jot-text,
1274 textarea.comment-edit-text:focus + .comment-edit-form .preview {
1275 border: 2px solid #6fdbe8;
1278 .preview hr.previewseparator {
1280 border-color: #D2D2D2;
1282 #previewImgBtn_profile-jot-text,
1294 .preview button.previewActionBtn {
1300 border: 2px solid #fff;
1301 box-shadow: 0 0 3px gray;
1305 text-decoration: none;
1306 padding: 0 0 1px 1px;
1309 .preview button.previewActionBtn:hover {
1312 .preview .closePreview button.previewActionBtn {
1315 #previewInputTitle_profile-jot-text {
1318 #profile-jot-wrapper button#profile-jot-submit {
1321 #profile-jot-wrapper #character-counter {
1324 .modal .wall-item-container.preview {
1326 overflow-y: overlay;
1330 font-family: ForkAwesome;
1334 font-family: ForkAwesome;
1338 #acl-wrapper label.panel-heading {
1345 .fbrowser .breadcrumb {
1348 .fbrowser .path a:before {
1352 .fbrowser .breadcrumb > li:last-of-type a{
1354 pointer-events: none;
1357 .fbrowser .folders {
1358 box-shadow: -1.5px 0 0 0 rgba(0, 0, 0, .1) inset;
1361 .fbrowser .folders ul {
1367 max-height: calc(100vh - 210px);
1370 @media (min-width: 768px) {
1371 .fbrowser .folders ul {
1372 max-height: calc(100vh - 255px);
1375 .fbrowser .folders li {
1377 padding-right: 10px;
1379 padding-bottom: 3px;
1381 .fbrowser .folders li:hover {
1383 color: $font_color_darker;
1384 background-color: rgba(247, 247, 247, $contentbg_transp);
1385 border-left: 3px solid $link_color;
1388 .fbrowser .folders li a,
1389 .fbrowser .folders li a:hover {
1390 color: $font_color_darker;
1393 .fbrowser .folders + .list {
1396 .fbrowser .fbrowser-content-container {
1398 max-height: calc(100vh - 175px);
1400 @media (min-width: 768px) {
1401 .fbrowser .fbrowser-content-container {
1402 max-height: calc(100vh - 220px);
1405 .fbrowser.image .photo-album-image-wrapper {
1406 box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.2);
1408 .fbrowser.image .photo-album-image-wrapper .caption {
1409 pointer-events: none;
1411 .fbrowser .profile-rotator-wrapper {
1414 .fbrowser .fa-spin {
1427 background-color: rgba(255,255,255,$contentbg_transp);
1428 box-shadow: 0 0 2px #dadada;
1429 -webkit-box-shadow: 0 0 2px #dadada;
1430 -moz-box-shadow: 0 0 2px #dadada;
1434 .panel.panel-inline {
1436 margin-right: -15px;
1440 .panel .panel-body {
1441 word-wrap: break-word;
1443 .tread-wrapper .media {
1445 word-wrap: break-word;
1451 /* Thread hover effects */
1452 .desktop-view .wall-item-container .wall-item-content a,
1453 .desktop-view .wall-item-name,
1454 .desktop-view .wall-item-container .fakelink,
1455 .desktop-view .toplevel_item .fakelink,
1456 .desktop-view .toplevel_item .wall-item-container .wall-item-responses a {
1458 -webkit-transition: all 0.25s ease-in-out;
1459 -moz-transition: all 0.25s ease-in-out;
1460 -o-transition: all 0.25s ease-in-out;
1461 -ms-transition: all 0.25s ease-in-out;
1462 transition: all 0.25s ease-in-out;
1465 .toplevel_item:hover .fakelink, .wall-item-container:hover .fakelink,
1466 .toplevel_item:hover .wall-item-container:hover .wall-item-responses a,
1467 .toplevel_item:hover .wall-item-content a,
1468 .toplevel_item:hover .wall-item-name,
1469 .wall-item-container:hover .wall-item-content a,
1470 .wall-item-container:hover .wall-item-name,
1471 .wall-item-container:hover .wall-item-location a {
1473 -webkit-transition: all 0.25s ease-in-out;
1474 -moz-transition: all 0.25s ease-in-out;
1475 -o-transition: all 0.25s ease-in-out;
1476 -ms-transition: all 0.25s ease-in-out;
1477 transition: all 0.25s ease-in-out;
1481 .wall-item-container {
1482 border-top: 1px solid rgba(255, 255, 255, 0.8);
1485 .wall-item-container.panel-body {
1490 .comment-edit-preview .wall-item-container.panel-body.preview {
1493 .comment-edit-preview .panel {
1497 .wall-item-container .media {
1500 background-color: rgba(0, 0, 0, 0.03);
1503 /* wall items contact photo */
1508 /*maybe some adional stuff is needed for the different screen sizes */
1510 .contact-photo-image-wrapper {
1517 .contact-photo-overlay {
1525 background:rgba(0,0,0,.50);
1528 -webkit-transition: opacity .25s ease;
1529 -moz-transition: opacity .25s ease;
1531 .contact-photo-overlay:hover {
1534 .contact-photo-overlay-content {
1536 text-shadow: 1px 1px 1px #ccc;
1537 color:rgba(255,255,255,.85);
1539 vertical-align: bottom;
1546 .wwto .contact-photo {
1554 display: inline-block;
1557 /* wall items action dropdown menu */
1558 .media [role=heading] {
1562 /* Workaround for Firefox where the post heading covers the avatar, preventing hovercard interaction,
1563 48px is the width of the avatar image and should be adjusted accordingly if it ever changes. */
1564 .media .dropdown.pull-left + [role=heading] {
1573 .shared_header .preferences {
1577 .wall-item-network {
1581 /* wall items contact info */
1582 .media .media-body {
1585 .media .media-body h4.media-heading {
1588 color: $font_color_darker;
1590 .media .media-body .addional-info a, .media .media-body h5.media-heading > a {
1593 .media .contact-info-comment {
1594 display: table-cell;
1596 .media .contact-info-xs h5,
1597 .media .contact-info-comment {
1608 .wall-item-name.xs {
1613 /* Contact avatar click card */
1614 .userinfo.click-card {
1618 .userinfo.click-card > *:hover:after {
1623 background-color: #ffffff;
1632 border-radius: 0 0 40% 0;
1635 /* The lock symbol popup */
1639 background-color: $nav_bg;
1649 color: $nav_icon_color;
1653 /* Space between content and head */
1658 /* wall items content */
1659 .wall-item-content {
1660 word-break: break-word;
1662 .wall-item-content img {
1664 object-fit: contain;
1666 .wall-item-body > img,
1667 .wall-item-body > a > img {
1670 .wall-item-body .body-attach > a {
1671 color: $font_color_darker;
1672 display: inline-block;
1674 .wall-item-body .body-attach > a div {
1675 color: $font_color_darker;
1679 /* wall-item content elements */
1687 box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .1) inset, 0 1px 1px rgba(0, 0, 0, .05);
1689 @media screen and (max-width: 767px) {
1695 margin: 5px -10px 0;
1699 box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .15) inset, 0 1px 1px rgba(0, 0, 0, .05);
1705 margin-bottom: 10px;
1709 blockquote.shared_content {
1715 padding: 10px 10px 1px 0;
1720 .type-link img.attachment-image {
1723 .type-link blockquote, .type-video blockquote {
1727 .oembed.video .embed_video > div::before {
1728 font-family: ForkAwesome;
1729 font-weight: normal;
1731 display: inline-block;
1732 text-decoration: inherit;
1733 vertical-align: top;
1741 .oembed.video .embed_video > div {
1742 background-color: rgba(0,0,0,0.2);
1743 -webkit-transition: all 0.25s ease-in-out;
1744 -moz-transition: all 0.25s ease-in-out;
1745 -o-transition: all 0.25s ease-in-out;
1746 -ms-transition: all 0.25s ease-in-out;
1747 transition: all 0.25s ease-in-out;
1749 .oembed.video .embed_video > div:hover {
1750 background-color: rgba(0,0,0,0);
1752 .oembed.video .embed_video.active {
1755 .oembed.video .embed_video.active iframe {
1756 width: 100% !important;
1765 color: $font_color_darker;
1768 .wall-item-tags a:hover {
1769 text-decoration: none;
1771 .wall-item-bottom .label,
1772 .wall-item-bottom .label a {
1775 .wall-item-tags .category,
1776 .wall-item-tags .folder {
1780 /* item social action buttons */
1781 .wall-item-actions {
1784 justify-content: space-between;
1786 .wall-item-actions a, .wall-item-actions button {
1788 color: $font_color_darker;
1790 .wall-item-actions .active {
1794 .wall-item-actions-left {
1795 display: table-cell;
1796 vertical-align: middle;
1798 .wall-item-actions-right {
1801 .wall-item-actions .checkbox {
1805 .wall-item-actions .button-comments,
1806 .wall-item-actions .button-votes,
1807 .wall-item-actions .button-likes {
1808 text-transform: capitalize;
1810 .wall-item-actions button:hover {
1811 color: $font_color_darker;
1812 text-decoration: underline;
1814 .wall-item-actions .separator {
1818 .wall-item-responses > div > p {
1822 /* wall item hover effects */
1824 @media (min-width: 768px) {
1825 /* Tags and mentions */
1826 .wall-item-container .wall-item-bottom .wall-item-tags span.label {
1827 filter:grayscale(0.5);
1830 -webkit-transition: all 0.25s ease-in-out;
1831 -moz-transition: all 0.25s ease-in-out;
1832 -o-transition: all 0.25s ease-in-out;
1833 -ms-transition: all 0.25s ease-in-out;
1834 transition: all 0.25s ease-in-out;
1837 .wall-item-container:hover .wall-item-bottom .wall-item-tags span.label {
1838 filter:grayscale(0);
1841 -webkit-transition: all 0.25s ease-in-out;
1842 -moz-transition: all 0.25s ease-in-out;
1843 -o-transition: all 0.25s ease-in-out;
1844 -ms-transition: all 0.25s ease-in-out;
1845 transition: all 0.25s ease-in-out;
1847 /* Like/Comment/etc buttons */
1848 .wall-item-container .wall-item-links,
1849 .wall-item-container .wall-item-actions button,
1850 .wall-item-container .body-attach > a {
1853 -webkit-transition: all 0.25s ease-in-out;
1854 -moz-transition: all 0.25s ease-in-out;
1855 -o-transition: all 0.25s ease-in-out;
1856 -ms-transition: all 0.25s ease-in-out;
1857 transition: all 0.25s ease-in-out;
1859 .wall-item-container:hover .wall-item-links,
1860 .wall-item-container:hover .wall-item-actions button,
1861 .wall-item-container:hover .body-attach > a {
1864 -webkit-transition: all 0.25s ease-in-out;
1865 -moz-transition: all 0.25s ease-in-out;
1866 -o-transition: all 0.25s ease-in-out;
1867 -ms-transition: all 0.25s ease-in-out;
1868 transition: all 0.25s ease-in-out;
1870 .wall-item-container .wall-item-body .body-attach > a:hover {
1878 wall-item-comment-wrapper.well {
1881 background-color: rgba(237, 237, 237, $contentbg_transp);
1882 background-image: none;
1884 background-color: red;
1886 wall-item-comment-wrapper.well-small {
1890 wall-item-comment-wrapper.well hr {
1891 border-top: 1px solid #d9d9d9;
1893 .wall-entry wall-item-comment-wrapper.well {
1896 .comment-container {
1898 border-top-left-radius: 3px;
1899 border-top-right-radius: 3px;
1900 border-bottom-right-radius: 0px;
1901 border-bottom-left-radius: 0px;
1904 position: relative!important;
1907 .hide-comments-outer {
1908 background-color: rgba(0, 0, 0, 0.03);
1910 border-radius: 0.5em 0.5em 0 0;
1912 .hide-comments-total {
1921 .wall-item-comment-wrapper {
1923 border-top: 1px solid rgba(255, 255, 255, 0.8);
1924 background-color: rgba(0, 0, 0, 0.03);
1925 border-radius: 0 0 4px 4px;
1929 .comment-fake-form {
1930 border-color: #d9d9d9;
1932 .comment-fake-form textarea {
1936 .comment-container .wall-item-comment-wrapper {
1940 .comment-edit-form textarea {
1944 .comment-edit-submit-wrapper {
1949 .comment-icon-list {
1951 justify-content: space-between;
1954 /* acpopup + textcompletion*/
1956 background-color: #ffffff;
1960 box-shadow: 0 6px 12px rgba(0,0,0,.175);
1965 /** @todo: we schould consider the possebility to overwrite bootstrap dropdowns
1966 at the beginning of this file to get rid of the !important */
1967 .textcomplete-item > a {
1968 color: $font_color_darker !important;
1969 padding: 5px 20px !important;
1971 .textcomplete-item.active > a {
1972 background-color: rgb(247, 247, 247) !important;
1973 background-image: none !important;
1974 border-left: 3px solid $link_color;
1975 padding-left: 17px !important;
1977 .textcomplete-item a .forum {
1985 /* The wall-item thread levels */
1986 .wall-item-container.thread_level_3,
1987 .wall-item-container.thread_level_4,
1988 .wall-item-container.thread_level_5,
1989 .wall-item-container.thread_level_6,
1990 .wall-item-container.thread_level_7 {
1995 #birthday-notice, #birthday-wrapper {
1999 background-color: rgba(247,247,247,$contentbg_transp);
2000 box-shadow: 0 0 3px #dadada;
2001 -webkit-box-shadow: 0 0 3px #dadada;
2002 -moz-box-shadow: 0 0 3px #dadada;
2007 section > .tabbar-wrapper {
2008 /* The tabbar shouldn't' be visibile inside
2009 the section element. Only after we have
2010 moved it to the nav through js */
2011 display: none !important;
2020 #tabmenu .search-heading {
2022 text-overflow: ellipsis;
2023 white-space: nowrap;
2036 border-bottom: 0 solid $link_color;
2039 transition: all .15s ease;
2045 ul.tabs li:hover, ul.tabs li.active {
2046 border-bottom-width: 4px;
2048 ul.tabbar ul.tabs-extended li.active {
2050 border-bottom-width: 2px;
2052 ul.tabbar ul.tabs-extended li.active a {
2055 ul.dropdown-menu li:hover {
2056 border-bottom-width: 0;
2061 .dropdown-menu li a,
2062 .dropdown-menu li .btn-link {
2065 .dropdown-menu li > :hover,
2066 .dropdown-menu li > :visited,
2067 .dropdown-menu li > :focus {
2071 .dropdown-menu li:first-child {
2075 /* Notificaiotn badges */
2076 #mail-update-li.show {
2077 display: inline-block!important;
2081 p.wall-item-announce,
2083 .media .shared-time,
2086 .media .location a {
2088 color: $font_color_darker;
2092 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2094 border-left: 3px solid rgba(255,255,255,0);
2097 .media-list > li:hover,
2098 .media-list > li.selected,
2099 .media-list > li.active {
2100 border-left: 3px solid $link_color;
2101 background-color: rgba(247, 247, 247, $contentbg_transp);
2108 .form-control:focus {
2109 border: 2px solid $link_color;
2113 .radio label::before,
2114 .checkbox label::before {
2115 background-color: rgba(255,255,255,$contentbg_transp);
2117 .radio label::after {
2118 background-color: $link_color;
2120 .checkbox label::after {
2124 .checkbox input[type="checkbox"]:focus + label::before,
2125 .radio input[type="radio"]:focus + label::before {
2126 outline-color: $link_hover_color;
2130 color: $font_color_darker;
2133 input[type=range].form-control {
2139 .form-control.form-search {
2140 border-radius: 30px;
2141 background-image: url(img/icon_search16x16.png);
2142 background-repeat: no-repeat;
2143 background-position: 10px 8px;
2146 .form-group-search {
2151 .form-group-search .form-button-search {
2155 border-radius: 30px;
2157 .search-input.form-control.form-search {
2165 .search-content-wrapper > #search-header-wrapper {
2168 .search-content-wrapper > .section-title-wrapper {
2171 #navbar-button > #search-save {
2174 /* Section-Content-Wrapper */
2175 #search-header-wrapper {
2177 padding-bottom: 20px;
2178 margin-bottom: 20px;
2180 background-color: rgba(255,255,255,$contentbg_transp);
2183 color: $font_color_darker;
2184 box-shadow: 0 0 3px #dadada;
2185 -webkit-box-shadow: 0 0 3px #dadada;
2186 -moz-box-shadow: 0 0 3px #dadada;
2193 section > .generic-page-wrapper, .videos-content-wrapper,
2194 .suggest-content-wrapper, .help-content-wrapper,
2195 .match-content-wrapper, .dirfind-content-wrapper,
2196 .delegation-content-wrapper, .notes-content-wrapper,
2197 .message-content-wrapper, .apps-content-wrapper,
2198 #adminpage, .delegate-content-wrapper, .uexport-content-wrapper,
2199 .dfrn_request-content-wrapper,
2200 .friendica-content-wrapper, .credits-content-wrapper, .nogroup-content-wrapper,
2201 .profperm-content-wrapper, .invite-content-wrapper, .tos-content-wrapper,
2202 .fsuggest-content-wrapper {
2203 min-height: calc(100vh - 150px);
2205 padding-bottom: 20px;
2206 margin-bottom: 20px;
2208 background-color: rgba(255,255,255,$contentbg_transp);
2211 color: $font_color_darker;
2212 box-shadow: 0 0 3px #dadada;
2213 -webkit-box-shadow: 0 0 3px #dadada;
2214 -moz-box-shadow: 0 0 3px #dadada;
2216 #content:hover .page-action.faded-icon {
2218 transition: all 0.25s ease-in-out;
2220 #content .page-action.faded-icon:hover {
2224 .section-title-wrapper {
2227 /* Home and Login Page */
2228 body.mod-home nav.navbar .nav>li>a:hover {
2229 background-color: rgba(255,255,255,0.2);
2231 body.mod-home .navbar #nav-login,
2232 body.mod-login .navbar #nav-login {
2236 #profile-content-standard,
2237 #profile-content-advanced {
2242 margin-bottom: 20px;
2244 .contact-block-div.forumlist-profile-advanced {
2249 ul.viewcontact_wrapper {
2251 margin-right: -15px;
2253 ul.viewcontact_wrapper > li {
2256 .contact-wrapper .contact-photo-wrapper button {
2259 .contact-wrapper.media {
2261 word-wrap: break-word;
2264 /* bootstrap hack for .media */
2265 .contact-wrapper.media .media-body {
2266 display: table-cell;
2271 .contact-wrapper.media:before, .media:after {
2275 .contact-wrapper.media:after {
2278 .contact-wrapper .contact-photo-image-wrapper img.contact-photo.xl {
2282 .contact-wrapper .contact-photo-image-wrapper img.contact-photo-xs {
2286 .contact-wrapper .contact-photo-overlay-content.xl {
2289 .contact-wrapper .contact-photo-menu {
2293 .contact-entry-desc {
2294 color: $font_color_darker;
2296 .contact-entry-checkbox {
2299 .contact-wrapper .media-body .contact-entry-name h4.media-heading a {
2300 font-weight: bold !important;
2302 font-size: 15px !important;
2304 .contact-wrapper .contact-actions {
2307 .contact-wrapper .contact-action-link,
2308 .contact-wrapper .contact-action-link:hover,
2309 .textcomplete-item .contact-wrapper .contact-action-link {
2311 color: $font_color_darker;
2314 .contact-wrapper .contact-action-link {
2316 transition: all 0.25s ease-in-out;
2318 ul li:hover .contact-wrapper .contact-action-link {
2320 transition: all 0.25s ease-in-out;
2322 ul li:hover .contact-wrapper .contact-action-link:hover {
2325 #contacts-search-wrapper,
2326 #directory-search-wrapper{
2329 #contact-drop-confirm .contact-actions,
2330 #contact-drop-confirm .contact-photo-overlay,
2331 #contact-drop-confirm .contact-photo-menu {
2334 #contact-drop-confirm #confirm-form {
2339 #contact-edit-actions {
2342 #contact-edit-status-wrapper {
2344 background-color: rgba(225, 245, 254, $contentbg_transp);
2347 #contact-edit-settings {
2351 /* directory page */
2352 #directory-search-heading {
2356 /* group edit page */
2359 margin-bottom: 10px;
2362 .group-actions button,
2367 .contact-group-actions .fa-times-circle { color: #D00000;}
2368 .contact-group-actions .fa-plus-circle { color: #008000;}
2370 #group-edit-wrapper {
2374 #group-edit-header {
2377 #group-update-wrapper .contact-photo-overlay {
2380 #group-update-wrapper .viewcontact_wrapper .contact-group-actions {
2385 #group-update-wrapper .viewcontact_wrapper .contact-group-link {
2390 #group-update-wrapper .viewcontact_wrapper .contact-action-link:hover {
2393 #group-update-wrapper .shortmode {
2397 #group-update-wrapper .shortmode .contact-photo {
2401 #group-update-wrapper .shortmode .media {
2404 #group-update-wrapper .shortmode .contact-entry-desc {
2405 font-size: 12px !important;
2407 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading {
2410 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading a {
2411 font-size: 13px !important;
2412 white-space: nowrap;
2414 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-rel,
2415 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-network {
2420 .message-content-wrapper > li {
2421 /* we need this overwriting because we have no template file
2422 for the general mail page /message
2424 list-style-type: none;
2427 max-height: calc(100vh - 200px);
2429 #mail-conversation {
2431 max-height: calc(100vh - 400px);
2436 .mail-conv-wrapper .media .contact-photo-wrapper img {
2440 .mail-thread #prvmail-to-label,
2441 .mail-thread #prvmail-subject-label {
2444 .mail-thread #prvmail-message-label > label {
2447 .mail-thread #prvmail-message-label textarea {
2450 .mail-conv-wrapper {
2452 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2455 height: calc(100vh - 150px);
2458 height: calc(100% - 20px);
2460 #message-preview ul {
2463 #message-preview .media-list li {
2467 #message-preview .media-list li:hover {
2468 border-left: none !important;
2470 #message-preview .media-list li a {
2473 .mail-list-outside-wrapper {
2475 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2477 .mail-list-outside-wrapper .contact-photo-wrapper img {
2484 #modal #prvmail-text-edit-bb .bb-img {
2489 #photo-album-edit-name-label {
2492 .photo-album-edit-name {
2496 .photo-album-actions {
2497 margin-bottom: 10px;
2499 .photo-album-actions .photos-order-link {
2504 .fc .fc-month-view .fc-content .fc-title .item-desc:hover {
2505 color: $link_hover_color;
2507 .fc .fc-list-item-title a {
2510 .fc .fc-list-item-title a[href]:hover {
2511 color: $link_hover_color;
2512 text-decoration: none;
2514 .event-wrapper .event-owner {
2515 margin-bottom: 15px;
2517 .event-wrapper .event-owner img {
2526 .event-wrapper .vevent {
2529 box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, .1) inset;
2531 .event-wrapper .event-buttons {
2534 #event-form-wrapper {
2537 #event-edit-form-wrapper {
2541 color: $font_color_darker;
2543 #event-edit-form-wrapper #event-edit-time {
2546 .event-buttons .plink-event-link {
2549 .vevent .event-summary {
2552 .vevent .event-description {
2555 .vevent .event-location .location {
2559 .modal-body .vevent .event-summary {
2562 #event-preview .vevent .event-summary {
2567 .event-card-details, .event-card-header {
2570 .event-card-header, .event-card-left-date {
2573 .vevent .event-card-header {
2576 .event-card-left-date {
2577 width: 60px; /* Das muss wahrscheinlich unterschiedlich sein zwischen calendar und stream */
2579 .event-card .event-date-wrapper > span {
2583 white-space: nowrap;
2585 .event-card .event-date-wrapper .event-card-short-month {
2587 text-transform: uppercase;
2589 .event-card .event-date-wrapper.medium .event-card-short-date {
2594 .event-card .event-card-content {
2596 padding: 0 5px 0 15px;
2597 box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, .1) inset;
2601 .event-card .event-card-content .event-map-btn {
2607 .event-card .event-card-title {
2609 color: $font_color_darker;
2614 .event-card .event-card-location {
2618 .event-card .event-card-location br {
2621 .event-card .event-card-location br::after {
2624 .event-card-profile-name a {
2627 .event-card-profile-name a:hover {
2628 color: $link_hover_color;
2630 .event-card .event-card-content .event-location-map {
2635 .event-card .event-card-content .event-location-map .map{
2638 .event-card .description {
2640 box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, .1) inset;
2646 .photo-next-link, .photo-prev-link {
2652 transform: translateZ(0);
2653 transition: opacity .2s;
2664 .photo-next-link > i, .photo-prev-link > i {
2665 vertical-align: super;
2667 .photo-next-link > i {
2676 #photo-photo:hover .photo-next-link,
2677 #photo-photo:hover .photo-prev-link {
2680 #photo-photo .photo-next-link:hover,
2681 #photo-photo .photo-prev-link:hover {
2685 .photo-comment-wrapper .comment {
2688 .photo-comment-wrapper .wall-item-content {
2689 color: $font_color_darker;
2692 .photo-comment-wrapper .comment-wwedit-wrapper,
2693 .photo-comment-wrapper .wall-item-outside-wrapper.media:first-child {
2698 .profile-listing-table {
2702 .profile-listing-row {
2705 .profile-listing-cell {
2706 display: table-cell;
2708 .profile-listing-photo {
2713 #profile-listing-new-link-wrapper {
2714 margin-bottom: 20px;
2717 #profile-photo-upload-section {
2721 #profile-photo-upload-close {
2726 .section-subtitle-wrapper {
2729 details.profile-jot-net[open] summary:before, .panel .section-subtitle-wrapper a.accordion-toggle:before {
2730 font-family: ForkAwesome;
2734 details.profile-jot-net summary:before, .panel .section-subtitle-wrapper a.accordion-toggle.collapsed:before {
2735 font-family: ForkAwesome;
2738 details.profile-jot-net summary:before {
2742 details.profile-jot-net[open] summary:before {
2746 #settings-nick-wrapper {
2747 margin-bottom: 20px;
2753 /* Emulates Bootstrap display */
2756 background-color: rgba(255, 255, 255, $contentbg_transp);
2759 box-shadow: 0 0 3px #dadada;
2760 -webkit-box-shadow: 0 0 3px #dadada;
2761 -moz-box-shadow: 0 0 3px #dadada;
2764 .settings-block.fakelink, .settings-block > .fakelink {
2768 .settings-block > .fakelink {
2769 margin: -10px -15px 10px -15px;
2770 border-radius: 4px 4px 0 0;
2773 .settings-block.fakelink:hover, .settings-block > .fakelink:hover {
2774 color: $link_hover_color;
2776 .settings-block.fakelink > h3, .settings-block > .fakelink > h3 {
2783 .section-subtitle-wrapper > h2 {
2786 margin-bottom: 10px;
2789 .fakelink > h3:before {
2790 padding-right: 10px;
2792 .widget.fakelink > h3:before,
2793 .settings-block.fakelink > h3:before {
2794 font-family: ForkAwesome;
2795 content: "\f0da"; /* Right Plain Pointer */
2797 .widget > .fakelink > h3:before,
2798 #sidebar-group-header > .fakelink > h3:before,
2799 .settings-block > .fakelink > h3:before {
2800 font-family: ForkAwesome;
2801 content: "\f0d7"; /* Bottom Plain Pointer */
2808 /* Intro Notifications */
2809 ul.notif-network-list {
2811 margin-right: -15px;
2813 ul.notif-network-list > li {
2815 padding-right: 15px;
2817 .intro-wrapper.media {
2819 word-wrap: break-word;
2822 .intro-photo-wrapper img.intro-photo {
2830 .intro-enty-name h4 {
2831 font-size: 15px !important;
2833 .intro-wrapper button.intro-action-link {
2835 transition: all 0.25s ease-in-out;
2837 .intro-wrapper button.intro-action-link,
2838 .intro-wrapper button.intro-action-link:hover {
2841 color: $font_color_darker;
2843 ul li:hover .intro-wrapper button.intro-action-link {
2845 transition: all 0.25s ease-in-out;
2847 ul li:hover .intro-wrapper button.intro-action-link:hover {
2850 .intro-action-buttons {
2854 transition: max-height 0.1s ease-out;
2856 ul.notif-network-list > li:hover .intro-action-buttons {
2858 transition: max-height 0.1s ease-in;
2860 .intro-desc-label, .intro-url-label, .intro-network-label,
2861 .intro-location-label, .intro-keywords-label,
2862 .intro-about-label, .intro-knowyou-label, .intro-madeby-label {
2865 .intro-contact-info.xs .intro-url-label, .intro-contact-info.xs .intro-network-label,
2866 .intro-contact-info.xs .intro-location-label,
2867 .intro-contact-info.xs .intro-keywords-label, .intro-contact-info.xs .intro-about-label,
2868 .intro-contact-info.xs .intro-knowyou-label {
2873 /* Notifications Page */
2874 ul.notif-network-list li.unseen {
2875 background-color: #e3eff3;
2877 .notif-item img.notif-image {
2882 .notif-item .notif-desc-wrapper {
2885 .notif-item .notif-desc-wrapper a {
2888 color: $font_color_darker;
2895 /* This is a little bit hacky. Since the search page is used for diferent
2896 content types we can't apply the generic-page-wrapper class.
2897 So we apply the css of the generic-page-wrapper class to the ul element with some
2898 little modifications to emulate a standard page template */
2899 .search-content-wrapper > ul.viewcontact_wrapper {
2900 min-height: calc(100vh - 150px);
2902 padding-bottom: 20px;
2904 margin-bottom: 20px;
2906 background-color: rgba(255,255,255,$contentbg_transp);
2909 color: $font_color_darker;
2910 box-shadow: 0 0 3px #dadada;
2911 -webkit-box-shadow: 0 0 3px #dadada;
2912 -moz-box-shadow: 0 0 3px #dadada;
2916 section.help-content-wrapper h1 {
2917 padding-bottom: 0.3em;
2919 border-bottom: 1px solid #ddd;
2921 section.help-content-wrapper h2 {
2922 padding-bottom: 0.3em;
2924 border-bottom: 1px solid #ddd;
2926 section.help-content-wrapper h3 {
2929 section.help-content-wrapper h4 {
2932 section.help-content-wrapper h1,
2933 section.help-content-wrapper h2,
2934 section.help-content-wrapper h3,
2935 section.help-content-wrapper h4,
2936 section.help-content-wrapper h5,
2937 section.help-content-wrapper h6 {
2939 margin-bottom: 16px;
2943 section.help-content-wrapper p {
2946 section.help-content-wrapper p,
2947 section.help-content-wrapper a,
2948 section.help-content-wrapper li {
2954 #adminpage #frio_background_image .image-select {
2957 #adminpage #frio_background_image.input-group {
2960 #admin-summary-wrapper {
2963 #adminpage ul#addonslist, li.addon {
2966 #adminpage li .icon {
2967 display: inline-block;
2968 vertical-align: text-top;
2972 #adminpage li .icon:before {
2974 display: inline-block;
2981 border: 1px solid #cccccc;
2983 background-color: $background_color;
2984 -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
2985 -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
2986 transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
2988 #adminpage li .icon.on:after {
2989 font-family: "ForkAwesome";
2991 display: inline-block;
3004 #adminpage .addon .desc {
3007 #admin-users #users tr.blocked {
3008 background-color: #f8efc0;
3010 .adminpage .table-hover > tbody > tr:hover + tr.details {
3011 background-color: #f5f5f5;
3013 .offset-anchor::before {
3019 pointer-events: none;
3027 #identity-selector-wrapper {
3032 #identity-selector-wrapper .identity-match-photo {
3036 #identity-selector-wrapper .identity-match-photo button {
3039 #identity-selector-wrapper .identity-match-photo .badge {
3044 #identity-selector-wrapper .identity-match-name {
3047 #identity-selector-wrapper .identity-match-details {
3053 #register-openid-wrapper, #register-name-wrapper, #register-invite-wrapper, #profile-publish-wrapper {
3056 #register-openid-end, #register-nickname-end
3062 * Overwriting for transparency and other colors
3064 main .nav-tabs>li.active>a,
3065 main .nav-tabs>li.active>a:focus,
3066 main .nav-tabs>li.active>a:hover {
3067 background-color: rgba(255,255,255,$contentbg_transp);
3077 @media (min-width: 768px) {
3084 * Framework overwrite
3087 /* textcomplete for contact filtering*/
3088 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list {
3089 position: relative !important;
3090 top: inherit !important;
3091 bottom: inherit !important;
3092 left: inherit !important;
3095 margin-right: -15px;
3096 background-color: transparent;
3100 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li {
3102 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
3104 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li:first-child {
3107 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list
3108 .textcomplete-item > a {
3109 padding: 0 !important;
3111 background-color: transparent !important;
3113 /* this is a little hack for texcomplete contact filter
3114 There are for some reasons empty <a> tags. I don't know why */
3115 .textcomplete-item .contact-wrapper a {
3120 body .tread-wrapper .hovercard a,
3121 body .tread-wrapper .hovercard a:hover {
3124 body .tread-wrapper .hovercard:hover .hover-card-content a {
3125 color: $link_color !important;
3128 /* Pagination improvements */
3133 .pagination > li > a,
3134 .pagination > li > span {
3138 .pagination>li>a:hover,
3139 .pagination>li>span:hover {
3140 color: $link_hover_color;
3142 .pagination > .active > a,
3143 .pagination > .active > a:focus,
3144 .pagination > .active > a:hover,
3145 .pagination > .active > span,
3146 .pagination > .active > span:focus,
3147 .pagination > .active > span:hover {
3148 background-color: $link_color;
3149 border-color: $link_color;
3152 .pagination li.pager_n a {
3156 .pagination .pager_prev a {
3159 border-top-right-radius: 3px;
3160 border-bottom-right-radius: 3px;
3162 .pagination .pager_next a {
3165 border-top-left-radius: 3px;
3166 border-bottom-left-radius: 3px;
3169 .pager .previous > a {
3173 .pagination .disabled > a,
3174 .pager .disabled > a {
3180 background-color: rgba(255, 255, 255, $contentbg_transp);
3184 * some temporary workarounds until this will solved
3185 * elsewhere (e.g. new templates)
3187 section .profile-match-wrapper {
3194 #login-submit-wrapper {
3197 #lost-password-link { flex-grow: 2; }
3198 #login-lost-password-link {
3199 margin-bottom: 10px;
3205 #id_password_wrapper {
3206 margin-bottom: unset;
3213 background: #8ad0a1;
3220 .mod-home.is-not-singleuser,
3222 background-color: $login_bg_color;
3223 background-image: linear-gradient(to right, rgba(0,0,0, 0.7) , rgba(0,0,0, 0.4)), url($login_bg_image);
3224 background-size: cover;
3225 background-attachment: fixed;
3226 background-position: center;
3229 .mod-home.is-not-singleuser nav.navbar,
3230 .mod-login nav.navbar { background-color: transparent }
3231 .mod-home.is-not-singleuser #topbar-second,
3232 .mod-login #topbar-second {
3233 background-color: transparent;
3237 .mod-home.is-not-singleuser .login-content,
3238 .mod-login .login-content {
3243 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3247 .mod-home.is-not-singleuser .login-form > #login-form label,
3248 .mod-login #content #login-form label {
3252 .mod-home.is-not-singleuser .login-panel-content,
3253 .mod-login .login-panel-content {
3254 background-color: rgba(255,255,255,.85);
3258 background: $nav_bg !important;
3259 color: $btn_primary_color !important;
3262 -webkit-box-shadow: none;
3264 -moz-box-shadow: none;
3265 background-image: none;
3273 width: 100% !important;
3276 .qq-upload-drop-area {
3277 background: white !important;
3280 -webkit-box-shadow: none;
3282 -moz-box-shadow: none;
3283 background-image: none;
3291 width: 100% !important;
3292 display: block !important;
3293 position: relative !important;
3294 border: black 1px dashed !important;
3295 margin-bottom: 5px !important;
3296 margin-top: 15px !important;
3300 * The different views of js fullcalendar
3304 margin-bottom: 10px;
3308 #event-calendar-title {
3309 display: inline-block;
3319 #fc-header-right .dropdown > button {
3322 #event-calendar-title {
3323 vertical-align: middle;
3325 #event-calendar-views {
3332 .fc .fc-month-view td.fc-widget-content,
3334 .fc .fc-list-view .fc-list-table td,
3338 .fc td.fc-widget-header,
3339 .fc th.fc-widget-header {
3344 .fc .fc-month-view td.fc-day {
3347 border-bottom: 1px solid;
3350 .fc .fc-day-grid-container .fc-row {
3351 border-bottom: 1px solid;
3354 .fc tr td.fc-today {
3357 .fc .fc-month-view .fc-content .fc-title .item-desc {
3360 .fc .fc-view-container {
3363 .fc .fc-list-view td {
3366 #events-calendar.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
3371 background-color: #E3F2FD;
3372 border: 1px solid #BBDEFB;
3373 color: $font_color_darker;
3375 .fc .fc-month-view .fc-time,
3376 .fc .fc-listMonth-view .fc-list-item-time,
3377 .fc .fc-listMonth-view .fc-list-item-marker,
3378 .fc .fc-listMonth-view .fc-widget-header {
3381 .fc .fc-listMonth-view .fc-list-item:hover td {
3382 background: transparent;
3385 .fc .fc-listMonth-view .seperator {
3396 .event-card .event-label,
3397 .event-card .location-label {
3400 .popover.event-card .event-card-basic-content {
3405 .event-card .event-hover-location .location {
3410 /* Medium devices (desktops, 992px and up) */
3411 @media (min-width: 992px) {
3412 .mod-home.is-not-singleuser #content,
3413 .mod-login #content {
3414 margin-top: 100px!important;
3417 .mod-home.is-not-singleuser .login-form > #login-form,
3418 .mod-home.is-not-singleuser .login-form > #login-extra-links,
3419 .mod-login #content #login-form {
3420 background-color: #fff;
3424 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3426 background-color: white;
3429 .mod-home.is-not-singleuser .login-form > #login-form label,
3430 .mod-login #content #login-form label {
3434 .mod-home.is-not-singleuser .login-form::before,
3435 .mod-login #content #login-form::before {
3439 background-color: rgba(255,255,255,0.1);
3447 .mod-home.is-not-singleuser .login-form::after,
3448 .mod-login #content #login-form::after {
3452 background-color: rgba(255,255,255,0.2);
3461 /* Mobile display */
3462 @media (max-width: 600px) {
3470 #friendica-logo-mask {
3484 .panel .panel-body {
3488 .toplevel_item > .wall-item-container {
3496 .wall-item-actions {
3504 .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 {
3513 .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 {
3517 .wwto .contact-photo {
3525 Prevent automatic zoom on input focus on iOS
3526 see https://stackoverflow.com/a/16255670
3532 .wall-item-container.thread_level_3,
3533 .wall-item-container.thread_level_4,
3534 .wall-item-container.thread_level_5,
3535 .wall-item-container.thread_level_6,
3536 .wall-item-container.thread_level_7 {