CSS   46

color panel css

Guest on 22nd June 2022 02:29:43 PM

  1. .boxed {
  2.   margin: 0 auto;
  3.   width: 100%;
  4.   min-width: 280px;
  5.   max-width: 1230px;
  6.   -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 10px 10px;
  7.   -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 10px 10px;
  8.   -ms-box-shadow: rgba(0, 0, 0, 0.2) 0 10px 10px;
  9.   -o-box-shadow: rgba(0, 0, 0, 0.2) 0 10px 10px;
  10.   box-shadow: rgba(0, 0, 0, 0.2) 0 10px 10px;
  11. }
  12. .boxed .navbar {
  13.   width: 100% !important;
  14.   margin: 0 auto;
  15.   width: 100%;
  16.   min-width: 280px;
  17.   max-width: 1230px;
  18. }
  19. .boxed .bx-wrapper .owl-next {right: -30px !important}
  20. .boxed .bx-wrapper .owl-prev {left: -30px !important}
  21. .switcher {
  22.   position: fixed;
  23.   bottom: 30%;
  24.   padding: 5px;
  25.   left: -200px;
  26.   z-index: 999999999999999999999999999999999;
  27.   width: 200px;
  28.   height: auto;
  29.   background: #f7f7f7;
  30.   padding-top: 10px;
  31.   -webkit-transition: all .25s ease-out;
  32.   -o-transition: all .25s ease-out;
  33.   transition: all .25s ease-out;
  34.   border: solid 1px #ddd;
  35. }
  36. .switcher .fa-cog {
  37.   background: #f7f7f7;
  38.   border: solid 1px #ddd;
  39.   color: #707070;
  40.   width: 50px;
  41.   height: 50px;
  42.   font-size: 36px;
  43.   text-align: center;
  44.   line-height: 50px;
  45.   cursor: pointer;
  46.   position: absolute;
  47.   right: -50px;
  48.   top: -1px;
  49. }
  50. .switcher .fa-cog:hover {
  51.   -webkit-animation: spin 2s linear;
  52.   -moz-animation: spin 2s linear;
  53.   -o-animation: spin 2s linear;
  54.   animation: spin 2s linear;
  55. }
  56. .switcher.active {
  57.   left: 0;
  58.   -webkit-transition: all .25s ease-out;
  59.   -o-transition: all .25s ease-out;
  60.   transition: all .25s ease-out;
  61. }
  62. .switcher .box {
  63.         position:relative;
  64.         display:inline-block;
  65.   width: 29%;
  66.   height: 26px;
  67.   text-indent: -9999px;
  68.   cursor: pointer;
  69.   border: 1px solid #222222 !important;
  70.   color: #fff;
  71.   margin: 5px 1% 5px;
  72.   text-align: center;
  73.   font-weight: 400;
  74.   font-size: 10px;
  75. }
  76. .switcher .heading-panel{
  77.         position:relative;
  78.         display:block;
  79.         line-height:24px;
  80.         padding:8px 10px;
  81.         background:#003;
  82.         color:#ffffff;
  83.         text-align:center;
  84.         text-transform:capitalize;
  85. }
  86.  
  87. .switcher .layout-outer,
  88. .switcher .colors-outer{
  89.         text-align:center;
  90.         padding:10px 15px;     
  91. }
  92.  
  93. #default {background: #fb4848;}
  94. #blue {background: #6699FF}
  95. #asparagus {background: #7BA05B}
  96. #green {background: #76c381;}
  97. #orange {background: #d37b46;}
  98. #purple {background: #e281ef}
  99. #yellow {background: #f8ca00}
  100. #tomato {background: #FF6347}
  101. #teal {background: #008080}
  102. #pink {background: #FF69B1}
  103. #lima {background: #73B819}
  104. #java {background: #19B8AF}
  105. #turquoise {background: #40E8D9}
  106. #boxed,
  107. #full {
  108.         position:relative;
  109.         display:block;
  110.         padding:5px 15px;
  111.         font-size:14px;
  112.         border:2px solid #999;
  113.   background: #f8f8f8;
  114.   color: #707070;
  115. }
  116.  
  117. .layout-option{
  118.         position:relative;
  119.         display:inline-block;
  120.         width:45%;
  121.         margin:0px 1%;
  122. }

Raw Paste

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