<div class="comment-container theme--light">
<div class="comments" >
<div class="card v-card v-sheet theme--light elevation-2" ><span class="headline" >Leave a comment</span>
<div class="sign-in-wrapper" >
<p class="caption disclaimer" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi gravida lacinia faucibus. Sed tincidunt ex sem, non gravida odio fermentum sit amet.</p>
<p class="error-message" ></p>
</div>
<!---->
</div>
<div >
<div class="card v-card v-sheet theme--light elevation-2">
<div class="header">
<div class="v-avatar avatar" style="height: 50px; width: 50px;"><img src="https://images.unsplash.com/photo-1490894641324-cfac2f5cd077?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=100&q=70"></div>
<span class="displayName title">John Doe</span> <span class="displayName caption">2 days ago</span></div>
<!---->
<div class="wrapper comment">
<p>Fusce sodales magna id porta egestas. Nulla massa est, hendrerit nec auctor vitae, porta ut est.</p>
</div>
<div class="actions">
<!---->
<!---->
<!---->
</div>
<div class="v-dialog__container" style="display: block;"></div>
</div>
<!---->
<div class="answers">
<!---->
</div>
</div>
<div >
<div class="card v-card v-sheet theme--light elevation-2">
<div class="header">
<div class="v-avatar avatar" style="height: 50px; width: 50px;"><img src="https://images.unsplash.com/photo-1476657680631-c07285ff2581?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=70"></div>
<span class="displayName title">Albert Arja</span> <span class="displayName caption">15 days ago</span></div>
<!---->
<div class="wrapper comment">
<p>Fusce sodales magna id porta egestas. Nulla massa est, hendrerit nec auctor vitae, porta ut est.</p>
<p>Thanks You.</p>
</div>
<div class="actions">
<!---->
<!---->
<!---->
</div>
<div class="v-dialog__container" style="display: block;"></div>
</div>
<!---->
<div class="answers">
<!---->
</div>
</div>
<div >
<div class="card v-card v-sheet theme--light elevation-2">
<div class="head er">
<div class="v-avatar avatar" style="height: 50px; width: 50px;"><img src="https://images.unsplash.com/photo-1490894641324-cfac2f5cd077?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=100&q=70"></div>
<span class="displayName title">Robert</span> <span class="displayName caption">2 months ago</span></div>
<!---->
<div class="wrapper comment">
<p>Fusce sodales magna id porta egestas. Nulla massa est, hendrerit nec auctor vitae, porta ut est. </p>
<p>Fusce sodales magna id porta egestas. Nulla massa est, hendrerit nec auctor vitae, porta ut est.</p>
</div>
<div class="actions">
<!---->
<!---->
<!---->
</div>
<div class="v-dialog__container" style="display: block;"></div>
</div>
<!---->
<div class="answers">
<!---->
</div>
</div>
</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Noto+Serif:400,700');
body {
background-color: #fafafa;
font-family: 'Noto Serif', serif;
}
.comment-container {
width: 60%;
margin: 2rem auto;
}
a {
color: #c40030;
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
.v-btn {
align-items: center;
border-radius: 2px;
display: inline-flex;
height: 36px;
flex: 0 0 auto;
font-size: 14px;
font-weight: 700;
justify-content: center;
margin: 6px 8px;
min-width: 88px;
outline: 0;
text-transform: uppercase;
text-decoration: none;
transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), color 1ms;
position: relative;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 0 16px;
}
.v-btn:before {
border-radius: inherit;
color: inherit;
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
opacity: 0.12;
transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
width: 100%;
}
.v-btn:focus,
.v-btn:hover {
position: relative;
}
.v-btn:focus:before,
.v-btn:hover:before {
background-color: currentColor;
}
.v-btn__content {
align-items: center;
border-radius: inherit;
color: inherit;
display: flex;
flex: 1 0 auto;
justify-content: center;
margin: 0 auto;
position: relative;
transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
white-space: nowrap;
width: inherit;
}
.v-btn:not(.v-btn--depressed):not(.v-btn--flat) {
will-change: box-shadow;
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.v-btn:not(.v-btn--depressed):not(.v-btn--flat):active {
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.avatar {
width: 50px;
height: 50px;
margin-left: -42px;
border-radius: 50%;
}
.v-avatar {
align-items: center;
border-radius: 50%;
display: inline-flex;
justify-content: center;
position: relative;
text-align: center;
vertical-align: middle;
}
.v-avatar img {
border-radius: 50%;
display: inline-flex;
height: inherit;
width: inherit;
object-fit: cover;
}
.v-card {
text-decoration: none;
}
.v-card > :first-child:not(.v-btn):not(.v-chip) {
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
.v-card > :last-child:not(.v-btn):not(.v-chip) {
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
}
.v-sheet {
display: block;
border-radius: 2px;
position: relative;
}
.v-dialog__container {
display: inline-block;
vertical-align: middle;
}
.elevation-2 {
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12) !important;
}
*,
:after,
:before {
box-sizing: inherit;
}
:after,
:before {
text-decoration: inherit;
vertical-align: inherit;
}
* {
background-repeat: no-repeat;
padding: 0;
margin: 0;
}
a:active,
a:hover {
outline-width: 0;
}
button {
font: inherit;
overflow: visible;
text-transform: none;
background-color: transparent;
border-style: none;
color: inherit;
}
[type="button"]::-moz-focus-inner,
button::-moz-focus-inner {
border-style: 0;
padding: 0;
}
[type="button"]::-moz-focus-inner,
button:-moz-focusring {
outline: 0;
border: 0;
}
button,
html [type="button"] {
-webkit-appearance: button;
}
img {
border-style: none;
}
::-ms-clear,
::-ms-reveal {
display: none;
}
.headline {
font-weight: 400;
letter-spacing: normal !important;
font-size: 24px !important;
line-height: 32px !important;
}
.title {
font-size: 20px !important;
font-weight: 700;
line-height: 1 !important;
letter-spacing: 0.02em !important;
}
.caption {
font-weight: 400;
font-size: 12px !important;
}
.theme--light.v-btn {
color: rgba(0, 0, 0, 0.87);
}
.theme--light.v-btn:not(.v-btn--icon):not(.v-btn--flat) {
background-color: #f5f5f5;
}
.theme--light .v-card {
box-shadow: rgba(0, 0, 0, 0.11) 0 15px 30px 0px,
rgba(0, 0, 0, 0.08) 0 5px 15px 0 !important;
}
.theme--light.application .v-card {
box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11),
0 5px 15px 0 rgba(0, 0, 0, 0.08) !important;
color: #102c3c !important;
}
.theme--light.v-card,
.theme--light.v-sheet {
background-color: #fff;
border-color: #fff;
color: rgba(0, 0, 0, 0.87);
}
a,
a:hover {
text-decoration: none !important;
}
.wrapper {
overflow: auto;
}
.answers {
padding-left: 64px;
}
.comment {
overflow-y: auto;
margin-left: 32px;
margin-right: 16px;
}
.comment p {
font-size: 14px;
margin-bottom: 7px;
}
.displayName {
margin-left: 24px;
}
.actions {
display: flex;
flex: 1;
flex-direction: row;
justify-content: flex-end;
}
.google-span[data-v-35838f51] {
font-size: 14px;
color: rgba(0, 0, 0, 0.54);
}
.google-button[data-v-35838f51] {
background-color: #fff;
height: 40px;
margin: 0;
}
.headline {
margin-left: 32px;
}
.sign-in-wrapper {
margin-top: 16px;
margin-left: 32px;
}
.error-message {
font-style: oblique;
color: #c40030;
}
::-moz-selection,
::selection {
background-color: #b3d4fc;
color: #000;
text-shadow: none;
}
.card,
.card {
padding: 32px 16px;
margin-bottom: 32px;
display: flex;
flex-direction: column;
}
.application a,
[type="button"],
button {
cursor: pointer;
}
@media screen and (max-width: 640px) {
.comment-container {
width: 90%;
}
.comments {
padding: 32px;
}
}