Vorlage:ButtonAus/Test: Unterschied zwischen den Versionen

Aktuelle Version vom 1. April 2019, 17:11 Uhr

Aus

<span style="

@@ Zeile 1: / Zeile 1: @@
 <span style="
-		background: white;
+		background-image: linear-gradient(#ebebeb, #c7c7c7);
-		border: 0px solid rgba(0, 0, 0, 0.125);
+		border: 1px solid #999999;
+		border-radius:9999px;
 		overflow: hidden;
 		display: inline-block;
-		width: 23px;
+		width: 40px;
-		height: 16px;
+		height: 17px;
 		position: relative;
-		top: 3px;
+		top: 5px;
 		margin-right: 0px;
-		margin-top: 0px;
 		cursor: pointer;
-		border-radius:24px;
+		color: grey;
-		color: rgba(0, 0, 0, 0.6);
+line-height:15px;
 		clear: both"
 		"><span style="
-		font-size: 50%;
+		font-size: 75%;
+font-weight:normal;
 		padding-left: 17px;
 		vertical-align: 15px;"
-	>{{#if: ||{{{1|}}} }}</span><span style="
+	>{{#if: ||{{{1|Aus}}} }}</span><span style="
-		background-image: {{Farbe|grau}}
+		background-image: #ededed 0%,#c4c4c4 100%);
-		border: 1px solid #999999;
+		border: 0px solid rgba(0, 0, 0, 0.6);
-		border-radius:9999px;
-		display: block;
-		left: 0px;
-		top: 3px;
-		bottom: 0px;
-		background: {{Farbe|grau}}
-		position: absolute;
-		-webkit-transition: 0.3s;
-		transition: 0.3s;
-		border-radius: 19px;
-		width: 23px;
-		height: 9px;
-		x-webkit-box-shadow: 0 0 6px -2px black;
-		xbox-shadow: 0 0 6px -2px black;
-		clear: both"
-	">&#8195;&#8197;</span><span style="
-		background-image: linear-gradient(#c7c7c7,#e8e8e8);
-		border: 1px solid #999999;
 		border-radius:9999px;
 		display: block;
@@ Zeile 44: / Zeile 28: @@
 		top: 0px;
 		bottom: 0px;
-		background: #fff;
 		position: absolute;
-		-webkit-transition: 0.3s;
-		transition: 0.3s;
 		border-radius: 11px;
 		width: 15px;
 		height: 15px;
-		-webkit-box-shadow: 0 0 6px -1px black;
+		box-shadow: 0 0 6px -2px black;
-		box-shadow: 0 0 6px -1px black;
+		clear: both"
+	"></span></span>
+----
+<span style="
+		<!-- äußerer (unsichtbarer) Rahmen -->
+		background: white;
+		border: 0px solid rgba(0, 0, 0, 0.125);
+		overflow: hidden;
+		display: inline-block;
+		width: 23px;
+		height: 16px;
+		position: relative;
+		top: 3px;
+		margin-right: 0px;
+		margin-top: 0px;
+		cursor: pointer;
+		border-radius:24px;
+		color: rgba(0, 0, 0, 0.6);
 		clear: both"
-	">&#8195;&#8197;</span>
+	">
+	<span style="
+			font-size: 50%;
+			padding-left: 17px;
+			vertical-align: 15px;"
+		>{{#if: ||{{{1|}}} }}
+	</span>
+	<span style="
+			<!-- graue Schiebeleiste -->
+			background-image: {{Farbe|grau}}
+			border: 1px solid #999999;
+			border-radius:9999px;
+			display: block;
+			left: 0px;
+			top: 3px;
+			bottom: 0px;
+			background: {{Farbe|grau}}
+			position: absolute;
+			-webkit-transition: 0.3s;
+			transition: 0.3s;
+			border-radius: 19px;
+			width: 23px;
+			height: 9px;
+			x-webkit-box-shadow: 0 0 6px -2px black;
+			xbox-shadow: 0 0 6px -2px black;
+			clear: both"
+		">&#8195;&#8197;
+	</span>
+	<span style="
+			<!-- Button -->
+			<span style="
+		background-image: linear-gradient(#ebebeb, #c7c7c7);
+			border: 1px solid #999999;
+			border-radius:9999px;
+			overflow: hidden;
+			display: inline-block;
+			width: 15px;
+			height: 15px;
+			position: absolute;
+			top: 0px;
+			margin-right: 0px;
+			cursor: pointer;
+			color: grey;
+			clear: both"
+			">
+			<span style="
+				font-size: 75%;
+				padding-left: 17px;
+				vertical-align: 15px;"
+				>
+			</span>
+		</span>
+</span>