src/public/css/ui.css

   1 html {
   2     background-repeat: no-repeat;
   3     background-size: 100% 100%;
   4     height: 100%;
   5     padding: 0;
   6     margin: 0;
   7 }
   8
   9 body {
  10     width: 100%;
  11     height: 100%;
  12     margin: 0;
  13     padding: 0;
  14     background-repeat: no-repeat;
  15     background-attachment: fixed;
  16     font-size: 16px;
  17 }
  18 nav ul li {
  19     text-indent: 0;
  20 }
  21 .brand .badge {
  22     font-size: 0.9rem;
  23 }
  24 .navbar-brand {
  25     background-image: url('../assets/logo.png');
  26     background-repeat: no-repeat;
  27     background-position: right bottom;
  28     background-size: contain;
  29     padding-right: 60px;
  30     border-bottom: 5px solid #41403e;
  31     border-bottom-left-radius: 15px 3px;
  32     border-bottom-right-radius: 15px 5px;
  33     padding-bottom: 0.1rem;
  34 }
  35 .form-group {
  36     position: relative;
  37 }
  38 .password-toggle {
  39     position: absolute;
  40     right: 20px;
  41     bottom: 20px;
  42 }
  43 .collapsible label {
  44     text-align: left;
  45 }
  46 .collapsible .collapsible-body {
  47     color: #6b6b6b;
  48 }
  49 .cta {
  50     text-decoration: none;
  51     display: inline-block;
  52     background-image: none;
  53     background-color: #7289da;
  54     color: #fff !important;
  55     line-height: 32px;
  56 }
  57 .cta:visited {
  58     color: #fff;
  59 }
  60 .cta:hover {
  61     background-color: #596ebb;
  62 }
  63 .cta img {
  64     width: 32px;
  65     height: 32px;
  66     float: left;
  67     margin-right: 5px;
  68 }
  69 #viewport {
  70     background: none;
  71     border: none;
  72     max-width: 90%;
  73     box-shadow: none;
  74 }
  75
  76 button.small {
  77     font-size: 0.8rem;
  78     line-height: 0.8rem;
  79 }
  80
  81 .text-center {
  82     text-align: center;
  83 }
  84 .text-right {
  85     text-align: right;
  86 }
  87
  88 .log {
  89     overflow: auto;
  90     background-color: #fff;
  91 }
  92 #info-log {
  93     height: 200px;
  94 }
  95 #action-log {
  96     margin: 0.5rem auto;
  97     width: 100%;
  98     min-height: 70px;
  99     text-align: center;
 100 }
 101
 102 .hidden {
 103     display: none;
 104 }
 105
 106 .main {
 107     width: 55%;
 108     float: left;
 109     margin-left: 5%;
 110 }
 111 .panel {
 112     background-color: #fff;
 113     margin: 10px;
 114 }
 115 .panel .card-header {
 116     text-transform: uppercase;
 117 }
 118 .progress {
 119     width: 70%;
 120 }
 121 .progress .progress-bar {
 122     height: 100%;
 123     color: #000;
 124 }
 125 .progress-bar-wrapper {
 126   display: inline-block !important;
 127   width: 70%;
 128 }
 129
 130 #player-stats .card-header {
 131     text-align: center;
 132 }
 133 #player-stats .legend, #inventory .legend {
 134     display: inline-block;
 135     width: 72px;
 136     font-weight: bold;
 137     text-transform: uppercase;
 138     cursor: default;
 139         line-height: 1rem;
 140 }
 141 #player-stats img.legend {
 142     width: 20px;
 143     height: 20px;
 144     margin-right: 15px;
 145 }
 146 .stat-icon {
 147     background-repeat: no-repeat;
 148     background-size: contain;
 149     padding-left: 25px;
 150 }
 151 .currency-section {
 152     margin: 20px 0;
 153 }
 154 #signup-modal {
 155     background: rgba(0, 0, 0, 0.6);
 156 }
 157 /** STAT ICONS **/
 158 .stat-icon.steel {
 159     background-image: url('./assets/icons/money-bag.png');
 160 }
 161 .stat-icon.STA {
 162     background-image: url('/assets/icons/stamina.png');
 163 }
 164 .stat-icon.HIT {
 165     background-image: url('/assets/icons/hp.png');
 166 }
 167 .stat-icon.EXP {
 168     background-image: url('/assets/icons/exp.png');
 169 }
 170 .stat-icon.POW {
 171     background-image: url('/assets/icons/pow.png');
 172 }
 173 .stat-icon.ZEST {
 174     background-image: url('/assets/icons/zest.png');
 175 }
 176 .stat-icon.WOOSH {
 177     background-image: url('/assets/icons/woosh.png');
 178 }
 179 .stat-icon.AHA {
 180     background-image: url('/assets/icons/quirk.png');
 181 }
 182 .stat-icon.LUCK {
 183     background-image: url('/assets/icons/luck.png');
 184 }
 185 .stat-icon.WOW {
 186     background-image: url('/assets/icons/wow.png');
 187 }
 188 #actions {
 189     margin-top: 20px;
 190     text-align: center;
 191 }
 192 .monster-variant {
 193     font-weight: bold;
 194     color: #a7342d;
 195 }
 196 #main-info-section {
 197         margin-bottom: 1rem;
 198 }
 199 #main-info-section .tab-pane {
 200         min-height: 40vh;
 201         overflow: auto;
 202 }
 203 #inventory .item {
 204     width: 64px;
 205     height: 64px;
 206     display: inline-block;
 207     border: solid 1px #aaa;
 208     overflow: hidden;
 209     text-align: center;
 210     color: #aaa;
 211     font-size: 0.8rem;
 212     padding-top: 5px;
 213     background-color: #fff;
 214 }
 215
 216 #inventory .desc {
 217     margin-bottom: 15px;
 218 }
 219
 220 #inventory .item[data-index] {
 221     border-color: #8a8a8a;
 222     cursor: pointer;
 223 }
 224
 225 #inventory .item[data-index].selected {
 226     border-color: #000;
 227     color: #000;
 228 }
 229
 230 .stat-increase {
 231     margin-left: 3px;
 232     cursor: pointer;
 233 }
 234
 235 .stat-increase:active {
 236     position: relative;
 237     top: 1px;
 238 }
 239
 240 #quest-list li::before {
 241     content: '';
 242 }
 243 #quest-list .drop-quest {
 244     cursor: pointer;
 245 }
 246 #chat-info-section .tab-pane {
 247     height: 200px;
 248     max-height: 200px;
 249 }
 250 .chat-message {
 251     font-size: 0.9rem;
 252 }
 253 #chat-message-container {
 254     overflow: auto;
 255     height: 150px;
 256 }
 257 .chat-message .avatar img {
 258     width: 16px;
 259     height: 16px;
 260     display: inline-block;
 261     position: relative;
 262     top: 4px;
 263 }
 264 .chat-message .from {
 265     color: #000;
 266 }
 267 .chat-message .message {
 268     color: #737373;
 269 }
 270 .chat-message .from::after {
 271     content: ': ';
 272 }
 273 #online-users .status-online {
 274     color: #0a0;
 275 }
 276 #online-users .status-away {
 277     color: #aa0;
 278 }
 279 /** SKY GRADIENTS
 280 https://codepen.io/Winday/pen/qrPLeY
 281 */
 282 .sky-gradient-00,
 283 .sky-gradient-24 {
 284     background-color: #00000c;
 285 }
 286
 287 .sky-gradient-01 {
 288     background-image: linear-gradient(to bottom, #020111 85%, #191621 100%);
 289 }
 290
 291 .sky-gradient-02 {
 292     background-image: linear-gradient(to bottom, #020111 60%, #20202c 100%);
 293 }
 294
 295 .sky-gradient-03 {
 296     background-image: linear-gradient(to bottom, #020111 10%, #3a3a52 100%);
 297 }
 298
 299 .sky-gradient-04 {
 300     background-image: linear-gradient(to bottom, #20202c 0%, #515175 100%);
 301 }
 302
 303 .sky-gradient-05 {
 304     background-image: linear-gradient(to bottom, #40405c 0%, #6f71aa 80%, #8a76ab 100%);
 305 }
 306
 307 .sky-gradient-06 {
 308     background-image: linear-gradient(to bottom, #4a4969 0%, #7072ab 50%, #cd82a0 100%);
 309 }
 310
 311 .sky-gradient-07 {
 312     background-image: linear-gradient(to bottom, #757abf 0%, #8583be 60%, #eab0d1 100%);
 313 }
 314
 315 .sky-gradient-08 {
 316     background-image: linear-gradient(to bottom, #82addb 0%, #ebb2b1 100%);
 317 }
 318
 319 .sky-gradient-09 {
 320     background-image: linear-gradient(to bottom, #94c5f8 1%, #a6e6ff 70%, #b1b5ea 100%);
 321 }
 322
 323 .sky-gradient-10 {
 324     background-image: linear-gradient(to bottom, #b7eaff 0%, #94dfff 100%);
 325 }
 326
 327 .sky-gradient-11 {
 328     background-image: linear-gradient(to bottom, #9be2fe 0%, #67d1fb 100%);
 329 }
 330
 331 .sky-gradient-12 {
 332     background-image: linear-gradient(to bottom, #90dffe 0%, #38a3d1 100%);
 333 }
 334
 335 .sky-gradient-13 {
 336     background-image: linear-gradient(to bottom, #57c1eb 0%, #246fa8 100%);
 337 }
 338
 339 .sky-gradient-14 {
 340     background-image: linear-gradient(to bottom, #2d91c2 0%, #1e528e 100%);
 341 }
 342
 343 .sky-gradient-15 {
 344     background-image: linear-gradient(to bottom, #2473ab 0%, #1e528e 70%, #5b7983 100%);
 345 }
 346
 347 .sky-gradient-16 {
 348     background-image: linear-gradient(to bottom, #1e528e 0%, #265889 50%, #9da671 100%);
 349 }
 350
 351 .sky-gradient-17 {
 352     background-image: linear-gradient(to bottom, #1e528e 0%, #728a7c 50%, #e9ce5d 100%);
 353 }
 354
 355 .sky-gradient-18 {
 356     background-image: linear-gradient(to bottom, #154277 0%, #576e71 30%, #e1c45e 70%, #b26339 100%);
 357 }
 358
 359 .sky-gradient-19 {
 360     background-image: linear-gradient(to bottom, #163C52 0%, #4F4F47 30%, #C5752D 60%, #B7490F 80%, #2F1107 100%);
 361 }
 362
 363 .sky-gradient-20 {
 364     background-image: linear-gradient(to bottom, #071B26 0%, #071B26 30%, #8A3B12 80%, #240E03 100%);
 365 }
 366
 367 .sky-gradient-21 {
 368     background-image: linear-gradient(to bottom, #010A10 30%, #59230B 80%, #2F1107 100%);
 369 }
 370
 371 .sky-gradient-22 {
 372     background-image: linear-gradient(to bottom, #090401 50%, #4B1D06 100%);
 373 }
 374
 375 .sky-gradient-23 {
 376     background-image: linear-gradient(to bottom, #00000c 80%, #150800 100%);
 377 }
 378
 379 /** progress button **/
 380 div.btn.bar {
 381     background-image: url('./assets/progress-bar-bg.png');
 382     background-size: 0% 100%;
 383     background-position:left top;
 384     background-repeat: no-repeat;
 385 }
 386 div.btn.bar:hover {
 387     background-color: transparent;
 388     color: var(--primary);
 389 }
 390 .resource-trigger[data-resource="fish"] {
 391     cursor: url('./assets//icons/fishing_rod.png'), pointer !important;
 392 }
 393
 394