music stream

assets/src/assets/common.scss

@@ -16,7 +16,7 @@ input.half-field:not(:active):not(:hover) {
     --body-bg: #fff;
     --text-color: black;
     --text-color-light: #555;
-    --break-color: rgb(245, 245, 245);
+    --break-color: rgb(225, 225, 225);
 
     --main-color: #EFCA08;
     --main-color-light: #F4da51;

assets/src/assets/components.scss

@@ -266,13 +266,14 @@
 
 
 .preview-cover {
-    background-color: var(--preview-bg);
+    background: var(--preview-bg);
     background-size: cover;
     background-repeat: no-repeat;
     height: var(--cover-h);
     max-width: calc( var(--cover-w) * 1.5 );
     min-width: var(--cover-w);
     overflow: hidden;
+    border: 1px #c4c4c4 solid;
 
     img {
         height: var(--cover-h);
@@ -350,29 +351,24 @@
         min-width: 9rem;
     }
 
-    .media {
-        flex-grow: 1;
-    }
-
     .media-content {
-        display: flex;
-        flex-direction: column;
         height: 100%;
         margin-bottom: unset;
 
-        .content {
-            flex-grow: 1;
-        }
-
         .list-item:not(.no-cover) & {
             min-height: var(--preview-cover-small-size);
         }
-
     }
 
     .actions {
         text-align: right;
     }
+
+    &:not(.wide) .media {
+        padding: v.$mp-3;
+        // border-radius: v.$mp-2;
+        border: 1px solid var(--break-color) !important;
+    }
 }
 
 @media screen and (max-width: v.$screen-very-small) {
@@ -448,7 +444,6 @@
 
         figure {
             box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2);
-            border: 1px #c4c4c4 solid;
             height: var(--cover-h);
             width: var(--cover-w);
         }

assets/src/assets/helpers.scss

@@ -13,7 +13,11 @@
 
 .push-right, .flex-push-right { margin-left: auto !important; }
 .push-bottom { margin-top: auto !important; }
+
+.flex-row { display: flex; flex-direction: row }
+.flex-column { display: flex; flex-direction: column }
 .flex-grow-0 { flex-grow: 0 !important; }
+.flex-grow-1 { flex-grow: 1 !important; }
 
 .float-right { float: right }
 .float-left { float: left }

assets/src/assets/public.scss

@@ -81,9 +81,10 @@
         display: none;
     }
 
-    button, .action {
+    button, .action, a {
         justify-content: center;
         min-width: 2rem;
+        padding: v.$mp-2;
 
         .not-selected { opacity: 0.6; }
         .icon { margin: 0em !important; }
@@ -423,19 +424,13 @@ nav li {
     }
 
     &:nth-child(3n):not(.wide) .media,
-    &.logs:nth-child(3n):not(.wide)
     {
-        padding: v.$mp-3;
-        border-radius: v.$mp-2;
-        border: 1px solid var(--main-color-dark) !important;
+        border-color: var(--main-color-dark) !important;
     }
 
     &:nth-child(3n+1):not(.wide) .media,
-    &.logs:nth-child(3n+1):not(.wide)
     {
-        padding: v.$mp-3;
-        border-radius: v.$mp-2;
-        border: 1px solid var(--secondary-color-dark) !important;
+        border-color: var(--secondary-color-dark) !important;
     }
 }