public/scifi.css

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