modules/cms/client/scss/_partials/_context-media.scss
.context-media {
background: #ffffff;
flex: 1 1 100%;
.flex {
display: flex;
align-content: flex-start;
&:first-of-type {
margin-bottom: 2rem;
}
}
h1 {
font-size: 2rem;
flex: 0 0 auto;
margin-right: 2rem;
}
button.trash {
flex: 0 0 auto;
padding: 0;
margin: 0;
appearance: none;
background: #ffffff;
border: 0;
outline: none;
cursor: pointer;
}
h2 {
font-family: 'Roboto', sans-serif;
font-size: 0.85rem;
margin-bottom: 0.2rem;
&:not(:first-child) {
margin-top: 1.2rem;
}
}
.left {
flex: 1 1 50%;
color: #6c6c6c;
a.preview {
display: inline-block;
vertical-align: middle;
margin-left: 1rem;
img {
margin-bottom: 2px;
}
}
}
.right {
flex: 1 1 40%;
.mediaContainer {
margin: 0 auto;
text-align: center;
min-height: 21rem;
display: flex;
align-items: center;
background-image:
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #cccccc), color-stop(.25, transparent)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #cccccc), color-stop(.25, transparent)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #cccccc)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #cccccc));
background-size: 10px 10px;
-webkit-background-size: 10px 10px;
background-position: 0 0, 5px 0, 5px -5px, 0px 5px;
img {
margin: 0 auto;
border: 1px solid #c8c8c8;
max-width: 100%;
}
video {
width: 100%;
}
img[src=""] {
display: none;
}
}
}
.buttons {
display: block;
margin-top: 2.8rem;
input, button {
&:focus {outline:0;}
}
}
nav {
margin-top: 30px;
ul {
li {
display: inline-block;
&:not(:first-child) {
margin-left: 20px;
}
a {
color: #b7b7b7;
text-decoration: none;
font-size: 1.1rem;
&[data-active] {
color:#6c6c6c;
border-bottom: solid 3px #00caff;
padding-bottom: 3px;
}
}
}
}
}
.local {
display: flex;
margin-top: 30px;
> div {
color: #aeaeae;
width: 50%;
padding: 0 40px;
> div.progress-container {
> div {
margin-top: 15px;
display: flex;
align-items: center;
> figure {
width: 50px;
height: 50px;
img {
width: 100%;
}
&.video {
mask-image: url(../../../img/cms/cms/svg/video.svg);
mask-size: 100% 100%;
background-color: #c8c8c8;
}
&.application, &.text {
mask-image: url(../../../img/cms/cms/svg/application.svg);
mask-size: 100% 100%;
background-color: #c8c8c8;
}
}
> div {
flex-grow: 1;
margin-left: 25px;
> p {
color: #6c6c6c;
span {
color: #aeaeae;
}
}
div.stats {
display: flex;
margin-top: 15px;
p {
width: 50%;
}
}
.bytes {
text-align: right;
}
}
&:not(:first-child) {
border-top: solid 1px #c8c8c8;
padding-top: 15px;
}
}
}
.progress-bar {
margin-top: 15px;
background-color: #dddddd;
border-radius: 7px;
figure {
border-radius: 7px;
background-color: #00caff;
height: 6px;
}
}
&:first-child {
display: flex;
align-items: center;
> form {
width: 100%;
}
}
}
}
.tabs {
section {
&:not(:first-child) {
display: none;
}
}
}
}