|
|
| Line 1: |
Line 1: |
| /**
| |
| * ==============================
| |
| * 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;
| |
| }
| |
|
| |
| .tt-gr { color: #54fb53; }
| |
| .tt-aq { color: #55faf4; }
| |
| /* 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 */
| |
| }
| |
