workforce-focus/styles.css at main · dev-ananta/workforce-focus · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
:root{
  --bg:#0f1724;
  --card:#0b1220;
  --accent:#38bdf8;
  --muted:#94a3b8;
  --glass: rgba(255,255,255,0.04);
  --gap:12px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color-scheme: dark;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:linear-gradient(180deg,var(--bg),#071025);color:#e6eef8}
.app-header{
  display:flex;align-items:center;justify-content:space-between;padding:16px 20px;
  border-bottom:1px solid rgba(255,255,255,0.03);backdrop-filter: blur(6px)
}
.app-header h1{margin:0;font-size:20px;letter-spacing:0.2px}
nav{display:flex;gap:8px}
.nav-btn{
  background:var(--glass);border:1px solid rgba(255,255,255,0.04);padding:8px 12px;border-radius:10px;color:var(--muted);
  cursor:pointer;font-weight:600
}
.nav-btn[aria-pressed="true"]{background:linear-gradient(90deg,var(--card),rgba(255,255,255,0.02));color:var(--accent);border-color:rgba(56,189,248,0.15)}

.container{padding:20px;display:grid;grid-template-columns:1fr;gap:16px;max-width:1100px;margin:18px auto}
.view{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:16px;border-radius:12px;border:1px solid rgba(255,255,255,0.02)}

.matrix{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;height:520px}
.quadrant{border-radius:8px;padding:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));border:1px dashed rgba(255,255,255,0.03);overflow:auto}
.quadrant h3{margin:0 0 8px 0;font-size:14px}
.task{background:rgba(255,255,255,0.02);padding:8px;border-radius:6px;margin-bottom:8px;cursor:grab;border:1px solid rgba(255,255,255,0.02)}
.task:active{cursor:grabbing;opacity:0.95}

.meeting-form{display:grid;gap:8px;margin-bottom:12px}
.meeting-list{display:flex;flex-direction:column;gap:8px}
.note{padding:10px;border-radius:8px;background:var(--card);border:1px solid rgba(255,255,255,0.02)}
.form-actions{display:flex;gap:8px}

/*Commit 8*/
#time-blocking {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  width: 100%;
  overflow-x: auto;
}

.day-column {
  border-right: 1px solid #ddd;
  min-width: 200px;  /* MODIFY width per day */
}

.day-title {
  font-weight: bold;
  padding: 8px;
  border-bottom: 2px solid #ccc;
}

.hour-row {
  display: flex;
  height: 60px;      /* MODIFY height per hour */
  border-bottom: 1px solid #eee;
  padding: 4px;
}

.hour-label {
  width: 60px;       /* MODIFY label width */
  flex-shrink: 0;
}

.hour-actions {
  flex-grow: 1;
}

.block {
  padding: 6px 8px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(56,189,248,0.08), rgba(255,255,255,0.02));
  border: 1px solid rgba(56,189,248,0.12);
  display: inline-flex;
  gap: 8px;
  align-items: center;
}


.app-footer{padding:12px 20px;text-align:center;color:var(--muted);font-size:13px;border-top:1px solid rgba(255,255,255,0.02)}
@media (min-width:900px){
  .container{grid-template-columns:1fr 480px;align-items:start}
  .matrix{grid-column:1/-1;height:520px}
}