-
-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
170 additions
and
299 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,135 +1,127 @@ | ||
| html, body { | ||
| margin: 0; | ||
| padding: 0; | ||
| width: 100vw; | ||
| height: 100vh; | ||
| overflow: hidden; | ||
| .result-table { | ||
| max-height: 100% !important; /* override mini-css */ | ||
|
|
||
| font-size: 12px; | ||
| } | ||
|
|
||
| .result-table { | ||
| width: 100%; | ||
| border-collapse: collapse; | ||
| table-layout: auto; | ||
| overflow-x: hidden; | ||
| max-height: calc(100% - 100px); | ||
| height: calc(100% - 100px); | ||
| min-height: calc(100% - 100px); | ||
| overflow-y: hidden; | ||
| .result-table tr { | ||
| flex-wrap: nowrap !important; | ||
| } | ||
|
|
||
| table.result-table td, | ||
| table.result-table th { | ||
| padding: 5px; | ||
|
|
||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
|
|
||
| .result-table td, | ||
| .result-table th { | ||
| padding: 5px 2px; | ||
| border-spacing: 0; | ||
| white-space: normal; | ||
| word-wrap: break-word; | ||
| vertical-align: middle; | ||
| text-align: center; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| flex: 0 0 90px; | ||
|
|
||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| .result-table th{ | ||
| padding: 8px 2px; | ||
| .result-table td.thin, | ||
| .result-table th.thin { | ||
| flex: 0; | ||
| min-width: 30px; | ||
| } | ||
|
|
||
| .result-table th { | ||
| padding: 5px; | ||
| } | ||
|
|
||
| .result-table td { | ||
| position: relative; | ||
| position: relative; | ||
| } | ||
|
|
||
| .result-table tr, | ||
| .result-table td { | ||
| overflow: visible !important; | ||
| overflow: visible !important; | ||
| } | ||
|
|
||
|
|
||
| .cell-bold { | ||
| font-weight: bold; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| .cell-container { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| align-content: center; | ||
| text-align: center; | ||
| justify-content: center; | ||
| align-items: center; | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| align-content: center; | ||
| text-align: center; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .cell-border-left { | ||
| border-left: 1px solid; | ||
| border-left: 1px solid; | ||
| } | ||
|
|
||
| .group-div { | ||
| display: inline-flex; | ||
| justify-content: space-around; | ||
| align-items: center; | ||
| width: 36px; | ||
| display: inline-flex; | ||
| justify-content: space-around; | ||
| align-items: center; | ||
| width: 36px; | ||
| } | ||
|
|
||
| .group-score-green { | ||
| background-color: rgba(168, 224, 168, 0.45); | ||
| background-color: rgba(168, 224, 168, 0.45); | ||
| } | ||
|
|
||
| .group-score-red { | ||
| background-color: rgba(224, 173, 173, 0.34); | ||
| background-color: rgba(224, 173, 173, 0.34); | ||
| } | ||
|
|
||
| .result-div { | ||
| flex: 1; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| padding: 0; | ||
| margin: 0; | ||
| flex: 1; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| padding: 0; | ||
| margin: 0; | ||
| } | ||
|
|
||
| .result-half { | ||
| color: gray; | ||
| color: gray; | ||
| } | ||
|
|
||
| .result-zero { | ||
| color: red; | ||
| color: red; | ||
| } | ||
|
|
||
| .result-one { | ||
| color: green; | ||
| color: green; | ||
| } | ||
|
|
||
|
|
||
| .custom-tooltip { | ||
| visibility: hidden; | ||
| background-color: #555; | ||
| color: #fff; | ||
| text-align: center; | ||
| padding: 5px; | ||
| border-radius: 3px; | ||
| position: absolute; | ||
| z-index: 1000; | ||
| bottom: 100%; /* This keeps the tooltip above the cell */ | ||
| left: 50%; /* Start positioning from the center of the cell */ | ||
| transform: translateX(-50%); /* Shift the tooltip leftwards by half its width */ | ||
| opacity: 0; | ||
| transition: opacity 0.3s; | ||
| white-space: nowrap; /* Prevents the tooltip from wrapping into multiple lines */ | ||
| visibility: hidden; | ||
| background-color: #555; | ||
| color: #fff; | ||
| text-align: center; | ||
| padding: 5px; | ||
| border-radius: 3px; | ||
| position: absolute; | ||
| z-index: 1000; | ||
| bottom: 100%; /* This keeps the tooltip above the cell */ | ||
| left: 50%; /* Start positioning from the center of the cell */ | ||
| transform: translateX(-50%); /* Shift the tooltip leftwards by half its width */ | ||
| opacity: 0; | ||
| transition: opacity 0.3s; | ||
| white-space: nowrap; /* Prevents the tooltip from wrapping into multiple lines */ | ||
| } | ||
|
|
||
| .result-table td:hover .custom-tooltip { | ||
| visibility: visible; | ||
| opacity: 1; | ||
| visibility: visible; | ||
| opacity: 1; | ||
| } | ||
|
|
||
| .custom-tooltip::after { | ||
| content: ""; | ||
| position: absolute; | ||
| top: 100%; | ||
| left: 50%; | ||
| margin-left: -5px; | ||
| border-width: 5px; | ||
| border-style: solid; | ||
| border-color: #555 transparent transparent transparent; | ||
| content: ''; | ||
| position: absolute; | ||
| top: 100%; | ||
| left: 50%; | ||
| margin-left: -5px; | ||
| border-width: 5px; | ||
| border-style: solid; | ||
| border-color: #555 transparent transparent transparent; | ||
| } | ||
|
|
Oops, something went wrong.