diff --git a/src/styles/_color.scss b/src/styles/_color.scss
index 6b96e43..69b069d 100644
--- a/src/styles/_color.scss
+++ b/src/styles/_color.scss
@@ -22,12 +22,13 @@ $message: hsl(109, 45%, 27%);
$message-flashy: hsl(148, 100%, 50%);
$message-hover: color.adjust($message, $lightness: -10%, $space: hsl);
$message-bg: color.adjust($message, $lightness: 60%, $space: hsl);
+$message-bg-light: color.adjust($message, $lightness: 70%, $alpha: -0.3, $space: hsl);
$media: hsl(214, 45%, 27%);
$media-flashy: hsl(193, 100%, 50%);
$media-hover: color.adjust($media, $lightness: -10%, $space: hsl);
$media-bg: color.adjust($media, $lightness: 60%, $space: hsl);
-$media-bg-light: color.adjust($media, $lightness: 60%, $alpha: -0.4, $space: hsl);
+$media-bg-light: color.adjust($media, $lightness: 70%, $alpha: -0.3, $space: hsl);
//Over image colors
$over-img: #DDD;
diff --git a/src/styles/_page.project.feed.scss b/src/styles/_page.project.feed.scss
index 6c42aca..5648291 100644
--- a/src/styles/_page.project.feed.scss
+++ b/src/styles/_page.project.feed.scss
@@ -106,18 +106,25 @@
}
}
+ .comment {
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ margin: 0;
+ padding: var.$elem-spacing;
+ line-height: normal;
+ box-sizing: border-box;
+ border-radius: 0 0 var.$block-radius var.$block-radius;
+ transition: opacity 0.3s;
+ cursor: auto;
+ font-size: 0.9em;
+ }
+
&.message {
background: color.$message-bg;
color: color.$message;
- p {
- font-size: 0.9em;
- height: 1em;
- margin: 0 0 var.$elem-spacing 0;
- display: inline-block;
- width: 100%;
- }
-
a {
color: color.$message;
&:hover {
@@ -125,8 +132,7 @@
}
}
- a.drill {
- line-height: 0;
+ .drill {
.drill-icon {
@@ -143,6 +149,24 @@
.drill-hover-icon {
color: color.$message-flashy;
}
+ .comment {
+ opacity: 0.3;
+ }
+ }
+
+ .comment {
+ background: color.$message-bg-light;
+
+ &:hover {
+ opacity: 1;
+ }
+ p {
+ margin: 0;
+ }
+
+ p + p {
+ margin-top: var.$elem-spacing;
+ }
}
}
@@ -256,21 +280,6 @@
outline: none;
border-radius: var.$block-radius;
}
-
- .comment {
- position: absolute;
- left: 0;
- bottom: 0;
- width: 100%;
- line-height: normal;
- box-sizing: border-box;
- margin: 0;
- padding: 0.5em;
- text-align: justify;
- border-radius: 0 0 var.$block-radius var.$block-radius;
- transition: opacity 0.3s;
- opacity: 1;
- }
}
}
}
diff --git a/src/styles/_page.project.scss b/src/styles/_page.project.scss
index 5c46409..3317e56 100644
--- a/src/styles/_page.project.scss
+++ b/src/styles/_page.project.scss
@@ -16,11 +16,12 @@
/* Drill icon */
- a.drill {
+ .drill {
position: relative;
overflow: hidden;
text-decoration: none;
display: inline-block;
+ line-height: 0;
.drill-icon {
position: absolute;
+
+
+
++
+
+