CopyBot/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2025-11-20 21:46:04 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: rounded corners

Browse Source
This commit is contained in:
Markos Gogoulos
2024-10-02 11:33:17 +03:00
committed by GitHub
parent 94c646fdb8
commit 5fe4d3a9fc
10 changed files with 182 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
frontend/packages/player/dist/mediacms-player.css vendored
View File

@@ -61,8 +61,8 @@
/* SPACES */
/* ANIMATIONS */
/* FUNCTIONS */
/*@function calc_($expression) {
@return $expression;
/*@function calc_($expression) {
@return $expression;
}*/
/* ANIMATION KEYFRAMES */
@keyframes onHoverFullscreenToggle {
@@ -232,11 +232,11 @@
outline-color: rgba(0, 0, 0, 0);
outline-color: transparent;
/* Doesn't work properly in Safari browser.*/
/*&.vjs-loading-video {
video {
opacity: 0;
visibility: hidden;
}
/*&.vjs-loading-video {
video {
opacity: 0;
visibility: hidden;
}
}*/ }
.video-js.vjs-mediacms video {
width: 100%;
@@ -321,11 +321,11 @@
display: none;
font-size: 0.8125em;
z-index: +1;
/*display:block;
opacity: 0;
height:0;
visibility: hidden;
@include transition( opacity 0.25s cubic-bezier(0.0,0.0,0.2,1) );
/*display:block;
opacity: 0;
height:0;
visibility: hidden;
@include transition( opacity 0.25s cubic-bezier(0.0,0.0,0.2,1) );
will-change:height;*/ }
.video-js.vjs-mediacms .vjs-settings-panel .vjs-setting-panel-title > [role='button'] {
position: relative; }
@@ -337,8 +337,8 @@
outline: 0; }
.video-js.vjs-mediacms .vjs-settings-panel.vjs-visible-panel {
display: block;
/*opacity: 1;
visibility: visible;
/*opacity: 1;
visibility: visible;
height:auto;*/ }
.video-js.vjs-mediacms .vjs-settings-panel .vjs-settings-panel-inner {
display: block;
@@ -679,7 +679,7 @@
.video-js.vjs-mediacms .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal {
transition: width 0.2s linear;
transition-delay: 0.15s;
/* transition: width 0s linear;
/* transition: width 0s linear;
transition-delay: 0s; */ }
.video-js.vjs-mediacms .vjs-actions-anim {
-webkit-user-select: none;
@@ -986,31 +986,31 @@
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
/*@-moz-document url-prefix() {
position: relative;
padding-right: $font-size * 1.1;
overflow: hidden;
&:before {
background-color: $bg-color;
bottom: 0;
position: absolute;
right: 0;
float: right;
text-align:right;
content: '\2026';
width: $font-size * 1.1;
}
&:after {
content: '';
position: absolute;
height: 100%;
width: 100%;
z-index: +1;
background: $bg-color;
}
/*@-moz-document url-prefix() {
position: relative;
padding-right: $font-size * 1.1;
overflow: hidden;
&:before {
background-color: $bg-color;
bottom: 0;
position: absolute;
right: 0;
float: right;
text-align:right;
content: '\2026';
width: $font-size * 1.1;
}
&:after {
content: '';
position: absolute;
height: 100%;
width: 100%;
z-index: +1;
background: $bg-color;
}
}*/
color: #eee; }
.video-js.vjs-mediacms .vjs-corner-layer .title-link:hover {
@@ -1057,28 +1057,28 @@
.video-js.vjs-mediacms:hover .vjs-big-play-button {
background-color: #009933; }
/* @-webkit-keyframes vjs-poster-reveal {
0%{
opacity:0;
}
40%{
opacity:0;
}
100%{
opacity:1;
}
}
@keyframes vjs-poster-reveal {
0%{
opacity:0;
}
40%{
opacity:0;
}
100%{
opacity:1;
}
/* @-webkit-keyframes vjs-poster-reveal {
0%{
opacity:0;
}
40%{
opacity:0;
}
100%{
opacity:1;
}
}
@keyframes vjs-poster-reveal {
0%{
opacity:0;
}
40%{
opacity:0;
}
100%{
opacity:1;
}
} */
.video-js.vjs-mediacms .vjs-progress-control .vjs-mouse-display .vjs-time-tooltip,
.video-js.vjs-mediacms .vjs-preview-thumb .vjs-preview-thumb-time-display {

124
frontend/packages/vjs-plugin/dist/mediacms-vjs-plugin.css vendored
View File

@@ -61,8 +61,8 @@
/* SPACES */
/* ANIMATIONS */
/* FUNCTIONS */
/*@function calc_($expression) {
@return $expression;
/*@function calc_($expression) {
@return $expression;
}*/
/* ANIMATION KEYFRAMES */
@keyframes onHoverFullscreenToggle {
@@ -232,11 +232,11 @@
outline-color: rgba(0, 0, 0, 0);
outline-color: transparent;
/* Doesn't work properly in Safari browser.*/
/*&.vjs-loading-video {
video {
opacity: 0;
visibility: hidden;
}
/*&.vjs-loading-video {
video {
opacity: 0;
visibility: hidden;
}
}*/ }
.video-js.vjs-mediacms video {
width: 100%;
@@ -321,11 +321,11 @@
display: none;
font-size: 0.8125em;
z-index: +1;
/*display:block;
opacity: 0;
height:0;
visibility: hidden;
@include transition( opacity 0.25s cubic-bezier(0.0,0.0,0.2,1) );
/*display:block;
opacity: 0;
height:0;
visibility: hidden;
@include transition( opacity 0.25s cubic-bezier(0.0,0.0,0.2,1) );
will-change:height;*/ }
.video-js.vjs-mediacms .vjs-settings-panel .vjs-setting-panel-title > [role='button'] {
position: relative; }
@@ -337,8 +337,8 @@
outline: 0; }
.video-js.vjs-mediacms .vjs-settings-panel.vjs-visible-panel {
display: block;
/*opacity: 1;
visibility: visible;
/*opacity: 1;
visibility: visible;
height:auto;*/ }
.video-js.vjs-mediacms .vjs-settings-panel .vjs-settings-panel-inner {
display: block;
@@ -679,7 +679,7 @@
.video-js.vjs-mediacms .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal {
transition: width 0.2s linear;
transition-delay: 0.15s;
/* transition: width 0s linear;
/* transition: width 0s linear;
transition-delay: 0s; */ }
.video-js.vjs-mediacms .vjs-actions-anim {
-webkit-user-select: none;
@@ -986,31 +986,31 @@
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
/*@-moz-document url-prefix() {
position: relative;
padding-right: $font-size * 1.1;
overflow: hidden;
&:before {
background-color: $bg-color;
bottom: 0;
position: absolute;
right: 0;
float: right;
text-align:right;
content: '\2026';
width: $font-size * 1.1;
}
&:after {
content: '';
position: absolute;
height: 100%;
width: 100%;
z-index: +1;
background: $bg-color;
}
/*@-moz-document url-prefix() {
position: relative;
padding-right: $font-size * 1.1;
overflow: hidden;
&:before {
background-color: $bg-color;
bottom: 0;
position: absolute;
right: 0;
float: right;
text-align:right;
content: '\2026';
width: $font-size * 1.1;
}
&:after {
content: '';
position: absolute;
height: 100%;
width: 100%;
z-index: +1;
background: $bg-color;
}
}*/
color: #eee; }
.video-js.vjs-mediacms .vjs-corner-layer .title-link:hover {
@@ -1057,28 +1057,28 @@
.video-js.vjs-mediacms:hover .vjs-big-play-button {
background-color: #009933; }
/* @-webkit-keyframes vjs-poster-reveal {
0%{
opacity:0;
}
40%{
opacity:0;
}
100%{
opacity:1;
}
}
@keyframes vjs-poster-reveal {
0%{
opacity:0;
}
40%{
opacity:0;
}
100%{
opacity:1;
}
/* @-webkit-keyframes vjs-poster-reveal {
0%{
opacity:0;
}
40%{
opacity:0;
}
100%{
opacity:1;
}
}
@keyframes vjs-poster-reveal {
0%{
opacity:0;
}
40%{
opacity:0;
}
100%{
opacity:1;
}
} */
.video-js.vjs-mediacms .vjs-progress-control .vjs-mouse-display .vjs-time-tooltip,
.video-js.vjs-mediacms .vjs-preview-thumb .vjs-preview-thumb-time-display {

15
frontend/src/static/css/_extra.css
View File

@@ -0,0 +1,15 @@
body {
/* THIS is not a good way to handle this, and a proper refactoring needs to be performed
This allows bigger images of media on listings for large screens
It would be great to adapt to other sizes, but this requires a good refaftoring
*/
@media screen and (min-width: 2200px) {
--default-item-width: 342px !important;
--default-max-item-width: 342px !important;
--default-item-margin-right-width: 17px !important;
--default-item-margin-bottom-width: 27px !important;
}
}

5
frontend/src/static/js/components/list-item/Item.scss
View File

@@ -13,6 +13,11 @@
.item-thumb,
a.item-thumb {
@media screen and (min-width: 480px) {
border-radius: 10px;
}
position: relative;
display: block;
height: auto;

7
frontend/src/static/js/components/media-page/MediaPage.scss
View File

@@ -530,7 +530,14 @@
}
}
.viewer-container .player-container {
@media screen and (min-width: 480px) {
border-radius: 10px;
}
}
.viewer-container .player-container.audio-player-container {
@media screen and (min-width: 480px) {
padding-top: 0.75 * 56.25%;
}