MediaWiki:Fandomdesktop.css

/* Originally this was at MediaWiki:Wikia.css, I just copied the stuff over here */

/* Load original stein font */
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed:wght@800&display=swap');
/* Load some font that I wanna use for the cults article */
@import url('https://fonts.googleapis.com/css?family=Cinzel&display=swap');

/* 
So I just pretty much copied this from the css sheet of stein.world.
I hope you don't mind, devs...
*/
.stein-text-border {
    font-family: 'Fira Sans Condensed';
    font-size: 16px;
    font-weight: 800;
    color: white;
    text-shadow: 1px 1px 0 #262119,
    -1px 1px 0 #262119,
    1px -1px 0 #262119,
    -1px -1px 0 #262119,
    0 1px 0 #262119,
    0 -1px 0 #262119,
    -1px 0 0 #262119,
    1px 0 0 #262119;
}

.stein-no-text-border {
    font-family: 'Fira Sans Condensed';
    font-size: 14px;
    font-weight: 700;
}

.item {
    position:relative; 
    cursor:pointer;
    display:inline-block;
}

.item .tooltip {
    /*opacity: 0;*/
    display:none;
    position:absolute;
    z-index:1;
}

.item:hover .tooltip {
    /*opacity: 1;*/
    display:inline-block;
}

.p-killer p {
    margin:0;
    padding:0;
}

.p-killer p + p {
    margin:0;
    padding:0;
}

/* Stuff for the interactive map */
.image {
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

.image-thumbnail {
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

.stein-text-border a {
    color: inherit;
}

/* Taking care of some custom cases for the steinbox */ 
.item .uncommon {
    color: #1A800D;
}

.item .rare {
    color: #1252B3;
}

.item .epic {
     color: #B814CC;
}

.item .legendary {
    color: #CC1414;
}

.stein-box .common {
    color: white;
    text-shadow: 1px 1px 0 #262119,
    -1px 1px 0 #262119,
    1px -1px 0 #262119,
    -1px -1px 0 #262119,
    0 1px 0 #262119,
    0 -1px 0 #262119,
    -1px 0 0 #262119,
    1px 0 0 #262119;
}

.stein-box .uncommon {
    color: #24b211;
    text-shadow: 1px 1px 0 #262119,
    -1px 1px 0 #262119,
    1px -1px 0 #262119,
    -1px -1px 0 #262119,
    0 1px 0 #262119,
    0 -1px 0 #262119,
    -1px 0 0 #262119,
    1px 0 0 #262119;
}

.stein-box .rare {
    color: #1669e5;
    text-shadow: 1px 1px 0 #262119,
    -1px 1px 0 #262119,
    1px -1px 0 #262119,
    -1px -1px 0 #262119,
    0 1px 0 #262119,
    0 -1px 0 #262119,
    -1px 0 0 #262119,
    1px 0 0 #262119;
}

.stein-box .epic {
    color: #e419ff;
    text-shadow: 1px 1px 0 #262119,
    -1px 1px 0 #262119,
    1px -1px 0 #262119,
    -1px -1px 0 #262119,
    0 1px 0 #262119,
    0 -1px 0 #262119,
    -1px 0 0 #262119,
    1px 0 0 #262119;
}

.stein-box .legendary {
    color: #ff1919;
    text-shadow: 1px 1px 0 #262119,
    -1px 1px 0 #262119,
    1px -1px 0 #262119,
    -1px -1px 0 #262119,
    0 1px 0 #262119,
    0 -1px 0 #262119,
    -1px 0 0 #262119,
    1px 0 0 #262119;
}

/* Update to the way the damage points work */
.stein-tooltip-item-damage-point {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    border: 2px solid #262119;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6);
    margin: 1px;
    box-sizing: content-box;
}

.stein-inventory-damage-point {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 2px;
    border: 2px solid #262119;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6);
    margin-top: 5px;
    position: absolute;
    z-index: 100;
    margin-left: -2px;
}

.stein-tooltip-item-damage-point-truedamage, .stein-inventory-damage-point-truedamage {
    background-color: #19ffcc;
}

.stein-tooltip-item-damage-point-physical, .stein-inventory-damage-point-physical {
    background-color: #b8b8b8;
}

.stein-tooltip-item-damage-point-fire, .stein-inventory-damage-point-fire {
    background-color: #ff6819;
}

.stein-tooltip-item-damage-point-water, .stein-inventory-damage-point-water {
    background-color: #1968ff;
}

.stein-tooltip-item-damage-point-earth, .stein-inventory-damage-point-earth {
    background-color: #68ff19;
}

.stein-tooltip-item-damage-point-holy, .stein-inventory-damage-point-holy {
    background-color: #ffec20;
}

.stein-tooltip-item-damage-point-death, .stein-inventory-damage-point-death {
    background-color: #454545;
}

.stein-tooltip-item-damage-point-soul, .stein-inventory-damage-point-soul {
    background-color: #ff19ff;
}

/* Changing some stuff for item tooltips */
.page-content p {
    font-weight: inherit;
}

/* having that setting on the default of auto (or hidden)
   messes with tooltips that leave tables for some reason */
.article-table-wrapper {
    overflow-x: inherit;
}

/* Playing around with dark/light theme stuff */
.theme-fandomdesktop-light .testtheme {
    color: white;
}
.theme-fandomdesktop-dark .testtheme {
    color: black;
}

/* Whoa, color */
/* Light mode */
.theme-fandomdesktop-dark .stein-box-colors {
    background: #bc9266;
    box-shadow: inset 0px 0px 0 3px rgba(255, 234, 169, 0.5);
    border: 4px solid rgb(38, 33, 25);
    border-top-color: rgb(38, 33, 25);
    border-left-color: rgb(38, 33, 25);
}

.theme-fandomdesktop-dark .stein-button-colors {
    background-color: #dbbb83;
    color: rgb(38, 33, 25);
    box-shadow: 0 0 0 3px rgb(38, 33, 25);
    border: 2px solid rgb(107, 81, 53, 0.4);
}

.theme-fandomdesktop-dark .stein-box-inner-color {
    background: #9a7753;
    color: #fff;
    box-shadow: 0 0 0 3px rgb(38, 33, 25);
    border: 2px solid rgba(38, 24, 8, 0.4);
}

.theme-fandomdesktop-dark .stats {
    color: #262119;
    background-color: #dbbb83;
    border: 2px solid #262119;
}

.theme-fandomdesktop-dark .item-box-colors {
    color: #262119;
    border: 2px solid #eddca0;
    box-shadow: 0px 0px 0 2px #262119;
}

/* Dark mode */
.theme-fandomdesktop-dark .stein-box-colors {
    background: #121212;
    box-shadow: inset 0px 0px 0 3px rgba(32, 32, 32, 0.5);
    border: 4px solid rgb(0, 0, 0);
    border-top-color: rgb(0, 0, 0);
    border-left-color: rgb(0, 0, 0);
}

.theme-fandomdesktop-dark .stein-button-colors {
    background-color: #dbbb83;
    color: rgb(38, 33, 25);
    box-shadow: 0 0 0 3px rgb(38, 33, 25);
    border: 2px solid rgb(107, 81, 53, 0.4);
}

.theme-fandomdesktop-dark .stein-box-inner-color {
    background: #9a7753;
    color: #fff;
    box-shadow: 0 0 0 3px rgb(38, 33, 25);
    border: 2px solid rgba(38, 24, 8, 0.4);
}

.theme-fandomdesktop-dark .stats {
    color: #262119;
    background-color: #dbbb83;
    border: 2px solid #262119;
}

.theme-fandomdesktop-dark .item-box-colors {
    color: #262119;
    border: 2px solid #eddca0;
    box-shadow: 0px 0px 0 2px #262119;
}