aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-03-25 13:42:55 +0100
committerChocobozzz <chocobozzz@cpy.re>2021-03-31 09:05:51 +0200
commit60c35932f6a14cfe83bb0e54407427cce70171ea (patch)
tree6d15665a5375e14bea8eb6d63acc8f4139372dad /client/src/sass
parent4097c6d66cb2919c28b5bce44b259e630923fbe0 (diff)
downloadPeerTube-60c35932f6a14cfe83bb0e54407427cce70171ea.tar.gz
PeerTube-60c35932f6a14cfe83bb0e54407427cce70171ea.tar.zst
PeerTube-60c35932f6a14cfe83bb0e54407427cce70171ea.zip
Redesign channel page
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/application.scss25
-rw-r--r--client/src/sass/include/_mixins.scss50
-rw-r--r--client/src/sass/include/_variables.scss7
3 files changed, 73 insertions, 9 deletions
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index a0009eecc..0a92afef3 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -36,7 +36,9 @@ body {
36 36
37 --menuBackgroundColor: #{$menu-background}; 37 --menuBackgroundColor: #{$menu-background};
38 --menuForegroundColor: #{$menu-color}; 38 --menuForegroundColor: #{$menu-color};
39
39 --submenuColor: #{$sub-menu-color}; 40 --submenuColor: #{$sub-menu-color};
41 --channelBackgroundColor: #{$channel-background-color};
40 42
41 --inputForegroundColor: #{$input-foreground-color}; 43 --inputForegroundColor: #{$input-foreground-color};
42 --inputBackgroundColor: #{$input-background-color}; 44 --inputBackgroundColor: #{$input-background-color};
@@ -277,11 +279,6 @@ my-input-toggle-hidden ::ng-deep input {
277 font-weight: bold; 279 font-weight: bold;
278} 280}
279 281
280@keyframes spin {
281 from { transform: scale(1) rotate(0deg);}
282 to { transform: scale(1) rotate(360deg);}
283}
284
285// In tables, don't have a hover different background 282// In tables, don't have a hover different background
286table { 283table {
287 .action-button-edit, .action-button-delete { 284 .action-button-edit, .action-button-delete {
@@ -468,3 +465,21 @@ ngx-loading-bar {
468 } 465 }
469 } 466 }
470} 467}
468
469// Utils
470
471.peertube-button {
472 @include peertube-button;
473}
474
475.peertube-button-link {
476 @include peertube-button-link;
477}
478
479.orange-button {
480 @include orange-button;
481}
482
483.orange-button-inverted {
484 @include orange-button-inverted;
485}
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index cf5ac8fd8..82c60a59d 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -31,9 +31,19 @@
31 text-overflow: ellipsis; 31 text-overflow: ellipsis;
32} 32}
33 33
34@mixin prefix($property, $parameters...) { 34@mixin fade-text ($fade-after, $background-color) {
35 @each $prefix in -webkit-, -moz-, -ms-, -o-, "" { 35 position: relative;
36 #{$prefix}#{$property}: $parameters; 36 overflow: hidden;
37
38 &:after {
39 content: '';
40 pointer-events: none;
41 width: 100%;
42 height: 100%;
43 position: absolute;
44 left: 0;
45 top: 0;
46 background: linear-gradient(transparent $fade-after, $background-color);
37 } 47 }
38} 48}
39 49
@@ -138,6 +148,33 @@
138 } 148 }
139} 149}
140 150
151@mixin orange-button-inverted {
152 @include button-focus(pvar(--mainColorLightest));
153
154 border: 2px solid pvar(--mainColor);
155 font-weight: $font-regular;
156
157 &, &:active, &:focus {
158 color: pvar(--mainColor);
159 background-color: pvar(--mainBackgroundColor);
160 }
161
162 &:hover {
163 color: pvar(--mainColor);
164 background-color: pvar(--mainColorLightest);
165 }
166
167 &[disabled], &.disabled {
168 cursor: default;
169 color: pvar(--mainColor);
170 background-color: #C6C6C6;
171 }
172
173 my-global-icon {
174 @include apply-svg-color(pvar(--mainColor))
175 }
176}
177
141@mixin tertiary-button { 178@mixin tertiary-button {
142 @include button-focus($grey-button-outline-color); 179 @include button-focus($grey-button-outline-color);
143 180
@@ -509,6 +546,13 @@
509 min-height: $size; 546 min-height: $size;
510} 547}
511 548
549@mixin channel-avatar ($size) {
550 width: $size;
551 height: $size;
552 min-width: $size;
553 min-height: $size;
554}
555
512@mixin chevron ($size, $border-width) { 556@mixin chevron ($size, $border-width) {
513 border-style: solid; 557 border-style: solid;
514 border-width: $border-width $border-width 0 0; 558 border-width: $border-width $border-width 0 0;
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index c8316473d..bcd28215b 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -16,9 +16,10 @@ $grey-foreground-hover-color: #303030;
16$grey-button-outline-color: scale-color($grey-foreground-color, $alpha: -95%); 16$grey-button-outline-color: scale-color($grey-foreground-color, $alpha: -95%);
17 17
18$main-color: hsl(24, 90%, 50%); 18$main-color: hsl(24, 90%, 50%);
19$main-hover-color: lighten($main-color, 5%);
20$main-color-lighter: lighten($main-color, 10%); 19$main-color-lighter: lighten($main-color, 10%);
21$main-color-lightest: lighten($main-color, 40%); 20$main-color-lightest: lighten($main-color, 40%);
21$main-hover-color: lighten($main-color, 5%);
22
22$secondary-color: hsl(187, 77%, 34%); 23$secondary-color: hsl(187, 77%, 34%);
23 24
24$support-button: inherit; 25$support-button: inherit;
@@ -50,6 +51,8 @@ $menu-lateral-padding: 26px;
50$sub-menu-color: #F7F7F7; 51$sub-menu-color: #F7F7F7;
51$sub-menu-height: 81px; 52$sub-menu-height: 81px;
52 53
54$channel-background-color: #f6ede8;
55
53$footer-height: 30px; 56$footer-height: 30px;
54$footer-margin: 30px; 57$footer-margin: 30px;
55 58
@@ -98,7 +101,9 @@ $variables: (
98 101
99 --menuBackgroundColor: var(--menuBackgroundColor), 102 --menuBackgroundColor: var(--menuBackgroundColor),
100 --menuForegroundColor: var(--menuForegroundColor), 103 --menuForegroundColor: var(--menuForegroundColor),
104
101 --submenuColor: var(--submenuColor), 105 --submenuColor: var(--submenuColor),
106 --channelBackgroundColor: var(--channelBackgroundColor),
102 107
103 --inputForegroundColor: var(--inputForegroundColor), 108 --inputForegroundColor: var(--inputForegroundColor),
104 --inputBackgroundColor: var(--inputBackgroundColor), 109 --inputBackgroundColor: var(--inputBackgroundColor),