style.styl 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290
  1. global-reset()
  2. @import "bootstrap.css"
  3. @import "fontawesome.css"
  4. text_color = white;
  5. alt_color = #a2a2a2
  6. p {
  7. margin-top: 0;
  8. margin-bottom: 1.4rem;
  9. }
  10. .content-area {
  11. width: 100%;
  12. height: 30%;
  13. min-height: 280px;
  14. }
  15. .center {
  16. display: flex;
  17. justify-content: center;
  18. align-items: center;
  19. }
  20. .logo {
  21. width: 25%;
  22. }
  23. .hidden {
  24. display: none;
  25. }
  26. .container {
  27. max-width: 720px;
  28. }
  29. .container.container-large {
  30. max-width: 100%;
  31. }
  32. .container-fluid.content {
  33. padding-left: 10%;
  34. padding-right: 10%;
  35. }
  36. .card.card-dark {
  37. background-color: #191919;
  38. border: 0px solid
  39. border-radius: 0px;
  40. color: alt_color;
  41. //min-height: 170px;
  42. padding: 1px;
  43. }
  44. .card.card-dark.hoverable:hover {
  45. border: 1px solid
  46. padding: 0px;
  47. }
  48. .card.card-dark ul {
  49. padding-left: 0rem;
  50. }
  51. .card.card-dark .list li {
  52. display: block;
  53. }
  54. .card-date {
  55. position: relative;
  56. bottom: 10px;
  57. margin-top: 0px;
  58. margin-bottom: 0px;
  59. padding-left: 1em;
  60. padding-right: 1em;
  61. }
  62. a { color: alt_color; }
  63. a:hover { color: text_color; }
  64. .group-header {
  65. margin-top: 150px;
  66. padding-bottom: 25px;
  67. text-align: center;
  68. color: text_color;
  69. //text-transform: uppercase;
  70. font-size: 1.8em;
  71. font-weight: 200;
  72. }
  73. .lead { color: alt_color; }
  74. .lead a {
  75. color: alt_color;
  76. text-decoration: underline;
  77. }
  78. .lead a:hover {
  79. color: text_color;
  80. text-decoration: underline;
  81. }
  82. .discord-color {
  83. background-color: #7289DA;
  84. color: text_color;
  85. }
  86. .post-content img {
  87. width: 100%;
  88. }
  89. .post-content h2 {
  90. margin-bottom: 26px;
  91. text-align: center;
  92. //text-transform: uppercase;
  93. font-size: 1.8em;
  94. font-weight: 200;
  95. }
  96. .post-content ul, .center-list ul {
  97. text-align: center;
  98. padding-left: 0px;
  99. margin-left: 0px;
  100. }
  101. .post-content li {
  102. display: block
  103. }
  104. .presskit h2 {
  105. text-align: center;
  106. //text-transform: uppercase;
  107. font-weight: 200;
  108. font-size: 2.5em;
  109. }
  110. .presskit a:hover {
  111. color: black;
  112. }
  113. .presskit-content {
  114. text-align: justify;
  115. }
  116. .presskit .presskit-content h2 {
  117. margin-top: 80px;
  118. margin-bottom: 40px;
  119. }
  120. .presskit p {
  121. margin-bottom: 25px;
  122. }
  123. .presskit-content ul {
  124. padding-left: 3em;
  125. padding-right: 3em;
  126. text-align: center;
  127. }
  128. .bg-dark2 {
  129. background-color: rgb(16, 16, 16);
  130. color: alt_color;
  131. }
  132. .bg-darker {
  133. background-color: #191919
  134. color: alt_color;
  135. }
  136. .space-bottom {
  137. margin-bottom: 30px;
  138. }
  139. .spacer-top {
  140. margin-top: 80px;
  141. }
  142. .spacer-bottom {
  143. margin-bottom: 80px;
  144. }
  145. .cover-bg {
  146. min-height: 300px;
  147. object-fit: cover;
  148. }
  149. li {
  150. display: inline-block;
  151. padding-bottom: 12px;
  152. }
  153. .ratio-steam iframe {
  154. height: 200px;
  155. width: 100%;
  156. }
  157. .btn-steam img {
  158. margin-top: 30px;
  159. width: 230px;
  160. }
  161. .btn-steam:hover img {
  162. width: 240px;
  163. margin-top: 27px;
  164. }
  165. .social-link {
  166. margin-right: 10px;
  167. }
  168. .ratio>* {
  169. position: absolute;
  170. top: 0;
  171. left: 0;
  172. width: 100%;
  173. height: 100%;
  174. }
  175. .tag-list {
  176. padding-left: 0px;
  177. }
  178. .dark-form.newsletter input { font-size: 1.2em; }
  179. .dark-form input, .dark-form textarea, .dark-form select {
  180. background-color: #1b1b1b;
  181. color: white;
  182. border-color: #2d2d2d;
  183. }
  184. .dark-form input:focus, .dark-form textarea:focus, .dark-form select:focus {
  185. background-color: #1b1b1b;
  186. color: white;
  187. border-color: #2d2d2d;
  188. }
  189. .dark-form input::placeholder, .dark-form textarea::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  190. color: alt_color;
  191. }
  192. .dark-form input:-ms-input-placeholder, .dark-form textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
  193. color: alt_color;
  194. }
  195. .dark-form input::-ms-input-placeholder, .dark-form textarea::-ms-input-placeholder { /* Microsoft Edge */
  196. color: alt_color;
  197. }
  198. .alert-success {
  199. color: #0f5132;
  200. background-color: #b3d0af;
  201. border-color: #badbcc;
  202. }
  203. .alert-danger {
  204. color: #7b0b15;
  205. background-color: #f99696;
  206. border-color: #f5c2c7;
  207. }
  208. .alert {
  209. padding: 0.5rem 1rem;
  210. }
  211. .justify { text-align: justify; }
  212. .image-box {
  213. display: flex;
  214. align-items: center;
  215. justify-content: center;
  216. background-image: url("transparency-grid.png");
  217. background-size: 50px;
  218. padding: 1em;
  219. }
  220. .image-box img {
  221. max-width: 100%;
  222. max-height: 75px;
  223. }
  224. .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  225. color: #fff;
  226. background-color: #6c757d;
  227. }
  228. .nav-link {
  229. color: text_color;
  230. text-decoration: none;
  231. }
  232. .nav-link:hover {
  233. color: alt_color;
  234. }