mirror of
https://github.com/mediacms-io/mediacms.git
synced 2025-11-14 11:18:55 -05:00
815 lines
15 KiB
SCSS
Executable File
815 lines
15 KiB
SCSS
Executable File
@import '../../../css/includes/_variables.scss';
|
|
@import '../../../css/includes/_variables_dimensions.scss';
|
|
|
|
@import '../../../css/config/index.scss';
|
|
|
|
.item {
|
|
vertical-align: top;
|
|
display: block;
|
|
width: 100%;
|
|
max-width: var(--max-item-width, var(--default-max-item-width));
|
|
margin-bottom: var(--item-margin-bottom-width, var(--default-item-margin-bottom-width));
|
|
}
|
|
|
|
.item-thumb,
|
|
a.item-thumb {
|
|
|
|
@media screen and (min-width: 480px) {
|
|
border-radius: 10px;
|
|
}
|
|
|
|
position: relative;
|
|
display: block;
|
|
height: auto;
|
|
padding-bottom: 56.11%;
|
|
overflow: hidden;
|
|
text-decoration: none;
|
|
background-position: center;
|
|
background-size: cover;
|
|
background-color: var(--item-thumb-bg-color);
|
|
}
|
|
|
|
.item-thumb.no-thumb {
|
|
&:before {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin: 0;
|
|
margin-top: -1rem;
|
|
margin-left: -1rem;
|
|
font-size: 2rem;
|
|
|
|
line-height: 1;
|
|
padding: 0;
|
|
font-family: 'Material Icons';
|
|
text-decoration: none;
|
|
color: #888;
|
|
}
|
|
|
|
// @link: https://github.com/google/material-design-icons/blob/master/iconfont/codepoints
|
|
|
|
.item.video-item & {
|
|
&:before {
|
|
content: '\E02C';
|
|
content: '\E54D';
|
|
content: '\E04B';
|
|
}
|
|
}
|
|
|
|
.item.image-item & {
|
|
&:before {
|
|
content: '\E3F4';
|
|
content: '\E412';
|
|
}
|
|
}
|
|
|
|
.item.audio-item & {
|
|
&:before {
|
|
content: '\E3A1';
|
|
}
|
|
}
|
|
|
|
.item.pdf-item & {
|
|
&:before {
|
|
content: '\e415';
|
|
}
|
|
}
|
|
|
|
.item.attachment-item & {
|
|
&:before {
|
|
content: '\e24d';
|
|
}
|
|
}
|
|
|
|
|
|
.item.playlist-item & {
|
|
&:before {
|
|
content: '\e43c';
|
|
}
|
|
}
|
|
|
|
.item.category-item & {
|
|
&:before {
|
|
content: '\e892';
|
|
content: 'list_alt';
|
|
}
|
|
}
|
|
|
|
.item.tag-item & {
|
|
&:before {
|
|
content: '\e54e';
|
|
}
|
|
}
|
|
|
|
.item.other-item & {
|
|
&:before {
|
|
content: '\e2bc';
|
|
content: '\e24d';
|
|
}
|
|
}
|
|
|
|
.item.member-item & {
|
|
&:before {
|
|
content: 'person';
|
|
}
|
|
}
|
|
}
|
|
|
|
.item-img {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
|
|
display: block;
|
|
|
|
img {
|
|
width: 100%;
|
|
max-height: 100%;
|
|
pointer-events: none;
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
.item-img-preview {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
display: block;
|
|
pointer-events: none;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition: all 750ms;
|
|
}
|
|
|
|
.item-duration,
|
|
.item-type-icon {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
pointer-events: none;
|
|
|
|
> * {
|
|
display: inline-block;
|
|
margin: 4px;
|
|
padding: 2px 4px;
|
|
color: hsl(0, 0%, 100%);
|
|
background-color: hsl(0, 0%, 6.7%);
|
|
border-radius: 2px;
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
.item-duration {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
line-height: 13.5px;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.item-type-icon {
|
|
> * {
|
|
float: left;
|
|
|
|
&:before {
|
|
font-family: 'Material Icons';
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
line-height: 1;
|
|
letter-spacing: normal;
|
|
text-transform: none;
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
word-wrap: normal;
|
|
direction: ltr;
|
|
-webkit-font-feature-settings: 'liga';
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
float: left;
|
|
padding: 0;
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.item.video-item & {
|
|
&:before {
|
|
content: '\E02C';
|
|
content: '\E54D';
|
|
content: '\E04B';
|
|
}
|
|
}
|
|
|
|
.item.audio-item & {
|
|
&:before {
|
|
content: '\E3A1';
|
|
}
|
|
}
|
|
|
|
.item.image-item & {
|
|
&:before {
|
|
content: '\E3F4';
|
|
content: '\E412';
|
|
}
|
|
}
|
|
|
|
.item.pdf-item &,
|
|
.item.attachment-item & {
|
|
&:before {
|
|
content: '\e24d';
|
|
}
|
|
}
|
|
|
|
.item.category-item & {
|
|
&:before {
|
|
content: '\e892';
|
|
content: 'list_alt';
|
|
}
|
|
}
|
|
|
|
.item.tag-item & {
|
|
&:before {
|
|
content: '\e54e';
|
|
}
|
|
}
|
|
|
|
.item.other-item & {
|
|
&:before {
|
|
content: '\e001';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.item-meta {
|
|
clear: left;
|
|
float: left;
|
|
|
|
font-family: Arial, sans-serif;
|
|
line-height: 18px;
|
|
font-size: 13px;
|
|
width: 100%;
|
|
color: var(--item-meta-text-color);
|
|
|
|
> * {
|
|
vertical-align: top;
|
|
}
|
|
|
|
a,
|
|
a {
|
|
color: var(--item-meta-link-text-color);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: var(--item-meta-link-hover-text-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.item-author {
|
|
display: block;
|
|
|
|
a {
|
|
width: auto;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.item-views {
|
|
}
|
|
|
|
.item-views + .item-date {
|
|
&:before {
|
|
content: '•';
|
|
content: '\2022';
|
|
margin: 0 4px;
|
|
}
|
|
}
|
|
|
|
.item-description {
|
|
$descr-font-size: 13px;
|
|
$descr-max-lines: 2;
|
|
$descr-line-height: 18px;
|
|
|
|
color: rgb(136, 136, 136);
|
|
|
|
font-size: $descr-font-size;
|
|
line-height: 1em;
|
|
width: 100%;
|
|
float: left;
|
|
margin: 10px 0 8px;
|
|
// overflow: hidden;
|
|
|
|
/* Only for non-webkit */
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: $descr-max-lines;
|
|
-webkit-box-orient: vertical;
|
|
|
|
/* Fallback for non-webkit */
|
|
max-height: $descr-max-lines * $descr-line-height;
|
|
|
|
div {
|
|
@include multiline_texts_excerpt(
|
|
$font-size: $descr-font-size,
|
|
$line-height: $descr-line-height,
|
|
$lines-to-show: $descr-max-lines,
|
|
$bg-color: transparent
|
|
);
|
|
}
|
|
}
|
|
|
|
.item.on-hover-preview {
|
|
&:hover {
|
|
.item-img-preview {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item-content {
|
|
position: relative;
|
|
display: block;
|
|
overflow: hidden;
|
|
|
|
h3 {
|
|
display: inline-block;
|
|
clear: right;
|
|
width: auto;
|
|
position: relative;
|
|
|
|
/* Fallback for non-webkit */
|
|
max-height: calc(var(--item-title-max-lines) * var(--item-title-line-height));
|
|
|
|
/* Only for non-webkit */
|
|
/*display: -webkit-box;
|
|
-webkit-line-clamp: var(--item-title-max-lines);
|
|
-webkit-box-orient: vertical;*/
|
|
|
|
a {
|
|
width: auto;
|
|
max-width: 100%;
|
|
color: inherit;
|
|
}
|
|
|
|
span {
|
|
line-height: var(--item-title-line-height);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
background-color: var(--item-bg-color);
|
|
|
|
/* Fallback for non-webkit */
|
|
display: block;
|
|
max-height: calc(var(--item-title-max-lines) * var(--item-title-line-height));
|
|
|
|
/* Only for non-webkit */
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: var(--item-title-max-lines);
|
|
-webkit-box-orient: vertical;
|
|
white-space: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item-content-link {
|
|
h3 {
|
|
text-decoration: none;
|
|
color: var(--item-title-text-color);
|
|
}
|
|
}
|
|
|
|
.item-main {
|
|
display: inline-block;
|
|
width: 100%;
|
|
line-height: var(--item-title-line-height);
|
|
|
|
h3 {
|
|
font-weight: 500;
|
|
font-size: var(--item-title-font-size);
|
|
line-height: var(--item-title-line-height);
|
|
margin-top: 12px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
a.item-edit-link {
|
|
display: block;
|
|
line-height: 1;
|
|
padding: 8px 0;
|
|
font-size: 0.928571429em;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
border-radius: 1px 1px 0 0;
|
|
color: #fff;
|
|
background-color: var(--brand-color, var(--default-brand-color));
|
|
}
|
|
|
|
.playlist-item {
|
|
.playlist-count {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 92px;
|
|
display: block;
|
|
line-height: 1.25;
|
|
color: rgba(#fff, 0.8);
|
|
background-color: rgba(17, 17, 17, 0.8);
|
|
|
|
span {
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
|
|
.material-icons {
|
|
font-size: 29px;
|
|
margin: 1px 0 0 4px;
|
|
padding: 0;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
|
|
.playlist-hover-play-all {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: rgba(#fff, 0.8);
|
|
background-color: rgba(17, 17, 17, 0.8);
|
|
|
|
letter-spacing: 0.007px;
|
|
line-height: 1;
|
|
opacity: 0;
|
|
|
|
transition: opacity 0.3s ease;
|
|
|
|
span {
|
|
display: inline-block;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.material-icons {
|
|
margin-bottom: 4px;
|
|
}
|
|
}
|
|
|
|
.playlist-count,
|
|
.playlist-hover-play-all {
|
|
> * {
|
|
display: table;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
|
|
> * {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.playlist-hover-play-all {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.item-main {
|
|
.item-meta {
|
|
}
|
|
|
|
a.view-full-playlist {
|
|
position: relative;
|
|
float: left;
|
|
clear: both;
|
|
display: inline-block;
|
|
margin-top: 4px;
|
|
font-size: 12.5px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
a.view-full-playlist {
|
|
color: var(--playlist-item-main-view-full-link-text-color);
|
|
|
|
&:hover {
|
|
color: var(--playlist-item-main-view-full-link-hover-text-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.hover-overlay-title {
|
|
.item {
|
|
.item-main,
|
|
.item-content-link {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.item-main {
|
|
display: block;
|
|
}
|
|
|
|
.item-content-link {
|
|
display: table;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
h3 {
|
|
z-index: +1;
|
|
color: #fff;
|
|
font-weight: 400;
|
|
}
|
|
|
|
&:after,
|
|
&:before {
|
|
position: absolute;
|
|
top: -1px;
|
|
left: -1px;
|
|
right: -1px;
|
|
bottom: -1px;
|
|
content: '';
|
|
display: block;
|
|
|
|
transition-property: opacity;
|
|
transition-duration: 0.2s;
|
|
}
|
|
|
|
transition-property: color, background-color;
|
|
transition-duration: 0.2s;
|
|
|
|
&:before {
|
|
opacity: 1;
|
|
background: radial-gradient(circle, rgba(#000, 0.75) 0%, rgba(#4a4a4a, 0.75) 100%);
|
|
}
|
|
|
|
&:after {
|
|
opacity: 0;
|
|
background: radial-gradient(circle, rgba(#fff, 0.75) 0%, rgba(#c6c6c6, 0.75) 100%);
|
|
}
|
|
|
|
&:hover {
|
|
h3 {
|
|
color: #000;
|
|
}
|
|
|
|
&:before {
|
|
opacity: 0;
|
|
}
|
|
|
|
&:after {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
max-height: 100% !important;
|
|
margin: 0 !important;
|
|
padding: 8px;
|
|
|
|
font-size: 1.5em;
|
|
|
|
span {
|
|
max-height: 100% !important;
|
|
line-height: 1.15;
|
|
background: none;
|
|
}
|
|
}
|
|
|
|
.item-meta,
|
|
.item-description {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Bulk selection checkbox styles
|
|
.item.with-selection {
|
|
.item-content {
|
|
position: relative;
|
|
}
|
|
|
|
// Selected state styling
|
|
&.selected {
|
|
.item-content {
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
border: 2px solid var(--default-theme-color, #009933);
|
|
border-radius: 8px;
|
|
padding: 4px;
|
|
|
|
.dark_theme & {
|
|
background-color: rgba(255, 255, 255, 0.08);
|
|
}
|
|
}
|
|
|
|
.item-thumb {
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
|
|
.item-selection-checkbox {
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 8px;
|
|
z-index: 2;
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
pointer-events: auto;
|
|
background-color: rgba(255, 255, 255, 0.95);
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
padding: 4px;
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease;
|
|
|
|
input[type='checkbox'] {
|
|
width: 24px;
|
|
height: 24px;
|
|
cursor: pointer;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
border: 2px solid #666;
|
|
border-radius: 3px;
|
|
background-color: white;
|
|
transition: all 0.2s ease;
|
|
position: relative;
|
|
pointer-events: auto;
|
|
margin: 0;
|
|
flex-shrink: 0;
|
|
|
|
&:hover {
|
|
border-color: #333;
|
|
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
&:checked {
|
|
background-color: var(--default-theme-color, #009933);
|
|
border-color: var(--default-theme-color, #009933);
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 7px;
|
|
top: 3px;
|
|
width: 6px;
|
|
height: 12px;
|
|
border: solid white;
|
|
border-width: 0 3px 3px 0;
|
|
transform: rotate(45deg);
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Show checkbox on hover or when any item is selected
|
|
&:hover .item-selection-checkbox,
|
|
&.has-any-selection .item-selection-checkbox {
|
|
opacity: 1;
|
|
}
|
|
|
|
// Always show checkbox when this item is selected
|
|
&.selected .item-selection-checkbox {
|
|
opacity: 1;
|
|
}
|
|
|
|
// Add hover shadow when any selection is active
|
|
&.has-any-selection:not(.selected):hover {
|
|
.item-content {
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
border-radius: 8px;
|
|
transition: box-shadow 0.2s ease;
|
|
}
|
|
|
|
.item-thumb {
|
|
border-radius: 10px;
|
|
}
|
|
}
|
|
|
|
// Make the whole item clickable for selection when any selection is active
|
|
&.has-any-selection:not(.selected) {
|
|
.item-thumb {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.item-main {
|
|
cursor: pointer;
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Edit icon styles
|
|
.item-edit-icon {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
z-index: 2;
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: rgba(255, 255, 255, 0.95);
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
text-decoration: none;
|
|
opacity: 0;
|
|
transition: all 0.2s ease;
|
|
pointer-events: auto;
|
|
|
|
.dark_theme & {
|
|
background-color: rgba(42, 42, 42, 0.95);
|
|
}
|
|
|
|
.material-icons {
|
|
font-size: 18px;
|
|
color: #333;
|
|
|
|
.dark_theme & {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var(--default-theme-color, #009933);
|
|
|
|
.material-icons {
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item.with-selection:hover .item-edit-icon {
|
|
opacity: 1;
|
|
}
|
|
|
|
// View icon styles (eye icon below edit icon)
|
|
.item-view-icon {
|
|
position: absolute;
|
|
top: 48px;
|
|
right: 8px;
|
|
z-index: 2;
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: rgba(255, 255, 255, 0.95);
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
text-decoration: none;
|
|
opacity: 0;
|
|
transition: all 0.2s ease;
|
|
pointer-events: auto;
|
|
|
|
.dark_theme & {
|
|
background-color: rgba(42, 42, 42, 0.95);
|
|
}
|
|
|
|
.material-icons {
|
|
font-size: 18px;
|
|
color: #333;
|
|
|
|
.dark_theme & {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var(--default-theme-color, #009933);
|
|
|
|
.material-icons {
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item.with-selection:hover .item-view-icon {
|
|
opacity: 1;
|
|
}
|