Marks-Man
Loyal Member
CSS:
.avatar.avatar--default.avatar--default--image {
background: var(--main-front-color);
background: -webkit-linear-gradient(to right, #ffc837, var(--main-front-color));
background: linear-gradient(to right, #ffc837, var(--main-front-color));
}
.avatar--default--image:before {
position: absolute;
content: "";
background: orange;
height: 300px;
width: 300px;
background: url(data/assets/default_avatars/icon_test4.png);
}
.avatar_hex {
width: 46px;
height: 46px;
position: relative;
}
.avatar {
display: block !important;
height: 46px !important;
width: 46px !important;
background: var(--main-front-color);
background: -webkit-linear-gradient(to right, #ffc837, var(--main-front-color));
background: linear-gradient(to right, #ffc837, var(--main-front-color));
-webkit-clip-path: polygon(
45% 1.33975%,
46.5798% 0.60307%,
48.26352% 0.15192%,
50% 0%,
51.73648% 0.15192%,
53.4202% 0.60307%,
55% 1.33975%,
89.64102% 21.33975%,
91.06889% 22.33956%,
92.30146000000001% 23.57212%,
93.30127% 25%,
94.03794000000001% 26.5798%,
94.48909% 28.26352%,
94.64102% 30%,
94.64102% 70%,
94.48909% 71.73648%,
94.03794000000001% 73.42019999999999%,
93.30127% 75%,
92.30146000000001% 76.42788%,
91.06889% 77.66043999999999%,
89.64102% 78.66025%,
55% 98.66025%,
53.4202% 99.39693%,
51.73648% 99.84808%,
50% 100%,
48.26352% 99.84808%,
46.5798% 99.39693%,
45% 98.66025%,
10.35898% 78.66025%,
8.93111% 77.66043999999999%,
7.69854% 76.42788%,
6.69873% 75%,
5.96206% 73.42019999999999%,
5.51091% 71.73648%,
5.35898% 70%,
5.35898% 30%,
5.51091% 28.26352%,
5.96206% 26.5798%,
6.69873% 25%,
7.69854% 23.57212%,
8.93111% 22.33956%,
10.35898% 21.33975%
);
clip-path: polygon(
45% 1.33975%,
46.5798% 0.60307%,
48.26352% 0.15192%,
50% 0%,
51.73648% 0.15192%,
53.4202% 0.60307%,
55% 1.33975%,
89.64102% 21.33975%,
91.06889% 22.33956%,
92.30146000000001% 23.57212%,
93.30127% 25%,
94.03794000000001% 26.5798%,
94.48909% 28.26352%,
94.64102% 30%,
94.64102% 70%,
94.48909% 71.73648%,
94.03794000000001% 73.42019999999999%,
93.30127% 75%,
92.30146000000001% 76.42788%,
91.06889% 77.66043999999999%,
89.64102% 78.66025%,
55% 98.66025%,
53.4202% 99.39693%,
51.73648% 99.84808%,
50% 100%,
48.26352% 99.84808%,
46.5798% 99.39693%,
45% 98.66025%,
10.35898% 78.66025%,
8.93111% 77.66043999999999%,
7.69854% 76.42788%,
6.69873% 75%,
5.96206% 73.42019999999999%,
5.51091% 71.73648%,
5.35898% 70%,
5.35898% 30%,
5.51091% 28.26352%,
5.96206% 26.5798%,
6.69873% 25%,
7.69854% 23.57212%,
8.93111% 22.33956%,
10.35898% 21.33975%
);
transition: all 1.5s ease;
background-position: 0px;
}
.avatar img:not(.cropImage) {
margin-top: -40px !important;
height: 40px;
width: 40px;
-webkit-clip-path: polygon(
45% 1.33975%,
46.5798% 0.60307%,
48.26352% 0.15192%,
50% 0%,
51.73648% 0.15192%,
53.4202% 0.60307%,
55% 1.33975%,
89.64102% 21.33975%,
91.06889% 22.33956%,
92.30146000000001% 23.57212%,
93.30127% 25%,
94.03794000000001% 26.5798%,
94.48909% 28.26352%,
94.64102% 30%,
94.64102% 70%,
94.48909% 71.73648%,
94.03794000000001% 73.42019999999999%,
93.30127% 75%,
92.30146000000001% 76.42788%,
91.06889% 77.66043999999999%,
89.64102% 78.66025%,
55% 98.66025%,
53.4202% 99.39693%,
51.73648% 99.84808%,
50% 100%,
48.26352% 99.84808%,
46.5798% 99.39693%,
45% 98.66025%,
10.35898% 78.66025%,
8.93111% 77.66043999999999%,
7.69854% 76.42788%,
6.69873% 75%,
5.96206% 73.42019999999999%,
5.51091% 71.73648%,
5.35898% 70%,
5.35898% 30%,
5.51091% 28.26352%,
5.96206% 26.5798%,
6.69873% 25%,
7.69854% 23.57212%,
8.93111% 22.33956%,
10.35898% 21.33975%
);
clip-path: polygon(
45% 1.33975%,
46.5798% 0.60307%,
48.26352% 0.15192%,
50% 0%,
51.73648% 0.15192%,
53.4202% 0.60307%,
55% 1.33975%,
89.64102% 21.33975%,
91.06889% 22.33956%,
92.30146000000001% 23.57212%,
93.30127% 25%,
94.03794000000001% 26.5798%,
94.48909% 28.26352%,
94.64102% 30%,
94.64102% 70%,
94.48909% 71.73648%,
94.03794000000001% 73.42019999999999%,
93.30127% 75%,
92.30146000000001% 76.42788%,
91.06889% 77.66043999999999%,
89.64102% 78.66025%,
55% 98.66025%,
53.4202% 99.39693%,
51.73648% 99.84808%,
50% 100%,
48.26352% 99.84808%,
46.5798% 99.39693%,
45% 98.66025%,
10.35898% 78.66025%,
8.93111% 77.66043999999999%,
7.69854% 76.42788%,
6.69873% 75%,
5.96206% 73.42019999999999%,
5.51091% 71.73648%,
5.35898% 70%,
5.35898% 30%,
5.51091% 28.26352%,
5.96206% 26.5798%,
6.69873% 25%,
7.69854% 23.57212%,
8.93111% 22.33956%,
10.35898% 21.33975%
);
left: 3px;
top: 3px;
display: block !important;
position: relative;
}
.avatar::before {
content: "";
display: block;
position: relative;
top: 3px !important;
left: 3px !important;
height: 40px !important;
width: 40px !important;
background-size: cover;
background-position: center;
-webkit-clip-path: polygon(
45% 1.33975%,
46.5798% 0.60307%,
48.26352% 0.15192%,
50% 0%,
51.73648% 0.15192%,
53.4202% 0.60307%,
55% 1.33975%,
89.64102% 21.33975%,
91.06889% 22.33956%,
92.30146000000001% 23.57212%,
93.30127% 25%,
94.03794000000001% 26.5798%,
94.48909% 28.26352%,
94.64102% 30%,
94.64102% 70%,
94.48909% 71.73648%,
94.03794000000001% 73.42019999999999%,
93.30127% 75%,
92.30146000000001% 76.42788%,
91.06889% 77.66043999999999%,
89.64102% 78.66025%,
55% 98.66025%,
53.4202% 99.39693%,
51.73648% 99.84808%,
50% 100%,
48.26352% 99.84808%,
46.5798% 99.39693%,
45% 98.66025%,
10.35898% 78.66025%,
8.93111% 77.66043999999999%,
7.69854% 76.42788%,
6.69873% 75%,
5.96206% 73.42019999999999%,
5.51091% 71.73648%,
5.35898% 70%,
5.35898% 30%,
5.51091% 28.26352%,
5.96206% 26.5798%,
6.69873% 25%,
7.69854% 23.57212%,
8.93111% 22.33956%,
10.35898% 21.33975%
);
clip-path: polygon(
45% 1.33975%,
46.5798% 0.60307%,
48.26352% 0.15192%,
50% 0%,
51.73648% 0.15192%,
53.4202% 0.60307%,
55% 1.33975%,
89.64102% 21.33975%,
91.06889% 22.33956%,
92.30146000000001% 23.57212%,
93.30127% 25%,
94.03794000000001% 26.5798%,
94.48909% 28.26352%,
94.64102% 30%,
94.64102% 70%,
94.48909% 71.73648%,
94.03794000000001% 73.42019999999999%,
93.30127% 75%,
92.30146000000001% 76.42788%,
91.06889% 77.66043999999999%,
89.64102% 78.66025%,
55% 98.66025%,
53.4202% 99.39693%,
51.73648% 99.84808%,
50% 100%,
48.26352% 99.84808%,
46.5798% 99.39693%,
45% 98.66025%,
10.35898% 78.66025%,
8.93111% 77.66043999999999%,
7.69854% 76.42788%,
6.69873% 75%,
5.96206% 73.42019999999999%,
5.51091% 71.73648%,
5.35898% 70%,
5.35898% 30%,
5.51091% 28.26352%,
5.96206% 26.5798%,
6.69873% 25%,
7.69854% 23.57212%,
8.93111% 22.33956%,
10.35898% 21.33975%
);
}
.avatar:hover {
background-position: 46px;
transition: all 0.5s ease;
filter: contrast(110%);
transform: rotate(10deg);
}
.avatar:hover + .hexa_info::before {
background: green;
}
.avatar_hex_info {
height: 17px;
width: 17px;
position: absolute;
text-align: center;
padding-top: 2px;
right: 0px;
bottom: 0;
background: var(--dark-one);
-webkit-clip-path: polygon(
40% 7.67949%,
43.1596% 6.20615%,
46.52704% 5.30384%,
50% 5%,
53.47296% 5.30384%,
56.8404% 6.20615%,
60% 7.67949%,
81.65064% 20.17949%,
84.50639% 22.17911%,
86.97152% 24.64425%,
88.97114000000001% 27.5%,
90.44449% 30.6596%,
91.34679% 34.02704%,
91.65064% 37.5%,
91.65064% 62.5%,
91.34679% 65.97296%,
90.44449% 69.3404%,
88.97114000000001% 72.5%,
86.97152% 75.35575%,
84.50639% 77.82089000000001%,
81.65064% 79.82051%,
60% 92.32051%,
56.8404% 93.79385000000001%,
53.47296% 94.69616000000001%,
50% 95%,
46.52704% 94.69616000000001%,
43.1596% 93.79385000000001%,
40% 92.32051%,
18.34936% 79.82051%,
15.49361% 77.82089000000001%,
13.02848% 75.35575%,
11.02886% 72.5%,
9.55551% 69.3404%,
8.65321% 65.97296%,
8.349360000000001% 62.5%,
8.349360000000001% 37.5%,
8.65321% 34.02704%,
9.55551% 30.6596%,
11.02886% 27.5%,
13.02848% 24.64425%,
15.49361% 22.17911%,
18.34936% 20.17949%
);
clip-path: polygon(
40% 7.67949%,
43.1596% 6.20615%,
46.52704% 5.30384%,
50% 5%,
53.47296% 5.30384%,
56.8404% 6.20615%,
60% 7.67949%,
81.65064% 20.17949%,
84.50639% 22.17911%,
86.97152% 24.64425%,
88.97114000000001% 27.5%,
90.44449% 30.6596%,
91.34679% 34.02704%,
91.65064% 37.5%,
91.65064% 62.5%,
91.34679% 65.97296%,
90.44449% 69.3404%,
88.97114000000001% 72.5%,
86.97152% 75.35575%,
84.50639% 77.82089000000001%,
81.65064% 79.82051%,
60% 92.32051%,
56.8404% 93.79385000000001%,
53.47296% 94.69616000000001%,
50% 95%,
46.52704% 94.69616000000001%,
43.1596% 93.79385000000001%,
40% 92.32051%,
18.34936% 79.82051%,
15.49361% 77.82089000000001%,
13.02848% 75.35575%,
11.02886% 72.5%,
9.55551% 69.3404%,
8.65321% 65.97296%,
8.349360000000001% 62.5%,
8.349360000000001% 37.5%,
8.65321% 34.02704%,
9.55551% 30.6596%,
11.02886% 27.5%,
13.02848% 24.64425%,
15.49361% 22.17911%,
18.34936% 20.17949%
);
}
.avatar_hex_info::before {
content: "A";
font-weight: bold;
font-size: 7px;
padding-top: 2px;
display: block;
position: relative;
left: 2px;
height: 12px;
width: 14px;
background: #e6404c;
color: var(--text-color-white-more);
background-size: cover;
background-position: center;
-webkit-clip-path: polygon(
40% 7.67949%,
43.1596% 6.20615%,
46.52704% 5.30384%,
50% 5%,
53.47296% 5.30384%,
56.8404% 6.20615%,
60% 7.67949%,
81.65064% 20.17949%,
84.50639% 22.17911%,
86.97152% 24.64425%,
88.97114000000001% 27.5%,
90.44449% 30.6596%,
91.34679% 34.02704%,
91.65064% 37.5%,
91.65064% 62.5%,
91.34679% 65.97296%,
90.44449% 69.3404%,
88.97114000000001% 72.5%,
86.97152% 75.35575%,
84.50639% 77.82089000000001%,
81.65064% 79.82051%,
60% 92.32051%,
56.8404% 93.79385000000001%,
53.47296% 94.69616000000001%,
50% 95%,
46.52704% 94.69616000000001%,
43.1596% 93.79385000000001%,
40% 92.32051%,
18.34936% 79.82051%,
15.49361% 77.82089000000001%,
13.02848% 75.35575%,
11.02886% 72.5%,
9.55551% 69.3404%,
8.65321% 65.97296%,
8.349360000000001% 62.5%,
8.349360000000001% 37.5%,
8.65321% 34.02704%,
9.55551% 30.6596%,
11.02886% 27.5%,
13.02848% 24.64425%,
15.49361% 22.17911%,
18.34936% 20.17949%
);
clip-path: polygon(
40% 7.67949%,
43.1596% 6.20615%,
46.52704% 5.30384%,
50% 5%,
53.47296% 5.30384%,
56.8404% 6.20615%,
60% 7.67949%,
81.65064% 20.17949%,
84.50639% 22.17911%,
86.97152% 24.64425%,
88.97114000000001% 27.5%,
90.44449% 30.6596%,
91.34679% 34.02704%,
91.65064% 37.5%,
91.65064% 62.5%,
91.34679% 65.97296%,
90.44449% 69.3404%,
88.97114000000001% 72.5%,
86.97152% 75.35575%,
84.50639% 77.82089000000001%,
81.65064% 79.82051%,
60% 92.32051%,
56.8404% 93.79385000000001%,
53.47296% 94.69616000000001%,
50% 95%,
46.52704% 94.69616000000001%,
43.1596% 93.79385000000001%,
40% 92.32051%,
18.34936% 79.82051%,
15.49361% 77.82089000000001%,
13.02848% 75.35575%,
11.02886% 72.5%,
9.55551% 69.3404%,
8.65321% 65.97296%,
8.349360000000001% 62.5%,
8.349360000000001% 37.5%,
8.65321% 34.02704%,
9.55551% 30.6596%,
11.02886% 27.5%,
13.02848% 24.64425%,
15.49361% 22.17911%,
18.34936% 20.17949%
);
}
:root {
--main-front-color: orange;
--dark-one: #1f2535;
--dark-two: #31394a;
--dark-three: #232a3d;
--text-color: #9ba5c0;
--text-color-white: #eee;
--text-color-white-more: #fff;
--button-bg: #ffb327;
}
