d2tools/res/style.css

/*

    Copyright (C) 2021 Hash Borgir

    This file is part of D2Modder

    Redistribution and use in source and binary forms, with
    or without modification, are permitted provided that the
    following conditions are met:

    * Redistributions of source code must retain the above
      copyright notice, this list of conditions and the
      following disclaimer.

    * Redistributions in binary form must reproduce the above
      copyright notice, this list of conditions and the
      following disclaimer in the documentation and/or other
      materials provided with the distribution.

    * This software must not be used for commercial purposes
    * without my consent. Any sales or commercial use are prohibited
    * without my express knowledge and consent.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY!

    THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND
    CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES,
    INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
    MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
    DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR
    CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
    SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT
    NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
    LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
    HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
    CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE
    OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
    SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

*/
@font-face {
    font-family: 'ExocetHeavy';
    src: url('/fonts/ExocetHeavy.eot'),
         url('/fonts/ExocetHeavy.eot?#iefix') format('embedded-opentype'),
         url('/fonts/ExocetHeavy.woff2') format('woff2'),
         url('/fonts/ExocetHeavy.woff') format('woff'),
         url('/fonts/ExocetHeavy.ttf') format('truetype'),
         url('/fonts/ExocetHeavy.svg#ExocetHeavy') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ExocetLight';
    src: url('/fonts/ExocetLight.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('/fonts/Lato-Regular.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

form input {
    width: 108px;
    padding: 5px;
    margin: 5px;
    text-align: center;
    border: 0;
    background: #eef;
}

.form-text,
.help {
    font-size: 0.9rem;
    color: #999;
}

.form-text {
    padding: 5px;
    color: black;
    display: none;
}

select,
input,
option {
    border: #ccc;
}

.col-2,
.col-3,
.col-4 {
    padding: 5px;
}

.container-top {
    border: 1px solid #ddd;
    margin: 30px auto;
    padding: 10px;
    background: #eee;
}

body {
    background: url(/img/bg.jpg);
    background-size: cover;
    background-attachment: fixed;
    font-family: Lato;
}

h1, h2, h3, h4, h5, h6, div > p {
    font-family: ExocetLight;
    color: #778;
    text-transform: uppercase;
}

#loading {
    margin-top: 40px;
    font-family: Tahoma !important;
}

.fa-question-circle {
    bottom: 0;
}

.form-group > div {
    margin: 5px 0;
}

.help {
    position: absolute;
    top: 0;
    right: 0;
    color: #ccc;
}

select {
    font-size: 18px;
    border: 1px solid #ccc;
    height: 34px;
    text-align: center;
}

#search {
    background: white !important;
}

select::-ms-expand {
    display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width: 0\0) {
    select {
        background: none\9;
        padding: 5px\9;
    }
}

option {
    -webkit-appearance: none;
    -moz-appearance: none;
}

.props input {
    margin: 15px 0;
}

.item {
    text-align: left;
    position: absolute;
    right: 282px;
}

.item_desc {
    height: 600px;
    width: 620px;
    position: absolute;
    left: -80px;
    top: -126px;
    text-align: center;
    padding: 10px;
    text-transform: uppercase;
}

.item_desc li {
    font-size: 14px;
    letter-spacing: -1px;
}

.item_desc span {
}

.item_stats {
    background: #222;
    min-height: 560px;
    max-width: 520px;
    margin: 0 auto;
    font-family: ExocetLight;
    padding: 10px;
}

.item_stats li {
    height: 20px;
}

ul,
li,
ul li {
    list-style-type: none;
    padding-inline-start: 0;
}

.debug {
    height: 800px;
}

pre {
    outline: 1px solid #ccc;
    padding: 5px;
    margin: 5px;
}

.string {
    color: green;
}

.number {
    color: darkorange;
}

.boolean {
    color: blue;
}

.null {
    color: magenta;
}

.key {
    color: red;
}

.statindex,
.stattype {
    color: #A59263;
    font-weight: bold;
    font-family: ExocetHeavy;
    font-size: 1.2em;
}

.statlvlreq {
    color: white;
}

/* COLOR classes */
/* Text Colors */
/* #FFA500   Crafted items */
/* #4169E1   Magic items */
/* #FFFF00   Rare items */
/* #A59263   Unique items */

.green {
    color: #00FF00; /* Set items */
}

.gold {
    color: #A59263; /* Unique items */
}

.orange {
    color: #FFA500; /* Crafted items */
}

.yellow {
    color: #FFFF00; /* Rare items */
}

.blue {
    color: #4169E1; /* Magic color */
}

@-webkit-keyframes psychedelic {
    0% {
        -webkit-filter: hue-rotate(0deg) saturate(2) invert(0);
    }
    50% {
        -webkit-filter: hue-rotate(360deg) saturate(2) invert(.25);
    }
    100% {
        -webkit-filter: hue-rotate(0deg) saturate(2) invert(0);
    }
}

.psychedelic {
    -webkit-animation: psychedelic linear 10s infinite;
    -moz-animation: psychedelic linear 10s infinite;
    -o-animation: psychedelic linear 10s infinite;
    animation: psychedelic linear 10s infinite;
}

.Doc-container > div {
    border: 1px solid #ccc;
    width: 800px;
    margin: 10px auto;
    background: #ddd;
    border-radius: 15px;
}

.Doc-container h1 {
    color: #785a12;
}

.Doc-container p {
    color: #A59263;
}

.translations-content-container * {
    font-family: Tahoma, Arial, sans-serif !important;
    font-weight: normal;
}

hr.style-four {
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
}

.act1 {
    border: 1px solid #ddd;
    background: #d0fffe;
}
.act2 {
    border: 1px solid #ddd;
    background: #fffddb;
}
.act3 {
    border: 1px solid #ddd;
    background: #e4ffde;
}
.act4 {
    border: 1px solid #ddd;
    background: #ffd3fd;
}
.act5 {
    border: 1px solid #ddd;
    background: #ffe7d3;
}