User:DupingToaster/common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/**
 * ==============================
 * 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: #fbeecb;
}

#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;
}