From 71bf31bb618d3fcfe13915babd8a6ea10cbe6eec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Tue, 25 Sep 2018 11:51:17 +0200 Subject: [PATCH] Minnor changes --- ethenis/config | 2 +- ethenis/content/dra.html | 81 ++- ethenis/content/ethenis.html | 123 ++-- ethenis/content/flat-remix-css.html | 840 ++++++++++++++++------------ ethenis/content/man.php | 5 +- ethenis/css/flat-remix.css | 350 +----------- 6 files changed, 573 insertions(+), 828 deletions(-) diff --git a/ethenis/config b/ethenis/config index 20ce46c..54b1024 100644 --- a/ethenis/config +++ b/ethenis/config @@ -3,7 +3,7 @@ "scrollAnimationDuration" : 100, "content" : { "" : ["ethenis.html", "Ethenis"], - "dra" : ["dra.html", "DRA"], + "dra" : ["dra.html", "DRA"], "flat-remix-css" : ["flat-remix-css.html", "Flat Remix CSS Library"], "/^man\/\d*$/" : ["man.php", false] } diff --git a/ethenis/content/dra.html b/ethenis/content/dra.html index 3874f48..14124e2 100644 --- a/ethenis/content/dra.html +++ b/ethenis/content/dra.html @@ -2,47 +2,44 @@ document.title = "DяA | Daniel Ruiz de Alegria";
-

Daniel
Ruiz de Alegría

-
-
-
- github.com/daniruiz - ✉ CONTACT ME - drasite.com -
-
-
-
-

Donate

-

You can also support the development of Ethenis by donating:

- -
\ No newline at end of file +

Daniel
Ruiz de Alegría

+
+
+
+ github.com/daniruiz + ✉ CONTACT ME + drasite.com +
+
+
+
+

Donate

+

You can also support the development of Ethenis by donating:

+ + diff --git a/ethenis/content/ethenis.html b/ethenis/content/ethenis.html index db5617e..0510abc 100644 --- a/ethenis/content/ethenis.html +++ b/ethenis/content/ethenis.html @@ -2,72 +2,73 @@ document.title = "Ethenis Framework";
- -

Ethenis Framework

-
Ethenis is licensed under the MIT License
-

-

- So simple, that...
- Even the Name Is Simple -

-

Ethenis is a PHP and JavaScript framework developed with the aim of speeding up the creation of Single Page Applications. Unlike other projects, Ethenis focus on a single goal, allowing its size and execution time to be minimum and thus preventing the slowdown of our page.

-
-
- ↧ Download Ethenis - </> Source Code on GitHub -

Manual

-
diff --git a/ethenis/content/flat-remix-css.html b/ethenis/content/flat-remix-css.html index f42272d..ca94a7b 100644 --- a/ethenis/content/flat-remix-css.html +++ b/ethenis/content/flat-remix-css.html @@ -1,10 +1,11 @@ -
-
-
-
-
- - - -
+
+
+
+
+
+ + + +
+
+
+

Flat Remix
CSS Library

+
+

+ A lightweight CSS library that provides a set of predesigned elements for a fast web development. +

+

+ It follows a modern "flat" design using high contrasts and sharp borders. +

+
+
+ ↧ Download Flat-Remix.css + + github.com/daniruiz/Flat-Remix-CSS-library + +
+
Flat-Remix CSS Library is licensed under the MIT License
+
+
+
+

Demo

+
+
+
+
+
+
+
+
+
+
+
Express yourshelf
+ + +
+
+
+ +
+
• Select them all
+ + + + + +
+
+ +
• Just select one
+ + + + + +
+
+ +
+ + + +
+
+ +
+ +
+

Selectable text

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum suscipit faucibus. Nunc eget est eget leo volutpat eleifend. Mauris placerat risus a ligula suscipit, id posuere purus egestas. Maecenas commodo tempus metus, porta lobortis diam tincidunt eget. Cras porttitor mi quis nibh varius iaculis. Aenean elementum malesuada felis id posuere. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam diam justo, placerat id nulla vel, lacinia fermentum libero. Vivamus rutrum mollis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam sed ultricies nunc. Curabitur vestibulum viverra rutrum. Etiam imperdiet arcu id urna sagittis porttitor. Curabitur mollis sapien massa, a lobortis risus semper at. +
+
+ +
+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
+
+
But, when?
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Remember Me? + +
+
+ +


+
+



+ +
+

How to use Flat Remix CSS Library

+
+

Flat Remix Palette

+
+
+
+
+
+
+
-
-

Flat Remix
CSS Library

-
-

- A lightweight CSS library that provides a set of predesigned elements for a fast web development.
It follows a modern "flat" design using high contrasts and sharp borders. -

-
-
- ↧ Download Flat-Remix.css - - github.com/daniruiz/Flat-Remix-CSS-library -
-
-
Flat-Remix CSS Library is licensed under the MIT License
+
+
+
#0000ff
+
#3873d7
+
#269687
+
#ba174e
+
#9f2b32
+
#7c4598
-
-
-

Demo

-
-
-
-
-
-
Express yourshelf
- - -
+
-
- -
-
• Select them all
- - - - - -
-
- -
• Just select one
- - - - - -
-
- -
- - - -
-
- -
+
+
-
-

Selectable text

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum suscipit faucibus. Nunc eget est eget leo volutpat eleifend. Mauris placerat risus a ligula suscipit, id posuere purus egestas. Maecenas commodo tempus metus, porta lobortis diam tincidunt eget. Cras porttitor mi quis nibh varius iaculis. Aenean elementum malesuada felis id posuere. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam diam justo, placerat id nulla vel, lacinia fermentum libero. Vivamus rutrum mollis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam sed ultricies nunc. Curabitur vestibulum viverra rutrum. Etiam imperdiet arcu id urna sagittis porttitor. Curabitur mollis sapien massa, a lobortis risus semper at. -
-
-
-

Heading 1

-

Heading 2

-

Heading 3

-

Heading 4

-
-
-
But, when?
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Remember Me? - -
-
- -





- -
-

How to use Flat Remix CSS Library

-
-

Flat Remix Palette

-
-
-
-
-
-
#0000ff
#3873d7
#269687
#ba174e
#9f2b32
#7c4598
-
-
-
- - -
-

Paper class

- 
<div class="paper">
+	

+		
Paper class

+		
<div class="paper">
 </div>

-				

-			

-			

-			
-			
-			

-				
Shadow

-				
<div class="with-shadow">
+		

+	

+	

+
+
+	

+		
Shadow

+		
<div class="with-shadow">
 </div>

 
-				

-
-				


-			

-			

-			
-			
-			

-				
Headings

-				
-				

-				
-				<h1>Heading 1</h1>
-				
Heading 1

-				<h2>Heading 2</h2>
-				
Heading 2

-				<h3>Heading 3</h3>
-				
Heading 3

-				<h4>Heading 4</h4>
-				
Heading 4

-				<h5>Heading 5</h5>
-				
Heading 5

-				<h6>Heading 6</h6>
-				
Heading 6

-			

-			

-			
-			
-			

-				
Selectable text

-				
<div class="selectable">
+		

+
+		


+	

+	

+
+
+	

+		
Headings

+
+		

+
+		<h1>Heading 1</h1>
+		
Heading 1

+		<h2>Heading 2</h2>
+		
Heading 2

+		<h3>Heading 3</h3>
+		
Heading 3

+		<h4>Heading 4</h4>
+		
Heading 4

+		<h5>Heading 5</h5>
+		
Heading 5

+		<h6>Heading 6</h6>
+		
Heading 6

+	

+	

+
+
+	

+		
Selectable text

+		
<div class="selectable">
 </div>

 
-				

-
-				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum suscipit faucibus. Nunc eget est eget leo volutpat eleifend. Mauris placerat risus a ligula suscipit, id posuere purus egestas. Maecenas commodo tempus metus, porta lobortis diam tincidunt eget. Cras porttitor mi quis nibh varius iaculis. Aenean elementum malesuada felis id posuere. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam diam justo, placerat id nulla vel, lacinia fermentum libero. Vivamus rutrum mollis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam sed ultricies nunc. Curabitur vestibulum viverra rutrum. Etiam imperdiet arcu id urna sagittis porttitor. Curabitur mollis sapien massa, a lobortis risus semper at.
-			

-			

-			
-			
-			

-				
Links

-				
<a href="#">My link</a>

-				This is a link
-			

-			

-			
-			
-			

-				
Horizontal rule

-				
<hr>

-				

-			

-			

-			
-			
-			

-				
Form elements

-		        
<input type="text">

-				
-		        
-		        
<textarea></textarea>

-				
-		        
-		        
+		

+
+		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum suscipit faucibus. Nunc eget est eget leo volutpat eleifend. Mauris placerat risus a ligula suscipit, id posuere purus egestas. Maecenas commodo tempus metus, porta lobortis diam tincidunt eget. Cras porttitor mi quis nibh varius iaculis. Aenean elementum malesuada felis id posuere. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam diam justo, placerat id nulla vel, lacinia fermentum libero. Vivamus rutrum mollis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam sed ultricies nunc. Curabitur vestibulum viverra rutrum. Etiam imperdiet arcu id urna sagittis porttitor. Curabitur mollis sapien massa, a lobortis risus semper at.
+	

+	

+
+
+	

+		
Links

+		
<a href="#">My link</a>

+		This is a link
+	

+	

+
+
+	

+		
Horizontal rule

+		
<hr>

+		

+	

+	

+
+
+	

+		
Form elements

+		
<input type="text">

+		
+
+		
<textarea></textarea>

+		
+
+		
 <label>
-    <input type="checkbox" name="my-checkbox" checked> Select me
+	<input type="checkbox" name="my-checkbox" checked> Select me
 </label>
 <label>
-    <input type="checkbox" name="my-checkbox"> Select me
+	<input type="checkbox" name="my-checkbox"> Select me
 </label>

-				

-					
-					
-				

-		        
-		        
+		

+			
+			
+		

+
+		
 <label>
-    <input type="radio" name="my-input-radio" checked> Select me
+	<input type="radio" name="my-input-radio" checked> Select me
 </label>
 <label>
-    <input type="radio" name="my-input-radio"> Select me
+	<input type="radio" name="my-input-radio"> Select me
 </label>

-				

-					
-					
-				

-		        
-		        
-<label class="checktext">
-    <input type="radio" name="my-checktext" checked>
-    <span>09:00</span>
+		

+			
+			
+		

+
+		
+<label class="checktext">
+	<input type="radio" name="my-checktext" checked>
+	<span>09:00</span>
 </label>
-<label class="checktext">
-    <input type="radio" name="my-checktext" >
-    <span>09:00</span>
+<label class="checktext">
+	<input type="radio" name="my-checktext" >
+	<span>09:00</span>
 </label>

-				

-					
-					
-				

-		        
-		        
+		

+			
+			
+		

+
+		
 <label class="onoffswitch">
-<input type="checkbox" name="my-switch">
-    <span> <span></span> </span>
+<input type="checkbox" name="my-switch">
+	<span data-on="yes" data-off="no"> <span></span> </span>
 </label>

-            
-		        
-		        
-		        <button class="blue-button">save</button>
-		        
-		        <button class="green-button">enter</button>
-		        
-		        <button class="red-button">exit</button>
-		        
-		        <button class="rounded-button">+</button>
-		        
-			

-
+ + + + <button class="blue-button">save</button> + + <button class="green-button">enter</button> + + <button class="red-button">exit</button> + + <button class="rounded-button">+</button> + + +
diff --git a/ethenis/content/man.php b/ethenis/content/man.php index bd57f90..1043c1a 100644 --- a/ethenis/content/man.php +++ b/ethenis/content/man.php @@ -40,6 +40,7 @@ \--> .htaccess

Ethenis uses a .htaccess file with rewrite rules, so ensure your apache is configured to read .htaccess files and mod_rewrite is enabled.

+ To ensure Everything works open the web in your browser. If you downloaded the full package everything should work as ethenis.drasite.com.

Configure Web Layout

@@ -104,11 +105,11 @@ <{ link-template }> [html]<{ link-text }>[html] <{ /link-template }> -
→ It indicates where to place the link elemeents and the template to follow.
+
→ Indicates where to place the link elemeents and the template to follow.
  • <{ content }> -
    → It indicates where to place the corresponding content.
    +
    → Indicates where to place the corresponding content.
    • diff --git a/ethenis/css/flat-remix.css b/ethenis/css/flat-remix.css index 86a3d8b..f092d9d 100644 --- a/ethenis/css/flat-remix.css +++ b/ethenis/css/flat-remix.css @@ -1,349 +1 @@ -@import url('https://fonts.googleapis.com/css?family=Roboto:100,400'); - - -input::placeholder, textarea::placeholder { - opacity: 1; - transition: opacity .2s; - color: inherit; -} - -input:focus::placeholder, textarea:focus::placeholder { - opacity: .2; -} - -input:-ms-input-placeholder, textarea:-ms-input-placeholder { - opacity: 1; - transition: opacity .2s; - color: inherit; -} - -input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder { - opacity: .2; -} - -* { - box-sizing: border-box; - -webkit-appearance: none; - -webkit-tap-highlight-color: transparent!important; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0)!important; - outline: none; - user-select: none; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - cursor: default; - letter-spacing: 0; -} - -body { - background-color: #fafafa; - font-family: "Roboto", sans-serif; - color: #5c616c; - margin: 0; - font-size: 13px; -} - -a:link, a:visited, a:active { - color: #1875D1; - font-weight: bold; - text-decoration: none; - cursor: pointer; -} - -a * { cursor: pointer!important; } - -a:hover { text-decoration: underline} - -label { - cursor: pointer; - display: inline-block; - padding: 9px 0; -} - -h1 { - font-size: 50px; - font-weight: lighter; - line-height: 70px; -} -h2 { - font-size: 40px; - font-weight: lighter; - line-height: 50px; -} -h3 { - font-size: 32px; - font-weight: lighter; - line-height: 40px; -} -h4 { - font-size: 26px; - font-weight: lighter; - line-height: 38px; -} -h5 { - margin-top: 20px; - margin-bottom: 10px; - font-size: 20px; - font-weight: bold; - line-height: 30px; -} -h6 { - padding-left: 30px; - margin: 10px 0; - font-size: 16px; - font-weight: bold; - line-height: 24px; -} - -section, article, .section, .article, .paper { - line-height: 2em; - word-wrap: break-word; - word-break: normal; - line-height: 2em; -} - -hr { - width: 50%; - border: 3px solid #5c616c; - background-color: #5c616c; - border-radius: 4px; -} - -input:not([type=submit]):not([type=radio]):not([type=checkbox]), textarea { - border: 2px solid black; - background: white; - color: black; - border-radius: 2px; - margin: 7px 0; - height: 45px; - padding: 0 10px; - font-size: 14px; - font-weight: bold; - cursor: text; - user-select: text; - -webkit-touch-callout: text; - -webkit-user-select: text; - -khtml-user-select: text; - -moz-user-select: text; - -ms-user-select: text; -} -input[type=checkbox], input[type=radio] { - font-size: 1em; - border: .15em solid black; - background: white; - margin: 7px 0; - cursor: pointer; - height: 1.2em; - width: 1.2em; - box-shadow: inset 0 0 0 2px white; - vertical-align: text-top; - margin: 0 5px; - padding: 0; -} - -input[type=checkbox]:checked, input[type=radio]:checked { background: #1875D1 } -input[type=checkbox] { border-radius: .15em; } -input[type=radio] { border-radius: 100%; } -textarea { - padding: 10px; - height: 200px -} - -label.checktext { - width: auto; - padding: 0; -} -label.checktext input { display: none; } -label.checktext span { - display: inline-block; - cursor: pointer; - color: #5c616c; - border-bottom: 2px solid #5c616c; - margin: 10px; - line-height: 1em; -} -label.checktext input:checked + span { - color: black; - font-weight: bold; - font-size: 2.5em; - border-bottom: 5px solid #1875D1; -} - - -.onoffswitch { - font-weight: bold; - overflow: hidden; - height: 45px; - padding: 0; - margin-top: 7px; - display: inline-block; -} - -.onoffswitch * { - cursor: pointer -} - -.onoffswitch > span { - height: 45px; - text-align: left; - position: relative; - padding: 0; - width: 96px; - display: inline-block; - overflow: hidden; - background: #551419; - border: 3px solid #551419; - border-radius: 23px; - transition: border-color 0.2s; -} - -.onoffswitch > span::after { - content: ' '; - position: absolute; - bottom: 0; - left: 0; - transform: translateX(0); - transition: transform 0.2s; - height: 34px; - width: 34px; - border-radius: 17px; - margin: 3px; - background: white; -} - -.onoffswitch input { - display: none; -} - -.onoffswitch span span { - width: 200%; - transform: translateX(-50%); - transition: transform 0.2s; - display: block; -} - -.onoffswitch span span:before, span span:after { - color: white; - float: left; - width: 50%; - height: 40px; - font-size: 16px; - line-height: 40px; - box-sizing: border-box; -} - -.onoffswitch span span:before { - content: "sí"; - padding-left: 20px; - background: #1875D1; -} - -.onoffswitch span span:after { - content: "no"; - padding-right: 20px; - background: #A32C36; - text-align: right; -} - -.onoffswitch input:checked + span span { - transform: translateX(0); -} - -.onoffswitch input:checked + span::after { - transform: translateX(50px); -} - -.onoffswitch input:checked + span { - border-color: #2F3E9E; - background: #2F3E9E; -} - -.blue-button, .red-button, .green-button { - border-radius: 5px; - font-weight: bold; - color: white; - margin-top: 5px; - text-align: center; - cursor: pointer; - font-size: 16px; - height: 45px; - width: 130px; - border: 3px solid; - line-height: 40px; - display: block; - box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); - transition: border .2s, background .2s, letter-spacing .2s, color .2s; -} -.blue-button:hover, .red-button:hover, .green-button:hover { - letter-spacing: .055em; -} -.blue-button:active, .red-button:active, .green-button:active, .blue-button.active, .red-button.active, .green-button.active { - box-shadow: none; - border-color: black; - color: black; - background: white; -} -.blue-button { - background: #1875D1; - border-color: #2F3E9E; -} -.red-button { - background: #A32C36; - border-color: #551419; -} -.green-button { - background: #009587; - border-color: #00756a; -} - -.rounded-button { - border: none; - cursor: pointer; - height: 56px; - width: 56px; - box-shadow: 0 1px 2px rgba(0,0,0,.5); - border-radius: 100%; - z-index: 10; - font-size: 30px; - line-height: 53px; - text-align: center; - color: white; - background: #ba174e; - display: block; -} - -.paper { - font-size: 16px; - box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); - padding: 10px 20px; - background-color: white; - margin-top: 20px; - min-height: 100px; - color: black; -} - -.with-shadow { - box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); -} - -.selectable,.selectable * { - cursor: auto; - user-select: text; - -webkit-touch-callout: text; - -webkit-user-select: text; - -khtml-user-select: text; - -moz-user-select: text; - -ms-user-select: text; -} - -::-moz-selection { - color: #fff; - background: #000; -} - -::selection { - color: #fff; - background: #000; -} +@import url(https://fonts.googleapis.com/css?family=Roboto:100,400);input::placeholder,textarea::placeholder{opacity:1;transition:opacity .2s;color:inherit}input:focus::placeholder,textarea:focus::placeholder{opacity:.2}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;transition:opacity .2s;color:inherit}input:focus:-ms-input-placeholder,textarea:focus:-ms-input-placeholder{opacity:.2}*{box-sizing:border-box;-webkit-appearance:none;-webkit-tap-highlight-color:transparent!important;-webkit-tap-highlight-color:rgba(0,0,0,0)!important;outline:none;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;cursor:default;letter-spacing:0;font-family:"Roboto",sans-serif}body{background-color:#fafafa;color:#5c616c;margin:0;font-size:13px}a:link,a:visited,a:active,a{color:#1875D1;font-weight:700;text-decoration:none;cursor:pointer}a *{cursor:pointer!important}a:link:hover,a:visited:hover,a:active:hover,a:hover{text-decoration:underline}label{cursor:pointer;display:inline-block;padding:9px 0}h1{font-size:50px;font-weight:lighter;line-height:70px}h2{font-size:40px;font-weight:lighter;line-height:50px}h3{font-size:32px;font-weight:lighter;line-height:40px}h4{font-size:26px;font-weight:lighter;line-height:38px}h5{margin-top:20px;margin-bottom:10px;font-size:20px;font-weight:700;line-height:30px}h6{padding-left:30px;margin:10px 0;font-size:16px;font-weight:700;line-height:24px}section,article,.section,.article,.paper{line-height:2em;word-wrap:break-word;word-break:normal;line-height:2em}hr{width:50%;border:3px solid #5c616c;background-color:#5c616c;border-radius:4px}input:not([type=submit]):not([type=radio]):not([type=checkbox]),textarea{border:2px solid black;background:white;color:black;border-radius:2px;margin:7px 0;height:45px;padding:0 10px;font-size:14px;font-weight:700;cursor:text;user-select:text;-webkit-touch-callout:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text}input[type=checkbox],input[type=radio]{font-size:1em;border:.15em solid black;background:white;margin:7px 0;cursor:pointer;height:1.2em;width:1.2em;box-shadow:inset 0 0 0 2px white;vertical-align:text-top;margin:0 5px;padding:0;transition:background-color .2s}input[type=checkbox]:checked,input[type=radio]:checked{background:#1875D1}input[type=checkbox]{border-radius:.15em}input[type=radio]{border-radius:100%}textarea{padding:10px;height:200px}label.checktext{width:auto;padding:0}label.checktext input{display:none}label.checktext span{display:inline-block;cursor:pointer;color:#5c616c;border-bottom:2px solid #5c616c;margin:10px;line-height:1em;transition:transform .2s}label.checktext input:not(:checked)+span:hover{transform:scale(1.3)}label.checktext input:checked + span{color:black;font-weight:700;font-size:2.5em;border-bottom:5px solid #1875D1}.onoffswitch{font-weight:700;overflow:hidden;height:45px;padding:0;margin-top:7px;display:inline-block;filter:drop-shadow(0 2px 1px rgba(0,0,0,.25));transition:transform .2s}.onoffswitch:hover{transform:scale(1.03)}.onoffswitch *{cursor:pointer}.onoffswitch>span{height:45px;text-align:left;position:relative;padding:0;width:96px;display:inline-block;overflow:hidden;background:#551419;border:3px solid #551419;border-radius:23px;transition:border-color 0.2s}.onoffswitch>span::after{content:' ';position:absolute;bottom:0;left:0;transform:translateX(0);transition:transform 0.2s;height:34px;width:34px;border-radius:17px;margin:3px;background:white}.onoffswitch input{display:none}.onoffswitch span span{width:200%;transform:translateX(-50%);transition:transform 0.2s;display:block}.onoffswitch span span:before,span span:after{color:white;float:left;width:50%;height:40px;font-size:16px;line-height:40px;box-sizing:border-box}.onoffswitch span span:before{content:attr(data-on);padding-left:20px;background:#1875D1}.onoffswitch span span:after{content:attr(data-off);padding-right:20px;background:#A32C36;text-align:right}.onoffswitch input:checked + span span{transform:translateX(0)}.onoffswitch input:checked + span::after{transform:translateX(50px)}.onoffswitch input:checked + span{border-color:#2F3E9E;background:#2F3E9E}.blue-button,.red-button,.green-button{border-radius:4px;font-weight:700;color:white;margin-top:7px;text-align:center;cursor:pointer;font-size:16px;height:45px;width:120px;border:3px solid;line-height:40px;display:block;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);transition:border .2s,background .2s,transform .2s,color .2s}.blue-button:hover,.red-button:hover,.green-button:hover{transform:scale(1.03)}.blue-button:active,.red-button:active,.green-button:active,.blue-button.active,.red-button.active,.green-button.active{box-shadow:none;border-color:black;color:black;background:white}.blue-button{background:#1875D1;border-color:#2F3E9E}.red-button{background:#A32C36;border-color:#551419}.green-button{background:#009587;border-color:#00756a}.rounded-button{border:none;cursor:pointer;height:56px;width:56px;box-shadow:0 1px 2px rgba(0,0,0,.5);border-radius:100%;z-index:10;font-size:30px;line-height:56px;text-align:center;color:white;background:#ba174e;display:block}.paper{font-size:16px;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);padding:10px 20px;background-color:white;margin-top:20px;min-height:100px;color:black}.with-shadow{box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12)}.selectable,.selectable *{cursor:auto;user-select:text;-webkit-touch-callout:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text}::-moz-selection{color:#fff;background:#000}::selection{color:#fff;background:#000}