gh-fork-ribbon.css 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. /* Left will inherit from right (so we don't need to duplicate code) */
  2. .github-fork-ribbon {
  3. /* The right and left classes determine the side we attach our banner to */
  4. position: absolute;
  5. /* Add a bit of padding to give some substance outside the "stitching" */
  6. padding: 2px 0;
  7. /* Set the base colour */
  8. background-color: #a00;
  9. /* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
  10. background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15)));
  11. background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
  12. background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
  13. background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
  14. background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
  15. background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
  16. /* Add a drop shadow */
  17. -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
  18. -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
  19. box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
  20. z-index: 9999;
  21. pointer-events: auto;
  22. }
  23. .github-fork-ribbon a,
  24. .github-fork-ribbon a:hover {
  25. /* Set the font */
  26. font: 700 13px "Helvetica Neue", Helvetica, Arial, sans-serif;
  27. color: #fff;
  28. /* Set the text properties */
  29. text-decoration: none;
  30. text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
  31. text-align: center;
  32. /* Set the geometry. If you fiddle with these you'll also need
  33. to tweak the top and right values in .github-fork-ribbon. */
  34. width: 200px;
  35. line-height: 20px;
  36. /* Set the layout properties */
  37. display: inline-block;
  38. padding: 2px 0;
  39. /* Add "stitching" effect */
  40. border-width: 1px 0;
  41. border-style: dotted;
  42. border-color: #fff;
  43. border-color: rgba(255, 255, 255, 0.7);
  44. }
  45. .github-fork-ribbon-wrapper {
  46. width: 150px;
  47. height: 150px;
  48. position: absolute;
  49. overflow: hidden;
  50. top: 0;
  51. z-index: 9999;
  52. pointer-events: none;
  53. }
  54. .github-fork-ribbon-wrapper.fixed {
  55. position: fixed;
  56. }
  57. .github-fork-ribbon-wrapper.left {
  58. left: 0;
  59. }
  60. .github-fork-ribbon-wrapper.right {
  61. right: 0;
  62. }
  63. .github-fork-ribbon-wrapper.left-bottom {
  64. position: fixed;
  65. top: inherit;
  66. bottom: 0;
  67. left: 0;
  68. }
  69. .github-fork-ribbon-wrapper.right-bottom {
  70. position: fixed;
  71. top: inherit;
  72. bottom: 0;
  73. right: 0;
  74. }
  75. .github-fork-ribbon-wrapper.right .github-fork-ribbon {
  76. top: 42px;
  77. right: -43px;
  78. -webkit-transform: rotate(45deg);
  79. -moz-transform: rotate(45deg);
  80. -ms-transform: rotate(45deg);
  81. -o-transform: rotate(45deg);
  82. transform: rotate(45deg);
  83. }
  84. .github-fork-ribbon-wrapper.left .github-fork-ribbon {
  85. top: 42px;
  86. left: -43px;
  87. -webkit-transform: rotate(-45deg);
  88. -moz-transform: rotate(-45deg);
  89. -ms-transform: rotate(-45deg);
  90. -o-transform: rotate(-45deg);
  91. transform: rotate(-45deg);
  92. }
  93. .github-fork-ribbon-wrapper.left-bottom .github-fork-ribbon {
  94. top: 80px;
  95. left: -43px;
  96. -webkit-transform: rotate(45deg);
  97. -moz-transform: rotate(45deg);
  98. -ms-transform: rotate(45deg);
  99. -o-transform: rotate(45deg);
  100. transform: rotate(45deg);
  101. }
  102. .github-fork-ribbon-wrapper.right-bottom .github-fork-ribbon {
  103. top: 80px;
  104. right: -43px;
  105. -webkit-transform: rotate(-45deg);
  106. -moz-transform: rotate(-45deg);
  107. -ms-transform: rotate(-45deg);
  108. -o-transform: rotate(-45deg);
  109. transform: rotate(-45deg);
  110. }