kicap
/
raspberry-pi-absensi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
raspberry-pi-absensi/assets/less/style.less

3270 lines
68 KiB
Plaintext
Raw Permalink Normal View History

added flask framework, tambah karyawan page, scan absensi,and tambah karyawan open cv
2023-11-06 20:17:14 +00:00
/*
Themes: Ninja Admin
Version 2.0
[Table of contents]
-------------------------------------------------------------------------
1. Footer
2. Box Content
3. Calendar
4. Chartist Chart
5. Checkbox
6. Data Tables
7. Dropcap
8. Example Content
9. Inbox List
10. Jquery UI
11. Menu Mobile Button
12. Morris Chart
13. Notice
14. noUiSlider
15. Process Bar
16. Radio
17. Search Form
18. Statistics Box
19. Switch
20. Tabs
21. Timepicke
22. Title
23. User Info
24. Widget Stat
25. Widget Stat Chart
26. Misc
27. Mailbox
28. Login, Register, ... Form
29. 404,500 Page
30. Projects Page
31. Task Board
32. Profile
33. Contact List
34. Pricing Plan
35. Invoice
36. Gallery
37. Modal
38. Form Control
39. Reviews Widget
40. Activity Widget
41. Todo Widget
42. X-Editable
43. Sparkline Chart
44. SweetAlert
-------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
1. Footer
*/
.footer{
padding: 19px 30px 20px 30px;
margin: 0px -20px 0px -20px;
color: rgba(0, 0, 0, 0.7);
a{ color: rgba(0, 0, 0, 0.7);
@media (min-width: 1025px) { &:hover{ color: @blue; } }
}
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
2. Box Content
*/
.box-content{
position: relative;
padding: 20px;
margin: 0px 0px 20px 0px;
background: @white;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
box-shadow: 0 0 0 1px rgba(0,0,0,.05),0 1px 1px rgba(0,0,0,.05);
-moz-box-shadow: 0 0 0 1px rgba(0,0,0,.05),0 1px 1px rgba(0,0,0,.05);
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.05),0 1px 1px rgba(0,0,0,.05);
&:after{
content: "";
display: block;
width: 0px;
height: 0px;
clear: both;
overflow: hidden;
}
.box-title{
margin: 0px 0px 30px 0px;
font-size: 16px;
line-height: 16px;
font-weight: 600;
transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
.ico{
margin-right: 8px;
line-height: 16px;
}
&.with-control{
.controls{
position: absolute;
right: 20px;
top: 20px;
font-size: 0px;
line-height: 16px;
}
.control{
border: none;
background: none;
outline: none;
height: 16px;
font-size: 14px;
}
.fa-times{
position: relative;
top: -1px;
}
}
}
.content:after{
content: "";
display: block;
width: 0px;
height: 0px;
clear: both;
overflow: hidden;
}
.dropdown.js__drop_down{
position: absolute;
right: 20px;
top: 20px;
.dropdown-icon{ color: @brown;
@media (min-width: 1025px) { &:hover{ color: @dark; } }
}
.sub-menu{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
visibility: hidden;
position: absolute;
top: 0px;
right: 100%;
margin-right: 5px;
z-index: 20;
width: 200px;
margin-top: 2px;
padding: 10px 0px;
border: 1px solid rgba(152, 166, 173, 0.15);
background: @white;
list-style: none;
transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
transform: translate(0, 20px);
-webkit-transform: translate(0, 20px);
-moz-transform: translate(0, 20px);
-o-transform: translate(0, 20px);
-ms-transform: translate(0, 20px);
box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
-moz-box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
-webkit-box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
a{
display: block;
padding: 6px 20px 6px 20px;
color: @dark;
@media (min-width: 1025px) { &:hover{ color: @blue; }}
}
.split{
margin: 9px 0px 9px 0px;
width: 100%;
height: 1px;
background: #e5e5e5;
}
}
&.active{
.dropdown-icon{ color: @dark; }
.sub-menu{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
visibility: visible;
transform: translate(0, 0);
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
-ms-transform: translate(0, 0);
}
}
}
/* State */
&.card-closed{
.box-title{ margin-bottom: 0px !important;
&.with-control{
.fa-minus:before{ content: "\f067"; }
}
}
}
/* Style */
&.bordered{
border-top: 4px solid @dark;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
&.bordered-all{
border: 1px solid @dark;
border-top: 4px solid @dark;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
&.card{
padding: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
.box-title{
margin-bottom: 0px;
padding: 10px 20px 10px 20px;
line-height: 30px;
color: @white !important;
background-color: @dark;
.ico{ line-height: 30px; }
.controls{ top: 17px; }
}
.dropdown{ top: 15px;
.dropdown-icon{ color: @white; }
}
.card-content{ padding: 20px; }
&.bordered-all{ border-top: none; }
.dropdown.js__drop_down .dropdown-icon{ color: @white !important; }
&.white{
.box-title{
color: @dark!important;
background: @white;
border-bottom: 1px solid #e6e9ed;
}
}
}
/* Color */
&.primary{ border-color: @navy;
.box-title{ color: @navy; }
}
&.success{ border-color: @success;
.box-title{ color: @success; }
}
&.info{ border-color: @info;
.box-title{ color: @info; }
}
&.warning{ border-color: @warning;
.box-title{ color: @warning; }
}
&.danger{ border-color: @danger;
.box-title{ color: @danger; }
}
&.muted{ border-color: @muted;
.box-title{ color: @muted; }
}
&.inverse{ border-color: @inverse;
.box-title{ color: @inverse; }
}
&.purple{ border-color: @purple;
.box-title{ color: @purple; }
}
&.pink{ border-color: @pink;
.box-title{ color: @pink; }
}
&.lightdark{ border-color: @muted;
.box-title{ color: @muted; }
}
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
3. Calendar
*/
.calendar {
float: left;
margin-bottom: 0px;
}
.fc-view { margin-top: 30px; }
.none-border .modal-footer { border-top: none; }
.fc-toolbar {
margin-bottom: 5px;
margin-top: 15px;
h2{
font-size: 18px;
line-height: 30px;
font-weight: 600;
text-transform: uppercase;
}
.fc-state-active,.ui-state-active,button:focus,button:hover{ z-index: 0; }
}
.fc-widget-header,.fc-widget-content { border: 1px solid @border; }
.fc{
th.fc-widget-header {
background: #f5f5f5;
font-size: 14px;
line-height: 20px;
padding: 10px 0px 10px 0px;
text-transform: uppercase;
a{
color: #505458;
}
}
.fc-event{
.fc-bg{
display: none;
}
}
.fc-list-item{
&[class*=" bg-"]{
color: @white;
&:hover td{
background: rgba(255,255,255,0.2);
}
}
}
}
.fc-button {
background: @white;
border: 1px solid @border;
color: #555;
text-transform: capitalize;
}
.fc-text-arrow { font-size: 16px; }
.fc-state-hover { background: #f3f3f3; }
.fc-state-highlight,.fc-cell-overlay { background: #f0f0f0; }
.fc-unthemed .fc-today { background: @white; }
.fc .fc-event ,#external-events .fc-event{
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: none;
cursor: move;
font-size: 12px;
margin: 5px 7px 5px 7px;
padding: 5px;
text-align: center;
}
.external-event {
color: @white;
cursor: move;
margin: 10px 0px 10px 0px;
padding: 6px 10px 6px 10px;
}
.fc-basic-view{
td.fc-week-number span, td.fc-day-number { padding-right: 5px; }
}
.fc-toolbar .fc-button-group .fc-button{
background: #ffffff;
&:hover{
background: #F5F5F5;
}
}
.fc .fc-event,.fc .fc-event-dot{
background: @blue;
transition: none;
-moz-transition: none;
-webkit-transition: none;
}
.fc .fc-event-dot{
background: @white;
}
.fc-ltr .fc-basic-view .fc-day-top .fc-day-number{
color: @dark;
}
.fc.fc-ltr .fc-h-event.fc-not-start, .fc.fc-rtl .fc-h-event.fc-not-end{
margin-left: 7px;
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
4. Chartist Chart
*/
.chartist-chart{
.ct-label{ font-size: 12px; }
&-pie{
.ct-label{
font-size: 14px;
color: @white;
fill: #fff;
}
}
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
5. Checkbox
*/
.checkbox{
input[type="checkbox"]{ display: none;
&:checked + label:before{
border-color: #415dfb;
background: #415dfb;
}
&:checked + label:after{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
&:disabled + label{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
-moz-opacity: 0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
}
}
label{
position: relative;
padding-left: 25px;
&:before{
content: "";
position: absolute;
top: 1px;
left: 0px;
width: 17px;
height: 17px;
border: 1px solid #ccc;
background: @white;
transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
}
&:after{
content: "\f00c";
font-family: 'FontAwesome';
font-size: 12px;
line-height: 15px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
position: absolute;
top: 2px;
left: 2px;
color: @white;
transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
}
}
&.primary input[type="checkbox"]:checked + label:before{
background: @navy;
border-color: @navy;
}
&.success input[type="checkbox"]:checked + label:before{
background: @success;
border-color: @success;
}
&.info input[type="checkbox"]:checked + label:before{
background: @info;
border-color: @info;
}
&.warning input[type="checkbox"]:checked + label:before{
background: @warning;
border-color: @warning;
}
&.danger input[type="checkbox"]:checked + label:before{
background: @danger;
border-color: @danger;
}
&.purple input[type="checkbox"]:checked + label:before{
background: @purple;
border-color: @purple;
}
&.pink input[type="checkbox"]:checked + label:before{
background: @pink;
border-color: @pink;
}
&.inverse input[type="checkbox"]:checked + label:before{
background: @inverse;
border-color: @inverse;
}
&.circled label:before{
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
6. Data Tables
*/
.dataTables_wrapper{
.dataTables_paginate .pagination{
margin: 0;
.paginate_button{
padding: 0px;
min-width: 0px;
margin-left: 10px;
border: none !important;
background: none !important;
&:first-child{ margin-left: 0px; }
}
}
.dataTable{
margin-top: 10px!important;
margin-bottom: 18px!important;
.group{
background-color: @blue !important;
color: @white !important;
}
}
.dataTables_scrollBody .dataTable{
margin-top: 0px!important;
margin-bottom: 0px!important;
}
.dataTables_scrollFoot .dataTable{
margin-top: 0px!important;
}
table.dataTable thead , table.dataTable thead{
th,td{
border-bottom-color: #ddd;
padding-left: 8px;
padding-right: 8px;
border-bottom-width: 1px;
}
}
}
table.focus-on tbody tr.focused th, table.focus-on tbody tr.focused td{
background: @blue!important;
color: @white!important;
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
7. Dropcap
*/
.dropcap,.dropcap-circle,.dropcap-square {
display: block;
float: left;
font-weight: 400;
line-height: 36px;
margin-right: 6px;
text-shadow: none;
}
.dropcap {
font-size: 3.1em;
}
.dropcap-circle{
font-size: 26px;
line-height: 36px;
width: 36px;
text-align: center;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
.dropcap-square{
font-size: 26px;
line-height: 36px;
width: 36px;
text-align: center;
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
8. Example Content
*/
.example-content{
position: relative;
padding: 15px;
background: #f5f5f5;
.modal{
display: block;
position: relative;
top: auto;
left: auto;
right: auto;
bottom: auto;
z-index: 10;
}
.modal-dialog{
left: auto;
margin-right: auto;
margin-left: auto;
}
}
.bs-example{
position: relative;
padding: 45px 15px 15px 15px;
margin: 0px;
border: 1px solid #ddd;
background: #f4f4f4;
.bs-title{
position: absolute;
top: 15px;
left: 15px;
font-size: 12px;
font-weight: 700;
color: @dark;
text-transform: uppercase;
}
> .dropdown{
> .dropdown-toggle{ float: left; }
> .dropdown-menu{
position: static;
display: block;
margin-bottom: 5px;
clear: left;
}
}
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
9. Inbox List
*/
.inbox-list{
margin-bottom: 15px;
list-style: none;
padding: 0px;
li{ border-bottom: 1px solid #f3f3f3; }
.avatar{
position: absolute;
top: 10px;
left: 0px;
width: 40px;
height: 40px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
.inbox-item{
position: relative;
min-height: 40px;
padding: 10px 0px 10px 55px;
transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
}
.name{
color: @blue;
margin: 0px;
transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
font-size: 14px;
line-height: 22px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: 500;
@media (min-width: 1025px) { &:hover{ color: @dark_blue; } }
}
.text{
color: #656d78;
font-size: 12px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: 0px;
font-weight: 500;
}
.time{
font-size: 11px;
color: @brown;
position: absolute;
top: 10px;
right: 0px;
}
.full-text .text{ white-space: normal; }
}
.inbox-read-more{
display: block;
color: @dark;
text-align: center;
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
10. Jquery UI
*/
.ui-sortable-placeholder{
border: 2px dashed @dark;
background: #ccc;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
11. Menu Mobile Button
*/
.menu-mobile-button{
display: block;
position: absolute;
top: 0;
left: 0;
height: 75px;
width: 70px;
border: none;
outline: none;
font-size: 20px;
line-height: 75px;
color: @white;
background: @mobile_bg;
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
12. Morris Chart
*/
.morris-chart-detail-list{ margin-top: 10px;
.fa{ margin-right: 5px; }
li:nth-child(1){ color: #fcb03b; }
li:nth-child(2){ color: #ea65a2; }
li:nth-child(3){ color: #566FC9; }
li:nth-child(4){ color: #333333; }
}
.morris-chart-realtime{
.morris-hover-row-label{ display: none; }
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
13. Notice
*/
.notice{
display: inline-block;
-webkit-border-radius: 0.25em;
-moz-border-radius: 0.25em;
border-radius: 0.25em;
padding: 2px 6px 0;
font-size: 75%;
}
.notice-blue{
color: @white;
background: @blue;
}
.notice-purple{
color: @white;
background: @purple;
}
.notice-yellow{
color: @white;
background: @warning;
}
.notice-danger{
color: @white;
background: #ff1744;
}
/* Notice List */
.notice-list{
list-style: none;
padding: 0px;
li{ border-bottom: 1px solid #eaedef; }
a{
display: block;
position: relative;
padding: 14px 15px 14px 85px;
min-height: 75px;
&:hover{ background: #f5f7fa; }
}
.avatar{
position: absolute;
top: 10px;
left: 15px;
width: 55px;
height: 55px;
overflow: hidden;
text-align: center;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
i{
font-size: 24px;
line-height: 55px;
color: @white;
top: 0px;
}
}
.desc{
color: #90a4ae;
font-size: 13px;
line-height: 23px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 100%;
display: block;
}
.name{
display: block;
font-size: 14px;
line-height: 24px;
font-weight: 500;
color: #212121;
transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
display: block;
@media (min-width: 1025px) { &:hover{ color: @blue; } }
}
.time{
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
color: @brown;
position: absolute;
right: 20px;
top: 17px;
}
}
/* Notice Popup */
.notice-popup{
opacity: 0;
visibility: hidden;
position: fixed;
top: 75px;
right: 20px;
z-index: 40;
background: @white;
width: 450px;
max-width: 100%;
padding-top: 50px;
transform: translate(0, 30px);
-webkit-transform: translate(0, 30px);
-moz-transform: translate(0, 30px);
-o-transform: translate(0, 30px);
-ms-transform: translate(0, 30px);
transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
box-shadow: 0 0px 24px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
-webkit-box-shadow: 0 0px 24px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
-moz-box-shadow: 0 0px 24px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
@media(max-width: 550px){
width: 100%;
right: 0;
&#message-popup{
right: 0
}
}
&.active{
opacity: 1;
visibility: visible;
transform: translate(0, 0);
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
-ms-transform: translate(0, 0);
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
background: @brown!important
}
&:hover .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
.content{
overflow: auto;
height: 100%;
.notice-list{
width: 100%;
overflow: hidden;
}
}
.popup-title{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 50px;
padding: 11px 10px 11px 18px;
color: #1b1f20;
margin: 0px;
border-bottom: 1px solid #e6e9ed;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
font-size: 14px;
line-height: 27px;
a{
text-transform: initial;
font-weight: 400;
}
}
.popup-close{
position: absolute;
top: 0px;
right: 0px;
z-index: 10;
font-size: 18px;
line-height: 59px;
padding: 0px 10px 0px 10px;
color: @dark;
@media (min-width: 1025px) { &:hover{ color: @danger; } }
}
.notice-read-more{
font-size: 14px;
line-height: 24px;
color: #212121;
padding: 3px 10px 13px;
text-align: center;
display: block;
&:hover{
color: @blue;
}
}
}
#message-popup{
right: 60px;
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
14. noUiSlider
*/
.noui-connect{
.noUi-origin{
right: auto;
width: 0px;
}
.connect{
position: absolute;
top: 0px;
bottom: 0px;
background: #80C9F5;
box-shadow: inset 0 0 3px rgba(51, 51, 51, 0.45);
-moz-box-shadow: inset 0 0 3px rgba(51, 51, 51, 0.45);
-webkit-box-shadow: inset 0 0 3px rgba(51, 51, 51, 0.45);
}
&.noUi-state-tap{
.connect{
-webkit-transition: left 300ms, right 300ms;
-moz-transition: left 300ms, right 300ms;
transition: left 300ms, right 300ms;
}
}
}
.noui-select,.noui-number{
padding: 7px;
margin: 15px 5px 5px 5px;
width: 70px;
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
15. Process Bar
*/
.process-bar{
display: block;
position: relative;
width: 100%;
height: 5px;
margin-top: 12px;
background: @white;
overflow: hidden;
.bar{
position: absolute;
top: 0px;
left: 0px;
height: 5px;
z-index: 2;
}
.bar-bg{
position: absolute;
top: 0;
left: 0;
height: 5px;
z-index: 1;
opacity: 0.2;
width: 100%;
}
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
16. Radio
*/
.radio{
input[type="radio"]{ display: none;
&:checked + label:before{ border-color: @dark; }
&:checked + label:after{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
&:disabled + label{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
-moz-opacity: 0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
}
}
label{
position: relative;
padding-left: 25px;
&:before{
content: "";
position: absolute;
top: 1px;
left: 0px;
width: 17px;
height: 17px;
border: 1px solid #ccc;
transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
&:after{
content: "";
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
position: absolute;
top: 4px;
left: 3px;
width: 11px;
height: 11px;
background: @dark;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
}
}
&.primary label:after{ background: @blue; }
&.success label:after{ background: @success; }
&.info label:after{ background: @info; }
&.warning label:after{ background: @warning; }
&.danger label:after{ background: @danger; }
&.purple label:after{ background: @purple; }
&.pink label:after{ background: @pink; }
&.inverse label:after{ background: @inverse; }
&.primary input[type="radio"]:checked + label:before{ border-color: @blue; }
&.success input[type="radio"]:checked + label:before{ border-color: @success; }
&.info input[type="radio"]:checked + label:before{ border-color: @info; }
&.warning input[type="radio"]:checked + label:before{ border-color: @warning; }
&.danger input[type="radio"]:checked + label:before{ border-color: @danger; }
&.purple input[type="radio"]:checked + label:before{ order-color: @purple; }
&.pink input[type="radio"]:checked + label:before{ border-color: @pink; }
&.inverse input[type="radio"]:checked + label:before{ border-color: @inverse; }
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
17. Search Form
*/
.searchform{
display: inline-block;
position: relative;
margin-left: 20px;
padding: 13px 0px 13px 0px;
.input-search{
border: none;
width: 190px;
height: 34px;
padding: 7px 40px 7px 20px;
font-size: 13px;
line-height: 20px;
color: @main;
background: @white;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
&::-webkit-input-placeholder{ color: #999999; }
&:-moz-input-placeholder{ color: #999999; }
&::-moz-input-placeholder{ color: #999999; }
&:-ms-input-placeholder{ color: #999999; }
}
.button-search{
position: absolute;
top: 22px;
right: 10px;
color: @dark;
z-index: 10;
background: none;
outline: none;
border: none;
@media (min-width: 1025px) { &:hover{ color: @blue; } }
}
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
18. Statistics Box
*/
.statistics-box{
padding-top: 14px;
min-height: 80px;
text-align: center;
&.with-icon{
position: relative;
padding-left: 80px;
text-align: right;
.ico{
position: absolute;
top: 0px;
left: 0px;
width: 80px;
height: 80px;
font-size: 70px;
line-height: 80px;
text-align: center;
&.small{
font-size: 42px;
}
}
}
.counter{
margin-top: 0px;
margin-bottom: 0px;
}
.text{
color: @brown;
margin: 0px
}
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
19. Switch
*/
.switch{
display: block;
margin-bottom: 10px;
input[type="checkbox"]{ display: none;
&:checked + label:before{
background: @dark;
border-color: @dark;
}
&:checked + label:after{ left: 14px; }
}
label{
position: relative;
padding-left: 40px;
font-weight: 400;
cursor: pointer;
margin: 0px;
min-height: 20px;
&:before{
content: "";
width: 30px;
height: 18px;
position: absolute;
top: 1px;
left: 0px;
border: 1px solid #ddd;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: #f1f1f1;
transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
}
&:after{
content: "";
width: 16px;
height: 16px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
position: absolute;
top: 2px;
left: 0px;
z-index: 10;
background: @white;
transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
}
&.primary input[type="checkbox"]:checked + label:before{
background: @blue;
border-color: @blue;
}
&.success input[type="checkbox"]:checked + label:before{
background: @success;
border-color: @success;
}
&.info input[type="checkbox"]:checked + label:before{
background: @info;
border-color: @info;
}
&.warning input[type="checkbox"]:checked + label:before{
background: @warning;
border-color: @warning;
}
&.danger input[type="checkbox"]:checked + label:before{
background: @danger;
border-color: @danger;
}
&.purple input[type="checkbox"]:checked + label:before{
background: @purple;
border-color: @purple;
}
&.pink input[type="checkbox"]:checked + label:before{
background: @pink;
border-color: @pink;
}
&.inverse input[type="checkbox"]:checked + label:before{
background: @inverse;
border-color: @inverse;
}
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
20. Tabs
*/
.tab-content{
padding: 15px;
border: 1px solid #ddd;
border-top: none;
}
.tab-header{
padding: 15px;
border: 1px solid #ddd;
.navbar{
margin-bottom: 0px;
border: none;
min-height: auto;
}
&.pill{
border: none;
padding: 0px;
}
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
21. Timepicke
*/
.bootstrap-timepicker-widget table td{
a:hover {
background-color: transparent;
border-color: transparent;
border-radius: 4px;
color: @navy;
text-decoration: none;
}
input { border: none; }
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
22. Title
*/
.page-title{
display: inline-block;
margin: 0px;
font-size: 18px;
line-height: 75px;
font-weight: 500;
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
23. User Info
*/
.user-info{
.avatar{
float: left;
width: 78px;
img{
border: 3px solid @white;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
}
}
.name,p,.text-custom{
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.text-custom{
font-weight: 500;
}
.name{
margin: 0px 0px 5px 0px;
font-weight: 600;
font-size: 16px;
line-height: 22px;
}
.right-content{ margin-left: 90px; }
p{
font-size: 13px;
line-height: 22px;
margin-bottom: 5px;
}
a{
color: #2962ff;
font-size: 13px;
}
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
24. Widget Stat
*/
.widget-stat{
padding-bottom: 10px;
text-align: right;
.counter{
padding-top: 10px;
margin-top: 0px;
margin-bottom: 0px;
color: #434a54;
}
.percent{
float: left;
padding: 0px 10px 0px 10px;
margin-top: 20px;
font-size: 12px;
line-height: 22px;
color: @white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
i{
font-size: 12px;
line-height: 22px;
margin-right: 4px;
}
}
.left-content{
float: left;
}
.right-content{ margin-left: 130px; }
.text{
color: @brown;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
25. Widget Stat Chart
*/
.widget-stat-chart{
padding-bottom: 10px;
text-align: right;
.c100{ margin: 0px; }
.counter{
padding-top: 10px;
margin-top: 0px;
margin-bottom: 0px;
}
.right-content{ margin-left: 80px; }
.text{
color: @brown;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-weight: 600;
}
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
26. Misc
*/
.form-inline .checkbox label, .form-inline .radio label{ padding-left: 25px; }
.label{
padding: .2em .6em .2em;
font-weight: 400;
}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
padding: 9px;
}
@media (min-width: 768px){
.form-horizontal .control-label{
padding-top: 12px
}
}
.ui-accordion .ui-accordion-header{
outline: none;
}
.list-group-item,
.list-group-item:first-child,
.list-group-item:last-child {
border-radius: 0px;
border-color: rgba(120, 130, 140, 0.13);
}
.table-purchases{
a{
color: #ccc;
&:hover{
color: #999;
}
}
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
27. Mailbox
*/
.box {
position: relative;
width: 100%;
margin-bottom: 20px;
background: @white;
border: 1px solid #e1e3e5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
&.collapsed-box{
.box-body,.box-footer{ display: none; }
}
.nav-stacked{
> li{
border-bottom: 1px solid #f4f4f4;
margin: 0px;
&:last-of-type{ border-bottom: none; }
}
}
.border-right{ border-right: 1px solid #f4f4f4; }
.border-left{ border-left: 1px solid #f4f4f4; }
&.box-solid{ border-top: none;
> .box-header{
.btn{
&.btn-default{ background: none; }
}
.btn:hover,a:hover{ background: rgba(0, 0, 0, 0.1); }
}
&.box-default{ border: 1px solid #d2d6de;
> .box-header{
color: #444;
background-color: #d2d6de;
a,.btn{ color: #444; }
}
}
&.box-primary{ border: 1px solid @blue;
> .box-header{
color: @white;
background-color: @blue;
a,.btn{ color: @white; }
}
}
&.box-success{ border: 1px solid @success;
> .box-header{
color: @white;
background-color: @success;
a,.btn{ color: @white; }
}
}
&.box-info{ border: 1px solid @info;
> .box-header{
color: @white;
background-color: @info;
a,.btn{ color: @white; }
}
}
&.box-warning{ border: 1px solid @warning;
> .box-header{
color: @white;
background-color: @warning;
a,.btn{ color: @white; }
}
}
&.box-danger{ border: 1px solid @danger;
> .box-header{
color: @white;
background-color: @danger;
a,.btn{ color: @white; }
}
}
&.box-purple{ border: 1px solid @purple;
> .box-header{
color: @white;
background-color: @purple;
a,.btn{ color: @white; }
}
}
&.box-pink{ border: 1px solid @pink;
> .box-header{
color: @white;
background-color: @pink;
a,.btn{ color: @white; }
}
}
&.box-inverse{ border: 1px solid @inverse;
> .box-header{
color: @white;
background-color: @inverse;
a,.btn{ color: @white; }
}
}
&[class*='bg'] > .box-header{color: @white; }
}
> .box-header{
> .box-tools{
.btn{
border: none;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
}
}
.box-header:before,.box-body:before,.box-footer:before,.box-header:after,.box-body:after,.box-footer:after{
content: "";
display: table;
}
.box-header:after,.box-body:after,.box-footer:after{ clear: both; }
.box-header{
display: block;
position: relative;
padding: 14px 20px;
color: #444;
&.with-border{ border-bottom: 1px solid #f2f4f6; }
> .fa,> .glyphicon,.box-title, .ico{
display: inline-block;
font-size: 18px;
line-height: 20px;
margin: 0px;
margin-right: 5px;
font-weight: 500;
}
> .box-tools{
position: absolute;
top: 7px;
right: 20px;
[data-toggle="tooltip"]{ position: relative; }
&.pull-right .dropdown-menu{
right: 0px;
left: auto;
}
}
.has-feedback{
.form-control{
width: 300px;
height: 35px;
}
.form-control-feedback{
width: 35px;
height: 35px;
line-height: 35px;
color: #656d78;
}
}
}
&.collapsed-box .box-header.with-border{ border-bottom: none; }
}
.btn-mail-main{
height: 50px;
font-size: 14px;
line-height: 34px;
}
.btn-box-tool {
padding: 5px;
font-size: 12px;
background: none;
color: #97a0b3;
&.btn:active{
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
}
.open .btn-box-tool,.btn-box-tool:hover { color: #606c84; }
.box-body {
padding: 0px 20px;
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
border-top-left-radius: 0px;
-moz-border-radius-topright: 0px;
-webkit-border-top-right-radius: 0px;
border-top-right-radius: 0px;
-moz-border-radius-bottomleft: 3px;
-webkit-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
> .table { margin-bottom: 0px; }
.nav{
li.active a{
background: @white;
color: @blue;
}
a{
padding: 13px 0;
color: #212121;
font-size: 14px;
line-height: 25px;
font-weight: 500;
&:hover{
background: @white;
color: @blue;
}
}
.fa{
display: inline-block;
width: 35px;
line-height: 26px;
font-size: 17px;
}
.label-text-right{
color: #656d78;
font-size: 14px;
line-height: 25px;
}
.label-right{
padding: 0px 7px;
font-size: 14px;
line-height: 20px;
margin-top: 2px;
padding-top: 2px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
font-weight: 400;
}
}
}
.box-footer {
padding: 10px 20px;
background: @white;
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
border-top-left-radius: 0px;
-moz-border-radius-topright: 0px;
-webkit-border-top-right-radius: 0px;
border-top-right-radius: 0px;
-moz-border-radius-bottomleft: 3px;
-webkit-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.mailbox-messages{
.table{
margin-bottom: 0;
border-collapse: separate;
border-spacing: 0px 1px;
>tbody>tr>td{ border-top: none }
.mailbox-subject{
white-space: nowrap;
text-overflow: ellipsis;
max-width: 500px;
overflow: hidden;
}
}
.mailbox-star{
a{
color: #ccd1d9;
font-size: 17px;
}
}
.mailbox-name{
a{
color: #212121;
font-weight: 500;
}
}
.mailbox-subject{
color: #90a4ae;
span{
color: #656d78;
font-weight: 500;
}
}
.table-striped>tbody>tr:nth-of-type(odd){ background: #f5f7fa }
.unread{
> td:first-of-type{ border-left: 5px solid @blue;}
.mailbox-subject span{ color: #212121 }
}
tr > td:first-of-type{ border-left: 5px solid transparent;}
}
.mailbox-read-info {
border-bottom: 1px solid #f4f4f4;
padding: 10px 20px;
h3{
font-size: 20px;
margin: 0px;
}
h5{
padding: 5px 0px 0px 0px;
margin: 0px;
}
}
.mailbox-read-time{
color: #999;
font-size: 13px;
}
.mailbox-controls{
border-bottom: 1px solid #f4f4f4;
padding: 8px 20px 1px 15px;
&:after{
content: '';
display: block;
clear: both;
}
.btn{
padding: 0;
line-height: 35px;
height: 35px;
min-width: 80px;
margin: 0 5px 7px;
font-size: 18px;
color: #656d78;
background: #f5f7fa;
border-color: #ccd1d9;
}
.btn-group{
font-size: 0;
.btn{
min-width: 40px;
color: #aab2bd;
font-size: 26px;
background: #f5f7fa;
border: 1px solid #ccd1d9;
margin: 0!important;
z-index: 1!important;
&:first-child{
border-right: none;
}
}
}
.inbox-text{
display: inline-block;
font-size: 16px;
line-height: 35px;
margin-right: 8px;
}
@media(max-width: 929px){
.pull-right{
width: 100%;
padding: 10px;
}
}
}
.icheckbox_square-blue{
transform: scale(0.7);
}
.mailbox-read-message{ padding: 10px 20px; }
.mailbox-footer{
padding: 10px 20px;
border-bottom: 1px solid #f4f4f4;
border-top: 1px solid #f4f4f4;
}
.mailbox-attachments{
list-style: none;
padding: 0px;
li {
float: left;
width: 200px;
border: 1px solid #eee;
margin-bottom: 10px;
margin-right: 10px;
}
}
.mailbox-attachment-name {
font-weight: 700;
color: #666;
}
.mailbox-attachment-icon, .mailbox-attachment-info, .mailbox-attachment-size { display: block; }
.mailbox-attachment-info {
padding: 10px;
background: #f4f4f4;
}
.mailbox-attachment-size {
color: #999;
font-size: 12px;
}
.mailbox-attachment-icon {
text-align: center;
font-size: 65px;
color: #666;
padding: 20px 10px 20px 10px;
}
.mailbox-attachment-icon.has-img { padding: 0px; }
.mailbox-attachment-icon.has-img > img {
max-width: 100%;
height: auto;
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
28. Login, Register, ... Form
*/
#single-wrapper{
min-height: 100%;
background: url('../images/sativa.png') top center repeat;
overflow: hidden;
width: 100%;
padding: 0px 15px 0px 15px;
}
.frm-single{
width: 100%;
max-width: 400px;
display: block;
margin: 60px auto 60px;
float: none;
position: relative;
&:before,&:after{
content: "";
display: block;
position: absolute;
top: 0px;
left: 0px;
z-index: 10;
width: 100%;
height: 100%;
background: @white;
transform: rotate(2deg);
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
box-shadow: 0 0 1px 0 #ccc;
-webkit-box-shadow: 0 0 1px 0 #ccc;
-moz-box-shadow: 0 0 1px 0 #ccc;
}
&:after{
transform: rotate(1deg);
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
-o-transform: rotate(1deg);
-ms-transform: rotate(1deg);
}
.inside{
background: @white;
position: relative;
padding: 20px;
z-index: 20;
box-shadow: 0 0 1px 0 #ccc;
-webkit-box-shadow: 0 0 1px 0 #ccc;
-moz-box-shadow: 0 0 1px 0 #ccc;
}
.title{
margin-bottom: 5px;
font-family: "Poppins", sans-serif;
font-size: 20px;
line-height: 34px;
white-space: nowrap;
color: @dark;
text-align: center;
}
.a-link{
color: #999;
&:hover{
color: #435966;
}
}
.frm-title{
color: #999;
text-align: center;
font-size: 16px;
padding-bottom: 20px;
}
.frm-input{
display: block;
position: relative;
margin-bottom: 20px;
.frm-inp{
width: 100%;
height: 40px;
padding: 0px;
padding-left: 30px;
border: 1px solid #ccc;
font-size: 14px;
line-height: 38px;
border-left: 3px solid #999;
&:focus{
border-color: @blue;
padding-left: 10px;
+ .frm-ico{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
transform: scale(0.8, 0.8);
-webkit-transform: scale(0.8, 0.8);
-moz-transform: scale(0.8, 0.8);
-o-transform: scale(0.8, 0.8);
-ms-transform: scale(0.8, 0.8);
}
}
}
.frm-ico{
position: absolute;
top: 0px;
left: 3px;
width: 30px;
font-size: 18px;
line-height: 40px;
text-align: center;
color: #999;
transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
}
}
.checkbox{ margin: 0px; }
.a-link i{ margin-right: 5px; }
.frm-submit{
display: block;
width: 100%;
height: 36px;
border: none;
background: @blue;
color: @white;
margin-bottom: 15px;
@media (min-width: 1025px) { &:hover{ background: @dark_blue; } }
i{ margin-left: 5px; }
}
.frm-footer{
padding: 20px 0px 0px 0px;
margin-top: 15px;
border-top: 1px solid #ccc;
color: #999;
}
.avatar{
display: block;
margin: 0px auto 20px;
float: none;
position: relative;
width: 70px;
height: 70px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
overflow: hidden;
}
.ico-email{
display: block;
margin: 0px auto 20px;
float: none;
width: 80px;
height: 80px;
}
.txt-login-with{
text-align: center;
margin-bottom: 15px;
color: #999;
}
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
29. 404,500 Page
*/
#page-404{
height: 100%;
background: url('../images/404.jpg') top center repeat;
background-position: center center;
background-attachment: fixed;
overflow: hidden;
width: 100%;
padding: 0px 15px 0px 15px;
.content{
width: 100%;
max-width: 600px;
display: block;
margin: 0px auto 0px;
float: none;
text-align: center;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
p{
padding: 30px 0px 30px 0px;
color: #777;
font-size: 16px;
line-height: 30px;
margin: 0px;
}
@media(max-height: 359px){
min-height: 100%;
height: auto;
.content{
transform: translate(0, 0);
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
-ms-transform: translate(0, 0);
top: 0px;
margin-top: 60px;
margin-bottom: 60px;
}
}
}
.title-on-desktop{ position: relative;
.title{
text-transform: uppercase;
font-weight: 800;
font-size: 28px;
line-height: 40px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
white-space: nowrap;
}
}
.title-on-mobile{ display: none; }
@media(max-width: 649px){
.title-on-desktop{ display: none; }
.title-on-mobile{ display: block; }
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
30. Projects Page
*/
.prj-header{
position: relative;
min-height: 64px;
padding: 0 130px;
border-bottom: 1px solid #e8e8e8;
.btn-submit-prj{
position: absolute;
top: 10px;
right: 0px;
}
.result-count{
position: absolute;
top: 10px;
left: 0px;
font-size: 14px;
line-height: 34px;
}
.filters{
list-style: none;
padding: 0px;
font-size: 0px;
text-align: center;
margin-bottom: 0px;
li{
display: inline-block;
font-size: 14px;
line-height: 34px;
margin: 0px 5px 0px 5px;
}
a{
display: block;
color: @dark;
position: relative;
padding: 10px 10px 20px;
&:before{
content: "";
width: 100%;
height: 2px;
position: absolute;
bottom: -1px;
left: 0px;
background: @navy;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
}
&:hover,&.active{ color: @navy;
&:before{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
}
}
}
@media(max-width: 999px){
padding: 65px 0 0;
}
}
.prj-item{
display: block;
position: relative;
background: @white;
border: 1px solid #e9e9e9;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
.top-project-section{
height: 220px;
padding: 40px 20px 20px 20px;
border-bottom: 1px solid #e9e9e9;
h3{
margin: 20px 0px 0px 0px;
font-size: 16px;
line-height: 20px;
color: #3a3a3a;
}
.meta{
font-size: 13px;
color: #b2b2b2;
span{ color: #767676; }
}
}
.project-icon{ height: 90px;
img{
display: block;
margin: 0px auto 0px;
float: none;
max-width: 80px;
height: auto;
}
}
.bottom-project-section{
padding: 15px 20px 15px 20px;
font-size: 13px;
color: #767676;
&:after{
content: "";
display: block;
width: 0px;
height: 0px;
clear: both;
overflow: hidden;
}
.points{
float: left;
margin-right: 10px;
}
.views{
float: left;
margin-right: 10px;
}
.feedable-time{ float: right; }
}
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
31. Task Board
*/
.task-item{
display: block;
margin-bottom: 20px;
padding: 10px 15px 10px 15px;
border: 1px solid #e9e9e9;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
.title{
font-weight: 600;
color: @dark;
transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
@media (min-width: 1025px) { &:hover{ color: @navy; } }
}
.metas{
padding-top: 5px;
color: #bbb;
&:after{
content: "";
display: block;
width: 0px;
height: 0px;
clear: both;
overflow: hidden;
}
.meta{
margin-right: 10px;
float: left;
}
.ico{
font-size: 14px;
line-height: 22px;
display: inline-block;
margin-right: 4px;
}
}
.progress{
margin-bottom: 5px;
height: 10px;
margin-top: 10px;
}
.task-icon{
font-size: 40px;
line-height: 50px;
text-align: center;
margin-bottom: 5px;
}
}
.task-user{
margin-bottom: 20px;
position: relative;
top: 0;
left: 0;
width: auto;
.name{ margin-bottom: 5px; }
}
.user-assign-list{
li{ vertical-align: top; }
.avatar{
display: block;
width: 34px;
height: 34px;
overflow: hidden;
position: relative;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
.add_new{
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
}
.user-attach-list{
.thumbs{
display: block;
padding: 5px;
width: 100px;
border: 1px solid #e9e9e9;
}
.add_new{
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
}
.frm-comment{
position: relative;
padding: 10px 0px 10px 55px;
.avatar{
position: absolute;
top: 4px;
left: 0px;
width: 44px;
height: 44px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
overflow: hidden;
}
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
32. Profile
*/
.profile-avatar{
.btn{
margin: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
color: #fff;
}
.btn-friend{ background: @info; }
.btn-inbox{ background: @blue; }
}
.profile-friends-list{
li{ margin-bottom: 10px;
.avatar{
width: 48px;
height: 48px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
overflow: hidden;
position: relative;
display: block;
}
}
}
.dot-list{
list-style: none;
padding: 0px;
margin: 0px;
li{
margin-bottom: 15px;
padding: 0px 0px 0px 30px;
position: relative;
&:before{
content: "\f10c";
font-family: 'FontAwesome';
position: absolute;
top: 0px;
left: 0px;
font-size: 14px;
line-height: 20px;
}
}
.date{
font-size: 12px;
color: #939ba2;
display: block;
}
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
33. Contact List
*/
.box-contact{
position: relative;
margin-top: 60px;
padding: 60px 20px 20px 20px;
border: 1px solid #e0e0e0;
background: @white;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
text-align: center;
margin-bottom: 30px;
.avatar{
width: 108px;
height: 108px;
position: absolute;
top: -54px;
border: 4px solid #e7e6e6;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
left: 50%;
-webkit-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.name{
font-size: 24px;
margin-bottom: 0px;
}
.job{
font-size: 16px;
color: #a8a8a8;
font-weight: 700;
padding-bottom: 15px;
position: relative;
margin-bottom: 20px;
&:before{
content: "";
position: absolute;
bottom: 0px;
left: 50%;
-webkit-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
width: 75px;
height: 2px;
background: @warning;
}
}
p{
font-size: 14px;
line-height: 22px;
}
}
.contact-social{
a{
display: block;
font-size: 20px;
line-height: 40px;
width: 40px;
height: 40px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
color: #fff;
}
.fa-phone{ background: @info; }
.fa-envelope{ background: @success; }
.fa-facebook{ background: #3b5999; }
.fa-twitter{ background: #55acee; }
.fa-google-plus{ background: #dd4b39; }
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
34. Pricing Plan
*/
.pricing-table{
display: table;
margin-top: 30px;
width: 100%;
text-align: center;
&:after{
content: "";
display: block;
width: 0px;
height: 0px;
clear: both;
overflow: hidden;
}
.pricing-table-row{display: table-row;}
.col{
display: table-cell;
position: relative;
width: 20%;
vertical-align: top;
&:before{
content: "";
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
position: absolute;
top: -7px;
left: 0px;
width: 100%;
height: 7px;
background: #ffcd03;
transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
}
}
.col-first{
&:before{ display: none; }
.thead{
border: 1px solid #e9eaeb;
background: none;
color: #304ffe;
text-transform: uppercase;
font-size: 18px;
font-weight: 700;
background: #fff;
}
.td{ border-left: 1px solid #e9eaeb; }
}
.thead{
height: 110px;
padding: 13px;
background: @blue;
color: #fff;
vertical-align: middle;
h4{
margin: 0px;
font-weight: 700;
text-transform: uppercase;
line-height: 34px;
white-space: nowrap;
}
&.bg-main-2{background-color: @blue}
&.bg-blue-1{background-color: #2444f9}
&.bg-blue-2{background-color: #1e3def}
&.bg-blue-3{background-color: @blue}
}
.price{
display: inline-block;
position: relative;
padding: 0px 45px 0px 15px;
.number{
font-size: 45px;
line-height: 50px;
font-weight: 700;
}
.currency{
position: absolute;
top: 0px;
left: 0px;
font-size: 18px;
line-height: 50px;
font-weight: 700;
}
.small_number{
position: absolute;
right: 0px;
top: 5px;
width: 40px;
text-align: left;
font-size: 18px;
}
.time{
position: absolute;
top: 30px;
right: 0px;
width: 40px;
text-align: left;
font-size: 16px;
color: #fcd20b;
font-weight: 700;
}
}
.td{
left: 24px;
height: 62px;
padding: 7px;
border-right: 1px solid #e9eaeb;
border-bottom: 1px solid #e9eaeb;
font-size: 14px;
line-height: 48px;
color: #222222;
white-space: nowrap;
overflow: hidden;
background: #fff;
&:last-child{ height: 100px; }
.fa-times{
color: #666666;
font-size: 24px;
line-height: 48px;
}
.fa-check{
color: @blue;
font-size: 24px;
line-height: 48px;
}
.btn-order{
display: inline-block;
width: 125px;
color: #fff;
background: #212121;
font-size: 12px;
line-height: 40px;
font-weight: 700;
margin: 23px 0px 23px 0px;
}
}
.center-v{
top: 50%;
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
position: relative;
}
.col-featured{
top: -10px;
-webkit-box-shadow: 0px 1px 12px 0px rgba(34, 34, 34, 0.25);
-moz-box-shadow: 0px 1px 12px 0px rgba(34, 34, 34, 0.25);
box-shadow: 0px 1px 12px 0px rgba(34, 34, 34, 0.25);
.thead{
height: 120px;
padding-top: 23px;
}
.td{
&:last-child{ height: 110px; }
.btn-order{ background: @blue; }
}
}
@media(min-width: 1025px){
.td .btn-order:hover{background: @blue}
.col:hover:before{opacity: 1;}
}
@media(max-width: 1199px){
.thead h4{font-size: 14px;}
}
@media(max-width: 991px){
.col-first{display: none!important;}
.col:nth-child(2) .td{border-left: 1px solid #E9EAEB;}
}
@media(max-width: 991px){
.col{
width: 100%;
display: block;
margin: 0 auto 50px;
max-width: 300px;
&:last-child{margin-bottom: 0}
.td{border-left: 1px solid #E9EAEB;}
}
.thead h4{font-size: 18px}
}
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
35. Invoice
*/
.invoice-box{
max-width: 800px;
margin: auto;
padding: 30px;
border: 1px solid #eee;
font-size: 16px;
line-height: 24px;
color: #555;
background: @white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
.logo{
color: @dark;
font-weight: 600;
span{ font-weight: 400; }
}
table{
width: 100%;
text-align: left;
td{
padding: 5px;
vertical-align: top;
}
tr{
td:nth-child(2){ text-align: right; }
&.top table td{ padding-bottom: 20px;
&.title{
font-size: 45px;
line-height: 45px;
color: #333;
}
}
&.information table td{ padding-bottom: 40px; }
&.heading td{
background: #eee;
border-bottom: 1px solid #ddd;
font-weight: 700;
}
&.details td{ padding-bottom: 20px; }
&.item{
td{ border-bottom: 1px solid #eee; }
&.last td{ border-bottom: none; }
}
&.total td:nth-child(2){
border-top: 2px solid #eee;
font-weight: 700;
}
}
}
@media only screen and (max-width: 600px) {
table tr{
&.information table td,&.top table td{
width: 100%;
display: block;
text-align: center;
}
}
}
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
36. Gallery
*/
.item-gallery{
display: block;
position: relative;
margin-bottom: 15px;
border: 10px solid @white;
background: #222;
-webkit-box-shadow: 0px 0px 5px 0px rgba(14, 14, 14, 0.1);
-moz-box-shadow: 0px 0px 5px 0px rgba(14, 14, 14, 0.1);
box-shadow: 0px 0px 5px 0px rgba(14, 14, 14, 0.1);
&:before{
content: "\f065";
font-family: 'FontAwesome';
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
font-size: 16px;
line-height: 22px;
position: absolute;
left: 10px;
bottom: 5px;
color: #a5a5a5;
z-index: 10;
transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
}
img{
min-width: 100%;
transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
}
.title{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
position: absolute;
top: 50%;
left: 0px;
z-index: 20;
width: 100%;
margin: 0px;
text-align: center;
color: @white;
font-size: 18px;
line-height: 28px;
font-weight: 500;
transform: translate(0, -40%);
-webkit-transform: translate(0, -40%);
-moz-transform: translate(0, -40%);
-o-transform: translate(0, -40%);
-ms-transform: translate(0, -40%);
transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
}
@media(min-width: 1025px){&:hover{
&:before{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
.title{
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
img{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=35)";
-moz-opacity: 0.35;
-khtml-opacity: 0.35;
opacity: 0.35;
}
}}
}
/* .item-gallery */
.isotope-filter{
.filter-controls{
padding-top: 8px;
margin-bottom: 43px;
font-size: 0px;
padding-left: 0px;
text-align: center;
li{
display: inline-block;
padding: 10px 15px 0px 15px;
}
a{
display: block;
color: @dark;
font-size: 16px;
line-height: 26px;
font-weight: 500;
@media (min-width: 1025px) { &:hover{ color: @blue; } }
}
.js__active{ color: @blue; }
}
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
37. Modal
*/
.modal-content{
padding: 0 15px;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
}
.modal-dialog{
max-width: 100%;
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
38. Form Control
*/
.form-control {
line-height: 24px;
padding: 9px 14px;
height: 45px;
border-color: #ccd1d9;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
&.input-sm{
padding: 0 10px;
height: 30px;
}
&:focus{
border-color: @info!important;
-webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12)!important;
-moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12)!important;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12)!important;
}
}
textarea.form-control {
height: 105px;
}
.has-success .form-control {
border-color: #00bf4f;
}
.has-warning .form-control {
border-color: @warning;
}
.has-error .form-control {
border-color: @danger;
}
.has-inverse .form-control {
border-color: #435966;
}
.form-with-icon {
position: relative;
}
.form-with-icon .item-icon-right {
position: absolute;
right: 0;
top: 50%;
width: 50px;
text-align: center;
font-size: 20px;
line-height: 30px;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.form-with-icon .form-control {
padding-right: 50px;
}
.has-success .form-with-icon .item-icon {
color: #00bf4f;
}
.has-warning .form-with-icon .item-icon {
color: @warning;
}
.has-error .form-with-icon .item-icon {
color: @danger;
}
.has-inverse .form-with-icon .item-icon {
color: #435966;
}
.input-group-btn > .btn {
min-width: 50px;
padding: 7px 10px;
font-size: 18px;
line-height: 29px;
color: #656d78;
border: 1px solid #ccd1d9;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
height: 45px;
}
.input-group-btn > .btn.no-border {
border: none;
line-height: 31px;
}
.input-group-btn > .btn span {
font-size: 14px;
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
39. Reviews Widget
*/
.review-list{
color: #adadad;
font-size: 14px;
line-height: 24px;
}
.review-item{
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
.top{
padding-bottom: 5px;
&:after{
content: '';
clear: both;
display: block;
}
.name{
display: inline-block;
margin-right: 10px;
color: @dark;
}
.date{
display: inline-block;
}
.star-rating{
float: right;
white-space: nowrap;
@media (max-width: 1299px) and(min-width: 1199px){
width: 100%;
}
}
}
.desc{
font-size: 13px;
line-height: 23px;
}
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
40. Activity Widget
*/
.activity-list{
color: @dark;
margin-bottom: 20px;
}
.activity-item{
position: relative;
padding-left: 35px;
padding-bottom: 20px;
font-size: 14px;
line-height: 24px;
.bar{
position: absolute;
top: 0;
bottom: 0;
left: 10px;
width: 1px;
}
.dot{
position: absolute;
top: 0;
left: -4px;
width: 9px;
height: 9px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
}
.last-dot{
position: absolute;
bottom: 0;
left: -2px;
width: 5px;
height: 5px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
}
.date{
font-size: 12px;
color: #adadad;
}
}
.activity-link{
display: block;
padding: 8px 10px 5px;
text-align: center;
color: @dark;
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
41. Todo Widget
*/
.todo-list{
margin-bottom: 15px;
}
.todo-item{
padding: 15px 0;
border-bottom: 1px solid #eee;
.checkbox{
margin: 0;
input:checked + label{
color: #adadad;
text-decoration: line-through;
}
}
}
.todo-form{
padding-top: 10px;
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
42. X-Editable
*/
.editableform{
select.form-control,input.form-control{
padding: 4px 10px;
height: 32px;
}
.btn-sm{
height: 32px;
padding: 0 20px;
line-height: 32px;
}
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
43. Sparkline Chart
*/
.jqstooltip{
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/*---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------
44. SweetAlert
*/
.sweet-alert{
.sa-button-container button{
background: #e4e7ea;
outline: none !important;
font-size: 16px;
line-height: 26px;
padding: 8px 25px;
border: none;
font-weight: 500;
font-family: "Poppins";
box-shadow: none!important;
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
&.cancel{
background: #e4e7ea;
color: @dark;
&:hover{
background: #e4e7ea;
}
}
&.confirm{
background: @danger;
}
}
&.visible .sa-icon{
&.sa-success .sa-line{
background: @success;
}
&.sa-warning{
border-color: @warning;
}
&.sa-error{
border-color: @danger;
.sa-line{
background: @danger;
}
}
}
}
/*---------------------------------------------------------------------*/