width: $width;
color: pvar(--inputForegroundColor);
background-color: pvar(--inputBackgroundColor);
- border: 1px solid #C6C6C6;
+ border: 1px solid $input-border-color;
border-radius: 3px;
font-size: 15px;
@mixin peertube-textarea ($width, $height) {
@include peertube-input-text($width);
- color: pvar(--textareaForegroundColor);
- background-color: pvar(--textareaBackgroundColor);
+ color: pvar(--textareaForegroundColor) !important;
+ background-color: pvar(--textareaBackgroundColor) !important;
height: $height;
padding: 5px 15px;
font-size: 15px;
&.disabled {
cursor: default;
color: #fff;
- background-color: #C6C6C6;
+ background-color: $input-border-color;
}
my-global-icon {
&.disabled {
cursor: default;
color: pvar(--mainColor);
- background-color: #C6C6C6;
+ background-color: $input-border-color;
}
my-global-icon {
@mixin grey-button {
@include button-focus($grey-button-outline-color);
- background-color: $grey-background-color;
+ background-color: pvar(--greyBackgroundColor);
color: pvar(--greyForegroundColor);
&:hover,
&[disabled],
&.disabled {
color: pvar(--greyForegroundColor);
- background-color: $grey-background-hover-color;
+ background-color: pvar(--greySecondaryBackgroundColor);
}
&[disabled],
}
@mixin peertube-button {
- @include padding(0, 17px, 0, 13px);
+ padding: 0 13px;
border: 0;
font-weight: $font-semibold;
font-size: 15px;
height: $button-height;
line-height: $button-height;
- // FIXME: because of primeng that redefines border-radius of all input[type="..."]
+
+ // Because of primeng that redefines border-radius of all input[type="..."]
border-radius: 3px !important;
+
text-align: center;
cursor: pointer;
+
+ my-global-icon + * {
+ @include margin-right(4px);
+ }
}
@mixin peertube-button-link {
background: pvar(--inputBackgroundColor);
position: relative;
font-size: 15px;
+ height: min-content;
&.disabled {
background-color: #E5E5E5;
select {
padding: 0 35px 0 12px;
position: relative;
- border: 1px solid #C6C6C6;
+ border: 1px solid $input-border-color;
background: transparent none;
appearance: none;
- cursor: pointer;
height: $button-height;
text-overflow: ellipsis;
color: pvar(--mainForegroundColor);
option {
color: #000;
+
+ &[value=undefined] {
+ font-weight: $font-semibold;
+ }
}
}
&.peertube-select-button {
@include grey-button;
- select,
- option {
+ select {
font-weight: $font-semibold;
color: pvar(--greyForegroundColor);
border: 0;
top: 0;
width: 18px;
height: 18px;
- border: 1px solid #C6C6C6;
+ border: 1px solid $input-border-color;
border-radius: 100%;
background: #fff;
}
width: 18px;
min-width: 18px;
height: 18px;
- border: $border-width solid #C6C6C6;
+ border: $border-width solid $input-border-color;
border-radius: 3px;
vertical-align: middle;
cursor: pointer;
}
}
-@mixin table-badge {
+@mixin peertube-badge {
border-radius: 2px;
padding: 1/4em 1/2em;
text-transform: uppercase;
margin-bottom: 20px;
@if $separator {
- border-bottom: 1px solid #C6C6C6;
+ border-bottom: 1px solid $input-border-color;
}
@media screen and (max-width: $small-view) {
span {
position: absolute;
color: $grey-foreground-color;
+
@if $small {
top: -1px;
}
height: $avatar-height;
my-actor-avatar {
- @include actor-avatar-size($avatar-height);
+ display: inline-block;
}
div {