public/scifi.css

   1 :root {
   2     --border: #1c7282;
   3     --page-bg: #061619;
   4     --green-bg: #193818;
   5     --green-border: #32821c;
   6 }
   7
   8 input {
   9     outline: none;
  10 }
  11
  12 body {
  13     background-color: var(--page-bg);
  14     color: #fff;
  15     margin: 50px auto 20px;
  16     width: 1024px;
  17     font-family: 'Roboto Condensed', sans-serif;
  18     font-weight: normal;
  19     font-size: 16px;
  20     background-image: url('/assets/bg/green_nebula_4.png');
  21     background-blend-mode: soft-light;
  22 }
  23 hr {
  24     border-color: var(--border);
  25     margin-bottom: 1.2rem;
  26 }
  27
  28 h1, h2, h3 {
  29     text-transform: uppercase;
  30     font-weight: 300;
  31     line-height: 2.2rem;
  32     border: solid 0 var(--border);
  33     border-left-width: 6px;
  34     border-bottom-width: 2px;
  35     padding-left: 10px;
  36     margin-top: 0;
  37     color :#6ac9db;
  38     text-shadow: 0 0 2px #6ac9db;
  39 }
  40 h1 {
  41     font-size: 2.2rem;
  42 }
  43 h2 {
  44     font-size: 1.7rem;
  45 }
  46 h3 {
  47     font-size: 1.3rem;
  48 }
  49 table {
  50     width: 100%;
  51     margin-bottom: 2rem;
  52     border-spacing: 0;
  53     border: solid 1px var(--border);
  54 }
  55 tr:nth-child(odd) td, tr:nth-child(odd) th {
  56     background-color: #0d2329;
  57 }
  58 th, td {
  59     padding: 0.5rem;
  60 }
  61 p, form, ul, ol {
  62     line-height: 1.3rem;
  63     margin: 0 2rem 2rem 2rem;
  64     flex: inherit;
  65 }
  66
  67 label {
  68     font-weight: bold;
  69     margin-right: 5px;
  70 }
  71
  72 button, .btn {
  73     border: solid 1px var(--border);
  74     background-color: #183238;
  75     color: #fff;
  76     font-size: 0.8rem;
  77     cursor: pointer;
  78     padding: 5px 5px 5px 25px;
  79     text-transform: uppercase;
  80     text-align: center;
  81     font-weight: bold;
  82     min-width: 150px;
  83 }
  84 button::after, .btn::after {
  85     content: '\27EB';
  86     float: right;
  87     color: var(--border);
  88 }
  89 button.danger, .btn.danger {
  90     background-color: #381818;
  91     border-color: #821c1c;
  92 }
  93 button.danger::after, .btn.danger::after {
  94     color: #821c1c
  95 }
  96 button.success, .btn.success {
  97     background-color: var(--green-bg);
  98     border-color: var(--green-border);
  99 }
 100 button.success::after, .btn.success::after{
 101     color: #32821c;
 102 }
 103 button:active, .btn:active, button:hover, .btn:hover {
 104     background-color: #1a444c;
 105 }
 106 button.success:active, .btn.success:active, button.success:hover, .btn.success:hover {
 107     background-color: #1e4c1a;
 108 }
 109
 110 input[type="text"], input[type="password"], input[type="number"] {
 111     border: solid 1px var(--border);
 112     background-color: #183238;
 113     color: #fff;
 114     font-size: 0.8rem;
 115     cursor: pointer;
 116     min-width: 120px;
 117     padding: 5px;
 118 }
 119
 120 a {
 121     font-weight: bold;
 122     color: #fff;
 123     text-decoration: none;
 124 }
 125 a::before {
 126     content: '\27EA';
 127 }
 128 a::after {
 129     content: '\27EB';
 130 }
 131 footer {
 132     text-align: center;
 133     border-top: solid 1px var(--border);
 134     padding-top: 1rem;
 135     margin-top: 2rem;
 136 }
 137
 138 .nav {
 139     padding: 0;
 140     margin: 0;
 141 }
 142 .nav li {
 143     list-style: none;
 144 }
 145 .nav li a {
 146     display: block;
 147     padding: 10px 25px;
 148 }
 149 .nav li a:hover {
 150     background-color: #0d2329;
 151 }
 152 .nav li a::before {
 153     content: '';
 154 }
 155 .nav li a::after {
 156     float: right;
 157 }
 158
 159 /** Grid Stuff **/
 160 .row {
 161     display: flex;
 162 }
 163 .col {
 164     flex-grow: 1;
 165     flex-basis: 50%;
 166     margin-right: 5rem;
 167 }
 168 .col:last-child {
 169     margin-right: 0;
 170 }
 171 .col p {
 172     margin-right: 0;
 173 }
 174
 175 /** Utility **/
 176 .right {
 177     float: right;
 178 }
 179 .left {
 180     float: left;
 181 }
 182 .clear {
 183     clear: both;
 184 }
 185 .hidden {
 186     display: none;
 187 }
 188 .text-right {
 189     text-align: right;
 190 }
 191 .text-left {
 192     text-align: left;
 193 }
 194 .text-center {
 195     text-align: center;
 196 }
 197
 198 /** CUSTOMIZATIONS **/
 199 form > div {
 200     margin-bottom: 1rem;
 201 }
 202 .sidebar {
 203     flex-basis: 100px;
 204 }
 205 .pane {
 206     background-color: var(--page-bg);
 207     padding: 1rem;
 208     --aug-border-all: 1px;
 209     --aug-border-bg: var(--border);
 210 }
 211 .nav {
 212     margin-bottom: 1rem;
 213 }
 214 #main {
 215     background-color: var(--page-bg);
 216     padding: 1rem;
 217     --aug-border-all: 1px;
 218     --aug-border-bg: var(--border);
 219 }
 220 #corp-ads {
 221     margin-top: 1rem;
 222 }