|
- /* ~~~~~~~~~~~~~~~~~~~~~~~~~~ Calefaction Main CSS ~~~~~~~~~~~~~~~~~~~~~~~~~ */
- /* =============================== Universal =============================== */
-
- @import url(//fonts.googleapis.com/css?family=Open+Sans:400,400italic,700);
-
- body {
- display: flex;
- min-height: 100vh;
- flex-direction: column;
- margin: 0;
- font-family: "Open Sans", sans-serif;
- line-height: 1.3;
- color: #EAEAEA;
- background-color: black;
- background-size: cover;
- background-position: center;
- background-attachment: fixed;
- }
-
- a {
- color: #78CEFF;
- text-decoration: none;
- }
-
- a:hover {
- color: #68BEDD;
- text-decoration: underline;
- }
-
- h2, h3 {
- margin: 0.5em 0;
- }
-
- abbr[title], acronym[title] {
- border-bottom: 1px dotted #555;
- text-decoration: none;
- }
-
- .understate {
- font-weight: normal;
- }
-
- #container {
- display: flex;
- flex: 1;
- }
-
- #container > div {
- width: 100%;
- }
-
- .styled-border {
- border-color: #4A4A4A;
- border-style: solid;
- }
-
- main, header, footer {
- background-color: rgba(0, 0, 0, 0.8);
- }
-
- main {
- border-width: 1px;
- }
-
- header {
- border-width: 0 0 1px 0;
- }
-
- footer {
- padding: 0.5em 0;
- font-size: 85%;
- text-align: center;
- color: #BABABA;
- border-width: 1px 0 0;
- }
-
- header > div, footer > div {
- margin: 0 auto;
- }
-
- @media (min-width: 800px) {
- main, header > div, footer > div {
- max-width: 1000px;
- width: 80%;
- }
-
- main {
- margin: 2em auto;
- padding: 0.5em 1.5em;
- }
-
- header > div {
- display: table;
- }
-
- footer > div {
- padding: 0.5em 1.5em;
- }
-
- header > div > div {
- display: table-row;
- }
-
- header > div > div > div {
- display: table-cell;
- }
-
- header .left {
- padding: 0.5em 1.5em 0.5em 0;
- }
-
- header .right {
- padding: 0.5em 0;
- text-align: right;
- white-space: nowrap;
- }
- }
-
- @media (max-width: 799px) {
- main {
- margin: 1.5em auto;
- padding: 0 1em;
- }
-
- footer > div {
- padding: 0.5em 1em;
- }
-
- header > div > div > div {
- display: inline-block;
- }
-
- header .left {
- margin: 0.5em 1em 0em 1em;
- }
-
- header .right {
- margin: 0.25em 1em 0.5em 1em;
- }
- }
-
- header nav {
- display: inline-block;
- vertical-align: middle;
- padding: 0.25em 0;
- }
-
- header nav > ul {
- display: inline-block;
- margin: 0;
- padding: 0;
- }
-
- header nav > ul > li {
- display: inline-block;
- }
-
- header nav > ul > li:not(:last-child)::after {
- content: " \007c";
- color: #777;
- }
-
- header .spacer {
- height: 32px;
- vertical-align: middle;
- visibility: hidden;
- }
-
- header .sep {
- color: #777777;
- }
-
- footer ul {
- margin: 0;
- padding: 0;
- }
-
- footer ul li {
- display: inline-block;
- list-style: none;
- }
-
- footer ul li:not(:last-child)::after {
- content: " \00b7";
- }
-
- #corp-masthead {
- color: #EAEAEA;
- margin-right: 1.5em;
- }
-
- #corp-masthead:hover {
- color: #BABABA;
- text-decoration: none;
- }
-
- #corp-masthead img {
- height: 32px;
- margin-right: 0.25em;
- }
-
- #corp-masthead h1 {
- display: inline;
- font-size: 120%;
- font-weight: normal;
- }
-
- #corp-masthead > * {
- vertical-align: middle;
- }
-
- #flashes {
- margin-top: 0.5em;
- }
-
- #flashes > div {
- padding: 0.5em 0.75em;
- border-left-width: 4px;
- border-left-style: solid;
- }
-
- #flashes > .success {
- border-color: #33AA22;
- background-color: rgba(60, 255, 30, 0.2);
- }
-
- #flashes > .error {
- border-color: #AA3322;
- background-color: rgba(255, 60, 30, 0.2);
- }
-
- #flashes .dismiss {
- float: right;
- margin: 0 0 0.5em 0.5em;
- }
-
- #character-portrait {
- position: relative;
- display: inline-block;
- }
-
- #character-portrait img {
- height: 32px;
- width: 32px;
- margin-right: 0.25em;
- box-sizing: border-box;
- border-width: 1px;
- vertical-align: middle;
- }
-
- #character-summary {
- font-size: 90%;
- vertical-align: middle;
- }
-
- #character-options {
- position: absolute;
- margin-top: 1em;
- margin-left: -5px;
- background-color: rgba(0, 0, 0, 0.8);
- border-width: 1px;
- }
-
- #character-options::after, #character-options::before {
- bottom: 100%;
- left: 20px;
- border: solid transparent;
- content: " ";
- height: 0;
- width: 0;
- position: absolute;
- pointer-events: none;
- }
-
- #character-options::after {
- border-bottom-color: black;
- border-width: 10px;
- margin-left: -10px;
- }
-
- #character-options::before {
- border-bottom-color: #4A4A4A;
- border-width: 12px;
- margin-left: -12px;
- }
-
- #style-options {
- margin: 4px;
- line-height: 0;
- }
-
- #style-options > * {
- display: inline-block;
- padding: 4px;
- }
-
- #style-options > * > * {
- display: inline-block;
- height: 24px;
- width: 24px;
- margin: 0;
- padding: 0;
- background-color: transparent;
- background-size: contain;
- background-position: center;
- background-repeat: no-repeat;
- font-size: 0;
- border: 0;
- vertical-align: middle;
- }
-
- #style-options .cur {
- background-color: rgba(255, 255, 255, 0.3);
- }
-
- #style-options > :not(.cur) > * {
- cursor: pointer;
- }
-
- #error pre {
- white-space: pre-wrap;
- }
-
- #login-button {
- height: 30px;
- padding-bottom: 2px;
- vertical-align: middle;
- }
-
- #logout-form {
- margin-bottom: 1em;
- }
-
- .sec-null {
- color: #F30202;
- }
-
- .sec-0_1 {
- color: #DC3201;
- }
-
- .sec-0_2 {
- color: #EB4903;
- }
-
- .sec-0_3 {
- color: #F66301;
- }
-
- .sec-0_4 {
- color: #E58000;
- }
-
- .sec-0_5 {
- color: #F5F501;
- }
-
- .sec-0_6 {
- color: #96F933;
- }
-
- .sec-0_7 {
- color: #00FF00;
- }
-
- .sec-0_8 {
- color: #02F34B;
- }
-
- .sec-0_9 {
- color: #4BF3C3;
- }
-
- .sec-1_0 {
- color: #33F9F9;
- }
-
- /* ================================ Modules ================================ */
- /* ------------------------------- Campaigns ------------------------------- */
-
- #campaigns-select {
- display: inline-block;
- padding-right: 1em;
- background: transparent 100% 50%/contain no-repeat;
- border-width: 1px;
- }
-
- #campaigns-select select {
- max-width: 120px;
- padding: 0 0.25em;
- font-size: 100%;
- color: inherit;
- background: transparent;
- border: none;
- appearance: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- }
-
- h2 .disabled {
- color: #989898;
- text-decoration: line-through;
- }
-
- h2 .disabled-info {
- margin-left: 0.5em;
- color: #989898;
- font-size: 85%;
- font-variant: none;
- }
-
- #operations {
- margin-bottom: 1em;
- }
-
- #operations section {
- display: flex;
- }
-
- .operation {
- flex: 1;
- }
-
- .operation .primary .num {
- height: 60px;
- line-height: 60px;
- }
-
- .operation .big {
- font-size: 300%;
- }
-
- .operation .medium {
- font-size: 200%;
- }
-
- .operation .small {
- font-size: 150%;
- }
-
- .operation .secondary {
- font-size: 105%;
- }
-
- .operation .unit {
- font-style: italic;
- }
-
- .operation .summary .head {
- margin-top: 1em;
- font-size: 14px;
- }
-
- .operation .summary .contents {
- position: relative;
- margin-top: 0.5em;
- border: 1px solid #282828;
- font-size: 14px;
- }
-
- .operation .killboard {
- border-spacing: 0;
- border-collapse: collapse;
- text-align: left;
- }
-
- .operation .killboard:not(.expanded) tr:nth-child(2n) {
- background-color: #181818;
- }
-
- .operation .killboard:not(.expanded) tr:nth-child(2n+1) {
- background-color: #0A0A0A;
- }
-
- .operation .killboard td {
- padding: 0.25em 0;
- }
-
- .operation .killboard td:first-child {
- padding-left: 1em;
- }
-
- .operation .killboard td:last-child {
- padding-right: 1em;
- }
-
- .operation .killboard .fluid {
- padding-right: 0.5em;
- }
-
- .operation .killboard .icon {
- width: 46px;
- }
-
- .operation .killboard.expanded {
- position: absolute;
- z-index: 1;
- transition: clip-path 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
- clip-path: inset(0 100% 0 0);
- }
-
- .operation .killboard:not(.expanded) .extra {
- display: none;
- }
-
- .operation .killboard.expanded .spacer {
- display: none;
- }
-
- .operation .killboard img {
- width: 42px;
- height: 42px;
- vertical-align: middle;
- }
-
- .operation .killboard abbr {
- border-bottom: none;
- }
-
- @media (min-width: 800px) {
- #operations {
- margin: 1em 0;
- }
-
- #operations section {
- margin-bottom: 2em;
- }
-
- .operation {
- margin: 0 0.75em;
- text-align: center;
- }
-
- .operation .secondary {
- margin-top: 0.5em;
- }
-
- .operation .secondary .unit {
- margin-left: 0.15em;
- }
-
- .operation .summary .contents {
- display: inline-block;
- margin-bottom: -4px;
- }
- }
-
- @media (max-width: 799px) {
- #operations section {
- flex-direction: column;
- }
-
- .operation {
- margin: 0.5em 0;
- }
-
- .operation .overview {
- margin-left: 1em;
- }
-
- .operation .primary, .operation .primary .unit {
- display: inline-block;
- }
-
- .operation .unit {
- margin-left: 0.15em;
- }
-
- .operation .killboard:not(.expanded) {
- width: 100%;
- }
- }
-
- /* -------------------------------- Members -------------------------------- */
-
- #members-list {
- list-style: none;
- margin: 1em 0 0.5em 0;
- padding: 0;
- column-count: 2;
- }
-
- #members-list li {
- margin-bottom: 0.5em;
- }
-
- #members-list a:hover {
- text-decoration: none;
- }
-
- #members-list img {
- width: 48px;
- height: 48px;
- vertical-align: middle;
- border-width: 1px;
- }
-
- #members-list span {
- margin-left: 0.5em;
- vertical-align: middle;
- }
-
- #members-list em {
- font-size: 90%;
- }
-
- #members-list em::before {
- content: ", ";
- }
|