-@import '_variables';
-@import '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
-.form-group {
- margin-bottom: 25px;
+$form-base-input-width: 340px;
+
+form {
+ padding-bottom: 1.5rem;
+}
+
+my-markdown-textarea {
+ display: block;
+ max-width: 500px;
}
-input[type=text] {
- @include peertube-input-text(340px);
+.homepage my-markdown-textarea {
display: block;
+ max-width: 90%;
+
+ ::ng-deep textarea {
+ height: 300px !important;
+ }
+}
+
+input[type=text],
+input[type=number] {
+ @include peertube-input-text($form-base-input-width);
+
+ display: block;
+}
+
+.number-with-unit {
+ position: relative;
+ width: min-content;
+
+ input[type=number] + span {
+ position: absolute;
+ top: 0.2em;
+ right: 2.5rem;
+ }
+
+ input[disabled] {
+ background-color: #f9f9f9;
+ pointer-events: none;
+ }
}
input[type=checkbox] {
}
.peertube-select-container {
- @include peertube-select-container(340px);
+ @include peertube-select-container($form-base-input-width);
+}
+
+my-select-options,
+my-select-custom-value,
+my-select-checkbox {
+ @include responsive-width($form-base-input-width);
+
+ display: block;
}
input[type=submit] {
@include peertube-button;
@include orange-button;
+ @include margin-left(auto);
+
+ display: flex;
- margin-top: 20px;
+ + .form-error {
+ @include margin-left(5px);
- & + .form-error {
display: inline;
- margin-left: 5px;
}
}
.inner-form-title {
- text-transform: uppercase;
- color: var(--mainColor);
- font-weight: $font-bold;
- font-size: 13px;
- margin-top: 30px;
- margin-bottom: 10px;
+ @include settings-big-title;
+}
+
+.inner-form-description {
+ font-size: 15px;
}
textarea {
@include peertube-textarea(500px, 150px);
+ max-width: 100%;
display: block;
- &#instanceShortDescription {
- height: 100px;
+ &.small {
+ height: 75px;
}
}
.label-small-info {
font-style: italic;
margin-bottom: 10px;
+ font-size: 14px;
+}
+
+.disabled-checkbox-extra {
+ &,
+ ::ng-deep label {
+ opacity: .5;
+ pointer-events: none;
+ }
+}
+
+input[disabled] {
+ opacity: 0.5;
+}
+
+ngb-tabset:not(.previews) ::ng-deep {
+ .nav-link {
+ font-size: 105%;
+ }
+}
+
+.submit-error {
+ margin-bottom: 20px;
+}
+
+.alert-signup {
+ width: fit-content;
+ margin-top: 10px;
+}
+
+.callout-container {
+ position: absolute;
+ display: flex;
+ height: 0;
+ width: 100%;
+ justify-content: right;
+
+ .callout-link {
+ @include peertube-button-link;
+
+ position: relative;
+ right: 3.3em;
+ top: .3em;
+ font-size: 90%;
+ color: pvar(--mainColor);
+ background-color: pvar(--mainBackgroundColor);
+ padding: 0 .3em;
+ }
}