(feat) refine styles for tiles component

src/app/modules/pro/channel/list/list.component.scss

@@ -8,7 +8,7 @@ m-pro--channel-list {
  .m-proChannelList__content {
  width: 85%;
  margin: 0 auto;
- display: flex;
+ //display: flex;
  //align-items: center;
  justify-content: center;
 
@@ -30,6 +30,18 @@ m-pro--channel-list {
  background-color: #eceff1!important;
  }
 
+ .m-proChannelListContentList__seeMore {
+ color: var(--text-color);
+ background-color: var(--plain-background-color);
+ border: 1px solid #777;
+
+ font-size: 30px;
+ text-align: center;
+ vertical-align: middle;
+
+ cursor: pointer;
+ }
+
  ul.m-proChannelListContent__list {
  display: grid;
  //grid-template-rows: repeat(15, 1fr);
@@ -69,18 +81,6 @@ m-pro--channel-list {
  }
  }
 
- &.m-proChannelListContentList__seeMore {
- color: var(--text-color);
- background-color: var(--plain-background-color);
- border: 1px solid #777;
-
- font-size: 30px;
- text-align: center;
- vertical-align: middle;
-
- cursor: pointer;
- }
-
  &:nth-child(1), &:nth-child(2) {
  & > video {
  width: 500px;

src/app/modules/pro/channel/tile/tile.component.scss

@@ -3,6 +3,7 @@ m-pro--channel-tile {
  position: relative;
  width: 100%;
  height: 320px;
+ border-bottom-style: groove;
 
  img {
  height: 320px;
@@ -14,8 +15,8 @@ m-pro--channel-tile {
  .m-proChannelTile__text {
  position: absolute;
  bottom: 0;
- background-color: white;
- color: black;
+ background-color: #00000061;
+ color: rgb(255, 255, 255);
  padding: 16px 16px 0;
  font-size: 20px;
  width: 100%;
@@ -25,8 +26,9 @@ m-pro--channel-tile {
  font-size: 20px;
  line-height: 20px;
  overflow: visible;
- color: rgba(0, 0, 0, .75) !important;
+ color: rgb(255, 255, 255) !important;
  margin: 0;
+ font-weight: 700;
  }
 
  p {
@@ -39,7 +41,7 @@ m-pro--channel-tile {
  margin: 8px 0;
  padding: 0;
  line-height: 1.25;
- color: #263238 !important;
+ color: rgb(255, 255, 255) !important;
  }
 
  a {