-
Notifications
You must be signed in to change notification settings - Fork 3
/
Ko-Fi-Korner.css
105 lines (93 loc) · 2.13 KB
/
Ko-Fi-Korner.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
.korner {
position:absolute;
background:url('https://i.imgur.com/6wVUSrs.png'),linear-gradient(to top right, transparent 0%, transparent 50%, #D8302D 50%, #FF5E5B 64%);
background-size:30px, 100%;
background-repeat:no-repeat;
background-position:top right;
height:60px;
width:60px;
top:0;
right:0;
transition:all 1s ease;
visibility:visible;
}
.folded.korner:before {
content:'';
position:absolute;
height:60px;
width:60px;
right:0px;
background:url('https://i.imgur.com/6wVUSrs.png'),linear-gradient(to bottom left, transparent 0%, transparent 50%, #00000040 50%, #00000010 63%, #00000008 80%, transparent 100%);
box-shadow:3px 0px 6px black;
transition:all 1s ease;
}
.korner p {
color:transparent;
font-family:'scalysans';
font-size:10px;
text-align:right;
margin:3px 3px 0 3px;
padding-bottom:0 !important;
}
.korner:hover {
width:110px;
height:110px;
background:linear-gradient(to top right, transparent 0%, transparent 50%, #D8302D 50%, #FF5E5B 64%);
background-position:top right;
transition:all 1s ease;
}
.folded.korner:hover:before {
height:110px;
width:110px;
transition:all 1s ease;
box-shadow:12px 0px 15px black;
}
.korner:hover p {
color:white;
text-indent:0;
transition:all .5s .8s ease-in;
}
.korner p:before {
content:'';
display:inline-block;
float:left;
width:110px;
height:110px;
shape-outside:polygon(0 0%, 0% 100%, 100% 100%);
shape-margin:0px;
}
.korner p:after {
content:'';
position:absolute;
right:0px;
display:block;
width:30px;
height:30px;
background:url('https://i.imgur.com/6wVUSrs.png');
background-size:contain;
background-position:center;
margin-top:-5px;
opacity:0;
}
.korner:hover p:after {
opacity:100%;
transition:all .5s .8s ease-in;
}
.korner a {
display:block;
width:60px;
height:60px;
position:absolute;
top:0;
right:0;
clip-path:polygon(0 0%, 100% 0%, 100% 100%);
}
.korner:hover a {
width:110px;
height:110px;
}
.phb:last-of-type {
visibility:hidden;
height:0;
padding:0;
}