wiki-grav/plugins/admin/themes/grav/scss/template/_media.scss

332 lines
5.3 KiB
SCSS
Raw Normal View History

/* Media */
$dark-text: #333;
.pages-list-container {
width: 30%;
flex: none!important;
padding: 0!important;
.pages-list {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&.depth-0 .row {
padding-left: .5rem;
}
.depth-1 .row {
padding-left: 1rem;
}
.page-item {
.page-link {
cursor: pointer;
}
}
.row.active {
background-color: rgba(#00a6cf, 0.1);
}
}
}
.media-page-dropzone {
width: 100%;
margin-bottom: 20px;
}
.media-container {
&.size-2-3 {
flex: none!important;
width: 70%;
}
.filters {
padding-bottom: 30px;
width: 100%;
.filter-wrapper {
margin-left: 10px;
margin-right: 10px;
&:after {
margin-top: -25px;
border: 0px none;
content: "\f078";
font-family: "FontAwesome";
right: 12px;
top: 50%;
line-height: 0;
color: #9BA2A6;
pointer-events: none;
float: right;
padding-right: 10px;
}
}
.filter {
option {
padding: 8px;
}
}
}
.files {
padding-left: 30px;
padding-right: 30px;
}
.admin-media-title {
color: $dark-text;
margin: 0px;
font-size: .8rem;
line-height: 1.3;
}
.card-item {
width: 49%;
&.empty-space {
background: rgba(255,255,255,0.4);
border: 1px solid rgba(0,0,0,0.1) !important;
color: rgba(0,0,0,0.3);
max-width: none;
display: block;
text-align: center;
top: 20%;
height: 10rem !important;
width: 50% !important;
margin: 0 auto !important;
font-size: 2rem;
line-height: 8rem;
transform: translateY(-50%);
}
}
.media-details {
text-align: center;
img {
width: 50%;
}
h2 {
margin: 0;
font-size: 1.8rem;
}
h5 {
color: #9BA2A6;
font-size: 1.1rem;
margin: 0;
}
}
h1 {
padding: 0 2rem 0.5rem!important;
}
.admin-form-wrapper {
width: 100%;
padding-bottom: 20px;
}
}
.spinning-wheel {
text-align: center;
}
/* Media in-page modal */
.media-container.in-modal {
h1 {
font-size: 30px!important;
margin-top: 0px;
}
a {
color: #333;
}
.pages-list li {
list-style-type: none;
margin-left: 0;
}
}
//Mediapicker field
.remodal.remodal-mediapicker {
max-width: 70vw;
padding: 0;
}
.media-container {
height: 70vh;
.grid {
justify-content: flex-start;
}
&.in-modal {
.gm-scrollbar {
background: rgba(255,255,255,0.2);
.thumb {
background-color: rgba(0,0,0,0.2) !important;
&:hover, &.active {
background-color: rgba(0,0,0,0.3) !important;
}
}
}
}
h5 {
border-bottom: 1px solid #ddd;
padding: 0.5rem 15px;
margin: 0;
height: 55px;
}
.filter-wrapper {
float: right;
margin-right: 5px;
margin-top: 10px;
}
.filter-date {
width: 150px;
}
.filter-type {
width: 100px;
margin-right: 15px;
}
.pages-list-container {
position: relative;
.pages-list {
border-top: 0;
padding-right: 10px;
font-size: 90%;
.row {
transition: none !important;
line-height: 2rem;
}
@for $i from 1 to 10 {
.depth-#{$i} .row {
padding-left: 1rem * ($i + 1);
}
}
}
.mediapicker-scroll {
position: absolute;
top: 55px;
bottom: 3px;
height: inherit;
}
}
.thumbs-list-container {
position: relative;
.media-range {
position: absolute;
right: 15px;
bottom: 5px;
}
.mediapicker-scroll {
position: absolute;
top: 55px;
bottom: 30px;
height: inherit;
}
.gm-scrollbar.-horizontal {
display: none;
}
}
#admin-media {
padding: 15px;
height: 100%;
align-items: flex-start;
align-content: flex-start;
.card-item {
width: 100px;
padding: 2px;
margin: 0 5px 5px 0;
border: 0;
img {
display: block;
}
}
.admin-media-details {
position: relative;
.admin-media-title {
position: absolute;
width: 100%;
bottom: 0;
background: rgba(0,0,0,0.3);
color: #fff;
font-size: 10px;
overflow: hidden;
line-height: 2;
text-indent: 2px;
white-space: nowrap;
}
}
}
}
[data-remodal-id="metadata"] {
h1 > * {
vertical-align: middle;
}
h1 strong {
@include ellipsis(75%);
}
.metadata-preview {
display: flex;
margin: 0 3rem;
.meta-preview {
max-width: 200px;
}
.meta-content ul {
margin: 0;
}
}
}