2 To change this license header, choose License Headers in Project Properties.
3 To change this template file, choose Tools | Templates
4 and open the template in the editor.
7 Created on : 17.02.2016, 23:55:45
12 /*@import url("frameworks/bootstrap/css/bootstrap.min.css");
13 @import url("frameworks/bootstrap/css/bootstrap-theme.min.css");
14 @import url("frameworks/font-awesome/css/font-awesome.min.css");
15 @import url("frameworks/jasny/css/jasny-bootstrap.min.css");
16 @import url("frameworks/bootstrap-select/css/bootstrap-select.min.css");
17 @import url("frameworks/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css");
18 @import url("frameworks/ekko-lightbox/ekko-lightbox.min.css");
19 @import url("frameworks/justifiedGallery/justifiedGallery.min.css");
20 @import url("frameworks/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css");
21 @import url("font/open_sans/open-sans.css");
22 @import url("css/hovercard.css");*/
27 background-color: $bgcolor;
28 background-image: url("$background_image");
29 background-size: $background_size_img;
30 background-attachment: fixed;
33 font-family: 'Open Sans',sans-serif;
39 text-decoration: none;
42 body a:hover, body a:focus, body a:active, body a.active, body .btn-link:hover{
44 color: $link_hover_color;
45 text-decoration: none;
48 .wall-item-container a:hover {
49 text-decoration: underline;
58 border-color: rgba(238, 238, 238, $contentbg_transp);
73 display: none !important;
77 * standard page elements
89 padding: 0 12px 0 12px;
91 background-color: #aaa;
95 a#item-delete-selected {
104 padding: 0 12px 0 12px;
106 background-color: $link_color;
112 * Overwriting and Extend Bootstrap
123 -webkit-box-shadow: none;
125 -moz-box-shadow: none;
126 background-image: none;
129 outline: 0!important;
152 color: $btn_primary_color !important;
154 .btn-primary:hover, .btn-primary:focus {
155 background: $btn_primary_hover_color;
156 text-decoration: none;
158 .btn-primary:active, .btn-primary.active {
160 background: $btn_primary_hover_color !important;
162 .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover,
163 .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover,
164 .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus,
165 .open>.dropdown-toggle.btn-primary:hover,.btn-primary.active, .btn-primary:active,
166 .open>.dropdown-toggle.btn-primary {
167 background: $btn_primary_hover_color;
175 .btn-link:focus, .btn-link:hover {
178 .btn-eventnav, btn-eventnav:hover {
181 background-color: transparent;
185 border-left: 1px solid #777;
189 color: #fff!important;
191 .btn-info:hover, .btn-info:focus {
192 background: #59d6e4!important;
193 text-decoration: none;
195 .btn-info:active, .btn-info.active {
201 /*background: #6fdbe8;*/
202 background: $link_color;
203 color: #fff!important;
205 .btn-main:hover, .btn-main:focus {
206 /*background: #59d6e4!important;*/
207 background: $link_hover_color !important;
208 text-decoration: none;
210 .btn-main:active, .btn-main.active {
212 /*background: #59d6e4;*/
213 background: $link_hover_color;
216 .form-control-sm, .input-group-sm>.form-control, .input-group-sm>.input-group-addon, .input-group-sm>.input-group-btn>.btn {
217 padding: .275rem .75rem;
218 /*font-size: .875rem;*/
221 border-radius: .2rem;
223 /* Bootstrap media class fix/hack
224 * This is a test. I thought it does have some
225 * issues in some corner cases. Maybe we remove
227 * https://github.com/twbs/bootstrap/issues/6053
229 .media, .media-body {
238 .media:before, .media:after {
248 vertical-align: baseline;
249 background-color: $link_color;
256 /* disabled elements */
257 .community-content-wrapper > h3, .network-content-wrapper > .section-title-wrapper {
261 header #site-location {
275 text-shadow: 1px 1px 2px rgba(0,0,0,.5);
277 font-family: tahoma, "Lucida Sans", sans;
283 header #banner #logo-img,
284 .navbar-brand #logo-img {
285 /*mask: url('network#m1');*/
286 /*mask-image: url('img/friendica-25.png');*/
287 -webkit-mask-image: url('img/friendica-25.png');
288 background-color: $nav_icon_color;
295 #navbrand-container {
298 #navbrand-container #navbar-brand-text {
317 @media (min-width: 992px) {
318 .topbar ul.nav>li>a {
320 padding-bottom: 15px;
324 @media (max-width: 991px) {
325 .topbar ul.nav>li>a { padding-left: 10px; padding-right: 10px; };
327 .topbar .dropdown-footer {
330 .topbar .dropdown-header {
337 .topbar .dropdown-header .dropdown-header-link {
342 .topbar .dropdown-header .dropdown-header-link a {
343 /*color: #6fdbe8!important;*/
344 color: $link_color !important;
348 .topbar .dropdown-header:hover {
353 background-color: $nav_bg;
356 color: $nav_icon_color;
358 #topbar-first .nav>li>a:hover,
359 #topbar-first .nav>li>a:focus,
360 #topbar-first .nav>.open>a,
361 nav.navbar .nav>li>a:hover,
362 nav.navbar .nav>li>a:focus{
363 background-color: $nav_icon_hover_color;
365 #topbar-first .nav>.account {
369 #topbar-first .nav>.account img {
375 #topbar-first .nav>.account .dropdown-toggle {
376 padding: 10px 5px 8px;
380 #topbar-first .nav>.account .dropdown-toggle span {
383 #topbar-first .topbar-brand {
387 #topbar-first .topbar-actions {
391 #topbar-first .topbar-nav {
392 /*position: absolute;*/
398 #topbar-first .topbar-nav .nav-segment {
402 #topbar-first .topbar-nav .nav-segment>a {
403 /* padding: 5px 10px;
405 display: inline-block;
406 /* border-radius: 2px;*/
407 text-decoration: none;
410 #topbar-first .topbar-nav .nav-segment .nav-notify {
414 background-color: #ff8989;
416 /* text-transform: uppercase;
417 display: inline-block;
418 padding: 3px 5px 4px;
420 font-size: 10px!important;
421 color: #fff!important;
422 vertical-align: baseline;
427 #topbar-first #intro-update{
430 #topbar-first .topbar-nav .arrow:after {
435 border-color: transparent;
442 border-bottom-color: #fff;
445 #topbar-first .topbar-nav .arrow {
450 border-color: transparent;
457 border-bottom-color: rgba(0, 0, 0, .15);
461 #topbar-first .topbar-nav .dropdown-menu {
465 #topbar-first .topbar-nav .dropdown-menu ul.media-list {
469 #topbar-first .topbar-nav .dropdown-menu li {
472 #topbar-first .topbar-nav .dropdown-menu li i.approval {
478 #topbar-first .topbar-nav .dropdown-menu li i.accepted {
481 #topbar-first .topbar-nav .dropdown-menu li i.declined {
484 #topbar-first .topbar-nav .dropdown-menu li .media {
487 #topbar-first .topbar-nav .dropdown-menu li .media .img-space {
492 #topbar-first .dropdown-footer {
493 margin: 10px 10px 5px
498 color: $nav_icon_color;
500 #topbar-first .caret {
501 border-top-color: #bebebe
503 #topbar-first .btn-group>a {
504 background-color: #7f9baa
506 #topbar-first .btn-enter {
507 background-color: #7f9baa;
510 #topbar-first .btn-enter:hover {
511 background-color: #89a2b0
515 /* Notification Menu */
516 #topbar-first #nav-notifications-menu {
519 #topbar-first #nav-notifications-menu a {
523 #topbar-first #nav-notifications-menu li.notif-entry {
526 border-bottom: 1px solid #eee;
528 border-left: 3px solid #fff;
532 #topbar-first #nav-notifications-menu li.notify-unseen {
533 border-left: 3px solid #f3fcfd;
534 background-color: #f3fcfd;
536 #topbar-first #nav-notifications-menu li.notif-entry:hover {
537 background-color: #f7f7f7;
538 /*border-left: 3px solid #6fdbe8;*/
539 border-left: 3px solid $link_color;
541 /*#topbar-first #nav-notifications-menu i.accepted {
542 color: #6fdbe8!important
544 #topbar-first #nav-notifications-menu i.declined {
545 color: #ff8989!important
547 #topbar-first #nav-notifications-menu li.placeholder {
550 #topbar-first #nav-notifications-menu .media .media-body {
551 font-size: 13px!important;
552 font-weight: 600!important;
555 #topbar-first #nav-notifications-menu .media .media-body .contactname {
558 #topbar-first #nav-notifications-menu .media .media-body .label {
561 #topbar-first #nav-notifications-menu li.notif-entry .media-object a img {
566 /* The Top Nav Bar user menu */
567 #topbar-first .account .user-title {
571 #topbar-first .account .user-title span {
572 color: $nav_icon_color;
574 #topbar-first .account #main-menu .nav-notify {
578 background-color: #ff8989;
582 background-color: $nav_bg;
583 color: $nav_icon_color;
585 #myNavmenu li.nav-sitename {
588 #topbar-first .dropdown.account>a,
589 #topbar-first .dropdown.account.open>a,
590 #topbar-first .dropdown.account>a:hover,
591 #topbar-first .dropdown.account.open>a:hover {
592 background-color: $nav_bg;
594 #topbar-first .dropdown.account li#nav-sitename {
598 word-break: break-word;
600 #topbar-first .dropdown.account li#nav-sitename:hover {
602 background-color: $nav_bg;
605 #topbar-first #search-box .navbar-form {
609 #search-mobile .navbar-form {
612 #topbar-first #search-box .form-search {
615 background-position: 8px 4px;
617 #topbar-first #search-box .btn {
626 background-color: #fff;
628 background-image: none;
629 -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
630 -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
631 box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
632 border-bottom: 1px solid #d4d4d4
634 #topbar-second > .container {
637 @media screen and (max-width: 767px) {
638 #topbar-second > .container,
639 #topbar-second #navbar-button {
643 #topbar-second .dropdown-menu {
647 #topbar-second .dropdown-menu .divider {
650 #topbar-second #space-menu-dropdown,
651 #topbar-second #search-menu-dropdown {
654 #topbar-second #space-menu-dropdown .media-list,
655 #topbar-second #search-menu-dropdown .media-list {
659 @media screen and (max-width: 768px) {
660 #topbar-second #space-menu-dropdown .media-list,
661 #topbar-second #search-menu-dropdown .media-list {
665 #topbar-second #space-menu-dropdown form,
666 #topbar-second #search-menu-dropdown form {
669 #topbar-second #space-menu-dropdown .search-reset,
670 #topbar-second #search-menu-dropdown .search-reset {
679 #topbar-second .nav>li>a {
681 text-decoration: none;
685 text-transform: uppercase;
689 #topbar-second .nav>li>a:hover,
690 #topbar-second .nav>li>a:active,
691 #topbar-second .nav>li>a:focus {
692 /*border-bottom: 3px solid #6fdbe8;*/
693 border-bottom: 3px solid $link_color;
694 background-color: #f7f7f7;
696 text-decoration: none
698 #topbar-second .nav>li>a i {
701 #topbar-second .nav>li>a .caret {
702 border-top-color: #7a7a7a
704 #topbar-second .nav>li>ul>li>a {
705 border-left: 3px solid #fff;
706 background-color: #fff;
709 #topbar-second .nav>li>ul>li>a:hover,
710 #topbar-second .nav>li>ul>li>a.active {
711 /*border-left: 3px solid #6fdbe8;*/
712 border-left: 3px solid $link_color;
713 background-color: #f7f7f7;
716 #topbar-second .nav>li.active>a {
719 #topbar-second .nav>li>a#space-menu {
721 border-right: 1px solid #ededed
723 #topbar-second .nav>li>a#search-menu {
726 #topbar-second .nav>li>a:hover,
727 #topbar-second .nav .open>a,
728 #topbar-second .nav>li.active {
729 /*border-bottom: 3px solid #6fdbe8;*/
730 border-left: 3px solid $link_color;
731 background-color: #f7f7f7;
734 #topbar-second .nav>li.active>a:hover {
737 #topbar-second #space-menu-dropdown li>ul>li>a>.media .media-body p {
743 #topbar-second #nav-short-info .heading {
748 text-overflow: ellipsis;
750 #topbar-second #tabmenu .heading {
752 text-overflow: ellipsis;
759 .nav-pills .dropdown-menu,
760 .nav-tabs .dropdown-menu,
761 .account .dropdown-menu,
762 .contact-photo-wrapper .dropdown-menu {
763 background-color: $nav_bg;
766 .nav-pills .dropdown-menu li.divider,
767 .nav-tabs .dropdown-menu li.divider,
768 .account .dropdown-menu li.divider,
769 .contact-photo-wrapper .dropdown-menu li.divider {
770 background-color: $menu_background_hover_color;
772 margin: 9px 1px!important
774 .nav-pills .dropdown-menu li,
775 .nav-tabs .dropdown-menu li,
776 .account .dropdown-menu li,
777 .contact-photo-wrapper .dropdown-menu li {
778 border-left: 3px solid $nav_bg;
780 .nav-pills .dropdown-menu li a,
781 .nav-tabs .dropdown-menu li a,
782 .account .dropdown-menu li a,
783 .contact-photo-wrapper .dropdown-menu li a {
784 color: $nav_icon_color;
789 .nav-pills .dropdown-menu li a i,
790 .nav-tabs .dropdown-menu li a i,
791 .account .dropdown-menu li a i,
792 .contact-photo-wrapper .dropdown-menu li a i {
795 display: inline-block;
798 .nav-pills .dropdown-menu li a:hover,
799 .nav-tabs .dropdown-menu li a:hover,
800 .account .dropdown-menu li a:hover,
801 .contact-photo-wrapper .dropdown-menu li a:hover,
802 .nav-pills .dropdown-menu li a:visited,
803 .nav-tabs .dropdown-menu li a:visited,
804 .account .dropdown-menu li a:visited,
805 .contact-photo-wrapper .dropdown-menu li a:visited,
806 .nav-pills .dropdown-menu li a:hover,
807 .nav-tabs .dropdown-menu li a:hover,
808 .account .dropdown-menu li a:hover,
809 .contact-photo-wrapper .dropdown-menu li a:hover,
810 .nav-pills .dropdown-menu li a:focus,
811 .nav-tabs .dropdown-menu li a:focus,
812 .account .dropdown-menu li a:focus,
813 .contact-photo-wrapper .dropdown-menu li a:focus {
816 .nav-pills .dropdown-menu li:hover,
817 .nav-tabs .dropdown-menu li:hover,
818 .account .dropdown-menu li:hover,
819 .contact-photo-wrapper .dropdown-menu li:hover,
820 .nav-pills .dropdown-menu li.selected,
821 .nav-tabs .dropdown-menu li.selected,
822 .account .dropdown-menu li.selected,
823 .contact-photo-wrapper .dropdown-menu li.selected {
824 /*border-left: 3px solid #6fdbe8;*/
825 border-left: 3px solid $link_color;
826 color: #fff!important;
827 background-color: $menu_background_hover_color !important
829 .nav-pills.preferences .dropdown .dropdown-toggle {
832 .nav-pills.preferences .dropdown.open .dropdown-toggle,
833 .nav-pills.preferences .dropdown.open .dropdown-toggle:hover {
834 background-color: $nav_bg
837 .nav-pills.preferences .dropdown .dropdown-toggle {
848 .nav-container .widget {
851 /*background-color: #fff;*/
852 background-color: rgba(255,255,255,$contentbg_transp);
853 box-shadow: 0 0 3px #dadada;
854 -webkit-box-shadow: 0 0 3px #dadada;
855 -moz-box-shadow: 0 0 3px #dadada;
863 .nav-container .widget h3 {
867 padding-bottom: 20px;
871 .nav-container .widget ul {
877 /*padding-left: 10px;*/
882 .nav-container .widget li {
888 aside .widget li:hover,
889 aside .widget li.selected,
890 .nav-container .widget li:hover {
893 /*background-color: #f7f7f7;*/
894 background-color: rgba(247, 247, 247, $contentbg_transp);
895 /*border-left: 3px solid #6fdbe8!important;*/
896 border-left: 3px solid $link_color !important;
900 aside .widget li a:hover {
904 /* forumlist widget */
905 aside #datebrowse-sidebar .posted-date-selector-months{
910 aside #datebrowse-sidebar .posted-date-selector-months li{
913 aside #datebrowse-sidebar .posted-date-selector-months li:hover{
918 aside .vcard #profile-photo-wrapper{
921 aside .vcard img.u-photo,
922 aside img.vcard-photo {
926 aside .vcard .tool .action{
933 background: rgba(0,0,0,.50);
937 -webkit-transition: all 0.25s ease-in-out;
938 -moz-transition: all 0.25s ease-in-out;
939 -o-transition: all 0.25s ease-in-out;
940 -ms-transition: all 0.25s ease-in-out;
941 transition: all 0.25s ease-in-out;
943 aside .vcard .tool a {
944 color: rgba(255,255,255,.85);
946 aside .vcard #profile-photo-wrapper:hover .tool .action {
949 aside .vcard .profile-header {
956 aside .vcard .p-addr {
959 text-overflow: ellipsis;
963 aside .vcard .detail {
971 #profile-extra-links {
974 aside .vcard #dfrn-request-link-button,
975 aside .vcard #wallmessage-link-botton {
981 aside .vcard #dfrn-request-link,
982 aside .vcard #wallmessage-link {
985 /* vcard-short-info */
987 #nav-short-info .contact-wrapper {
995 #vcard-short-photo-wrapper img,
996 #nav-short-info .contact-wrapper img {
1002 #nav-short-info .contact-wrapper .media-body {
1006 text-overflow: ellipsis;
1008 #vcard-short-desc > .media-heading,
1009 #vcard-short-desc > .vcard-short-addr,
1010 #nav-short-info .contact-wrapper .media-heading,
1011 #nav-short-info .contact-wrapper #contact-entry-url-network {
1012 text-overflow: ellipsis;
1015 #vcard-short-desc > .media-heading,
1016 #nav-short-info .contact-wrapper .media-heading {
1020 #nav-short-info .contact-wrapper .media-heading a {
1022 font-size: 14px !important;
1024 #vcard-short-desc > .vcard-short-addr,
1025 #nav-short-info .contact-wrapper #contact-entry-url-network {
1029 .network-content-wrapper > #viewcontact_wrapper-network,
1030 #nav-short-info .contact-wrapper .contact-photo-overlay,
1031 #nav-short-info .contact-wrapper .contact-actions{
1035 aside #peoplefind-sidebar input,
1036 aside #follow-sidebar input {
1038 background-position: 10px 5px;
1040 aside #peoplefind-sidebar .form-group-search .form-button-search,
1041 aside #follow-sidebar .form-group-search .form-button-search {
1045 aside #group-sidebar .group-edit-tool,
1046 aside #saved-search-list .savedsearchdrop {
1048 transition: all 0.25s ease-in-out;
1050 aside #group-sidebar .sidebar-group-li:hover .group-edit-tool,
1051 aside #saved-search-list .saved-search-li:hover .savedsearchdrop {
1053 transition: all 0.25s ease-in-out;
1055 aside #group-sidebar .sidebar-group-li .group-edit-tool:hover,
1056 aside #saved-search-list .saved-search-li .savedsearchdrop:hover {
1059 aside #group-sidebar li .group-checkbox {
1062 aside #group-sidebar li .group-edit-tool {
1063 padding-right: 10px;
1065 aside #group-sidebar li .group-edit-tool:first-child {
1069 /* contact block widget */
1070 #contact-block .contact-block-content {
1075 #contact-block .contact-block-div {
1077 margin: 0px 5px 5px 0px;
1081 #contact-block contact-block-link {
1084 #contact-block .contact-block-img {
1091 display: none !important;
1108 #jot-modal .modal-header a,
1109 #profile-jot-submit-wrapper a {
1112 #jot-modal .modal-header {
1113 border-bottom: none;
1115 #jot-title-wrap, #jot-category-wrap {
1121 #jot-text-wrap textarea {
1124 #profile-jot-wrapper button#jot-submit {
1131 max-height: calc(100vh - 130px);
1137 /*border: 1px solid #ccc;*/
1142 border: 1px solid #ccc;
1147 padding: 10px 10px 0px 0px;
1148 -webkit-border-radius: 4px;
1149 -moz-border-radius: 4px;
1154 max-height: calc(100vh - 330px);
1155 height: auto !important;
1159 width: calc(50% - 10px);
1160 border: 1px solid #ccc;
1161 margin: 0px 0px 10px 10px;
1164 -webkit-border-radius: 4px;
1165 -moz-border-radius: 4px;
1168 .acl-list-item img {
1173 -webkit-border-radius: 4px;
1174 -moz-border-radius: 4px;
1179 white-space: nowrap;
1181 text-overflow: ellipsis;
1183 .acl-list-item.groupshow {
1184 background-color: #8DB255
1186 .acl-list-item.grouphide {
1187 background-color: #E68364;
1189 .acl-button-show, .acl-button-hide {
1193 #acl-showall.selected {
1194 background-color: #4CAF50;
1197 .acl-button-show.selected {
1198 background-color: #4CAF50;
1201 .acl-button-hide.selected {
1202 background-color: #F44336;
1211 /*background-color: #fff;*/
1212 background-color: rgba(255,255,255,$contentbg_transp);
1213 box-shadow: 0 0 3px #dadada;
1214 -webkit-box-shadow: 0 0 3px #dadada;
1215 -moz-box-shadow: 0 0 3px #dadada;
1219 .panel .panel-body {
1223 .panel .panel-body .wall-item-content {
1226 .tread-wrapper .media {
1228 word-wrap: break-word;
1231 /* Thread hover effects */
1232 .wall-item-container .wall-item-content a,
1233 .wall-item-container a,
1234 .wall-item-container .fakelink,
1235 .toplevel_item .fakelink,
1236 .toplevel_item .wall-item-container .btn-link,
1237 .wall-item-container .btn-link,
1238 .toplevel_item .wall-item-container .wall-item-responses a {
1240 -webkit-transition: all 0.25s ease-in-out;
1241 -moz-transition: all 0.25s ease-in-out;
1242 -o-transition: all 0.25s ease-in-out;
1243 -ms-transition: all 0.25s ease-in-out;
1244 transition: all 0.25s ease-in-out;
1247 .toplevel_item:hover .fakelink, .wall-item-container:hover .fakelink,
1248 .toplevel_item:hover .wall-item-container:hover .btn-link,
1249 .toplevel_item:hover .wall-item-container:hover .wall-item-responses a,
1250 .toplevel_item:hover .wall-item-content a,
1251 .toplevel_item:hover .wall-item-name,
1252 .wall-item-container:hover .wall-item-content a,
1253 .wall-item-container:hover .wall-item-name,
1254 .wall-item-container:hover .wall-item-location a {
1257 -webkit-transition: all 0.25s ease-in-out;
1258 -moz-transition: all 0.25s ease-in-out;
1259 -o-transition: all 0.25s ease-in-out;
1260 -ms-transition: all 0.25s ease-in-out;
1261 transition: all 0.25s ease-in-out;
1265 .wall-item-container {
1269 /* wall items contact photo */
1274 /*maybe some adional stuff is needed for the different screen sizes */
1276 .contact-photo-image-wrapper {
1283 .contact-photo-overlay {
1291 background:rgba(0,0,0,.50);
1294 -webkit-transition: opacity .25s ease;
1295 -moz-transition: opacity .25s ease;
1297 .contact-photo-overlay:hover {
1300 .contact-photo-overlay-content {
1302 text-shadow: 1px 1px 1px #ccc;
1303 color:rgba(255,255,255,.85);
1305 vertical-align: bottom;
1312 .wwto .contact-photo {
1321 display: inline-block;
1324 /* wall items action dropdown menu */
1325 .nav-pills.preferences {
1330 .comment .nav-pills.preferences {
1334 .wall-item-network {
1338 /* wall items contact info */
1339 .media .media-body {
1342 .media .media-body h4.media-heading {
1347 .media .media-body .addional-info a, .media .media-body h5.media-heading > a {
1350 .media .contact-info-comment {
1351 display: table-cell;
1353 .media .contact-info-xs h5,
1354 .media .contact-info-comment {
1365 .wall-item-name.xs {
1370 /* The lock symbol popup */
1374 background-color: $nav_bg;
1384 color: $nav_icon_color;
1388 /* wall items content */
1389 .wall-item-content {
1390 word-break: break-word;
1392 .wall-item-content img {
1394 object-fit: contain;
1396 .wall-item-body > img,
1397 .wall-item-body > a > img {
1405 box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .1) inset, 0 1px 1px rgba(0, 0, 0, .05);
1407 @media screen and (max-width: 767px) {
1414 .shared-wrapper:hover,
1416 box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .15) inset, 0 1px 1px rgba(0, 0, 0, .05);
1425 blockquote.shared_content {
1439 .wall-item-tags a:hover {
1440 text-decoration: none;
1442 .wall-item-bottom .label,
1443 .wall-item-bottom .label a {
1447 /* item social action buttons */
1448 .wall-item-actions, .wall-item-actions a {
1455 .wall-item-actions a:hover {
1458 .wall-item-actions-left {
1459 display: table-cell;
1460 vertical-align: middle;
1462 .wall-item-actions-right {
1465 .wall-item-actions .checkbox {
1469 .wall-item-actions .button-event {
1473 .wall-item-actions .button-comments,
1474 .wall-item-actions .button-votes,
1475 .wall-item-actions .button-likes {
1480 /* wall item hover effects */
1481 .wall-item-container .wall-item-links,
1482 .wall-item-container .wall-item-actions {
1484 -webkit-transition: all 0.25s ease-in-out;
1485 -moz-transition: all 0.25s ease-in-out;
1486 -o-transition: all 0.25s ease-in-out;
1487 -ms-transition: all 0.25s ease-in-out;
1488 transition: all 0.25s ease-in-out;
1490 .wall-item-container:hover .wall-item-links,
1491 .wall-item-container:hover .wall-item-actions {
1493 -webkit-transition: all 0.25s ease-in-out;
1494 -moz-transition: all 0.25s ease-in-out;
1495 -o-transition: all 0.25s ease-in-out;
1496 -ms-transition: all 0.25s ease-in-out;
1497 transition: all 0.25s ease-in-out;
1506 /*background-color: #ededed;*/
1507 background-color: rgba(237, 237, 237, $contentbg_transp);
1508 background-image: none;
1516 margin: 15px 0 10px;
1517 border-top: 1px solid #d9d9d9;
1522 .comment-container {
1525 border-top-left-radius: 3px;
1526 border-top-right-radius: 3px;
1527 border-bottom-right-radius: 0px;
1528 border-bottom-left-radius: 0px;
1531 position: relative!important;
1534 .hide-comments-outer-wrapper {
1535 /* text-align: center;
1536 margin-top: -18px;*/
1538 .hide-comments-total {
1545 .thread_level_2 .wall-item-comment-wrapper {
1548 .comment-edit-submit-wrapper {
1549 margin-bottom: 25px;
1551 .comment-edit-submit-wrapper a,
1552 .comment-edit-submit-wrapper a:hover {
1553 padding-top: 5px !important;
1554 padding-bottom: 5px !important;
1556 .comment-icon-list a.icon,
1557 .comment-icon-list a.icon:hover {
1559 background-color: transparent;
1562 /* acpopup + textcompletion*/
1564 /* max-height: 150px; */
1565 background-color: #ffffff;
1569 box-shadow: 0 6px 12px rgba(0,0,0,.175);
1572 /*top: 35px !important;*/
1575 /** @todo: we schould consider the possebility to overwrite bootstrap dropdowns
1576 at the beginning of this file to get rid of the !important */
1577 .textcomplete-item > a {
1578 color: #555 !important;
1579 padding: 5px 20px !important;
1581 .textcomplete-item.active > a {
1582 background-color: rgb(247, 247, 247) !important;
1583 background-image: none !important;
1584 border-left: 3px solid $link_color;
1585 padding-left: 17px !important;
1587 .textcomplete-item a .forum {
1595 /* The wall-item thread levels */
1596 /*.wall-item-container.thread_level_3 {
1598 width: calc(100% - 90px);
1600 .wall-item-container.thread_level_4 {
1602 width: calc(100% - 105px);
1604 .wall-item-container.thread_level_5 {
1606 width: calc(100% - 120px);
1608 .wall-item-container.thread_level_6 {
1610 width: calc(100% - 135px);
1612 .wall-item-container.thread_level_7 {
1614 width: calc(100% - 150px);
1617 .wall-item-container.thread_level_3,
1618 .wall-item-container.thread_level_4,
1619 .wall-item-container.thread_level_5,
1620 .wall-item-container.thread_level_6,
1621 .wall-item-container.thread_level_7 {
1630 /*margin-left: -15px;*/
1633 #tabmenu .search-heading {
1635 text-overflow: ellipsis;
1636 white-space: nowrap;
1649 /*border-bottom: 0 solid #6fdbe8;*/
1650 border-bottom: 0 solid $link_color;
1653 transition: all .15s ease;
1655 /*ul.tabs.visible-xs > li.active {
1656 min-width: 150px; This is a workaround to make the topbar-second dropdown better visible on mobile. We need something better here
1662 color: $link_color !important;
1664 ul.tabs li:hover, ul.tabs li.active {
1665 border-bottom-width: 4px;
1667 ul.tabbar ul.tabs-extended li.active {
1669 border-bottom-width: 2px;
1671 ul.tabbar ul.tabs-extended li.active a {
1674 ul.dropdown-menu li:hover {
1675 border-bottom-width: 0;
1680 .dropdown-menu li a {
1681 font-size: 13px!important;
1682 font-weight: 600!important;
1684 .dropdown-menu li a:hover, .dropdown-menu li a:visited,
1685 .dropdown-menu li a:hover, .dropdown-menu li a:focus {
1689 .dropdown-menu li:first-child {
1693 /* Notificaiotn badges */
1700 .media .shared-time,
1702 .media .location a {
1708 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
1710 /* border-left: 3px solid rgba(255,255,255,$contentbg_transp);*/
1711 border-left: 3px solid rgba(255,255,255,0);
1714 .media-list > li:hover,
1715 .media-list > li.selected {
1716 border-left: 3px solid $link_color;
1717 background-color: rgba(247, 247, 247, $contentbg_transp);
1722 border: 2px solid #ededed;
1725 .form-control:focus {
1726 /*border: 2px solid #6fdbe8;*/
1727 border: 2px solid $link_color;
1733 .checkbox input[type="checkbox"]:focus + label::before,
1734 .checkbox input[type="radio"]:focus + label::before {
1735 /*border: 2px solid #6fdbe8;*/
1736 border: 2px solid $link_color;
1742 .form-control.form-search {
1743 border-radius: 30px;
1744 background-image: url(img/icon_search16x16.png);
1745 background-repeat: no-repeat;
1746 background-position: 10px 8px;
1749 .form-group-search {
1754 .form-group-search .form-button-search {
1758 border-radius: 30px;
1760 .search-input.form-control.form-search {
1768 .search-content-wrapper > #search-header-wrapper {
1771 .search-content-wrapper > .section-title-wrapper {
1774 #navbar-button > #search-save-form > #search-save {
1777 /* Section-Content-Wrapper */
1778 #search-header-wrapper {
1780 padding-bottom: 20px;
1781 margin-bottom: 20px;
1783 /*background-color: #fff;*/
1784 background-color: rgba(255,255,255,$contentbg_transp);
1787 /*overflow: hidden;*/
1789 box-shadow: 0 0 3px #dadada;
1790 -webkit-box-shadow: 0 0 3px #dadada;
1791 -moz-box-shadow: 0 0 3px #dadada;
1797 .generic-page-wrapper ,#profile-page, .profile_photo-content-wrapper, .photos-content-wrapper,
1798 .contacts-content-wrapper, .suggest-content-wrapper, .common-content-wrapper,
1799 .allfriends-content-wrapper, .match-content-wrapper, .dirfind-content-wrapper,
1800 .directory-content-wrapper, .manage-content-wrapper, .notes-content-wrapper,
1801 .message-content-wrapper, .apps-content-wrapper, .notifications-content-wrapper,
1802 .admin-content-wrapper, .group-content-wrapper, .viewcontacts-content-wrapper {
1803 min-height: calc(100vh - 150px);
1805 padding-bottom: 20px;
1806 margin-bottom: 20px;
1808 /*background-color: #fff;*/
1809 background-color: rgba(255,255,255,$contentbg_transp);
1812 /*overflow: hidden;*/
1814 box-shadow: 0 0 3px #dadada;
1815 -webkit-box-shadow: 0 0 3px #dadada;
1816 -moz-box-shadow: 0 0 3px #dadada;
1818 #profile-content-standard,
1819 #profile-content-advanced {
1824 margin-bottom: 20px;
1826 .contact-block-div.forumlist-profile-advanced {
1831 ul.viewcontact_wrapper {
1833 margin-right: -15px;
1835 ul.viewcontact_wrapper > li {
1840 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);;
1841 position: relative;*/
1842 /*border-left: 3px solid white;*/
1844 .contact-wrapper.media {
1846 word-wrap: break-word;
1849 /* bootstrap hack for .media */
1850 .contact-wrapper.media .media-body {
1851 display: table-cell;
1856 .contact-wrapper.media:before, .media:after {
1860 .contact-wrapper.media:after {
1863 .contact-wrapper .contact-photo-image-wrapper img.contact-photo.xl {
1867 .contact-wrapper .contact-photo-image-wrapper img.contact-photo-xs {
1871 .contact-wrapper .contact-photo-overlay-content.xl {
1875 .contact-entry-desc {
1878 .contact-entry-checkbox {
1881 .contact-wrapper .media-body .contact-entry-name h4.media-heading a {
1882 font-weight: bold !important;
1884 font-size: 15px !important;
1886 .contact-wrapper .contact-actions {
1889 .contact-wrapper a.contact-action-link {
1891 transition: all 0.25s ease-in-out;
1893 .contact-wrapper a.contact-action-link,
1894 .contact-wrapper a.contact-action-link:hover,
1895 .textcomplete-item .contact-wrapper a.contact-action-link {
1900 ul li:hover .contact-wrapper a.contact-action-link {
1902 transition: all 0.25s ease-in-out;
1904 ul li:hover .contact-wrapper a.contact-action-link:hover {
1907 #contacts-search-wrapper,
1908 #directory-search-wrapper{
1911 #contact-drop-confirm .contact-actions,
1912 #contact-drop-confirm .contact-photo-overlay,
1913 #contact-drop-confirm .contact-photo-menu {
1916 #contact-drop-confirm #confirm-form {
1920 /* directory page */
1921 #directory-search-heading {
1926 .message-content-wrapper > li {
1927 /* we need this overwriting because we have no template file
1928 for the general mail page /message
1930 list-style-type: none;
1933 max-height: calc(100vh - 200px);
1935 #mail-conversation {
1937 max-height: calc(100vh - 400px);
1943 #mail-conversation.can-reply {
1944 /* border-bottom-left-radius: 0px;
1945 border-bottom-right-radius: 0px;*/
1947 .mail-conv-wrapper .media .contact-photo-wrapper img {
1951 .mail-thread #prvmail-to-label,
1952 .mail-thread #prvmail-subject-label {
1955 .mail-thread #prvmail-message-label > label {
1958 .mail-thread #prvmail-message-label textarea {
1959 /* border-top: none;
1961 border-top-left-radius: 0px;
1962 border-top-right-radius: 0px;*/
1965 .mail-conv-wrapper {
1967 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
1970 height: calc(100vh - 150px);
1973 /*padding: 0 10px;*/
1974 height: calc(100% - 20px);
1976 #message-preview ul {
1979 #message-preview .media-list li {
1983 #message-preview .media-list li:hover {
1984 border-left: none !important;
1986 #message-preview .media-list li a {
1989 .mail-list-outside-wrapper {
1991 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
1993 .mail-list-outside-wrapper .contact-photo-wrapper img {
2012 margin-bottom: 10px;
2016 #event-calendar-title {
2017 display: inline-block;
2027 #event-calendar-title {
2028 vertical-align: middle;
2030 a#event-calendar-views {
2045 #events-calendar .fc-grid .fc-day-number {
2049 .event-wrapper .event-owner {
2050 margin-bottom: 15px;
2052 .event-wrapper .event-owner img {
2061 .event-wrapper .vevent {
2064 box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, .1) inset;
2066 .event-wrapper .event-buttons {
2069 #event-form-wrapper {
2072 #event-edit-form-wrapper {
2078 #event-edit-form-wrapper #event-edit-time {
2082 .profile-listing-table {
2086 .profile-listing-row {
2089 .profile-listing-cell {
2090 display: table-cell;
2092 .profile-listing-photo {
2097 #profile-listing-new-link-wrapper {
2098 margin-bottom: 20px;
2100 .panel-group-settings {
2102 margin-right: -15px;
2104 .panel-group-settings > .panel {
2106 padding-right: 15px;
2108 .profiles-content-wrapper #profile-photo-upload-section {
2111 margin-right: -15px;
2115 #profile-photo-upload-close {
2120 .section-subtitle-wrapper {
2123 .panel .section-subtitle-wrapper a.accordion-toggle:before {
2124 font-family: FontAwesome;
2128 .panel .section-subtitle-wrapper a.accordion-toggle.collapsed:before {
2129 font-family: FontAwesome;
2132 #settings-nick-wrapper {
2133 margin-bottom: 20px;
2139 * Overwriting for transparency and other colors
2141 main .nav-tabs>li.active>a,
2142 main .nav-tabs>li.active>a:focus,
2143 main .nav-tabs>li.active>a:hover {
2144 background-color: rgba(255,255,255,$contentbg_transp);
2155 * Framework overwrite
2159 .theme-frio .back-bar {
2160 height: 5px !important;
2162 background-color: #eeeeee;
2163 background-color: #e7e7e7;
2164 background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
2165 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
2166 background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
2167 background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
2168 background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
2169 background-repeat: repeat-x;
2170 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
2172 .theme-frio .back-bar .selected-bar {
2174 background-color: $link_color;
2175 /* background-image: -moz-linear-gradient(top, #bdfade, #76fabc);
2176 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bdfade), to(#76fabc));
2177 background-image: -webkit-linear-gradient(top, #bdfade, #76fabc);
2178 background-image: -o-linear-gradient(top, #bdfade, #76fabc);
2179 background-image: linear-gradient(to bottom, #bdfade, #76fabc);
2180 background-repeat: repeat-x;
2181 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbdfade', endColorstr='#ff76fabc', GradientType=0);*/
2183 .theme-frio .back-bar .pointer {
2184 width: 14px !important;
2185 height: 14px !important;
2187 -webkit-box-sizing: border-box;
2188 -moz-box-sizing: border-box;
2189 box-sizing: border-box;
2190 border-radius: 10px;
2191 border: 1px solid #AAA;
2192 background-color: #e7e7e7 !important;
2193 background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
2194 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
2195 background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
2196 background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
2197 background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
2198 background-repeat: repeat-x;
2199 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
2201 .theme-frio .back-bar .pointer-label {
2205 /* textcomplete for contact filtering*/
2206 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list {
2207 position: relative !important;
2208 top: inherit !important;
2209 bottom: inherit !important;
2210 left: inherit !important;
2213 margin-right: -15px;
2214 background-color: transparent;
2218 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li {
2220 border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2222 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li:first-child {
2225 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list
2226 .textcomplete-item > a {
2227 padding: 0 !important;
2229 background-color: transparent !important;
2231 /* this is a little hack for texcomplete contact filter
2232 There are for some reasons empty <a> tags. I don't know why */
2233 .textcomplete-item .contact-wrapper a {
2238 body .tread-wrapper .hovercard a,
2239 body .tread-wrapper .hovercard a:hover {
2242 body .tread-wrapper .hovercard:hover .hover-card-content a {
2243 color: $link_color !important;