summaryrefslogtreecommitdiff
path: root/web/source/css/thread.css
blob: e2e6ae6b7ccc05a04ecee8f5060c8c15a93ebcba (plain)
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
91
92
93
94
95
96
97
98
99
100
101
/*
	GoToSocial
	Copyright (C) GoToSocial Authors admin@gotosocial.org
	SPDX-License-Identifier: AGPL-3.0-or-later

	This program is free software: you can redistribute it and/or modify
	it under the terms of the GNU Affero General Public License as published by
	the Free Software Foundation, either version 3 of the License, or
	(at your option) any later version.

	This program is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
	GNU Affero General Public License for more details.

	You should have received a copy of the GNU Affero General Public License
	along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

.thread,
.thread-wrapper {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.thread {
	/*
		This column header might contain
		quite some info, so let it wrap.
	*/
	.col-header {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		column-gap: 1rem;
		row-gap: 0.5rem;

		box-shadow: $boxshadow;
		border: $boxshadow-border;

		h2 {
			margin-right: auto;
		}

		&.replies.hidden-only {
			/*
				No visible replies below this column
				header, so round off the bottom.
			*/
			border-bottom-left-radius: $br;
			border-bottom-right-radius: $br;
		}
	}

	.status {


		&.indent-1 {
			margin-left: 0.5rem;
		}

		&.indent-2 {
			margin-left: 1rem;
		}

		&.indent-3 {
			margin-left: 1.5rem;
		}

		&.indent-4 {
			margin-left: 2rem;
		}

		&.indent-5 {
			margin-left: 2.5rem;
		}

		&.indent-1,
		&.indent-2,
		&.indent-3,
		&.indent-4,
		&.indent-5 {
			.status-link {
				margin-left: -0.5rem;
				border-left: 0.1rem dashed $border-accent;
			}
		}

		border-radius: 0;
		&:last-child {
			border-bottom-left-radius: $br;
			border-bottom-right-radius: $br;

			.status-info {
				border-bottom-left-radius: $br;
				border-bottom-right-radius: $br;
			}
		}
	}
}