wynnbuilder-forked-for-changes/styles.css

549 lines
9.2 KiB
CSS
Raw Normal View History

2021-01-06 12:48:41 +00:00
.header {
padding: 2% 0% 0%;
text-align: center;
display: flex;
flex-direction: row;
justify-content: center;
}
2021-01-26 09:17:11 +00:00
.title{
text-align: center;
font-size: 150%;
}
.smalltitle{
text-align: center;
font-size: 125%;
margin-top: 10px;
margin-bottom: 4px;
}
2021-01-26 09:17:11 +00:00
.error {
color: red;
top: 30px;
font-size: 10px;
padding: 0;
margin: 0;
height: 5px;
font-family: 'Nunito', sans-serif;
white-space: nowrap;
}
.headericon {
/* JANK FIX IF CAN */
max-height: 48px;
max-width: 48px;
}
.headerleft {
display: inline-block;
2021-04-24 07:13:33 +00:00
width: 35%;
text-align: left;
}
.headercenter {
display: inline-block;
2021-04-24 07:13:33 +00:00
width: 30%;
text-align: center;
}
.headerright{
display: inline-block;
2021-04-24 07:13:33 +00:00
width: 35%;
text-align: right;
}
.iconlink {
position: relative;
left: 0%;
right: 0%;
height: 100%;
width: 100%;
2021-01-06 12:48:41 +00:00
}
2021-01-08 01:02:12 +00:00
.all {
font-family: 'Nunito',sans-serif;
font-weight: 700;
}
2021-01-10 21:01:59 +00:00
th, td {
2021-01-11 00:46:30 +00:00
padding-right: 10px;
2021-01-19 19:27:43 +00:00
padding-left: 10px;
2021-01-10 21:01:59 +00:00
}
.nomargin {
padding: 0px;
2021-01-19 20:23:14 +00:00
}
.nomarginp {
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
2021-01-19 20:23:14 +00:00
padding: 0px;
2021-01-18 20:23:37 +00:00
}
div {
padding: 0%;
}
2021-01-19 20:23:14 +00:00
.skillpoints{
padding: 0% 4% 2%;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 5px;
grid-auto-rows: minmax(60px, auto);
2021-01-06 12:48:41 +00:00
}
2021-01-11 12:09:58 +00:00
2021-01-19 20:23:14 +00:00
.id-edit2 {
padding: 0% 4% 2%;
display: grid;
2021-01-19 20:23:14 +00:00
grid-template-columns: repeat(4, 1fr);
gap: 5px;
grid-auto-rows: minmax(60px, auto);
}
2021-01-12 21:07:03 +00:00
.powder-specials{
padding: 0% 4% 2%;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 5px;
grid-auto-rows: minmax(60px, auto);
}
2021-04-24 07:13:33 +00:00
.equipment, .skillpoints, .header, .all, .nocolor, .crafted, .crafter{
2021-01-10 21:01:59 +00:00
background: #121516;
2021-01-09 23:30:05 +00:00
color: #aaa;
}
.hppeng{
color: #20c2b6;
}
.ferricles{
color: #5be553;
}
a.link{
color: #A5FDFF;
}
2021-01-06 12:48:41 +00:00
.center {
2021-01-07 22:44:52 +00:00
text-align: center;
position: relative;
2021-01-07 22:44:52 +00:00
}
2021-01-19 19:03:05 +00:00
table.center{
margin: 10px;
margin-left:auto;
margin-right:auto;
gap: 10px;
}
2021-01-08 01:02:12 +00:00
.right {
text-align: right;
2021-01-07 22:44:52 +00:00
}
2021-01-19 20:23:14 +00:00
.idLeft {
text-align: left;
margin-left: 2px;
}
.left{
2021-01-10 21:01:59 +00:00
margin: 2px 2%;
2021-01-07 22:44:52 +00:00
text-align: left;
2021-01-06 12:48:41 +00:00
}
2021-01-07 00:04:16 +00:00
2021-01-20 11:49:42 +00:00
.build-helmet, .build-chestplate, .build-leggings, .build-boots, .build-ring1, .build-ring2, .build-bracelet, .build-necklace, .build-weapon, .build-order, .build-overall, .build-melee-stats, .build-defense-stats, .spell-info, .set-info, .powder-special, .powder-special-stats, .int-info, .box {
2021-01-08 01:02:12 +00:00
color: #aaa;
2021-01-10 21:01:59 +00:00
background: #121516;
2021-01-09 23:30:05 +00:00
border: 3px solid #BCBCBC;
2021-01-07 08:11:54 +00:00
border-radius: 3px;
2021-01-09 23:35:32 +00:00
width: 96%;
2021-01-10 21:31:29 +00:00
}
2021-01-20 11:49:42 +00:00
.id-box {
color: #aaa;
background: #121516;
border: 3px solid #BCBCBC;
border-radius: 3px;
width: 96%;
margin: 1em 0px 0px 0px;
}
2021-01-19 20:23:14 +00:00
.crafter, .recipe-stats, .craft-stats, .ing-stats {
color: #aaa;
background: #121516;
border: 3px solid #BCBCBC;
border-radius: 3px;
}
2021-01-10 21:31:29 +00:00
.spell-info {
2021-01-10 21:01:59 +00:00
margin-bottom: 10px;
2021-01-08 01:02:12 +00:00
}
.itemcenter {
text-align: center;
margin-bottom: 16px;
}
.itemleft {
text-align: left;
margin-bottom: 16px;
}
.itemtable {
margin: 2px 2%;
2021-01-09 23:35:32 +00:00
width: 94%;
2021-01-08 01:02:12 +00:00
margin-bottom: 16px;
2021-01-19 20:23:14 +00:00
margin-left: auto;
margin-right: auto;
2021-01-08 01:02:12 +00:00
}
.headertable {
width: 98%;
margin-left: 1%;
margin-right: 1%;
}
2021-01-09 08:52:58 +00:00
.itemp, .damagep {
2021-01-08 01:02:12 +00:00
margin: 2px 2%;
padding: 0;
}
2021-01-20 11:49:42 +00:00
.powderLeft {
margin-right: 0px;
}
.powderRight {
margin-left: 0px;
}
.space {
margin-right: 5px;
}
2021-01-19 20:23:14 +00:00
.spaceleft{
margin-left: 5px;
}
2021-01-08 01:02:12 +00:00
2021-01-09 08:52:58 +00:00
.damageSubtitle {
text-align: center;
margin: 12px 2% 4px;
/*margin-bottom: 16px;*/
/*margin-top: 16px;*/
}
2021-01-08 01:02:12 +00:00
.positive {
color: #5f5;
/*text-shadow: 2px 2px 0 #153f15;*/
}
.negative {
color: #f55;
/*text-shadow: 2px 2px 0 #1f1515;*/
}
.Earth { color: #0a0; }
.Earth:before { content: "\2724" ' '; }
.Earth_powder { color: #0a0; }
.Earth_powder:before { content: "\2724"; }
2021-01-08 01:02:12 +00:00
.Thunder { color: #ff5; }
.Thunder:before { content: "\2726" ' '; }
.Thunder_powder { color: #ff5; }
.Thunder_powder:before { content: "\2726"; }
2021-01-08 01:02:12 +00:00
.Water { color: #5ff; }
.Water:before { content: "\2749" ' '; }
.Water_powder { color: #5ff; }
.Water_powder:before { content: "\2749"; }
2021-01-08 01:02:12 +00:00
.Fire { color: #f55; }
.Fire:before { content: "\2739" ' '; }
.Fire_powder { color: #f55; }
.Fire_powder:before { content: "\2739"; }
2021-01-08 01:02:12 +00:00
.Air { color: #fff; }
.Air:before { content: "\274b" ' '; }
.Air_powder { color: #fff; }
.Air_powder:before { content: "\274b"; }
2021-01-08 01:02:12 +00:00
.Neutral { color: #fa0; }
.Neutral:before { content: "\2724" ' '; }
.Damage { color: rgb(255, 198, 85)}
2021-01-08 01:14:56 +00:00
.Mana { color: #5ff;}
.Mana:after { content: "\273A"}
2021-01-08 01:14:56 +00:00
.Health {
color: #a00;
/*text-shadow: 2px 2px 0 #2a0000;*/
}
.Health:before {
content: "\2764" ' ';
}
2021-01-08 20:21:31 +00:00
.skplabel {
2021-01-08 20:21:31 +00:00
display: block;
margin: auto;
}
2021-01-09 23:30:05 +00:00
2021-01-19 20:23:14 +00:00
.idCenter {
text-align: center;
padding: 1em 0px 0px 0px;
position: relative;
display: flex;
}
.idWrap {
align-self: flex-end;
}
2021-01-09 23:30:05 +00:00
/*Scrollbar*/
/* width */
::-webkit-scrollbar {
width: 10px;
}
2021-01-19 19:03:05 +00:00
2021-01-10 21:01:59 +00:00
/* Track */
::-webkit-scrollbar-track {
2021-01-09 23:30:05 +00:00
box-shadow: inset 0 0 5px #BCBCBC;
border: #BCBCBC;
border-radius: 5px;
2021-01-10 21:01:59 +00:00
}
/* Handle */
::-webkit-scrollbar-thumb {
2021-01-09 23:30:05 +00:00
background: #aaa;
border-radius: 10px;
2021-01-10 21:01:59 +00:00
}
2021-01-09 23:30:05 +00:00
2021-01-10 21:01:59 +00:00
/* Ugly Corner */
::-webkit-scrollbar-corner{
background: #110110;
}
2021-01-19 20:23:14 +00:00
.button-narrow {
background-color: #666;
border: 2px solid #444;
border-radius: 5px;
color: #ddd;
text-align: center;
text-decoration: none;
font-family: 'Nunito',sans-serif;
font-weight: 700;
font-size: 90%;
display: inline-block;
}
button {
background-color: #666;
border: 2px solid #444;
border-radius: 5px;
color: #ddd;
text-align: center;
text-decoration: none;
font-family: 'Nunito',sans-serif;
font-weight: 700;
font-size: 120%;
display: inline-block;
}
button:hover {
background-color: #556;
}
button:active {
background-color: #558;
box-shadow: 0 3px #666;
transform: translateY(1px);
}
2021-01-10 21:01:59 +00:00
input {
2021-01-19 19:03:05 +00:00
background-color: #666;
2021-01-10 21:01:59 +00:00
border: 2px solid #444;
border-radius: 5px;
color: #ddd;
text-align: center;
text-decoration: none;
font-family: 'Nunito',sans-serif;
font-weight: 700;
display: inline-block;
}
.small-input {
width: max(4vw,60px);
}
2021-01-10 21:01:59 +00:00
::placeholder{
color: #aaa;
2021-01-10 21:01:59 +00:00
}
/* Tier colors tier colors */
.none {
color: #aaa;
}
.lore {
color: #555;
}
2021-01-10 21:01:59 +00:00
.Normal{
color: #fff;
}
.Unique{
color:#ff5;
}
.Rare{
color:#f5f;
}
.Legendary{
color:#5ff;
}
.Fabled{
color:#f55;
}
.Mythic{
color:#a0a;
}
2021-01-19 20:23:14 +00:00
.Crafted {
color: #0aa;
}
.Custom {
color: #0aa;
}
2021-01-10 21:01:59 +00:00
.Set{
2021-01-10 21:31:29 +00:00
color:#5f5;
2021-01-10 21:01:59 +00:00
}
.restrict, .warning {
color: #ff8180;
}
button.toggleOn{
background-color:#0a0;
2021-01-19 19:03:05 +00:00
border: 3 px solid rgb(0, 70, 0);
}
button.toggleOn:hover {
background-color: #575;
}
.funnynumber {
background-image: linear-gradient(to left, #f5f, #a0a, #5ff, #5f5, #ff5, #fa0, #a00);
color: transparent;
-webkit-background-clip: text;
display: inline-block;
text-align: center;
2021-01-15 05:47:38 +00:00
}
.Star {
2021-01-18 01:29:23 +00:00
color:rgb(255, 198, 85);
}
.Star:after {
content: "\272B";
2021-01-18 01:29:23 +00:00
}
.externalBuffs {
width: 100%;
}
2021-01-18 20:23:37 +00:00
2021-01-19 20:23:14 +00:00
.T0 {
color: #555;
}
.T1 {
color: #ff5;
}
.T2 {
color: #f5f;
}
.T3 {
color: #5ff;
}
.T0-bracket {
color: #555;
}
.T1-bracket {
color: #fa0;
}
.T2-bracket {
color: #a0a;
}
.T3-bracket {
color: #0aa;
}
.hide-container-block, .hide-container-grid, .set-info-div, .fade-in {
animation-duration: 0.5s;
animation-name: fadeInFromNone;
animation-fill-mode: forwards;
}
@keyframes fadeInFromNone {
0% {
opacity: 0;
}
1% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.highlight {
color: #ff0;
background: #775;
}
.tooltip {
position: relative;
}
2021-01-20 17:10:27 +00:00
.tooltip .tooltiptext {
visibility: hidden;
color: #ddd;
background: #110110;
/*width: min(200%, 75vw);*/
display: inline-block;
padding: 0 min(2%,10px) 0 min(2%,10px);
2021-01-20 17:10:27 +00:00
text-align: center;
border: 1px solid #BCBCBC;
border-radius: 2px;
2021-01-20 17:10:27 +00:00
position: absolute;
z-index: 1;
}
.header-tooltip {
top: 100%;
left: -20%;
}
.ing-tooltip {
min-width: 240px;
border: 3px solid #BCBCBC !important;
border-radius: 10px !important;
top: 100%;
}
.spellcostcalc {
width: max(70%, 120px) !important;
font-size: 12px;
/*overflow-wrap: break-word !important;*/
border: 1.5px dotted #BCBCBC !important;
border-radius: 1px !important;
/*JANK*/
left: -40%;
top: 24px;
}
.def-tooltip {
width: max(70%, 100px) !important;
font-size: 12px;
border: 1.5px dotted #BCBCBC !important;
border-radius: 1px !important;
/*JANK*/
margin-top: 20px;
left: -30%;
}
.melee-tooltip {
width: max(80%, 150px) !important;
font-size: 12px;
border: 1.5px dotted #BCBCBC !important;
border-radius: 1px !important;
/*JANK*/
margin-top: 20px;
left: -10%;
}
.spell-tooltip {
width: max(80%, 150px) !important;
font-size: 12px;
border: 1.5px dotted #BCBCBC !important;
border-radius: 1px !important;
/*JANK*/
margin-top: 20px;
left: -10%;
}
.summary-tooltip {
left: 10% !important;
}
.recipe {
z-index: 1;
}
2021-01-20 17:10:27 +00:00
.tooltip:hover .tooltiptext {
visibility: visible;
}
.bodydiv{
height: 100vh;
}
.atlas{
height: 48px;
width: 48px;
}