css: Make space for avatars on wide screens.
[software/mumi.git] / assets / css / screen.css
index 012d359011065336b57f43155902134db08fbfaa..fbf0e59fd2d5569a16be6a2dcc452858d79a0f2c 100644 (file)
@@ -1,42 +1,15 @@
-@media all {html {font-size: 28px;}}
-
 html, body {
     background-color: #fff;
     width: 100%;
     height: 100%;
-    line-height: 1.4em;
     padding: 0px;
     margin: 0px;
-    font-family: sans-serif;
 }
 
 h1 {
     clear: both;
-    font-size: 32px;
-    line-height: 105%;
     margin-top: 1.3rem;
     margin-bottom: 0.5rem;
-    padding: 0px;
-    display: block;
-    font-weight: 400;
-    color: #333;
-}
-
-.logo:link,
-.logo:visited {
-    background-image: url("../img/logo.png");
-    background-position: bottom;
-    background-repeat: no-repeat;
-    border-style: none;
-    display: inline-block;
-    height: 55px;
-    width: 170px;
-}
-
-.logo:active,
-.logo:focus,
-.logo:hover {
-    background-position: top;
 }
 
 .title {
@@ -61,8 +34,13 @@ h2 {
     padding-bottom: 5px;
 }
 
-p {
-    max-width: 70rem;
+ul.merged li, ul.blockedby li, ul.blocks li {
+    display: inline-block;
+}
+ul.merged li + li:before,
+ul.blockedby li + li:before,
+ul.blocks li + li:before {
+    content: ", ";
 }
 
 p + p {
@@ -70,16 +48,10 @@ p + p {
     margin-top: 1.0rem;
 }
 
-
-form {
+.card-body form {
     padding-bottom: 2em;
 }
 
-label {
-    text-align: right;
-    margin-right: 0.5em;
-}
-
 thead {
     border-bottom: 2px solid #ddd;
     font-weight: bold;
@@ -116,10 +88,23 @@ tr.important td:nth-child(1) {
     padding: 0;
 }
 
-#header #search input:focus {
+#search input:focus {
     width: 500px;
 }
 
+footer {
+    border-color: #1A1A1A1A;
+    border-style: dashed none none none;
+    border-width: 2px;
+    width: 100%;
+    align-items: center;
+    text-align: center;
+    margin-top: 3rem;
+    padding: 1rem;
+    color: #586069;
+    background: #fafafa;
+}
+
 table {
     width: 100%;
 }
@@ -139,21 +124,34 @@ table {
 }
 
 .conversation .avatar {
-    height: 64px;
-    width: 64px;
-    border: 1px solid #ddd;
-    border-radius: 6px;
-    color: #fff;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 58px;
+    display: none;
+}
+
+@media (min-width: 768px) {
+    .conversation .avatar {
+        height: 64px;
+        width: 64px;
+        border: 1px solid #ddd;
+        border-radius: 6px;
+        color: #fff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 58px;
+        position: absolute;
+    }
 }
 
 .address + .address:before {
     content: ", ";
 }
 
+@media (min-width: 768px) {
+    .message {
+        margin-left: 80px;
+    }
+}
+
 .message .body pre {
     background: transparent;
     border: none;
@@ -259,6 +257,7 @@ table {
     padding: 2px;
     border-radius: 3px;
     font-family: monospace;
+    margin: 1px;
 }
 
 .status-tag {