Default Theme (shadow vs gradient)

dabblet.css

/**
 * Default Theme (shadow vs gradient)
 */
 
 body {
   font-family: sans-serif;
   font-size: 16px;
 }
 
.option-list {
  counter-reset: options;
  margin-top: 50px;
}

.option-list label {
  counter-increment: options;
  display: block;
}

.option-list input[type=radio] {
  display: none;
}

.option-list label > span {
  position: relative;
  display: block;
  padding: 2px 32px;
  margin: 4px 0;
  line-height: 20px;
  color: #496d00;
  cursor: pointer;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3);
  background: #72aa00;
  /*background-image: linear-gradient(to bottom, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%);*/
  border: solid 1px #72aa00;
  border-radius: 8px;
  box-shadow: 
  	inset 0 0 3px rgba(255, 255, 255, 0.8), 
  	0 3px 3px rgba(0, 0, 0, 0.25),
  	inset 0 15px 10px -5px rgba(255, 255, 255, 0.5),
  	inset 0 -15px 10px -5px rgba(0, 0, 0, 0.2);
  	
	transition: all .3s ease-in-out;
}

.option-list label > span > span {
  display: block;
  padding: 3px 5px;
  background: #72aa00;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
}

.option-list label > span:before {
  content: counter(options);
  position: absolute;
  width: 16px;
  left: 8px;
  top: 50%;
  margin-top: -10px;
  text-align: center;
}

.option-list label > span:after {
  content: '\2022';
  display: none;
  position: absolute;
  width: 16px;
  right: 8px;
  top: 50%;
  margin-top: -10px;
  font-size: 24px;
  text-align: center;
}

.option-list label > span:hover {
  color: #edffc9;
	background: #9ece2f;
  /*background-image: linear-gradient(to bottom, #c7d769 0%, #9ece2f 50%, #83c300 51%, #a9d43d 100%);*/
  border-color: #87c900;
    box-shadow: 
  	inset 0 0 3px rgba(255, 255, 255, 0.8), 
  	0 3px 3px rgba(0, 0, 0, 0.25),
  	inset 0 15px 10px -5px rgba(255, 255, 255, 0.5),
  	inset 0 -15px 10px -5px rgba(0, 0, 0, 0.2);
}

.option-list input[type=radio]:checked + span {
  color: white;
  background-image: linear-gradient(to bottom, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%);
  border-color: #3690f0;
}

.option-list input[type=radio]:checked + span > span {
  background-color: #3690f0;
}

.option-list input[type=radio]:checked + span:after {
  display: block;
}

dabblet.html

<div class="option-list">
	<label>
		<input name="option" type="radio">
		<span><span>Option 1</span></span>
	</label>
	<label>
		<input name="option" type="radio">
		<span><span>Option 2</span></span>
	</label>
	<label>
		<input name="option" type="radio">
		<span><span>Option Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae blanditiis consequuntur explicabo harum ipsa iste laboriosam laborum natus numquam omnis porro quasi ratione repudiandae, sapiente, sint suscipit velit voluptatem!</span></span>
	</label>
	<label>
		<input name="option" type="radio">
		<span><span>Option 4</span></span>
	</label>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}