wp/wp-admin/css/color-picker.css
changeset 16 a86126ab1dd4
parent 9 177826044cd9
child 18 be944660c56a
equal deleted inserted replaced
15:3d4e9c994f10 16:a86126ab1dd4
     8 	display: none;
     8 	display: none;
     9 }
     9 }
    10 
    10 
    11 /* Needs higher specificiity. */
    11 /* Needs higher specificiity. */
    12 .wp-picker-container .wp-color-result.button {
    12 .wp-picker-container .wp-color-result.button {
    13 	height: 24px;
    13 	min-height: 30px;
    14 	margin: 0 6px 6px 0px;
    14 	margin: 0 6px 6px 0px;
    15 	padding: 0 0 0 30px;
    15 	padding: 0 0 0 30px;
    16 	font-size: 11px;
    16 	font-size: 11px;
    17 }
    17 }
    18 
    18 
    20 	background: #f7f7f7;
    20 	background: #f7f7f7;
    21 	border-radius: 0 2px 2px 0;
    21 	border-radius: 0 2px 2px 0;
    22 	border-left: 1px solid #ccc;
    22 	border-left: 1px solid #ccc;
    23 	color: #555;
    23 	color: #555;
    24 	display: block;
    24 	display: block;
    25 	line-height: 2;
    25 	line-height: 2.54545455; /* 28px */
    26 	padding: 0 6px;
    26 	padding: 0 6px;
    27 	text-align: center;
    27 	text-align: center;
    28 }
    28 }
    29 
    29 
    30 .wp-color-result:hover,
    30 .wp-color-result:hover,
    68 /* For the old `custom-background` page, to override the inline-block and margins from `.form-table td fieldset label`. */
    68 /* For the old `custom-background` page, to override the inline-block and margins from `.form-table td fieldset label`. */
    69 .form-table .wp-picker-input-wrap label {
    69 .form-table .wp-picker-input-wrap label {
    70 	margin: 0 !important;
    70 	margin: 0 !important;
    71 }
    71 }
    72 
    72 
    73 .wp-picker-input-wrap .button,
    73 .wp-picker-input-wrap .button.wp-picker-default,
    74 .wp-customizer .wp-picker-input-wrap .button {
    74 .wp-picker-input-wrap .button.wp-picker-clear,
       
    75 .wp-customizer .wp-picker-input-wrap .button.wp-picker-default,
       
    76 .wp-customizer .wp-picker-input-wrap .button.wp-picker-clear {
    75 	margin-left: 6px;
    77 	margin-left: 6px;
       
    78 	padding: 0 8px;
       
    79 	line-height: 2.54545455; /* 28px */
       
    80 	min-height: 30px;
    76 }
    81 }
    77 
    82 
    78 .wp-picker-container .iris-square-slider .ui-slider-handle:focus {
    83 .wp-picker-container .iris-square-slider .ui-slider-handle:focus {
    79 	background-color: #555
    84 	background-color: #555
    80 }
    85 }
    84 	border-color: #ddd;
    89 	border-color: #ddd;
    85 	margin-top: 6px;
    90 	margin-top: 6px;
    86 }
    91 }
    87 
    92 
    88 .wp-picker-container input[type="text"].wp-color-picker {
    93 .wp-picker-container input[type="text"].wp-color-picker {
    89 	width: 65px;
    94 	width: 4rem;
    90 	font-size: 12px;
    95 	font-size: 12px;
    91 	font-family: monospace;
    96 	font-family: monospace;
    92 	line-height: 1.4;
    97 	line-height: 2.33333333; /* 28px */
    93 	margin: 0;
    98 	margin: 0;
       
    99 	padding: 0 5px;
    94 	vertical-align: top;
   100 	vertical-align: top;
       
   101 	min-height: 30px;
    95 }
   102 }
    96 
   103 
    97 .wp-color-picker::-webkit-input-placeholder {
   104 .wp-color-picker::-webkit-input-placeholder {
    98 	color: #72777c;
   105 	color: #72777c;
    99 }
   106 }
   113 	color: #000;
   120 	color: #000;
   114 }
   121 }
   115 
   122 
   116 .iris-picker .ui-square-handle:focus,
   123 .iris-picker .ui-square-handle:focus,
   117 .iris-picker .iris-strip .ui-slider-handle:focus {
   124 .iris-picker .iris-strip .ui-slider-handle:focus {
   118 	box-shadow:
   125 	border-color: #007cba;
   119 		0 0 0 1px #5b9dd9,
   126 	border-style: solid;
   120 		0 0 2px 1px rgba(30, 140, 190, 0.8);
   127 	box-shadow: 0 0 0 1px #007cba;
       
   128 	outline: 2px solid transparent;
   121 }
   129 }
   122 
   130 
   123 .iris-picker .iris-palette:focus {
   131 .iris-picker .iris-palette:focus {
   124 	box-shadow:
   132 	box-shadow: 0 0 0 2px #007cba;
   125 		inset 0 0 5px rgba(0, 0, 0, 0.4),
       
   126 		0 0 0 1px #5b9dd9,
       
   127 		0 0 2px 1px rgba(30, 140, 190, 0.8);
       
   128 }
   133 }
   129 
   134 
   130 @media screen and (max-width: 782px) {
   135 @media screen and (max-width: 782px) {
   131 	.wp-picker-container input[type="text"].wp-color-picker {
   136 	.wp-picker-container input[type="text"].wp-color-picker {
   132 		width: 80px;
   137 		width: 5rem;
   133 		padding: 6px 5px 5px;
       
   134 		font-size: 16px;
   138 		font-size: 16px;
   135 		line-height: 1.15;
   139 		line-height: 1.875; /* 30px */
       
   140 		min-height: 32px;
   136 	}
   141 	}
   137 
   142 
   138 	.wp-customizer .wp-picker-container input[type="text"].wp-color-picker {
   143 	.wp-customizer .wp-picker-container input[type="text"].wp-color-picker {
   139 		padding: 5px 5px 4px;
   144 		padding: 0 5px;
       
   145 	}
       
   146 
       
   147 	.wp-picker-input-wrap .button.wp-picker-default,
       
   148 	.wp-picker-input-wrap .button.wp-picker-clear {
       
   149 		padding: 0 8px;
       
   150 		line-height: 2.14285714; /* 30px */
       
   151 		min-height: 32px;
       
   152 	}
       
   153 
       
   154 	.wp-customizer .wp-picker-input-wrap .button.wp-picker-default,
       
   155 	.wp-customizer .wp-picker-input-wrap .button.wp-picker-clear {
       
   156 		padding: 0 8px;
       
   157 		font-size: 14px;
       
   158 		line-height: 2.14285714; /* 30px */
       
   159 		min-height: 32px;
   140 	}
   160 	}
   141 
   161 
   142 	.wp-picker-container .wp-color-result.button {
   162 	.wp-picker-container .wp-color-result.button {
   143 		height: auto;
       
   144 		padding: 0 0 0 40px;
   163 		padding: 0 0 0 40px;
   145 		font-size: 14px;
   164 		font-size: 14px;
   146 		line-height: 2.1;
   165 		line-height: 2.14285714; /* 30px */
   147 	}
   166 	}
   148 
   167 
   149 	.wp-customizer .wp-picker-container .wp-color-result.button {
   168 	.wp-customizer .wp-picker-container .wp-color-result.button {
   150 		font-size: 13px;
   169 		font-size: 14px;
   151 		line-height: 2;
   170 		line-height: 2.14285714; /* 30px */
   152 	}
   171 	}
   153 
   172 
   154 	.wp-picker-container .wp-color-result-text {
   173 	.wp-picker-container .wp-color-result-text {
   155 		padding: 0 14px;
   174 		padding: 0 14px;
   156 		font-size: inherit;
   175 		font-size: inherit;
   159 
   178 
   160 	.wp-customizer .wp-picker-container .wp-color-result-text {
   179 	.wp-customizer .wp-picker-container .wp-color-result-text {
   161 		padding: 0 10px;
   180 		padding: 0 10px;
   162 	}
   181 	}
   163 }
   182 }
   164 
       
   165 @media screen and (max-width: 640px) {
       
   166 	.wp-customizer .wp-picker-container .wp-color-result.button {
       
   167 		font-size: 14px;
       
   168 		line-height: 2.1;
       
   169 	}
       
   170 
       
   171 	.wp-customizer .wp-picker-container input[type="text"].wp-color-picker {
       
   172 		padding: 6px 5px;
       
   173 	}
       
   174 }