aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
authorKim <1877318+kimsible@users.noreply.github.com>2020-04-28 14:53:43 +0200
committerGitHub <noreply@github.com>2020-04-28 14:53:43 +0200
commitb15fe00f7409b27573e162192530bc73e3f918b1 (patch)
treea71df67cee37a60f4de573ca9347aa3262cd8463 /client/src/sass
parent4682468d4d07e0864155dd2b403d93754786ea13 (diff)
downloadPeerTube-b15fe00f7409b27573e162192530bc73e3f918b1.tar.gz
PeerTube-b15fe00f7409b27573e162192530bc73e3f918b1.tar.zst
PeerTube-b15fe00f7409b27573e162192530bc73e3f918b1.zip
Add maximized mode to markdown-textarea + CSS improvements (#2660)
* Add arrows-angle-contract/expand bootstrap icons * Add grey textarea-background-color * Add maximized support to markdown-textarea + improve column display * Refactor CSS + add ResizeObservable * Replace bootstrap icons with softies * Add ResizeObserver typing definition * Add focus on textarea + Fix Observables * Propage component changes on markdown plugins * Ignore ResizeObserver not implemented in typescript yet * Move observers from constructor to click event * Add scss and css variables * Replace textareaWidth with textareaMaxWidth to fix others textareas * Clean unused css rules * Fix ResizeObserver unknown by TypeScript compiler * Set max-width: 100% for small and mobile views * Fix textarea/preview height on maximized mode * Add common padding textarea/preview side-by-side * Hide scrollbar sub-menu on small-views * Add maximized mode for mobile views * Fix sass calculate syntax * Revert custom CSS variable for inputBorderRadius and inputBorderColor * Remove unsued methods * Fix missing implement method Co-authored-by: kimsible <kimsible@users.noreply.github.com>
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/application.scss18
-rw-r--r--client/src/sass/include/_variables.scss4
2 files changed, 22 insertions, 0 deletions
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index cc6552705..ff6ce394f 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -38,6 +38,8 @@ body {
38 --inputBackgroundColor: #{$input-background-color}; 38 --inputBackgroundColor: #{$input-background-color};
39 --inputPlaceholderColor: #{$input-placeholder-color}; 39 --inputPlaceholderColor: #{$input-placeholder-color};
40 40
41 --textareaBackgroundColor: #{$textarea-background-color};
42
41 --actionButtonColor: #{$grey-foreground-color}; 43 --actionButtonColor: #{$grey-foreground-color};
42 --supportButtonBackgroundColor: #{transparent}; 44 --supportButtonBackgroundColor: #{transparent};
43 --supportButtonColor: #{var(--actionButtonColor)}; 45 --supportButtonColor: #{var(--actionButtonColor)};
@@ -144,6 +146,16 @@ label {
144 padding-right: $expanded-horizontal-margins; 146 padding-right: $expanded-horizontal-margins;
145 } 147 }
146 } 148 }
149
150 &.lock-scroll .main-row > router-outlet + * {
151 // Lock and hide body scrollbars
152 position: fixed;
153
154 // Lock and hide sub-menu scrollbars
155 .sub-menu {
156 overflow-x: hidden;
157 }
158 }
147} 159}
148 160
149.title-page { 161.title-page {
@@ -304,6 +316,12 @@ table {
304 margin-bottom: $sub-menu-margin-bottom-small-view; 316 margin-bottom: $sub-menu-margin-bottom-small-view;
305 } 317 }
306 318
319 my-markdown-textarea {
320 .root {
321 max-width: 100% !important;
322 }
323 }
324
307 input[type=text], 325 input[type=text],
308 input[type=password], 326 input[type=password],
309 input[type=email], 327 input[type=email],
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index cf7657550..72eb7b61e 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -68,6 +68,8 @@ $theater-bottom-space: 115px;
68$input-background-color: $bg-color; 68$input-background-color: $bg-color;
69$input-placeholder-color: #898989; 69$input-placeholder-color: #898989;
70 70
71$textarea-background-color: $grey-background-hover-color;
72
71$sub-menu-margin-bottom: 30px; 73$sub-menu-margin-bottom: 30px;
72$sub-menu-margin-bottom-small-view: 10px; 74$sub-menu-margin-bottom-small-view: 10px;
73 75
@@ -95,6 +97,8 @@ $variables: (
95 --inputBackgroundColor: var(--inputBackgroundColor), 97 --inputBackgroundColor: var(--inputBackgroundColor),
96 --inputPlaceholderColor: var(--inputPlaceholderColor), 98 --inputPlaceholderColor: var(--inputPlaceholderColor),
97 99
100 --textareaBackgroundColor: var(--textareaBackgroundColor),
101
98 --actionButtonColor: var(--actionButtonColor), 102 --actionButtonColor: var(--actionButtonColor),
99 --supportButtonColor: var(--supportButtonColor), 103 --supportButtonColor: var(--supportButtonColor),
100 --supportButtonBackgroundColor: var(--supportButtonBackgroundColor), 104 --supportButtonBackgroundColor: var(--supportButtonBackgroundColor),