Файл: documentation/examples/theming.html
Строк: 34
<?php
<html>
<head>
<script type="text/javascript" src="../assets/jquery.js"></script>
<script type="text/javascript" src="../../jcolor.js"></script>
<link rel="stylesheet" type="text/css" href="../../jcolor.css">
<style type="text/css">
/* Setting the font size of the root element scales the entire color picker */
.colorpicker.color-picker-themed {
font-size: 1.3em;
}
/* Remove all shadows, for a more flat look */
.colorpicker.color-picker-themed * {
box-shadow: none;
}
/* Remove the border when minimized and make the background transparent */
.colorpicker.color-picker-themed .maximize-wrapper {
padding: 0;
background: transparent;
}
/* Give all the components gray borders */
.colorpicker.color-picker-themed .display-wrapper,
.colorpicker.color-picker-themed .slider {
box-shadow: 0 0 0 0.05em rgba(64, 64, 64, 0.5);
border-radius: 0.1em;
}
/* Show overflow, so that the borders specified above won't get cut off */
.colorpicker.color-picker-themed.expanded .inner-maximize-wrapper {
overflow: visible;
}
/* Make sure the slider handles matches the gray borders */
.colorpicker.color-picker-themed .slider .handle {
background: rgba(64, 64, 64, 0.5);
box-shadow: none;
width: 0.2em;
margin-left: -0.1em;
}
</style>
</head>
<body style="background: url(../assets/swirl-pattern.png);">
<div class="color-picker-themed"></div>
<script>
$('.color-picker-themed').colorpicker({ color: '#4bdb80e9' });
</script>
</body>
</html>
?>