CSS   54

js color picker v2 css

Guest on 13th June 2022 05:07:56 PM

  1.         #dhtmlgoodies_colorPicker{
  2.                 position:absolute;
  3.                 width:250px;
  4.                 padding-bottom:1px;
  5.                 background-color:#FFF;
  6.                 border:1px solid #317082;
  7.                
  8.                 width: 252px;   /* IE 5.x */
  9.                 width/* */:/**/250px;   /* Other browsers */
  10.                 width: /**/250px;      
  11.                                
  12.         }
  13.        
  14.         #dhtmlgoodies_colorPicker .colorPicker_topRow{
  15.                 padding-bottom:1px;
  16.                 border-bottom:3px double #317082;
  17.                 background-color:#E2EBED;
  18.                 padding-left:2px;
  19.                
  20.                 width: 250px;   /* IE 5.x */
  21.                 width/* */:/**/248px;   /* Other browsers */
  22.                 width: /**/248px;      
  23.                
  24.                 height: 20px;   /* IE 5.x */
  25.                 height/* */:/**/16px;   /* Other browsers */
  26.                 height: /**/16px;      
  27.                                
  28.         }
  29.        
  30.         #dhtmlgoodies_colorPicker .colorPicker_statusBar{
  31.                 height:13px;
  32.                 padding-bottom:2px;
  33.                 width:248px;
  34.                 border-top:3px double #317082; 
  35.                 background-color:#E2EBED;
  36.                 padding-left:2px;
  37.                 clear:both;
  38.                
  39.                 width: 250px;   /* IE 5.x */
  40.                 width/* */:/**/248px;   /* Other browsers */
  41.                 width: /**/248px;      
  42.                
  43.                 height: 18px;   /* IE 5.x */
  44.                 height/* */:/**/13px;   /* Other browsers */
  45.                 height: /**/13px;      
  46.                                                
  47.         }
  48.        
  49.         #dhtmlgoodies_colorPicker .colorSquare{
  50.                 margin-left:1px;
  51.                 margin-bottom:1px;
  52.                 float:left;
  53.                 border:1px solid #000;
  54.                 cursor:pointer;
  55.                
  56.                 width: 12px;    /* IE 5.x */
  57.                 width/* */:/**/10px;    /* Other browsers */
  58.                 width: /**/10px;       
  59.                
  60.                 height: 12px;   /* IE 5.x */
  61.                 height/* */:/**/10px;   /* Other browsers */
  62.                 height: /**/10px;      
  63.                                
  64.         }
  65.        
  66.         .colorPickerTab_inactive,.colorPickerTab_active{
  67.        
  68.                 height:17px;
  69.                 padding-left:4px;
  70.                 cursor:pointer;
  71.                
  72.                
  73.         }
  74.         .colorPickerTab_inactive span{
  75.                 background-image:url('images/tab_left_inactive.gif');
  76.         }
  77.        
  78.         .colorPickerTab_active span{
  79.                 background-image:url('images/tab_left_active.gif');
  80.  
  81.         }
  82.         .colorPickerTab_inactive span, .colorPickerTab_active span{
  83.                 line-height:16px;
  84.                 font-weight:bold;
  85.                 font-family:arial;
  86.                 font-size:11px;
  87.                 padding-top:1px;
  88.                 vertical-align:middle;
  89.                 background-position:top left;
  90.                 background-repeat: no-repeat;  
  91.                 float:left;
  92.                 padding-left:6px;
  93.                 -moz-user-select:no;
  94.         }      
  95.         .colorPickerTab_inactive img,.colorPickerTab_active img{
  96.                 float:left;
  97.         }
  98.         .colorPickerCloseButton{
  99.                 width:11px;
  100.                 height:11px;
  101.                 text-align:center;
  102.                 line-height:10px;
  103.                 border:1px solid #317082;
  104.                 position:absolute;
  105.                 right:1px;
  106.                 font-size:12px;
  107.                 font-weight:bold;
  108.                 top:1px;
  109.                 padding:1px;
  110.                 cursor:pointer;
  111.                
  112.                 width: 15px;    /* IE 5.x */
  113.                 width/* */:/**/11px;    /* Other browsers */
  114.                 width: /**/11px;
  115.                
  116.                 height: 15px;   /* IE 5.x */
  117.                 height/* */:/**/11px;   /* Other browsers */
  118.                 height: /**/11px;
  119.  
  120.                        
  121.         }
  122.         #colorPicker_statusBarTxt{
  123.                 font-size:11px;
  124.                 font-family:arial;
  125.                 vertical-align:top;
  126.                 line-height:13px;
  127.  
  128.         }
  129.         form{
  130.                 padding-left:5px;
  131.         }
  132.        
  133.         .form_widget_amount_slider{
  134.                 border-top:1px solid #9d9c99;
  135.                 border-left:1px solid #9d9c99;
  136.                 border-bottom:1px solid #eee;
  137.                 border-right:1px solid #eee;
  138.                 background-color:#f0ede0;
  139.                 position:absolute;
  140.                 bottom:0px;
  141.                
  142.                 width: 5px;     /* IE 5.x */
  143.                 width/* */:/**/3px;     /* Other browsers */
  144.                 width: /**/3px;
  145.                
  146.                 height: 5px;    /* IE 5.x */
  147.                 height/* */:/**/3px;    /* Other browsers */
  148.                 height: /**/3px;
  149.                                
  150.         }
  151.         .colorSliderLabel{
  152.                 width:15px;
  153.                 height:20px;
  154.                 float:left;
  155.                 font-size:11px;
  156.                 font-weight:bold;
  157.         }
  158.         .colorSlider{
  159.                 width:175px;
  160.                 height:20px;
  161.                 float:left;
  162.         }
  163.         .colorInput{
  164.                 width:45px;
  165.                 height:20px;
  166.                 float:left;
  167.         }      
  168.         .colorPreviewDiv{
  169.                 width:186px;
  170.                 margin-right:2px;
  171.                 margin-top:1px;
  172.                 border:1px solid #CCC;
  173.                 height:20px;
  174.                 float:left;
  175.                 cursor:pointer;
  176.                
  177.                 width: 188px;   /* IE 5.x */
  178.                 width/* */:/**/186px;   /* Other browsers */
  179.                 width: /**/186px;
  180.                
  181.                 height: 22px;   /* IE 5.x */
  182.                 height/* */:/**/20px;   /* Other browsers */
  183.                 height: /**/20px;
  184.                                
  185.  
  186.         }
  187.         .colorCodeDiv{
  188.                 width:50px;
  189.                 height:20px;
  190.                 float:left;
  191.         }

Raw Paste

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