WebDev/spacedeck-open
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Spacedeck 6.0 CI WIP; more style, UX cleanups; fix account dialog; add more color swatches; new landing page

Browse Source
This commit is contained in:
mntmn
2020-04-08 20:45:30 +02:00
parent 58250a72ad
commit 80f9b0d93f
37 changed files with 664 additions and 1003 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
styles/artifact.scss
View File

@@ -472,8 +472,7 @@
font-size: 36px;
&.artifact-zone {
border: 1px solid rgba(46,204,113,1);
background-color: rgba(46,204,113,0.025);
background-color: rgba(0,0,0,0.05);
border-radius: 10px;
&:after {display: none; }
.shape {display: none; }

32
styles/button.scss
View File

@@ -301,7 +301,7 @@
&.btn-dark {
background-color: $dark ;
color: $medium;
color: $white;
}
&.btn-medium {
@@ -469,7 +469,6 @@
&.btn-icon {
padding: 0px !important;
font-weight: bold;
max-width: 60px;
&.btn-xl { max-width: 80px; }
@@ -496,30 +495,6 @@
}
}
&.btn-social {
position: relative;
&:hover .icon,
.number {
@include scale(0,0);
opacity: 0;
}
&:hover .number {
@include transition( all 0.1s 0.1s ease-in-out);
@include scale(1,1);
opacity: 1;
}
.number,
.icon {
@include transition( all 0.1s 0s ease-in-out);
position: absolute;
top: 0;
left: 0;
}
}
&.btn-md.btn-icon-labeled {
.icon:before {
line-height: 29px;
@@ -555,7 +530,6 @@
.icon:before {line-height: 42px; }
.icon-label {
font-size: 11px;
text-transform: capitalize;
text-align: center;
margin: 8px 0;
display: block;
@@ -568,7 +542,7 @@
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 0px;
font-weight: bold;
font-weight: 300;
}
&.hover {
@@ -977,7 +951,7 @@
vertical-align: middle;
white-space: nowrap;
border: 1px solid $dark;
//border: 1px solid $dark;
border-radius: 5px;
&.dark {

42
styles/dialog.scss
View File

@@ -96,33 +96,30 @@
border-bottom-right-radius: $radius*3;
}
.dialog-account {
width: 600px;
margin: auto;
margin-top: 100px;
}
.dialog {
font-size: 13px;
ol, ul, p {
font-size: inherit;
}
> .btn-block:last-child {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: $radius*3;
border-bottom-right-radius: $radius*3;
}
min-width: 200px;
@include backface-visibility(hidden);
white-space: normal;
z-index: 1000;
position: absolute;
// white-space: normal;
font-size: 15px;
border: 1px solid black;
box-shadow: 0 0 30px 1px rgba(0, 0, 0, 0.15);
border-radius: 5px;
white-space: normal;
opacity: 0;
@include user-select(none);
@include transition( all 0.125s ease-in-out);
@include transition(all 0.125s ease-in-out);
pointer-events: none;
background-color: $light;
color: $dark;
@@ -130,9 +127,6 @@
background-color: $dark;
}
border-radius: $radius*3;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 7px rgba(0, 0, 0, 0.1);
.dialog-tabs-wrapper {
overflow: hidden;
border-top-left-radius: $radius*3;
@@ -152,15 +146,13 @@
&:hover span {color: $dark; }
&.open span {
background-color: $light;
background-color: white;
color: $dark;
opacity: 1;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 7px rgba(0, 0, 0, 0.1) !important;
border-bottom-right-radius: 0px !important;
border-bottom-left-radius: 0px !important;
border-top-left-radius: $radius*3;
border-top-right-radius: $radius*3;
}
&:first-child span {
@@ -202,7 +194,6 @@
text-align: center;
}
.dialog-section {
&:first-child {border: none !important; }
border-top: 2px solid rgba(0,0,0,0.1);
@@ -230,4 +221,13 @@
h4 .icon {
height: 38px;
}
// account dialog
&.dialog-freestanding {
margin: auto;
position: relative;
top: 150px;
border: none;
width: 800px;
}
}

4
styles/dropdown.scss
View File

@@ -118,6 +118,10 @@ $predelay: 0;
display: inline-block;
position: relative;
vertical-align: middle;
a {
text-decoration: none;
}
&.dropdown-block {
display: block;

31
styles/folder.scss
View File

@@ -254,7 +254,6 @@
// word-wrap: break-word;
.item {
box-shadow: 0 0 1pxrgba(0,0,0,0.1);
display: inline-block;
text-align: left;
padding-right: $folder-gutter*2;
@@ -397,7 +396,10 @@
&:active { opacity: 0.95 !important; }
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.025), 0 2px 7px rgba(0, 0, 0, 0.025);
box-shadow: 0 0 30px 1px rgba(0, 0, 0, 0.15);
border: 1px solid black;
// ???
@include opacity(1);
color: $medium;
// color: white;
@@ -476,7 +478,6 @@
left: 0px;
z-index: 100;
width: auto;
background-color: rgba(255,255,255,1);
.dropdown {
position: absolute;
@@ -501,30 +502,6 @@
color: $dark;
text-align: left;
}
.item-social {
padding: 8px;
border-right: 2px solid rgba(0,0,0,0.025);
@include clearfix;
color: $medium;
.item-likes,
.item-comments,
.item-shares {
position: relative;
&:hover {
.icon {opacity: 0; }
.number {opacity: 1; }
}
.number {
position: absolute;
opacity: 0;
top: 0;
left: 0;
}
.icon {opacity: 0.5; }
}
}
}
.item-appendix {

1
styles/form.scss
View File

@@ -23,7 +23,6 @@ input:invalid {
top: 0;
right: 0;
line-height: 1;
font-size: 10px;
margin: 12px;
color: red;
margin-right: 25px;

34
styles/header.scss
View File

@@ -5,7 +5,6 @@
.header-left,
.header-right {
position: absolute;
//@include transition( all 0.25s ease-in-out);
@include backface-visibility(hidden);
z-index: 3000;
top: 10px;
@@ -27,17 +26,20 @@
.home {
margin-top: -20px;
margin-left: -20px;
// .icon {color: $dark; }
}
.header-left {
left: 0;
padding-left: 10px;
left: 0;
padding-left: 10px;
padding-left: 20px;
padding-top: 20px;
}
.header-right {
right: 0;
padding-right: 20px;
right: 0;
padding-right: 20px;
padding-top: 20px;
}
.header-center {
width: 100%;
left: 0;
@@ -53,7 +55,7 @@
}
}
.header-left > * { margin-right: 10px; }
.header-right > * { margin-left: 5px; }
.header-right > * { margin-left: 10px; }
.header-right { font-size: 0;}
.title {
@@ -87,21 +89,3 @@
opacity: 0.5;
}
}
.present-mode #space-header {
background-color: transparent !important;
}
#space-siblings {
background-color: rgba(245, 245, 245, 0.95);
padding: 35px;
max-height: 450px;
overflow-y: scroll;
margin-top: 54px;
border-bottom: 1px solid #eee;
.btn {
margin-bottom: 50px;
}
}

9
styles/icon.scss
View File

@@ -85,3 +85,12 @@
transform: rotateZ(45deg) translateX(-8px);
}
.icon-svg {
background-size: 26px;
background-position: center;
background-repeat: no-repeat;
}
.icon-sd6 {
background-image: url(/images/sd6-icon-white.svg);
}

264
styles/landing.scss
View File

@@ -1,257 +1,29 @@
@import "vars";
#landing-header {
background-color: rgba(255,255,255,0.3);
height: 64px;
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: white;
height: 64px;
position: relative;
top: 0;
left: 0;
right: 0;
}
.landing-keyvisual-wrapper {
background-image: url("../images/sd5-keyvisual-compressed.jpg");
background-size: cover;
background-position: center;
padding-top: 40px;
padding-bottom: 40px;
}
.landing-plans-wrapper {
background-image: url("../images/sd5-hero2-compressed.jpg");
background-size: cover;
background-position: center;
padding-top: 80px;
padding-bottom: 100px;
}
.landing-box {
width: 800px;
margin: auto;
max-width: 90%;
background-color: white;
padding: 40px;
margin-bottom: 80px;
margin-top: 80px;
position: relative;
box-shadow: 0px 0px 50px rgba(0,0,0,0.2);
h1 {
margin-bottom: 20px;
}
&.black {
background-color: #222;
color: white;
padding: 20px;
text-align: center;
}
&.overlap {
position: absolute;
z-index: 2;
margin-top: -65px;
left: 50%;
top: 0px;
margin-left: -250px;
width: 500px;
}
&.screenshot {
width: 90%;
max-width: 90%;
padding: 20px;
box-shadow: none;
background-color: transparent;
img {
width: 100%;
position: absolute;
top: 0px;
left: 0px;
opacity: 0.3;
#landing {
margin-top: 100px;
section {
margin-left: 300px;
> * {
max-width: 600px;
}
}
}
&.landing-box-left {
margin-left: 30px;
}
}
.lead-xxl {
}
.lead {
margin-bottom: 20px;
}
.lead-xl {
}
.plans-box {
background: linear-gradient(to bottom, #FEFFFF 25%,#D0D8E2 100%);
padding: 40px;
border-radius: 9px;
}
.landing-box.plans-box {
margin-top: 200px;
width: 900px;
}
.plans-table {
tr {
vertical-align: top;
}
th {
font-size: 42px;
padding-top: 40px;
text-align: center;
}
th.best-plan {
padding-top: 20px;
font-size: 48px;
padding-bottom: 0px;
}
td {
padding: 20px;
width: 30%;
p, li {
font-size: 18px;
}
li {
margin-bottom: 10px;
}
}
td.best-plan {
width: 40%;
p {
font-size: 22px;
}
}
td li {
list-style-type: none;
text-align: center;
}
ul {
margin: 0 !important;
padding: 0 !important;
}
.upgrade-buttons {
text-align:center;
margin-top:20px;
}
}
.logo-row {
position: relative;
padding: 80px;
background-color: white;
text-align: center;
width: 100%;
&.blue {
background-color: $blue;
color: white;
}
}
.logo-row div {
display: inline-block;
width: 200px;
}
.landing-row {
background-color: white;
padding-bottom: 80px;
padding-top: 40px;
}
#keyvisual {
border-radius: 20px;
box-shadow: 0px 0px 20px #eee;
width: 640px;
height: 420px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-image: url('/images/landing/spacedeck-screenshot1.jpg');
background-color: white;
margin: auto;
margin-top: 40px;
margin-bottom: 40px;
border: 1px solid #eee;
}
#legal {
.landing-box {
width: 800px;
}
}
.footer {
padding: 40px;
padding-bottom: 80px;
text-align: center;
color: $medium;
a {
margin-right: 20px;
}
margin-left: 300px;
margin-top: 100px;
margin-bottom: 100px;
}
@media screen and (min-width: 801px) {
.plans-table-mobile {
display: none;
}
}
@media screen and (max-width: 800px) {
ul.lead.lead-xl, p.lead.lead-xl, ol.lead.lead-xl {
font-size: 20px !important;
}
.header-right {
> span:first-child {
display: none;
}
}
.plans-table {
display: none;
}
.plans-table-mobile {
display: block;
tbody {
display: block;
width: 100%;
}
tr {
display: block;
width: 100%;
}
td, th {
display: block;
width: 100%;
}
ul, li {
width: 100%;
}
}
}

22
styles/modal.scss
View File

@@ -278,25 +278,5 @@
// Footer (for actions)
.modal-footer {
// border-bottom-left-radius: $radius;
// border-bottom-right-radius: $radius;
// background-color: $dark !important;
// padding: 40px;
// padding-top: 0px;
// text-align: right; // right align buttons
@include clearfix(); // clear it in case folks use .pull-* classes on buttons
// Properly space out buttons
// .btn + .btn {
// margin-left: 5px;
// margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
// }
// // but override that for button groups
// .btn-group .btn + .btn {
// margin-left: -1px;
// }
// // and override it for block buttons as well
// .btn-block + .btn-block {
// margin-left: 0;
// }
margin-top: 20px;
}

1
styles/section.scss
View File

@@ -27,6 +27,5 @@
right: 0;
z-index: 800;
pointer-events: none;
opacity: 0.25;
display: block;
}

28
styles/select-list.scss
View File

@@ -6,22 +6,18 @@
li {
&.checked {
&:before {background-color: $medium !important; }
> a,
> span {
color: $medium;
}
}
&:hover {
&:before {background-color: $medium; }
> a,
> span {
background-color: rgba(0,0,0,0.025) !important;
}
}
&:before {background-color: $medium; }
> a,
> span {
color: $medium;
@@ -30,7 +26,7 @@
}
.select-list {
&:empty:before{
&:empty:before {
position: absolute;
top: 50%;
left: 50%;
@@ -45,17 +41,14 @@
opacity: 0.5;
}
-webkit-mask-image: -webkit-gradient(linear, left top, left 15px, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.5)));
background-clip: padding-box;
font-size: 15px;
line-height: 14px;
//font-size: 15px;
//line-height: 14px;
list-style: none;
margin: 0px;
padding: 15px 0;
text-align: left;
// background-color: $dark;
color: $medium;
border-radius: $radius;
.divider + li span {border: none !important; }
@@ -90,15 +83,11 @@
}
&:hover {
// background-color: rgba(0,0,0,0.025);
&:before {
background-color: $medium;
display: block;
}
background-color: black;
> a,
> span {
color: $medium;
color: $dark;
color: white;
}
}
@@ -126,9 +115,8 @@
display: block;
cursor: pointer;
white-space: nowrap;
color: $medium;
margin: 0 25px;
padding: 16px 3px;
padding: 10px 0px;
// line-height: 50px;
overflow: hidden;
text-overflow: ellipsis;
@@ -154,4 +142,4 @@
}
}
}
}
}

32
styles/style.scss
View File

@@ -65,10 +65,17 @@
html,
body {
height:100%;
background-color: $light;
background-color: white;
color: $black;
}
body {
max-width: 100%;
padding: 0px;
text-rendering: optimizeLegibility;
cursor: default;
}
*[contenteditable="true"] {
outline: none;
}
@@ -79,31 +86,12 @@ body {
@include box-sizing(border-box);
}
body {
max-width: 100%;
padding: 0px;
text-rendering: optimizeLegibility;
//@include user-select(none);
cursor: default;
}
#home {
background-color: white;
}
.img img {
max-width: 100%;
height: auto;
}
#startup {
background-position: center;
background-image:url(/images/diamond.svg);
background-repeat: no-repeat;
}
.layer {
/*.layer {
@include transition( all 0.2s ease-in-out);
@include backface-visibility(hidden);
position: absolute;
@@ -131,7 +119,7 @@ body {
pointer-events: auto;
opacity: 1;
}
}
}*/
[draggable] {
-moz-user-select: none;

17
styles/toolbar.scss
View File

@@ -20,12 +20,16 @@
margin: auto;
position: fixed;
top: 10px;
top: 20px;
z-index: 3000;
padding: 0;
font-size: 0;
line-height: 0;
box-shadow: 0 0 30px 1px rgba(0, 0, 0, 0.15);
border: 1px solid black;
border-radius: 5px;
// FIXME questionable?
pointer-events: none !important;
@@ -201,10 +205,17 @@
}
.toolbar-elements {
left: 10px;
left: 20px;
}
.toolbar-properties {
right: 20px;
right: 30px;
}
.zoom-bar {
position: absolute;
bottom: 30px;
right: 30px;
box-shadow: 0 0 30px 1px rgba(0, 0, 0, 0.15);
border: 1px solid black;
}

7
styles/type.scss
View File

@@ -1,6 +1,8 @@
@import "vars";
@import "mixins";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;900&display=swap');
body {
background-color: $light;
color: $medium;
@@ -25,7 +27,7 @@ hr {
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
color: inherit;
font-family: inherit;
font-weight: 500;
font-weight: 900;
line-height: 1.3;
margin-top: 0px;
margin-bottom: 1em;
@@ -46,8 +48,7 @@ strong {font-weight: 500; }
small {font-size: 75%; }
a {
text-decoration: none;
color: $medium;
color: black;
}
dl {

2
styles/vars.scss
View File

@@ -35,7 +35,7 @@ $sidebar-width: 280px;
$main-font: Inter;
$sec-font: Inter;
$font-size: 12pt;
$font-size: 20px;
$line-height: 1.5em;
$gutter-a: 10px;