]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blob - client/src/app/+video-channels/video-channels.component.scss
provide specific engine boundaries for nodejs and yarn
[github/Chocobozzz/PeerTube.git] / client / src / app / +video-channels / video-channels.component.scss
1 // Bootstrap grid utilities require functions, variables and mixins
2 @import 'node_modules/bootstrap/scss/functions';
3 @import 'node_modules/bootstrap/scss/variables';
4 @import 'node_modules/bootstrap/scss/mixins';
5 @import 'node_modules/bootstrap/scss/grid';
6
7 @import '_variables';
8 @import '_mixins';
9
10 .sub-menu {
11 @include sub-menu-with-actor;
12
13 .actor, .actor-info {
14 width: 100%;
15 }
16
17 .actor-info {
18 display: grid !important;
19 grid-template-columns: 1fr auto;
20 grid-template-rows: 1fr auto / 1fr auto;
21 grid-template-areas: "name buttons" "lower buttons";
22
23 @include media-breakpoint-down(lg) {
24 grid-template-areas: "name name" "lower buttons";
25 }
26 }
27
28 .actor-names {
29 grid-area: name;
30 }
31
32 .actor-name {
33 flex-grow: 1;
34
35 .copy-button {
36 border: none;
37 padding: 5px;
38 margin-top: -2px;
39 }
40 }
41 }
42
43 .margin-content {
44 // margin-content is required, but child views have their own margins
45 // that match views outside the scope of accounts, so we only align
46 // them with the margins of .sub-menu when required.
47 margin: 0;
48 }
49
50 .right-buttons {
51 display: flex;
52 height: max-content;
53 margin-left: auto;
54 margin-top: 10px;
55
56 grid-row: buttons-start / span buttons-end;
57 grid-column: buttons-start;
58
59 @include media-breakpoint-down(lg) {
60 flex-flow: column-reverse;
61
62 a {
63 margin-top: 0.25rem;
64 margin-right: 0 !important;
65 }
66 }
67
68 a {
69 @include peertube-button-outline;
70 line-height: 1.8;
71 }
72
73 my-subscribe-button {
74 height: min-content;
75 }
76 }
77
78 @media screen and (max-width: $mobile-view) {
79 .sub-menu {
80 .actor {
81 flex-direction: column;
82
83 .actor-info .actor-names {
84 flex-direction: column;
85 align-items: normal;
86 }
87 }
88 }
89 }