Jump to content

The wiki is in the process of updating to the latest major game changes. Any contributions are appreciated!
Start here to learn how to edit and join our Discord server to make suggestions.

User:Sur/vector.css

From The Deadlock Wiki
Revision as of 18:16, 22 September 2024 by Sur (talk | contribs) (testing hover remove again)

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.
.stat-infobox {
    width: 175px;
    height: 150px;
    background-color: #f0f0f0;
    border-radius: 10px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px; /* Add space below to prevent overlap */
}

.stat-infobox-hover {
    display: block; /* Ensure always visible */
    position: absolute;
    top: 0;
    left: 175px; /* Ensure it's offset by the infobox's width */
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 15px;
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 100; /* Ensure it's on top of other elements */
}

.stat-infobox-table {
    width: 100%;
    border-collapse: separate;
    margin-top: 10px;
}

.stat-infobox-table th,
.stat-infobox-table td {
    padding: 5px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.08);
    border: 1px solid black;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    max-width: 320px;
    font-family: 'Retail Demo', sans-serif;
}

.stat-infobox-table th:hover,
.stat-infobox-table td:hover {
    overflow: visible;
    text-overflow: clip;
    background-color: rgba(0, 0, 0, 0.4);
}

.stat-infobox-table td::before,
.stat-infobox-table th::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.08);
    mix-blend-mode: multiply;
}

.stat-infobox-table th:first-child,
.stat-infobox-table td:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.stat-infobox-table th:last-child,
.stat-infobox-table td:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.stat-infobox-table .darker {
    background-color: rgba(0, 0, 0, 0.25);
}