| 75 | | * Tweak the brightness of a color by adjusting the RGB values by the given interval. |
| 76 | | * |
| 77 | | * Use positive values of $steps to brighten the color and negative values to darken the color. |
| 78 | | * All three RGB values are modified by the specified steps, within the range of 0-255. The hue |
| 79 | | * is generally maintained unless the number of steps causes one value to be capped at 0 or 255. |
| 80 | | * |
| 81 | | * @since Twenty Fourteen 1.0 |
| 82 | | * |
| 83 | | * @param string $color The original color, in 3- or 6-digit hexadecimal form. |
| 84 | | * @param int $steps The number of steps to adjust the color by, in RGB units. |
| 85 | | * @return string $color The new color, in 6-digit hexadecimal form. |
| 86 | | */ |
| 87 | | function twentyfourteen_adjust_color( $color, $steps ) { |
| 88 | | // Convert shorthand to full hex. |
| 89 | | if ( strlen( $color ) == 3 ) { |
| 90 | | $color = str_repeat( substr( $color, 1, 1 ), 2 ) . str_repeat( substr( $color, 2, 1 ), 2 ) . str_repeat( substr( $color, 3, 1), 2 ); |
| 91 | | } |
| 92 | | |
| 93 | | // Convert hex to rgb. |
| 94 | | $rgb = array( hexdec( substr( $color, 1, 2 ) ), hexdec( substr( $color, 3, 2 ) ), hexdec( substr( $color, 5, 2 ) ) ); |
| 95 | | |
| 96 | | // Adjust color and switch back to 6-digit hex. |
| 97 | | $hex = '#'; |
| 98 | | foreach ( $rgb as $value ) { |
| 99 | | $value += $steps; |
| 100 | | if ( $value > 255 ) { |
| 101 | | $value = 255; |
| 102 | | } elseif ( $value < 0 ) { |
| 103 | | $value = 0; |
| 104 | | } |
| 105 | | $hex .= str_pad( dechex( $value ), 2, '0', STR_PAD_LEFT); |
| 106 | | } |
| 107 | | |
| 108 | | return $hex; |
| 109 | | } |
| 110 | | |
| 111 | | /** |
| 112 | | * Returns a slightly lighter color than what is set as the theme's |
| 113 | | * accent color. |
| 114 | | * |
| 115 | | * @since Twenty Fourteen 1.0 |
| 116 | | * |
| 117 | | * @return string |
| 118 | | */ |
| 119 | | function twentyfourteen_accent_mid() { |
| 120 | | return twentyfourteen_adjust_color( get_theme_mod( 'accent_color' ), 29 ); |
| 121 | | } |
| 122 | | |
| 123 | | /** |
| 124 | | * Returns a lighter color than what is set as the theme's accent color. |
| 125 | | * |
| 126 | | * @since Twenty Fourteen 1.0 |
| 127 | | * |
| 128 | | * @return string |
| 129 | | */ |
| 130 | | function twentyfourteen_accent_light() { |
| 131 | | return twentyfourteen_adjust_color( get_theme_mod( 'accent_color' ), 49 ); |
| 132 | | } |
| 133 | | |
| 134 | | /** |
| 135 | | * Caches the generated variants of the theme's accent color. |
| 136 | | * |
| 137 | | * @since Twenty Fourteen 1.0 |
| 138 | | * |
| 139 | | * @return void |
| 140 | | */ |
| 141 | | function twentyfourteen_rebuild_accent_colors() { |
| 142 | | set_theme_mod( 'accent_mid', twentyfourteen_accent_mid() ); |
| 143 | | set_theme_mod( 'accent_light', twentyfourteen_accent_light() ); |
| 144 | | } |
| 145 | | add_action( 'update_option_theme_mods_twentyfourteen', 'twentyfourteen_rebuild_accent_colors' ); |
| 146 | | |
| 147 | | /** |
| 148 | | * Output the CSS for the Theme Customizer options. |
| 149 | | * |
| 150 | | * @since Twenty Fourteen 1.0 |
| 151 | | * |
| 152 | | * @return void |
| 153 | | */ |
| 154 | | function twentyfourteen_customizer_styles() { |
| 155 | | $accent_color = get_theme_mod( 'accent_color', '#24890d' ); |
| 156 | | |
| 157 | | // Don't do anything if the current color is the default. |
| 158 | | if ( '#24890d' === $accent_color ) { |
| 159 | | return; |
| 160 | | } |
| 161 | | |
| 162 | | $accent_mid = get_theme_mod( 'accent_mid' ); |
| 163 | | $accent_light = get_theme_mod( 'accent_light' ); |
| 164 | | |
| 165 | | $css = '/* Custom accent color. */ |
| 166 | | a, |
| 167 | | .content-sidebar .widget a { |
| 168 | | color: ' . $accent_color . '; |
| 169 | | } |
| 170 | | |
| 171 | | button, |
| 172 | | .contributor-posts-link, |
| 173 | | input[type="button"], |
| 174 | | input[type="reset"], |
| 175 | | input[type="submit"], |
| 176 | | .search-toggle, |
| 177 | | .hentry .mejs-controls .mejs-time-rail .mejs-time-current, |
| 178 | | .widget button, |
| 179 | | .widget input[type="button"], |
| 180 | | .widget input[type="reset"], |
| 181 | | .widget input[type="submit"], |
| 182 | | .widget_calendar tbody a, |
| 183 | | .content-sidebar .widget input[type="button"], |
| 184 | | .content-sidebar .widget input[type="reset"], |
| 185 | | .content-sidebar .widget input[type="submit"], |
| 186 | | .slider-control-paging .slider-active:before, |
| 187 | | .slider-control-paging .slider-active:hover:before, |
| 188 | | .slider-direction-nav a:hover { |
| 189 | | background-color: ' . $accent_color . '; |
| 190 | | } |
| 191 | | |
| 192 | | ::-moz-selection { |
| 193 | | background: ' . $accent_color . '; |
| 194 | | } |
| 195 | | |
| 196 | | ::selection { |
| 197 | | background: ' . $accent_color . '; |
| 198 | | } |
| 199 | | |
| 200 | | .paging-navigation .page-numbers.current { |
| 201 | | border-color: ' . $accent_color . '; |
| 202 | | } |
| 203 | | |
| 204 | | @media screen and (min-width: 782px) { |
| 205 | | .primary-navigation li:hover > a, |
| 206 | | .primary-navigation li.focus > a, |
| 207 | | .primary-navigation ul ul { |
| 208 | | background-color: ' . $accent_color . '; |
| 209 | | } |
| 210 | | } |
| 211 | | |
| 212 | | @media screen and (min-width: 1008px) { |
| 213 | | .secondary-navigation li:hover > a, |
| 214 | | .secondary-navigation li.focus > a, |
| 215 | | .secondary-navigation ul ul { |
| 216 | | background-color: ' . $accent_color . '; |
| 217 | | } |
| 218 | | } |
| 219 | | |
| 220 | | /* Generated "mid" variant of custom accent color. */ |
| 221 | | button:hover, |
| 222 | | button:focus, |
| 223 | | .contributor-posts-link:hover, |
| 224 | | input[type="button"]:hover, |
| 225 | | input[type="button"]:focus, |
| 226 | | input[type="reset"]:hover, |
| 227 | | input[type="reset"]:focus, |
| 228 | | input[type="submit"]:hover, |
| 229 | | input[type="submit"]:focus, |
| 230 | | .search-toggle:hover, |
| 231 | | .search-toggle.active, |
| 232 | | .search-box, |
| 233 | | .entry-meta .tag-links a:hover, |
| 234 | | .widget input[type="button"]:hover, |
| 235 | | .widget input[type="button"]:focus, |
| 236 | | .widget input[type="reset"]:hover, |
| 237 | | .widget input[type="reset"]:focus, |
| 238 | | .widget input[type="submit"]:hover, |
| 239 | | .widget input[type="submit"]:focus, |
| 240 | | .widget_calendar tbody a:hover, |
| 241 | | .content-sidebar .widget input[type="button"]:hover, |
| 242 | | .content-sidebar .widget input[type="button"]:focus, |
| 243 | | .content-sidebar .widget input[type="reset"]:hover, |
| 244 | | .content-sidebar .widget input[type="reset"]:focus, |
| 245 | | .content-sidebar .widget input[type="submit"]:hover, |
| 246 | | .content-sidebar .widget input[type="submit"]:focus, |
| 247 | | .slider-control-paging a:hover:before { |
| 248 | | background-color: ' . $accent_mid . '; |
| 249 | | } |
| 250 | | |
| 251 | | a:active, |
| 252 | | a:hover, |
| 253 | | .site-navigation a:hover, |
| 254 | | .entry-title a:hover, |
| 255 | | .entry-meta a:hover, |
| 256 | | .cat-links a:hover, |
| 257 | | .entry-content .edit-link a:hover, |
| 258 | | .page-links a:hover, |
| 259 | | .post-navigation a:hover, |
| 260 | | .image-navigation a:hover, |
| 261 | | .comment-author a:hover, |
| 262 | | .comment-list .pingback a:hover, |
| 263 | | .comment-list .trackback a:hover, |
| 264 | | .comment-metadata a:hover, |
| 265 | | .comment-reply-title small a:hover, |
| 266 | | .widget a:hover, |
| 267 | | .widget-title a:hover, |
| 268 | | .widget_twentyfourteen_ephemera .entry-meta a:hover, |
| 269 | | .content-sidebar .widget a:hover, |
| 270 | | .content-sidebar .widget .widget-title a:hover, |
| 271 | | .content-sidebar .widget_twentyfourteen_ephemera .entry-meta a:hover, |
| 272 | | .site-info a:hover, |
| 273 | | .featured-content a:hover { |
| 274 | | color: ' . $accent_mid . '; |
| 275 | | } |
| 276 | | |
| 277 | | .page-links a:hover, |
| 278 | | .paging-navigation a:hover { |
| 279 | | border-color: ' . $accent_mid . '; |
| 280 | | } |
| 281 | | |
| 282 | | .tag-links a:hover:before { |
| 283 | | border-right-color: ' . $accent_mid . '; |
| 284 | | } |
| 285 | | |
| 286 | | @media screen and (min-width: 782px) { |
| 287 | | .primary-navigation ul ul a:hover, |
| 288 | | .primary-navigation ul ul li.focus > a { |
| 289 | | background-color: ' . $accent_mid . '; |
| 290 | | } |
| 291 | | } |
| 292 | | |
| 293 | | @media screen and (min-width: 1008px) { |
| 294 | | .secondary-navigation ul ul a:hover, |
| 295 | | .secondary-navigation ul ul li.focus > a { |
| 296 | | background-color: ' . $accent_mid . '; |
| 297 | | } |
| 298 | | } |
| 299 | | |
| 300 | | /* Generated "light" variant of custom accent color. */ |
| 301 | | button:active, |
| 302 | | .contributor-posts-link:active, |
| 303 | | input[type="button"]:active, |
| 304 | | input[type="reset"]:active, |
| 305 | | input[type="submit"]:active, |
| 306 | | .widget input[type="button"]:active, |
| 307 | | .widget input[type="reset"]:active, |
| 308 | | .widget input[type="submit"]:active, |
| 309 | | .content-sidebar .widget input[type="button"]:active, |
| 310 | | .content-sidebar .widget input[type="reset"]:active, |
| 311 | | .content-sidebar .widget input[type="submit"]:active { |
| 312 | | background-color: ' . $accent_light . '; |
| 313 | | } |
| 314 | | |
| 315 | | .site-navigation .current_page_item > a, |
| 316 | | .site-navigation .current_page_ancestor > a, |
| 317 | | .site-navigation .current-menu-item > a, |
| 318 | | .site-navigation .current-menu-ancestor > a { |
| 319 | | color: ' . $accent_light . '; |
| 320 | | }'; |
| 321 | | |
| 322 | | wp_add_inline_style( 'twentyfourteen-style', $css ); |
| 323 | | } |
| 324 | | add_action( 'wp_enqueue_scripts', 'twentyfourteen_customizer_styles' ); |
| 325 | | |
| 326 | | /** |