summaryrefslogtreecommitdiffstats
path: root/src/styles/objects
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2026-07-22 19:40:59 +0200
committerVolpeon <git@volpeon.ink>2026-07-22 19:40:59 +0200
commitc1e28224aa2e1450031669d9a7e359b63e04687d (patch)
tree68f3d8905c763a91f68001d868197effa92adafa /src/styles/objects
downloadcorvos-website-c1e28224aa2e1450031669d9a7e359b63e04687d.tar.gz
corvos-website-c1e28224aa2e1450031669d9a7e359b63e04687d.tar.bz2
corvos-website-c1e28224aa2e1450031669d9a7e359b63e04687d.zip
Init
Diffstat (limited to 'src/styles/objects')
-rw-r--r--src/styles/objects/_deflist.scss25
-rw-r--r--src/styles/objects/_message.scss216
-rw-r--r--src/styles/objects/_message.vars.scss39
-rw-r--r--src/styles/objects/_placeholder-box.scss12
-rw-r--r--src/styles/objects/_toc.scss27
5 files changed, 319 insertions, 0 deletions
diff --git a/src/styles/objects/_deflist.scss b/src/styles/objects/_deflist.scss
new file mode 100644
index 0000000..63ba1b9
--- /dev/null
+++ b/src/styles/objects/_deflist.scss
@@ -0,0 +1,25 @@
1@use "sass:list";
2
3@use "pkg:iro-sass/bem";
4@use "pkg:iro-sass/props";
5@use "pkg:iro-design" as iro;
6
7@mixin styles {
8 @include bem.object("deflist") {
9 display: grid;
10 grid-template-columns: auto 1fr;
11 gap: props.get(iro.$core--size--50) props.get(iro.$core--size--400);
12 padding: 0;
13 margin-block: props.get(iro.$s-implicit--paragraph--margin-bs) 0;
14 margin-inline: 0;
15
16 dt {
17 font-weight: bold;
18 color: props.get(iro.$core--theme, --heading);
19 }
20
21 dd {
22 margin: 0;
23 }
24 }
25}
diff --git a/src/styles/objects/_message.scss b/src/styles/objects/_message.scss
new file mode 100644
index 0000000..a7c9996
--- /dev/null
+++ b/src/styles/objects/_message.scss
@@ -0,0 +1,216 @@
1@use "sass:meta";
2
3@use "pkg:iro-design" as iro;
4@use "pkg:iro-sass/bem";
5@use "pkg:iro-sass/props";
6
7@forward "message.vars";
8@use "message.vars" as vars;
9
10@mixin styles {
11 @include iro.props--materialize-at-root(meta.module-variables("vars"));
12
13 @include bem.object("message") {
14 display: grid;
15 position: relative;
16 grid-template-rows: auto 1fr auto;
17 grid-template-columns:
18 auto calc(props.get(vars.$avatar-size) + props.get(vars.$spacing-x))
19 minmax(0, 1fr);
20 grid-template-areas:
21 "line-from avatar main"
22 "line-from line-to main"
23 "line-from replies replies";
24
25 & + & {
26 padding-block-start: props.get(vars.$spacing-outer);
27 }
28
29 @include bem.elem("line-from") {
30 grid-area: line-from;
31 position: relative;
32 inline-size: calc(props.get(vars.$avatar-size) + props.get(vars.$spacing-x));
33
34 &::before,
35 &::after {
36 content: "";
37 display: block;
38 position: absolute;
39 inset-block-start: 0;
40 inset-inline-start: props.get(vars.$line-offset);
41 }
42
43 &::before {
44 inline-size: props.get(vars.$line-width);
45 block-size: calc(100% + props.get(vars.$spacing-outer));
46 background-color: props.get(vars.$colors, --line);
47 }
48
49 &::after {
50 inline-size: calc(
51 props.get(vars.$avatar-size) - props.get(vars.$line-offset) + props.get(vars.$spacing-x)
52 );
53 block-size: calc(0.5 * (props.get(vars.$avatar-size) - props.get(vars.$line-width)));
54 border-block-end: props.get(vars.$line-width) solid props.get(vars.$colors, --line);
55 border-inline-start: props.get(vars.$line-width) solid props.get(vars.$colors, --line);
56 border-radius: 0 0 0 props.get(vars.$line-curve);
57 }
58
59 @include bem.modifier("last") {
60 &::before {
61 block-size: 0;
62 }
63 }
64
65 @include bem.sibling-elem("avatar") {
66 &::before {
67 inset-block-start: 50%;
68 inset-block-end: auto;
69 inset-inline-start: 0;
70 inline-size: 50%;
71 block-size: props.get(vars.$line-width);
72 transform: translateY(-50%);
73 }
74 }
75 }
76
77 @include bem.elem("line-to") {
78 grid-area: line-to;
79 display: block;
80 inline-size: props.get(vars.$line-width);
81 margin-inline-start: props.get(vars.$line-offset);
82 background-color: props.get(vars.$colors, --line);
83 }
84
85 @include bem.elem("avatar") {
86 position: relative;
87 grid-area: avatar;
88 inline-size: props.get(vars.$avatar-size);
89 block-size: props.get(vars.$avatar-size);
90 margin-inline-end: props.get(vars.$spacing-x);
91
92 &::before,
93 &::after {
94 content: "";
95 display: block;
96 position: absolute;
97 z-index: -1;
98 inset-inline-start: props.get(vars.$line-offset);
99 inline-size: props.get(vars.$line-width);
100 block-size: 50%;
101 background-color: props.get(vars.$colors, --line);
102 }
103
104 &::before {
105 inset-block-start: 0;
106 }
107
108 &::after {
109 inset-block-end: 0;
110 }
111
112 @include bem.modifier("last") {
113 &::after {
114 display: none;
115 }
116 }
117 }
118
119 @include bem.elem("avatar-dot") {
120 grid-area: avatar;
121 position: absolute;
122 inset-block-start: 50%;
123 inset-inline-start: 50%;
124 inline-size: props.get(vars.$dot-radius);
125 block-size: props.get(vars.$dot-radius);
126 transform: translate(-50%, -50%);
127 border: props.get(vars.$dot-width) solid props.get(vars.$colors, --dot, --border);
128 border-radius: 1em;
129 background-color: props.get(vars.$colors, --dot, --bg);
130 }
131
132 @include bem.elem("meta") {
133 white-space: nowrap;
134 color: props.get(vars.$colors, --meta);
135 }
136
137 @include bem.elem("main") {
138 position: relative;
139 grid-area: main;
140 }
141
142 @include bem.elem("replies") {
143 grid-area: replies;
144
145 &::before {
146 content: "";
147 grid-area: line;
148 display: block;
149 inline-size: props.get(vars.$line-width);
150 block-size: props.get(vars.$spacing-inner);
151 margin-inline-start: props.get(vars.$line-offset);
152 background-color: props.get(vars.$colors, --line);
153 }
154 }
155
156 @include bem.elem("header") {
157 line-height: 1.4;
158
159 @include bem.next-elem("body") {
160 padding-block-start: props.get(vars.$spacing-y);
161 }
162 }
163
164 @include bem.elem("body") {
165 word-wrap: break-word;
166
167 &::before {
168 content: "";
169 display: block;
170 margin-block: -100em 100em;
171 }
172 }
173
174 @include bem.elem("attachments") {
175 display: grid;
176 grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$attachment-width), 1fr));
177 grid-auto-rows: auto;
178 gap: props.get(vars.$spacing-x);
179 margin-block-start: props.get(vars.$spacing-attachments);
180 }
181
182 @include bem.elem("attachment") {
183 aspect-ratio: 3 / 2;
184 background-color: props.get(vars.$colors, --attachment, --bg);
185 }
186
187 @include bem.modifier("expanded") {
188 grid-template-rows: auto 1fr auto;
189 grid-template-columns: calc(props.get(vars.$avatar-size) + props.get(vars.$spacing-x)) minmax(
190 0,
191 1fr
192 );
193 grid-template-areas:
194 "avatar header"
195 "body body"
196 "attachments attachments";
197
198 @include bem.elem("header") {
199 grid-area: header;
200 align-self: center;
201 }
202
203 @include bem.elem("main") {
204 display: contents;
205 }
206
207 @include bem.elem("body") {
208 grid-area: body;
209 }
210
211 @include bem.elem("attachments") {
212 grid-area: attachments;
213 }
214 }
215 }
216}
diff --git a/src/styles/objects/_message.vars.scss b/src/styles/objects/_message.vars.scss
new file mode 100644
index 0000000..f394894
--- /dev/null
+++ b/src/styles/objects/_message.vars.scss
@@ -0,0 +1,39 @@
1@use "pkg:iro-design/core.vars" as core;
2@use "pkg:iro-design/objects/avatar.vars" as avatar;
3@use "pkg:iro-sass/props";
4
5$avatar-size: props.def(--o-message--avatar-size, props.get(avatar.$size));
6
7$dot-radius: props.def(--o-message--dot-radius, 6px);
8$dot-width: props.def(--o-message--dot-width, 4px);
9
10$spacing-x: props.def(--o-message--spacing-x, props.get(core.$size--200));
11$spacing-y: props.def(--o-message--spacing-y, props.get(core.$size--150));
12$spacing-inner: props.def(--o-message--spacing-inner, props.get(core.$size--500));
13$spacing-outer: props.def(--o-message--spacing-outer, props.get(core.$size--700));
14$spacing-attachments: props.def(--o-message--spacing-attachments, props.get(core.$size--200));
15
16$line-width: props.def(--o-message--line-width, props.get(core.$border-width--medium));
17$line-offset: props.def(
18 --o-message--line-offset,
19 calc(0.5 * props.get($avatar-size) - props.get($line-width))
20);
21$line-curve: props.def(--o-message--line-curve, props.get(core.$size--250));
22
23$attachment-width: props.def(--o-message--attachment-width, props.get(core.$size--2000));
24
25$colors: props.def(
26 --o-message,
27 (
28 --meta: props.get(core.$theme, --text-mute-more),
29 --line: props.get(core.$theme, --border),
30 --dot: (
31 --border: props.get(core.$theme, --text-mute-more),
32 --bg: props.get(core.$theme, --bg-base),
33 ),
34 --attachment: (
35 --bg: props.get(core.$theme, --border-mute),
36 ),
37 ),
38 "color"
39);
diff --git a/src/styles/objects/_placeholder-box.scss b/src/styles/objects/_placeholder-box.scss
new file mode 100644
index 0000000..9be3dc8
--- /dev/null
+++ b/src/styles/objects/_placeholder-box.scss
@@ -0,0 +1,12 @@
1@use "pkg:iro-sass/bem";
2@use "pkg:iro-sass/props";
3@use "pkg:iro-design" as iro;
4
5@mixin styles {
6 @include bem.object("placeholder-box") {
7 padding: props.get(iro.$core--size--250) props.get(iro.$core--size--300);
8 border: props.get(iro.$core--border-width--thin) dashed
9 props.get(iro.$core--theme, --border, --mute);
10 border-radius: props.get(iro.$core--rounding);
11 }
12}
diff --git a/src/styles/objects/_toc.scss b/src/styles/objects/_toc.scss
new file mode 100644
index 0000000..aefb0c5
--- /dev/null
+++ b/src/styles/objects/_toc.scss
@@ -0,0 +1,27 @@
1@use "sass:list";
2
3@use "pkg:iro-sass/bem";
4@use "pkg:iro-sass/props";
5@use "pkg:iro-design" as iro;
6
7@mixin styles {
8 @include bem.object("toc") {
9 @include bem.elem("item") {
10 @include bem.next-twin-elem {
11 margin-block-start: props.get(iro.$core--size--50);
12 }
13
14 @include bem.is("active") {
15 @include bem.elem("item-link") {
16 font-weight: bold;
17 text-decoration-line: none;
18 color: props.get(iro.$core--theme, --heading);
19
20 &:hover {
21 text-decoration-line: underline;
22 }
23 }
24 }
25 }
26 }
27}
generated by cgit v1.3.1 (git 2.54.0) at 2026-09-10 14:30:34 +0000