-@import '_variables';
-@import '_mixins';
+// 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';
+
+label {
+ font-weight: $font-regular;
+ font-size: 100%;
+}
.peertube-select-container {
@include peertube-select-container(auto);
}
-.peertube-select-disabled-container {
- @include peertube-select-disabled-container(auto);
+.title-page a {
+ color: pvar(--mainForegroundColor);
+
+ &:hover {
+ text-decoration: none;
+ opacity: .8;
+ }
+}
+
+my-peertube-checkbox {
+ display: block;
+ margin-bottom: 1rem;
}
-.form-group-checkbox {
- my-help { margin-left: 5px }
+.nav-tabs {
+ margin-bottom: 15px;
}
.video-edit {
height: 100%;
+ min-height: 300px;
.form-group {
margin-bottom: 25px;
input {
@include peertube-input-text(100%);
display: block;
+ }
- &[type=checkbox] {
- @include peertube-checkbox(1px);
- }
+ .label-tags + span {
+ font-size: 15px;
+ }
+
+ .advanced-settings .form-group {
+ margin-bottom: 20px;
}
+}
+
+.captions {
- input, select {
- font-size: 15px
+ .captions-header {
+ text-align: right;
+ margin-bottom: 1rem;
+
+ .create-caption {
+ @include create-button;
+ }
}
- .form-group-checkbox {
+ .caption-entry {
display: flex;
+ height: 40px;
align-items: center;
- label {
- font-weight: $font-regular;
- margin: 0;
+ a.caption-entry-label {
+ @include disable-default-a-behaviour;
+
+ flex-grow: 1;
+ color: #000;
+
+ &:hover {
+ opacity: 0.8;
+ }
}
- input {
- width: 10px;
- margin-right: 10px;
+ .caption-entry-label {
+ font-size: 15px;
+ font-weight: bold;
+
+ margin-right: 20px;
+ width: 150px;
}
- }
- .label-tags + span {
- font-size: 15px;
- }
+ .caption-entry-state {
+ width: 200px;
+
+ &.caption-entry-state-create {
+ color: #39CC0B;
+ }
- .root-tabset /deep/ > .nav {
- margin-left: 15px;
- margin-bottom: 15px;
+ &.caption-entry-state-delete {
+ color: #FF0000;
+ }
+ }
- .nav-link {
- display: flex !important;
- align-items: center;
- height: 30px !important;
- padding: 0 15px !important;
+ .caption-entry-delete {
+ @include peertube-button;
+ @include grey-button;
}
}
- .advanced-settings .form-group {
- margin-bottom: 20px;
+ .no-caption {
+ text-align: center;
+ font-size: 15px;
}
}
display: inline-block;
margin-right: 25px;
- color: #585858;
+ color: pvar(--greyForegroundColor);
font-size: 15px;
}
.submit-button {
@include peertube-button;
@include orange-button;
+ @include button-with-icon(20px, 1px);
display: inline-block;
border: none;
padding: 0;
outline: 0;
+ color: inherit;
+ font-weight: $font-semibold;
}
+ }
+}
- .icon.icon-validate {
- @include icon(20px);
+p-calendar {
+ display: block;
- cursor: inherit;
- position: relative;
- top: -1px;
- margin-right: 4px;
- background-image: url('../../../../assets/images/global/validate.svg');
+ ::ng-deep {
+ input,
+ .ui-calendar {
+ width: 100%;
+ }
+
+ input {
+ @include peertube-input-text(100%);
+ color: #000;
}
}
}
-/deep/ {
- .ng2-tag-input {
- border: none !important;
- }
+@include ng2-tags;
- .ng2-tags-container {
- display: flex;
- align-items: center;
- border: 1px solid #C6C6C6;
- border-radius: 3px;
- padding: 5px !important;
- height: 40px;
- }
+// columns for the video
+.col-video-edit {
+ @include make-col-ready();
- tag-input-form {
- input {
- height: 30px !important;
- background-color: #fff !important;
+ @include media-breakpoint-up(md) {
+ @include make-col(7);
+
+ & + .col-video-edit {
+ @include make-col(5);
}
}
- tag {
- background-color: #E5E5E5 !important;
- border-radius: 3px !important;
- font-size: 15px !important;
- color: #000 !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;
+ @include media-breakpoint-up(xl) {
+ @include make-col(8);
+
+ & + .col-video-edit {
+ @include make-col(4);
}
}
+}
- 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;
- fill: #585858 !important;
- }
+:host-context(.expanded) {
+ .col-video-edit {
+ @include media-breakpoint-up(md) {
+ @include make-col(8);
- &:hover {
- transform: none !important;
+ & + .col-video-edit {
+ @include make-col(4);
+ }
}
}
}