project event dots: pin above bar, high contrast
This commit is contained in:
@@ -638,16 +638,18 @@
|
|||||||
/* Project bar event dots + click zone */
|
/* Project bar event dots + click zone */
|
||||||
.tl-project-evt-dot {
|
.tl-project-evt-dot {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 9px; height: 9px;
|
width: 11px; height: 11px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
top: 50%; transform: translate(-50%, -50%);
|
top: -6px; /* sticks above the bar */
|
||||||
|
transform: translateX(-50%);
|
||||||
z-index: 3; cursor: pointer;
|
z-index: 3; cursor: pointer;
|
||||||
border: 1.5px solid rgba(23,21,19,.7);
|
border: 2px solid var(--void);
|
||||||
|
box-shadow: 0 1px 4px rgba(0,0,0,.6);
|
||||||
transition: transform .1s;
|
transition: transform .1s;
|
||||||
}
|
}
|
||||||
.tl-project-evt-dot.light { background: var(--brass); }
|
.tl-project-evt-dot.light { background: var(--paper); border-color: var(--brass); }
|
||||||
.tl-project-evt-dot.dark { background: var(--rust); }
|
.tl-project-evt-dot.dark { background: var(--rust); border-color: var(--void); }
|
||||||
.tl-project-evt-dot:hover { transform: translate(-50%, -50%) scale(1.5); }
|
.tl-project-evt-dot:hover { transform: translateX(-50%) scale(1.4); }
|
||||||
.tl-bar-add-overlay {
|
.tl-bar-add-overlay {
|
||||||
position: absolute; top: 0; bottom: 0;
|
position: absolute; top: 0; bottom: 0;
|
||||||
z-index: 2; cursor: crosshair; background: transparent;
|
z-index: 2; cursor: crosshair; background: transparent;
|
||||||
@@ -848,7 +850,7 @@
|
|||||||
<div class="tl-sublabel">Projects</div>
|
<div class="tl-sublabel">Projects</div>
|
||||||
<div class="tl-rows">
|
<div class="tl-rows">
|
||||||
<template x-for="item in projects()" :key="item.id">
|
<template x-for="item in projects()" :key="item.id">
|
||||||
<div class="tl-row" style="height:26px">
|
<div class="tl-row" style="height:26px;overflow:visible">
|
||||||
<a
|
<a
|
||||||
class="tl-bar project-bar"
|
class="tl-bar project-bar"
|
||||||
:class="[item.mood || (game && game.mood), !item.end_date ? 'open-right' : '']"
|
:class="[item.mood || (game && game.mood), !item.end_date ? 'open-right' : '']"
|
||||||
|
|||||||
Reference in New Issue
Block a user