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");
26 background-color: $bgcolor;
27 background-image: url("$background_image");
28 background-size: $background_size_img;
31 font-family: 'Open Sans',sans-serif;
37 text-decoration: none;
40 body a:hover, body a:focus, body a:active, body a.active, body .btn-link:hover{
42 color: $link_hover_color;
43 text-decoration: none;
64 * standard page elements
76 padding: 0 12px 0 12px;
78 background-color: #aaa;
83 * Overwriting and Extend Bootstrap
86 color: #fff !important;
94 -webkit-box-shadow: none;
96 -moz-box-shadow: none;
97 background-image: none;
100 outline: 0!important;
109 color: #7a7a7a!important;
117 color: $btn_primary_color !important;
119 .btn-primary:hover, .btn-primary:focus {
120 background: $btn_primary_hover_color;
121 text-decoration: none;
123 .btn-primary:active, .btn-primary.active {
125 background: $btn_primary_hover_color !important;
131 .btn-link:focus, .btn-link:hover {
136 color: #fff!important;
138 .btn-info:hover, .btn-info:focus {
139 background: #59d6e4!important;
140 text-decoration: none;
142 .btn-info:active, .btn-info.active {
148 /*background: #6fdbe8;*/
149 background: $link_color;
150 color: #fff!important;
152 .btn-main:hover, .btn-main:focus {
153 /*background: #59d6e4!important;*/
154 background: $link_hover_color !important;
155 text-decoration: none;
157 .btn-main:active, .btn-main.active {
159 /*background: #59d6e4;*/
160 background: $link_hover_color;
178 @media (min-width: 992px) {
179 .topbar ul.nav>li>a {
181 padding-bottom: 15px;
185 @media (max-width: 991px) {
186 .topbar ul.nav>li>a { padding-left: 10px; padding-right: 10px; };
188 .topbar .dropdown-footer {
191 .topbar .dropdown-header {
198 .topbar .dropdown-header .dropdown-header-link {
203 .topbar .dropdown-header .dropdown-header-link a {
204 /*color: #6fdbe8!important;*/
205 color: $link_color !important;
209 .topbar .dropdown-header:hover {
214 background-color: $nav_bg;
217 color: $nav_icon_color;
219 #topbar-first .nav>li>a:hover,
220 #topbar-first .nav>li>a:focus,
221 #topbar-first .nav>.open>a,
222 nav.navbar .nav>li>a:hover,
223 nav.navbar .nav>li>a:focus{
224 background-color: $nav_icon_hover_color;
226 #topbar-first .nav>.account {
230 #topbar-first .nav>.account img {
236 #topbar-first .nav>.account .dropdown-toggle {
237 padding: 10px 5px 8px;
241 #topbar-first .nav>.account .dropdown-toggle span {
244 #topbar-first .topbar-brand {
248 #topbar-first .topbar-actions {
252 #topbar-first .topbar-nav {
253 /*position: absolute;*/
259 #topbar-first .topbar-nav .nav-segment {
263 #topbar-first .topbar-nav .nav-segment>a {
264 /* padding: 5px 10px;
266 display: inline-block;
267 /* border-radius: 2px;*/
268 text-decoration: none;
271 #topbar-first .topbar-nav .nav-segment .nav-notify {
275 background-color: #ff8989;
277 /* text-transform: uppercase;
278 display: inline-block;
279 padding: 3px 5px 4px;
281 font-size: 10px!important;
282 color: #fff!important;
283 vertical-align: baseline;
288 #topbar-first .topbar-nav .arrow:after {
293 border-color: transparent;
300 border-bottom-color: #fff;
303 #topbar-first .topbar-nav .arrow {
308 border-color: transparent;
315 border-bottom-color: rgba(0, 0, 0, .15);
319 #topbar-first .topbar-nav .dropdown-menu {
323 #topbar-first .topbar-nav .dropdown-menu ul.media-list {
327 #topbar-first .topbar-nav .dropdown-menu li {
330 #topbar-first .topbar-nav .dropdown-menu li i.approval {
336 #topbar-first .topbar-nav .dropdown-menu li i.accepted {
339 #topbar-first .topbar-nav .dropdown-menu li i.declined {
342 #topbar-first .topbar-nav .dropdown-menu li .media {
345 #topbar-first .topbar-nav .dropdown-menu li .media .img-space {
350 #topbar-first .dropdown-footer {
351 margin: 10px 10px 5px
356 color: $nav_icon_color;
358 #topbar-first .caret {
359 border-top-color: #bebebe
361 #topbar-first .btn-group>a {
362 background-color: #7f9baa
364 #topbar-first .btn-enter {
365 background-color: #7f9baa;
368 #topbar-first .btn-enter:hover {
369 background-color: #89a2b0
373 /* Notification Menu */
374 #topbar-first #nav-notifications-menu {
377 #topbar-first #nav-notifications-menu a {
381 #topbar-first #nav-notifications-menu li.notif-entry {
384 border-bottom: 1px solid #eee;
386 border-left: 3px solid #fff;
390 #topbar-first #nav-notifications-menu li.notify-unseen {
391 border-left: 3px solid #f3fcfd;
392 background-color: #f3fcfd;
394 #topbar-first #nav-notifications-menu li.notif-entry:hover {
395 background-color: #f7f7f7;
396 /*border-left: 3px solid #6fdbe8;*/
397 border-left: 3px solid $link_color;
399 /*#topbar-first #nav-notifications-menu i.accepted {
400 color: #6fdbe8!important
402 #topbar-first #nav-notifications-menu i.declined {
403 color: #ff8989!important
405 #topbar-first #nav-notifications-menu li.placeholder {
408 #topbar-first #nav-notifications-menu .media .media-body {
409 font-size: 13px!important;
410 font-weight: 600!important;
412 #topbar-first #nav-notifications-menu .media .media-body .contactname {
415 #topbar-first #nav-notifications-menu .media .media-body .label {
418 #topbar-first #nav-notifications-menu li.notif-entry .media-object a img {
423 #topbar-first .account .user-title {
426 #topbar-first .account .user-title span {
429 #topbar-first .account #main-menu .nav-notify {
433 background-color: #ff8989;
435 #topbar-first .dropdown.account>a,
436 #topbar-first .dropdown.account.open>a,
437 #topbar-first .dropdown.account>a:hover,
438 #topbar-first .dropdown.account.open>a:hover {
439 background-color: $nav_bg
442 #topbar-first #search-box .navbar-form {
446 #topbar-first #search-box .form-search {
449 background-position: 8px 4px;
451 #topbar-first #search-box .btn {
460 background-color: #fff;
462 background-image: none;
463 -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
464 -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
465 box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
466 border-bottom: 1px solid #d4d4d4
468 #topbar-second > .container {
471 @media screen and (max-width: 767px) {
472 #topbar-second > .container,
473 #topbar-second #navbar-button {
477 #topbar-second .dropdown-menu {
481 #topbar-second .dropdown-menu .divider {
484 #topbar-second #space-menu-dropdown,
485 #topbar-second #search-menu-dropdown {
488 #topbar-second #space-menu-dropdown .media-list,
489 #topbar-second #search-menu-dropdown .media-list {
493 @media screen and (max-width: 768px) {
494 #topbar-second #space-menu-dropdown .media-list,
495 #topbar-second #search-menu-dropdown .media-list {
499 #topbar-second #space-menu-dropdown form,
500 #topbar-second #search-menu-dropdown form {
503 #topbar-second #space-menu-dropdown .search-reset,
504 #topbar-second #search-menu-dropdown .search-reset {
513 #topbar-second .nav>li>a {
515 text-decoration: none;
519 text-transform: uppercase;
523 #topbar-second .nav>li>a:hover,
524 #topbar-second .nav>li>a:active,
525 #topbar-second .nav>li>a:focus {
526 /*border-bottom: 3px solid #6fdbe8;*/
527 border-bottom: 3px solid $link_color;
528 background-color: #f7f7f7;
530 text-decoration: none
532 #topbar-second .nav>li>a i {
535 #topbar-second .nav>li>a .caret {
536 border-top-color: #7a7a7a
538 #topbar-second .nav>li>ul>li>a {
539 border-left: 3px solid #fff;
540 background-color: #fff;
543 #topbar-second .nav>li>ul>li>a:hover,
544 #topbar-second .nav>li>ul>li>a.active {
545 /*border-left: 3px solid #6fdbe8;*/
546 border-left: 3px solid $link_color;
547 background-color: #f7f7f7;
550 #topbar-second .nav>li.active>a {
553 #topbar-second .nav>li>a#space-menu {
555 border-right: 1px solid #ededed
557 #topbar-second .nav>li>a#search-menu {
560 #topbar-second .nav>li>a:hover,
561 #topbar-second .nav .open>a,
562 #topbar-second .nav>li.active {
563 /*border-bottom: 3px solid #6fdbe8;*/
564 border-left: 3px solid $link_color;
565 background-color: #f7f7f7;
568 #topbar-second .nav>li.active>a:hover {
571 #topbar-second #space-menu-dropdown li>ul>li>a>.media .media-body p {
580 .nav-pills .dropdown-menu,
581 .nav-tabs .dropdown-menu,
582 .account .dropdown-menu,
583 .contact-photo-wrapper .dropdown-menu {
584 background-color: $nav_bg;
587 .nav-pills .dropdown-menu li.divider,
588 .nav-tabs .dropdown-menu li.divider,
589 .account .dropdown-menu li.divider,
590 .contact-photo-wrapper .dropdown-menu li.divider {
591 background-color: $menu_background_hover_color;
593 margin: 9px 1px!important
595 .nav-pills .dropdown-menu li,
596 .nav-tabs .dropdown-menu li,
597 .account .dropdown-menu li,
598 .contact-photo-wrapper .dropdown-menu li {
599 border-left: 3px solid $nav_bg;
601 .nav-pills .dropdown-menu li a,
602 .nav-tabs .dropdown-menu li a,
603 .account .dropdown-menu li a,
604 .contact-photo-wrapper .dropdown-menu li a {
605 color: $nav_icon_color;
610 .nav-pills .dropdown-menu li a i,
611 .nav-tabs .dropdown-menu li a i,
612 .account .dropdown-menu li a i,
613 .contact-photo-wrapper .dropdown-menu li a i {
616 display: inline-block;
619 .nav-pills .dropdown-menu li a:hover,
620 .nav-tabs .dropdown-menu li a:hover,
621 .account .dropdown-menu li a:hover,
622 .contact-photo-wrapper .dropdown-menu li a:hover,
623 .nav-pills .dropdown-menu li a:visited,
624 .nav-tabs .dropdown-menu li a:visited,
625 .account .dropdown-menu li a:visited,
626 .contact-photo-wrapper .dropdown-menu li a:visited,
627 .nav-pills .dropdown-menu li a:hover,
628 .nav-tabs .dropdown-menu li a:hover,
629 .account .dropdown-menu li a:hover,
630 .contact-photo-wrapper .dropdown-menu li a:hover,
631 .nav-pills .dropdown-menu li a:focus,
632 .nav-tabs .dropdown-menu li a:focus,
633 .account .dropdown-menu li a:focus,
634 .contact-photo-wrapper .dropdown-menu li a:focus {
637 .nav-pills .dropdown-menu li:hover,
638 .nav-tabs .dropdown-menu li:hover,
639 .account .dropdown-menu li:hover,
640 .contact-photo-wrapper .dropdown-menu li:hover,
641 .nav-pills .dropdown-menu li.selected,
642 .nav-tabs .dropdown-menu li.selected,
643 .account .dropdown-menu li.selected,
644 .contact-photo-wrapper .dropdown-menu li.selected {
645 /*border-left: 3px solid #6fdbe8;*/
646 border-left: 3px solid $link_color;
647 color: #fff!important;
648 background-color: $menu_background_hover_color !important
650 .nav-pills.preferences .dropdown .dropdown-toggle {
653 .nav-pills.preferences .dropdown.open .dropdown-toggle,
654 .nav-pills.preferences .dropdown.open .dropdown-toggle:hover {
655 background-color: $nav_bg
658 .nav-pills.preferences .dropdown .dropdown-toggle {
669 .nav-container .widget {
672 /*background-color: #fff;*/
673 background-color: rgba(255,255,255,$contentbg_transp);
674 box-shadow: 0 0 3px #dadada;
675 -webkit-box-shadow: 0 0 3px #dadada;
676 -moz-box-shadow: 0 0 3px #dadada;
684 .nav-container .widget h3 {
688 padding-bottom: 20px;
692 .nav-container .widget ul {
698 /*padding-left: 10px;*/
703 .nav-container .widget li {
709 aside .widget li:hover,
710 aside .widget li.selected,
711 .nav-container .widget li:hover {
714 background-color: #f7f7f7;
715 /*border-left: 3px solid #6fdbe8!important;*/
716 border-left: 3px solid $link_color !important;
720 aside .widget li a:hover {
724 /* forumlist widget */
725 aside #datebrowse-sidebar .posted-date-selector-months{
730 aside #datebrowse-sidebar .posted-date-selector-months li{
733 aside #datebrowse-sidebar .posted-date-selector-months li:hover{
738 aside .vcard #profile-photo-wrapper{
741 aside .vcard img.u-photo,
742 aside img.vcard-photo {
746 aside .vcard .tool .action{
753 background: rgba(0,0,0,.50);
757 -webkit-transition: all 0.25s ease-in-out;
758 -moz-transition: all 0.25s ease-in-out;
759 -o-transition: all 0.25s ease-in-out;
760 -ms-transition: all 0.25s ease-in-out;
761 transition: all 0.25s ease-in-out;
763 aside .vcard .tool a {
764 color: rgba(255,255,255,.85);
766 aside .vcard #profile-photo-wrapper:hover .tool .action {
769 aside .vcard .profile-header {
776 aside .vcard .p-addr {
779 text-overflow: ellipsis;
783 aside .vcard .detail {
791 #profile-extra-links {
794 aside .vcard #dfrn-request-link-button,
795 aside .vcard #wallmessage-link-botton {
801 aside .vcard #dfrn-request-link,
802 aside .vcard #wallmessage-link {
806 /* contact block widget */
807 #contact-block .contact-block-content {
812 #contact-block .contact-block-div {
814 margin: 0px 5px 5px 0px;
818 #contact-block contact-block-link {
821 #contact-block .contact-block-img {
828 display: none !important;
845 #jot-modal .modal-header a,
846 #profile-jot-submit-wrapper a {
849 #jot-modal .modal-header {
852 #jot-title-wrap, #jot-category-wrap {
858 #jot-text-wrap textarea {
861 #profile-jot-wrapper button#jot-submit {
869 border: 1px solid #ccc;
874 border: 1px solid #ccc;
879 padding: 10px 10px 0px 0px;
880 -webkit-border-radius: 4px;
881 -moz-border-radius: 4px;
886 width: calc(50% - 10px);
887 border: 1px solid #ccc;
888 margin: 0px 0px 10px 10px;
891 -webkit-border-radius: 4px;
892 -moz-border-radius: 4px;
900 -webkit-border-radius: 4px;
901 -moz-border-radius: 4px;
908 text-overflow: ellipsis;
910 .acl-list-item.groupshow {
911 background-color: #8DB255
913 .acl-list-item.grouphide {
914 background-color: #E68364;
923 /*background-color: #fff;*/
924 background-color: rgba(255,255,255,$contentbg_transp);
925 box-shadow: 0 0 3px #dadada;
926 -webkit-box-shadow: 0 0 3px #dadada;
927 -moz-box-shadow: 0 0 3px #dadada;
935 .panel .panel-body .wall-item-content {
938 .tread-wrapper .media {
940 word-wrap: break-word;
943 /* Thread hover effects */
944 .wall-item-container .wall-item-content a,
945 .wall-item-container .fakelink,
946 .toplevel_item .fakelink,
947 .toplevel_item .wall-item-container .btn-link,
948 .toplevel_item .wall-item-container .wall-item-responses a {
950 -webkit-transition: all 0.25s ease-in-out;
951 -moz-transition: all 0.25s ease-in-out;
952 -o-transition: all 0.25s ease-in-out;
953 -ms-transition: all 0.25s ease-in-out;
954 transition: all 0.25s ease-in-out;
957 .toplevel_item:hover .fakelink, .wall-item-container:hover .fakelink,
958 .toplevel_item:hover .wall-item-container:hover .btn-link,
959 .toplevel_item:hover .wall-item-container:hover .wall-item-responses a,
960 .toplevel_item:hover .wall-item-content a,
961 .toplevel_item:hover .wall-item-name,
962 .wall-item-container:hover .wall-item-content a,
963 .wall-item-container:hover .wall-item-name {
966 -webkit-transition: all 0.25s ease-in-out;
967 -moz-transition: all 0.25s ease-in-out;
968 -o-transition: all 0.25s ease-in-out;
969 -ms-transition: all 0.25s ease-in-out;
970 transition: all 0.25s ease-in-out;
974 .wall-item-container {
978 /* wall items contact photo */
983 /*maybe some adional stuff is needed for the different screen sizes */
985 .contact-photo-image-wrapper {
992 .contact-photo-overlay {
1000 background:rgba(0,0,0,.50);
1003 -webkit-transition: opacity .25s ease;
1004 -moz-transition: opacity .25s ease;
1006 .contact-photo-overlay:hover {
1009 .contact-photo-overlay-content {
1011 text-shadow: 1px 1px 1px #ccc;
1012 color:rgba(255,255,255,.85);
1014 vertical-align: bottom;
1021 .wwto .contact-photo {
1030 display: inline-block;
1033 /* wall items action dropdown menu */
1034 .nav-pills.preferences {
1039 .comment .nav-pills.preferences {
1043 .wall-item-network {
1047 /* wall items contact info */
1048 .media .media-body {
1051 .media .media-body h4.media-heading {
1056 .media .media-body .addional-info a,
1057 .media .media-body h5.media-heading a {
1060 .media .contact-info-xs h5 {
1071 /* The lock symbol popup */
1075 background-color: $nav_bg;
1085 color: $nav_icon_color;
1089 /* wall items content */
1090 .wall-item-content {
1091 word-break: break-word;
1093 .shared-content-wrapper,
1098 box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .1) inset, 0 1px 1px rgba(0, 0, 0, .05);
1100 @media screen and (max-width: 767px) {
1101 .shared-content-wrapper,
1107 .shared-content-wrapper:hover,
1109 box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .15) inset, 0 1px 1px rgba(0, 0, 0, .05);
1118 blockquote.shared_content {
1132 /* item social action buttons */
1133 .wall-item-actions, .wall-item-actions a {
1140 .wall-item-actions a:hover {
1143 .wall-item-actions-left {
1144 display: table-cell;
1145 vertical-align: middle;
1147 .wall-item-actions-right {
1150 .wall-item-actions .checkbox {
1154 .wall-item-actions .button-event {
1159 /* wall item hover effects */
1160 .wall-item-container .wall-item-links,
1161 .wall-item-container .wall-item-actions {
1163 -webkit-transition: all 0.25s ease-in-out;
1164 -moz-transition: all 0.25s ease-in-out;
1165 -o-transition: all 0.25s ease-in-out;
1166 -ms-transition: all 0.25s ease-in-out;
1167 transition: all 0.25s ease-in-out;
1169 .wall-item-container:hover .wall-item-links,
1170 .wall-item-container:hover .wall-item-actions {
1172 -webkit-transition: all 0.25s ease-in-out;
1173 -moz-transition: all 0.25s ease-in-out;
1174 -o-transition: all 0.25s ease-in-out;
1175 -ms-transition: all 0.25s ease-in-out;
1176 transition: all 0.25s ease-in-out;
1185 background-color: #ededed;
1186 background-image: none;
1194 margin: 15px 0 10px;
1195 border-top: 1px solid #d9d9d9;
1200 .comment-container {
1203 border-top-left-radius: 3px;
1204 border-top-right-radius: 3px;
1205 border-bottom-right-radius: 0px;
1206 border-bottom-left-radius: 0px;
1209 position: relative!important;
1212 .hide-comments-outer-wrapper {
1213 /* text-align: center;
1214 margin-top: -18px;*/
1216 .hide-comments-total {
1223 .thread_level_2 .wall-item-comment-wrapper {
1226 .comment-edit-submit-wrapper {
1227 margin-bottom: 25px;
1229 .comment-edit-submit-wrapper a,
1230 .comment-edit-submit-wrapper a:hover {
1232 padding-top: 5px !important;
1233 padding-bottom: 5px !important;
1239 background-color: #ffffff;
1244 box-shadow: 0 6px 12px rgba(0,0,0,.175);
1251 .acpopupitem.selected {
1252 background-color: $nav_bg;
1253 color: $nav_icon_color;
1260 /* The wall-item thread levels */
1261 /*.wall-item-container.thread_level_3 {
1263 width: calc(100% - 90px);
1265 .wall-item-container.thread_level_4 {
1267 width: calc(100% - 105px);
1269 .wall-item-container.thread_level_5 {
1271 width: calc(100% - 120px);
1273 .wall-item-container.thread_level_6 {
1275 width: calc(100% - 135px);
1277 .wall-item-container.thread_level_7 {
1279 width: calc(100% - 150px);
1282 .wall-item-container.thread_level_3,
1283 .wall-item-container.thread_level_4,
1284 .wall-item-container.thread_level_5,
1285 .wall-item-container.thread_level_6,
1286 .wall-item-container.thread_level_7 {
1293 /*margin-left: -15px;*/
1307 /*border-bottom: 0 solid #6fdbe8;*/
1308 border-bottom: 0 solid $link_color;
1311 transition: all .15s ease;
1317 color: $link_color !important;
1319 ul.tabs li:hover, ul.tabs li.active {
1320 border-bottom-width: 4px;
1322 ul.dropdown-menu li:hover {
1323 border-bottom-width: 0;
1328 .dropdown-menu li a {
1329 font-size: 13px!important;
1330 font-weight: 600!important;
1332 .dropdown-menu li a:hover, .dropdown-menu li a:visited,
1333 .dropdown-menu li a:hover, .dropdown-menu li a:focus {
1337 .dropdown-menu li:first-child {
1341 /* Notificaiotn badges */
1354 border: 2px solid #ededed;
1357 .form-control:focus {
1358 /*border: 2px solid #6fdbe8;*/
1359 border: 2px solid $link_color;
1365 .checkbox input[type="checkbox"]:focus + label::before,
1366 .checkbox input[type="radio"]:focus + label::before {
1367 /*border: 2px solid #6fdbe8;*/
1368 border: 2px solid $link_color;
1374 .form-control.form-search {
1375 border-radius: 30px;
1376 background-image: url(img/icon_search16x16.png);
1377 background-repeat: no-repeat;
1378 background-position: 10px 8px;
1381 .form-group-search {
1385 .form-group-search {
1389 .form-group-search .form-button-search {
1393 border-radius: 30px;
1399 #profile-page, .photos-content-wrapper, .settings-content-wrapper {
1401 padding-bottom: 20px;
1402 margin-bottom: 20px;
1404 /*background-color: #fff;*/
1405 background-color: rgba(255,255,255,$contentbg_transp);
1410 box-shadow: 0 0 3px #dadada;
1411 -webkit-box-shadow: 0 0 3px #dadada;
1412 -moz-box-shadow: 0 0 3px #dadada;
1414 #profile-content-standard,
1415 #profile-content-advanced {
1420 margin-bottom: 20px;
1422 .contact-block-div.forumlist-profile-advanced {
1427 * Overwriting for transparency and other colors
1429 main .nav-tabs>li.active>a,
1430 main .nav-tabs>li.active>a:focus,
1431 main .nav-tabs>li.active>a:hover {
1432 background-color: rgba(255,255,255,$contentbg_transp);