min-height: $button-height;
padding-top: 0;
padding-bottom: 0;
+ flex-wrap: nowrap;
.input-group-text{
font-size: 14px;
@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;
+
+ @media screen and (max-width: $width) {
+ width: 100%;
+ }
+}
+
@mixin peertube-select-container ($width) {
padding: 0;
margin: 0;
font-size: 130%;
}
}
+
+ list-overflow {
+ display: inline-block;
+ width: max-content;
+ }
}
}
&.secondary {
background-color: pvar(--secondaryColor);
}
+
+ &.red {
+ background-color: lighten($color: #c54130, $amount: 10);
+ }
}
}
.dashboard-num, .dashboard-text {
text-align: center;
font-size: 130%;
- line-height: 21px;
color: pvar(--mainForegroundColor);
line-height: 30px;
margin-bottom: 20px;
}
}
-@mixin ng2-tags {
- ::ng-deep {
- .ng2-tag-input {
- border: none !important;
- }
-
- .ng2-tags-container {
- display: flex;
- align-items: center;
- border: 1px solid #C6C6C6;
- border-radius: 3px;
- padding: 5px !important;
- height: max-content;
-
- &:focus-within {
- box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
- }
- }
-
- tag-input-form {
- input {
- height: 30px !important;
- font-size: 12px !important;
-
- background-color: pvar(--mainBackgroundColor) !important;
- color: pvar(--mainForegroundColor) !important;
- }
- }
-
- tag {
- background-color: $grey-background-color !important;
- color: #000 !important;
- border-radius: 3px !important;
- font-size: 12px !important;
- height: 30px !important;
- line-height: 30px !important;
- margin: 0 5px 0 0 !important;
- cursor: default !important;
- padding: 0 8px 0 10px !important;
-
- div {
- height: 100% !important;
- }
- }
-
- delete-icon {
- cursor: pointer !important;
- height: auto !important;
- vertical-align: middle !important;
- padding-left: 6px !important;
-
- svg {
- position: relative;
- top: -1px;
- height: auto !important;
- vertical-align: middle !important;
-
- path {
- fill: pvar(--greyForegroundColor) !important;
- }
- }
-
- &:hover {
- transform: none !important;
- }
- }
- }
-}
-
@mixin divider($color: pvar(--submenuColor), $background: pvar(--mainBackgroundColor)) {
width: 95%;
border-top: .05rem solid $color;