CSS   14

widgets css

Guest on 29th July 2022 01:18:20 PM

  1. /*
  2.  * 4. WIDGETS CSS
  3.  * Description: Custom Widgets CSS
  4.  */
  5.  
  6.  
  7. /*---   Panel & Widget  ---*/
  8. .widget {
  9.   .clearfix();
  10.   .box-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
  11.   .border-radius(2px);
  12.   position:relative;
  13. }
  14.  
  15. [data-rel^="sortable"] .widget:hover{
  16.     cursor:  move;
  17. }
  18.  
  19. .widget .vd_panel-menu{
  20.     right: 15px;
  21.     top:6px;
  22.     .menu{
  23.         border:none;
  24.         line-height:22px;
  25.         margin-right:2px;
  26.         color:#F0F0F0;
  27.         font-size:12px;
  28.         height:24px;
  29.         width:22px;
  30.     }
  31.     > .entypo-icon{
  32.         font-size:18px;
  33.         line-height:26px;
  34.     }
  35.     > .smaller-font{
  36.         font-size:14px;
  37.     }
  38.     > .menu:hover, > .menu.active {
  39.         background-color: rgba(0,0,0,.4);
  40.         color:#FFFFFF;
  41.     }
  42.     .child-menu{
  43.         font-size: @body_text_size;
  44.     }
  45. }
  46. .light-widget{
  47.     .panel-heading{
  48.         background:#FFFFFF;
  49.         .panel-title{
  50.             color:#888888;
  51.         }
  52.     }
  53.     .vd_panel-menu{
  54.         .menu{
  55.             color:@soft_grey;
  56.         }
  57.     }
  58.     .bordered{
  59.         border-bottom:1px solid #EEEEEE;        
  60.     }
  61. }
  62. .dark-widget{
  63.     color:#FFF;
  64.     .bordered{
  65.         border-bottom:1px solid #F5F5F5;
  66.     }
  67. }
  68. .light-widget, .dark-widget{
  69.     .bordered{
  70.         padding-top:9px;
  71.         padding-bottom:9px;
  72.         margin-left:-1px;
  73.         margin-right:-1px;        
  74.     }
  75. }
  76. .panel-bd-left{
  77.     border-left:3px solid @main_color;
  78. }
  79. .panel-bd-top{
  80.     border-top:3px solid @main_color;
  81. }
  82.  
  83. /* Specific Widget Mega Menu */
  84. .widget .vd_panel-menu .menu .vd_mega-menu-content{
  85.     margin-top:5px;
  86.     margin-left:-13px;
  87. }
  88. .widget .vd_panel-menu .menu{
  89.     .vd_mega-menu-content.left-xs, .vd_mega-menu-content.left-sm, .vd_mega-menu-content.left-md,.vd_mega-menu-content.left-lg{
  90.         margin-left:auto;
  91.         margin-right:-13px;
  92.     }
  93. }
  94.  
  95.  
  96. /* Search Form */
  97. .vd_menu-search{
  98.     width: 300px;
  99.     background:#FFF;
  100.     padding:2px 0 2px 13px;
  101.     margin-left: 3px;
  102.     font-size: 12px;
  103.     margin-top:18px;
  104.     position:relative;
  105.     .border-radius(30px);
  106.     .vd_menu-search-text{
  107.         border:none;
  108.         color:#444;
  109.         padding:0;
  110.     }    
  111.     .vd_menu-search-category{
  112.          margin-right:10px;  
  113.          position:relative;
  114.          display:inline-block;
  115.         .separator{
  116.             border-left:1px dotted #333;
  117.             margin-right:8px;  
  118.             height: 16px;
  119.             margin-bottom: -3px;
  120.             display:inline-block;
  121.         }
  122.         .text{
  123.             margin-right:6px;
  124.         }
  125.        .vd_mega-menu-content{
  126.             top:22px;
  127.             border-top:1px solid #DDD;
  128.  
  129.             label{
  130.                 font-weight:normal;
  131.                 input {
  132.                     margin-right:10px;
  133.                 }
  134.             }
  135.         }
  136.         .vd_mega-menu-content:before{
  137.             display:none;
  138.         }
  139.     }
  140.     .vd_menu-search-category:hover{
  141.             cursor:pointer;        
  142.     }  
  143.     .vd_menu-search-submit{
  144.         position:absolute;
  145.         top:0;
  146.         right:0;
  147.         background:@main_color;
  148.         color:#FFF;
  149.         padding: 2px 8px;  
  150.         .border-radius(30px);
  151.     }
  152.     .vd_menu-search-submit:hover{
  153.         cursor:pointer;
  154.         background-color:lighten(@main_color,5%);
  155.     }    
  156. }
  157. .menu-search-style-2{
  158.     .vd_menu-search {
  159.         margin-left: 18px;
  160.         margin-top: 16px;
  161.         padding: 4px 0 4px 13px;
  162.         .vd_menu-search-submit{
  163.             padding: 4px 10px;
  164.             right:-2px;
  165.         }
  166.     }
  167. }
  168.  
  169.  
  170. /*  Chat Widget  */
  171. .vd_chat-menu{
  172.     position:fixed;
  173.     bottom:0;
  174.     right:10%;
  175.     z-index: 9;
  176.     background-color: #39515F;
  177.     border-top:3px solid #333333;  
  178. //    .box-shadow(0 1px 0 rgba(255, 255, 255, 0.5) inset);
  179.     .vd_mega-menu-wrapper{
  180.          .vd_mega-menu >ul{
  181.             > .mega-li{    
  182.                  height:50px;
  183.                  >a{
  184.                      color:#FFFFFF;
  185.                  }
  186.                  .mega-link{
  187.                      line-height:24px;
  188.                      margin-top:-4px;
  189.                      border:none;
  190.                  }
  191.             }
  192.             > li.profile{
  193.                 margin-top:0;
  194.                 margin-right: 0;
  195.                 .mega-name{
  196.                     margin-top:1px;
  197.                 }        
  198.             }
  199.             > li.profile:hover{
  200.                 background: rgba(0,0,0,.4);
  201.             }
  202.             > li.one-big-icon{
  203.                 padding-top:10px;
  204.             }
  205.             > li.one-icon{
  206.                 padding-top:8px;
  207.             }
  208.             > li:last-child{
  209.                 margin-left: 0;
  210.             }
  211.             .bordered{
  212.                   border-left: 1px solid rgba(0,0,0,.2);
  213.                   border-right: 1px solid rgba(0,0,0,.2);                  
  214. //                box-shadow: 1px 0 0 rgba(255, 255, 255, 0.5) inset;
  215.             }
  216.            
  217.          }
  218.          .chat-area{
  219.              border-top: 1px solid #F5F5F5;
  220.              .chat-box input{
  221.                  border:none;
  222.                  padding:10px 65px 10px 10px;
  223.              }
  224.              .vd_panel-menu{
  225.                  top:6px;
  226.                  right: 8px;
  227.                  .menu{
  228.                     border:none;
  229.                     color:#666;
  230.                  }
  231.              }
  232.          }
  233.     }        
  234. }
  235.  
  236. /*  Status Widget  */
  237. .vd_status-widget{
  238.         a{
  239.             display:block;
  240.             color:#F0F0F0;  
  241.             padding:20px;            
  242.         }
  243.         a:hover{
  244.             color:#FFF;
  245.             background: rgba(0,0,0,.1);
  246.         }
  247.         .menu-icon{
  248.             display:block;
  249.             font-size:48px;
  250.             float:left;
  251.             line-height:56px;
  252.         }
  253.         .menu-value{
  254.             margin-left:25px;
  255.             line-height:56px;
  256.             font-size: 36px;
  257.         }          
  258.         .menu-text{
  259.             padding-top:10px;
  260.             font-size: 16px;
  261.             letter-spacing:.2px;
  262.             text-transform:uppercase;
  263.         }    
  264. }
  265.  
  266. /* Interactive Chart Widget  */
  267. .vd_interactive-widget{
  268.     .item-left, .item-right{
  269.         padding:15px;
  270.         border-top:1px solid #EAEAEA;
  271.     }
  272.     .item-left{
  273.         margin-right:-15px; border-right:1px solid #EAEAEA;
  274.     }
  275.     .item-right{
  276.         margin-left:-15px;  
  277.     }
  278. }
  279.  
  280. /*  Text Area Menu  */
  281. .vd_textarea-menu{
  282.     .nav-pills > li > a{
  283.         .border-radius(0px);  
  284.        color:#FFFFFF !important;
  285.        padding: 5px 10px 7px !important;
  286.  
  287.        .menu-icon{
  288.           margin-right:0 !important;
  289.        }
  290.     }
  291.     .nav-pills > li:hover > a, .nav-pills > li:hover{
  292.         background:rgba(0,0,0,.1) !important;
  293.     }
  294. }
  295.  
  296. /*  Weather Widget  */
  297. .vd_weather-widget{
  298.     .weather-degree{
  299.         font-size:60px;
  300.     }
  301.     .weather-icon{
  302.         position:absolute; top:20px; right:20px;
  303.     }
  304.     .weather-subinfo{
  305.         font-size:44px;
  306.         text-align:center;
  307.         margin-top:15px;
  308.         margin-bottom:15px;
  309.         .wind-value{
  310.             line-height: 10px;
  311.         }
  312.         .wind-text{
  313.             font-size:32px;
  314.         }
  315.     }    
  316. }
  317.  
  318.  
  319.  
  320. /*  Testimonial Widget  */
  321. .vd_testimonial{
  322.     position:relative;
  323.     .caret-icon{
  324.         position:absolute; top:-14px; left:144px; color:rgba(0,0,0,.2);
  325. background:url(../img/banner/caret-testimonial.png) no-repeat; display:block; width: 31px; height:14px;        
  326.     }
  327.     .testimonial-word-wrapper{
  328.         background:rgba(0,0,0,.2);
  329.         padding: 25px;
  330.         color:#FFFFFF;
  331.         position:relative;
  332.         border-radius: 10px;
  333.     }
  334.     .vd_carousel-control{
  335.         position:absolute; right:0; top:60px; z-index:10;
  336.         a{
  337.             color:white; background:rgba(0,0,0,.3); padding: 10px 15px; margin-right:5px; border-radius:30px;
  338.         }
  339.         a:hover{
  340.             background:rgba(0,0,0,.5);
  341.         }
  342.     }  
  343.     .testimonial-word{background:url(../img/icons/quote-big.png) no-repeat top left; padding-left:70px; padding-top:10px;}    
  344. }
  345.  
  346. .vd_carousel-column{
  347.     float:left;
  348. }
  349. .vd_section{
  350.     padding-top:100px;
  351.     padding-bottom:100px;
  352. }
  353.  
  354. /*  News Widget  */
  355. .vd_news-widget {
  356.  .vd_carousel-control{
  357.      position:absolute; top:4px; left:0px; z-index:9;
  358.      a{background:rgba(255,255,255,.2); color:rgba(0,0,0,.2); padding:8px 15px; font-size:14px;}
  359.      a:hover{background:rgba(255,255,255,.4);}
  360.   }  
  361. }

Raw Paste

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