Skip to content

Commit d9e457a

Browse files
BhJaipalBhJaipal
committed
working on material theme
1 parent e3c6e30 commit d9e457a

File tree

7 files changed

+301
-212
lines changed

7 files changed

+301
-212
lines changed

‎index.html

+14-34
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<link rel="stylesheet" href="styles/colors.css" />
5-
<link rel="stylesheet" href="styles/material.css" />
4+
<link rel="stylesheet" href="scripts/src/styles/light.css" />
5+
<!-- <link rel="stylesheet" href="scripts/src/styles/dark.css" /> -->
6+
<link rel="stylesheet" href="scripts/src/styles/color.css" />
7+
<link rel="stylesheet" href="scripts/src/styles/material.css" />
68
<meta charset="UTF-8" />
79
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
810
<title>material testing</title>
@@ -21,39 +23,17 @@
2123
</style>
2224
</head>
2325
<body>
24-
<div class="test">
25-
<div class="material-card">
26-
<div class="material-card-title">Aloo</div>
27-
<div class="material-card-subtitle">Language: C</div>
28-
<div class="material-card-content">
29-
libaloo is a GTK 4 based C project to make your life easier
30-
</div>
31-
<div class="actions">
32-
<button class="material-button filled-btn">Submit</button>
33-
</div>
26+
<button class="material-card">
27+
<div class="material-card-title">Aloo</div>
28+
<div class="material-card-subtitle">Language: C</div>
29+
<div class="material-card-content">
30+
libaloo is a GTK 4 based C project to make your life easier
3431
</div>
35-
<div>
36-
<button class="material-button tonal-btn">Submit</button>
32+
<div class="actions">
33+
<button class="material-btn material-outlined-btn">
34+
Submit
35+
</button>
3736
</div>
38-
</div>
39-
<script>
40-
document.addEventListener("DOMContentLoaded", () => {
41-
document
42-
.querySelectorAll(".material-card")
43-
.forEach(
44-
(
45-
/** @type {HTMLDivElement} */ el,
46-
/** @type {number} */ i
47-
) => {
48-
console.log(el);
49-
el.addEventListener("keydown", () => {
50-
el.classList.add("clicked");
51-
console.log("Ok");
52-
});
53-
el.onkeyup = () => el.classList.remove("clicked");
54-
}
55-
);
56-
});
57-
</script>
37+
</button>
5838
</body>
5939
</html>

‎scripts/src/styles/color.css

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
:root {
2+
--skyblue-200: #a5d1fa;
3+
--skyblue-300: #84c2fc;
4+
--skyblue-400: #4ba6fc;
5+
--skyblue-500: #0484fc;
6+
--skyblue-600: #057ae7;
7+
--skyblue-700: #0261bb;
8+
--skyblue-800: #1b578f;
9+
--skyblue-900: #1a4874;
10+
--skyblue-950: #082846;
11+
--blue-200: #a5a5fa;
12+
--blue-300: #7d7df8;
13+
--blue-400: #4646fc;
14+
--blue-500: #0307f5;
15+
--blue-600: #0206da;
16+
--blue-700: #0306b6;
17+
--blue-800: #010391;
18+
--blue-900: #020475;
19+
--blue-950: #01024d;
20+
--red-200: #fd8080;
21+
--red-300: #fc6868;
22+
--red-400: #fd5a5a;
23+
--red-500: #fd0505;
24+
--red-600: #d60404;
25+
--red-700: #b40101;
26+
--red-800: #8d0101;
27+
--red-900: #720202;
28+
--red-950: #500101;
29+
--green-200: #a5faa5;
30+
--green-300: #74f574;
31+
--green-400: #35fa35;
32+
--green-500: #64f503;
33+
--green-600: #5bdf02;
34+
--green-700: #45ac01;
35+
--green-800: #348001;
36+
--green-900: #026d00;
37+
--green-950: #024b01;
38+
--grey-50: #f8f8f8;
39+
--grey-100: #ececec;
40+
--grey-200: #b9b9b9;
41+
--grey-300: #a1a1a1;
42+
--grey-400: #858484;
43+
--grey-500: #666666;
44+
--grey-600: #535353;
45+
--grey-700: #4d4c4c;
46+
--grey-800: #3d3c3c;
47+
--grey-900: #252525;
48+
--grey-950: #1f1e1e;
49+
--gray-50: #f8f8f8;
50+
--gray-100: #ececec;
51+
--gray-200: #cecdcd;
52+
--gray-300: #a1a1a1;
53+
--gray-400: #858484;
54+
--gray-500: #666666;
55+
--gray-600: #535353;
56+
--gray-700: #4d4c4c;
57+
--gray-800: #3d3c3c;
58+
--gray-900: #252525;
59+
--gray-950: #1f1e1e;
60+
}

‎scripts/src/styles/colors.css

-114
This file was deleted.

‎scripts/src/styles/dark.css

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
* {
2+
font-family: monospace;
3+
}
4+
.material-btn {
5+
background-color: rgba(50, 50, 50, 0.3);
6+
color: var(--skyblue-400);
7+
padding: 10px;
8+
border-radius: 5px;
9+
border: transparent;
10+
cursor: pointer;
11+
}
12+
.material-btn:hover {
13+
background-color: rgba(50, 50, 50, 0.5);
14+
}
15+
.material-elevated-btn {
16+
box-shadow: 0px 1px 5px 0.1px var(--gray-500);
17+
}
18+
.material-filled-btn {
19+
background-color: var(--skyblue-600);
20+
color: whitesmoke;
21+
box-shadow: 0px 1px 5px -4px var(--gray-500);
22+
}
23+
.material-filled-btn:hover {
24+
background-color: var(--skyblue-700);
25+
}
26+
.material-outlined-btn {
27+
border: 1px solid var(--skyblue-400);
28+
}
29+
/* Material Card */
30+
.material-card {
31+
border-radius: 10px;
32+
background-color: rgba(50, 50, 50, 0.3);
33+
border: 2px solid transparent;
34+
width: max-content;
35+
padding: 20px;
36+
color: white;
37+
animation: material-shadow-out 1s normal;
38+
animation-iteration-count: 1;
39+
}
40+
.material-card:hover {
41+
background-color: rgba(8, 40, 70, 0.3);
42+
box-shadow: 0px 0px 5px 1px var(--skyblue-500);
43+
}
44+
.material-card:active {
45+
background-color: rgba(10, 49, 85, 0.3);
46+
box-shadow: 0px 0px 5px 1px var(--skyblue-500);
47+
}
48+
@keyframes material-shadow-out {
49+
0% {
50+
box-shadow: 0px 0px 0px 0px var(--skyblue-500);
51+
}
52+
50% {
53+
box-shadow: 0px 0px 2.5px 0.5px var(--skyblue-500);
54+
}
55+
100% {
56+
box-shadow: 0px 0px 5px 1px var(--skyblue-500);
57+
}
58+
}
59+
.material-card .material-card-title {
60+
font-size: xx-large;
61+
font-weight: bold;
62+
padding-bottom: 10px;
63+
}
64+
.material-card .material-card-subtitle {
65+
font-size: larger;
66+
font-weight: normal;
67+
padding-bottom: 10px;
68+
}
69+
.material-card .material-card-content {
70+
font-size: medium;
71+
font-weight: normal;
72+
padding-bottom: 10px;
73+
}
74+
.material-card .actions {
75+
display: flex;
76+
flex-direction: row-reverse;
77+
}
78+
79+
body {
80+
background-color: black;
81+
}

‎scripts/src/styles/light.css

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
.material-btn {
2+
background-color: white;
3+
color: var(--skyblue-400);
4+
padding: 10px;
5+
border-radius: 5px;
6+
border: transparent;
7+
cursor: pointer;
8+
}
9+
.material-btn:hover {
10+
background-color: var(--gray-100);
11+
}
12+
.material-elevated-btn {
13+
box-shadow: 0px 1px 5px 0.1px rgba(0, 0, 0.5);
14+
}
15+
.material-filled-btn {
16+
background-color: var(--skyblue-600);
17+
color: whitesmoke;
18+
box-shadow: 0px 1px 5px -4px rgba(0, 0, 0.5);
19+
}
20+
.material-filled-btn:hover {
21+
background-color: var(--skyblue-700);
22+
}
23+
.material-outlined-btn {
24+
border: 1px solid var(--skyblue-400);
25+
background-color: white;
26+
}
27+
.material-outlined-btn:hover {
28+
background-color: var(--gray-50);
29+
}
30+
/* Material Card */
31+
.material-card {
32+
border-radius: 10px;
33+
background-color: rgba(230, 230, 230, 0.3);
34+
border: 2px solid transparent;
35+
width: max-content;
36+
padding: 20px;
37+
color: black;
38+
animation: material-shadow-out 1s normal;
39+
animation-iteration-count: 1;
40+
}
41+
.material-card:hover {
42+
background-color: rgba(137, 196, 252, 0.3);
43+
box-shadow: 0px 0px 5px 1px var(--skyblue-300);
44+
}
45+
.material-card:active {
46+
background-color: rgba(74, 167, 253, 0.3);
47+
box-shadow: 0px 0px 5px 1px var(--skyblue-300);
48+
}
49+
@keyframes material-shadow-out {
50+
0% {
51+
box-shadow: 0px 0px 0px 0px var(--skyblue-300);
52+
}
53+
50% {
54+
box-shadow: 0px 0px 2.5px 0.5px var(--skyblue-300);
55+
}
56+
100% {
57+
box-shadow: 0px 0px 5px 1px var(--skyblue-300);
58+
}
59+
}
60+
.material-card .material-card-title {
61+
font-size: xx-large;
62+
font-weight: bold;
63+
padding-bottom: 10px;
64+
}
65+
.material-card .material-card-subtitle {
66+
font-size: larger;
67+
font-weight: normal;
68+
padding-bottom: 10px;
69+
}
70+
.material-card .material-card-content {
71+
font-size: medium;
72+
font-weight: normal;
73+
padding-bottom: 10px;
74+
}
75+
.material-card .actions {
76+
display: flex;
77+
flex-direction: row-reverse;
78+
}

0 commit comments

Comments
 (0)