changed style.css

assets/styles/style.css

@@ -1,84 +1,115 @@
 :root {
-  --main: rgba(0, 0, 0, .9);
-  --border: rgba(0, 0, 0, .8);
-  --buttonColor: rgba(0, 0, 0, .5);
+	--font-size-main: 0.906rem; /* 14.5px */
+	--font-size-second: 0.688rem; /* 11px */
+
+	--color-main: rgba(0, 0, 0, 0.8);
+	--border-main: rgba(0, 0, 0, 0.6);
+	--border-shorthand: 0.063rem solid rgba(0, 0, 0, 0.6);
+
+	/* Button */
+	--button-hover-backround: rgba(0, 0, 0, 0.8);
+	--button-hover-color: rgba(255, 255, 255, 0.9);
+	--font-size-button: 0.769rem; /* 12.3px */
+
+	--unit-one: 0.438rem; /* 7px */
+	--unit-two: 0.75rem; /* 12px */
 }
 
 * {
-	color: var(--main);
+	color: var(--color-main);
 	box-sizing: border-box;
 }
 
 body {
-	height: 98vh;
-	margin: 1vh;
+	height: 100vh;
+	margin-top: 0;
+	margin-bottom: 0;
+	font-size: var(--font-size-main);
 }
 
 main {
-	width: 100%;
-	height: 100%;
+	height: calc(100% - 9vh);
+	padding: var(--unit-two);
 }
 
 #simple-note {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	max-width: 600px;
 	height: 100%;
-	margin: 0 auto;
-	padding: 0 25px 25px 25px;
+	max-width: 33.75rem;
+	margin: 4.5vh auto;
 }
 
-.note-title {
+.__title {
 	width: 100%;
-	height: 30px;
 }
 
-.note-title input {
-	border: 1px solid var(--border);
+.__title input {
+	border: var(--border-shorthand);
 	border-bottom: 0;
-	border-radius: 3px 3px 0 0;
+	border-radius: 0.188rem 0.188rem 0 0;
 	width: 100%;
-	height: 100%;
-	padding: 5px;
+	padding: var(--unit-one) var(--unit-two);
+	font-size: var(--font-size-button);
 	font-style: italic;
 	font-weight: bold;
 	outline: none;
 }
 
-.note-text {
+.__body {
 	width: 100%;
 	height: 100%;
 }
 
-.note-text textarea {
-	border: 1px solid var(--border);
+.__body textarea {
+	border: var(--border-shorthand);
+	border-bottom: none;
 	border-radius: 0;
-	width: 100%;
 	height: 100%;
-	padding: 5px;
+	width: 100%;
+	padding: var(--unit-one) var(--unit-two);
+	font-size: var(--font-size-button);
 	resize: none;
 	overflow-y: scroll;
 	outline: none;
 }
 
-.note-function {
-	border: 1px solid var(--border);
-	border-top: 0;
+.__function {
+	display: flex;
+	border: var(--border-shorthand);
 	width: 100%;
-	padding: 5px;
-	font-size: 11.8px;
 }
 
-.note-function button {
-	background: none;
-	border: 1px solid var(--buttonColor);
-	margin-right: 4px;
-	font-size: 11.8px;
+.__function button {
+	border: none;
+	min-width: 20%;
+	padding: var(--unit-one) var(--unit-two);
+	font-size: var(--font-size-button);
 	cursor: pointer;
 }
 
-.note-function .yes-delete,
+.__function button:not(:last-child) {
+	border-right: var(--border-shorthand);
+}
+
+.__function button:hover,
+.__function button:focus {
+	color: var(--button-hover-color);
+	background: var(--button-hover-backround);
+}
+
+._delete-all {
+	color: #fff;
+	background: #fd6060;
+}
+
+._save-to-local {
+	border-left: var(--border-shorthand) !important;
+	margin-left: auto;
+}
+
+/*.note-function .yes-delete,
 .note-function .no-delete {
 	margin-right: 3px;
 	margin-left: 3px;
@@ -91,7 +122,7 @@ main {
 }
 
 /* Extra */
-
+/*
 .hidden {
 	display: none;
 }
@@ -100,4 +131,4 @@ main {
 	body {
 		height: 350px;
 	}
-}
+}*/