diff --git a/components.js b/components.js
index 77dd8b8..d3f9637 100644
--- a/components.js
+++ b/components.js
@@ -234,6 +234,7 @@ border: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
+ cursor: text;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
@@ -246,9 +247,6 @@ border: none;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
background: rgba(var(--text-color), 0.06);
- -webkit-box-shadow: 0 0 0.2rem rgba(var(--text-color), 0.2) inset;
- box-shadow: 0 0 0.2rem rgba(var(--text-color), 0.2) inset;
- font-family: var(--font-family);
width: 100%;
outline: none;
min-width: 0;
@@ -611,7 +609,6 @@ smTextarea.innerHTML = `
-webkit-box-shadow: 0 0 0.2rem rgba(var(--text-color), 0.2) inset;
box-shadow: 0 0 0.2rem rgba(var(--text-color), 0.2) inset;
background: rgba(var(--text-color), 0.06);
- font-family: var(--font-family);
width: 100%;
outline: none;
min-width: 0;
@@ -2655,10 +2652,11 @@ smNotifications.innerHTML = `
}
@media screen and (min-width: 640px){
.notification-panel{
- width: 40vw;
+ max-width: 40vw;
+ width: max-content;
-webkit-box-pack: end;
-ms-flex-pack: end;
- justify-content: flex-end;
+ justify-content: flex-end;
}
.notification{
-ms-grid-column-align: end;
diff --git a/css/main.css b/css/main.css
index c6ba6e9..1de776b 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,3 +1,4 @@
+@charset "UTF-8";
* {
box-sizing: border-box;
padding: 0;
@@ -13,9 +14,9 @@ body {
--background-color: rgba(var(--foreground-color), 1);
--dark-shade: #f8f8f8;
--error-color: #E53935;
- --hue: 255;
- --saturation: 61%;
- --lightness: 39%;
+ --hue: 172;
+ --saturation: 74%;
+ --lightness: 34%;
color: rgba(var(--text-color), 1);
font-size: 16px;
background: var(--dark-shade);
@@ -23,15 +24,15 @@ body {
}
body[data-theme=dark] {
- --accent-color: #00BFA6;
+ --accent-color: #00e2c4;
--text-color: 238, 238, 238;
--text-color-light: 170, 170, 170;
--foreground-color: 26, 26, 26;
--background-color: #111;
--dark-shade: #080808;
- --hue: 255;
- --saturation: 39%;
- --lightness: 70%;
+ --hue: 172;
+ --saturation: 70%;
+ --lightness: 44%;
}
a {
@@ -255,48 +256,96 @@ button:disabled {
}
#sign_in_page {
- background: url(sign-in-bg.svg) no-repeat center, linear-gradient(rgba(var(--foreground-color), 1), rgba(var(--foreground-color), 1));
+ background: url(sign-in-bg.svg) no-repeat center, linear-gradient(rgba(var(--text-color), 0.04), rgba(var(--text-color), 0.04)), linear-gradient(rgba(var(--foreground-color), 1), rgba(var(--foreground-color), 1));
background-size: cover;
min-height: 100vh;
- justify-content: flex-start;
- align-content: center;
+ align-items: center;
padding: 0 6vw;
}
-#sign_in_page h1 {
- line-height: 1.1em;
+#sign_in_page .info h1 {
font-weight: 800;
font-size: clamp(1.5rem, 8vw, 4rem);
- color: rgba(var(--text-color), 0.8);
}
-#sign_in_page sm-button {
- margin-top: 2rem;
+#sign_in_page .info h4 {
+ font-weight: 500;
+ font-family: "Roboto", sans-serif;
+ opacity: 0.8;
}
-#sign_in_page p {
- margin-top: 1rem;
+#sign_in_page .sign-in-box {
+ background: rgba(var(--foreground-color), 1);
+ z-index: 1;
+ padding: 2rem;
+ border-radius: 0.5rem;
+ box-shadow: 0 0 0.3rem #00000016, 0 6rem 2rem -2rem #00000016;
+ justify-self: center;
}
-
-#sign_in_popup {
- text-align: center;
+#sign_in_page .sign-in-box ś sm-input {
+ text-align: left;
}
-#sign_in_popup h3 {
- margin-top: 2rem;
+#sign_in_page .sign-in-box sm-panel {
+ width: 100%;
+}
+#sign_in_page .sign-in-box sm-tab-header {
+ align-self: flex-start;
+}
+#sign_in_page .sign-in-box sm-tab-header::part(tab-header) {
+ padding-bottom: 0.4rem;
+ gap: 1.5rem;
+}
+#sign_in_page .sign-in-box sm-tab::part(tab) {
+ padding: 0.4rem 0;
+}
+#sign_in_page .sign-in-box sm-tab-panels {
+ margin-top: 3rem;
+}
+#sign_in_page .sign-in-box form {
+ width: 100%;
+}
+#sign_in_page .sign-in-box h2 {
margin-bottom: 0.5rem;
}
-#sign_in_popup h4 {
+#sign_in_page .sign-in-box h3 {
font-weight: 500;
+}
+#sign_in_page .sign-in-box h4 {
+ font-weight: 500;
+ margin-bottom: 1.5rem;
+}
+#sign_in_page .sign-in-box h5 {
+ opacity: 0.8;
+ font-weight: 500;
+}
+#sign_in_page .sign-in-box .copy-row h4 {
+ max-width: 34ch;
+}
+#sign_in_page .sign-in-box .copy-row:not(:last-of-type) {
margin-bottom: 1rem;
}
-#sign_in_popup button {
- margin: 1rem 0;
+#sign_in_page .sign-in-box button {
+ margin-top: 1rem;
+ padding: 0.6rem 1.6rem;
}
-#sign_in_popup p {
- margin: 1rem 0;
+#sign_in_page .sign-in-box p {
+ margin-bottom: 0.5rem;
+ max-width: 35ch;
+ margin-top: 0.5rem;
+ margin-bottom: 1.5rem;
}
-#sign_in_popup h5 {
- text-align: center;
- margin-bottom: 1rem;
+#sign_in_page .sign-in-box #credentials_section {
+ border-top: 1px rgba(var(--text-color), 0.2) solid;
+ margin-top: 1rem;
+ padding-top: 1.5rem;
+ animation: slide-down 0.3s forwards;
}
+@keyframes slide-down {
+ from {
+ transform: translateY(-1rem);
+ }
+ to {
+ transform: none;
+ }
+}
.copy-row {
display: grid;
grid-template-columns: 1fr auto;
@@ -308,6 +357,7 @@ button:disabled {
font-family: "Roboto", sans-serif;
margin-bottom: 0;
font-weight: 400;
+ margin: 0 !important;
}
.copy-row .icon {
cursor: pointer;
@@ -645,6 +695,7 @@ th {
background: linear-gradient(rgba(var(--text-color), 0.06), rgba(var(--text-color), 0.06)), rgba(var(--foreground-color), 1);
text-align: left;
line-height: 1;
+ vertical-align: middle;
font-weight: 500;
z-index: 1;
padding: 1rem 0.8rem;
@@ -665,6 +716,20 @@ td {
width: 10ch;
}
+th.descending::after {
+ position: absolute;
+ right: 0.5rem;
+ content: " ▼";
+ font-size: 0.8rem;
+}
+
+th:not(.descending)::after {
+ position: absolute;
+ right: 0.5rem;
+ content: " ▲";
+ font-size: 0.8rem;
+}
+
#group_by::part(popup) {
min-height: 80vh;
}
@@ -920,6 +985,14 @@ td {
width: 24rem;
}
+ #sign_in_page {
+ grid-auto-flow: column;
+ }
+ #sign_in_page .sign-in-box {
+ min-height: 80vh;
+ min-width: 26rem;
+ }
+
#main_header {
padding: 1.2rem 3rem;
}
diff --git a/css/main.min.css b/css/main.min.css
index 3d67eaa..5c70ce6 100644
--- a/css/main.min.css
+++ b/css/main.min.css
@@ -1 +1 @@
-.align-center,.popup-header{align-items:center}.copy-row .copy,.overflow-ellipsis{text-overflow:ellipsis;white-space:nowrap}.person-card,button{-webkit-tap-highlight-color:transparent}.copy-row .copy,.overflow-ellipsis,th{white-space:nowrap}#main_loader,#sign_in_popup,#sign_in_popup h5,.sheet-card h4{text-align:center}.capitalize,button{text-transform:capitalize}*{box-sizing:border-box;padding:0;margin:0;font-family:Roboto,sans-serif}#confirmation h4,.bottom-margin{margin-bottom:1.5rem}button,h1,h2,h3,h4,h5{font-weight:600;font-family:Poppins,sans-serif}body{--accent-color:#169685;--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:rgba(var(--foreground-color), 1);--dark-shade:#f8f8f8;--error-color:#E53935;--hue:255;--saturation:61%;--lightness:39%;color:rgba(var(--text-color),1);font-size:16px;background:var(--dark-shade);background-size:cover}body[data-theme=dark]{--accent-color:#00BFA6;--text-color:238,238,238;--text-color-light:170,170,170;--foreground-color:26,26,26;--background-color:#111;--dark-shade:#080808;--hue:255;--saturation:39%;--lightness:70%}a{font-weight:600;text-decoration:none;color:var(--accent-color)}.dark-text{color:#111}h1{font-size:3.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1rem}h5{font-size:.8rem}p{line-height:1.5;max-width:65ch;color:rgba(var(--text-color),.9)}strong{font-weight:500}::-moz-focus-inner{border:none}.bottom-padding{padding-bottom:1.5rem}.top-padding{padding-top:1em}.top-margin{margin-top:1.5rem}#confirmation .flex,#main_loader sm-button,#sign_in_page p,sm-popup sm-textarea{margin-top:1rem}.flex{display:flex}.grid{display:grid}.grid-2{grid-template-columns:auto auto;gap:1em}.direction-column{flex-direction:column}.justify-right{margin-left:auto}.space-between{justify-content:space-between}.label{margin-bottom:.4rem}.light-text{opacity:.7}.hide{opacity:0;pointer-events:none}.hide-completely{display:none!important}.breakable{word-break:break-all}.overflow-ellipsis{overflow:hidden}.separator{padding:.1em}.no-transformations{transform:none!important}.icon{height:1.2rem;width:1.2rem;overflow:visible;stroke:rgba(var(--text-color),1);opacity:.8;fill:none;stroke-width:6;stroke-linejoin:round;stroke-linecap:round}sm-popup>sm-input:not(:last-of-type){margin-bottom:1rem}.popup-header{padding:1.5rem;padding-bottom:0;display:flex;width:100%}.popup-header .icon{margin-right:1rem;padding:.2rem;stroke-width:10;cursor:pointer}.popup-header button,.popup-header sm-button{width:auto;margin-left:auto}button{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1.2rem;cursor:pointer;border-radius:.3rem;color:var(--accent-color);transition:transform .3s;border:none;background:rgba(var(--text-color),.1)}#main_header h5,.column-card .editor-address,.column-card h5,.copy-row h4,.details-card .editor-address,.details-card h4,.details-card h5,.editor-card .editor-address,.sheet-card h4,.sheet-card h5{font-family:Roboto,sans-serif}button:focus{outline:solid thin}button:disabled{cursor:default;background:rgba(var(--text-color),.4)}.primary-btn{background:var(--accent-color);justify-content:center;color:rgba(var(--foreground-color),1)}#confirmation,.sheet-card{flex-direction:column}#confirmation h4{font-weight:500}#confirmation .flex sm-button:first-of-type{margin-right:.6em;margin-left:auto}#sign_in_page{background:url(sign-in-bg.svg) center no-repeat,linear-gradient(rgba(var(--foreground-color),1),rgba(var(--foreground-color),1));background-size:cover;min-height:100vh;justify-content:flex-start;align-content:center;padding:0 6vw}#sign_in_page h1{line-height:1.1em;font-weight:800;font-size:clamp(1.5rem,8vw,4rem);color:rgba(var(--text-color),.8)}#sign_in_page sm-button{margin-top:2rem}#sign_in_popup h3{margin-top:2rem;margin-bottom:.5rem}#sign_in_popup h4{font-weight:500;margin-bottom:1rem}#sign_in_popup button,#sign_in_popup p{margin:1rem 0}#sign_in_popup h5{margin-bottom:1rem}.copy-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem;width:auto}.copy-row h4{margin-bottom:0;font-weight:400}.copy-row .icon{cursor:pointer;padding:.4rem;height:1.8rem;width:1.8rem}.copy-row .copy{overflow:hidden}#main_loader{place-content:center;height:100vh;width:100vw;position:fixed;left:0}#main_loader svg,.loader{fill:none;height:2rem;overflow:visible}#main_loader sm-button{margin-left:0;width:max-content;justify-self:center}#main_loader svg{width:2rem;stroke:var(--accent-color);stroke-width:6;stroke-linecap:round;stroke-dashoffset:210;stroke-dasharray:210;justify-self:center;align-self:center;margin-bottom:2rem}#main_loader h3{width:100%;font-weight:400;word-spacing:.16em}.loader{stroke-width:10;stroke:var(--accent-color);width:2rem;stroke-dashoffset:230;stroke-dasharray:230;padding:2px;justify-self:center}.animate-loader{animation:load 2.6s infinite,rotate 1s infinite linear}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes load{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-210}}#main_header{padding:1rem;box-shadow:0 .1rem .2rem #00010;background:rgba(var(--foreground-color),1)}#main_header h5{font-weight:500;opacity:.8}#main_header h4{font-size:1.2rem}#home_page{padding:1rem 1.5rem}.section-header{position:sticky;top:0;z-index:1;background:var(--dark-shade);padding:1rem 0;margin-bottom:1rem}.section-header h4{font-size:1.2rem;opacity:.8;font-weight:500}#main_section>header sm-input{margin-left:1rem}#user_icon{width:2.4rem;height:2.4rem;padding:.6rem;cursor:pointer;background:rgba(var(--text-color),.1);border-radius:2rem}#sheets_container{gap:2rem 1.5rem;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));margin-bottom:3rem;animation:slide-up .6s forwards cubic-bezier(.175,.885,.32,1.275)}@keyframes slide-up{from{transform:translateY(2rem)}to{transform:none}}#add_new_sheet .icon{height:2rem;width:2rem;stroke-width:10;stroke:#fff;stroke-linecap:square;opacity:1;top:50%;transform:translateY(-50%);position:absolute}#add_new_sheet .card{display:flex;align-items:center;justify-content:center;position:relative;background:url(card-bg1.svg),#A7003E;background-size:cover}.sheet-card{position:relative;display:flex;align-items:center;cursor:pointer}.sheet-card:active .card{transform:scale(.95)}.sheet-card .card{position:relative;border-radius:.4rem;background:url(card-bg2.svg) center,rgba(var(--text-color),.06);background-size:contain;padding:1rem;padding-top:66%;width:100%;transition:box-shadow .3s,transform .3s}#sheet_type,.sheet-card h5{background:rgba(var(--text-color),.1)}.sheet-card h4{font-weight:400;opacity:.9;margin-top:.8rem;max-width:90%}.sheet-card h5{position:absolute;top:0;right:0;margin:.5rem 0;padding:.4rem .6rem;border-radius:.2rem 0 0 .2rem;font-weight:500;opacity:.8}#sheet_editors .editor,table input{background:rgba(var(--text-color),.06)}#right,#sheet_container,table,table input{position:relative}#sheet_page{width:100vw;height:100vh;overflow-x:hidden}#sheet_page.toggle-side-bar #side_bar{transition:transform .3s;z-index:10;transform:none}#sheet_heading{font-weight:600;opacity:.9}#sheet_type{padding:.3rem .6rem;border-radius:.3rem;margin:0 1rem;font-weight:500;opacity:.8}#sheet_description{margin-top:.8rem;opacity:.8}#sheet_editors{gap:.5rem;flex-wrap:wrap;color:rgba(var(--text-color),.7);font-size:.9rem}#sheet_editors .editor{padding:.4rem .6rem;border-radius:.4rem}#go_to_home,#toggle_details{height:2.4rem;width:2.4rem;padding:.7rem;cursor:pointer}#go_to_home,#go_to_home+h5{transform:translateX(-1rem);cursor:pointer}#go_to_home+h5{font-weight:500;opacity:.9}#toggle_details{transform:rotateX(180deg);transition:transform .3s}#sheet_details{padding:1rem;margin-bottom:1rem}#sheet_details .flex:first-of-type{margin-bottom:1rem}#sheet_details .flex:nth-of-type(2){margin-bottom:1rem}#sheet_details .flex:not(:first-of-type){margin-bottom:.3rem}#sheet_details .flex:not(:first-of-type) .icon{cursor:pointer;margin-right:1rem;height:100%}#sheet_details.collapse{padding:.5rem 1rem;margin-bottom:0}#sheet_details.collapse .flex{margin-bottom:0}#sheet_details.collapse #toggle_details{transform:none}#sheet_details.collapse #sheet_heading{font-size:1.2rem;font-weight:600;opacity:.9}#sheet_details.collapse #sheet_description,#sheet_details.collapse #sheet_editors,#sheet_details.collapse #sheet_type{display:none}#sheet_container{overflow:auto;max-height:100%;bottom:0;max-width:100%}sm-select::part(options){max-height:50vh}table{border-collapse:collapse}table input{padding:.4rem;border:thin solid;font-size:1rem;width:100%;border-radius:.3rem;color:inherit}table input:disabled{border:transparent}th{position:sticky;top:0;background:linear-gradient(rgba(var(--text-color),.06),rgba(var(--text-color),.06)),rgba(var(--foreground-color),1);text-align:left;line-height:1;font-weight:500;z-index:1;padding:1rem .8rem;box-shadow:0 .2rem .4rem #00020}tr:nth-of-type(2n){background-color:rgba(var(--text-color),.04)}td{padding:.4rem .8rem;opacity:.9}.grade-input{width:10ch}#group_by::part(popup){min-height:80vh}#group_by sm-select:last-of-type{margin-left:.5rem}#side_bar{position:fixed;transform:translateX(-100%);background:var(--dark-shade)}#side_bar>.flex:first-of-type{padding:0 1rem}#side_bar .section-header{margin-bottom:0;background:inherit}#right{display:flex;flex-direction:column;overflow:auto;max-height:100vh;background:rgba(var(--foreground-color),1);animation:slide-right .6s forwards cubic-bezier(.175,.885,.32,1.275)}@keyframes slide-right{from{transform:translateX(-2rem)}to{transform:translateX(0)}}#people_container{overflow:auto;max-height:calc(100vh - 3.6rem);gap:1.5rem}.person-card{display:grid;align-items:center;grid-template-columns:auto 1fr;grid-template-areas:"initials ." "initials .";cursor:pointer;padding:0 1rem;transition:transform .3s}.person-card:active{transform:scale(.95)}.person-card:first-of-type{margin-top:1.5rem}.person-card:last-of-type{margin-bottom:2rem}.person-initials{grid-area:initials;display:flex;justify-content:center;height:2.6rem;width:2.6rem;font-size:1.2rem!important;font-weight:500;align-items:center;border-radius:2rem;margin-right:1rem;text-transform:uppercase;opacity:1!important;color:var(--accent-color);background:rgba(var(--text-color),.06)}.person-name{font-size:.9rem;opacity:.9;font-weight:500;text-transform:capitalize}.person-flo-id{opacity:.7;font-weight:400}#user_popup sm-button{margin-top:.5rem}#user_popup section:not(:last-of-type){margin-bottom:1.5rem}#new_sheet_popup p{font-size:.9rem}#specify_columns,#specify_details,#specify_editors{gap:1rem;margin-top:1rem;padding-top:1rem}#specify_columns h4,#specify_details h4,#specify_editors h4{font-weight:500;font-size:.9rem;margin-bottom:.2rem}#columns_container{flex-wrap:wrap}#additional_fields,#columns_container,#editors_container{gap:.4rem}#add_detail,.details-card{gap:.2rem;grid-template-columns:1fr auto}#specify_editors{border-top:solid 1px rgba(var(--text-color),.2)}#add_column sm-input,#add_detail sm-input,#add_editor sm-input{width:100%}#add_column .icon,#add_detail .icon,#add_editor .icon{height:3rem;width:3rem;padding:1rem;cursor:pointer}#add_detail{grid-template-areas:". add" ". add"}#add_detail .icon{grid-area:add;align-self:flex-end}.column-card,.details-card,.editor-card{border-radius:.3rem;background:rgba(var(--text-color),.06)}.column-card .icon,.details-card .icon,.editor-card .icon{padding:.3rem;cursor:pointer}.column-card .editor-address,.details-card .editor-address,.editor-card .editor-address{font-size:.9rem;font-weight:400;opacity:.8}.editor-card{padding:.4rem .8rem}.column-card{padding:.4rem .6rem}.column-card h5{font-weight:500}.column-card .icon{margin-left:.4rem}.details-card{padding:.6rem .8rem;grid-template-areas:". close" ". close"}.details-card h4,.details-card h5{margin:0!important}.details-card h5{font-weight:400;opacity:.8}.details-card h4{font-size:1rem!important}.details-card .icon{grid-area:close}#save_button{position:fixed;overflow:hidden;bottom:0;left:0;width:calc(100% - 2rem);padding:1rem;margin:1rem;border-radius:.4rem;background:rgba(var(--foreground-color),1);z-index:20;box-shadow:0 .1rem .1rem #00010,0 0 1rem #00016;transform:translateY(1rem);transition:transform .3s,opacity .3s}#save_button #changes_indicator{position:absolute;left:0;width:.5rem;height:100%;background:red}#save_button sm-button{margin-left:1rem}@media screen and (max-width:640px){#group_by_view{overflow:auto;max-width:calc(100vw - 3rem)}}@media screen and (min-width:640px){.hide-on-desktop{display:none}sm-popup::part(popup){width:24rem}#main_header{padding:1.2rem 3rem}#home_page,#main_header{grid-template-columns:1fr 80vw 1fr;grid-template-areas:". main ."}#main_header>div,#main_section{grid-area:main}#sheets_container{gap:2rem;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}#sheet_page.toggle-side-bar{grid-template-columns:19rem 1fr}#sheet_page.toggle-side-bar #side_bar{z-index:initial}#sheet_page:not(.toggle-side-bar) #side_bar{grid-template-columns:1fr;position:fixed;transform:translateX(-100%)}#side_bar{position:relative;transform:none}#group_by::part(popup){width:80vw}#save_button{width:auto}}@media screen and (min-width:1920px){#home_page,#main_header{grid-template-columns:1fr 60vw 1fr;grid-template-areas:". main ."}}@media (any-hover:hover){:root{scrollbar-width:thin}::-webkit-scrollbar{width:.7rem;height:.7rem}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{border-radius:10px;background:rgba(var(--text-color),.2)}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.4)}#people_container::-webkit-scrollbar{width:.4rem}#right{z-index:1;box-shadow:-.5rem 0 .5rem #00010}}
\ No newline at end of file
+@charset "UTF-8";.copy-row .copy,.overflow-ellipsis{text-overflow:ellipsis;white-space:nowrap}.person-card,button{-webkit-tap-highlight-color:transparent}.capitalize,button{text-transform:capitalize}*{box-sizing:border-box;padding:0;margin:0;font-family:Roboto,sans-serif}#confirmation h4,.bottom-margin{margin-bottom:1.5rem}button,h1,h2,h3,h4,h5{font-weight:600;font-family:Poppins,sans-serif}body{--accent-color:#169685;--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:rgba(var(--foreground-color), 1);--dark-shade:#f8f8f8;--error-color:#E53935;--hue:172;--saturation:74%;--lightness:34%;color:rgba(var(--text-color),1);font-size:16px;background:var(--dark-shade);background-size:cover}body[data-theme=dark]{--accent-color:#00e2c4;--text-color:238,238,238;--text-color-light:170,170,170;--foreground-color:26,26,26;--background-color:#111;--dark-shade:#080808;--hue:172;--saturation:70%;--lightness:44%}a{font-weight:600;text-decoration:none;color:var(--accent-color)}.dark-text{color:#111}h1{font-size:3.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1rem}h5{font-size:.8rem}p{line-height:1.5;max-width:65ch;color:rgba(var(--text-color),.9)}strong{font-weight:500}::-moz-focus-inner{border:none}.bottom-padding{padding-bottom:1.5rem}.top-padding{padding-top:1em}.top-margin{margin-top:1.5rem}#confirmation .flex,sm-popup sm-textarea{margin-top:1rem}.flex{display:flex}.grid{display:grid}.grid-2{grid-template-columns:auto auto;gap:1em}.align-center{align-items:center}.direction-column{flex-direction:column}.justify-right{margin-left:auto}.space-between{justify-content:space-between}.label{margin-bottom:.4rem}.light-text{opacity:.7}.hide{opacity:0;pointer-events:none}.hide-completely{display:none!important}.breakable{word-break:break-all}.overflow-ellipsis{overflow:hidden}.separator{padding:.1em}.no-transformations{transform:none!important}.icon{height:1.2rem;width:1.2rem;overflow:visible;stroke:rgba(var(--text-color),1);opacity:.8;fill:none;stroke-width:6;stroke-linejoin:round;stroke-linecap:round}sm-popup>sm-input:not(:last-of-type){margin-bottom:1rem}.popup-header{padding:1.5rem;padding-bottom:0;display:flex;align-items:center;width:100%}.popup-header .icon{margin-right:1rem;padding:.2rem;stroke-width:10;cursor:pointer}.popup-header button,.popup-header sm-button{width:auto;margin-left:auto}#sign_in_page .sign-in-box form,#sign_in_page .sign-in-box sm-panel{width:100%}button{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1.2rem;cursor:pointer;border-radius:.3rem;color:var(--accent-color);transition:transform .3s;border:none;background:rgba(var(--text-color),.1)}#main_header h5,#sign_in_page .info h4,.column-card .editor-address,.column-card h5,.copy-row h4,.details-card .editor-address,.details-card h4,.details-card h5,.editor-card .editor-address,.sheet-card h4,.sheet-card h5{font-family:Roboto,sans-serif}button:focus{outline:solid thin}button:disabled{cursor:default;background:rgba(var(--text-color),.4)}.primary-btn{background:var(--accent-color);justify-content:center;color:rgba(var(--foreground-color),1)}#main_header,#sign_in_page .sign-in-box{background:rgba(var(--foreground-color),1)}#confirmation,.sheet-card{flex-direction:column}#confirmation h4{font-weight:500}#confirmation .flex sm-button:first-of-type{margin-right:.6em;margin-left:auto}#sign_in_page{background:url(sign-in-bg.svg) center no-repeat,linear-gradient(rgba(var(--text-color),.04),rgba(var(--text-color),.04)),linear-gradient(rgba(var(--foreground-color),1),rgba(var(--foreground-color),1));background-size:cover;min-height:100vh;align-items:center;padding:0 6vw}#sign_in_page .info h1{font-weight:800;font-size:clamp(1.5rem,8vw,4rem)}#sign_in_page .info h4{font-weight:500;opacity:.8}#sign_in_page .sign-in-box{z-index:1;padding:2rem;border-radius:.5rem;box-shadow:0 0 .3rem #00016,0 6rem 2rem -2rem #00016;justify-self:center}#sign_in_page .sign-in-box ś sm-input{text-align:left}#sign_in_page .sign-in-box sm-tab-header{align-self:flex-start}#sign_in_page .sign-in-box sm-tab-header::part(tab-header){padding-bottom:.4rem;gap:1.5rem}#sign_in_page .sign-in-box sm-tab::part(tab){padding:.4rem 0}#sign_in_page .sign-in-box sm-tab-panels{margin-top:3rem}#sign_in_page .sign-in-box h2{margin-bottom:.5rem}#sign_in_page .sign-in-box h3{font-weight:500}#sign_in_page .sign-in-box h4{font-weight:500;margin-bottom:1.5rem}#sign_in_page .sign-in-box h5{opacity:.8;font-weight:500}#sign_in_page .sign-in-box .copy-row h4{max-width:34ch}#sign_in_page .sign-in-box .copy-row:not(:last-of-type){margin-bottom:1rem}#sign_in_page .sign-in-box button{margin-top:1rem;padding:.6rem 1.6rem}#sign_in_page .sign-in-box p{max-width:35ch;margin-top:.5rem;margin-bottom:1.5rem}#sign_in_page .sign-in-box #credentials_section{border-top:1px rgba(var(--text-color),.2) solid;margin-top:1rem;padding-top:1.5rem;animation:slide-down .3s forwards}@keyframes slide-down{from{transform:translateY(-1rem)}to{transform:none}}.copy-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem;width:auto}.copy-row h4{font-weight:400;margin:0!important}.copy-row .icon{cursor:pointer;padding:.4rem;height:1.8rem;width:1.8rem}.copy-row .copy{overflow:hidden}#main_loader{text-align:center;place-content:center;height:100vh;width:100vw;position:fixed;left:0}#main_loader svg,.loader{fill:none;height:2rem;overflow:visible}#main_loader sm-button{margin-left:0;margin-top:1rem;width:max-content;justify-self:center}#main_loader svg{width:2rem;stroke:var(--accent-color);stroke-width:6;stroke-linecap:round;stroke-dashoffset:210;stroke-dasharray:210;justify-self:center;align-self:center;margin-bottom:2rem}#main_loader h3{width:100%;font-weight:400;word-spacing:.16em}.loader{stroke-width:10;stroke:var(--accent-color);width:2rem;stroke-dashoffset:230;stroke-dasharray:230;padding:2px;justify-self:center}.animate-loader{animation:load 2.6s infinite,rotate 1s infinite linear}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes load{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-210}}#main_header{padding:1rem;box-shadow:0 .1rem .2rem #00010}#main_header h5{font-weight:500;opacity:.8}#main_header h4{font-size:1.2rem}#home_page{padding:1rem 1.5rem}.section-header{position:sticky;top:0;z-index:1;background:var(--dark-shade);padding:1rem 0;margin-bottom:1rem}.section-header h4{font-size:1.2rem;opacity:.8;font-weight:500}#main_section>header sm-input{margin-left:1rem}#user_icon{width:2.4rem;height:2.4rem;padding:.6rem;cursor:pointer;background:rgba(var(--text-color),.1);border-radius:2rem}#sheets_container{gap:2rem 1.5rem;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));margin-bottom:3rem;animation:slide-up .6s forwards cubic-bezier(.175,.885,.32,1.275)}@keyframes slide-up{from{transform:translateY(2rem)}to{transform:none}}#add_new_sheet .icon{height:2rem;width:2rem;stroke-width:10;stroke:#fff;stroke-linecap:square;opacity:1;top:50%;transform:translateY(-50%);position:absolute}#add_new_sheet .card{display:flex;align-items:center;justify-content:center;position:relative;background:url(card-bg1.svg),#A7003E;background-size:cover}.sheet-card{position:relative;display:flex;align-items:center;cursor:pointer}.sheet-card:active .card{transform:scale(.95)}.sheet-card .card{position:relative;border-radius:.4rem;background:url(card-bg2.svg) center,rgba(var(--text-color),.06);background-size:contain;padding:1rem;padding-top:66%;width:100%;transition:box-shadow .3s,transform .3s}#sheet_type,.sheet-card h5{background:rgba(var(--text-color),.1)}.sheet-card h4{font-weight:400;opacity:.9;margin-top:.8rem;text-align:center;max-width:90%}.sheet-card h5{position:absolute;top:0;right:0;margin:.5rem 0;padding:.4rem .6rem;border-radius:.2rem 0 0 .2rem;font-weight:500;opacity:.8}#sheet_editors .editor,table input{background:rgba(var(--text-color),.06)}#sheet_container,table,table input{position:relative}#sheet_page{width:100vw;height:100vh;overflow-x:hidden}#sheet_page.toggle-side-bar #side_bar{transition:transform .3s;z-index:10;transform:none}#sheet_heading{font-weight:600;opacity:.9}#sheet_type{padding:.3rem .6rem;border-radius:.3rem;margin:0 1rem;font-weight:500;opacity:.8}#sheet_description{margin-top:.8rem;opacity:.8}#sheet_editors{gap:.5rem;flex-wrap:wrap;color:rgba(var(--text-color),.7);font-size:.9rem}#sheet_editors .editor{padding:.4rem .6rem;border-radius:.4rem}#go_to_home,#toggle_details{height:2.4rem;width:2.4rem;padding:.7rem;cursor:pointer}#go_to_home,#go_to_home+h5{transform:translateX(-1rem);cursor:pointer}#go_to_home+h5{font-weight:500;opacity:.9}#toggle_details{transform:rotateX(180deg);transition:transform .3s}#sheet_details{padding:1rem;margin-bottom:1rem}#sheet_details .flex:first-of-type{margin-bottom:1rem}#sheet_details .flex:nth-of-type(2){margin-bottom:1rem}#sheet_details .flex:not(:first-of-type){margin-bottom:.3rem}#sheet_details .flex:not(:first-of-type) .icon{cursor:pointer;margin-right:1rem;height:100%}#sheet_details.collapse{padding:.5rem 1rem;margin-bottom:0}#sheet_details.collapse .flex{margin-bottom:0}#sheet_details.collapse #toggle_details{transform:none}#sheet_details.collapse #sheet_heading{font-size:1.2rem;font-weight:600;opacity:.9}#sheet_details.collapse #sheet_description,#sheet_details.collapse #sheet_editors,#sheet_details.collapse #sheet_type{display:none}#sheet_container{overflow:auto;max-height:100%;bottom:0;max-width:100%}sm-select::part(options){max-height:50vh}table{border-collapse:collapse}table input{padding:.4rem;border:thin solid;font-size:1rem;width:100%;border-radius:.3rem;color:inherit}table input:disabled{border:transparent}th{position:sticky;top:0;background:linear-gradient(rgba(var(--text-color),.06),rgba(var(--text-color),.06)),rgba(var(--foreground-color),1);text-align:left;line-height:1;vertical-align:middle;font-weight:500;z-index:1;padding:1rem .8rem;white-space:nowrap;box-shadow:0 .2rem .4rem #00020}tr:nth-of-type(2n){background-color:rgba(var(--text-color),.04)}td{padding:.4rem .8rem;opacity:.9}.grade-input{width:10ch}th.descending::after{position:absolute;right:.5rem;content:" ▼";font-size:.8rem}th:not(.descending)::after{position:absolute;right:.5rem;content:" ▲";font-size:.8rem}#group_by::part(popup){min-height:80vh}#group_by sm-select:last-of-type{margin-left:.5rem}#side_bar{position:fixed;transform:translateX(-100%);background:var(--dark-shade)}#side_bar>.flex:first-of-type{padding:0 1rem}#side_bar .section-header{margin-bottom:0;background:inherit}#right{position:relative;display:flex;flex-direction:column;overflow:auto;max-height:100vh;background:rgba(var(--foreground-color),1);animation:slide-right .6s forwards cubic-bezier(.175,.885,.32,1.275)}@keyframes slide-right{from{transform:translateX(-2rem)}to{transform:translateX(0)}}#people_container{overflow:auto;max-height:calc(100vh - 3.6rem);gap:1.5rem}.person-card{display:grid;align-items:center;grid-template-columns:auto 1fr;grid-template-areas:"initials ." "initials .";cursor:pointer;padding:0 1rem;transition:transform .3s}.person-card:active{transform:scale(.95)}.person-card:first-of-type{margin-top:1.5rem}.person-card:last-of-type{margin-bottom:2rem}.person-initials{grid-area:initials;display:flex;justify-content:center;height:2.6rem;width:2.6rem;font-size:1.2rem!important;font-weight:500;align-items:center;border-radius:2rem;margin-right:1rem;text-transform:uppercase;opacity:1!important;color:var(--accent-color);background:rgba(var(--text-color),.06)}.person-name{font-size:.9rem;opacity:.9;font-weight:500;text-transform:capitalize}.person-flo-id{opacity:.7;font-weight:400}#user_popup sm-button{margin-top:.5rem}#user_popup section:not(:last-of-type){margin-bottom:1.5rem}#new_sheet_popup p{font-size:.9rem}#specify_columns,#specify_details,#specify_editors{gap:1rem;margin-top:1rem;padding-top:1rem}#specify_columns h4,#specify_details h4,#specify_editors h4{font-weight:500;font-size:.9rem;margin-bottom:.2rem}#columns_container{flex-wrap:wrap}#additional_fields,#columns_container,#editors_container{gap:.4rem}#add_detail,.details-card{gap:.2rem;grid-template-columns:1fr auto}#specify_editors{border-top:solid 1px rgba(var(--text-color),.2)}#add_column sm-input,#add_detail sm-input,#add_editor sm-input{width:100%}#add_column .icon,#add_detail .icon,#add_editor .icon{height:3rem;width:3rem;padding:1rem;cursor:pointer}#add_detail{grid-template-areas:". add" ". add"}#add_detail .icon{grid-area:add;align-self:flex-end}.column-card,.details-card,.editor-card{border-radius:.3rem;background:rgba(var(--text-color),.06)}.column-card .icon,.details-card .icon,.editor-card .icon{padding:.3rem;cursor:pointer}.column-card .editor-address,.details-card .editor-address,.editor-card .editor-address{font-size:.9rem;font-weight:400;opacity:.8}.editor-card{padding:.4rem .8rem}.column-card{padding:.4rem .6rem}.column-card h5{font-weight:500}.column-card .icon{margin-left:.4rem}.details-card{padding:.6rem .8rem;grid-template-areas:". close" ". close"}.details-card h4,.details-card h5{margin:0!important}.details-card h5{font-weight:400;opacity:.8}.details-card h4{font-size:1rem!important}.details-card .icon{grid-area:close}#save_button{position:fixed;overflow:hidden;bottom:0;left:0;width:calc(100% - 2rem);padding:1rem;margin:1rem;border-radius:.4rem;background:rgba(var(--foreground-color),1);z-index:20;box-shadow:0 .1rem .1rem #00010,0 0 1rem #00016;transform:translateY(1rem);transition:transform .3s,opacity .3s}#save_button #changes_indicator{position:absolute;left:0;width:.5rem;height:100%;background:red}#save_button sm-button{margin-left:1rem}@media screen and (max-width:640px){#group_by_view{overflow:auto;max-width:calc(100vw - 3rem)}}@media screen and (min-width:640px){.hide-on-desktop{display:none}sm-popup::part(popup){width:24rem}#sign_in_page{grid-auto-flow:column}#sign_in_page .sign-in-box{min-height:80vh;min-width:26rem}#main_header{padding:1.2rem 3rem}#home_page,#main_header{grid-template-columns:1fr 80vw 1fr;grid-template-areas:". main ."}#main_header>div,#main_section{grid-area:main}#sheets_container{gap:2rem;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}#sheet_page.toggle-side-bar{grid-template-columns:19rem 1fr}#sheet_page.toggle-side-bar #side_bar{z-index:initial}#sheet_page:not(.toggle-side-bar) #side_bar{grid-template-columns:1fr;position:fixed;transform:translateX(-100%)}#side_bar{position:relative;transform:none}#group_by::part(popup){width:80vw}#save_button{width:auto}}@media screen and (min-width:1920px){#home_page,#main_header{grid-template-columns:1fr 60vw 1fr;grid-template-areas:". main ."}}@media (any-hover:hover){:root{scrollbar-width:thin}::-webkit-scrollbar{width:.7rem;height:.7rem}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{border-radius:10px;background:rgba(var(--text-color),.2)}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.4)}#people_container::-webkit-scrollbar{width:.4rem}#right{z-index:1;box-shadow:-.5rem 0 .5rem #00010}}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index 83a27b6..d86dca8 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -12,24 +12,24 @@ body {
--background-color: rgba(var(--foreground-color), 1);
--dark-shade: #f8f8f8;
--error-color: #E53935;
- --hue: 255;
- --saturation: 61%;
- --lightness: 39%;
+ --hue: 172;
+ --saturation: 74%;
+ --lightness: 34%;
color: rgba(var(--text-color), 1);
font-size: 16px;
background: var(--dark-shade);
background-size: cover;
}
body[data-theme="dark"]{
- --accent-color: #00BFA6;
+ --accent-color: #00e2c4;
--text-color: 238, 238, 238;
--text-color-light: 170, 170, 170;
--foreground-color: 26, 26, 26;
--background-color: #111;
--dark-shade: #080808;
- --hue: 255;
- --saturation: 39%;
- --lightness: 70%;
+ --hue: 172;
+ --saturation: 70%;
+ --lightness: 44%;
}
a {
@@ -248,47 +248,97 @@ button {
}
}
#sign_in_page{
- background: url(sign-in-bg.svg) no-repeat center, linear-gradient(rgba(var(--foreground-color), 1), rgba(var(--foreground-color), 1));
+ background: url(sign-in-bg.svg) no-repeat center, linear-gradient(rgba(var(--text-color), 0.04), rgba(var(--text-color), 0.04)), linear-gradient(rgba(var(--foreground-color), 1), rgba(var(--foreground-color), 1));
background-size: cover;
min-height: 100vh;
- justify-content: flex-start;
- align-content: center;
+ align-items: center;
padding: 0 6vw;
- h1{
- line-height: 1.1em;
- font-weight: 800;
- font-size: clamp(1.5rem, 8vw, 4rem);
- color: rgba(var(--text-color), 0.8);
+ .info{
+ h1{
+ font-weight: 800;
+ font-size: clamp(1.5rem, 8vw, 4rem);
+ }
+ h4{
+ font-weight: 500;
+ font-family: 'Roboto', sans-serif;
+ opacity: 0.8;
+ }
}
- sm-button{
- margin-top: 2rem;
- }
- p{
- margin-top: 1rem;
+ .sign-in-box{
+ background: rgba(var(--foreground-color), 1);
+ z-index: 1;
+ padding: 2rem;
+ border-radius: 0.5rem;
+ box-shadow: 0 0 0.3rem #00000016, 0 6rem 2rem -2rem #00000016;
+ justify-self: center;ś
+ sm-input{
+ text-align: left;
+ }
+ sm-panel{
+ width: 100%;
+ }
+ sm-tab-header{
+ align-self: flex-start;
+ &::part(tab-header){
+ padding-bottom: 0.4rem;
+ gap: 1.5rem;
+ }
+ }
+ sm-tab::part(tab){
+ padding: 0.4rem 0;
+ }
+ sm-tab-panels{
+ margin-top: 3rem;
+ }
+ form{
+ width: 100%;
+ }
+ h2{
+ margin-bottom: 0.5rem;
+ }
+ h3{
+ font-weight: 500;
+ }
+ h4 {
+ font-weight: 500;
+ margin-bottom: 1.5rem;
+ }
+ h5{
+ opacity: 0.8;
+ font-weight: 500;
+ }
+ .copy-row{
+ h4{
+ max-width: 34ch;
+ }
+ }
+ .copy-row:not(:last-of-type){
+ margin-bottom: 1rem;
+ }
+ button {
+ margin-top: 1rem;
+ padding: 0.6rem 1.6rem;
+ }
+ p {
+ margin-bottom: 0.5rem;
+ max-width: 35ch;
+ margin-top: 0.5rem;
+ margin-bottom: 1.5rem;
+ }
+ #credentials_section{
+ border-top: 1px rgba(var(--text-color), 0.2) solid;
+ margin-top: 1rem;
+ padding-top: 1.5rem;
+ animation: slide-down 0.3s forwards;
+ }
}
}
-#sign_in_popup {
- text-align: center;
- h3 {
- margin-top: 2rem;
- margin-bottom: 0.5rem;
+@keyframes slide-down{
+ from{
+ transform: translateY(-1rem);
}
-
- h4 {
- font-weight: 500;
- margin-bottom: 1rem;
- }
-
- button {
- margin: 1rem 0;
- }
-
- p {
- margin: 1rem 0;
- }
- h5{
- text-align: center;
- margin-bottom: 1rem;
+ to{
+ transform: none;
}
}
.copy-row {
@@ -301,6 +351,7 @@ button {
font-family: 'Roboto', sans-serif;
margin-bottom: 0;
font-weight: 400;
+ margin: 0 !important;
}
.icon {
cursor: pointer;
@@ -637,6 +688,7 @@ th{
background: linear-gradient(rgba(var(--text-color), 0.06), rgba(var(--text-color), 0.06)), rgba(var(--foreground-color), 1);
text-align: left;
line-height: 1;
+ vertical-align: middle;
font-weight: 500;
z-index: 1;
padding: 1rem 0.8rem;
@@ -655,6 +707,18 @@ td{
.grade-input{
width: 10ch;
}
+th.descending::after{
+ position: absolute;
+ right: 0.5rem;
+ content: " \25BC";
+ font-size: 0.8rem;
+}
+th:not(.descending)::after{
+ position: absolute;
+ right: 0.5rem;
+ content: ' \25B2';
+ font-size: 0.8rem;
+}
#group_by{
&::part(popup){
@@ -897,6 +961,13 @@ td{
sm-popup::part(popup){
width: 24rem;
}
+ #sign_in_page{
+ grid-auto-flow: column;
+ .sign-in-box{
+ min-height: 80vh;
+ min-width: 26rem;
+ }
+ }
#main_header{
padding: 1.2rem 3rem;
}
diff --git a/index.html b/index.html
index d3f58d0..e94f731 100644
--- a/index.html
+++ b/index.html
@@ -54,18 +54,19 @@
hideLoader()
showPage('sign_in_page')
let signInBtn = document.getElementById('sign_in_btn'),
- guestButton = document.getElementById('guest_btn'),
+ //guestButton = document.getElementById('guest_btn'),
privateKeyInput = document.getElementById('get_priv_key_field')
signInBtn.onclick = () => {
hidePopup()
showLoader()
resolve(privateKeyInput.value)
+ privateKeyInput.value = ''
}
- guestButton.onclick = () => {
+ /*guestButton.onclick = () => {
hidePopup()
showLoader()
reject(null)
- }
+ }*/
})
})
//invoke the startup functions
@@ -127,20 +128,6 @@
Loading RanchiMall FLO LogSheet
Sign Out
-
-