|
|
| (72 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| .stat-box-hover { | | .icon { |
| display: none;
| | filter: invert(0%); |
| position: absolute;
| |
| top: 0;
| |
| left: 175px; /* This is the default for larger screens */
| |
| background-color: #fff;
| |
| border: 1px solid #ccc;
| |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
| |
| padding: 10px;
| |
| transition: opacity 0.3s ease, transform 0.3s ease;
| |
| border-radius: 15px;
| |
| z-index: 1;
| |
| max-width: 250px; /* Set a maximum width to ensure it doesn't expand too much */
| |
| } | | } |
|
| |
|
| .stat-box:hover .stat-box-hover {
| | @media (prefers-color-scheme: dark) { |
| display: block;
| | .icon { |
| opacity: 1;
| | filter: invert(100%); |
| transform: translateX(0);
| | } |
| }
| |
| | |
| @media (max-width: 768px) { | |
| .stat-box-hover {
| |
| left: 140px; /* Adjust the left position for smaller screens */
| |
| font-size: 14px;
| |
| max-width: 200px; /* Slightly smaller max width */
| |
| }
| |
| }
| |
| | |
| @media (max-width: 480px) {
| |
| .stat-box-hover {
| |
| left: 100px; /* Further reduce the left position for very small screens */
| |
| font-size: 12px;
| |
| padding: 8px;
| |
| max-width: 180px; /* Smaller max width for very small screens */
| |
| }
| |
| } | | } |
.icon {
filter: invert(0%);
}
@media (prefers-color-scheme: dark) {
.icon {
filter: invert(100%);
}
}