From 9c91f90ad9c1078c7dad58d8b0a5796aa8f35837 Mon Sep 17 00:00:00 2001
From: coffeebeanspoem <36118037+coffeebeanspoem@users.noreply.github.com>
Date: Fri, 29 Oct 2021 22:44:18 +0300
Subject: [PATCH] Updated styless.css

Added proper layout, two themes: day / night
Fixed all colors to proper colors, classes self described
---
 Projects/Calculator/styles.css | 134 +++++++++++++++++++++++----------
 1 file changed, 95 insertions(+), 39 deletions(-)

diff --git a/Projects/Calculator/styles.css b/Projects/Calculator/styles.css
index 84c21d5..8baa6a9 100644
--- a/Projects/Calculator/styles.css
+++ b/Projects/Calculator/styles.css
@@ -1,52 +1,108 @@
-ul{
-	list-style: none;
-	background-color: black;
-	display: inline-block;
-	padding:  0;
-	margin: 10px;
+* {
+  margin: 0;
+  padding: 0;
 }
 
+body {
+  background: #A0CCBE;
+}
+
+body > center {
+  background: #333;
+  margin: auto;
+}
+
+div.centered {
+  margin: auto;
+  width: 280px;
+  height: 500px;
+  border-radius: 15px;
+  border: 1px solid black;
+  position: relative;
+  top: 150px;
+  background: #888;
+}
+
+.white-theme .back-ground {
+  background: #FFF;
+}
+.white-theme .sw-button {
+  background: #F5F8FC;
+}
+.white-theme .sw-button-notch {
+  background: #FFF;
+  border: 1px solid #E0E3E5;
+  border-radius: 100%;
+}
+.white-theme .red-dot {
+  background: #FD544D;
+}
+.white-theme .yellow-dot {
+  background: #FFC02F;
+}
+.white-theme .green-dot {
+  background: #28CA40;
+}
+.white-theme .display-and-buttons {
+  background: #F4FDFB;
+}
+.white-theme .equal-button {
+  background: #18D4A3;
+}
 
-.calculator{
-	border-radius: 10%;
-	background-color: black;
-	padding: 0;
-	padding-top: 2%;
-	display: inline-block;
+.dark-theme .back-ground {
+  background: #2E3951;
+}
+.dark-theme .sw-button {
+  background: #15D09F;
+}
+.dark-theme .sw-button-notch {
+  background: #212B41;
+  border: 1px solid #1C6460;
+  border-radius: 100%;
+}
+.dark-theme .red-dot {
+  background: #FD544D;
+}
+.dark-theme .yellow-dot {
+  background: #FFC02F;
+}
+.dark-theme .green-dot {
+  background: #28CA40;
+}
+.dark-theme .display-and-buttons {
+  background: #2E3951;
+}
+.dark-theme .equal-button {
+  background: #18D4A3;
 }
 
-.calculator-number{
-	color: magenta;
+textarea {
+  font-size: 55px;
+  width: 270px;
+  height: 100px;
+  margin-bottom: 10px;
 }
 
-button:hover{
-	background-color: rgba(255,255,255,0.1);
+button {
+  border-radius: 100%;
+  width: 47px;
+  height: 47px;
+  margin: 11px 9px;
+  padding: 0px;
+  font-size: 30px;
 }
 
-button{
-	font-size: 30px;
-	border: black;
-	border-radius: 50% ;
-	margin: 5px;
-	display: inline-block;
-	width: 70px;
-	height: 70px;
-	background-color: black;
-	color: orange;
+.calculator-number {
+  cursor: pointer;
 }
 
-.screen{
-	display: block;
-	height: 80px;
-	width: 100%;
-	font-size: 30px;
-	background-color: white;
-	border: 2px solid black;
-	text-align: right;
-	padding: 2%;
+button.hidden-button {
+  filter: opacity(0);
 }
 
-input[type="text"]{
-	border: none;
-	outline: none;
-}
\ No newline at end of file
+button.daynight {
+  width: 18px;
+  height: 18px;
+  float: right;
+}