440 lines
6.9 KiB
CSS
440 lines
6.9 KiB
CSS
html {
|
|
height: 100%;
|
|
}
|
|
|
|
* {
|
|
font-family: 'Nunito', sans-serif;
|
|
}
|
|
|
|
input::-webkit-calendar-picker-indicator {
|
|
display: none !important;
|
|
}
|
|
|
|
input {
|
|
-webkit-appearance : none;
|
|
border-radius : 0;
|
|
}
|
|
|
|
textarea, input { outline: none; }
|
|
|
|
body {
|
|
height: 100%;
|
|
overflow: hidden; /* makes the body non-scrollable (we will add scrolling to the sidebar and main content containers) */
|
|
margin: 0; /* removes default style */
|
|
display: flex; /* enables flex content for its children */
|
|
box-sizing: border-box;
|
|
font-family: 'Nunito', sans-serif;
|
|
}
|
|
|
|
/* Works on Firefox */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgb(30, 30, 30) rgb(45, 45, 45);
|
|
}
|
|
|
|
/* Works on Chrome, Edge, and Safari */
|
|
*::-webkit-scrollbar {
|
|
width: 5px;
|
|
}
|
|
|
|
*::-webkit-scrollbar-track {
|
|
background: rgb(45, 45, 45);
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb {
|
|
background-color: rgb(30, 30, 30);
|
|
}
|
|
|
|
.column {
|
|
height: 100%; /* allows both columns to span the full height of the browser window */
|
|
display: flex;
|
|
flex-direction: column; /* places the left and right headers above the bottom content */
|
|
}
|
|
|
|
#left { /* makes sure that content is not cut off in a smaller browser window */
|
|
flex-shrink: 1;
|
|
background-color: rgb(30, 30, 30);
|
|
}
|
|
|
|
#right {
|
|
flex-grow: 1;
|
|
background-color: rgb(40, 40, 40);
|
|
color: rgb(240, 240, 240);
|
|
padding: 2%;
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
img.item-icon {
|
|
padding: 0;
|
|
margin: 0;
|
|
border: none;
|
|
}
|
|
|
|
.bottom {
|
|
flex-grow: 1; /* ensures that the container will take up the full height of the parent container */
|
|
overflow-y: auto;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
table {
|
|
vertical-align: top;
|
|
}
|
|
|
|
.full-border, .box {
|
|
border: .3vw solid rgb(45, 45, 45);
|
|
}
|
|
|
|
.se-border {
|
|
border-left: .3vw solid rgb(45, 45, 45);
|
|
border-right: .3vw solid rgb(45, 45, 45);
|
|
}
|
|
|
|
td {
|
|
padding: 0;
|
|
margin: 0;
|
|
white-space: nowrap;
|
|
font-size: .8vw;
|
|
}
|
|
|
|
p {
|
|
padding: 0;
|
|
margin: 0;
|
|
padding-top: 1px;
|
|
padding-bottom: 1px;
|
|
}
|
|
|
|
input {
|
|
background-color: rgb(40, 40, 40);
|
|
border-top: .15vw solid rgb(25, 25, 25) !important;
|
|
border-left: .15vw solid rgb(25, 25, 25) !important;
|
|
border-bottom: .15vw solid rgb(45, 45, 45) !important;
|
|
border-right: .15vw solid rgb(45, 45, 45) !important;
|
|
box-sizing: border-box !important;
|
|
color: rgb(240, 240, 240);
|
|
min-width: 0;
|
|
min-height: 0;
|
|
font-size: .8vw;
|
|
box-sizing: none;
|
|
}
|
|
|
|
input.item-name {
|
|
text-align: center;
|
|
font-weight: bold;
|
|
width: 10vw;
|
|
height: 1.2vw;
|
|
}
|
|
|
|
input.search-field {
|
|
text-align: center;
|
|
font-weight: bold;
|
|
width: 9em;
|
|
}
|
|
|
|
.equipment-container {
|
|
background-color: rgb(30, 30, 30);
|
|
flex-direction: column;
|
|
display: inline-flex;
|
|
}
|
|
|
|
.all-equipment {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.weapon-container {
|
|
display: inline-flex;
|
|
background-color: rgb(30, 30, 30);
|
|
}
|
|
|
|
.skp-container {
|
|
width: 38vw;
|
|
height: 10vw;
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
background-color: rgb(30, 30, 30);
|
|
}
|
|
|
|
td.mono-font {
|
|
font-family: 'Courier New', Courier, monospace;
|
|
}
|
|
|
|
td.damage-size {
|
|
width: 5vw;
|
|
user-select: none;
|
|
}
|
|
|
|
.potency {
|
|
width: 36em;
|
|
user-select: none;
|
|
}
|
|
|
|
.skp-text {
|
|
width: 7.75em;
|
|
}
|
|
|
|
.skp-input {
|
|
width: 6vw;
|
|
height: 1.2vw;
|
|
text-align: center;
|
|
}
|
|
|
|
.center-screen {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.powder-input {
|
|
text-align: center;
|
|
font-family: 'Courier New', Courier, monospace;
|
|
font-weight: bold;
|
|
width: 10vw;
|
|
height: 1.2vw;
|
|
}
|
|
|
|
.skp-tooltip {
|
|
font-size: .6vw;
|
|
}
|
|
|
|
.spell-container {
|
|
display: inline-flex;
|
|
vertical-align: top;
|
|
background-color: rgb(30, 30, 30);
|
|
width: 18vw;
|
|
height: 24.5vw;
|
|
}
|
|
|
|
.draggable {
|
|
position: absolute !important;
|
|
z-index: 99;
|
|
}
|
|
|
|
.draggable-header {
|
|
cursor: move;
|
|
z-index: 10;
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
text-align: center;
|
|
}
|
|
p.Damage {
|
|
color: rgb(255, 198, 85)
|
|
}
|
|
|
|
.Set {
|
|
display: inline;
|
|
color: #5f5;
|
|
}
|
|
|
|
.Mana { color: #5ff;}
|
|
.Mana:after { content: "\273A"}
|
|
|
|
.left {
|
|
text-align: left;
|
|
}
|
|
|
|
.right {
|
|
text-align: right;
|
|
}
|
|
|
|
.center {
|
|
text-align: center;
|
|
}
|
|
|
|
.f-w {
|
|
width: 100%;
|
|
}
|
|
|
|
.warning {
|
|
color: red;
|
|
}
|
|
|
|
.shaded-table {
|
|
background-color: rgb(30, 30, 30);
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
|
|
border-bottom: 1px solid rgb(45, 45, 45)
|
|
}
|
|
|
|
.spacer-table {
|
|
padding: 8px;
|
|
}
|
|
|
|
.minimal-stats-container {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
vertical-align: top;
|
|
background-color: rgb(30, 30, 30);
|
|
width: 18vw;
|
|
height: 24.5vw;
|
|
}
|
|
|
|
.nDam {
|
|
color: #FFAA00;
|
|
}
|
|
|
|
.eDam, .Earth, .Earth_powder {
|
|
color: #00AA00;
|
|
}
|
|
|
|
.Earth:before, .Earth_powder:before { content: "\2724" ' '; }
|
|
|
|
.tDam, .Thunder, .Thunder_powder {
|
|
color: #FFFF55;
|
|
}
|
|
|
|
.Thunder:before, .Thunder_powder:before { content: "\2726" ' '; }
|
|
|
|
.wDam, .Water, .Water_powder {
|
|
color: #55FFFF
|
|
}
|
|
|
|
.Water:before, .Water_powder:before { content: "\2749" ' '; }
|
|
|
|
.fDam, .Fire, .Fire_powder {
|
|
color: #FF5555;
|
|
}
|
|
|
|
.Fire:before, .Fire_powder:before { content: "\2739" ' '; }
|
|
|
|
.aDam, .Air, .Air_powder {
|
|
color: #FFFFFF
|
|
}
|
|
|
|
.Air:before, .Air_powder:before { content: "\274b" ' '; }
|
|
|
|
.Neutral { color: #fa0; }
|
|
.Neutral:before { content: "\2724" ' '; }
|
|
.Damage { color: rgb(255, 198, 85)}
|
|
|
|
.Health {
|
|
color: #AA0000
|
|
}
|
|
|
|
.Health:before {
|
|
content: "\2764" ' ';
|
|
}
|
|
|
|
.Normal {
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.Unique {
|
|
color: #FFFF55;
|
|
}
|
|
|
|
.Rare {
|
|
color: #FF55FF;
|
|
}
|
|
|
|
.Legendary {
|
|
color: #55FFFF;
|
|
}
|
|
|
|
.Fabled {
|
|
color: #FF5555;
|
|
}
|
|
|
|
.Mythic {
|
|
color: #AA00AA
|
|
}
|
|
|
|
p.no-newline {
|
|
display: inline;
|
|
}
|
|
|
|
.clickable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.small-text {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.lvl {
|
|
color: #d4d4d4
|
|
}
|
|
|
|
.lvl:before {
|
|
content: "Lv. "
|
|
}
|
|
|
|
button {
|
|
background-color: rgb(30, 30, 30);
|
|
color: white;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.positive {
|
|
color: #5f5;
|
|
/*text-shadow: 2px 2px 0 #153f15;*/
|
|
}
|
|
|
|
.negative {
|
|
color: #f55;
|
|
/*text-shadow: 2px 2px 0 #1f1515;*/
|
|
}
|
|
|
|
.item-margin {
|
|
margin-top: .8vw;
|
|
margin-bottom: .8vw;
|
|
}
|
|
|
|
.item-tooltip {
|
|
width: 15rem;
|
|
background-color: rgb(30, 30, 30);
|
|
color: white;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.window-container {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
background-color: rgb(30, 30, 30);
|
|
color: white;
|
|
}
|
|
|
|
.window-header {
|
|
display: flex;
|
|
cursor: move;
|
|
background-color: rgb(45, 45, 45);
|
|
font-size: .8vw;
|
|
}
|
|
|
|
.search-result-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
flex-basis: 30vw;
|
|
max-width: 14.4vw;
|
|
}
|
|
|
|
.button-boost {
|
|
background-color: rgb(45, 45, 45);
|
|
width: 10rem;
|
|
border: 5px solid rgb(50, 50, 50)
|
|
}
|
|
|
|
button.toggleOn{
|
|
background-color:#0a0;
|
|
border: 3px solid rgb(0, 70, 0);
|
|
}
|
|
|
|
.damageSubtitle {
|
|
text-align: center;
|
|
}
|
|
|
|
.itemp {
|
|
font-size: .8vw;
|
|
}
|
|
/*
|
|
div:not(.item-tooltip) {
|
|
font-size: .8vw;
|
|
}*/
|