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;
52 border-color: rgba(238, 238, 238, $contentbg_transp);
68 * standard page elements
80 padding: 0 12px 0 12px;
82 background-color: #aaa;
87 * Overwriting and Extend Bootstrap
90 color: #fff !important;
98 -webkit-box-shadow: none;
100 -moz-box-shadow: none;
101 background-image: none;
104 outline: 0!important;
113 color: #7a7a7a!important;
121 color: $btn_primary_color !important;
123 .btn-primary:hover, .btn-primary:focus {
124 background: $btn_primary_hover_color;
125 text-decoration: none;
127 .btn-primary:active, .btn-primary.active {
129 background: $btn_primary_hover_color !important;
135 .btn-link:focus, .btn-link:hover {
140 color: #fff!important;
142 .btn-info:hover, .btn-info:focus {
143 background: #59d6e4!important;
144 text-decoration: none;
146 .btn-info:active, .btn-info.active {
152 /*background: #6fdbe8;*/
153 background: $link_color;
154 color: #fff!important;
156 .btn-main:hover, .btn-main:focus {
157 /*background: #59d6e4!important;*/
158 background: $link_hover_color !important;
159 text-decoration: none;
161 .btn-main:active, .btn-main.active {
163 /*background: #59d6e4;*/
164 background: $link_hover_color;
168 header #site-location {
182 text-shadow: 1px 1px 2px rgba(0,0,0,.5);
184 font-family: tahoma, "Lucida Sans", sans;
189 header #banner #logo-img {
190 mask: url('img/friendica-logo.svg#logo_mask');
191 mask-image: url('img/friendica-25.png');
192 -webkit-mask-image: url('img/friendica-25.png');
193 background-color: $nav_icon_color;
215 @media (min-width: 992px) {
216 .topbar ul.nav>li>a {
218 padding-bottom: 15px;
222 @media (max-width: 991px) {
223 .topbar ul.nav>li>a { padding-left: 10px; padding-right: 10px; };
225 .topbar .dropdown-footer {
228 .topbar .dropdown-header {
235 .topbar .dropdown-header .dropdown-header-link {
240 .topbar .dropdown-header .dropdown-header-link a {
241 /*color: #6fdbe8!important;*/
242 color: $link_color !important;
246 .topbar .dropdown-header:hover {
251 background-color: $nav_bg;
254 color: $nav_icon_color;
256 #topbar-first .nav>li>a:hover,
257 #topbar-first .nav>li>a:focus,
258 #topbar-first .nav>.open>a,
259 nav.navbar .nav>li>a:hover,
260 nav.navbar .nav>li>a:focus{
261 background-color: $nav_icon_hover_color;
263 #topbar-first .nav>.account {
267 #topbar-first .nav>.account img {
273 #topbar-first .nav>.account .dropdown-toggle {
274 padding: 10px 5px 8px;
278 #topbar-first .nav>.account .dropdown-toggle span {
281 #topbar-first .topbar-brand {
285 #topbar-first .topbar-actions {
289 #topbar-first .topbar-nav {
290 /*position: absolute;*/
296 #topbar-first .topbar-nav .nav-segment {
300 #topbar-first .topbar-nav .nav-segment>a {
301 /* padding: 5px 10px;
303 display: inline-block;
304 /* border-radius: 2px;*/
305 text-decoration: none;
308 #topbar-first .topbar-nav .nav-segment .nav-notify {
312 background-color: #ff8989;
314 /* text-transform: uppercase;
315 display: inline-block;
316 padding: 3px 5px 4px;
318 font-size: 10px!important;
319 color: #fff!important;
320 vertical-align: baseline;
325 #topbar-first .topbar-nav .arrow:after {
330 border-color: transparent;
337 border-bottom-color: #fff;
340 #topbar-first .topbar-nav .arrow {
345 border-color: transparent;
352 border-bottom-color: rgba(0, 0, 0, .15);
356 #topbar-first .topbar-nav .dropdown-menu {
360 #topbar-first .topbar-nav .dropdown-menu ul.media-list {
364 #topbar-first .topbar-nav .dropdown-menu li {
367 #topbar-first .topbar-nav .dropdown-menu li i.approval {
373 #topbar-first .topbar-nav .dropdown-menu li i.accepted {
376 #topbar-first .topbar-nav .dropdown-menu li i.declined {
379 #topbar-first .topbar-nav .dropdown-menu li .media {
382 #topbar-first .topbar-nav .dropdown-menu li .media .img-space {
387 #topbar-first .dropdown-footer {
388 margin: 10px 10px 5px
393 color: $nav_icon_color;
395 #topbar-first .caret {
396 border-top-color: #bebebe
398 #topbar-first .btn-group>a {
399 background-color: #7f9baa
401 #topbar-first .btn-enter {
402 background-color: #7f9baa;
405 #topbar-first .btn-enter:hover {
406 background-color: #89a2b0
410 /* Notification Menu */
411 #topbar-first #nav-notifications-menu {
414 #topbar-first #nav-notifications-menu a {
418 #topbar-first #nav-notifications-menu li.notif-entry {
421 border-bottom: 1px solid #eee;
423 border-left: 3px solid #fff;
427 #topbar-first #nav-notifications-menu li.notify-unseen {
428 border-left: 3px solid #f3fcfd;
429 background-color: #f3fcfd;
431 #topbar-first #nav-notifications-menu li.notif-entry:hover {
432 background-color: #f7f7f7;
433 /*border-left: 3px solid #6fdbe8;*/
434 border-left: 3px solid $link_color;
436 /*#topbar-first #nav-notifications-menu i.accepted {
437 color: #6fdbe8!important
439 #topbar-first #nav-notifications-menu i.declined {
440 color: #ff8989!important
442 #topbar-first #nav-notifications-menu li.placeholder {
445 #topbar-first #nav-notifications-menu .media .media-body {
446 font-size: 13px!important;
447 font-weight: 600!important;
449 #topbar-first #nav-notifications-menu .media .media-body .contactname {
452 #topbar-first #nav-notifications-menu .media .media-body .label {
455 #topbar-first #nav-notifications-menu li.notif-entry .media-object a img {
460 #topbar-first .account .user-title {
463 #topbar-first .account .user-title span {
466 #topbar-first .account #main-menu .nav-notify {
470 background-color: #ff8989;
474 background-color: $nav_bg;
475 color: $nav_icon_color;
477 #topbar-first .dropdown.account>a,
478 #topbar-first .dropdown.account.open>a,
479 #topbar-first .dropdown.account>a:hover,
480 #topbar-first .dropdown.account.open>a:hover {
481 background-color: $nav_bg
484 #topbar-first #search-box .navbar-form {
488 #topbar-first #search-box .form-search {
491 background-position: 8px 4px;
493 #topbar-first #search-box .btn {
502 background-color: #fff;
504 background-image: none;
505 -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
506 -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
507 box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
508 border-bottom: 1px solid #d4d4d4
510 #topbar-second > .container {
513 @media screen and (max-width: 767px) {
514 #topbar-second > .container,
515 #topbar-second #navbar-button {
519 #topbar-second .dropdown-menu {
523 #topbar-second .dropdown-menu .divider {
526 #topbar-second #space-menu-dropdown,
527 #topbar-second #search-menu-dropdown {
530 #topbar-second #space-menu-dropdown .media-list,
531 #topbar-second #search-menu-dropdown .media-list {
535 @media screen and (max-width: 768px) {
536 #topbar-second #space-menu-dropdown .media-list,
537 #topbar-second #search-menu-dropdown .media-list {
541 #topbar-second #space-menu-dropdown form,
542 #topbar-second #search-menu-dropdown form {
545 #topbar-second #space-menu-dropdown .search-reset,
546 #topbar-second #search-menu-dropdown .search-reset {
555 #topbar-second .nav>li>a {
557 text-decoration: none;
561 text-transform: uppercase;
565 #topbar-second .nav>li>a:hover,
566 #topbar-second .nav>li>a:active,
567 #topbar-second .nav>li>a:focus {
568 /*border-bottom: 3px solid #6fdbe8;*/
569 border-bottom: 3px solid $link_color;
570 background-color: #f7f7f7;
572 text-decoration: none
574 #topbar-second .nav>li>a i {
577 #topbar-second .nav>li>a .caret {
578 border-top-color: #7a7a7a
580 #topbar-second .nav>li>ul>li>a {
581 border-left: 3px solid #fff;
582 background-color: #fff;
585 #topbar-second .nav>li>ul>li>a:hover,
586 #topbar-second .nav>li>ul>li>a.active {
587 /*border-left: 3px solid #6fdbe8;*/
588 border-left: 3px solid $link_color;
589 background-color: #f7f7f7;
592 #topbar-second .nav>li.active>a {
595 #topbar-second .nav>li>a#space-menu {
597 border-right: 1px solid #ededed
599 #topbar-second .nav>li>a#search-menu {
602 #topbar-second .nav>li>a:hover,
603 #topbar-second .nav .open>a,
604 #topbar-second .nav>li.active {
605 /*border-bottom: 3px solid #6fdbe8;*/
606 border-left: 3px solid $link_color;
607 background-color: #f7f7f7;
610 #topbar-second .nav>li.active>a:hover {
613 #topbar-second #space-menu-dropdown li>ul>li>a>.media .media-body p {
622 .nav-pills .dropdown-menu,
623 .nav-tabs .dropdown-menu,
624 .account .dropdown-menu,
625 .contact-photo-wrapper .dropdown-menu {
626 background-color: $nav_bg;
629 .nav-pills .dropdown-menu li.divider,
630 .nav-tabs .dropdown-menu li.divider,
631 .account .dropdown-menu li.divider,
632 .contact-photo-wrapper .dropdown-menu li.divider {
633 background-color: $menu_background_hover_color;
635 margin: 9px 1px!important
637 .nav-pills .dropdown-menu li,
638 .nav-tabs .dropdown-menu li,
639 .account .dropdown-menu li,
640 .contact-photo-wrapper .dropdown-menu li {
641 border-left: 3px solid $nav_bg;
643 .nav-pills .dropdown-menu li a,
644 .nav-tabs .dropdown-menu li a,
645 .account .dropdown-menu li a,
646 .contact-photo-wrapper .dropdown-menu li a {
647 color: $nav_icon_color;
652 .nav-pills .dropdown-menu li a i,
653 .nav-tabs .dropdown-menu li a i,
654 .account .dropdown-menu li a i,
655 .contact-photo-wrapper .dropdown-menu li a i {
658 display: inline-block;
661 .nav-pills .dropdown-menu li a:hover,
662 .nav-tabs .dropdown-menu li a:hover,
663 .account .dropdown-menu li a:hover,
664 .contact-photo-wrapper .dropdown-menu li a:hover,
665 .nav-pills .dropdown-menu li a:visited,
666 .nav-tabs .dropdown-menu li a:visited,
667 .account .dropdown-menu li a:visited,
668 .contact-photo-wrapper .dropdown-menu li a:visited,
669 .nav-pills .dropdown-menu li a:hover,
670 .nav-tabs .dropdown-menu li a:hover,
671 .account .dropdown-menu li a:hover,
672 .contact-photo-wrapper .dropdown-menu li a:hover,
673 .nav-pills .dropdown-menu li a:focus,
674 .nav-tabs .dropdown-menu li a:focus,
675 .account .dropdown-menu li a:focus,
676 .contact-photo-wrapper .dropdown-menu li a:focus {
679 .nav-pills .dropdown-menu li:hover,
680 .nav-tabs .dropdown-menu li:hover,
681 .account .dropdown-menu li:hover,
682 .contact-photo-wrapper .dropdown-menu li:hover,
683 .nav-pills .dropdown-menu li.selected,
684 .nav-tabs .dropdown-menu li.selected,
685 .account .dropdown-menu li.selected,
686 .contact-photo-wrapper .dropdown-menu li.selected {
687 /*border-left: 3px solid #6fdbe8;*/
688 border-left: 3px solid $link_color;
689 color: #fff!important;
690 background-color: $menu_background_hover_color !important
692 .nav-pills.preferences .dropdown .dropdown-toggle {
695 .nav-pills.preferences .dropdown.open .dropdown-toggle,
696 .nav-pills.preferences .dropdown.open .dropdown-toggle:hover {
697 background-color: $nav_bg
700 .nav-pills.preferences .dropdown .dropdown-toggle {
711 .nav-container .widget {
714 /*background-color: #fff;*/
715 background-color: rgba(255,255,255,$contentbg_transp);
716 box-shadow: 0 0 3px #dadada;
717 -webkit-box-shadow: 0 0 3px #dadada;
718 -moz-box-shadow: 0 0 3px #dadada;
726 .nav-container .widget h3 {
730 padding-bottom: 20px;
734 .nav-container .widget ul {
740 /*padding-left: 10px;*/
745 .nav-container .widget li {
751 aside .widget li:hover,
752 aside .widget li.selected,
753 .nav-container .widget li:hover {
756 /*background-color: #f7f7f7;*/
757 background-color: rgba(247, 247, 247, $contentbg_transp);
758 /*border-left: 3px solid #6fdbe8!important;*/
759 border-left: 3px solid $link_color !important;
763 aside .widget li a:hover {
767 /* forumlist widget */
768 aside #datebrowse-sidebar .posted-date-selector-months{
773 aside #datebrowse-sidebar .posted-date-selector-months li{
776 aside #datebrowse-sidebar .posted-date-selector-months li:hover{
781 aside .vcard #profile-photo-wrapper{
784 aside .vcard img.u-photo,
785 aside img.vcard-photo {
789 aside .vcard .tool .action{
796 background: rgba(0,0,0,.50);
800 -webkit-transition: all 0.25s ease-in-out;
801 -moz-transition: all 0.25s ease-in-out;
802 -o-transition: all 0.25s ease-in-out;
803 -ms-transition: all 0.25s ease-in-out;
804 transition: all 0.25s ease-in-out;
806 aside .vcard .tool a {
807 color: rgba(255,255,255,.85);
809 aside .vcard #profile-photo-wrapper:hover .tool .action {
812 aside .vcard .profile-header {
819 aside .vcard .p-addr {
822 text-overflow: ellipsis;
826 aside .vcard .detail {
834 #profile-extra-links {
837 aside .vcard #dfrn-request-link-button,
838 aside .vcard #wallmessage-link-botton {
844 aside .vcard #dfrn-request-link,
845 aside .vcard #wallmessage-link {
849 /* contact block widget */
850 #contact-block .contact-block-content {
855 #contact-block .contact-block-div {
857 margin: 0px 5px 5px 0px;
861 #contact-block contact-block-link {
864 #contact-block .contact-block-img {
871 display: none !important;
888 #jot-modal .modal-header a,
889 #profile-jot-submit-wrapper a {
892 #jot-modal .modal-header {
895 #jot-title-wrap, #jot-category-wrap {
901 #jot-text-wrap textarea {
904 #profile-jot-wrapper button#jot-submit {
912 border: 1px solid #ccc;
917 border: 1px solid #ccc;
922 padding: 10px 10px 0px 0px;
923 -webkit-border-radius: 4px;
924 -moz-border-radius: 4px;
929 width: calc(50% - 10px);
930 border: 1px solid #ccc;
931 margin: 0px 0px 10px 10px;
934 -webkit-border-radius: 4px;
935 -moz-border-radius: 4px;
943 -webkit-border-radius: 4px;
944 -moz-border-radius: 4px;
951 text-overflow: ellipsis;
953 .acl-list-item.groupshow {
954 background-color: #8DB255
956 .acl-list-item.grouphide {
957 background-color: #E68364;
966 /*background-color: #fff;*/
967 background-color: rgba(255,255,255,$contentbg_transp);
968 box-shadow: 0 0 3px #dadada;
969 -webkit-box-shadow: 0 0 3px #dadada;
970 -moz-box-shadow: 0 0 3px #dadada;
978 .panel .panel-body .wall-item-content {
981 .tread-wrapper .media {
983 word-wrap: break-word;
986 /* Thread hover effects */
987 .wall-item-container .wall-item-content a,
988 .wall-item-container .fakelink,
989 .toplevel_item .fakelink,
990 .toplevel_item .wall-item-container .btn-link,
991 .toplevel_item .wall-item-container .wall-item-responses a {
993 -webkit-transition: all 0.25s ease-in-out;
994 -moz-transition: all 0.25s ease-in-out;
995 -o-transition: all 0.25s ease-in-out;
996 -ms-transition: all 0.25s ease-in-out;
997 transition: all 0.25s ease-in-out;
1000 .toplevel_item:hover .fakelink, .wall-item-container:hover .fakelink,
1001 .toplevel_item:hover .wall-item-container:hover .btn-link,
1002 .toplevel_item:hover .wall-item-container:hover .wall-item-responses a,
1003 .toplevel_item:hover .wall-item-content a,
1004 .toplevel_item:hover .wall-item-name,
1005 .wall-item-container:hover .wall-item-content a,
1006 .wall-item-container:hover .wall-item-name {
1009 -webkit-transition: all 0.25s ease-in-out;
1010 -moz-transition: all 0.25s ease-in-out;
1011 -o-transition: all 0.25s ease-in-out;
1012 -ms-transition: all 0.25s ease-in-out;
1013 transition: all 0.25s ease-in-out;
1017 .wall-item-container {
1021 /* wall items contact photo */
1026 /*maybe some adional stuff is needed for the different screen sizes */
1028 .contact-photo-image-wrapper {
1035 .contact-photo-overlay {
1043 background:rgba(0,0,0,.50);
1046 -webkit-transition: opacity .25s ease;
1047 -moz-transition: opacity .25s ease;
1049 .contact-photo-overlay:hover {
1052 .contact-photo-overlay-content {
1054 text-shadow: 1px 1px 1px #ccc;
1055 color:rgba(255,255,255,.85);
1057 vertical-align: bottom;
1064 .wwto .contact-photo {
1073 display: inline-block;
1076 /* wall items action dropdown menu */
1077 .nav-pills.preferences {
1082 .comment .nav-pills.preferences {
1086 .wall-item-network {
1090 /* wall items contact info */
1091 .media .media-body {
1094 .media .media-body h4.media-heading {
1099 .media .media-body .addional-info a,
1100 .media .media-body h5.media-heading a {
1103 .media .contact-info-xs h5 {
1114 /* The lock symbol popup */
1118 background-color: $nav_bg;
1128 color: $nav_icon_color;
1132 /* wall items content */
1133 .wall-item-content {
1134 word-break: break-word;
1136 .wall-item-content img {
1139 .shared-content-wrapper,
1144 box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .1) inset, 0 1px 1px rgba(0, 0, 0, .05);
1146 @media screen and (max-width: 767px) {
1147 .shared-content-wrapper,
1153 .shared-content-wrapper:hover,
1155 box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .15) inset, 0 1px 1px rgba(0, 0, 0, .05);
1164 blockquote.shared_content {
1178 /* item social action buttons */
1179 .wall-item-actions, .wall-item-actions a {
1186 .wall-item-actions a:hover {
1189 .wall-item-actions-left {
1190 display: table-cell;
1191 vertical-align: middle;
1193 .wall-item-actions-right {
1196 .wall-item-actions .checkbox {
1200 .wall-item-actions .button-event {
1205 /* wall item hover effects */
1206 .wall-item-container .wall-item-links,
1207 .wall-item-container .wall-item-actions {
1209 -webkit-transition: all 0.25s ease-in-out;
1210 -moz-transition: all 0.25s ease-in-out;
1211 -o-transition: all 0.25s ease-in-out;
1212 -ms-transition: all 0.25s ease-in-out;
1213 transition: all 0.25s ease-in-out;
1215 .wall-item-container:hover .wall-item-links,
1216 .wall-item-container:hover .wall-item-actions {
1218 -webkit-transition: all 0.25s ease-in-out;
1219 -moz-transition: all 0.25s ease-in-out;
1220 -o-transition: all 0.25s ease-in-out;
1221 -ms-transition: all 0.25s ease-in-out;
1222 transition: all 0.25s ease-in-out;
1231 /*background-color: #ededed;*/
1232 background-color: rgba(237, 237, 237, $contentbg_transp);
1233 background-image: none;
1241 margin: 15px 0 10px;
1242 border-top: 1px solid #d9d9d9;
1247 .comment-container {
1250 border-top-left-radius: 3px;
1251 border-top-right-radius: 3px;
1252 border-bottom-right-radius: 0px;
1253 border-bottom-left-radius: 0px;
1256 position: relative!important;
1259 .hide-comments-outer-wrapper {
1260 /* text-align: center;
1261 margin-top: -18px;*/
1263 .hide-comments-total {
1270 .thread_level_2 .wall-item-comment-wrapper {
1273 .comment-edit-submit-wrapper {
1274 margin-bottom: 25px;
1276 .comment-edit-submit-wrapper a,
1277 .comment-edit-submit-wrapper a:hover {
1279 padding-top: 5px !important;
1280 padding-bottom: 5px !important;
1283 /* acpopup + textcompletion*/
1285 /* max-height: 150px; */
1286 background-color: #ffffff;
1290 box-shadow: 0 6px 12px rgba(0,0,0,.175);
1293 /*top: 35px !important;*/
1296 /** @todo: we schould consider the possebility to overwrite bootstrap dropdowns
1297 at the beginning of this file */
1298 .textcomplete-item a {
1299 color: #555 !important;
1301 .textcomplete-item.active > a {
1302 background-color: rgb(247, 247, 247) !important;
1303 background-image: none !important;
1304 border-left: 3px solid $link_color;
1305 padding-left: 17px !important;
1307 .textcomplete-item a .forum {
1312 /* The wall-item thread levels */
1313 /*.wall-item-container.thread_level_3 {
1315 width: calc(100% - 90px);
1317 .wall-item-container.thread_level_4 {
1319 width: calc(100% - 105px);
1321 .wall-item-container.thread_level_5 {
1323 width: calc(100% - 120px);
1325 .wall-item-container.thread_level_6 {
1327 width: calc(100% - 135px);
1329 .wall-item-container.thread_level_7 {
1331 width: calc(100% - 150px);
1334 .wall-item-container.thread_level_3,
1335 .wall-item-container.thread_level_4,
1336 .wall-item-container.thread_level_5,
1337 .wall-item-container.thread_level_6,
1338 .wall-item-container.thread_level_7 {
1345 /*margin-left: -15px;*/
1359 /*border-bottom: 0 solid #6fdbe8;*/
1360 border-bottom: 0 solid $link_color;
1363 transition: all .15s ease;
1365 ul.tabs.visible-xs > li.active {
1366 min-width: 150px; /* This is a workaround to make the topbar-second dropdown better visible on mobile. We need something better here */
1372 color: $link_color !important;
1374 ul.tabs li:hover, ul.tabs li.active {
1375 border-bottom-width: 4px;
1377 ul.dropdown-menu li:hover {
1378 border-bottom-width: 0;
1383 .dropdown-menu li a {
1384 font-size: 13px!important;
1385 font-weight: 600!important;
1387 .dropdown-menu li a:hover, .dropdown-menu li a:visited,
1388 .dropdown-menu li a:hover, .dropdown-menu li a:focus {
1392 .dropdown-menu li:first-child {
1396 /* Notificaiotn badges */
1409 border: 2px solid #ededed;
1412 .form-control:focus {
1413 /*border: 2px solid #6fdbe8;*/
1414 border: 2px solid $link_color;
1420 .checkbox input[type="checkbox"]:focus + label::before,
1421 .checkbox input[type="radio"]:focus + label::before {
1422 /*border: 2px solid #6fdbe8;*/
1423 border: 2px solid $link_color;
1429 .form-control.form-search {
1430 border-radius: 30px;
1431 background-image: url(img/icon_search16x16.png);
1432 background-repeat: no-repeat;
1433 background-position: 10px 8px;
1436 .form-group-search {
1440 .form-group-search {
1444 .form-group-search .form-button-search {
1448 border-radius: 30px;
1454 #profile-page, .photos-content-wrapper, .settings-content-wrapper {
1456 padding-bottom: 20px;
1457 margin-bottom: 20px;
1459 /*background-color: #fff;*/
1460 background-color: rgba(255,255,255,$contentbg_transp);
1465 box-shadow: 0 0 3px #dadada;
1466 -webkit-box-shadow: 0 0 3px #dadada;
1467 -moz-box-shadow: 0 0 3px #dadada;
1469 #profile-content-standard,
1470 #profile-content-advanced {
1475 margin-bottom: 20px;
1477 .contact-block-div.forumlist-profile-advanced {
1482 * Overwriting for transparency and other colors
1484 main .nav-tabs>li.active>a,
1485 main .nav-tabs>li.active>a:focus,
1486 main .nav-tabs>li.active>a:hover {
1487 background-color: rgba(255,255,255,$contentbg_transp);
1498 * Framework overwrite
1502 .theme-frio .back-bar {
1503 height: 5px !important;
1505 background-color: #eeeeee;
1506 background-color: #e7e7e7;
1507 background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
1508 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
1509 background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
1510 background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
1511 background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
1512 background-repeat: repeat-x;
1513 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
1515 .theme-frio .back-bar .selected-bar {
1517 background-color: $link_color;
1518 /* background-image: -moz-linear-gradient(top, #bdfade, #76fabc);
1519 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bdfade), to(#76fabc));
1520 background-image: -webkit-linear-gradient(top, #bdfade, #76fabc);
1521 background-image: -o-linear-gradient(top, #bdfade, #76fabc);
1522 background-image: linear-gradient(to bottom, #bdfade, #76fabc);
1523 background-repeat: repeat-x;
1524 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbdfade', endColorstr='#ff76fabc', GradientType=0);*/
1526 .theme-frio .back-bar .pointer {
1527 width: 14px !important;
1528 height: 14px !important;
1530 -webkit-box-sizing: border-box;
1531 -moz-box-sizing: border-box;
1532 box-sizing: border-box;
1533 border-radius: 10px;
1534 border: 1px solid #AAA;
1535 background-color: #e7e7e7 !important;
1536 background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
1537 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
1538 background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
1539 background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
1540 background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
1541 background-repeat: repeat-x;
1542 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
1544 .theme-frio .back-bar .pointer-label {