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 */
-
-
-
-
-
+
@@ -1288,17 +1082,16 @@
@@ -1317,6 +1110,14 @@
+