working on material theme

BhJaipal · Oct 28, 2024 · d9e457a · d9e457a
1 parent e3c6e30
commit d9e457a
Show file tree

Hide file tree

Showing 7 changed files with 301 additions and 212 deletions.
diff --git a/index.html b/index.html
@@ -1,8 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<link rel="stylesheet" href="styles/colors.css" />
-		<link rel="stylesheet" href="styles/material.css" />
+		<link rel="stylesheet" href="scripts/src/styles/light.css" />
+		<!-- <link rel="stylesheet" href="scripts/src/styles/dark.css" /> -->
+		<link rel="stylesheet" href="scripts/src/styles/color.css" />
+		<link rel="stylesheet" href="scripts/src/styles/material.css" />
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>material testing</title>
@@ -21,39 +23,17 @@
 		</style>
 	</head>
 	<body>
-		<div class="test">
-			<div class="material-card">
-				<div class="material-card-title">Aloo</div>
-				<div class="material-card-subtitle">Language: C</div>
-				<div class="material-card-content">
-					libaloo is a GTK 4 based C project to make your life easier
-				</div>
-				<div class="actions">
-					<button class="material-button filled-btn">Submit</button>
-				</div>
+		<button class="material-card">
+			<div class="material-card-title">Aloo</div>
+			<div class="material-card-subtitle">Language: C</div>
+			<div class="material-card-content">
+				libaloo is a GTK 4 based C project to make your life easier
 			</div>
-			<div>
-				<button class="material-button tonal-btn">Submit</button>
+			<div class="actions">
+				<button class="material-btn material-outlined-btn">
+					Submit
+				</button>
 			</div>
-		</div>
-		<script>
-			document.addEventListener("DOMContentLoaded", () => {
-				document
-					.querySelectorAll(".material-card")
-					.forEach(
-						(
-							/** @type {HTMLDivElement} */ el,
-							/** @type {number} */ i
-						) => {
-							console.log(el);
-							el.addEventListener("keydown", () => {
-								el.classList.add("clicked");
-								console.log("Ok");
-							});
-							el.onkeyup = () => el.classList.remove("clicked");
-						}
-					);
-			});
-		</script>
+		</button>
 	</body>
 </html>
diff --git a/scripts/src/styles/color.css b/scripts/src/styles/color.css
@@ -0,0 +1,60 @@
+:root {
+	--skyblue-200: #a5d1fa;
+	--skyblue-300: #84c2fc;
+	--skyblue-400: #4ba6fc;
+	--skyblue-500: #0484fc;
+	--skyblue-600: #057ae7;
+	--skyblue-700: #0261bb;
+	--skyblue-800: #1b578f;
+	--skyblue-900: #1a4874;
+	--skyblue-950: #082846;
+	--blue-200: #a5a5fa;
+	--blue-300: #7d7df8;
+	--blue-400: #4646fc;
+	--blue-500: #0307f5;
+	--blue-600: #0206da;
+	--blue-700: #0306b6;
+	--blue-800: #010391;
+	--blue-900: #020475;
+	--blue-950: #01024d;
+	--red-200: #fd8080;
+	--red-300: #fc6868;
+	--red-400: #fd5a5a;
+	--red-500: #fd0505;
+	--red-600: #d60404;
+	--red-700: #b40101;
+	--red-800: #8d0101;
+	--red-900: #720202;
+	--red-950: #500101;
+	--green-200: #a5faa5;
+	--green-300: #74f574;
+	--green-400: #35fa35;
+	--green-500: #64f503;
+	--green-600: #5bdf02;
+	--green-700: #45ac01;
+	--green-800: #348001;
+	--green-900: #026d00;
+	--green-950: #024b01;
+	--grey-50: #f8f8f8;
+	--grey-100: #ececec;
+	--grey-200: #b9b9b9;
+	--grey-300: #a1a1a1;
+	--grey-400: #858484;
+	--grey-500: #666666;
+	--grey-600: #535353;
+	--grey-700: #4d4c4c;
+	--grey-800: #3d3c3c;
+	--grey-900: #252525;
+	--grey-950: #1f1e1e;
+	--gray-50: #f8f8f8;
+	--gray-100: #ececec;
+	--gray-200: #cecdcd;
+	--gray-300: #a1a1a1;
+	--gray-400: #858484;
+	--gray-500: #666666;
+	--gray-600: #535353;
+	--gray-700: #4d4c4c;
+	--gray-800: #3d3c3c;
+	--gray-900: #252525;
+	--gray-950: #1f1e1e;
+}
diff --git a/scripts/src/styles/colors.css b/scripts/src/styles/colors.css
diff --git a/scripts/src/styles/dark.css b/scripts/src/styles/dark.css
@@ -0,0 +1,81 @@
+* {
+	font-family: monospace;
+}
+.material-btn {
+	background-color: rgba(50, 50, 50, 0.3);
+	color: var(--skyblue-400);
+	padding: 10px;
+	border-radius: 5px;
+	border: transparent;
+	cursor: pointer;
+}
+.material-btn:hover {
+	background-color: rgba(50, 50, 50, 0.5);
+}
+.material-elevated-btn {
+	box-shadow: 0px 1px 5px 0.1px var(--gray-500);
+}
+.material-filled-btn {
+	background-color: var(--skyblue-600);
+	color: whitesmoke;
+	box-shadow: 0px 1px 5px -4px var(--gray-500);
+}
+.material-filled-btn:hover {
+	background-color: var(--skyblue-700);
+}
+.material-outlined-btn {
+	border: 1px solid var(--skyblue-400);
+}
+/* Material Card */
+.material-card {
+	border-radius: 10px;
+	background-color: rgba(50, 50, 50, 0.3);
+	border: 2px solid transparent;
+	width: max-content;
+	padding: 20px;
+	color: white;
+	animation: material-shadow-out 1s normal;
+	animation-iteration-count: 1;
+}
+.material-card:hover {
+	background-color: rgba(8, 40, 70, 0.3);
+	box-shadow: 0px 0px 5px 1px var(--skyblue-500);
+}
+.material-card:active {
+	background-color: rgba(10, 49, 85, 0.3);
+	box-shadow: 0px 0px 5px 1px var(--skyblue-500);
+}
+@keyframes material-shadow-out {
+	0% {
+		box-shadow: 0px 0px 0px 0px var(--skyblue-500);
+	}
+	50% {
+		box-shadow: 0px 0px 2.5px 0.5px var(--skyblue-500);
+	}
+	100% {
+		box-shadow: 0px 0px 5px 1px var(--skyblue-500);
+	}
+}
+.material-card .material-card-title {
+	font-size: xx-large;
+	font-weight: bold;
+	padding-bottom: 10px;
+}
+.material-card .material-card-subtitle {
+	font-size: larger;
+	font-weight: normal;
+	padding-bottom: 10px;
+}
+.material-card .material-card-content {
+	font-size: medium;
+	font-weight: normal;
+	padding-bottom: 10px;
+}
+.material-card .actions {
+	display: flex;
+	flex-direction: row-reverse;
+}
+
+body {
+	background-color: black;
+}
diff --git a/scripts/src/styles/light.css b/scripts/src/styles/light.css
@@ -0,0 +1,78 @@
+.material-btn {
+	background-color: white;
+	color: var(--skyblue-400);
+	padding: 10px;
+	border-radius: 5px;
+	border: transparent;
+	cursor: pointer;
+}
+.material-btn:hover {
+	background-color: var(--gray-100);
+}
+.material-elevated-btn {
+	box-shadow: 0px 1px 5px 0.1px rgba(0, 0, 0.5);
+}
+.material-filled-btn {
+	background-color: var(--skyblue-600);
+	color: whitesmoke;
+	box-shadow: 0px 1px 5px -4px rgba(0, 0, 0.5);
+}
+.material-filled-btn:hover {
+	background-color: var(--skyblue-700);
+}
+.material-outlined-btn {
+	border: 1px solid var(--skyblue-400);
+	background-color: white;
+}
+.material-outlined-btn:hover {
+	background-color: var(--gray-50);
+}
+/* Material Card */
+.material-card {
+	border-radius: 10px;
+	background-color: rgba(230, 230, 230, 0.3);
+	border: 2px solid transparent;
+	width: max-content;
+	padding: 20px;
+	color: black;
+	animation: material-shadow-out 1s normal;
+	animation-iteration-count: 1;
+}
+.material-card:hover {
+	background-color: rgba(137, 196, 252, 0.3);
+	box-shadow: 0px 0px 5px 1px var(--skyblue-300);
+}
+.material-card:active {
+	background-color: rgba(74, 167, 253, 0.3);
+	box-shadow: 0px 0px 5px 1px var(--skyblue-300);
+}
+@keyframes material-shadow-out {
+	0% {
+		box-shadow: 0px 0px 0px 0px var(--skyblue-300);
+	}
+	50% {
+		box-shadow: 0px 0px 2.5px 0.5px var(--skyblue-300);
+	}
+	100% {
+		box-shadow: 0px 0px 5px 1px var(--skyblue-300);
+	}
+}
+.material-card .material-card-title {
+	font-size: xx-large;
+	font-weight: bold;
+	padding-bottom: 10px;
+}
+.material-card .material-card-subtitle {
+	font-size: larger;
+	font-weight: normal;
+	padding-bottom: 10px;
+}
+.material-card .material-card-content {
+	font-size: medium;
+	font-weight: normal;
+	padding-bottom: 10px;
+}
+.material-card .actions {
+	display: flex;
+	flex-direction: row-reverse;
+}