split comments css
This commit is contained in:
parent
b420bf43b7
commit
100fe79b1d
4 changed files with 61 additions and 50 deletions
43
app/static/css/comments.css
Normal file
43
app/static/css/comments.css
Normal file
|
@ -0,0 +1,43 @@
|
||||||
|
|
||||||
|
.comments h3 {
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 4px;
|
||||||
|
padding-left: 0;
|
||||||
|
margin: 0;
|
||||||
|
//display: none;
|
||||||
|
}
|
||||||
|
.comments.active h3 {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comments .icon svg {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-comment {
|
||||||
|
width: 100%;
|
||||||
|
height: 30vh;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.add-comment input {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
.add-comment textarea {
|
||||||
|
width: 80%;
|
||||||
|
display: block;
|
||||||
|
background: black;
|
||||||
|
color: white;
|
||||||
|
margin: auto;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
.add-comment button {
|
||||||
|
background: red;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment .text {
|
||||||
|
white-space: pre-line;
|
||||||
|
}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
/* http://meyerweb.com/eric/tools/css/reset/
|
/* http://meyerweb.com/eric/tools/css/reset/
|
||||||
v2.0 | 20110126
|
v2.0 | 20110126
|
||||||
License: none (public domain)
|
License: none (public domain)
|
||||||
*/
|
*/
|
||||||
|
@ -9,11 +9,11 @@ a, abbr, acronym, address, big, cite,
|
||||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||||
small, strike, strong, sub, sup, tt, var,
|
small, strike, strong, sub, sup, tt, var,
|
||||||
u, i, center,
|
u, i, center,
|
||||||
ol,
|
ol,
|
||||||
fieldset, form, label, legend,
|
fieldset, form, label, legend,
|
||||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||||
article, aside, canvas, details, embed,
|
article, aside, canvas, details, embed,
|
||||||
figure, figcaption, footer, header, hgroup,
|
figure, figcaption, footer, header, hgroup,
|
||||||
menu, nav, output, ruby, section, summary,
|
menu, nav, output, ruby, section, summary,
|
||||||
time, mark, audio, video {
|
time, mark, audio, video {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
@ -24,7 +24,7 @@ time, mark, audio, video {
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
/* HTML5 display-role reset for older browsers */
|
/* HTML5 display-role reset for older browsers */
|
||||||
article, aside, details, figcaption, figure,
|
article, aside, details, figcaption, figure,
|
||||||
footer, header, hgroup, menu, nav, section {
|
footer, header, hgroup, menu, nav, section {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
|
@ -86,6 +86,16 @@ video, .poster {
|
||||||
.layer.active:first-child {
|
.layer.active:first-child {
|
||||||
padding-top: 0px;
|
padding-top: 0px;
|
||||||
}
|
}
|
||||||
|
.layer h3 {
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 4px;
|
||||||
|
padding-left: 0;
|
||||||
|
margin: 0;
|
||||||
|
//display: none;
|
||||||
|
}
|
||||||
|
.layer.active h3 {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
.annotation {
|
.annotation {
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
|
@ -107,20 +117,10 @@ video, .poster {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.layer h3,
|
.layer h3 {
|
||||||
.comments h3 {
|
|
||||||
font-weight: bold;
|
|
||||||
padding: 4px;
|
|
||||||
padding-left: 0;
|
|
||||||
margin: 0;
|
|
||||||
//display: none;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.layer.active h3 {
|
.layer .icon svg {
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.layer .icon svg,
|
|
||||||
.comments .icon svg {
|
|
||||||
width: 12px;
|
width: 12px;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,40 +1,8 @@
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
{% block head %}
|
{% block head %}
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
background: turquoise;
|
|
||||||
}
|
|
||||||
.add-comment {
|
|
||||||
width: 100%;
|
|
||||||
height: 30vh;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.add-comment input {
|
|
||||||
width: 100px;
|
|
||||||
}
|
|
||||||
.add-comment textarea {
|
|
||||||
width: 80%;
|
|
||||||
display: block;
|
|
||||||
background: black;
|
|
||||||
color: white;
|
|
||||||
margin: auto;
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
.add-comment button {
|
|
||||||
background: red;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment .text {
|
|
||||||
white-space: pre-line;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
<link rel="stylesheet" href="/static/css/reset.css"></link>
|
<link rel="stylesheet" href="/static/css/reset.css"></link>
|
||||||
<link rel="stylesheet" href="/static/css/style.css"></link>
|
<link rel="stylesheet" href="/static/css/style.css"></link>
|
||||||
|
<link rel="stylesheet" href="/static/css/comments.css"></link>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
{% block main %}
|
{% block main %}
|
||||||
<div class="content">
|
<div class="content">
|
||||||
|
|
Loading…
Reference in a new issue