Skip to content

Commit

Permalink
🎨 Modify interface styling and formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
@tterb
tterb committed Nov 16, 2017
1 parent 48ae671 commit f1385c3
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 33 deletions.
34 changes: 19 additions & 15 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -321,7 +321,7 @@ label {
border: 1px outset #4a4f4d;
box-shadow: 0.5px 1px 3px rgba(0, 0, 0, 0.3);
margin-right: 1.5px;
padding: 3px 5px 5px 4.25px;
padding: 3.5px 5px 5px 4.25px;
transition: top 100ms ease-in-out;
transition: color 200ms ease-in-out; }
.toolbar-buttons a::before {
Expand All @@ -344,17 +344,17 @@ label {

.bottom-bar {
position: absolute;
background: -webkit-linear-gradient(top, #282628 0%, #2b2a2b 30%, #191919 150%), -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.025) 200%);
background: -webkit-linear-gradient(top, #1d1d1d 12%, #212021 45%, #141414 100%), -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.025) 200%);
background: -webkit-linear-gradient(top, #232223 45%, #141414 100%), -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.025) 200%);
background-blend-mode: multiply;
color: #b6b5b4;
font-size: 11px;
height: 28px;
width: 100%;
bottom: 0;
left: 0;
border: 1px outset #2d2c2c;
box-shadow: 0 -1px 20px rgba(0, 0, 0, 0.25);
padding: 2px;
box-shadow: 0 -0.25px 10px rgba(0, 0, 0, 0.65);
padding: 3px 0 2px;
z-index: 1010;
resize: both; }
.bottom-bar div {
Expand Down Expand Up @@ -409,7 +409,7 @@ label {
.bottom-bar #syncScrollToggle {
font-size: 14.5px !important;
right: 2.5em !important;
margin-top: 4px !important; }
margin-top: 2.5px !important; }
.bottom-bar #syncScrollToggle::after {
top: -190% !important;
right: 0 !important;
Expand All @@ -418,7 +418,7 @@ label {
.bottom-bar #previewToggle {
font-size: 17.5px;
right: 0.35em;
margin-top: 1px; }
margin-top: -0.5px; }
.bottom-bar #previewToggle::after {
top: -150%;
right: 0;
Expand Down Expand Up @@ -633,7 +633,7 @@ input[type='checkbox'] {
top: 80px;
padding: 2px 0 6px 17px; }
#settingsMenu .settings-section h3 {
color: rgba(255, 255, 255, 0.85);
color: rgba(255, 255, 255, 0.775);
font-size: 30px;
font-weight: 200;
margin-top: 4px;
Expand All @@ -644,9 +644,9 @@ input[type='checkbox'] {
list-style: none;
padding-left: 10px; }
#settingsMenu .settings-section ul li {
font-size: 15.5px;
font-size: 15px;
font-weight: 300;
letter-spacing: 0.045em;
letter-spacing: 0.05em;
line-height: 2.1;
margin-bottom: 4px;
cursor: default; }
Expand All @@ -662,16 +662,19 @@ input[type='checkbox'] {
letter-spacing: 0.055em;
top: 2px; }
#settingsMenu .settings-section ul li .btn-group .btn.btn-default {
background: -webkit-linear-gradient(bottom, #2d2c2d, #3d3c3d);
background: -webkit-linear-gradient(top, #3d3c3d, #2a292a);
color: rgba(255, 255, 255, 0.75);
top: 3px;
left: -4px;
height: 29px;
letter-spacing: 0.04em;
border: 1px outset #3c3c3c;
box-shadow: 0.5px 0.75px 4px rgba(0, 0, 0, 0.2);
padding: 1px 8px 0 10px;
box-shadow: 1.5px 0.75px 4px rgba(0, 0, 0, 0.2), inset 0 0 2px 1px rgba(0, 0, 0, 0.35), inset 0 1px 1px 1px rgba(255, 255, 255, 0.1);
padding: 1px 8px 0 11px;
transition: all 250ms ease-in-out;
outline: none !important; }
#settingsMenu .settings-section ul li .btn-group .btn.btn-default:hover, #settingsMenu .settings-section ul li .btn-group .btn.btn-default:focus, #settingsMenu .settings-section ul li .btn-group .btn.btn-default:active {
color: rgba(255, 255, 255, 0.85); }
#settingsMenu .settings-section ul li .btn-group .caret {
position: relative;
top: -13px;
Expand Down Expand Up @@ -850,7 +853,7 @@ input[type='checkbox'] {
width: 50%;
height: 34px;
border-bottom: 1px #2a2a2a solid;
box-shadow: -2px 0 6px rgba(0, 0, 0, 0.75);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
transition: width 600ms cubic-bezier(0.17, 0.04, 0.03, 0.75);
z-index: 950; }

Expand Down Expand Up @@ -987,7 +990,8 @@ input[type='checkbox'] {
border-radius: 12px;
padding: 5px 10px;
margin-top: 3px;
margin-bottom: 10px; }
margin-bottom: 10px;
text-overflow: ellipsis; }

#editMenu {
min-width: 175px !important; }
Expand Down
39 changes: 21 additions & 18 deletions assets/sass/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -403,7 +403,7 @@ label {
border: 1px outset #4a4f4d;
box-shadow: 0.5px 1px 3px rgba(0,0,0,0.3);
margin-right: 1.5px;
padding: 3px 5px 5px 4.25px;
padding: 3.5px 5px 5px 4.25px;
transition: top 100ms ease-in-out;
transition: color 200ms ease-in-out;
&::before {
Expand Down Expand Up @@ -431,19 +431,19 @@ label {

.bottom-bar {
position: absolute;
background: -webkit-linear-gradient(top, #282628 0%, #2b2a2b 30%, #191919 150%), -webkit-linear-gradient(bottom, rgba(255,255,255,0.4) 0%, rgba(0,0,0,0.025) 200%);
// background: -webkit-linear-gradient(top, #222 0%, #292929 30%, #121212 150%), -webkit-linear-gradient(bottom, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.025) 200%);
// background: -webkit-linear-gradient(top, #282628 0%, #2b2a2b 30%, #191919 150%), -webkit-linear-gradient(bottom, rgba(255,255,255,0.4) 0%, rgba(0,0,0,0.025) 200%);
background: -webkit-linear-gradient(top, #1d1d1d 12%, #212021 45%, #141414 100%), -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.025) 200%);
background: -webkit-linear-gradient(top, #232223 45%, #141414 100%), -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.025) 200%);
background-blend-mode: multiply;
// background: -webkit-linear-gradient(top, #2b2b2b 5%, #2b2b2b 35%, #222120, #1d1d1d 98%), -webkit-radial-gradient(top, circle cover, #242223 20%, #323031 50%, #242223 80%);
color: #b6b5b4;
font-size: 11px;
height: 28px;
width: 100%;
bottom: 0;
left: 0;
border: 1px outset #2d2c2c;
box-shadow: 0 -1px 20px rgba(0,0,0,0.25);
padding: 2px;
// border: 1px outset #2d2c2c;
box-shadow: 0 -0.25px 10px rgba(0, 0, 0, 0.65);
padding: 3px 0 2px;
z-index: 1010;
resize: both;
div {
Expand Down Expand Up @@ -506,7 +506,7 @@ label {
#syncScrollToggle {
font-size: 14.5px !important;
right: 2.5em !important;
margin-top: 4px !important;
margin-top: 2.5px !important;
&::after {
top: -190% !important;
right: 0 !important;
Expand All @@ -517,7 +517,7 @@ label {
#previewToggle {
font-size: 17.5px;
right: 0.35em;
margin-top: 1px;
margin-top: -0.5px;
&::after {
top: -150%;
right: 0;
Expand Down Expand Up @@ -773,7 +773,7 @@ input[type='checkbox'] {
top: 80px;
padding: 2px 0 6px 17px;
h3 {
color: rgba(255,255,255,0.85);
color: rgba(255,255,255,0.775);
font-size: 30px;
font-weight: 200;
margin-top: 4px;
Expand All @@ -785,9 +785,9 @@ input[type='checkbox'] {
list-style: none;
padding-left: 10px;
li {
font-size: 15.5px;
font-size: 15px;
font-weight: 300;
letter-spacing: 0.045em;
letter-spacing: 0.05em;
line-height: 2.1;
margin-bottom: 4px;
cursor: default;
Expand All @@ -804,16 +804,20 @@ input[type='checkbox'] {
top: 2px;
}
.btn.btn-default {
background: -webkit-linear-gradient(bottom, #2d2c2d, #3d3c3d);
background: -webkit-linear-gradient(top, #3d3c3d, #2a292a);
color: $text-color;
top: 3px;
left: -4px;
height: 29px;
letter-spacing: 0.04em;
border: 1px outset #3c3c3c;
box-shadow: 0.5px 0.75px 4px rgba(0,0,0,0.2);
padding: 1px 8px 0 10px;
box-shadow: 1.5px 0.75px 4px rgba(0, 0, 0, 0.2), inset 0 0 2px 1px rgba(0, 0, 0, 0.35), inset 0 1px 1px 1px rgba(255, 255, 255, 0.1);
padding: 1px 8px 0 11px;
transition: all 250ms ease-in-out;
outline: none !important;
&:hover, &:focus, &:active {
color: rgba(255,255,255,0.85);
}
}
.caret {
position: relative;
Expand Down Expand Up @@ -881,7 +885,6 @@ input[type='checkbox'] {
width: 25% !important;
vertical-align: middle;
.form-control {
// background: #3a3839;
background: #3c393a;
color: rgba(255,255,255,0.7);
font-weight: 300;
Expand Down Expand Up @@ -987,7 +990,6 @@ input[type='checkbox'] {
width: 25% !important;
vertical-align: middle;
.form-control {
// background: #3a3839;
background: #3c393a;
color: rgba(255,255,255,0.7);
font-weight: 300;
Expand Down Expand Up @@ -1058,7 +1060,7 @@ input[type='checkbox'] {
width: 50%;
height: 34px;
border-bottom: 1px #2a2a2a solid;
box-shadow: -2px 0 6px rgba(0,0,0,0.75);
box-shadow: 0 2px 5px rgba(0,0,0,0.5);
transition: width 600ms cubic-bezier(0.17, 0.04, 0.03, 0.75);
z-index: 950;
}
Expand Down Expand Up @@ -1223,6 +1225,7 @@ input[type='checkbox'] {
padding: 5px 10px;
margin-top: 3px;
margin-bottom: 10px;
text-overflow: ellipsis;
}
}

Expand Down

0 comments on commit f1385c3

Please sign in to comment.