text-overflow: ellipsis;
}
-@mixin prefix($property, $parameters...) {
- @each $prefix in -webkit-, -moz-, -ms-, -o-, "" {
- #{$prefix}#{$property}: $parameters;
+@mixin fade-text ($fade-after, $background-color) {
+ position: relative;
+ overflow: hidden;
+
+ &:after {
+ content: '';
+ pointer-events: none;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ left: 0;
+ top: 0;
+ background: linear-gradient(transparent $fade-after, $background-color);
}
}
word-break: break-word;
word-wrap: break-word;
overflow-wrap: break-word;
- -webkit-hyphens: auto;
- -ms-hyphens: auto;
- -moz-hyphens: auto;
hyphens: auto;
}
::ng-deep .material {
color: $color;
}
-
- ::ng-deep svg {
- path[fill="#000"],
- g[fill="#000"],
- rect[fill="#000"],
- circle[fill="#000"],
- polygon[fill="#000"] {
- fill: $color;
- }
-
- path[stroke="#000"],
- g[stroke="#000"],
- rect[stroke="#000"],
- circle[stroke="#000"],
- polygon[stroke="#000"] {
- stroke: $color;
- }
-
- stop[stop-color="#000"] {
- stop-color: $color;
- }
- }
}
@mixin fill-svg-color ($color) {
}
}
+@mixin orange-button-inverted {
+ @include button-focus(pvar(--mainColorLightest));
+
+ border: 2px solid pvar(--mainColor);
+ font-weight: $font-regular;
+
+ &, &:active, &:focus {
+ color: pvar(--mainColor);
+ background-color: pvar(--mainBackgroundColor);
+ }
+
+ &:hover {
+ color: pvar(--mainColor);
+ background-color: pvar(--mainColorLightest);
+ }
+
+ &[disabled], &.disabled {
+ cursor: default;
+ color: pvar(--mainColor);
+ background-color: #C6C6C6;
+ }
+
+ my-global-icon {
+ @include apply-svg-color(pvar(--mainColor))
+ }
+}
+
@mixin tertiary-button {
@include button-focus($grey-button-outline-color);
@mixin grey-button {
@include button-focus($grey-button-outline-color);
+
background-color: $grey-background-color;
color: pvar(--greyForegroundColor);
}
@mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) {
+ display: inline-flex;
+ align-items: center;
+ line-height: normal !important;
+
my-global-icon {
position: relative;
width: $width;
}
}
-@mixin peertube-button-file ($width) {
+@mixin peertube-file {
position: relative;
overflow: hidden;
display: inline-block;
- width: $width;
min-height: 30px;
- @include peertube-button;
-
input[type=file] {
position: absolute;
top: 0;
}
}
+@mixin peertube-button-file ($width) {
+ width: $width;
+
+ @include peertube-file;
+ @include peertube-button;
+}
+
@mixin icon ($size) {
display: inline-block;
background-repeat: no-repeat;
z-index: 100;
}
+@mixin responsive-width ($width) {
+ width: $width;
-@mixin ng-select ($width) {
- ::ng-deep ng-select {
- width: $width;
-
- @media screen and (max-width: $width) {
- width: 100%;
- }
+ @media screen and (max-width: $width) {
+ width: 100%;
}
}
min-height: $size;
}
+@mixin channel-avatar ($size) {
+ width: $size;
+ height: $size;
+ min-width: $size;
+ min-height: $size;
+}
+
@mixin chevron ($size, $border-width) {
border-style: solid;
border-width: $border-width $border-width 0 0;
font-size: 130%;
}
}
+
+ list-overflow {
+ display: inline-block;
+ width: max-content;
+ }
}
}
.dashboard-num, .dashboard-text {
text-align: center;
font-size: 130%;
- line-height: 21px;
color: pvar(--mainForegroundColor);
line-height: 30px;
margin-bottom: 20px;