]>
Commit | Line | Data |
---|---|---|
1 | @use 'sass:math'; | |
2 | @use '_variables' as *; | |
3 | @use '_mixins' as *; | |
4 | ||
5 | $nav-preview-tab-height: 30px; | |
6 | $base-padding: 15px; | |
7 | $input-border-radius: 3px; | |
8 | ||
9 | .root { | |
10 | display: flex; | |
11 | flex-direction: column; | |
12 | ||
13 | textarea { | |
14 | @include peertube-textarea(100%, 150px); | |
15 | ||
16 | background-color: pvar(--markdownTextareaBackgroundColor); | |
17 | ||
18 | font-family: monospace; | |
19 | font-size: 13px; | |
20 | border-bottom: 0; | |
21 | border-bottom-left-radius: 0; | |
22 | border-bottom-right-radius: 0; | |
23 | } | |
24 | ||
25 | .nav-preview { | |
26 | padding: 10px; | |
27 | ||
28 | border: 1px solid pvar(--inputBorderColor); | |
29 | border-top: 1px dashed pvar(--inputBorderColor); | |
30 | ||
31 | border-bottom-right-radius: $input-border-radius; | |
32 | border-bottom-left-radius: $input-border-radius; | |
33 | ||
34 | display: flex; | |
35 | flex-grow: 1; | |
36 | border-bottom-left-radius: unset; | |
37 | border-bottom-right-radius: unset; | |
38 | border-bottom: 2px solid pvar(--mainColor); | |
39 | ||
40 | .maximize-button { | |
41 | @include margin-left(15px); | |
42 | ||
43 | opacity: 0.6; | |
44 | cursor: default; | |
45 | ||
46 | &:not(.disabled) { | |
47 | cursor: pointer; | |
48 | ||
49 | &:hover, | |
50 | &:active { | |
51 | opacity: 1; | |
52 | } | |
53 | } | |
54 | } | |
55 | } | |
56 | ||
57 | .nav-pills { | |
58 | display: flex; | |
59 | align-items: center; | |
60 | justify-content: flex-end; | |
61 | ||
62 | > * { | |
63 | font-size: 0.9em !important; | |
64 | } | |
65 | } | |
66 | ||
67 | .tab-content { | |
68 | min-height: 75px; | |
69 | max-height: 210px; | |
70 | padding: $base-padding; | |
71 | ||
72 | overflow-y: auto; | |
73 | word-wrap: break-word; | |
74 | ||
75 | border: 1px solid pvar(--inputBorderColor); | |
76 | border-top: 0; | |
77 | ||
78 | border-bottom-left-radius: $input-border-radius; | |
79 | border-bottom-right-radius: $input-border-radius; | |
80 | } | |
81 | ||
82 | &.maximized { | |
83 | z-index: #{z(root-header) - 1}; | |
84 | position: fixed; | |
85 | top: $header-height; | |
86 | left: $menu-width; | |
87 | ||
88 | max-height: none !important; | |
89 | max-width: none !important; | |
90 | width: calc(100% - #{$menu-width}); | |
91 | height: calc(100vh - #{$header-height}); | |
92 | ||
93 | display: grid; | |
94 | grid-template-rows: auto 1fr; | |
95 | grid-template-columns: 1fr 1fr; | |
96 | ||
97 | background-color: pvar(--mainBackgroundColor); | |
98 | ||
99 | .nav-preview { | |
100 | grid-row: 1; | |
101 | grid-column: 1 / 3; | |
102 | ||
103 | border: 0; | |
104 | border-bottom: 2px solid pvar(--mainColor); | |
105 | ||
106 | padding: 20px 0; | |
107 | width: 100% !important; | |
108 | ||
109 | .maximize-button { | |
110 | @include margin-right(15px); | |
111 | } | |
112 | } | |
113 | ||
114 | textarea { | |
115 | grid-column: 1; | |
116 | ||
117 | border: 0; | |
118 | border-right: 1px dashed pvar(--inputBorderColor); | |
119 | ||
120 | resize: none; | |
121 | } | |
122 | ||
123 | ::ng-deep .tab-content { | |
124 | grid-column: 2; | |
125 | ||
126 | border: 0; | |
127 | ||
128 | display: block; | |
129 | overflow-y: auto; | |
130 | word-wrap: break-word; | |
131 | ||
132 | scrollbar-color: pvar(--actionButtonColor) pvar(--mainBackgroundColor); | |
133 | } | |
134 | ||
135 | textarea, | |
136 | ::ng-deep .tab-content { | |
137 | grid-row: 2; | |
138 | ||
139 | height: 100% !important; | |
140 | max-height: none !important; | |
141 | border-radius: 0; | |
142 | ||
143 | padding: 15px; | |
144 | } | |
145 | ||
146 | @media screen and (max-width: $mobile-view) { | |
147 | grid-template-rows: auto 45% 1fr; | |
148 | grid-template-columns: 1fr; | |
149 | ||
150 | .nav-preview { | |
151 | grid-column: 1; | |
152 | } | |
153 | ||
154 | textarea { | |
155 | grid-row: 2; | |
156 | grid-column: 1; | |
157 | border: 0; | |
158 | border-bottom: 1px dashed pvar(--inputBorderColor);; | |
159 | } | |
160 | ||
161 | ::ng-deep .tab-content { | |
162 | grid-column: 1; | |
163 | grid-row: 3; | |
164 | } | |
165 | } | |
166 | } | |
167 | } | |
168 | ||
169 | :host-context(.main-col.expanded) { | |
170 | .root.maximized { | |
171 | left: 0; | |
172 | width: 100%; | |
173 | } | |
174 | } |