A corporation manager and dashboard for EVE Online
No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.
 
 
 
 
 

610 líneas
9.3 KiB

  1. /* ~~~~~~~~~~~~~~~~~~~~~~~~~~ Calefaction Main CSS ~~~~~~~~~~~~~~~~~~~~~~~~~ */
  2. /* =============================== Universal =============================== */
  3. @import url(//fonts.googleapis.com/css?family=Open+Sans:400,400italic,700);
  4. body {
  5. display: flex;
  6. min-height: 100vh;
  7. flex-direction: column;
  8. margin: 0;
  9. font-family: "Open Sans", sans-serif;
  10. line-height: 1.3;
  11. color: #EAEAEA;
  12. background-color: black;
  13. background-size: cover;
  14. background-position: center;
  15. background-attachment: fixed;
  16. }
  17. a {
  18. color: #78CEFF;
  19. text-decoration: none;
  20. }
  21. a:hover {
  22. color: #68BEDD;
  23. text-decoration: underline;
  24. }
  25. h2, h3 {
  26. margin: 0.5em 0;
  27. }
  28. abbr[title], acronym[title] {
  29. border-bottom: 1px dotted #555;
  30. text-decoration: none;
  31. }
  32. .understate {
  33. font-weight: normal;
  34. }
  35. #container {
  36. display: flex;
  37. flex: 1;
  38. }
  39. #container > div {
  40. width: 100%;
  41. }
  42. .styled-border {
  43. border-color: #4A4A4A;
  44. border-style: solid;
  45. }
  46. main, header, footer {
  47. background-color: rgba(0, 0, 0, 0.8);
  48. }
  49. main {
  50. border-width: 1px;
  51. }
  52. header {
  53. border-width: 0 0 1px 0;
  54. }
  55. footer {
  56. padding: 0.5em 0;
  57. font-size: 85%;
  58. text-align: center;
  59. color: #BABABA;
  60. border-width: 1px 0 0;
  61. }
  62. header > div, footer > div {
  63. margin: 0 auto;
  64. }
  65. @media (min-width: 800px) {
  66. main, header > div, footer > div {
  67. max-width: 1000px;
  68. width: 80%;
  69. }
  70. main {
  71. margin: 2em auto;
  72. padding: 0.5em 1.5em;
  73. }
  74. header > div {
  75. display: table;
  76. }
  77. footer > div {
  78. padding: 0.5em 1.5em;
  79. }
  80. header > div > div {
  81. display: table-row;
  82. }
  83. header > div > div > div {
  84. display: table-cell;
  85. }
  86. header .left {
  87. padding: 0.5em 1.5em 0.5em 0;
  88. }
  89. header .right {
  90. padding: 0.5em 0;
  91. text-align: right;
  92. white-space: nowrap;
  93. }
  94. }
  95. @media (max-width: 799px) {
  96. main {
  97. margin: 1.5em auto;
  98. padding: 0 1em;
  99. }
  100. footer > div {
  101. padding: 0.5em 1em;
  102. }
  103. header > div > div > div {
  104. display: inline-block;
  105. }
  106. header .left {
  107. margin: 0.5em 1em 0em 1em;
  108. }
  109. header .right {
  110. margin: 0.25em 1em 0.5em 1em;
  111. }
  112. }
  113. header nav {
  114. display: inline-block;
  115. vertical-align: middle;
  116. padding: 0.25em 0;
  117. }
  118. header nav > ul {
  119. display: inline-block;
  120. margin: 0;
  121. padding: 0;
  122. }
  123. header nav > ul > li {
  124. display: inline-block;
  125. }
  126. header nav > ul > li:not(:last-child)::after {
  127. content: " \007c";
  128. color: #777;
  129. }
  130. header .spacer {
  131. height: 32px;
  132. vertical-align: middle;
  133. visibility: hidden;
  134. }
  135. header .sep {
  136. color: #777777;
  137. }
  138. footer ul {
  139. margin: 0;
  140. padding: 0;
  141. }
  142. footer ul li {
  143. display: inline-block;
  144. list-style: none;
  145. }
  146. footer ul li:not(:last-child)::after {
  147. content: " \00b7";
  148. }
  149. #corp-masthead {
  150. color: #EAEAEA;
  151. margin-right: 1.5em;
  152. }
  153. #corp-masthead:hover {
  154. color: #BABABA;
  155. text-decoration: none;
  156. }
  157. #corp-masthead img {
  158. height: 32px;
  159. margin-right: 0.25em;
  160. }
  161. #corp-masthead h1 {
  162. display: inline;
  163. font-size: 120%;
  164. font-weight: normal;
  165. }
  166. #corp-masthead > * {
  167. vertical-align: middle;
  168. }
  169. #flashes {
  170. margin-top: 0.5em;
  171. }
  172. #flashes > div {
  173. padding: 0.5em 0.75em;
  174. border-left-width: 4px;
  175. border-left-style: solid;
  176. }
  177. #flashes > .success {
  178. border-color: #33AA22;
  179. background-color: rgba(60, 255, 30, 0.2);
  180. }
  181. #flashes > .error {
  182. border-color: #AA3322;
  183. background-color: rgba(255, 60, 30, 0.2);
  184. }
  185. #flashes .dismiss {
  186. float: right;
  187. margin: 0 0 0.5em 0.5em;
  188. }
  189. #character-portrait {
  190. position: relative;
  191. display: inline-block;
  192. }
  193. #character-portrait img {
  194. height: 32px;
  195. width: 32px;
  196. margin-right: 0.25em;
  197. box-sizing: border-box;
  198. border-width: 1px;
  199. vertical-align: middle;
  200. }
  201. #character-summary {
  202. font-size: 90%;
  203. vertical-align: middle;
  204. }
  205. #character-options {
  206. position: absolute;
  207. margin-top: 1em;
  208. margin-left: -5px;
  209. background-color: rgba(0, 0, 0, 0.8);
  210. border-width: 1px;
  211. }
  212. #character-options::after, #character-options::before {
  213. bottom: 100%;
  214. left: 20px;
  215. border: solid transparent;
  216. content: " ";
  217. height: 0;
  218. width: 0;
  219. position: absolute;
  220. pointer-events: none;
  221. }
  222. #character-options::after {
  223. border-bottom-color: black;
  224. border-width: 10px;
  225. margin-left: -10px;
  226. }
  227. #character-options::before {
  228. border-bottom-color: #4A4A4A;
  229. border-width: 12px;
  230. margin-left: -12px;
  231. }
  232. #style-options {
  233. margin: 4px;
  234. line-height: 0;
  235. }
  236. #style-options > * {
  237. display: inline-block;
  238. padding: 4px;
  239. }
  240. #style-options > * > * {
  241. display: inline-block;
  242. height: 24px;
  243. width: 24px;
  244. margin: 0;
  245. padding: 0;
  246. background-color: transparent;
  247. background-size: contain;
  248. background-position: center;
  249. background-repeat: no-repeat;
  250. font-size: 0;
  251. border: 0;
  252. vertical-align: middle;
  253. }
  254. #style-options .cur {
  255. background-color: rgba(255, 255, 255, 0.3);
  256. }
  257. #style-options > :not(.cur) > * {
  258. cursor: pointer;
  259. }
  260. #error pre {
  261. white-space: pre-wrap;
  262. }
  263. #login-button {
  264. height: 30px;
  265. padding-bottom: 2px;
  266. vertical-align: middle;
  267. }
  268. #logout-form {
  269. margin-bottom: 1em;
  270. }
  271. .sec-null {
  272. color: #F30202;
  273. }
  274. .sec-0_1 {
  275. color: #DC3201;
  276. }
  277. .sec-0_2 {
  278. color: #EB4903;
  279. }
  280. .sec-0_3 {
  281. color: #F66301;
  282. }
  283. .sec-0_4 {
  284. color: #E58000;
  285. }
  286. .sec-0_5 {
  287. color: #F5F501;
  288. }
  289. .sec-0_6 {
  290. color: #96F933;
  291. }
  292. .sec-0_7 {
  293. color: #00FF00;
  294. }
  295. .sec-0_8 {
  296. color: #02F34B;
  297. }
  298. .sec-0_9 {
  299. color: #4BF3C3;
  300. }
  301. .sec-1_0 {
  302. color: #33F9F9;
  303. }
  304. /* ================================ Modules ================================ */
  305. /* ------------------------------- Campaigns ------------------------------- */
  306. #campaigns-select {
  307. display: inline-block;
  308. padding-right: 1em;
  309. background: transparent 100% 50%/contain no-repeat;
  310. border-width: 1px;
  311. }
  312. #campaigns-select select {
  313. max-width: 120px;
  314. padding: 0 0.25em;
  315. font-size: 100%;
  316. color: inherit;
  317. background: transparent;
  318. border: none;
  319. appearance: none;
  320. -webkit-appearance: none;
  321. -moz-appearance: none;
  322. }
  323. h2 .disabled {
  324. color: #989898;
  325. text-decoration: line-through;
  326. }
  327. h2 .disabled-info {
  328. margin-left: 0.5em;
  329. color: #989898;
  330. font-size: 85%;
  331. font-variant: none;
  332. }
  333. #operations {
  334. margin-bottom: 1em;
  335. }
  336. #operations section {
  337. display: flex;
  338. }
  339. .operation {
  340. flex: 1;
  341. }
  342. .operation .primary .num {
  343. height: 60px;
  344. line-height: 60px;
  345. }
  346. .operation .big {
  347. font-size: 300%;
  348. }
  349. .operation .medium {
  350. font-size: 200%;
  351. }
  352. .operation .small {
  353. font-size: 150%;
  354. }
  355. .operation .secondary {
  356. font-size: 105%;
  357. }
  358. .operation .unit {
  359. font-style: italic;
  360. }
  361. .operation .summary .head {
  362. margin-top: 1em;
  363. font-size: 14px;
  364. }
  365. .operation .summary .contents {
  366. position: relative;
  367. margin-top: 0.5em;
  368. border: 1px solid #282828;
  369. font-size: 14px;
  370. }
  371. .operation .killboard {
  372. border-spacing: 0;
  373. border-collapse: collapse;
  374. text-align: left;
  375. }
  376. .operation .killboard:not(.expanded) tr:nth-child(2n) {
  377. background-color: #181818;
  378. }
  379. .operation .killboard:not(.expanded) tr:nth-child(2n+1) {
  380. background-color: #0A0A0A;
  381. }
  382. .operation .killboard td {
  383. padding: 0.25em 0;
  384. }
  385. .operation .killboard td:first-child {
  386. padding-left: 1em;
  387. }
  388. .operation .killboard td:last-child {
  389. padding-right: 1em;
  390. }
  391. .operation .killboard .fluid {
  392. padding-right: 0.5em;
  393. }
  394. .operation .killboard .icon {
  395. width: 46px;
  396. }
  397. .operation .killboard.expanded {
  398. position: absolute;
  399. z-index: 1;
  400. transition: clip-path 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  401. clip-path: inset(0 100% 0 0);
  402. }
  403. .operation .killboard:not(.expanded) .extra {
  404. display: none;
  405. }
  406. .operation .killboard.expanded .spacer {
  407. display: none;
  408. }
  409. .operation .killboard img {
  410. width: 42px;
  411. height: 42px;
  412. vertical-align: middle;
  413. }
  414. .operation .killboard abbr {
  415. border-bottom: none;
  416. }
  417. @media (min-width: 800px) {
  418. #operations {
  419. margin: 1em 0;
  420. }
  421. #operations section {
  422. margin-bottom: 2em;
  423. }
  424. .operation {
  425. margin: 0 0.75em;
  426. text-align: center;
  427. }
  428. .operation .secondary {
  429. margin-top: 0.5em;
  430. }
  431. .operation .secondary .unit {
  432. margin-left: 0.15em;
  433. }
  434. .operation .summary .contents {
  435. display: inline-block;
  436. margin-bottom: -4px;
  437. }
  438. }
  439. @media (max-width: 799px) {
  440. #operations section {
  441. flex-direction: column;
  442. }
  443. .operation {
  444. margin: 0.5em 0;
  445. }
  446. .operation .overview {
  447. margin-left: 1em;
  448. }
  449. .operation .primary, .operation .primary .unit {
  450. display: inline-block;
  451. }
  452. .operation .unit {
  453. margin-left: 0.15em;
  454. }
  455. .operation .killboard:not(.expanded) {
  456. width: 100%;
  457. }
  458. }
  459. /* -------------------------------- Members -------------------------------- */
  460. #members-list {
  461. list-style: none;
  462. margin: 1em 0 0.5em 0;
  463. padding: 0;
  464. column-count: 2;
  465. }
  466. #members-list li {
  467. margin-bottom: 0.5em;
  468. }
  469. #members-list a:hover {
  470. text-decoration: none;
  471. }
  472. #members-list img {
  473. width: 48px;
  474. height: 48px;
  475. vertical-align: middle;
  476. border-width: 1px;
  477. }
  478. #members-list span {
  479. margin-left: 0.5em;
  480. vertical-align: middle;
  481. }
  482. #members-list em {
  483. font-size: 90%;
  484. }
  485. #members-list em::before {
  486. content: ", ";
  487. }