From 5c78943214e210cbc2e3a0b4f72e2149b75ac86d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=83=86=E3=82=AF=E3=83=8B=E3=82=AB=E3=83=AB=E8=AB=8F?=
 =?UTF-8?q?=E8=A8=AA=E5=AD=90?= <renraku@076.ne.jp>
Date: Sat, 12 Feb 2022 02:24:37 +0900
Subject: [PATCH] =?UTF-8?q?=E8=BB=BD=E3=81=84=E3=81=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/css/account.css                        | 343 ++----------------
 public/css/channel.css                        | 167 ---------
 public/css/common.css                         | 192 +++++++---
 public/css/videoslist.css                     |  24 +-
 .../component/common/videominature.blade.php  |   2 +-
 5 files changed, 157 insertions(+), 571 deletions(-)

diff --git a/public/css/account.css b/public/css/account.css
index 606fa56..c4e56a1 100755
--- a/public/css/account.css
+++ b/public/css/account.css
@@ -37,9 +37,6 @@ button, input, optgroup, select, textarea {
   font-family: inherit;
   line-height: inherit;
 }
-*, :after, :before {
-  box-sizing: border-box;
-}
 input {
   text-rendering: auto;
   letter-spacing: normal;
@@ -97,22 +94,20 @@ input {
   display: flex;
   margin-bottom: 10px;
 }
+
 .avatar-and-textarea my-actor-avatar {
   margin-inline-end: 10px;
 }
+
 .avatar-34 {
   --avatarSize: 34px !important;
 }
+
 .video-info-channel {
   font-weight: 600;
   font-size: 15px;
 }
-img, svg {
-  vertical-align: middle;
-}
-img {
-  border-style: none;
-}
+
 .dropdown-toggle {
   white-space: nowrap;
 }
@@ -174,12 +169,6 @@ my-action-buttons {
   width: -webkit-max-content;
   width: max-content;
 }
-@media screen and (max-width: 1600px) {
-  .main-col {
-    --horizontalMarginContent: 15px;
-    --videosHorizontalMarginContent: 30px;
-  }
-}
 .video-info-description {
   margin-inline-end: 0;
 }
@@ -239,38 +228,7 @@ my-recommended-videos {
   min-width: 201px;
   max-width: 201px;
 }
-my-video-miniature {
-  display: block;
-}
-.video-miniature:not(.display-as-row) {
-  display: flex;
-  flex-direction: column;
-  padding-bottom: 15px;
-  width: 100%;
-}
-.video-miniature:not(.display-as-row) my-video-thumbnail {
-  position: relative;
-  height: 0;
-  width: 100%;
-  padding-top: 56.25%;
-}
-.video-miniature:not(.display-as-row) my-video-thumbnail .video-thumbnail {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-}
-.video-thumbnail {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  border-radius: 3px;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  background-color: #ececec;
-  transition: filter .2s ease;
-}
+
 .video-thumbnail-actions-overlay {
   position: absolute;
   display: flex;
@@ -279,61 +237,24 @@ my-video-miniature {
   top: 5px;
   opacity: 0;
 }
-.video-thumbnail-label-overlay.danger {
-  background-color: red;
-}
-.video-thumbnail-label-overlay {
-  position: absolute;
-  padding: 0 5px;
-  left: 5px;
-  top: 5px;
-  font-weight: 700;
-}
-.video-thumbnail-watch-later-overlay, .video-thumbnail-label-overlay, .video-thumbnail-duration-overlay, .video-thumbnail-live-overlay {
-  display: inline-block;
-  background-color: #000000b3;
-  color: #fff;
-  border-radius: 3px;
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 1.1;
-  z-index: 10;
-}
+
 .video-thumbnail-duration-overlay, .video-thumbnail-live-overlay {
   position: absolute;
   padding: 0 3px;
   right: 5px;
   bottom: 5px;
 }
-.video-thumbnail .play-overlay, .video-thumbnail .play-overlay .icon {
-  transition: all .2s ease;
-}
-.video-thumbnail .play-overlay {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  width: inherit;
-  height: inherit;
-  opacity: 0;
-  background-color: #0000004d;
-}
-.video-miniature:not(.display-as-row) .video-bottom {
-  display: flex;
-  width: 100%;
-  min-width: 1px;
-}
-.video-miniature-information {
-  width: calc(100% - 40px);
-}
 
 .video-actions {
   height: 40px;
   display: flex;
   align-items: center;
 }
+
 .video-actions .action-button my-global-icon {
   margin-inline-end: 0;
 }
+
 .video-actions .action-button my-global-icon {
   position: relative;
   width: 21px;
@@ -355,78 +276,14 @@ my-global-icon {
   margin: 0 auto;
   max-width: none;
 }
+
 .video-miniature:not(.display-as-row) .video-actions {
   margin-top: 3px;
 }
-my-actor-avatar {
-  margin-inline-end: 10px;
-  margin-inline-start: 0;
-  margin-top: 10px;
-  margin-bottom: 0;
-}
-.video-miniature:not(.display-as-row) .video-miniature-name {
-  margin-top: 10px;
-  margin-bottom: 5px;
-}
-.video-miniature-name {
-  display: block;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  font-size: 1.1em;
-  line-height: 1.1em;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-height: 2.2em;
-  word-break: break-word;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  transition: color .2s;
-  font-weight: 600;
-  color: var(--mainForegroundColor);
-}
-.video-miniature:not(.display-as-row) .video-miniature-created-at-views {
-  display: block;
-}
-.video-miniature-created-at-views {
-  font-size: 13px;
-}
-.video-miniature-account, .video-miniature-channel {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: block;
-  font-size: 13px;
-  color: var(--greyForegroundColor);
-}
-.video-miniature-created-at-views {
-  font-size: 13px;
-}
-.video-info-privacy, .video-info-blocked .blocked-label, .video-info-nsfw {
-  font-weight: 600;
-}
 
-
-.icon-search {
-  margin-inline-start: -35px;
-}
-.icon-search {
-  display: inline-block;
-  background-repeat: no-repeat;
-  background-size: contain;
-  width: 25px;
-  vertical-align: middle;
-  cursor: pointer;
-  height: 18px;
-  position: absolute;
-  margin-top: 3.5px;
-  right: 10px;
-}
 my-search-typeahead {
   margin-inline-end: 15px;
 }
-.w-100 {
-  width: 100%!important;
-}
 
 .icon-logo {
   background-image: url(/client/assets/images/logo.svg?f43d062f4606d20e41cab4363a9d9da456139512);
@@ -492,11 +349,6 @@ my-search-typeahead {
   cursor: pointer;
 }
 
-a {
-  text-decoration: none;
-  background-color: initial;
-}
-
 menu:focus, menu:hover {
   overflow-y: auto;
 }
@@ -731,45 +583,31 @@ my-actor-avatar {
 .title-page.active { border-bottom-color: #ea81e8 !important; }
 .inner-form-title, .section-label { color: #ea81e8 !important; }
 
-.video-bottom {
-  display: flex;
-  margin-top: 1.5rem;
-}
-
 [tabindex="-1"]:focus:not(:focus-visible) {
   outline: 0!important;
 }
+
 .avatar-32 {
   --avatarSize: 32px;
 }
-.flex-column {
-  flex-direction: column!important;
-}
-.main-row {
-  min-height: calc(100vh - 50px - 30px - 30px);
-}
-@media screen and (max-width: 1600px) {
-  .main-col {
-    --horizontalMarginContent: 15px;
-    --videosHorizontalMarginContent: 30px;
-  }
-}
+
 .margin-content {
   margin-inline-end: var(--gridVideosMiniatureMargins)!important;
   margin-inline-start: var(--gridVideosMiniatureMargins)!important;
   --gridVideosMiniatureMargins: var(--videosHorizontalMarginContent);
 }
+
 .main-col {
   margin-inline-start: 240px;
-}
-.main-col {
   width: calc(100% - 240px);
   outline: none;
 }
+
 .main-col .margin-content {
   margin: 0 var(--horizontalMarginContent);
   flex-grow: 1;
 }
+
 .channel {
   max-width: 1200px;
   background-color: var(--channelBackgroundColor);
@@ -828,9 +666,6 @@ my-actor-avatar {
 .actor-counters {
   color: #bb00bb !important;
 }
-.margin-content {
-  --gridVideosMiniatureMargins: var(--videosHorizontalMarginContent);
-}
 .channel-avatar-row .description-html {
   position: relative;
   overflow: hidden;
@@ -866,90 +701,7 @@ my-actor-avatar {
   cursor: pointer;
   display: inline-block;
 }
-.videos {
-  display: flex;
-  grid-column: 1/3;
-  grid-row: 2;
-  margin-top: 30px;
-  position: relative;
-  overflow: hidden;
-}
-.videos my-video-miniature {
-  margin-inline-end: 15px;
-  min-width: 201px;
-  max-width: 201px;
-}
-.video-miniature:not(.display-as-row) {
-  display: flex;
-  flex-direction: column;
-  padding-bottom: 15px;
-  width: 100%;
-}
-.video-miniature:not(.display-as-row) my-video-thumbnail {
-  position: relative;
-  height: 0;
-  width: 100%;
-  padding-top: 56.25%;
-}
-.video-miniature:not(.display-as-row) my-video-thumbnail .video-thumbnail {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-}
-.video-thumbnail {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  border-radius: 3px;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  background-color: #ececec;
-  transition: filter .2s ease;
-}
-.video-thumbnail img {
-  width: inherit;
-  height: inherit;
-}
-.video-miniature:not(.display-as-row) .video-bottom {
-  display: flex;
-  width: 100%;
-  min-width: 1px;
-}
-.video-miniature-information {
-  width: calc(100% - 40px);
-}
-.margin-content {
-  --gridVideosMiniatureMargins: var(--videosHorizontalMarginContent);
-}
 
-.video-miniature:not(.display-as-row) .video-miniature-name {
-  margin-top: 10px;
-  margin-bottom: 5px;
-}
-.video-miniature-name {
-  display: block;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  font-size: 1.1em;
-  line-height: 1.1em;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-height: 2.2em;
-  word-break: break-word;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  transition: color .2s;
-  font-weight: 600;
-  color: var(--mainForegroundColor);
-}
-.video-miniature:not(.display-as-row) .video-miniature-created-at-views {
-  display: block;
-}
-.video-miniature-created-at-views {
-  font-size: 13px;
-}
 .miniature-show-channel {
   height: 100%;
   position: absolute;
@@ -1045,12 +797,6 @@ h2 {
   margin-block-start: 0.83em;
   margin-block-end: 0.83em;
 }
-@media screen and (max-width: 1600px) {
-  .main-col {
-    --horizontalMarginContent: 15px;
-    --videosHorizontalMarginContent: 30px;
-  }
-}
 
 #custom-css .dropdown-menu, #custom-css .dropdown-menu .dropdown-item { background-color: #421a46 !important; }
 
@@ -1181,9 +927,11 @@ my-subscribe-button {
 .video-actions .action-button:not(:first-child), .video-actions .action-dropdown, .video-actions my-video-actions-dropdown {
   margin-inline-start: 5px;
 }
+
 .video-actions .action-button.action-button-support {
   color: var(--supportButtonColor);
 }
+
 .video-actions .action-button.action-button-support my-global-icon path:first-child {
   fill: var(--supportButtonHeartColor)!important;
 }
@@ -1191,21 +939,23 @@ my-subscribe-button {
 .justify-content-end {
   justify-content: flex-end!important;
 }
-.d-flex {
-  display: flex!important;
-}
+
 .position-relative {
   position: relative!important;
 }
+
 .d-inline-flex {
   display: inline-flex!important;
 }
+
 .border-top {
   border-top: 1px solid #dee2e6!important;
 }
+
 form {
   margin-bottom: 30px;
 }
+
 #custom-css input, #custom-css textarea {
   background: var(--inputColor) !important;
   color: var(--mainForegroundColor) !important;
@@ -1302,57 +1052,6 @@ form {
   justify-content: space-between!important;
 }
 
-body {
-  margin: 0;
-  line-height: 1.5;
-  --mainColor: #ea81e8;
-  --mainColorLighter: #d68ad5;
-  --mainColorLightest: #fdd1fc;
-  --mainHoverColor: #fc54f9;
-  --mainBackgroundColor: #301a30;
-  --mainForegroundColor: #fcfcfc;
-  --secondaryColor: #421a46;
-
-  --greyForegroundColor: #585858;
-  --greyBackgroundColor: #e5e5e5;
-
-  --submenuBackgroundColor: #5e3c62;
-  --channelBackgroundColor: #5e3c62;
-
-  --textareaForegroundColor: #000;
-  --textareaBackgroundColor: #fff;
-  --markdownTextareaBackgroundColor: #efefef;
-
-  --actionButtonColor: #ea81e8;
-  --supportButtonBackgroundColor: #971195;
-  --supportButtonColor: var(--actionButtonColor);
-  --supportButtonHeartColor: #ec1818;
-
-  --activatedActionButtonColor: #000;
-  --horizontalMarginContent: 30px;
-  --videosHorizontalMarginContent: 6vw;
-  --mainColWidth: calc(100vw - 240px);
-  --dangerBackgroundColor: #d9534f;
-  --inputColor: #272727;
-  --inputPlaceholderColor: rgba(195,195,195,0.878431);
-  --menuAndHeaderBackgroundColor: #272727;
-  --menuForegroundColor: rgba(195,195,195,0.878431);
-  --menuBackgroundColor: #272727;
-  --whiteColor: #ffffff;
-  --submenuColor: #272727;
-  --embedForegroundColor: #fff;
-  --embedBigPlayBackgroundColor: rgba(0, 0, 0, .8);
-
-  font-family: Source Sans Pro,sans-serif;
-  font-weight: 400;
-  color: var(--mainForegroundColor);
-  background-color: var(--mainBackgroundColor);
-  font-size: 14px;
-  overflow-y: scroll;
-  text-align: start;
-}
-
-
 my-video-comments {
   display: inline-block;
   width: 100%;
diff --git a/public/css/channel.css b/public/css/channel.css
index 036392a..c4a7dc7 100755
--- a/public/css/channel.css
+++ b/public/css/channel.css
@@ -459,33 +459,6 @@ my-actor-avatar {
   width: 100%;
 }
 
-@media screen and (min-width: 500px) {
-  .margin-content .videos, .margin-content .playlists {
-    --miniatureMinWidth: 255px;
-    --miniatureMaxWidth: 280px;
-    display: grid;
-    grid-column-gap: 30px;
-    column-gap: 30px;
-    grid-template-columns: repeat(auto-fill,minmax(var(--miniatureMinWidth),1fr));
-  }
-}
-
-
-@media screen and (min-width: 500px) {
-  .margin-content .videos .video-wrapper, .margin-content .videos .playlist-wrapper, .margin-content .playlists .video-wrapper, .margin-content .playlists .playlist-wrapper {
-    margin: 0 auto;
-    width: 100%;
-  }
-}
-
-@media screen and (min-width: 500px) {
-  .margin-content .videos .video-wrapper my-video-miniature, .margin-content .videos .video-wrapper my-video-playlist-miniature, .margin-content .videos .playlist-wrapper my-video-miniature, .margin-content .videos .playlist-wrapper my-video-playlist-miniature, .margin-content .playlists .video-wrapper my-video-miniature, .margin-content .playlists .video-wrapper my-video-playlist-miniature, .margin-content .playlists .playlist-wrapper my-video-miniature, .margin-content .playlists .playlist-wrapper my-video-playlist-miniature {
-    display: block;
-    min-width: var(--miniatureMinWidth);
-    max-width: var(--miniatureMaxWidth);
-  }
-}
-
 .video-miniature:not(.display-as-row) {
   display: flex;
   flex-direction: column;
@@ -590,146 +563,6 @@ my-actor-avatar {
   background-color: var(--mainColor);
 }
 
-.video-miniature:not(.display-as-row) .video-bottom {
-  display: flex;
-  width: 100%;
-  min-width: 1px;
-}
-
-.video-miniature-information {
-  width: calc(100% - 40px);
-}
-
-.video-miniature:not(.display-as-row) .video-miniature-name {
-  margin-top: 10px;
-  margin-bottom: 5px;
-}
-
-.video-miniature-name {
-  display: block;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  font-size: 1.1em;
-  line-height: 1.1em;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-height: 2.2em;
-  word-break: break-word;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  transition: color .2s;
-  font-weight: 600;
-  color: var(--mainForegroundColor);
-}
-
-.video-miniature:not(.display-as-row) .video-miniature-created-at-views {
-  display: block;
-}
-
-.video-miniature-created-at-views {
-  font-size: 13px;
-}
-
 .video-info-privacy, .video-info-blocked .blocked-label, .video-info-nsfw {
   font-weight: 600;
 }
-
-.miniature:not(.display-as-row) .miniature-thumbnail {
-  position: relative;
-  height: 0;
-  width: 100%;
-  padding-top: 56.25%;
-  margin-top: 10px;
-  margin-bottom: 5px;
-}
-
-.miniature-thumbnail {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  border-radius: 3px;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  background-color: #ececec;
-  transition: filter .2s ease;
-}
-
-.miniature:not(.display-as-row) .miniature-thumbnail a {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-}
-
-.miniature-thumbnail img {
-  width: inherit;
-  height: inherit;
-}
-
-.miniature-thumbnail .miniature-playlist-info-overlay {
-  display: inline-block;
-  background-color: #000000b3;
-  color: #fff;
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  height: 100%;
-  padding: 0 10px;
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.miniature-thumbnail .play-overlay, .miniature-thumbnail .play-overlay .icon {
-  transition: all .2s ease;
-}
-
-.miniature-thumbnail .play-overlay {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  width: inherit;
-  height: inherit;
-  opacity: 0;
-  background-color: #0000004d;
-}
-
-.miniature-thumbnail .play-overlay .icon {
-  width: 0;
-  height: 0;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%,-50%) scale(.5);
-  border-top: 13px solid transparent;
-  border-bottom: 13px solid transparent;
-  border-left: 18px solid rgba(255,255,255,.95);
-}
-
-.miniature-thumbnail .play-overlay, .miniature-thumbnail .play-overlay .icon {
-  transition: all .2s ease;
-}
-
-.miniature:not(.display-as-row) .miniature-name {
-  margin-top: 10px;
-  margin-bottom: 5px;
-}
-
-.miniature-info .miniature-name {
-  display: block;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  font-size: 1.1em;
-  line-height: 1.1em;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-height: 2.2em;
-  word-break: break-word;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  transition: color .2s;
-  font-weight: 600;
-  color: var(--mainForegroundColor);
-}
\ No newline at end of file
diff --git a/public/css/common.css b/public/css/common.css
index 1fc6b90..d82b9c5 100755
--- a/public/css/common.css
+++ b/public/css/common.css
@@ -286,60 +286,148 @@ my-recommended-videos {
 my-video-miniature {
   display: block;
 }
-.video-miniature:not(.display-as-row) {
-  display: flex;
-  flex-direction: column;
-  padding-bottom: 15px;
-  width: 100%;
+
+.miniature-thumbnail img {
+  width: inherit;
+  height: inherit;
 }
-.video-miniature:not(.display-as-row) my-video-thumbnail {
+
+.miniature:not(.display-as-row) .miniature-thumbnail {
   position: relative;
   height: 0;
   width: 100%;
   padding-top: 56.25%;
+  margin-top: 10px;
+  margin-bottom: 5px;
 }
-.video-miniature:not(.display-as-row) my-video-thumbnail .video-thumbnail {
-  position: absolute;
+
+.miniature-thumbnail {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  border-radius: 3px;
   width: 100%;
   height: 100%;
-  top: 0;
-}
-.video-miniature:not(.display-as-row) .video-bottom {
-  display: flex;
-  width: 100%;
-  min-width: 1px;
-}
-.video-miniature-information {
-  width: calc(100% - 40px);
+  overflow: hidden;
+  background-color: #ececec;
+  transition: filter .2s ease;
 }
 
-.video-miniature:not(.display-as-row) {
-  display: flex;
-  flex-direction: column;
-  padding-bottom: 15px;
-  width: 100%;
-}
-
-.video-miniature:not(.display-as-row) my-video-thumbnail {
-  position: relative;
-  height: 0;
-  width: 100%;
-  padding-top: 56.25%;
-}
-
-.video-miniature:not(.display-as-row) my-video-thumbnail .video-thumbnail {
+.miniature:not(.display-as-row) .miniature-thumbnail a {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
 }
 
+.miniature-thumbnail .miniature-playlist-info-overlay {
+  display: inline-block;
+  background-color: #000000b3;
+  color: #fff;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.miniature-thumbnail .play-overlay, .miniature-thumbnail .play-overlay .icon {
+  transition: all .2s ease;
+}
+
+.miniature-thumbnail .play-overlay {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: inherit;
+  height: inherit;
+  opacity: 0;
+  background-color: #0000004d;
+}
+
+.miniature-thumbnail .play-overlay .icon {
+  width: 0;
+  height: 0;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%,-50%) scale(.5);
+  border-top: 13px solid transparent;
+  border-bottom: 13px solid transparent;
+  border-left: 18px solid rgba(255,255,255,.95);
+}
+
+.miniature:not(.display-as-row) .miniature-name {
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+
+.miniature-info .miniature-name {
+  display: block;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  font-size: 1.1em;
+  line-height: 1.1em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-height: 2.2em;
+  word-break: break-word;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  transition: color .2s;
+  font-weight: 600;
+  color: var(--mainForegroundColor);
+}
+
 .video-miniature:not(.display-as-row) .video-bottom {
   display: flex;
   width: 100%;
   min-width: 1px;
 }
 
+.miniature.display-as-row {
+  --rowThumbnailWidth: 280px;
+  --rowThumbnailHeight: 153px;
+  display: flex;
+}
+
+.miniature {
+  display: inline-block;
+  width: 100%;
+}
+
+.miniature.display-as-row .miniature-thumbnail {
+  margin-inline-end: 10px;
+  min-width: var(--rowThumbnailWidth);
+  max-width: var(--rowThumbnailWidth);
+  height: var(--rowThumbnailHeight);
+}
+
+.miniature.display-as-row .miniature-name {
+  display: block;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  font-size: 1.3em;
+  line-height: 1.3em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-height: 2.6em;
+}
+
+.miniature-info .by {
+  display: block;
+  color: var(--greyForegroundColor);
+}
+
+.miniature-info .privacy-date {
+  margin-top: 5px;
+  font-size: 13px;
+}
+
 .video-miniature-information {
   width: calc(100% - 40px);
 }
@@ -438,17 +526,6 @@ my-video-miniature {
   font-weight: 700;
 }
 
-.video-thumbnail-watch-later-overlay, .video-thumbnail-label-overlay, .video-thumbnail-duration-overlay, .video-thumbnail-live-overlay {
-  display: inline-block;
-  background-color: #000000b3;
-  color: #fff;
-  border-radius: 3px;
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 1.1;
-  z-index: 10;
-}
-
 .video-thumbnail .play-overlay, .video-thumbnail .play-overlay .icon {
   transition: all .2s ease;
 }
@@ -504,15 +581,11 @@ my-global-icon {
   margin: 0 auto;
   max-width: none;
 }
+
 .video-miniature:not(.display-as-row) .video-actions {
   margin-top: 3px;
 }
-my-actor-avatar {
-  margin-inline-end: 10px;
-  margin-inline-start: 0;
-  margin-top: 10px;
-  margin-bottom: 0;
-}
+
 .video-miniature-account, .video-miniature-channel {
   white-space: nowrap;
   overflow: hidden;
@@ -522,11 +595,8 @@ my-actor-avatar {
   color: var(--greyForegroundColor);
 }
 
-
 .icon-search {
   margin-inline-start: -35px;
-}
-.icon-search {
   display: inline-block;
   background-repeat: no-repeat;
   background-size: contain;
@@ -538,6 +608,7 @@ my-actor-avatar {
   margin-top: 3.5px;
   right: 10px;
 }
+
 my-search-typeahead {
   margin-inline-end: 15px;
 }
@@ -887,10 +958,6 @@ my-notification {
   height: 22px;
 }
 
-my-actor-avatar {
-  margin-inline-end: 10px;
-}
-
 .logged-in-info {
   max-width: 105px;
   flex-grow: 1;
@@ -1329,35 +1396,44 @@ my-video-comments {
   width: 100%;
   margin-bottom: 20px;
 }
+
 .border-top {
   border-top: 1px solid #dee2e6!important;
 }
+
 #highlighted-comment {
   margin-bottom: 25px;
 }
+
 .anchor {
   position: relative;
   top: -70px;
 }
+
 .root-comment {
   font-size: 15px;
   display: flex;
 }
+
 .root-comment .left {
   margin-inline-end: 10px;
-}
-.root-comment .left {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
+
 my-actor-avatar {
+  margin-inline-end: 10px;
+  margin-inline-start: 0;
+  margin-top: 10px;
+  margin-bottom: 0;
   display: inline-block;
   width: 36px;
   height: 36px;
   min-width: 36px;
   min-height: 36px;
 }
+
 .root-comment .left .vertical-border {
   width: 2px;
   height: 100%;
diff --git a/public/css/videoslist.css b/public/css/videoslist.css
index a53bc74..23db383 100755
--- a/public/css/videoslist.css
+++ b/public/css/videoslist.css
@@ -82,17 +82,6 @@ my-global-icon {
   grid-column: 1/-1;
 }
 
-@media screen and (min-width: 500px) {
-  .margin-content .videos, .margin-content .playlists {
-    --miniatureMinWidth: 255px;
-    --miniatureMaxWidth: 280px;
-    display: grid;
-    grid-column-gap: 30px;
-    column-gap: 30px;
-    grid-template-columns: repeat(auto-fill,minmax(var(--miniatureMinWidth),1fr));
-  }
-}
-
 .section:first-child {
   padding-top: 30px;
 }
@@ -123,17 +112,6 @@ my-global-icon {
   grid-column: 1/-1;
 }
 
-@media screen and (min-width: 500px) {
-  .margin-content .videos, .margin-content .playlists {
-    --miniatureMinWidth: 255px;
-    --miniatureMaxWidth: 280px;
-    display: grid;
-    grid-column-gap: 30px;
-    column-gap: 30px;
-    grid-template-columns: repeat(auto-fill,minmax(var(--miniatureMinWidth),1fr));
-  }
-}
-
 .section.channel .section-title a {
   display: flex;
   width: -webkit-fit-content;
@@ -144,4 +122,4 @@ my-global-icon {
 
 .section .section-title a {
   color: var(--mainForegroundColor);
-}
\ No newline at end of file
+}
diff --git a/resources/views/layout/component/common/videominature.blade.php b/resources/views/layout/component/common/videominature.blade.php
index 176259b..9c9b90c 100644
--- a/resources/views/layout/component/common/videominature.blade.php
+++ b/resources/views/layout/component/common/videominature.blade.php
@@ -1,4 +1,4 @@
-<div class="{{ $res['page'] == 'search' ? 'entry video' : 'video-wrapper' }}">
+<div class="{{ $res['page'] == 'search' ? 'entry video' : ($res['page'] == 'account' ? 'videos' : 'video-wrapper') }}">
   <my-video-miniature>
     <div class="video-miniature{{ $res['page'] == 'search' ? ' display-as-row' : '' }}">
       <my-video-thumbnail>