461 lines
9.2 KiB
CSS
461 lines
9.2 KiB
CSS
project-list-default {
|
||
display: block;
|
||
min-height: 100vh;
|
||
background: radial-gradient( ellipse at 40% 35%, #282b3c 0%, #000 70% );
|
||
color: #fff;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* ── Nav ─────────────────────────────────── */
|
||
|
||
.pld-nav {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 2rem;
|
||
height: 84px;
|
||
position: fixed;
|
||
overflow: visible;
|
||
width: 100vw;
|
||
|
||
}
|
||
|
||
/* Logo: wrapper = inner area (570×240 at 0.35x = 200×84).
|
||
Full image (1592×637 at 0.35x = 557×223) positioned so inner
|
||
area aligns with wrapper — decorative FX bleed outside. */
|
||
.pld-logo-wrap {
|
||
position: relative;
|
||
width: 200px;
|
||
height: 84px;
|
||
flex-shrink: 0;
|
||
overflow: visible;
|
||
margin-left: -40px;
|
||
}
|
||
|
||
.pld-logo {
|
||
width: 557px;
|
||
height: auto;
|
||
position: absolute;
|
||
left: -179px;
|
||
top: -69px;
|
||
pointer-events: none;
|
||
user-select: none;
|
||
}
|
||
|
||
/* User group — email + logout, whole thing is one click target */
|
||
.pld-user-group {
|
||
position: relative;
|
||
margin-left: auto;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
display: block;
|
||
line-height: 1;
|
||
}
|
||
|
||
.pld-email {
|
||
display: block;
|
||
font-size: 0.82rem;
|
||
color: rgba( 255, 255, 255, 0.38 );
|
||
transition: color 0.15s;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.pld-user-group:hover .pld-email {
|
||
color: rgba( 255, 255, 255, 0.7 );
|
||
}
|
||
|
||
.pld-logout-label {
|
||
position: absolute;
|
||
top: 100%;
|
||
right: 0;
|
||
margin-top: 0.35em;
|
||
font-family: 'Barlow', sans-serif;
|
||
font-weight: 700;
|
||
font-style: italic;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
font-size: 1.25rem;
|
||
color: rgba( 255, 255, 255, 0.55 );
|
||
white-space: nowrap;
|
||
opacity: 0;
|
||
transform: translateY( -5px );
|
||
transition: opacity 0.15s, transform 0.15s;
|
||
|
||
}
|
||
|
||
.pld-user-group:hover .pld-logout-label {
|
||
opacity: 1;
|
||
transform: translateY( 0 );
|
||
}
|
||
|
||
/* ── Main layout ─────────────────────────── */
|
||
|
||
.pld-main {
|
||
padding: 2.5rem 2rem 5rem;
|
||
max-width: 80em;
|
||
margin: auto;
|
||
}
|
||
|
||
/* ── Project list ────────────────────────── */
|
||
|
||
.pld-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.1rem;
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
@keyframes pld-row-in {
|
||
from { opacity: 0; transform: translateX( -18px ); }
|
||
to { opacity: 1; transform: translateX( 0 ); }
|
||
}
|
||
|
||
.pld-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1.5rem;
|
||
padding: 2rem 2rem;
|
||
cursor: pointer;
|
||
border-radius: 26px;
|
||
position: relative;
|
||
animation: pld-row-in 0.32s cubic-bezier( 0.22, 0.68, 0, 1.15 ) both;
|
||
transition: background 0.18s;
|
||
overflow: visible;
|
||
margin: 0.5em 0em
|
||
}
|
||
|
||
.pld-row:hover .pld-name
|
||
{
|
||
text-shadow: 0em 0.03em 0.2em hsl(200, 90%, 10%);
|
||
}
|
||
|
||
|
||
.pld-row:hover {
|
||
background: rgba( 255, 255, 255, 0.035 );
|
||
}
|
||
|
||
/* ── Badge ───────────────────────────────── */
|
||
|
||
.pld-badge-wrap {
|
||
position: relative;
|
||
flex-shrink: 0;
|
||
width: 7em;
|
||
height: 7em;
|
||
margin-right: 1.5em;
|
||
}
|
||
|
||
.pld-badge {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 15%;
|
||
background: radial-gradient(circle at 38% 37%, color-mix(in srgb, var(--project-color) 51%, transparent), var(--project-color));
|
||
}
|
||
|
||
.new-project .pld-badge {
|
||
outline-style: dashed;
|
||
outline-width: 0.3em;
|
||
outline-color: #fff;
|
||
outline-offset: 2px;
|
||
background: transparent;
|
||
}
|
||
|
||
.new-project .pld-name {
|
||
color: rgba( 255, 255, 255, 0.8 );
|
||
}
|
||
|
||
.new-project:hover .pld-name {
|
||
color: #fff;
|
||
}
|
||
|
||
.new-project .pld-btn-delete,
|
||
.new-project .pld-btn-members {
|
||
display: none;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* Create project dialog overlay */
|
||
.pld-create-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba( 0, 0, 0, 0.72 );
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 200;
|
||
}
|
||
|
||
.pld-cp-input {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.pld-cp-actions {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
justify-content: flex-end;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
/* ── Overlay buttons on badge ────────────── */
|
||
|
||
.pld-btn-delete,
|
||
.pld-btn-members {
|
||
position: absolute;
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 50%;
|
||
border: none;
|
||
padding: 4px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
opacity: 0;
|
||
transform: scale( 0.6 );
|
||
transition: opacity 0.14s, transform 0.14s;
|
||
z-index: 5;
|
||
box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.55 );
|
||
}
|
||
|
||
.pld-row:hover .pld-btn-delete,
|
||
.pld-row:hover .pld-btn-members {
|
||
opacity: 1;
|
||
transform: scale( 1 );
|
||
}
|
||
|
||
.pld-btn-delete {
|
||
top: -7px;
|
||
left: -7px;
|
||
background: #b02050;
|
||
}
|
||
|
||
.pld-btn-delete:hover { background: #e93978; }
|
||
|
||
.pld-btn-members {
|
||
bottom: -7px;
|
||
left: -7px;
|
||
background: #0574a8;
|
||
}
|
||
|
||
.pld-btn-members:hover { background: #04bdff; }
|
||
|
||
.pld-btn-delete svg,
|
||
.pld-btn-members svg {
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
|
||
/* ── Project name ────────────────────────── */
|
||
|
||
.pld-name {
|
||
font-family: 'Barlow', sans-serif;
|
||
font-weight: 900;
|
||
font-style: italic;
|
||
font-size: 5em;
|
||
letter-spacing: 0.04em;
|
||
text-transform: uppercase;
|
||
color: var( --project-color );
|
||
transform: matrix( 0.953, 0, -0.102, 1.049, 0, 0 );
|
||
transform-origin: left center;
|
||
display: inline-block;
|
||
user-select: none;
|
||
text-shadow: 0em 0.03em 0.2em hsl(200, 90%, 10%,0);
|
||
}
|
||
|
||
/* ── Create form ─────────────────────────── */
|
||
|
||
.pld-create-form {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
align-items: center;
|
||
}
|
||
|
||
.pld-create-input {
|
||
flex: 1;
|
||
max-width: 300px;
|
||
padding: 0.55rem 0.9rem;
|
||
background: rgba( 255, 255, 255, 0.05 );
|
||
border: 1px solid rgba( 255, 255, 255, 0.14 );
|
||
border-radius: 6px;
|
||
color: #fff;
|
||
font-size: 0.88rem;
|
||
font-family: inherit;
|
||
outline: none;
|
||
transition: border-color 0.15s;
|
||
}
|
||
|
||
.pld-create-input::placeholder { color: rgba( 255, 255, 255, 0.28 ); }
|
||
.pld-create-input:focus { border-color: rgba( 255, 255, 255, 0.38 ); }
|
||
|
||
.pld-create-btn {
|
||
padding: 0.55rem 1.3rem;
|
||
background: rgba( 255, 255, 255, 0.07 );
|
||
border: 1px solid rgba( 255, 255, 255, 0.18 );
|
||
border-radius: 6px;
|
||
color: rgba( 255, 255, 255, 0.75 );
|
||
font-family: 'Barlow', sans-serif;
|
||
font-weight: 700;
|
||
font-style: italic;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.07em;
|
||
font-size: 0.82rem;
|
||
cursor: pointer;
|
||
transition: background 0.15s, color 0.15s;
|
||
}
|
||
|
||
.pld-create-btn:hover {
|
||
background: rgba( 255, 255, 255, 0.13 );
|
||
color: #fff;
|
||
}
|
||
|
||
/* ── Members overlay ─────────────────────── */
|
||
|
||
.pld-members-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba( 0, 0, 0, 0.72 );
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 200;
|
||
}
|
||
|
||
.pld-mp {
|
||
background: #131320;
|
||
border: 1px solid rgba( 255, 255, 255, 0.1 );
|
||
border-radius: 12px;
|
||
padding: 1.75rem 2rem;
|
||
width: min( 480px, 92vw );
|
||
max-height: 80vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.pld-mp-title {
|
||
font-family: 'Barlow', sans-serif;
|
||
font-weight: 900;
|
||
font-style: italic;
|
||
text-transform: uppercase;
|
||
font-size: 1.25rem;
|
||
letter-spacing: 0.04em;
|
||
color: #fff;
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
|
||
.pld-mp-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0 0 1rem;
|
||
}
|
||
|
||
.pld-mp-list li {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
padding: 0.5rem 0;
|
||
border-bottom: 1px solid rgba( 255, 255, 255, 0.06 );
|
||
font-size: 0.88rem;
|
||
}
|
||
|
||
.pld-mp-owner-row { font-weight: 500; }
|
||
|
||
.pld-mp-email {
|
||
flex: 1;
|
||
color: rgba( 255, 255, 255, 0.75 );
|
||
word-break: break-all;
|
||
}
|
||
|
||
.pld-mp-role {
|
||
font-size: 0.72rem;
|
||
color: rgba( 255, 255, 255, 0.38 );
|
||
padding: 0.15rem 0.5rem;
|
||
border: 1px solid rgba( 255, 255, 255, 0.14 );
|
||
border-radius: 3px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.pld-mp-empty {
|
||
color: rgba( 255, 255, 255, 0.32 );
|
||
font-size: 0.85rem;
|
||
padding: 0.5rem 0;
|
||
}
|
||
|
||
.pld-mp-loading {
|
||
color: rgba( 255, 255, 255, 0.45 );
|
||
font-size: 0.9rem;
|
||
text-align: center;
|
||
padding: 2rem 0;
|
||
}
|
||
|
||
.pld-mp-add-form {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
flex-wrap: wrap;
|
||
margin-top: 1.25rem;
|
||
}
|
||
|
||
.pld-mp-input {
|
||
flex: 1;
|
||
min-width: 150px;
|
||
padding: 0.45rem 0.7rem;
|
||
background: rgba( 255, 255, 255, 0.05 );
|
||
border: 1px solid rgba( 255, 255, 255, 0.14 );
|
||
border-radius: 5px;
|
||
color: #fff;
|
||
font-size: 0.85rem;
|
||
font-family: inherit;
|
||
}
|
||
|
||
.pld-mp-select {
|
||
padding: 0.45rem 0.6rem;
|
||
background: rgba( 255, 255, 255, 0.05 );
|
||
border: 1px solid rgba( 255, 255, 255, 0.14 );
|
||
border-radius: 5px;
|
||
color: #fff;
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.pld-mp-btn {
|
||
padding: 0.45rem 0.9rem;
|
||
background: rgba( 255, 255, 255, 0.07 );
|
||
border: 1px solid rgba( 255, 255, 255, 0.17 );
|
||
border-radius: 5px;
|
||
color: rgba( 255, 255, 255, 0.75 );
|
||
cursor: pointer;
|
||
font-size: 0.85rem;
|
||
transition: background 0.14s, color 0.14s;
|
||
}
|
||
|
||
.pld-mp-btn:hover {
|
||
background: rgba( 255, 255, 255, 0.13 );
|
||
color: #fff;
|
||
}
|
||
|
||
.pld-mp-close {
|
||
margin-top: 1.25rem;
|
||
width: 100%;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* ── Mobile ──────────────────────────────── */
|
||
|
||
@media ( max-width: 600px ) {
|
||
.pld-name {
|
||
transform: none;
|
||
font-size: 1.15rem;
|
||
}
|
||
|
||
.pld-row {
|
||
animation: none;
|
||
opacity: 1;
|
||
}
|
||
|
||
.pld-btn-delete,
|
||
.pld-btn-members {
|
||
opacity: 1;
|
||
transform: scale( 1 );
|
||
}
|
||
|
||
.pld-main {
|
||
padding: 1.5rem 1rem 4rem;
|
||
}
|
||
}
|