User:DupingToaster/common.css: Difference between revisions

/**
 * ==============================
 * Tooltips Gadget (Base Styles)
 * ==============================
 */
.main-tooltip {
    border: 1px solid #cac4b5;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    margin-bottom: 5px;
    padding: 2px 5px;
    background-color: #181818;
}

#tooltip-wrapper {
    padding: 3px 7px 2px 3px;
}

.has-redlinks,
.tooltip-loading,
.advanced-tooltip .tooltip-contents {
    display: none;
}

.tooltips-init-complete {
    cursor: help;
}

.main-tooltip img {
    vertical-align: middle;
}

/**
 * ==============================
 * Skill Tree Layout
 * ==============================
 */
.skill-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 15px; /* vertical spacing between rows */
}

/* Rows */
.row {
    display: flex;
    justify-content: center;
}
.row-1 { gap: 0; }
.row-2 { gap: 40px; }
.row-3 { gap: 20px; }
.wide-gap { gap: 80px; } /* For Trap tree rows */

/* Nodes */
.node {
    display: inline-block;
    width: 80px; /* keeps nodes aligned */
    text-align: center;
}

/**
 * ==============================
 * Tooltip Content Custom Styling
 * ==============================
 */
.tooltip-contents {
    background-color: #333;
    color: #fff;
    padding: 8px;
    border-radius: 6px;
    line-height: 1.4em;
    text-align: left;
    max-width: 220px;
}

/* Node Title Style */
.skill-title {
  font-weight: bold;
  color: #faa701; /* orange-yellow */
  text-shadow: 1px 1px 0px black; /* slight black outline */
}

/* Node Text Style (default green, but can have inline blue words) */
.skill-text {
  color: #00aa00; /* green */
}

.skill-text .blue {
  color: #0066ff; /* blue for special words */
}
/* tooltip colors for skill tree */
.tt-gr { color: #54fb53; }
.tt-aq { color: #55faf4; }