upload page styling

3 files changed, 180 insertions, 8 deletions

diff --git a/animism-align/frontend/common/app.css b/animism-align/frontend/common/app.css
index 3482820..362b933 100644
--- a/animism-align/frontend/common/app.css
+++ b/animism-align/frontend/common/app.css
@@ -59,7 +59,10 @@ body {
 
 
 .row.menubar {
+  background: #324;
+  padding: 0.5rem;
   justify-content: flex-end;
+  margin-bottom: 1rem;
 }
 .menubar > :first-child {
   flex: 1;
@@ -122,15 +125,16 @@ a {
 /* menu button */
 
 .menuButtons {
-  width: 2.5rem;
+  width: 3.5rem;
   min-height: 18rem;
+  padding: 0 1.0rem 0 1.0rem;
 }
 .menuButton {
   position: relative;
   text-align: center;
   text-transform: uppercase;
   font-size: 0.625rem;
-  color: #333;
+  color: #ddd;
   text-decoration: none;
   cursor: pointer;
   display: flex;
@@ -141,7 +145,7 @@ a {
   margin-bottom: 0.75rem;
 }
 .menuButton .icon {
-  background-color: #fff;
+  background-color: #101;
   width: 2.5rem;
   height: 2.5rem;
   border: 1px solid;
@@ -158,11 +162,11 @@ a {
   fill: #888;
 }
 .menuButton:hover .icon {
-  background-color: #eef;
-  border-color: #000;
+  background-color: #000;
+  border-color: #fff;
 }
 .menuButton:hover svg {
-  fill: #000;
+  fill: #fff;
 }
 
 .menuButton.small {
diff --git a/animism-align/frontend/views/align/align.css b/animism-align/frontend/views/align/align.css
index fc1ae57..ec39cd8 100644
--- a/animism-align/frontend/views/align/align.css
+++ b/animism-align/frontend/views/align/align.css
@@ -81,7 +81,7 @@ canvas {
   /*top: 0; left: 0;*/
   width: 3rem; height: 3rem;
   padding: 1rem;
-  background: #000;
+  background: transparent;
   cursor: pointer;
   background-size: contain;
   background-repeat: no-repeat;
diff --git a/animism-align/frontend/views/upload/upload.css b/animism-align/frontend/views/upload/upload.css
index 1dc8ac0..f250af1 100644
--- a/animism-align/frontend/views/upload/upload.css
+++ b/animism-align/frontend/views/upload/upload.css
@@ -8,4 +8,172 @@
 .upload > div:last-child {
   flex: 1;
   width: 100%;
-}
\ No newline at end of file
+}
+
+/* results */
+
+.resultsContainer {
+}
+.results {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  align-items: flex-end;
+}
+.results .result {
+  display: inline-block;
+  margin-right: 1.125rem;
+  margin-bottom: 1.125rem;
+}
+.result > a {
+  display: block;
+}
+.result > a > div {
+  position: relative;
+}
+.result img {
+  max-width: 100%;
+  display: block;
+  cursor: pointer;
+}
+.result > a {
+  border: 2px solid transparent;
+}
+.results .active img,
+.desktop .result > a:hover {
+  border-color: #11f;
+}
+.results.th .result {
+  max-width: 10rem;
+}
+.results.sm .result {
+  max-width: 20rem;
+}
+.results.md .result {
+  max-width: 40rem;
+}
+.results.lg .result {
+  max-width: 80rem;
+}
+.results.orig .result {
+  max-width: 100%;
+}
+.results.th img {
+  max-height: 120px;
+}
+.results.sm img {
+  max-height: 160px;
+}
+.results.md img {
+  max-height: 480px;
+}
+.results.lg img {
+  max-height: 960px;
+}
+.results.orig img {
+  max-width: none;
+  max-height: none;
+}
+.results .img {
+  width: 100%;
+}
+.results .img > a {
+  display: inline-block;
+  position: relative;
+}
+.results .meta {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: baseline;
+  font-size: 0.75rem;
+  color: #888;
+  padding: 0.125rem;
+}
+.results .meta.center,
+.row.center {
+  align-items: center;
+}
+.results .meta > div {
+  overflow: hidden;
+  max-width: 75%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.results .meta > span {
+  padding-right: 0.125rem;
+}
+.results .meta .buttons {
+}
+.score.good {
+  color: #11f;
+  font-weight: bold;
+}
+.score.ok {
+  color: #44d;
+  font-weight: bold;
+}
+.score.poor {
+  color: #66b;
+}
+.score {
+  color: #888;
+}
+.resultGroup {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  position: relative;
+  border: 2px solid #888;
+  max-width: 20rem;
+  margin-right: 1.5rem;
+  margin-bottom: 1.5rem;
+  background: #fff;
+  box-shadow: 0 2px 4px #888;
+}
+.resultGroup .sha256 {
+  position: absolute;
+  background: white;
+  padding: 0.25rem 0.25rem 0rem 0.25rem;
+  left: 0.25rem;
+  top: -0.75rem;
+  font-size: 0.75rem;
+  color: #333;
+  text-transform: uppercase;
+  max-width: 95%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.results.grouped {
+  background: #fff;
+}
+.results.grouped.sm,
+.results.grouped.md,
+.results.grouped.lg,
+.results.grouped.orig {
+  flex-flow: column nowrap;
+}
+.results.th .resultGroup {
+  max-width: 33.5rem;
+}
+.results.sm .resultGroup {
+  max-width: 56rem;
+}
+.results.md .resultGroup {
+  max-width: 79rem;
+}
+.results.lg .resultGroup {
+  max-width: 100%;
+}
+.results.orig .resultGroup {
+  max-width: 100%;
+}
+.results .resultGroup .result {
+  margin: 0.5rem;
+}
+.loadMore {
+  width: 100%;
+}
+.loadMore button {
+  width: 100%;
+}