aboutsummaryrefslogtreecommitdiffstats
path: root/youtube/static/comments.css
diff options
context:
space:
mode:
Diffstat (limited to 'youtube/static/comments.css')
-rw-r--r--youtube/static/comments.css359
1 files changed, 247 insertions, 112 deletions
diff --git a/youtube/static/comments.css b/youtube/static/comments.css
index b177a4f..080810e 100644
--- a/youtube/static/comments.css
+++ b/youtube/static/comments.css
@@ -1,148 +1,283 @@
-.video-metadata{
- display: grid;
- grid-template-columns: auto 1fr;
- grid-template-rows: auto auto 1fr auto;
+html {
+ font-family: "liberation serif", "times new roman", calibri, carlito, serif;
+ background: var(--background);
+ color: var(--text);
}
- .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: 0.875rem;
- }
- .video-metadata > span{
- grid-row:3;
- }
- .video-metadata > hr{
- grid-row: 4;
- grid-column: 1 / span 2;
- width: 100%;
- }
-.comment-form{
+body {
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;
- }
+ grid-gap: 20px;
+ grid-template-areas:
+ "header"
+ "main"
+ "footer";
+ /* Fix height */
+ height: 100vh;
+ grid-template-rows: auto 1fr auto;
+ /* fix top and bottom */
+ margin-left: 1rem;
+ margin-right: 1rem;
+}
-.comments-area{
- display:grid;
+h1, h2, h3, h4, h5, h6, div, button {
+ margin: 0;
+ padding: 0;
+}
+
+img {
+ width: 100%;
+ height: auto;
}
- .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;
+a:link {
+ color: var(--link);
+}
+
+a:visited {
+ color: var(--link-visited);
+}
+
+input[type="text"],
+input[type="search"] {
+ background: var(--background);
+ border: 1px solid var(--button-border);
+ border-radius: 5px;
+ padding: 0.4rem 0.4rem;
+ font-size: 15px;
+ color: var(--search-text);
+}
+
+input[type='search'] {
+ border-bottom: 1px solid var(--button-border);
+ border-top: 0px;
+ border-left: 0px;
+ border-right: 0px;
+ border-radius: 0px;
+}
+
+header {
display: grid;
- align-content:start;
+ grid-gap: 1px;
+ grid-template-areas:
+ "home"
+ "form";
+ grid-area: header;
}
-.comment{
- display:grid;
- grid-template-columns: auto auto 100px 1fr;
- grid-template-rows: 0fr 0fr 0fr 0fr;
- background-color: var(--interface-color);
- justify-content: start;
+.home {
+ grid-area: home;
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 1rem;
+ margin-top: 1rem;
}
-.comment .author-avatar{
- grid-column: 1;
- grid-row: 1 / span 3;
- align-self: start;
- margin-right: 5px;
- height:32px;
- width:32px;
+.form {
+ display: grid;
+ grid-gap: 4px;
+ grid-template-areas:
+ "search-box"
+ "search-button"
+ "dropdown";
+ grid-area: form;
}
- .comment .author-avatar-img{
- max-height: 100%;
- }
-.comment address{
- grid-column: 2;
- grid-row: 1;
- margin-right:15px;
+.search-box {
+ grid-area: search-box;
+}
+.search-button {
+ grid-area: search-button;
+
+ cursor: pointer;
+ padding-bottom: 6px;
+ padding-left: .75em;
+ padding-right: .75em;
+ padding-top: 6px;
+ text-align: center;
white-space: nowrap;
- overflow:hidden;
+ background-color: var(--buttom);
+ border: 1px solid var(--button-border);
+ color: var(--buttom-text);
+ border-radius: 5px;
+}
+.search-button:hover {
+ background-color: var(--buttom-hover);
}
-.comment .text{
- grid-column: 2 / span 3;
- grid-row: 2;
- white-space: pre-wrap;
- min-width: 0;
- word-wrap: break-word;
+.dropdown {
+ display: grid;
+ grid-gap: 1px;
+ grid-template-areas:
+ "dropdown-label"
+ "dropdown-content";
+ grid-area: dropdown;
+ background: var(--background);
+ padding-right: 4rem;
+ z-index: 1;
}
+.dropdown-label {
+ grid-area: dropdown-label;
-.comment .permalink{
- grid-column: 3;
- grid-row: 1;
+ padding-bottom: 6px;
+ padding-left: .75em;
+ padding-right: .75em;
+ padding-top: 6px;
+ text-align: center;
white-space: nowrap;
+ background-color: var(--buttom);
+ border: 1px solid var(--button-border);
+ color: var(--buttom-text);
+ border-radius: 5px;
+}
+.dropdown-label:hover {
+ background-color: var(--buttom-hover);
}
+/* ------------- Menu Mobile sin JS ---------------- */
+/* input hidden */
+.opt-box {
+ display: none;
+}
+.dropdown-content {
+ display: none;
+ grid-area: dropdown-content;
+}
+label[for=options-toggle-cbox] {
+ cursor: pointer;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
-.comment .likes{
- grid-column:2;
- grid-row:3;
- font-weight:bold;
+#options-toggle-cbox:checked ~ .dropdown-content {
+ display: inline-grid;
white-space: nowrap;
}
+/*- ----------- End Menu Mobile sin JS ------------- */
+
+.main {
+ grid-area: main;
+ margin: 0 auto;
+ max-width: 80ch;
+}
+
+/* comments */
+.comments-area {
+ display: grid;
+ grid-row-gap: 0.5rem;
+}
+
+.comments-area textarea {
+ resize: vertical;
+}
-.comment .bottom-row{
- grid-column:2 / span 3;
- grid-row:4;
- justify-self:start;
+.video-metadata {
display: grid;
- grid-auto-flow: column;
- grid-column-gap: 10px;
+ grid-template-columns: auto 1fr;
+ grid-column-gap: 0.5rem;
+ grid-template-rows: auto auto 1fr auto;
+ grid-template-areas:
+ "video-metadata-thumbnail-box ."
+ "video-metadata-thumbnail-box ."
+ "video-metadata-thumbnail-box .";
+}
+
+.video-metadata > h2 {
+ font-size: 0.875rem;
}
-details.replies > summary{
- background-color: var(--interface-color);
- border-style: outset;
- border-width: 1px;
- font-weight: bold;
- padding-bottom: 0px;
+.video-metadata-thumbnail-box {
+ grid-area: video-metadata-thumbnail-box;
}
-.replies-open-new-tab{
- display: inline-block;
- margin-top: 5px;
+.comment-form {
+ display: grid;
+ grid-row-gap: 0.5rem;
}
-details.replies .comment{
- width: 600px;
+.post-comment-button {
+ justify-self: end;
}
-.more-comments{
- justify-self:center;
- margin-top:10px;
+.comments {
+ display: grid;
+ grid-row-gap: 0.5rem;
+}
+
+.comment {
+ display: grid;
+ grid-template-columns: repeat(3, auto) 3fr;
+ grid-template-rows: repeat(4, auto);
+ grid-column-gap: 0.4rem;
+ grid-template-areas:
+ "author-avatar author-name permalink permalink"
+ "author-avatar comment-text comment-text comment-text"
+ ". comment-likes comment-likes comment-likes"
+ ". button-row button-row button-row";
+ background: var(--secondary-background);
+}
+
+.author-avatar { grid-area: author-avatar; }
+.author-name { grid-area: author-name; }
+.permalink { grid-area: permalink; }
+.comment-text { grid-area: comment-text; }
+.comment-likes { grid-area: comment-likes; }
+.button-row { grid-area: button-row; }
+
+.more-comments {
+ justify-self: center;
+ margin-top: 10px;
margin-bottom: 10px;
+ background: var(--secondary-background);
+ padding: 5px;
+
+ /* disable text selection */
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.footer {
+ grid-area: footer;
+}
+
+.footer > p {
+ text-align: center;
+}
+
+@media (min-width: 780px) {
+ body {
+ display: grid;
+ grid-template-columns: 0.3fr 2fr 1fr 0.3fr;
+ grid-template-rows: auto 1fr auto;
+ grid-template-areas:
+ "header header header header"
+ "main main main main"
+ "footer footer footer footer";
+ }
+ .form {
+ display: grid;
+ grid-gap: 1px;
+ grid-template-columns: 1fr 1.4fr 0.3fr 1.3fr;
+ grid-template-areas: ". search-box search-button dropdown";
+ grid-area: form;
+ position: relative;
+ }
+ .dropdown {
+ display: grid;
+ grid-gap: 1px;
+ grid-template-columns: minmax(50px, 100px);
+ grid-template-areas:
+ "dropdown-label"
+ "dropdown-content";
+ grid-area: dropdown;
+ z-index: 1;
+ position: absolute;
+ }
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-15 12:30:33 +0000