軽いね
このコミットが含まれているのは:
コミット
5c78943214
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
新しいイシューから参照