Skip to content

Commit 3e423cc

Browse files
Bikram GoleBikram Gole
Bikram Gole
authored and
Bikram Gole
committed
Refine Material3 mascot to classic Android toy style
1 parent 2fe73a3 commit 3e423cc

1 file changed

Lines changed: 63 additions & 73 deletions

File tree

‎styles.css‎

Lines changed: 63 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1936,22 +1936,22 @@ body.browser-vivaldi .penguin-glasses {
19361936
z-index: 2;
19371937
transform-origin: center 82%;
19381938
animation: android-idle 4.4s ease-in-out infinite;
1939-
transform: perspective(520px) rotateX(5deg);
1940-
filter: drop-shadow(0 14px 20px rgba(35, 81, 59, 0.34));
1939+
transform: perspective(520px) rotateX(4deg);
1940+
filter: drop-shadow(0 14px 22px rgba(33, 76, 56, 0.34));
19411941
}
19421942

19431943
.android-head {
19441944
position: absolute;
1945-
left: 27px;
1946-
top: 16px;
1947-
width: 86px;
1948-
height: 54px;
1949-
border-radius: 24px 24px 12px 12px;
1950-
background: linear-gradient(170deg, #8dbf31 0%, #6ea128 70%, #57831d 100%);
1945+
left: 29px;
1946+
top: 17px;
1947+
width: 82px;
1948+
height: 52px;
1949+
border-radius: 36px 36px 14px 14px;
1950+
background: linear-gradient(170deg, #96c234 0%, #79ab2b 70%, #628e20 100%);
19511951
box-shadow:
1952-
inset 0 2px 0 rgba(231, 255, 166, 0.22),
1953-
inset 0 -5px 9px rgba(32, 62, 24, 0.28),
1954-
0 8px 16px rgba(31, 74, 46, 0.3);
1952+
inset 0 2px 0 rgba(236, 255, 176, 0.28),
1953+
inset 0 -5px 8px rgba(41, 73, 29, 0.25),
1954+
0 8px 14px rgba(34, 74, 50, 0.28);
19551955
}
19561956

19571957
.android-head,
@@ -1967,87 +1967,77 @@ body.browser-vivaldi .penguin-glasses {
19671967
width: 4px;
19681968
height: 13px;
19691969
border-radius: 999px;
1970-
background: #7fab2c;
1970+
background: #86b72e;
19711971
}
19721972

1973-
.android-antenna.left { left: 14px; transform: rotate(-23deg); }
1974-
.android-antenna.right { right: 14px; transform: rotate(23deg); }
1973+
.android-antenna.left { left: 16px; transform: rotate(-26deg); }
1974+
.android-antenna.right { right: 16px; transform: rotate(26deg); }
19751975

19761976
.android-eye {
19771977
position: absolute;
1978-
top: 19px;
1979-
width: 24px;
1978+
top: 21px;
1979+
width: 8px;
19801980
height: 8px;
1981-
border-radius: 3px;
1982-
background: linear-gradient(90deg, #8ce6ff 0%, #e3fbff 50%, #8ce6ff 100%);
1983-
box-shadow: 0 0 8px rgba(110, 225, 255, 0.5);
1981+
border-radius: 999px;
1982+
background: #f5fff0;
1983+
box-shadow: inset 0 -1px 0 rgba(154, 191, 128, 0.45);
19841984
}
19851985

19861986
.android-eye::after {
19871987
content: "";
19881988
position: absolute;
1989-
left: 0;
1990-
top: -4px;
1991-
width: 100%;
1992-
height: 3px;
1993-
border-radius: 3px;
1994-
background: rgba(29, 52, 21, 0.8);
1989+
right: 1px;
1990+
top: 1px;
1991+
width: 2px;
1992+
height: 2px;
1993+
border-radius: 999px;
1994+
background: rgba(255, 255, 255, 0.95);
19951995
}
19961996

1997-
.android-eye.left { left: 14px; }
1998-
.android-eye.right { right: 14px; }
1997+
.android-eye.left { left: 22px; }
1998+
.android-eye.right { right: 22px; }
19991999

20002000
.android-body {
20012001
position: absolute;
2002-
left: 21px;
2002+
left: 24px;
20032003
top: 72px;
20042004
width: 100px;
2005-
height: 78px;
2006-
border-radius: 10px;
2005+
height: 76px;
2006+
border-radius: 12px;
20072007
background:
2008-
linear-gradient(180deg, rgba(160, 204, 65, 0.2), rgba(70, 112, 30, 0.1)),
2009-
linear-gradient(170deg, #82b62e 0%, #6a9a24 70%, #507719 100%);
2008+
linear-gradient(180deg, rgba(180, 219, 81, 0.2), rgba(88, 130, 35, 0.1)),
2009+
linear-gradient(170deg, #8cba31 0%, #6f9f28 70%, #58801e 100%);
20102010
box-shadow:
2011-
inset 0 2px 0 rgba(223, 255, 146, 0.18),
2012-
inset 0 -6px 10px rgba(30, 57, 22, 0.25),
2013-
0 8px 14px rgba(31, 74, 46, 0.28);
2011+
inset 0 2px 0 rgba(233, 255, 171, 0.24),
2012+
inset 0 -6px 10px rgba(35, 66, 25, 0.24),
2013+
0 8px 14px rgba(34, 74, 50, 0.28);
20142014
}
20152015

20162016
.android-body::after {
20172017
content: "";
20182018
position: absolute;
2019-
right: 12px;
2020-
top: 16px;
2021-
width: 22px;
2022-
height: 40px;
2023-
border-radius: 10px;
2024-
background: linear-gradient(180deg, rgba(231, 255, 165, 0.24), rgba(231, 255, 165, 0.02));
2025-
transform: skewY(-8deg);
2019+
left: 50%;
2020+
top: 10px;
2021+
transform: translateX(-50%);
2022+
width: 64px;
2023+
height: 10px;
2024+
border-radius: 999px;
2025+
background: rgba(240, 255, 195, 0.26);
20262026
}
20272027

20282028
.android-body::before {
20292029
content: "";
20302030
position: absolute;
2031-
left: 50%;
2032-
top: 10px;
2033-
transform: translateX(-50%);
2034-
width: 68px;
2035-
height: 2px;
2036-
border-radius: 2px;
2037-
background: rgba(201, 246, 114, 0.45);
2038-
box-shadow: 0 18px 0 rgba(201, 246, 114, 0.25), 0 36px 0 rgba(201, 246, 114, 0.2);
2031+
right: 10px;
2032+
top: 18px;
2033+
width: 24px;
2034+
height: 42px;
2035+
border-radius: 12px;
2036+
background: linear-gradient(180deg, rgba(241, 255, 198, 0.22), rgba(241, 255, 198, 0.04));
20392037
}
20402038

20412039
.android-head::after {
2042-
content: "";
2043-
position: absolute;
2044-
left: 50%;
2045-
bottom: 8px;
2046-
transform: translateX(-50%);
2047-
width: 40px;
2048-
height: 10px;
2049-
border-radius: 0 0 6px 6px;
2050-
border-bottom: 2px solid rgba(27, 50, 18, 0.55);
2040+
content: none;
20512041
}
20522042

20532043
.android-head::before {
@@ -2057,20 +2047,20 @@ body.browser-vivaldi .penguin-glasses {
20572047
.android-date-badge {
20582048
position: absolute;
20592049
left: 50%;
2060-
top: 28px;
2050+
top: 30px;
20612051
transform: translateX(-50%);
20622052
min-width: 32px;
20632053
text-align: center;
20642054
border-radius: 999px;
2065-
border: 1px solid rgba(54, 101, 74, 0.42);
2066-
background: rgba(12, 37, 43, 0.86);
2067-
color: #9defff;
2055+
border: 1px solid rgba(62, 94, 38, 0.42);
2056+
background: rgba(20, 44, 18, 0.82);
2057+
color: #d5ffbb;
20682058
font-family: "JetBrains Mono", "Fira Mono", "Courier New", monospace;
20692059
font-size: 11px;
20702060
font-weight: 700;
20712061
letter-spacing: 0.01em;
20722062
padding: 2px 7px;
2073-
box-shadow: 0 2px 8px rgba(61, 173, 218, 0.24);
2063+
box-shadow: 0 2px 8px rgba(84, 158, 55, 0.24);
20742064
}
20752065

20762066
.android-date-badge:empty {
@@ -2081,27 +2071,27 @@ body.browser-vivaldi .penguin-glasses {
20812071
.android-leg {
20822072
position: absolute;
20832073
border-radius: 999px;
2084-
background: linear-gradient(170deg, #789f2b 0%, #628521 100%);
2085-
box-shadow: inset 0 2px 2px rgba(223, 255, 143, 0.15), inset 0 -4px 5px rgba(34, 62, 24, 0.22);
2074+
background: linear-gradient(170deg, #83b32f 0%, #659225 100%);
2075+
box-shadow: inset 0 2px 2px rgba(229, 255, 152, 0.17), inset 0 -4px 5px rgba(39, 67, 27, 0.22);
20862076
}
20872077

20882078
.android-arm {
2089-
top: 75px;
2079+
top: 74px;
20902080
width: 15px;
2091-
height: 54px;
2081+
height: 52px;
20922082
}
20932083

2094-
.android-arm.left { left: 4px; }
2095-
.android-arm.right { right: 4px; }
2084+
.android-arm.left { left: 7px; }
2085+
.android-arm.right { right: 7px; }
20962086

20972087
.android-leg {
2098-
top: 138px;
2088+
top: 137px;
20992089
width: 17px;
21002090
height: 28px;
21012091
}
21022092

2103-
.android-leg.left { left: 46px; }
2104-
.android-leg.right { left: 83px; }
2093+
.android-leg.left { left: 49px; }
2094+
.android-leg.right { left: 80px; }
21052095

21062096
body[data-theme="material3"] .avatar-glow {
21072097
background: radial-gradient(circle, rgba(204, 235, 115, 0.48) 0%, rgba(136, 190, 47, 0.18) 58%, transparent 100%);

0 commit comments

Comments
 (0)