From b1fa3eba70dbd7d9e5b795ad251e293c88ebeee2 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 6 Dec 2017 17:15:59 +0100 Subject: Begin video watch design --- .../videos/+video-watch/video-watch.component.scss | 308 ++++++--------------- 1 file changed, 80 insertions(+), 228 deletions(-) (limited to 'client/src/app/videos/+video-watch/video-watch.component.scss') diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss index 06c2de7c6..7bcfeb7c3 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss @@ -17,167 +17,108 @@ font-weight: bold; } -#torrent-info { - font-size: 10px; - margin-top: 10px; - text-align: center; - - div { - min-width: 60px; - } -} - -#video-info { - .video-name-views { - font-weight: bold; - font-size: 18px; - min-height: $video-watch-title-height; - display: flex; - align-items: center; - - .video-name { - padding-left: $video-watch-info-padding-left; - } +.video-bottom { + margin-top: 40px; + display: flex; - .video-views { - text-align: right; - // Keep a symmetry with the video name - padding-right: $video-watch-info-padding-left - } + .video-info { + flex-grow: 1; + margin-right: 28px; - } + .video-info-name-actions { + display: flex; + align-items: center; - .video-small-blocks { - height: $video-watch-info-height; - color: $video-watch-info-color; - border-color: $video-watch-border-color; - border-width: 1px 0px; - border-style: solid; + .video-info-name { + font-size: 27px; + font-weight: $font-semibold; + flex-grow: 1; + } - .video-small-block { - height: $video-watch-info-height; - display: flex; - flex-direction: column; - justify-content: center; - text-align: center; + .video-info-actions { + .action-button { + @include peertube-button; - a { - cursor: pointer; - transition: color 0.3s; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + font-size: 15px; + font-weight: $font-semibold; + color: #585858; + background-color: #E5E5E5; + display: inline-block; + padding: 0 10px 0 10px; - &, &:hover { - color: inherit; - text-decoration:none; + &:hover { + background-color: #EFEFEF; + } } - &:hover { - color: #000 !important; + .action-more { + display: inline-block; } - &:hover > .glyphicon { - opacity: 1 !important; - } - } + .icon { + display: inline-block; + background-repeat: no-repeat; + background-size: contain; + width: 21px; + height: 21px; + vertical-align: middle; + position: relative; + top: -2px; - .option .glyphicon { - font-size: 22px; - color: inherit; - opacity: 0.15; - margin-bottom: 10px; - transition: opacity 0.3s; - } + &.icon-like { + background-image: url('../../../assets/images/video/like.svg'); + } - .video-small-block-text { - font-size: 15px; - font-weight: bold; - } - } + &.icon-dislike { + background-image: url('../../../assets/images/video/dislike.svg'); + } - .video-small-block:not(:last-child) { - border-width: 0 1px 0 0; - border-color: $video-watch-border-color; - border-style: solid; - } + &.icon-share { + background-image: url('../../../assets/images/video/share.svg'); + } - .video-small-block-account, .video-small-block-more { - a.option { - display: block; - - .glyphicon { - display: block; + &.icon-more { + background-image: url('../../../assets/images/video/more.svg'); + } } } } - .video-small-block-share, .video-small-block-more { - a.option { - display: block; - - .glyphicon { - display: block; - } - } + .video-info-date-views { + font-size: 16px; + margin-bottom: 10px; } - .video-small-block-more .video-small-block-dropdown { - position: relative; - - .dropdown-item .glyphicon { - margin-right: 5px; - } + .video-info-channel { + font-weight: $font-semibold; + font-size: 15px; } - .video-small-block-rating { - - .video-small-block-like { - margin-bottom: 10px; - } - - .video-small-block-text { - vertical-align: top; - } - - .glyphicon { - font-size: 18px; - margin: 0 10px 0 0; - opacity: 0.3; - } - - .interactive { - cursor: pointer; - transition: opacity, color 0.3s; + .video-info-by { + display: flex; + align-items: center; + font-size: 13px; - &.activated, &:hover { - opacity: 1; - color: #000; - } + img { + width: 16px; + height: 16px; + margin-left: 3px; } } - } - - .video-details { - margin-top: 30px; - .video-details-date-description { - padding-left: $video-watch-info-padding-left; + .video-info-description { + margin: 20px 0; + font-size: 15px; .description-loading { display: inline-block; } - .video-details-date { - font-weight: bold; - margin-bottom: 30px; - } - - .video-details-description-more { + .video-info-description-more { cursor: pointer; - margin-top: 15px; - font-weight: bold; - color: #acaeb7; + font-weight: $font-semibold; + color: #585858; + font-size: 14px; .glyphicon { position: relative; @@ -186,109 +127,20 @@ } } - .video-details-attributes { - font-weight: bold; - font-size: 12px; - - .video-details-attribute { - display: flex; - - .video-details-attribute-label { - color: $video-watch-info-color; - flex-basis: 60px; - flex-grow: 0; - flex-shrink: 0; - margin-right: 5px; - } - } - } - - .video-details-tags { - display: flex; - flex-wrap: wrap; - - a { - margin: 0 3px 3px 0; - font-size: 11px; - } - } - } - - @media screen and (max-width: 800px) { - .video-name-views { - .video-name { - padding-left: 5px; - padding-right: 0px; - } - - .video-views { - padding-left: 0px; - padding-right: 5px; - } - } - - .video-small-blocks { - a, .video-small-block-text { - font-size: 13px !important; - } - - .glyphicon { - font-size: 18px !important; - } - - .video-small-block-account { - padding-left: 10px; - padding-right: 10px; - } - } - - .video-details { - .video-details-date-description { - padding-left: 10px; - font-size: 13px !important; - } - - .video-details-attributes { - font-size: 11px !important; + .video-attributes { + .video-attribute { + font-size: 13px; + display: block; + margin-bottom: 12px; - .video-details-attribute-label { - width: 50px; + .video-attribute-label { + width: 86px; + display: inline-block; + color: #585858; + font-weight: $font-bold; } } } - } - @media screen and (max-width: 500px) { - .video-name-views { - font-size: 16px !important; - } - - // Keep the same hierarchy than max-width: 800px - .video-small-blocks { - a, .video-small-block-text { - font-size: 10px !important; - } - - .video-small-block-account { - padding-left: 5px; - padding-right: 5px; - } - } - - .video-details { - .video-details-date-description { - margin-bottom: 30px; - width: 100%; - - .video-details-date { - margin-bottom: 15px; - } - } - - .video-details-attributes { - padding-left: 10px; - padding-right: 10px; - } - } } } -- cgit v1.2.3