From 57af513db69b6de4100d61bbc7573c3e977e1227 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Mon, 15 Jun 2020 17:15:05 +0530 Subject: [PATCH] fixed sign in UI Other small UI fixes and changes. updated icons to match overarching design language --- index.html | 1329 ++++++++++++++++++++++++++++++---------------------- 1 file changed, 778 insertions(+), 551 deletions(-) diff --git a/index.html b/index.html index 37bd8e1..dbddc0c 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,5 @@ - Content Collaboration @@ -35,13 +34,12 @@ } body { - font-size: 16px; - background: #111; - } - - :root { --primary-color: #00fa9a; - --light-shade: rgba(255, 255, 255, 0.1); + --light-shade: #222; + --background: #111; + --text: 238, 238, 238; + font-size: 16px; + background: var(--background); } * { @@ -56,14 +54,16 @@ h2, h3, h4, - h5, - span, - p { + h5 { font-family: 'Barlow', sans-serif; } + p { + line-height: 1.6; + } + ::-webkit-scrollbar { - width: 0.3rem; + width: 0.5rem; height: 0.3rem; } @@ -94,8 +94,8 @@ color: var(--primary-color); padding: 0.6rem 1rem; border: none; - -webkit-transition: background 0.2s ease; - transition: background 0.2s ease; + -webkit-transition: background 0.3s ease; + transition: background 0.3s ease; font-family: 'Barlow', sans-serif; letter-spacing: 0.06em; word-spacing: 0.1em; @@ -104,11 +104,6 @@ text-transform: uppercase; } - button svg { - height: 1rem; - width: 1rem; - } - button .icon { margin-right: 0.6rem; } @@ -126,8 +121,21 @@ outline: none; } - input:not([type="checkbox"]), - select { + button[disabled] { + opacity: 0.5 !important; + cursor: default; + color: rgba(var(--text), 1); + } + + textarea { + background: var(--light-shade); + color: rgba(var(--text), 1); + padding: 1.5rem; + max-width: 100%; + font-size: 1rem; + } + + input:not([type="checkbox"]) { -ms-flex-item-align: start; align-self: flex-start; display: -webkit-box; @@ -139,7 +147,7 @@ border-radius: 0.2rem; margin: 1rem 0; background: #181818; - color: white; + color: rgba(var(--text), 1); font-size: 1rem !important; } @@ -157,7 +165,37 @@ align-items: center; } + #confirmation { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + padding: 1rem; + } + + #confirmation p { + margin: 1rem; + font-size: 1rem; + font-weight: 500; + color: rgba(var(--text), 1); + } + + #confirmation div { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + } + + #confirmation div button:first-of-type { + margin-left: auto; + } + .icon { + height: 1rem; + width: 1rem; fill: none; stroke: var(--primary-color); stroke-width: 6; @@ -183,11 +221,6 @@ margin: 0; } - #clear_export svg { - -webkit-transform: rotate(45deg); - transform: rotate(45deg); - } - .dropdown { position: relative; } @@ -243,7 +276,7 @@ } .popup-container .popup { - width: 24rem; + width: 26rem; -ms-flex-item-align: center; align-self: center; border-radius: 0.4rem; @@ -266,7 +299,13 @@ transition: transform 0.3s, -webkit-transform 0.3s; -webkit-box-shadow: 0 2rem 2rem rgba(0, 0, 0, 0.24); box-shadow: 0 2rem 2rem rgba(0, 0, 0, 0.24); - color: white; + color: rgba(var(--text), 1); + overflow-y: auto; + max-height: 100%; + } + + .solid-background { + background: var(--background); } #context_menu { @@ -289,17 +328,19 @@ } .section-title h2 { - color: #111; + color: var(--background); background: var(--primary-color); padding: 0.5rem; margin: 0; - cursor: pointer; } .gallery-name { padding: 0.2rem 0; margin: 1rem 0; - color: white; + font-size: 1.2rem; + color: rgba(var(--text), 1); + font-weight: 500; + line-height: 1.5; } .edit-article { @@ -338,6 +379,7 @@ -ms-flex-align: center; align-items: center; padding: 0.5rem 0; + margin-bottom: 0.5rem; } .heading h3 { @@ -352,6 +394,12 @@ align-self: center; } + .heading>.icon:first-of-type { + margin-right: 1rem; + cursor: pointer; + stroke: rgba(var(--text), 1); + } + .gallery-container { position: relative; } @@ -394,6 +442,7 @@ overflow-x: auto; -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; + margin-bottom: 4rem !important; } .article-body { @@ -407,13 +456,13 @@ scroll-snap-align: start; min-width: 30%; background-color: #222; - color: white; + color: rgba(var(--text), 1); margin: 0 1rem 1rem 0; border-radius: 0.2rem; } .article-body .article-header { - padding: 1rem 1.5rem; + padding: 1.5rem; word-break: break-all; } @@ -430,16 +479,18 @@ } .article-body .card-body .content-div { - padding: 0 1rem 4rem 1rem; + padding: 0 1.5rem 4rem 1.5rem; min-height: 16rem; - line-height: 1.4em; + line-height: 1.7; max-height: 50vh; overflow-y: auto; font-weight: 400; + overflow-wrap: break-word; } .article-body .card-body .content-div * { font-family: 'Roboto', sans-serif; + overflow-wrap: break-word; } .article-body .card-body button { @@ -449,6 +500,10 @@ margin-right: 1rem; } + .article-body .card-body .submit-btn { + background: var(--light-shade); + } + .article-body .card-footer { display: -webkit-box; display: -ms-flexbox; @@ -486,111 +541,6 @@ margin-right: 0.5rem; } - #sign_in { - border-radius: 0; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-flow: column wrap; - flex-flow: column wrap; - padding: 2rem; - overflow: hidden; - margin: 1rem; - -ms-flex-item-align: center; - -ms-grid-row-align: center; - align-self: center; - width: 30rem; - } - - #sign_in h2 { - margin: 0.5rem 0; - z-index: 3; - } - - #sign_in p:first-of-type { - margin-bottom: 4rem; - z-index: 3; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); - } - - #sign_in span { - position: absolute; - background: var(--accent-color); - border-radius: 10%; - padding: 10rem; - top: -8rem; - right: -10rem; - z-index: 1; - -webkit-transform: rotate(30deg); - transform: rotate(30deg); - } - - #sign_in div:first-of-type { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - margin-bottom: 4rem; - z-index: 3; - } - - #sign_in div:first-of-type button { - margin: initial; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - text-align: center; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - margin: 0.5rem; - width: 8rem; - background: rgba(0, 0, 0, 0.2); - -webkit-transition: -webkit-box-shadow 0.3s ease; - transition: -webkit-box-shadow 0.3s ease; - transition: box-shadow 0.3s ease; - transition: box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease; - border: 1px solid rgba(var(--rgb-bw), 0.06); - } - - #sign_in div:first-of-type button svg { - height: 2rem; - width: 2rem; - margin: 1rem; - fill: var(--primary-color); - } - - #sign_in div:first-of-type button:hover { - -webkit-box-shadow: 0.1rem 0.2rem 2rem rgba(0, 0, 0, 0.24); - box-shadow: 0.1rem 0.2rem 2rem rgba(0, 0, 0, 0.24); - } - - #sign_in #priv_key_sign_in { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-flow: column wrap; - flex-flow: column wrap; - z-index: 3; - } - - #sign_in #priv_key_sign_in .input { - background: rgba(0, 0, 0, 0.24); - } - - #sign_in #priv_key_sign_in button { - margin-left: initial; - margin-bottom: 2rem; - background: rgba(var(--rgb-bw), 0.04); - width: -webkit-fit-content; - width: -moz-fit-content; - width: fit-content; - } - .show { opacity: 1; pointer-events: all; @@ -619,6 +569,134 @@ transform: none !important; } + :-webkit-any-link { + color: var(--primary-color); + text-decoration: none; + } + + :-moz-any-link { + color: var(--primary-color); + text-decoration: none; + } + + :any-link { + color: var(--primary-color); + text-decoration: none; + } + + #sign_in { + border-radius: 0; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-flow: column wrap; + flex-flow: column wrap; + padding: 2rem; + overflow: hidden; + margin: 1rem; + -ms-flex-item-align: center; + -ms-grid-row-align: center; + align-self: center; + width: calc(100% - 2rem); + } + + #sign_in .icon { + stroke: rgba(var(--text), 1); + } + + #sign_in h2 { + margin-bottom: 1rem; + z-index: 3; + } + + #sign_in p:first-of-type { + margin-bottom: 4rem; + z-index: 3; + color: rgba(var(--text), 0.8); + } + + #sign_in .back-btn { + margin-bottom: 1rem; + padding-left: 0; + color: rgba(var(--text), 1); + } + + #sign_in div:first-of-type { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + margin-bottom: 4rem; + z-index: 3; + } + + #sign_in div:first-of-type .icon { + height: 3rem; + width: 3rem; + stroke-width: 4; + margin-bottom: 1rem; + margin-right: 0; + } + + #sign_in div:first-of-type button { + margin: initial; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + text-align: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + margin: 0.5rem; + width: 8rem; + color: rgba(var(--text), 1); + background: rgba(var(--foreground), 1); + } + + #sign_in div:first-of-type button:hover { + color: var(--primary-color); + } + + #sign_in div:first-of-type button:hover .icon { + stroke: var(--primary-color); + } + + #sign_in #priv_key_sign_in { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-flow: column wrap; + flex-flow: column wrap; + z-index: 3; + } + + #sign_in #priv_key_sign_in .input { + display: -webkit-box !important; + display: -ms-flexbox !important; + display: flex !important; + background: rgba(0, 0, 0, 0.24); + } + + #sign_in #priv_key_sign_in .input input { + width: 100%; + border: none; + outline: none; + margin: 0; + } + + #sign_in #priv_key_sign_in button { + margin: 1rem 0 2rem 0; + width: 100%; + background: rgba(var(--text), 0.1); + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + } + #navbar { position: fixed; width: 100%; @@ -632,10 +710,11 @@ -webkit-box-align: center; -ms-flex-align: center; align-items: center; - color: white; + color: rgba(var(--text), 1); background: #222; padding: 1rem; z-index: 2; + will-change: transform; } #navbar h5 { @@ -671,7 +750,7 @@ height: 100vh; width: 100vw; top: 0; - background: rgba(0, 0, 0, 0.4); + background: var(--background); -webkit-transition: opacity 0.6s ease; transition: opacity 0.6s ease; display: -ms-grid; @@ -693,7 +772,7 @@ #loader_container h4 { font-weight: normal; - color: white; + color: rgba(var(--text), 1); } #loader_container button { @@ -780,6 +859,65 @@ } } + #section_plot_modal p { + margin: 1rem 0; + font-weight: 400; + } + + #section_plot_modal details { + margin-bottom: 1rem; + cursor: pointer; + } + + #section_plot_modal summary { + outline: none; + } + + @media screen and (min-width: 640px) { + #sign_in { + width: 24rem; + height: auto; + border-radius: 0.4rem; + } + + .gallery-name { + max-width: 40rem; + } + + #section_plot_modal { + width: 42rem; + } + + #confirmation { + padding: 1rem; + width: 24rem; + } + + #confirmation button { + margin-left: 0.5rem; + } + + #confirmation button:first-of-type { + margin-left: auto; + } + + #confirmation p { + margin: 1rem; + margin-bottom: 2rem; + } + } + + @media screen and (min-width: 1920px) { + .article-body { + min-width: 20%; + } + } + + .label { + margin-bottom: 0.4rem; + font-weight: 500; + } + @media only screen and (max-width: 640px) { ::-webkit-scrollbar { width: 0.2rem; @@ -843,11 +981,6 @@ flex-direction: column; } - #context_menu button:nth-of-type(1) svg { - -webkit-transform: rotate(45deg); - transform: rotate(45deg); - } - #article_container { padding: 1.5rem 1.5rem 6rem 1.5rem; } @@ -875,400 +1008,62 @@ } } - /* Tooltip container */ - .tooltip { - position: relative; - display: inline-block; - border-bottom: 1px dotted black; /* If you want dots under the hoverable text */ + @media (any-hover: hover) { + .gallery { + overflow-x: hidden; + } } - /* Tooltip text */ - .tooltip .tooltiptext { - visibility: hidden; - width: 350px; - background-color: black; - color: #fff; - text-align: center; - padding: 5px 0; - border-radius: 6px; - - /* Position the tooltip text - see examples below! */ - position: absolute; - z-index: 1; - } - - /* Show the tooltip text when you mouse over the tooltip container */ - .tooltip:hover .tooltiptext { - visibility: visible; - } + /*# sourceMappingURL=main.css.map */ - - - - - +
+ +

Don't have a private key? get it here
or you can sign as guest.

-
@@ -1288,17 +1082,16 @@
@@ -1317,6 +1110,14 @@ +