]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blob - client/src/app/+about/about-instance/about-instance.component.scss
Fix about page layout
[github/Chocobozzz/PeerTube.git] / client / src / app / +about / about-instance / about-instance.component.scss
1 @import '_variables';
2 @import '_mixins';
3
4 .about-instance-title {
5 display: flex;
6 justify-content: space-between;
7
8 .title {
9 font-size: 20px;
10 font-weight: $font-semibold;
11 }
12
13 .contact-admin {
14 @include peertube-button;
15 @include orange-button;
16
17 height: fit-content;
18 }
19 }
20
21 .instance-badges {
22 font-size: 16px;
23 margin-bottom: 20px;
24
25 .badge {
26 font-size: 12px;
27 font-weight: $font-semibold;
28 margin-right: 5px;
29
30 &.category {
31 background-color: pvar(--mainColor);
32 }
33 }
34 }
35
36 .section-title {
37 font-weight: $font-semibold;
38 font-size: 16px;
39 margin-bottom: 5px;
40 display: flex;
41 align-items: center;
42 }
43
44 .middle-title {
45 @include in-content-small-title;
46
47 margin-top: 0;
48 margin-bottom: 25px;
49 }
50
51 .block {
52 margin-bottom: 75px;
53 font-size: 15px;
54 }
55
56 .short-description .dedicated-to-nsfw {
57 margin-top: 20px;
58 font-weight: $font-semibold;
59 }
60
61 .anchor-link {
62 @include disable-outline;
63
64 position: relative;
65
66 &:hover, &:active {
67 &::after {
68 content: '#';
69 display: inline-block;
70 margin-left: 0.2em;
71 }
72 }
73
74 .middle-title, .section-title {
75 display: inline-block;
76 }
77
78 .section-title {
79 color: var(--mainForegroundColor);
80 }
81 }