Skip to content

Commit 1b35276

Browse files
mearvkmearvk
committed
Science Commit 5.
1 parent 28536f5 commit 1b35276

4 files changed

Lines changed: 92 additions & 70 deletions

File tree

‎modules/black/presidential/Brarner.M.Alete/servlets/servlet/src/main/webapp/css/connector.css‎

Lines changed: 20 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* CD1 Connector Dialog — uses button class from resources/button.css */
1+
/* CD1 Connector Dialog — uses button PNG images from resources */
22

33
.cd1-button-wrap {
44
display: flex;
@@ -8,82 +8,33 @@
88
position: relative;
99
z-index: 200;
1010
width: 100%;
11+
text-align: center;
1112
}
1213
.cd1-button-wrap .btn {
13-
--hue: 223;
14-
--sat: 10%;
15-
--hue2: 223;
16-
--sat2: 90%;
17-
--light2: 60%;
18-
--primary: hsl(var(--hue2),var(--sat2),var(--light2));
19-
--trans-dur: 0.3s;
20-
--trans-timing: ease-in-out;
21-
--trans-timing2: cubic-bezier(0.42,-1.84,0.42,1.84);
22-
--trans-timing3: cubic-bezier(0.42,0,0.42,1.84);
23-
background-color: transparent;
24-
background-image: linear-gradient(hsl(var(--hue),var(--sat),10%),hsl(var(--hue),var(--sat),15%));
25-
border: none;
26-
border-radius: 50%;
27-
box-shadow:
28-
0 0 0 0.125em hsla(var(--hue2),var(--sat2),50%,0),
29-
0 0 0.25em hsl(var(--hue),var(--sat),5%) inset,
30-
0 0.125em 0.125em hsl(var(--hue),var(--sat),25%);
31-
cursor: pointer;
32-
width: 5em;
33-
height: 5em;
34-
position: relative;
35-
transition: box-shadow var(--trans-dur) var(--trans-timing);
36-
}
37-
.cd1-button-wrap .btn:before,
38-
.cd1-button-wrap .btn:after {
39-
border-radius: inherit;
40-
content: "";
14+
all: unset;
4115
display: block;
42-
position: absolute;
16+
margin: 0 auto;
17+
cursor: pointer;
18+
width: 80px;
19+
height: 80px;
20+
background: url('../images/white.button.png') center/contain no-repeat;
21+
border-radius: 50%;
22+
transition: transform 0.2s ease, filter 0.2s ease;
4323
}
44-
.cd1-button-wrap .btn:before {
45-
background-image: linear-gradient(hsl(var(--hue),var(--sat),20%),hsl(var(--hue),var(--sat),10%));
46-
box-shadow: 0 0.5em 0.5em 0.15em hsla(var(--hue),0%,0%,0.7);
47-
top: 0.75em; left: 0.75em;
48-
width: 3.5em; height: 3.5em;
49-
transition: box-shadow var(--trans-dur) var(--trans-timing2), transform var(--trans-dur) var(--trans-timing2);
24+
.cd1-button-wrap .btn:hover {
25+
transform: scale(1.05);
26+
filter: brightness(1.2);
5027
}
51-
.cd1-button-wrap .btn:after {
52-
background-color: hsl(var(--hue),var(--sat),10%);
53-
background-image: linear-gradient(hsla(var(--hue),var(--sat),20%,0),hsl(var(--hue),var(--sat),20%));
54-
box-shadow:
55-
0 0.0625em 0 hsl(var(--hue),var(--sat),25%) inset,
56-
0 -0.0625em 0 hsl(var(--hue),var(--sat),25%) inset,
57-
0 0 0 0 hsla(var(--hue2),var(--sat2),var(--light2),0.1) inset;
58-
top: 1.5em; left: 1.5em;
59-
width: 2em; height: 2em;
60-
transition: background-color var(--trans-dur), box-shadow var(--trans-dur), transform var(--trans-dur) var(--trans-timing2);
28+
.cd1-button-wrap .btn:active {
29+
transform: scale(0.93);
6130
}
62-
.cd1-button-wrap .btn__icon {
63-
display: block;
64-
position: absolute;
65-
top: calc(50% - 0.6em); left: calc(50% - 0.6em);
66-
width: 1.2em; height: 1.2em;
67-
z-index: 1;
68-
transition: filter var(--trans-dur);
31+
.cd1-button-wrap .btn[aria-pressed="true"] {
32+
background: url('../images/black.button.png') center/contain no-repeat;
33+
transform: scale(0.95);
34+
filter: drop-shadow(0 0 8px rgba(59,130,246,0.6));
6935
}
70-
.cd1-button-wrap .btn__icon g { stroke: hsl(var(--hue),var(--sat),5%); transition: stroke var(--trans-dur); }
7136
.cd1-button-wrap .btn__sr { overflow: hidden; position: absolute; width: 1px; height: 1px; }
72-
.cd1-button-wrap .btn[aria-pressed="true"]:before,
73-
.cd1-button-wrap .btn[aria-pressed="true"]:after,
74-
.cd1-button-wrap .btn[aria-pressed="true"] .btn__icon { transform: scale(0.98); }
75-
.cd1-button-wrap .btn[aria-pressed="true"]:before {
76-
box-shadow: 0 0.25em 0.25em 0 hsla(var(--hue),0%,0%,0.7);
77-
}
78-
.cd1-button-wrap .btn[aria-pressed="true"]:after {
79-
background-color: hsl(var(--hue),var(--sat),20%);
80-
box-shadow:
81-
0 0.0625em 0 hsla(var(--hue2),var(--sat2),var(--light2),0.5) inset,
82-
0 -0.0625em 0 hsla(var(--hue2),var(--sat2),var(--light2),0.5) inset,
83-
0 0 0.75em 0.25em hsla(var(--hue2),var(--sat2),var(--light2),0.1) inset;
84-
}
85-
.cd1-button-wrap .btn[aria-pressed="true"] .btn__icon { filter: drop-shadow(0 0 0.25em var(--primary)); }
86-
.cd1-button-wrap .btn[aria-pressed="true"] .btn__icon g { stroke: var(--primary); }
37+
.cd1-button-wrap .btn__icon { display: none; }
8738

8839
/* Overlay */
8940
.cd1-overlay {

‎modules/black/presidential/Brarner.M.Alete/servlets/servlet/src/main/webapp/dig.tik‎

Lines changed: 72 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,75 @@
11
dig.tik — Display Type Reference
22
===================================
33

4+
DESIGN SYSTEM (Gluon-Inspired Dark Theme)
5+
==========================================
6+
7+
Tenets:
8+
- Dark-first design; near-black backgrounds with subtle layering
9+
- Minimal, flat UI with depth conveyed through border + shadow, not gradients
10+
- Content-dense tables as primary data display; no unnecessary decoration
11+
- Single accent color (blue) for all interactive elements
12+
- Typography drives hierarchy: weight, size, letter-spacing — not color variety
13+
- Sticky frosted-glass nav; backdrop-filter blur for depth perception
14+
- Responsive: collapses nav links on mobile, stacks grids to single column
15+
- Sections separated by 1px border-top, not gaps or color changes
16+
- Hero section: centered text, uppercase tag, large bold h1, muted description
17+
18+
Colors:
19+
--bg-dark: #0a0a0f (page background, near-black with blue tint)
20+
--bg-section: #111118 (section/dialog backgrounds, slightly lifted)
21+
--bg-card: #1a1a24 (card/thead/code backgrounds, 3rd depth level)
22+
--bg-white: #ffffff (light variant sections, inputs)
23+
--text-primary: #ffffff (headings, table data, active links)
24+
--text-secondary: #a1a1aa (body text, descriptions, inactive nav)
25+
--text-muted: #71717a (footer links, meta info, placeholders)
26+
--text-dark: #18181b (text on white backgrounds)
27+
--accent: #3b82f6 (buttons, active tabs, hover highlights)
28+
--accent-hover: #2563eb (button hover/press state, darker blue)
29+
--accent-light: #60a5fa (tags, session labels, tab active text)
30+
--border: #27272a (all dark borders: sections, tables, cards)
31+
--border-light: #e4e4e7 (borders on white/light variant sections)
32+
33+
Typography:
34+
--font: system stack (-apple-system, BlinkMacSystemFont, Segoe UI, Roboto)
35+
--font-mono: JetBrains Mono, Fira Code, monospace
36+
Body: 1em/1.6 line-height, antialiased
37+
h1: clamp(2.5rem, 5vw, 3.75rem), weight 800, tracking -0.03em
38+
h2: 1.75rem, weight 700, tracking -0.02em
39+
h3: 1.25rem, weight 600
40+
Nav brand: 1.125rem, weight 700, tracking -0.02em
41+
Table header: 0.75rem, uppercase, weight 600, tracking 0.05em
42+
Table data: 0.875rem
43+
Buttons: 0.875–0.9rem, weight 600
44+
45+
Layout:
46+
Max-width: 1200px (content container)
47+
Nav height: 64px, sticky, frosted glass (rgba(10,10,15,0.92) + blur(12px))
48+
Section padding: 5rem vertical, 2rem horizontal
49+
Hero padding: 6rem vertical
50+
Border-radius: 8px (standard), 12px (large cards/dialogs)
51+
Table row hover: rgba(59, 130, 246, 0.04) — faint blue tint
52+
Footer: 4-column grid (2fr + 3×1fr), collapses to 1-col on mobile
53+
54+
Orientation:
55+
- Vertical scroll, single column
56+
- Nav → Hero → Sections (border-separated) → Footer
57+
- Content centered within max-width container
58+
- Tables full-width within container
59+
- Buttons right-aligned in nav, centered in hero
60+
61+
Interaction:
62+
- All transitions 0.2s ease (links, buttons, borders)
63+
- Hover on links: secondary → accent color
64+
- Hover on table rows: faint blue background
65+
- Hover on A1 clickable rows: text turns accent blue
66+
- Buttons: accent → accent-hover on hover
67+
- Platform badges: lift 2px on hover + border color change
68+
- Tabs: bottom-border accent blue on active
69+
70+
471
A1 Type:
72+
=========
573
- Standard data table using .table-wrap > <table>
674
- Dark header row, bordered cells, compact font
775
- Clickable rows expand a hidden child <tr class="a1-child"> beneath them
@@ -10,7 +78,9 @@ A1 Type:
1078
- Children (expanded rows) use the same table look-and-feel
1179
- Used across all BMA pages: Species, Postal, Art, Science, Status
1280

81+
1382
CD1 Type (Connector Dialog):
83+
==============================
1484
- Power button from resources/button.{html,css,js} used as toggle
1585
- Button centered between hero header and page content
1686
- Floating div centered on page, above content (position:fixed, z-index:300)
@@ -26,6 +96,7 @@ CD1 Type (Connector Dialog):
2696
- Send/OK buttons same blue (#3b82f6) as nav buttons
2797
- Files: css/connector.css, js/connector.js
2898

99+
29100
Reference: lauradei.us/brarner.m.alete/
30101
Created: 2026-06-27
31-
Updated: 2026-06-27 (CD1 added)
102+
Updated: 2026-06-27 (Design system + CD1 documented)

‎modules/black/presidential/Brarner.M.Alete/servlets/servlet/src/main/webapp/images/black.button.png‎

254 KB
Loading

‎modules/black/presidential/Brarner.M.Alete/servlets/servlet/src/main/webapp/images/white.button.png‎

224 KB
Loading

0 commit comments

Comments
 (0)