aboutsummaryrefslogtreecommitdiffstats
path: root/youtube/static
diff options
context:
space:
mode:
Diffstat (limited to 'youtube/static')
-rw-r--r--youtube/static/comments.css129
-rw-r--r--youtube/static/favicon.icobin0 -> 5694 bytes
-rw-r--r--youtube/static/shared.css378
3 files changed, 507 insertions, 0 deletions
diff --git a/youtube/static/comments.css b/youtube/static/comments.css
new file mode 100644
index 0000000..4cec3e1
--- /dev/null
+++ b/youtube/static/comments.css
@@ -0,0 +1,129 @@
+.video-metadata{
+ display: grid;
+ grid-template-columns: auto 1fr;
+ grid-template-rows: auto auto 1fr auto;
+}
+ .video-metadata > .video-metadata-thumbnail-box{
+ grid-row: 1 / span 3;
+ }
+ .video-metadata > .title{
+ word-wrap:break-word;
+ grid-row: 1;
+ }
+ .video-metadata > h2{
+ grid-row: 2;
+ font-size: 15px;
+ }
+ .video-metadata > span{
+ grid-row:3;
+ }
+ .video-metadata > hr{
+ grid-row: 4;
+ grid-column: 1 / span 2;
+ width: 100%;
+ }
+
+.comment-form{
+ display: grid;
+ align-content: start;
+ justify-items: start;
+ align-items: start;
+}
+ #comment-account-options{
+ display:grid;
+ grid-auto-flow: column;
+ grid-column-gap: 10px;
+ margin-top:10px;
+ margin-bottom:10px;
+ }
+ #comment-account-options a{
+ margin-left:10px;
+ }
+
+.comments-area{
+ display:grid;
+}
+ .comments-area textarea{
+ resize: vertical;
+ justify-self:stretch;
+ }
+ .post-comment-button{
+ margin-top:10px;
+ justify-self:end;
+ }
+ .comment-links{
+ display:grid;
+ grid-auto-flow: column;
+ grid-column-gap: 10px;
+ justify-content:start;
+ }
+
+.comments{
+ margin-top:10px;
+ grid-row-gap: 10px;
+ display: grid;
+ align-content:start;
+}
+
+.comment{
+ display:grid;
+ grid-template-columns: auto auto 100px 1fr;
+ grid-template-rows: 0fr 0fr 0fr 0fr;
+ background-color: #dadada;
+ justify-content: start;
+}
+
+.comment .author-avatar{
+ grid-column: 1;
+ grid-row: 1 / span 3;
+ align-self: start;
+ margin-right: 5px;
+ height:32px;
+ width:32px;
+}
+
+.comment address{
+ grid-column: 2;
+ grid-row: 1;
+ margin-right:15px;
+ white-space: nowrap;
+ overflow:hidden;
+}
+
+.comment .text{
+ grid-column: 2 / span 3;
+ grid-row: 2;
+ white-space: pre-wrap;
+ min-width: 0;
+ word-wrap: break-word;
+}
+
+.comment .permalink{
+ grid-column: 3;
+ grid-row: 1;
+ white-space: nowrap;
+ color: black;
+
+}
+
+
+.comment .likes{
+ grid-column:2;
+ grid-row:3;
+ font-weight:bold;
+ white-space: nowrap;
+}
+
+.comment .bottom-row{
+ grid-column:2 / span 3;
+ grid-row:4;
+ justify-self:start;
+ display: grid;
+ grid-auto-flow: column;
+ grid-column-gap: 10px;
+}
+
+.more-comments{
+ justify-self:center;
+ margin-top:10px;
+}
diff --git a/youtube/static/favicon.ico b/youtube/static/favicon.ico
new file mode 100644
index 0000000..9d6417c
--- /dev/null
+++ b/youtube/static/favicon.ico
Binary files differ
diff --git a/youtube/static/shared.css b/youtube/static/shared.css
new file mode 100644
index 0000000..a360972
--- /dev/null
+++ b/youtube/static/shared.css
@@ -0,0 +1,378 @@
+h1, h2, h3, h4, h5, h6, div, button{
+ 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;
+
+ display:grid;
+ grid-template-columns: minmax(0px, 3fr) 640px 40px 500px minmax(0px,2fr);
+ }
+
+ main{
+ grid-row: 2;
+ }
+
+address{
+ font-style:normal;
+}
+
+
+
+ #site-search{
+ grid-column: 2;
+ display: grid;
+ grid-template-columns: 1fr auto auto;
+
+ }
+
+ #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;
+ }
+ #site-search .dropdown{
+ margin-left:5px;
+ grid-column: 3;
+ align-self:center;
+ height:25px;
+ }
+ #site-search .dropdown button{
+ align-self:center;
+ height:25px;
+
+ border-style:solid;
+ border-width:1px;
+ }
+ #site-search .css-sucks{
+ width:0px;
+ height:0px;
+ }
+ #site-search .dropdown-content{
+ grid-template-columns: auto auto;
+ white-space: nowrap;
+ }
+ #site-search .dropdown-content h3{
+ grid-column:1 / span 2;
+ }
+
+.dropdown{
+ z-index:1;
+}
+ .dropdown-content{
+ display:none;
+ background-color: #e9e9e9;
+ }
+ .dropdown:hover .dropdown-content{
+ /* For some reason, if this is just grid, it will insist on being 0px wide just like its 0px by 0px parent */
+ /* making it inline-grid happened to fix it */
+ display:inline-grid;
+ }
+
+
+
+#header-right{
+ grid-column:4;
+
+ display:grid;
+ grid-template-columns:auto auto auto 1fr;
+ grid-template-rows: 1fr;
+ width: 540px;
+}
+ #playlist-edit{
+ display:contents;
+ }
+ #local-playlists{
+ grid-column: 1;
+ grid-row:1;
+ align-self: center;
+ margin-right:5px;
+ color: #ffffff;
+ }
+ #playlist-name-selection{
+ grid-column:2;
+ grid-row:1;
+ justify-self:start;
+ align-self: center;
+ }
+ #playlist-add-button{
+ grid-column:3;
+ grid-row:1;
+ align-self: center;
+ padding-left: 10px;
+ padding-right: 10px;
+ }
+ #item-selection-reset{
+ grid-column:4;
+ grid-row:1;
+ align-self: center;
+ justify-self:start;
+ padding-left: 10px;
+ padding-right: 10px;
+ }
+
+
+
+.item-list{
+ display: grid;
+ grid-auto-rows: 138px;
+ grid-row-gap: 10px;
+
+}
+ .item-list .video-thumbnail-box{
+ width:246px;
+ }
+ .item-list .playlist-thumbnail-box{
+ width:246px;
+ }
+
+
+.item-grid{
+ display:grid;
+ grid-template-columns: repeat(auto-fill, 400px);
+ grid-auto-rows: 94px;
+ grid-row-gap: 10px;
+}
+ .item-grid .video-thumbnail-box{
+ width:168px;
+ }
+ .item-grid .playlist-thumbnail-box{
+ width:168px;
+ }
+
+
+
+.medium-item-box{
+
+ display:grid;
+ grid-template-columns: 1fr 30px;
+}
+.medium-item{
+ background-color:#bcbcbc;
+ text-decoration:none;
+ font-size: 12px;
+ color: #767676;
+
+ display: grid;
+ align-content: start;
+ grid-template-columns: auto 1fr auto;
+ grid-template-rows: auto auto auto auto auto 1fr;
+}
+ .medium-item .title{
+ grid-column:2 / span 2;
+ grid-row:1;
+ justify-self:start;
+ min-width: 0;
+ max-height:3.6em;
+ overflow:hidden;
+
+ color: #333;
+ font-size: 16px;
+ font-weight: 500;
+ text-decoration:initial;
+ }
+ .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;
+ max-height:2.4em;
+ overflow:hidden;
+ }
+ .medium-item .stats > *::after{
+ content: " | ";
+ }
+ .medium-item .stats > *:last-child::after{
+ content: "";
+ }
+
+ .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 30px;
+ 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: auto auto auto 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;
+ justify-self:start;
+
+ overflow:hidden;
+ max-height: 3.3em;
+ line-height: 1.1em;
+ }
+ .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{
+ max-height:100%;
+
+ 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{
+ max-height:100%;
+
+ grid-column:1;
+ grid-row:1 / span 6;
+
+ 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;
+ }
+.sort-button{
+ background-color: #d0d0d0;
+ padding: 2px;
+ justify-self: start;
+}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-15 16:55:49 +0000