1+ /*!
2+ * "Fork me on GitHub" CSS ribbon v0.2.0 | MIT License
3+ * https://github.com/simonwhitaker/github-fork-ribbon-css
4+ */
5+
6+ .github-fork-ribbon {
7+ width : 12.1em ;
8+ height : 12.1em ;
9+ position : absolute;
10+ overflow : hidden;
11+ top : 0 ;
12+ right : 0 ;
13+ z-index : 9999 ;
14+ pointer-events : none;
15+ font-size : 13px ;
16+ text-decoration : none;
17+ text-indent : -999999px ;
18+ }
19+
20+ .github-fork-ribbon .fixed {
21+ position : fixed;
22+ }
23+
24+ .github-fork-ribbon : before , .github-fork-ribbon : after {
25+ /* The right and left classes determine the side we attach our banner to */
26+ position : absolute;
27+ display : block;
28+ width : 15.38em ;
29+ height : 1.54em ;
30+
31+ top : 3.23em ;
32+ right : -3.23em ;
33+
34+ -webkit-transform : rotate (45deg );
35+ -moz-transform : rotate (45deg );
36+ -ms-transform : rotate (45deg );
37+ -o-transform : rotate (45deg );
38+ transform : rotate (45deg );
39+ }
40+
41+ .github-fork-ribbon : before {
42+ content : "" ;
43+
44+ /* Add a bit of padding to give some substance outside the "stitching" */
45+ padding : .38em 0 ;
46+
47+ /* Set the base colour */
48+ background-color : # a00 ;
49+
50+ /* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
51+ background-image : -webkit-gradient (linear, left top, left bottom, from (rgba (0 , 0 , 0 , 0 )), to (rgba (0 , 0 , 0 , 0.15 )));
52+ background-image : -webkit-linear-gradient (top, rgba (0 , 0 , 0 , 0 ), rgba (0 , 0 , 0 , 0.15 ));
53+ background-image : -moz-linear-gradient (top, rgba (0 , 0 , 0 , 0 ), rgba (0 , 0 , 0 , 0.15 ));
54+ background-image : -ms-linear-gradient (top, rgba (0 , 0 , 0 , 0 ), rgba (0 , 0 , 0 , 0.15 ));
55+ background-image : -o-linear-gradient (top, rgba (0 , 0 , 0 , 0 ), rgba (0 , 0 , 0 , 0.15 ));
56+ background-image : linear-gradient (to bottom, rgba (0 , 0 , 0 , 0 ), rgba (0 , 0 , 0 , 0.15 ));
57+
58+ /* Add a drop shadow */
59+ -webkit-box-shadow : 0 .15em .23em 0 rgba (0 , 0 , 0 , 0.5 );
60+ -moz-box-shadow : 0 .15em .23em 0 rgba (0 , 0 , 0 , 0.5 );
61+ box-shadow : 0 .15em .23em 0 rgba (0 , 0 , 0 , 0.5 );
62+
63+ pointer-events : auto;
64+ }
65+
66+ .github-fork-ribbon : after {
67+ /* Set the text from the title attribute */
68+ content : attr (title);
69+
70+ /* Set the text properties */
71+ color : # fff ;
72+ font : 700 1em "Helvetica Neue" , Helvetica, Arial, sans-serif;
73+ line-height : 1.54em ;
74+ text-decoration : none;
75+ text-shadow : 0 -.08em rgba (0 , 0 , 0 , 0.5 );
76+ text-align : center;
77+ text-indent : 0 ;
78+
79+ /* Set the layout properties */
80+ padding : .15em 0 ;
81+ margin : .15em 0 ;
82+
83+ /* Add "stitching" effect */
84+ border-width : .08em 0 ;
85+ border-style : dotted;
86+ border-color : # fff ;
87+ border-color : rgba (255 , 255 , 255 , 0.7 );
88+ }
89+
90+ .github-fork-ribbon .left-top , .github-fork-ribbon .left-bottom {
91+ right : auto;
92+ left : 0 ;
93+ }
94+
95+ .github-fork-ribbon .left-bottom , .github-fork-ribbon .right-bottom {
96+ top : auto;
97+ bottom : 0 ;
98+ }
99+
100+ .github-fork-ribbon .left-top : before , .github-fork-ribbon .left-top : after , .github-fork-ribbon .left-bottom : before , .github-fork-ribbon .left-bottom : after {
101+ right : auto;
102+ left : -3.23em ;
103+ }
104+
105+ .github-fork-ribbon .left-bottom : before , .github-fork-ribbon .left-bottom : after , .github-fork-ribbon .right-bottom : before , .github-fork-ribbon .right-bottom : after {
106+ top : auto;
107+ bottom : 3.23em ;
108+ }
109+
110+ .github-fork-ribbon .left-top : before , .github-fork-ribbon .left-top : after , .github-fork-ribbon .right-bottom : before , .github-fork-ribbon .right-bottom : after {
111+ -webkit-transform : rotate (-45deg );
112+ -moz-transform : rotate (-45deg );
113+ -ms-transform : rotate (-45deg );
114+ -o-transform : rotate (-45deg );
115+ transform : rotate (-45deg );
116+ }