CSS   79
plugins css
Guest on 29th July 2022 01:21:31 PM


  1. /*
  2.  * 2. PLUGINS CSS
  3.  * Description: Overwrite Imported Plugins CSS
  4.  */
  5.  
  6.  /* Jquery Vector Map  */
  7. .jvectormap-label {
  8.     position: absolute;
  9.     display: none;
  10.     border: solid 1px #CDCDCD;
  11.     -webkit-border-radius: 3px;
  12.     -moz-border-radius: 3px;
  13.     border-radius: 3px;
  14.     background: #292929;
  15.     color: white;
  16.     font-size: smaller;
  17.     padding: 3px;
  18. }
  19.  
  20. .jvectormap-zoomin, .jvectormap-zoomout {
  21.     position: absolute;
  22.     left: 15px;
  23.     -webkit-border-radius: 24px;
  24.     -moz-border-radius: 24px;
  25.     border-radius: 24px;
  26.     background: #292929;
  27.     padding: 3px;
  28.     color: white;
  29.     width: 24px;
  30.     height: 24px;
  31.     cursor: pointer;
  32.     line-height: 16px;
  33.     text-align: center;
  34.     font-size: 28px;
  35. }
  36.  
  37. .jvectormap-zoomin {
  38.     top: 10px;
  39. }
  40.  
  41. .jvectormap-zoomout {
  42.     top: 38px;
  43. }
  44. .dark-widget{
  45.     .flot-x-axis, .flot-y-axis{
  46.             .flot-tick-label{
  47.                 color:#FFF;            
  48.             }
  49.     }
  50. }
  51.  
  52. /*  Scroll  */
  53. [data-rel^="scroll"]{
  54.     max-height:400px;
  55. }
  56. .mCSB_container{
  57.     margin-right:0;
  58. }
  59. .mCSB_scrollTools {
  60.     .mCSB_dragger .mCSB_dragger_bar{
  61.         background:@main_color;
  62.         .opacity(.7);
  63.     }    
  64.     .mCSB_dragger:hover, .mCSB_dragger:active, .mCSB_dragger.mCSB_dragger_onDrag {
  65.         .mCSB_dragger_bar{
  66.             background:@grey;
  67.         }    
  68.     }  
  69.     .mCSB_draggerRail{
  70.         background: none;
  71.     }
  72. }
  73.  
  74.  
  75. /* Auto Complete & Tags */
  76.  
  77. div.tagsinput span.tag{
  78.     background:lighten(@green,5%);
  79.     border-color: lighten(@green,5%);
  80.     color:#FFF;
  81. }
  82. div.tagsinput span.tag a{
  83.     color:#FFF;
  84. }
  85.  
  86. .ui-autocomplete{
  87.     max-height: 150px;
  88.     overflow-y: auto;
  89.     overflow-x: hidden;     // prevent horizontal scrollbar
  90.     background:#FFF;
  91.     border:1px solid #CCC;
  92.     .ui-autocomplete-category {
  93.         font-weight: bold;
  94.         padding: .2em .4em;
  95.         margin: .8em 0 .2em;
  96.         line-height: 1.5;
  97.     }    
  98.     .ui-autocomplete-category:hover{
  99.         background:none;
  100.     }
  101.     li{
  102.         padding:5px !important;
  103.         margin:0 !important;
  104.     }
  105.     li:hover{
  106.         background-color:#F5F5F5;
  107.         cursor:pointer;
  108.     }
  109.     a{
  110.         color:#666;
  111.         padding:0 !important;
  112.         margin:0 !important;        
  113.     }
  114.     .ui-state-focus{
  115.         background-color:#F5F5F5;
  116.     }    
  117.     .ui-menu-item{
  118.         a{
  119.             clear:both;
  120.         }
  121.     }
  122.     .menu-icon{
  123.         display:block;
  124.         float:left;
  125.         text-align:center;
  126.         font-size:24px;
  127.         width:40px;
  128.         height:40px;
  129.         line-height:40px;
  130.         margin-right:12px;
  131.     }
  132.     .menu-text{
  133.         display:block;
  134.         margin-left:55px;
  135.         text-transform: none;
  136.         padding-right:15px;
  137.         padding-top:5px;
  138.         padding-bottom:5px;
  139.     }
  140.     .menu-info{
  141.         display:block;
  142.         font-size:11.4px;
  143.         font-style: italic;
  144.         color:#939ba2;                                
  145.         text-transform: capitalize;    
  146.     }        
  147. }
  148.  
  149. /*  JQuery UI Slider  */
  150. .ui-slider{
  151.         background:#EEEEEE;    
  152.     .ui-slider-handle{
  153.         background:#1FAE66;
  154.         width:24px;
  155.         height:24px;
  156.     }  
  157.     .ui-slider-handle:hover{
  158.         cursor:pointer;
  159.     }  
  160.     a{
  161.         transition: none;
  162.     }  
  163.     .ui-slider-range{
  164.         background:#39515F;    
  165.     }    
  166. }
  167. .ui-slider-horizontal{
  168.         height:0.6em;
  169.     .ui-slider-handle{
  170.         top:-0.6em;
  171.     }  
  172. }
  173. .ui-slider-vertical{
  174.         width: 0.6em;
  175.     .ui-slider-handle{
  176.         left:-0.6em;
  177.     }  
  178. }
  179. .ui-slider, .ui-slider .ui-slider-handle, .ui-slider .ui-slider-range{
  180.         border-radius: 30px;
  181. }
  182. .ui-slider-primary .ui-slider-handle{
  183.         background:#1FAE66;            
  184. }
  185. .ui-slider-warning .ui-slider-handle{
  186.         background:#F89C2C;            
  187. }
  188. .ui-slider-info .ui-slider-handle{
  189.         background:#23709E;            
  190. }
  191. .ui-slider-danger .ui-slider-handle{
  192.         background:#F85D2C ;           
  193. }
  194.  
  195. /*  Bootstrap Switch  */
  196. .bootstrap-switch{
  197.     border:none; border-radius:30px; background:#1FAE66;
  198.     .bootstrap-switch-handle-on.bootstrap-switch-primary, .bootstrap-switch-handle-off.bootstrap-switch-primary{
  199.         background:none ;
  200.         margin-left:5px;        
  201.     }
  202.     .bootstrap-switch-label{
  203.         background:#EEEEEE;    
  204.         border-radius: 30px !important;
  205.         height: 30px;
  206.         margin: 5px 2px 5px 6px;
  207.         width: 30px;
  208.     }
  209.     .bootstrap-switch-handle-on.bootstrap-switch-default, .bootstrap-switch-handle-off.bootstrap-switch-default{
  210.                 background:none;
  211.                 color:#FFF;        
  212.     }
  213. }
  214. //Bootstrap Switch Size
  215. .bootstrap-switch-large .bootstrap-switch-label{
  216.         width:36px; height:36px; margin-left:8px;
  217. }
  218. .bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on, .bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off, .bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label{
  219.         padding-top:6px;
  220. }
  221. .bootstrap-switch-small .bootstrap-switch-label{
  222.         width: 24px; height:24px; margin-left:3px;
  223. }
  224. .bootstrap-switch-mini .bootstrap-switch-label{
  225.         width: 18px; height:18px; margin-left:5px;
  226. }              
  227. .bootstrap-switch.bootstrap-switch-focused{
  228.         box-shadow:none;
  229. }
  230.  
  231.  
  232. // Bootstrap Switch Color    
  233.  
  234. .bootstrap-switch-inverse .bootstrap-switch-label{
  235.         background: #1fae66;
  236. }      
  237. .bootstrap-switch-inverse .bootstrap-switch-handle-on.bootstrap-switch-primary{
  238.         color: #1fae66;
  239. }      
  240. .bootstrap-switch-red, .bootstrap-switch-inverse.bootstrap-switch-red .bootstrap-switch-label{
  241.         background:#F85D2C;
  242. }
  243. .bootstrap-switch-inverse.bootstrap-switch-red .bootstrap-switch-handle-on.bootstrap-switch-primary{
  244.         color:#F85D2C;
  245. }
  246. .bootstrap-switch-yellow, .bootstrap-switch-inverse.bootstrap-switch-yellow .bootstrap-switch-label{
  247.         background:#F89C2C;
  248. }
  249. .bootstrap-switch-inverse.bootstrap-switch-yellow .bootstrap-switch-handle-on.bootstrap-switch-primary{
  250.         color:#F89C2C;
  251. }      
  252. .bootstrap-switch-blue, .bootstrap-switch-inverse.bootstrap-switch-blue .bootstrap-switch-label{
  253.         background:#67B8CB;
  254. }
  255. .bootstrap-switch-inverse.bootstrap-switch-blue .bootstrap-switch-handle-on.bootstrap-switch-primary{
  256.         color:#67B8CB;
  257. }
  258. .bootstrap-switch.bootstrap-switch-off{
  259.         background:#CCC;
  260. }
  261. .bootstrap-switch-inverse{
  262.         background: #39515F;
  263. }
  264. .bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label{
  265.         background:#EEEEEE;
  266. }
  267.  
  268.  
  269.  
  270.  
  271.  
  272.  
  273. /*  JQuery Datepicker */
  274.  
  275. .ui-datepicker{
  276.     background:@dark_blue;
  277.     z-index: 1500 !important;
  278.     width: 280px;    
  279.     padding:0;
  280.     border-radius: 4px;
  281.     .box-shadow( 0px 0px 3px 0px rgba(0,0,0,0.2));  
  282. }
  283.  
  284. .ui-datepicker .ui-datepicker-header{
  285.     background: rgba(0,0,0,.2);
  286.     margin: 0;
  287.     padding: 10px;
  288.     font-size: 14px;
  289. }
  290. .ui-datepicker .ui-datepicker-title{
  291.     text-transform: uppercase;
  292.     letter-spacing: 0.5px;
  293.     color:@green;
  294.     font-weight:bold;
  295.     select{
  296.         color: @dark_blue;
  297.     }
  298. }
  299. .ui-datepicker .ui-state-hover {
  300.     background: rgba(0,0,0,.2);  
  301. }
  302. .ui-datepicker a{
  303.     color: @green;
  304. }
  305. .ui-datepicker .ui-state-disabled{
  306.     color: #CCC;
  307. }
  308. .ui-datepicker td span, .ui-datepicker td a{
  309.     text-align:center;
  310.     border-radius:4px;
  311. }
  312. .ui-datepicker .ui-state-highlight{
  313.     background: rgba(0,0,0,.2);  
  314. }
  315. .ui-datepicker .ui-datepicker-prev{
  316.     left: 8px;
  317.     background:url(../img/sprites.png) 4px 3px  no-repeat;
  318. }
  319. .ui-datepicker .ui-datepicker-next{
  320.     right: 8px;
  321.     background:url(../img/sprites.png) -20px 3px no-repeat;    
  322. }
  323. .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next{
  324.     top: 12px;
  325.     border: 2px solid #FFF;
  326.     .border-radius(20px);
  327.     .opacity(.6);
  328.     height:20px;
  329.     width:20px;
  330. }
  331. .ui-datepicker .ui-datepicker-prev:hover, .ui-datepicker .ui-datepicker-next:hover{
  332.     .opacity(1);
  333. }
  334. .ui-datepicker .ui-datepicker-calendar{
  335.     width:260px;
  336.     margin-left:10px;
  337.     margin-bottom:10px;
  338. }
  339. .ui-datepicker th{
  340.     color:#FFFFFF;
  341.     .opacity(.5);
  342.     text-transform: uppercase;
  343.     .box-shadow(0 -1px 0 rgba(255, 255, 255, 0.3) inset);
  344. }
  345. .ui-datepicker .ui-corner-all:hover{
  346.     cursor:pointer;
  347. }
  348. .ui-datepicker .ui-datepicker-buttonpane button{
  349.     border:none;
  350.     color:#FFF;
  351.     background:none;
  352. }
  353. .ui-datepicker .ui-datepicker-buttonpane button:hover{
  354.     background-color:rgba(0,0,0,.3);
  355. }
  356. .ui-datepicker .ui-datepicker-title select{
  357.     padding:0;
  358.     margin-bottom:0;
  359. }
  360. [data-datepicker]:hover{
  361.     cursor:pointer;
  362. }
  363.  
  364.  
  365. /*  Bootstrap Daterange Picker */
  366.  
  367. .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.ampmselect{
  368.     width:60px;
  369. }
  370.  
  371.  
  372. /*  Colorpicker  */
  373.  
  374. .colorpicker {
  375.     .colorpicker_hex, .colorpicker_field{
  376.         input{
  377.             padding:0;
  378.             border:none;
  379.             width:auto;
  380.             margin-top:2px;
  381.             margin-right:2px;
  382.         }
  383.     }
  384. }
  385. .color-input{
  386.     padding: 4px 8px;
  387.     font-size:20px;
  388. }
  389.  
  390.  
  391. /*  Data Tables  */
  392.  
  393. .table.dataTable{
  394.     thead th{
  395.         border-bottom:2px solid #777777;
  396.     }
  397.     tr.odd td.sorting_1{
  398.         background-color:#EFEFEF;
  399.     }
  400.     tr.even td.sorting_1{
  401.         background-color:#F5F5F5;
  402.     }
  403. }
  404. .table.dataTable.no-footer{
  405.     border-bottom-color: #DDDDDD;
  406. }
  407.  
  408.  
  409. /*  JQuery UI  */
  410.  
  411. .ui-drop-placeholder{
  412.     border: 2px dashed #DADADA;
  413.     background-color: #FAFAFA;
  414. }
  415.  
  416.  
  417. /* Full Calendar */
  418.  
  419. .fc{
  420.     a{
  421.         transition: none;
  422.     }
  423.     .fc-border-separate tr.fc-last th, .fc-border-separate tr.fc-last td {
  424.         border-bottom-width:2px;
  425.     }
  426.     .fc-day-header{
  427.         padding:5px;
  428.         text-transform: uppercase;
  429.         border-color: #FFFFFF;
  430.         border-bottom-color:#F0F0F0;
  431.     }
  432.     .fc-day{
  433. //        background-color: #FAFAFA;
  434.         border-color: #F0F0F0;
  435.     }
  436.     .fc-day:hover{
  437.         background-color:#F5F5F5;
  438.     }
  439.     .fc-other-month{
  440.         background-color: #FAFAFA;
  441.     }
  442.     .fc-state-highlight{
  443.         background-color:#F8F1DE;
  444.     }
  445.     .fc-event{
  446.         background-color:@alert_blue !important;
  447.         border-color:@alert_blue !important;
  448.         border-top: 1px solid @blue !important;
  449.         color:#31708F !important;
  450.         .fc-event-title{
  451.             padding-left:5px;
  452.             padding-right:5px;
  453.         }
  454.     }
  455.     .fc-header-title h2{
  456.         color: @main_color;
  457.         font-size: 32px;
  458.         margin: 25px 0 10px 15px;
  459.     }
  460.     .fc-grid .fc-day-number {
  461.         padding: 0 7px;
  462.     }
  463.     .fc-button{
  464.         background:none;
  465.         margin-right:5px;        
  466.         box-shadow:none;
  467.         text-shadow:none;
  468.     }
  469.     .fc-button-today{
  470.         border:none;
  471.     }
  472.     .fc-button-prev, .fc-button-next{
  473.         .border-radius(40px);
  474.         border-color: @grey;
  475.         color: @grey;
  476.         border-radius: 40px;
  477.         height: 26px;
  478.         line-height: 22px;
  479.         padding-left: 0;
  480.         padding-right: 1px;
  481.         width: 26px;        
  482.     }
  483.     .fc-button:hover{
  484.         background:@grey;
  485.         color:@white;
  486.     }
  487.     .fc-state-disabled:hover{
  488.         background:none;
  489.         color: #333333;
  490.     }
  491.     .fc-sun{
  492.         color:#F85D2C;
  493.     }
  494. }
  495.  
  496. #fullcalendar .fc-header{
  497.     .fc-header-left{
  498.         .fc-button{
  499.                 margin-top:30px;
  500.         }
  501.           .fc-button-prev{
  502.                 margin-left:20px;
  503.             }        
  504.     }
  505.     .fc-header-right{
  506.            .fc-button{
  507.                 border-radius: 4px;
  508.                 border:none;
  509.                 color: #1FAE66;
  510.                 position:absolute;
  511.             }
  512.            .fc-button:hover{
  513.                 background: #1FAE66;           
  514.                 color:#FFFFFF;
  515.             }
  516.            .fc-state-disabled{
  517.                     color:#666666;
  518.             }
  519.            .fc-state-disabled:hover{
  520.                 color:#666666;
  521.                 background:none;
  522.             }
  523.            .fc-state-active{
  524.                     background: #1FAE66;               
  525.                     color:#FFFFFF;     
  526.             }
  527.            .fc-button-today{
  528.                     top:55px;
  529.                     right:15px;
  530.             }
  531.            .fc-button-month, .fc-button-agendaWeek, .fc-button-agendaDay{
  532.                     top: 20px;
  533.                 }
  534.            .fc-button-month{
  535.                     right:115px;
  536.             }
  537.            .fc-button-agendaWeek{
  538.                     right:60px;
  539.             }
  540.            .fc-button-agendaDay{
  541.                     right:15px;
  542.             }                  
  543.     }    
  544. }
  545.  
  546.  
  547.  
  548.  
  549. /*  Sparkline Tooltip  */
  550.  
  551. .jqstooltip{
  552.    display:block;
  553.    min-width:40px;
  554.    padding: 4px;  
  555.    min-height:25px!important;
  556. }
  557.  
  558.  
  559. /*  PNotify Notification  */
  560.  
  561. .ui-pnotify-icon, .ui-pnotify-icon span{
  562.     font-size: 20px;
  563.     margin-right: 0.25em;
  564. }
  565. .ui-pnotify-closer, .ui-pnotify-sticker{
  566.     position:absolute;
  567.     top:4px;
  568.     font-size:18px;
  569. }
  570. .ui-pnotify-closer{
  571.     right:8px;
  572. }
  573. .ui-pnotify-sticker{
  574.     right: 28px;
  575. }
  576. .ui-pnotify-title{
  577.     font-weight:bold;
  578.     margin-bottom:0.6em;
  579. }
  580. // specific content list class
  581. .ui-pnotify .content-image .menu-icon{
  582.     font-size: 36px;
  583. }
  584.  
  585.  
  586. /*  Intro JS  */
  587.  
  588. .introjs-helperNumberLayer{
  589.     border:none;
  590.     line-height:16px;
  591.     background: @red;
  592. }
  593. .introjs-tooltip{
  594.     padding:10px 15px 15px;
  595.     min-width:250px;
  596. }
  597. .introjs-button{
  598.     color:@white !important;
  599.     background:@main_color !important;
  600.     border-color:@main_color !important;
  601.     text-shadow:none;
  602. }
  603. .introjs-button:hover{
  604.     background:darken(@main_color,5%) none !important;
  605.     border-color:darken(@main_color,5%) !important;
  606.     color: @white !important;
  607. }
  608. .introjs-disabled{
  609.     background:@soft_grey !important;
  610.     border-color:@soft_grey !important;
  611. }
  612. .introjs-disabled:hover{
  613.     background:@soft_grey !important;
  614.     border-color:@soft_grey !important;
  615. }
  616.  
  617.  
  618. /* ----------------------- CK EDITOR ----------------------- */
  619.  
  620. .cke_top, .cke_bottom{
  621.     background:#F5F5F5;  
  622. }
  623. *[contenteditable="true"] {
  624.         padding: 10px;
  625. }
  626. .cke_editable.cke_editable_inline {
  627.         cursor: pointer;
  628. }
  629. .cke_editable.cke_editable_inline.cke_focus {
  630.         background: none repeat scroll 0 0 #eee;
  631.         box-shadow: 0 0 20px 3px #ddd inset, 0 0 1px #000 inset;
  632.         cursor: text;
  633.         outline: medium none;
  634. }
  635.  
  636.  
  637. /* ----------------------- GOOGLE MAPS ----------------------- */
  638.  
  639. .gm-style img{
  640.     max-width: none;
  641. }
Raw Paste

Login or Register to edit or fork this paste. It's free.