greggy/lara-schach-live
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Eval-Bar: Hilfslinien (±1..±7) mit mix-blend-mode, Null-Linie 4px, Füllbalken dunkler

Browse Source
This commit is contained in:
Martin
2026-05-25 21:21:36 +02:00
parent 79ab97da6e
commit b3d43e37b8
2 changed files with 38 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
index.html
View File

@@ -34,6 +34,23 @@
<div id="board"></div> <div id="board"></div>
<div id="eval-bar-container"> <div id="eval-bar-container">
<div id="eval-bar"> <div id="eval-bar">
<div id="eval-bar-lines">
<span class="eval-line"></span>
<span class="eval-line"></span>
<span class="eval-line"></span>
<span class="eval-line"></span>
<span class="eval-line"></span>
<span class="eval-line"></span>
<span class="eval-line"></span>
<span class="eval-line eval-line-center"></span>
<span class="eval-line"></span>
<span class="eval-line"></span>
<span class="eval-line"></span>
<span class="eval-line"></span>
<span class="eval-line"></span>
<span class="eval-line"></span>
<span class="eval-line"></span>
</div>
<div id="eval-bar-fill"></div> <div id="eval-bar-fill"></div>
<div id="eval-bar-marker"></div> <div id="eval-bar-marker"></div>
</div> </div>

23
style.css
View File

@@ -162,7 +162,7 @@ header h1 {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
background: linear-gradient(to top, #f0f0f0 0%, #d0d0d0 100%); background: linear-gradient(to top, #b0b0b0 0%, #909090 100%);
transition: height 0.3s ease; transition: height 0.3s ease;
border-radius: 0 0 7px 7px; border-radius: 0 0 7px 7px;
height: 50%; height: 50%;
@@ -174,10 +174,29 @@ header h1 {
height: 2px; height: 2px;
background: #000; background: #000;
transition: top 0.3s ease; transition: top 0.3s ease;
z-index: 2; z-index: 3;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
top: 50%; top: 50%;
} }
#eval-bar-lines {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.eval-line {
height: 1px;
background: #eee;
mix-blend-mode: difference;
}
.eval-line-center {
height: 4px;
background: #fff;
mix-blend-mode: difference;
}
#eval-info { #eval-info {
display: flex; display: flex;
flex-direction: column; flex-direction: column;