foo

www/htdocs/css/settings-panel.css

@@ -0,0 +1,175 @@
+.b-settings-panel {
+	width: 200px;
+
+	position: fixed;
+	top: 140px;    left: -200px;
+	z-index: 1000;
+
+	padding: 20px;
+
+	background: #fbfbfb;
+	border-right: none;
+	box-shadow: 0 10px 10px rgba(0,0,0,0.1);
+
+	color: #676767;
+
+	-webkit-transition: left 0.2s ease-in-out;
+	transition: left 0.2s ease-in-out;
+	display:none;
+}
+
+
+.b-settings-panel:after {
+	content: '';
+	display: block;
+
+	width: 2px;
+	position: absolute;
+	top: -1px;    right: 0;
+	bottom: -1px;
+
+	background: #404347;
+}
+
+.b-settings-panel.active {
+	left: 0px;
+}
+
+.btn-settings {
+	width: 40px;
+	height: 40px;
+
+	position: absolute;
+	top: -1px;    left: 100%;
+
+	background: #404347;
+	border-radius: 0 3px 3px 0;
+	cursor: pointer;
+
+	text-align: center;
+	font: 24px/40px 'FontAwesome';
+	color: #fff;
+}
+
+.btn-settings:before {
+	content: "\f013";
+}
+
+.settings-section {
+	padding: 0px;
+}
+
+.b-settings-panel span {
+	vertical-align: top;
+	text-align: left;
+	font: 10px/28px 'OpenSansSemiboldRegular';
+}
+
+.b-switch {
+	display: inline-block;
+
+	width: 40px;
+	height: 24px;
+
+	position: relative;
+	margin: 0 9px;
+	padding: 1px;
+
+	border-radius: 14px;
+	border: 1px solid #ddd;
+
+	background: #fff;
+	box-shadow: inset 0 1px 3px #f3f3f3;
+}
+
+.switch-handle {
+	width: 24px;
+	height: 24px;
+
+	position: absolute;
+	top: 1px;    right: 26px;
+
+	margin-right: -25px;
+
+	border-radius: 50%;
+	box-shadow: 0 1px 2px #c4c4c4;
+
+	background: #ff855f url(../img/btn-bg.png) repeat-x top;
+
+	cursor: pointer;
+
+	-webkit-transition: right 0.2s ease-in-out;
+	transition: right 0.2s ease-in-out;
+}
+
+.switch-handle:before {
+	content: '';
+
+	display: block;
+	margin: 9px auto;
+
+	width: 6px;
+	height: 6px;
+
+	border-radius: 50%;
+
+	background: #fff;
+}
+
+.switch-handle.active {
+	right: 100%;
+}
+
+.bg-list, .color-list {
+	padding-bottom: 0;
+
+	font-size: 0;
+	letter-spacing: -.31em;
+	word-spacing: -.43em;
+}
+
+.bg-list div, .color-list div {
+	display: inline-block;
+
+	width: 30px;
+	height: 30px;
+
+	margin: 0 4px 0px;
+	padding: 1px;
+
+	border-radius: 3px;
+	border: 1px solid #ddd;
+
+	background-clip: content-box;
+	cursor: pointer;
+
+	-webkit-transition: box-shadow 0.2s ease-in-out;
+	transition: box-shadow 0.2s ease-in-out;
+}
+
+.bg-list div.active, .color-list div.active {
+	width: 26px;
+	height: 26px;
+
+	padding: 3px;
+	opacity: 1;
+
+	border: 1px solid #ed4534;
+	box-shadow: inset 0 0 0 2px #ed4534;
+}
+
+
+.color-list div {
+	box-shadow: inset 0 0 0 1px #fff;
+}
+
+.color-list div.active {
+	box-shadow: inset 0 0 0 2px #ed4534, inset 0 0 0 3px #fff;
+}
+
+.b-settings-panel h5 {
+	margin-left: 3px;
+	margin-bottom: 13px;
+	text-align: left;
+	font-size: 13px;
+}