upload page styling

2 files changed, 170 insertions, 2 deletions

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%;
+}