+// Bootstrap grid utilities require functions, variables and mixins
+@import 'node_modules/bootstrap/scss/functions';
+@import 'node_modules/bootstrap/scss/variables';
+@import 'node_modules/bootstrap/scss/mixins';
+@import 'node_modules/bootstrap/scss/grid';
+
@import '_variables';
@import '_mixins';
display: flex;
height: max-content;
margin-left: auto;
- margin-top: 20px;
+ margin-top: 10px;
+
+ @include media-breakpoint-down(lg) {
+ flex-flow: column-reverse;
+
+ a {
+ margin-top: 0.25rem;
+ margin-right: 0 !important;
+ }
+ }
a {
@include peertube-button-outline;
<div class="form-group">
<label i18n for="role">Role</label>
<div class="peertube-select-container">
- <select id="role" formControlName="role">
+ <select id="role" formControlName="role" class="form-control">
<option *ngFor="let role of roles" [value]="role.value">
{{ role.label }}
</option>
<div class="form-group">
<label i18n for="videoQuota">Video quota</label>
<div class="peertube-select-container">
- <select id="videoQuota" formControlName="videoQuota">
+ <select id="videoQuota" formControlName="videoQuota" class="form-control">
<option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value">
{{ videoQuotaOption.label }}
</option>
<div class="form-group">
<label i18n for="videoQuotaDaily">Daily video quota</label>
<div class="peertube-select-container">
- <select id="videoQuotaDaily" formControlName="videoQuotaDaily">
+ <select id="videoQuotaDaily" formControlName="videoQuotaDaily" class="form-control">
<option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value">
{{ videoQuotaDailyOption.label }}
</option>
<div class="form-group">
<div class="input-group">
- <input id="password" [attr.type]="showPassword ? 'text' : 'password'"
+ <input id="password" [attr.type]="showPassword ? 'text' : 'password'" class="form-control"
formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
>
<div class="input-group-append">
+// Bootstrap grid utilities require functions, variables and mixins
+@import 'node_modules/bootstrap/scss/functions';
+@import 'node_modules/bootstrap/scss/variables';
+@import 'node_modules/bootstrap/scss/mixins';
+@import 'node_modules/bootstrap/scss/grid';
+
@import '_variables';
@import '_mixins';
grid-template-rows: 1fr auto / 1fr auto;
grid-template-areas: "name buttons" "lower buttons";
- @media screen and (max-width: #{map-get($grid-breakpoints, lg)}) {
+ @include media-breakpoint-down(lg) {
grid-template-areas: "name name" "lower buttons";
}
}
display: flex;
height: max-content;
margin-left: auto;
- margin-top: 20px;
+ margin-top: 10px;
grid-row: buttons-start / span buttons-end;
grid-column: buttons-start;
+ @include media-breakpoint-down(lg) {
+ flex-flow: column-reverse;
+
+ a {
+ margin-top: 0.25rem;
+ margin-right: 0 !important;
+ }
+ }
+
a {
@include peertube-button-outline;
line-height: 1.8;
font-size: 15px;
}
+ &:not(.big) {
+ white-space: nowrap;
+ }
+
&.big {
height: 35px;
+ & > button:first-child {
+ width: 175px;
+ }
+
button .extra-text {
span:first-child {
line-height: 80%;
color: var(--mainForegroundColor);
}
-.btn-outline-secondary {
- border-color: $input-border-color;
-}
-
label {
font-weight: $font-bold;
font-size: 15px;
}
.row {
- margin: 0;
+ margin: 0 !important;
}
.main-col {
.sub-menu {
padding-left: 50px;
+ padding-right: 50px;
.title-page {
font-size: 17px;
z-index: z(tooltip) !important;
}
+.btn-outline-secondary {
+ border-color: $input-border-color;
+
+ &:focus-within,
+ &:focus,
+ &:hover {
+ color: #fff;
+ background-color: #6c757d;
+ }
+}
+
.btn-outline-tertiary {
color: var(--secondaryColor);
border-color: var(--secondaryColor);
+ &:focus-within,
+ &:focus,
&:hover {
color: var(--mainBackgroundColor);
background-color: var(--secondaryColor);
}
}
}
+
+.input-group > .form-control {
+ flex: initial;
+}