|
|
| 第330行： |
第330行： |
| font-weight: bold; | | font-weight: bold; |
| } | | } |
|
| |
| /* 静态 Tooltip */
| |
| .tooltip-wrapper {
| |
| position: relative;
| |
| display: inline-block;
| |
| cursor: help;
| |
| }
| |
|
| |
| .tooltip-content-lu { /* 左上 */
| |
| visibility: hidden;
| |
| background-color: #150d0a;
| |
| border: 1px solid #7c502e;
| |
| padding: 3px;
| |
| border-radius: 4px;
| |
| box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
| |
| position: absolute;
| |
| z-index: 1000;
| |
| bottom: 100%;
| |
| left: 0%;
| |
| transform: translateX(-100%);
| |
| white-space: nowrap;
| |
| }
| |
|
| |
| .tooltip-content-uc { /* 上中 */
| |
| visibility: hidden;
| |
| background-color: #150d0a;
| |
| border: 1px solid #7c502e;
| |
| padding: 3px;
| |
| border-radius: 4px;
| |
| box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
| |
| position: absolute;
| |
| z-index: 1000;
| |
| bottom: 100%;
| |
| left: 50%;
| |
| transform: translateX(-50%);
| |
| white-space: nowrap;
| |
| }
| |
|
| |
| .tooltip-content-ru { /* 右上 */
| |
| visibility: hidden;
| |
| background-color: #150d0a;
| |
| border: 1px solid #7c502e;
| |
| padding: 3px;
| |
| border-radius: 4px;
| |
| box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
| |
| position: absolute;
| |
| z-index: 1000;
| |
| bottom: 100%;
| |
| left: 100%;
| |
| white-space: nowrap;
| |
| }
| |
|
| |
| .tooltip-content-rc { /* 右中 */
| |
| visibility: hidden;
| |
| background-color: #150d0a;
| |
| border: 1px solid #7c502e;
| |
| padding: 3px;
| |
| border-radius: 4px;
| |
| box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
| |
| position: absolute;
| |
| z-index: 1000;
| |
| bottom: 50%;
| |
| left: 100%;
| |
| transform: translateY(50%);
| |
| white-space: nowrap;
| |
| }
| |
|
| |
| .tooltip-content-rb { /* 右下 */
| |
| visibility: hidden;
| |
| background-color: #150d0a;
| |
| border: 1px solid #7c502e;
| |
| padding: 3px;
| |
| border-radius: 4px;
| |
| box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
| |
| position: absolute;
| |
| z-index: 1000;
| |
| bottom: 0%;
| |
| left: 100%;
| |
| transform: translateY(100%);
| |
| white-space: nowrap;
| |
| }
| |
|
| |
| .tooltip-content-bc { /* 下中 */
| |
| visibility: hidden;
| |
| background-color: #150d0a;
| |
| border: 1px solid #7c502e;
| |
| padding: 3px;
| |
| border-radius: 4px;
| |
| box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
| |
| position: absolute;
| |
| z-index: 1000;
| |
| bottom: 0%;
| |
| left: 50%;
| |
| transform: translate(-50%,100%);
| |
| white-space: nowrap;
| |
| }
| |
|
| |
| .tooltip-content-lb { /* 左下 */
| |
| visibility: hidden;
| |
| background-color: #150d0a;
| |
| border: 1px solid #7c502e;
| |
| padding: 3px;
| |
| border-radius: 4px;
| |
| box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
| |
| position: absolute;
| |
| z-index: 1000;
| |
| bottom: 0%;
| |
| left: 0%;
| |
| transform: translate(-100%,100%);
| |
| white-space: nowrap;
| |
| }
| |
|
| |
| .tooltip-content-lc { /* 左中 */
| |
| visibility: hidden;
| |
| background-color: #150d0a;
| |
| border: 1px solid #7c502e;
| |
| padding: 3px;
| |
| border-radius: 4px;
| |
| box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
| |
| position: absolute;
| |
| z-index: 1000;
| |
| bottom: 50%;
| |
| left: 0%;
| |
| transform: translate(-100%,50%);
| |
| white-space: nowrap;
| |
| }
| |
|
| |
| .tooltip-content-cc { /* 中中 */
| |
| visibility: hidden;
| |
| background-color: #150d0a;
| |
| border: 1px solid #7c502e;
| |
| padding: 3px;
| |
| border-radius: 4px;
| |
| box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
| |
| position: absolute;
| |
| z-index: 1000;
| |
| bottom: 50%;
| |
| left: 50%;
| |
| transform: translate(-50%,50%);
| |
| white-space: nowrap;
| |
| }
| |
|
| |
| .tooltip-wrapper:hover .tooltip-content-lu { visibility: visible; }
| |
| .tooltip-wrapper:hover .tooltip-content-uc { visibility: visible; }
| |
| .tooltip-wrapper:hover .tooltip-content-ru { visibility: visible; }
| |
| .tooltip-wrapper:hover .tooltip-content-rc { visibility: visible; }
| |
| .tooltip-wrapper:hover .tooltip-content-rb { visibility: visible; }
| |
| .tooltip-wrapper:hover .tooltip-content-bc { visibility: visible; }
| |
| .tooltip-wrapper:hover .tooltip-content-lb { visibility: visible; }
| |
| .tooltip-wrapper:hover .tooltip-content-lc { visibility: visible; }
| |
| .tooltip-wrapper:hover .tooltip-content-cc { visibility: visible; }
| |