87a1c06d4b
* Have separate column for transcript and encode status * Display error message sent from VEM PROD-1432
679 lines
13 KiB
SCSS
679 lines
13 KiB
SCSS
.view-video-uploads {
|
|
.content-primary,
|
|
.content-supplementary {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.nav-actions {
|
|
.fa-cloud-upload {
|
|
@extend %t-copy;
|
|
|
|
vertical-align: bottom;
|
|
|
|
@include margin-right($baseline/45);
|
|
}
|
|
}
|
|
|
|
.fixed-container {
|
|
position: fixed !important;
|
|
top: 0 !important;
|
|
}
|
|
|
|
.button-link {
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
color: $ui-link-color;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.message-error {
|
|
color: $red;
|
|
}
|
|
|
|
.video-transcripts-wrapper {
|
|
display: block;
|
|
|
|
.button-link {
|
|
color: $ui-link-color !important;
|
|
}
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.video-transcript-content {
|
|
margin-top: ($baseline/2);
|
|
|
|
.transcript-upload-status-container {
|
|
.video-transcript-detail-status,
|
|
.more-details-action {
|
|
@include font-size(12);
|
|
@include line-height(12);
|
|
@include margin-left($baseline/4);
|
|
}
|
|
}
|
|
|
|
.transcript-upload-status-container.error {
|
|
color: $color-error;
|
|
}
|
|
|
|
.transcript-upload-status-container.success {
|
|
color: $color-ready;
|
|
}
|
|
|
|
.transcript-language-menu {
|
|
display: block;
|
|
width: 200px;
|
|
}
|
|
}
|
|
|
|
.course-video-settings-container {
|
|
position: absolute;
|
|
overflow: scroll;
|
|
top: 0;
|
|
right: -100%;
|
|
z-index: 1000;
|
|
width: 352px;
|
|
transition: all 0.3s ease;
|
|
background-color: $white;
|
|
-webkit-box-shadow: -3px 0 3px 0 rgba(153, 153, 153, 0.3);
|
|
-moz-box-shadow: -3px 0 3px 0 rgba(153, 153, 153, 0.3);
|
|
box-shadow: -3px 0 3px 0 rgba(153, 153, 153, 0.3);
|
|
|
|
.action-close-wrapper {
|
|
.action-close-course-video-settings {
|
|
width: 100%;
|
|
padding: ($baseline/2) ($baseline*0.8);
|
|
background-color: $gray-u1;
|
|
border: transparent;
|
|
height: ($baseline*2.4);
|
|
color: $text-dark-black-blue;
|
|
|
|
@include font-size(16);
|
|
@include text-align(left);
|
|
}
|
|
}
|
|
|
|
.course-video-settings-wrapper {
|
|
margin-top: ($baseline*1.6);
|
|
padding: ($baseline) ($baseline*0.8);
|
|
|
|
.course-video-settings-title {
|
|
color: $black-t4;
|
|
margin: ($baseline*1.6) 0 ($baseline*0.8) 0;
|
|
font-weight: font-weight(semi-bold);
|
|
|
|
@include font-size(24);
|
|
}
|
|
|
|
.course-video-settings-message {
|
|
padding: ($baseline/2);
|
|
margin-bottom: ($baseline*0.8);
|
|
max-height: ($baseline*2.4);
|
|
color: $black;
|
|
|
|
@include font-size(16);
|
|
|
|
.icon {
|
|
@include margin-right($baseline/4);
|
|
}
|
|
}
|
|
|
|
.course-video-settings-message-wrapper.success .course-video-settings-message {
|
|
background-color: $state-success-bg;
|
|
border: solid 1px $state-success-border;
|
|
}
|
|
|
|
.course-video-settings-message-wrapper.error .course-video-settings-message {
|
|
background-color: $state-danger-bg;
|
|
border: solid 1px $state-danger-border;
|
|
}
|
|
|
|
.organization-credentials-content {
|
|
margin-top: ($baseline*1.6);
|
|
|
|
.org-credentials-wrapper input {
|
|
width: 65%;
|
|
margin-top: ($baseline*0.8);
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.transcript-preferance-wrapper {
|
|
margin-top: ($baseline*1.6);
|
|
|
|
.icon.fa-info-circle {
|
|
@include margin-left($baseline*0.75);
|
|
}
|
|
}
|
|
|
|
.transcript-preferance-wrapper.error .transcript-preferance-label {
|
|
color: $color-error;
|
|
}
|
|
|
|
.error-info,
|
|
.error-icon .fa-info-circle {
|
|
color: $color-error;
|
|
}
|
|
|
|
.error-info {
|
|
@include font-size(16);
|
|
@include margin-left($baseline/2);
|
|
}
|
|
|
|
.transcript-preferance-label {
|
|
@include font-size(15);
|
|
|
|
color: $black-t4;
|
|
font-weight: font-weight(semi-bold);
|
|
display: block;
|
|
}
|
|
|
|
.transcript-provider-group,
|
|
.transcript-turnaround,
|
|
.transcript-fidelity,
|
|
.video-source-language,
|
|
.selected-transcript-provider {
|
|
margin-top: ($baseline*0.8);
|
|
}
|
|
|
|
.selected-transcript-provider {
|
|
.action-change-provider {
|
|
@include margin-left($baseline/2);
|
|
}
|
|
}
|
|
|
|
.transcript-provider-group {
|
|
input[type=radio] {
|
|
margin: 0 ($baseline/2);
|
|
}
|
|
|
|
label {
|
|
font-weight: normal;
|
|
color: $black-t4;
|
|
|
|
@include font-size(15);
|
|
}
|
|
}
|
|
|
|
.transcript-turnaround-wrapper,
|
|
.transcript-fidelity-wrapper,
|
|
.video-source-language-wrapper,
|
|
.transcript-languages-wrapper {
|
|
display: none;
|
|
}
|
|
|
|
.transcript-languages-wrapper .transcript-preferance-label {
|
|
display: inline-block;
|
|
}
|
|
|
|
.transcript-languages-container .languages-container {
|
|
margin-top: ($baseline*0.8);
|
|
|
|
.transcript-language-container {
|
|
padding: ($baseline/4);
|
|
background-color: $gray-l6;
|
|
border-top: solid 1px $gray-l4;
|
|
border-bottom: solid 1px $gray-l4;
|
|
|
|
.remove-language-action {
|
|
display: inline-block;
|
|
|
|
@include float(right);
|
|
}
|
|
}
|
|
}
|
|
|
|
.transcript-language-menu-container {
|
|
margin-top: ($baseline*0.8);
|
|
|
|
.add-language-action {
|
|
display: inline-block;
|
|
|
|
.action-add-language {
|
|
@include margin-left($baseline/4);
|
|
}
|
|
|
|
.error-info {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.transcript-language-menu,
|
|
.video-source-language {
|
|
width: 60%;
|
|
}
|
|
}
|
|
|
|
.transcription-account-details {
|
|
margin-top: ($baseline*0.8);
|
|
|
|
span {
|
|
@include font-size(15);
|
|
}
|
|
}
|
|
|
|
.transcription-account-details.warning {
|
|
background-color: $state-warning-bg;
|
|
padding: ($baseline/2);
|
|
}
|
|
|
|
.action-cancel-course-video-settings {
|
|
@include margin-right($baseline/2);
|
|
}
|
|
|
|
.course-video-settings-footer {
|
|
margin-top: ($baseline*1.6);
|
|
|
|
.last-updated-text {
|
|
@include font-size(12);
|
|
|
|
display: block;
|
|
margin-top: ($baseline/2);
|
|
}
|
|
}
|
|
|
|
.button {
|
|
@extend %btn-primary-blue;
|
|
@extend %sizing;
|
|
|
|
.action-button-text {
|
|
display: inline-block;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
.icon {
|
|
display: inline-block;
|
|
vertical-align: baseline;
|
|
}
|
|
}
|
|
}
|
|
|
|
.file-upload-form {
|
|
@include clearfix();
|
|
|
|
width: 100%;
|
|
|
|
.file-drop-area {
|
|
border: 2px dashed $gray-l3;
|
|
border-radius: ($baseline/5);
|
|
padding: ($baseline*1.25);
|
|
background: $white;
|
|
|
|
@include text-align(center);
|
|
|
|
cursor: pointer;
|
|
|
|
&:hover,
|
|
&.is-dragged {
|
|
background: $blue-l5;
|
|
border-style: solid;
|
|
border-color: $blue-l4;
|
|
}
|
|
|
|
&:hover .upload-text-link {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.fa-cloud-upload {
|
|
font-size: 7em;
|
|
vertical-align: top;
|
|
|
|
@include margin-right(0.1em);
|
|
}
|
|
|
|
.text-container {
|
|
display: inline-block;
|
|
|
|
@include text-align(left);
|
|
|
|
.upload-text-link {
|
|
color: $ui-link-color;
|
|
}
|
|
|
|
.video-uploads-header {
|
|
font-size: 1.5em;
|
|
margin-bottom: 0.25em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.video-max-file-size-text {
|
|
margin-top: ($baseline/2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.active-video-upload-container {
|
|
margin-bottom: ($baseline*2);
|
|
|
|
.active-video-upload-list {
|
|
@extend %cont-no-list;
|
|
|
|
.active-video-upload {
|
|
display: inline-block;
|
|
min-height: ($baseline*4);
|
|
width: (flex-grid(4) - 1.85);
|
|
margin: (flex-gutter() - 1.85);
|
|
border: 1px solid $gray-l3;
|
|
border-radius: ($baseline/5);
|
|
padding: ($baseline/2);
|
|
vertical-align: top;
|
|
|
|
.video-detail-name {
|
|
@extend %cont-truncated;
|
|
@extend %t-strong;
|
|
|
|
margin-bottom: ($baseline/2);
|
|
font-size: 90%;
|
|
}
|
|
|
|
.video-detail-status,
|
|
.more-details-action {
|
|
@include font-size(12);
|
|
@include line-height(12);
|
|
}
|
|
|
|
.more-details-action,
|
|
.upload-failure {
|
|
display: none;
|
|
}
|
|
|
|
.video-detail-progress {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
margin-bottom: ($baseline/2);
|
|
border: none;
|
|
width: 100%;
|
|
height: ($baseline/4);
|
|
}
|
|
|
|
.video-detail-progress::-webkit-progress-bar {
|
|
background-color: $white;
|
|
}
|
|
|
|
// Sadly, these rules must be separate or both Chrome and Firefox break
|
|
.video-detail-progress::-webkit-progress-value {
|
|
background-color: $color-ready;
|
|
}
|
|
|
|
.video-detail-progress::-moz-progress-bar {
|
|
background-color: $color-ready;
|
|
}
|
|
|
|
&:hover {
|
|
@include transition(all $tmg-f3);
|
|
|
|
background: $white;
|
|
}
|
|
|
|
&.queued {
|
|
.video-detail-progress {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
&.error {
|
|
.video-upload-status {
|
|
color: $color-error;
|
|
}
|
|
|
|
// Sadly, these rules must be separate or both Chrome and Firefox break
|
|
.video-detail-progress::-webkit-progress-value {
|
|
background-color: $color-error;
|
|
}
|
|
|
|
.video-detail-progress::-moz-progress-bar {
|
|
background-color: $color-error;
|
|
}
|
|
|
|
.more-details-action,
|
|
.upload-failure {
|
|
display: inline-block;
|
|
color: $color-error;
|
|
}
|
|
|
|
.more-details-action {
|
|
margin-top: ($baseline/5);
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
&.success {
|
|
.video-upload-status {
|
|
color: $color-ready;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.button {
|
|
@extend %ui-btn-non;
|
|
}
|
|
|
|
.assets-library {
|
|
.js-table-body .video-id-col {
|
|
word-break: break-all;
|
|
}
|
|
|
|
.assets-title {
|
|
display: inline-block;
|
|
width: flex-grid(5, 9);
|
|
|
|
@include margin-right(flex-gutter());
|
|
}
|
|
|
|
.wrapper-encodings-download {
|
|
display: inline-block;
|
|
width: flex-grid(4, 9);
|
|
text-align: right;
|
|
}
|
|
|
|
.actions-list {
|
|
@extend %actions-list;
|
|
}
|
|
}
|
|
|
|
.video-table {
|
|
.video-row {
|
|
display: table;
|
|
table-layout: fixed;
|
|
width: 100%;
|
|
|
|
.video-col {
|
|
display: table-cell;
|
|
}
|
|
|
|
.name-col {
|
|
width: 23%;
|
|
}
|
|
|
|
.transcripts-col {
|
|
width: 17%;
|
|
}
|
|
|
|
.thumbnail-col,
|
|
.video-id-col {
|
|
width: 15%;
|
|
}
|
|
|
|
.date-col,
|
|
.status-col {
|
|
width: 15%;
|
|
}
|
|
|
|
.actions-col {
|
|
width: 5%;
|
|
}
|
|
|
|
.video-head-col.thumbnail-col {
|
|
width: 17% !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.thumbnail-error-wrapper {
|
|
display: table-row;
|
|
white-space: nowrap;
|
|
color: $red;
|
|
|
|
.icon {
|
|
margin: ($baseline*0.75) ($baseline/4) 0 ($baseline/2);
|
|
}
|
|
}
|
|
|
|
$thumbnail-width: ($baseline*7.5);
|
|
$thumbnail-height: ($baseline*5);
|
|
|
|
.thumbnail-wrapper {
|
|
position: relative;
|
|
max-width: $thumbnail-width;
|
|
max-height: $thumbnail-height;
|
|
|
|
img {
|
|
width: $thumbnail-width;
|
|
height: $thumbnail-height;
|
|
}
|
|
|
|
* {
|
|
cursor: pointer;
|
|
}
|
|
|
|
&.upload,
|
|
&.requirements {
|
|
border: 1px dashed $gray-l3;
|
|
}
|
|
|
|
&.requirements {
|
|
.requirements-text {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.requirements-instructions {
|
|
font-size: 15px;
|
|
font-family: $font-family-sans-serif;
|
|
text-align: left;
|
|
color: $gray-d2;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.video-duration {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
&.edit {
|
|
background: black;
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&.focused {
|
|
img,
|
|
.video-duration {
|
|
@include transition(all 0.3s linear);
|
|
|
|
opacity: 0.1;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.progress {
|
|
background: white;
|
|
|
|
img {
|
|
@include transition(all 0.5s linear);
|
|
|
|
opacity: 0.15;
|
|
}
|
|
|
|
.action-icon {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
&.upload .thumbnail-action {
|
|
color: $blue;
|
|
}
|
|
|
|
&.progress .thumbnail-action {
|
|
.action-icon {
|
|
@include font-size(20);
|
|
}
|
|
}
|
|
|
|
&.edit {
|
|
background-color: #4e4e4e;
|
|
}
|
|
|
|
&.edit .thumbnail-action .action-icon.edit {
|
|
display: none;
|
|
}
|
|
|
|
&.edit .thumbnail-action .edit-container {
|
|
background-color: $white;
|
|
padding: ($baseline/4);
|
|
border-radius: ($baseline/5);
|
|
margin-top: ($baseline/2);
|
|
display: none;
|
|
}
|
|
|
|
&.edit .action-text {
|
|
color: $white;
|
|
}
|
|
|
|
.thumbnail-action {
|
|
@include font-size(14);
|
|
}
|
|
|
|
.thumbnail-overlay > :not(.upload-image-input) {
|
|
position: absolute;
|
|
text-align: center;
|
|
top: 50%;
|
|
left: 5px;
|
|
right: 5px;
|
|
|
|
@include transform(translateY(-50%));
|
|
|
|
z-index: 1;
|
|
}
|
|
|
|
.upload-image-input {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
opacity: 0;
|
|
z-index: 6;
|
|
width: $thumbnail-width;
|
|
height: $thumbnail-height;
|
|
}
|
|
|
|
.video-duration {
|
|
position: absolute;
|
|
text-align: center;
|
|
bottom: 1px;
|
|
|
|
@include right(1px);
|
|
|
|
width: auto;
|
|
min-width: 25%;
|
|
color: white;
|
|
padding: ($baseline/10) ($baseline/5);
|
|
background-color: black;
|
|
}
|
|
|
|
&.focused {
|
|
box-shadow: 0 0 ($baseline/5) 1px $blue;
|
|
}
|
|
|
|
&.error {
|
|
box-shadow: 0 0 ($baseline/5) 1px $red;
|
|
}
|
|
}
|
|
}
|