|
1 | | -:root { |
2 | | - --bg: #0B0F0E; |
3 | | - --panel: #121816; |
4 | | - --border: #1E2926; |
5 | | - --text: #F2F5F3; |
6 | | - --muted: #8FA39B; |
7 | | - --primary: #006633; |
8 | | - --primary-bright: #00A651; |
9 | | - --gold: #FFD700; |
10 | | -} |
11 | | - |
12 | | -* { box-sizing: border-box; } |
13 | | - |
14 | | -body { |
15 | | - margin: 0; |
16 | | - background: var(--bg); |
17 | | - color: var(--text); |
18 | | - font-family: 'DM Sans', sans-serif; |
19 | | - min-height: 100vh; |
20 | | -} |
21 | | - |
22 | | -.hidden { display: none !important; } |
23 | | - |
24 | | -/* ---- Topbar ---- */ |
25 | | -.topbar { |
26 | | - display: flex; align-items: center; justify-content: space-between; |
27 | | - padding: 16px 20px; border-bottom: 1px solid var(--border); |
28 | | - position: sticky; top: 0; background: var(--bg); z-index: 10; |
29 | | -} |
30 | | -.back-link { |
31 | | - color: var(--muted); text-decoration: none; font-size: 13px; |
32 | | - background: none; border: none; cursor: pointer; font-family: 'DM Sans', sans-serif; |
33 | | -} |
34 | | -.back-link:hover { color: var(--gold); } |
35 | | -.logo { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 20px; margin: 0; } |
36 | | - |
37 | | -/* ---- Layout ---- */ |
38 | | -.layout { display: flex; max-width: 1100px; margin: 0 auto; } |
39 | | - |
40 | | -.sidebar { |
41 | | - width: 200px; flex-shrink: 0; padding: 20px 12px; |
42 | | - border-right: 1px solid var(--border); min-height: calc(100vh - 60px); |
43 | | -} |
44 | | -.sidebar-title { |
45 | | - font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; |
46 | | - color: var(--muted); margin-bottom: 10px; padding: 0 8px; |
47 | | -} |
48 | | -.pinned-list { display: flex; flex-direction: column; gap: 4px; } |
49 | | -.pinned-item { |
50 | | - padding: 8px; border-radius: 6px; font-size: 13px; cursor: pointer; color: var(--text); |
51 | | -} |
52 | | -.pinned-item:hover { background: var(--panel); } |
53 | | -.pinned-empty { font-size: 12px; color: var(--muted); padding: 0 8px; } |
54 | | - |
55 | | -.owner-filters { display: flex; flex-direction: column; gap: 2px; } |
56 | | -.filter-chip { |
57 | | - background: none; border: none; text-align: left; color: var(--muted); |
58 | | - padding: 7px 8px; border-radius: 6px; font-size: 13px; cursor: pointer; |
59 | | - font-family: 'DM Sans', sans-serif; |
60 | | -} |
61 | | -.filter-chip:hover { background: var(--panel); } |
62 | | -.filter-chip.active { background: var(--primary); color: white; font-weight: 600; } |
63 | | - |
64 | | -.discovery, .channel-space { flex: 1; padding: 20px; } |
65 | | - |
66 | | -/* ---- Channel nameplate cards: the signature element ---- |
67 | | - Modeled on an actual campus noticeboard nameplate — a tag naming |
68 | | - who runs the space (SUG / FACULTY / DEPT / BRAND / ADMIN OFFICE / |
69 | | - STUDENT), because ownership type is the real organizing fact of a |
70 | | - channel, per the spec. */ |
71 | | -.channel-grid { |
72 | | - display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); |
73 | | - gap: 16px; |
74 | | -} |
75 | | -.channel-card { |
76 | | - background: var(--panel); border: 1px solid var(--border); border-radius: 10px; |
77 | | - padding: 16px; cursor: pointer; transition: border-color 0.15s, transform 0.15s; |
78 | | - position: relative; padding-top: 34px; |
79 | | -} |
80 | | -.channel-card:hover { border-color: var(--primary-bright); transform: translateY(-2px); } |
81 | | - |
82 | | -.owner-nameplate { |
83 | | - position: absolute; top: 0; left: 16px; |
84 | | - background: var(--gold); color: #1A1400; |
85 | | - font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; |
86 | | - padding: 3px 8px; border-radius: 0 0 4px 4px; |
87 | | -} |
88 | | -.owner-nameplate.sug { background: var(--gold); } |
89 | | -.owner-nameplate.faculty { background: var(--primary-bright); color: #041; } |
90 | | -.owner-nameplate.department { background: #4A9EFF; color: #04162E; } |
91 | | -.owner-nameplate.brand { background: #E85D5D; color: #2E0A0A; } |
92 | | -.owner-nameplate.admin_office { background: #C77DFF; color: #23032E; } |
93 | | -.owner-nameplate.student { background: var(--muted); color: #0B0F0E; } |
94 | | - |
95 | | -.channel-name { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 15px; margin: 0 0 4px; } |
96 | | -.channel-desc { font-size: 12px; color: var(--muted); line-height: 1.5; margin-bottom: 10px; } |
97 | | -.channel-stats { font-size: 11px; color: var(--muted); } |
98 | | - |
99 | | -/* ---- Channel space ---- */ |
100 | | -.channel-header { margin-bottom: 16px; } |
101 | | -#channelHeaderInfo { margin-top: 10px; } |
102 | | -#channelHeaderInfo .channel-name { font-size: 22px; } |
103 | | - |
104 | | -.composer { |
105 | | - background: var(--panel); border: 1px solid var(--border); border-radius: 10px; |
106 | | - padding: 12px; margin-bottom: 16px; |
107 | | -} |
108 | | -.composer textarea { |
109 | | - width: 100%; background: #0E1613; border: 1px solid var(--border); border-radius: 8px; |
110 | | - padding: 10px 12px; color: var(--text); font-size: 14px; font-family: 'DM Sans', sans-serif; |
111 | | - resize: vertical; margin-bottom: 8px; |
112 | | -} |
113 | | -.primary-btn { |
114 | | - background: var(--primary); border: none; border-radius: 8px; padding: 10px 18px; |
115 | | - color: white; font-weight: 700; cursor: pointer; font-size: 13px; font-family: 'DM Sans', sans-serif; |
116 | | -} |
117 | | -.primary-btn:hover { background: var(--primary-bright); } |
118 | | - |
119 | | -.sort-row { display: flex; gap: 8px; margin-bottom: 12px; } |
120 | | -.sort-btn { |
121 | | - background: none; border: 1px solid var(--border); color: var(--muted); |
122 | | - padding: 6px 14px; border-radius: 999px; font-size: 12px; cursor: pointer; |
123 | | - font-family: 'DM Sans', sans-serif; |
124 | | -} |
125 | | -.sort-btn.active { border-color: var(--primary-bright); color: var(--primary-bright); } |
126 | | - |
127 | | -/* ---- Posts: Reddit-style upvote rail ---- */ |
128 | | -.posts-list { display: flex; flex-direction: column; gap: 10px; } |
129 | | -.post-card { |
130 | | - display: flex; gap: 12px; |
131 | | - background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px; |
132 | | -} |
133 | | -.vote-rail { |
134 | | - display: flex; flex-direction: column; align-items: center; gap: 2px; |
135 | | - flex-shrink: 0; width: 32px; |
136 | | -} |
137 | | -.vote-arrow { |
138 | | - background: none; border: none; color: var(--muted); cursor: pointer; |
139 | | - font-size: 16px; line-height: 1; padding: 2px; |
140 | | -} |
141 | | -.vote-arrow:hover, .vote-arrow.voted { color: var(--gold); } |
142 | | -.vote-count { font-size: 13px; font-weight: 700; } |
143 | | - |
144 | | -.post-body { flex: 1; } |
145 | | -.post-author { font-size: 12px; color: var(--muted); margin-bottom: 4px; } |
146 | | -.post-content { font-size: 14px; line-height: 1.5; } |
147 | | - |
148 | | -@media (max-width: 720px) { |
149 | | - .layout { flex-direction: column; } |
150 | | - .sidebar { width: 100%; min-height: auto; border-right: none; border-bottom: 1px solid var(--border); } |
| 1 | +/* Channels page (shared look lives in lc-shared.css) */ |
| 2 | +.lc-sidebar{width:250px;background:var(--lc-surface);border-right:1px solid var(--lc-border);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto} |
| 3 | +.sidebar-head{padding:14px 14px 10px;border-bottom:1px solid var(--lc-border)} |
| 4 | +.sidebar-title{font-family:'Syne',sans-serif;font-weight:700;font-size:18px} |
| 5 | +.list-section-label{font-size:9px;font-weight:600;letter-spacing:1px;color:var(--lc-muted2);text-transform:uppercase;padding:10px 14px 4px} |
| 6 | +.pinned-list{display:flex;flex-direction:column;padding:0 8px} |
| 7 | +.pinned-item{padding:8px 10px;border-radius:8px;font-size:13px;cursor:pointer;color:var(--lc-text)} |
| 8 | +.pinned-item:hover{background:var(--lc-surface2)} |
| 9 | +.pinned-empty{font-size:11.5px;color:var(--lc-muted2);padding:0 14px} |
| 10 | +.filter-bar{display:flex;gap:4px;padding:8px 14px;flex-wrap:wrap} |
| 11 | +.filter-btn{font-size:11px;font-weight:500;padding:4px 12px;border-radius:20px;border:1px solid var(--lc-border);background:none;color:var(--lc-muted2);cursor:pointer;transition:all .15s;font-family:'DM Sans',sans-serif} |
| 12 | +.filter-btn:hover{color:var(--lc-muted);border-color:var(--lc-border2)} |
| 13 | +.filter-btn.active{background:var(--lc-green-soft);color:var(--lc-green-mid);border-color:rgba(0,102,51,0.35)} |
| 14 | +.mobile-filters{display:none;padding:0 0 12px;overflow-x:auto;flex-wrap:nowrap} |
| 15 | +.mobile-filters .filter-btn{white-space:nowrap} |
| 16 | + |
| 17 | +.channels-main{flex:1;padding:20px;min-width:0} |
| 18 | +.page-title{font-family:'Syne',sans-serif;font-weight:800;font-size:22px;margin-bottom:4px} |
| 19 | +.page-sub{font-size:13px;color:var(--lc-muted);margin-bottom:16px} |
| 20 | + |
| 21 | +/* Channel cards: the nameplate says who runs the space */ |
| 22 | +.channel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px} |
| 23 | +.channel-card{background:var(--lc-surface2);border:1px solid var(--lc-border);border-radius:11px;padding:16px;padding-top:32px;cursor:pointer;position:relative;transition:border-color .15s,transform .15s} |
| 24 | +.channel-card:hover{border-color:var(--lc-green-mid);transform:translateY(-2px)} |
| 25 | +.owner-nameplate{position:absolute;top:0;left:14px;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:0 0 4px 4px} |
| 26 | +.owner-nameplate.sug{background:var(--lc-gold);color:#1A1400} |
| 27 | +.owner-nameplate.faculty{background:var(--lc-online);color:#04220F} |
| 28 | +.owner-nameplate.department{background:var(--lc-blue);color:#04162E} |
| 29 | +.owner-nameplate.brand{background:var(--lc-danger);color:#2E0A0A} |
| 30 | +.owner-nameplate.admin_office{background:#C77DFF;color:#23032E} |
| 31 | +.owner-nameplate.student{background:var(--lc-muted2);color:var(--lc-text)} |
| 32 | +.channel-name{font-family:'Syne',sans-serif;font-weight:700;font-size:15px;margin-bottom:4px;word-break:break-word} |
| 33 | +.channel-desc{font-size:12px;color:var(--lc-muted);line-height:1.5;margin-bottom:10px;word-break:break-word} |
| 34 | +.channel-stats{font-size:11px;color:var(--lc-muted2)} |
| 35 | + |
| 36 | +/* Inside a channel */ |
| 37 | +.back-btn{background:none;border:none;color:var(--lc-muted);font-size:13px;cursor:pointer;font-family:'DM Sans',sans-serif;margin-bottom:12px;padding:0} |
| 38 | +.back-btn:hover{color:var(--lc-gold)} |
| 39 | +#channelHeaderInfo .owner-nameplate{position:static;display:inline-block;margin-bottom:8px} |
| 40 | +#channelHeaderInfo .channel-name{font-size:21px} |
| 41 | +.channel-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 16px} |
| 42 | +.chip-btn{background:var(--lc-surface2);border:1px solid var(--lc-border2);color:var(--lc-text);border-radius:999px;padding:7px 14px;font-size:12.5px;cursor:pointer;font-family:'DM Sans',sans-serif;display:inline-flex;align-items:center;gap:6px;text-decoration:none} |
| 43 | +.chip-btn:hover{border-color:var(--lc-green-mid)} |
| 44 | +.chip-btn.on{background:var(--lc-green-soft);border-color:rgba(0,102,51,0.45);color:var(--lc-green-mid)} |
| 45 | +.chip-btn:disabled{opacity:.5;cursor:not-allowed} |
| 46 | + |
| 47 | +.composer{background:var(--lc-surface2);border:1px solid var(--lc-border);border-radius:11px;padding:12px;margin-bottom:14px} |
| 48 | +.composer textarea{width:100%;resize:vertical;margin-bottom:8px} |
| 49 | +.composer-note{font-size:13px;color:var(--lc-muted)} |
| 50 | +.post-error{font-size:12px;color:var(--lc-danger);min-height:14px;margin-top:6px} |
| 51 | + |
| 52 | +.sort-row{display:flex;gap:6px;margin-bottom:12px} |
| 53 | +.sort-btn{font-size:12px;padding:5px 14px;border-radius:999px;border:1px solid var(--lc-border);background:none;color:var(--lc-muted2);cursor:pointer;font-family:'DM Sans',sans-serif} |
| 54 | +.sort-btn.active{border-color:var(--lc-green-mid);color:var(--lc-green-mid)} |
| 55 | + |
| 56 | +/* Posts: Reddit-style upvote rail */ |
| 57 | +.posts-list{display:flex;flex-direction:column;gap:9px} |
| 58 | +.post-card{display:flex;gap:12px;background:var(--lc-surface2);border:1px solid var(--lc-border);border-radius:11px;padding:14px} |
| 59 | +.vote-rail{display:flex;flex-direction:column;align-items:center;gap:2px;flex-shrink:0;width:30px} |
| 60 | +.vote-arrow{background:none;border:none;color:var(--lc-muted2);cursor:pointer;font-size:15px;line-height:1;padding:2px} |
| 61 | +.vote-arrow:hover,.vote-arrow.voted{color:var(--lc-gold)} |
| 62 | +.vote-count{font-size:12.5px;font-weight:700;color:var(--lc-muted)} |
| 63 | +.post-body{flex:1;min-width:0} |
| 64 | +.post-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px} |
| 65 | +.post-author{font-size:12.5px;font-weight:600;color:var(--lc-text)} |
| 66 | +.official-badge{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--lc-green-soft);color:var(--lc-online);border:1px solid rgba(0,102,51,0.4);padding:1px 7px;border-radius:999px} |
| 67 | +.post-time{font-size:11px;color:var(--lc-muted2)} |
| 68 | +.post-content{font-size:13.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word} |
| 69 | +.post-footer{display:flex;gap:14px;margin-top:10px} |
| 70 | +.post-act{background:none;border:none;color:var(--lc-muted2);font-size:12px;cursor:pointer;font-family:'DM Sans',sans-serif;text-decoration:none;display:inline-flex;align-items:center;gap:5px;padding:0} |
| 71 | +.post-act:hover{color:var(--lc-text)} |
| 72 | +.post-act.danger:hover{color:var(--lc-danger)} |
| 73 | +.load-more{text-align:center;margin-top:14px} |
| 74 | + |
| 75 | +@media (max-width:720px){ |
| 76 | + .lc-sidebar{display:none} |
| 77 | + .mobile-filters{display:flex} |
| 78 | + .channels-main{padding:14px} |
151 | 79 | } |
0 commit comments