diff options
Diffstat (limited to 'youtube/shared.css')
| -rw-r--r-- | youtube/shared.css | 271 |
1 files changed, 271 insertions, 0 deletions
diff --git a/youtube/shared.css b/youtube/shared.css new file mode 100644 index 0000000..39e76f4 --- /dev/null +++ b/youtube/shared.css @@ -0,0 +1,271 @@ +h1, h2, h3, h4, h5, h6, div{
+ margin:0;
+ padding:0;
+
+}
+
+
+body{
+ margin:0;
+ padding: 0;
+ color:#222;
+
+
+ background-color:#cccccc;
+
+ min-height:100vh;
+
+ display:grid;
+ grid-template-rows: 50px 1fr;
+}
+
+ header{
+ background-color:#333333;
+
+ grid-row: 1;
+ }
+
+ main{
+ grid-row: 2;
+ }
+
+button{
+ padding:0; /* Fuck browser-specific styling. Fix your shit mozilla */
+}
+address{
+ font-style:normal;
+}
+#site-search{
+ display: grid;
+ grid-template-columns: 1fr 0fr;
+
+}
+
+ #site-search .search-box{
+ align-self:center;
+ height:25px;
+ border:0;
+
+ grid-column: 1;
+ }
+ #site-search .search-button{
+ grid-column: 2;
+ align-self:center;
+ height:25px;
+
+ border-style:solid;
+ border-width:1px;
+ }
+
+
+.full-item{
+ display: grid;
+ grid-template-rows: 0fr 0fr 0fr 0fr 0fr;
+ grid-template-columns: 1fr 1fr;
+
+}
+ .full-item video{
+ grid-column: 1 / span 2;
+ grid-row: 1;
+ }
+ .full-item .title{
+ grid-column: 1 / span 2;
+ grid-row:2;
+ min-width: 0;
+ }
+ .full-item address{
+ grid-column: 1;
+ grid-row: 3;
+ justify-self: start;
+ }
+ .full-item .views{
+ grid-column: 2;
+ grid-row: 3;
+ justify-self:end;
+ }
+ .full-item time{
+ grid-column: 1;
+ grid-row: 4;
+ justify-self:start;
+ }
+ .full-item .likes-dislikes{
+ grid-column: 2;
+ grid-row: 4;
+ justify-self:end;
+ }
+ .full-item .description{
+ background-color:#d0d0d0;
+ margin-top:8px;
+ white-space: pre-line;
+ min-width: 0;
+
+ grid-column: 1 / span 2;
+ grid-row: 5;
+ }
+
+.medium-item{
+ background-color:#bcbcbc;
+ display: grid;
+ align-content: start;
+ grid-template-columns: 246px 1fr 0fr;
+ grid-template-rows: 0fr 0fr 0fr 0fr 0fr 1fr;
+}
+ .medium-item .title{
+ grid-column:2 / span 2;
+ grid-row:1;
+ min-width: 0;
+ }
+ .medium-item address{
+ display:inline;
+ }
+ /*.medium-item .views{
+ grid-column: 3;
+ grid-row: 2;
+ justify-self:end;
+ }
+ .medium-item time{
+ grid-column: 2;
+ grid-row: 3;
+ justify-self:start;
+ }*/
+ .medium-item .stats{
+ grid-column: 2 / span 2;
+ grid-row: 2;
+ }
+
+ .medium-item .description{
+ grid-column: 2 / span 2;
+ grid-row: 4;
+ }
+ .medium-item .badges{
+ grid-column: 2 / span 2;
+ grid-row: 5;
+ }
+ /* thumbnail size */
+ .medium-item img{
+ /*height:138px;
+ width:246px;*/
+ height:100%;
+ justify-self:center;
+ }
+
+.small-item-box{
+ color: #767676;
+ font-size: 12px;
+
+ display:grid;
+ grid-template-columns: 1fr 0fr;
+ grid-template-rows: 94px;
+}
+
+.small-item{
+ background-color:#bcbcbc;
+ align-content: start;
+ text-decoration:none;
+
+ display: grid;
+ grid-template-columns: 168px 1fr;
+ grid-column-gap: 5px;
+ grid-template-rows: 0fr 0fr 0fr 1fr;
+}
+ .small-item .title{
+ grid-column:2;
+ grid-row:1;
+ margin:0;
+
+ color: #333;
+ font-size: 16px;
+ font-weight: 500;
+ text-decoration:initial;
+ min-width: 0;
+ }
+ .small-item address{
+ grid-column: 2;
+ grid-row: 2;
+ justify-self: start;
+ }
+
+ .small-item .views{
+ grid-column: 2;
+ grid-row: 3;
+ justify-self:start;
+ }
+ /* thumbnail size */
+ .small-item img{
+ /*height:94px;
+ width:168px;*/
+ height:100%;
+ justify-self:center;
+ }
+
+.item-checkbox{
+ justify-self:start;
+ align-self:center;
+ height:30px;
+ width:30px;
+
+ grid-column: 2;
+}
+
+/* ---Thumbnails for videos---- */
+.video-thumbnail-box{
+ grid-column:1;
+ grid-row:1 / span 6;
+
+ display:grid;
+ grid-template-columns: 1fr 0fr;
+}
+ .video-thumbnail-img{
+ grid-column:1 / span 2;
+ grid-row:1;
+ }
+ .video-duration{
+ grid-column: 2;
+ grid-row: 1;
+ align-self: end;
+ opacity: .8;
+ color: #ffffff;
+ font-size: 12px;
+ background-color: #000000;
+ }
+
+/* ---Thumbnails for playlists---- */
+.playlist-thumbnail-box{
+ grid-column:1;
+ grid-row:1 / span 5;
+
+ display:grid;
+ grid-template-columns: 3fr 2fr;
+}
+ .playlist-thumbnail-img{
+ grid-column:1 / span 2;
+ grid-row:1;
+ }
+ .playlist-thumbnail-info{
+ grid-column:2;
+ grid-row:1;
+
+ display: grid;
+ align-items:center;
+
+ text-align:center;
+ white-space: pre-line;
+ opacity: .8;
+ color: #cfcfcf;
+ background-color: #000000;
+ }
+
+.page-button-row{
+ justify-self:center;
+ display: grid;
+ grid-auto-columns: 40px;
+ grid-auto-flow: column;
+ height: 40px;
+}
+ .page-button{
+ background-color: #e9e9e9;
+ border-style: outset;
+ border-width: 2px;
+ font-weight: bold;
+ text-align: center;
+ }
\ No newline at end of file |