summaryrefslogtreecommitdiff
path: root/web-ui/app/scss
diff options
context:
space:
mode:
Diffstat (limited to 'web-ui/app/scss')
-rw-r--r--web-ui/app/scss/_colors.scss39
-rw-r--r--web-ui/app/scss/_mixins.scss7
-rw-r--r--web-ui/app/scss/_read.scss12
-rw-r--r--web-ui/app/scss/_security.scss6
-rw-r--r--web-ui/app/scss/style-guide.scss142
-rw-r--r--web-ui/app/scss/styles.scss122
6 files changed, 145 insertions, 183 deletions
diff --git a/web-ui/app/scss/_colors.scss b/web-ui/app/scss/_colors.scss
index 22897ac0..da571405 100644
--- a/web-ui/app/scss/_colors.scss
+++ b/web-ui/app/scss/_colors.scss
@@ -1,19 +1,38 @@
-$warning: #F7E8AF;
-$search-highlight: #FFEF29;
+/* Pixelated Color Palette - don't change these! */
+$dark_slate_gray: #3E3A37;
+$light_blue: #3DABC4;
+$dark_blue: #178CA6;
+$light_orange: #FF9C00;
+$dark_orange: #FF7902;
-$total_count_bg: #C0B9B9;
-$error: #D72A25;
-$attention: #F6A40A;
-$success: #2DAB49;
+/* Side nav background color */
+$navigation_background: $dark_slate_gray;
+
+/* Action buttons and links */
+$action_buttons: $light_blue;
+
+/* Primary Highlight*/
+$primary_highlight: $light_orange;
+
+/* Logo color*/
+$logo_color: $light_orange;
+/* Unread count dialog bubble background color */
+$secondary_callout: darken($primary_highlight, 5);
+
+/* Grayscale */
$contrast: #EEE;
$top_pane: #EAEAEA;
-$secondary: #3E3A37;
-$primary_color: #EF4E2F;
-$action_buttons: #2ba6cb;
+$total_count_bg: #C0B9B9;
+
+/* Feedback to Users */
+$warning: #F7E8AF;
+$search-highlight: #FFEF29;
-$secondary_callout: #FF7902;
+$error: #D72A25;
+$attention: #F6A40A;
+$success: #2DAB49;
$will_be_encrypted: #41cd60;
$wont_be_encrypted: #F6A40A;
diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss
index 2d1f8f23..14a1679f 100644
--- a/web-ui/app/scss/_mixins.scss
+++ b/web-ui/app/scss/_mixins.scss
@@ -76,16 +76,17 @@
position: absolute;
bottom: -2px;
left: 1px;
- color: $secondary;
+ color: $navigation_background;
}
}
@mixin tags {
ul.tags {
li {
- background: #DDD;
+ font-size: 0.6rem;
+ background-color: lighten($action_buttons, 12);
+ color: white;
display: inline;
- font-size: 0.55em;
padding: 2px 3px;
margin: 0 1px;
position: relative;
diff --git a/web-ui/app/scss/_read.scss b/web-ui/app/scss/_read.scss
index bd30552c..7235df72 100644
--- a/web-ui/app/scss/_read.scss
+++ b/web-ui/app/scss/_read.scss
@@ -55,7 +55,7 @@
}
.bodyArea {
- padding: 35px 30px 0 30px;
+ padding: 15px 30px 0 30px;
}
.attachmentsAreaWrap {
@@ -64,6 +64,16 @@
.attachmentsArea {
border-top: 1px solid #DDD;
padding: 10px 0 0;
+
+ a {
+ color: $action_buttons;
+ text-decoration: none;
+ line-height: inherit;
+ &:hover, &:focus {
+ color: lighten($action_buttons, 10);
+ outline: none;
+ }
+ }
}
}
diff --git a/web-ui/app/scss/_security.scss b/web-ui/app/scss/_security.scss
index 6d68066b..2a6b60aa 100644
--- a/web-ui/app/scss/_security.scss
+++ b/web-ui/app/scss/_security.scss
@@ -20,6 +20,12 @@
content: "\f023 \f05e";
}
}
+ &.encryption-error {
+ background: $attention;
+ &:before {
+ content: "\f023 \f12a";
+ }
+ }
}
&.signed {
&:before {
diff --git a/web-ui/app/scss/style-guide.scss b/web-ui/app/scss/style-guide.scss
deleted file mode 100644
index 7370aac6..00000000
--- a/web-ui/app/scss/style-guide.scss
+++ /dev/null
@@ -1,142 +0,0 @@
-@import "compass/css3";
-@import "styles.scss";
-
-body {
- display: block;
- overflow: scroll !important;
-}
-
-div#style-guide-wrap {
- font-size: 1rem;
-}
-
-div#style-guide-wrap p {
- font-size: 1rem;
-}
-
-img.screenshot {
- max-width: 60%;
- margin: 0 auto;
- display: block;
-}
-
-nav {
- position: fixed;
- z-index: 10;
- height: 50px;
- width: 100%;
- background-color: #3e3a37;
- color: white;
- opacity: 0.95;
-}
-
-a.logo-anchor {
- color: white;
-
- &:hover {
- color: darken(white, 30);
- }
-}
-
-ul li {
- display: inline;
-}
-
-ul.typography li {
- display: inline-block;
- text-align: center;
- margin: 20px 10px 0 0;
- padding: 30px;
- min-height: 125px;
- min-width: 130px;
- border: 1px solid #EEE;
- background-color: white;
- border-radius: 5px;
-}
-
-ul.left, ul.right {
- padding: 12px;
- margin: 0px 25px;
- font-weight: bold;
-}
-
-ul.right {
- li {
- margin: 8px;
- }
-}
-
-section.guide-section {
- display: block;
- height: 100%;
- overflow-y: auto;
- padding: 66px 32px;
-
- &:nth-child(even) {
- background-color: $top_pane;
- }
-
- &:last-child {
- min-height: 666px;
- }
-}
-
-.color-card {
- width: 160px;
- height: 230px;
- border-radius: 5px;
- display: inline-block;
- margin-right: 15px;
-}
-
-.color-label {
- position: relative;
- top: 173px;
-}
-
-.color-label, .typeface-sample {
- background-color: white;
- border: 1px solid #eee;
- text-align: center;
- color: #344a5f;
- border-bottom-left-radius: 5px;
- border-bottom-right-radius: 5px;
- padding: 10px 0;
-}
-
-.color-name {
- font-size: small;
-}
-
-/* Color Cards definition */
-
-.color-grid {
- margin-bottom: 25px;
- #primary-color-card { background-color: $primary_color; }
- #secondary-color-card { background-color: $secondary; }
- #top-pane-card { background-color: $top_pane; }
- #contrast-card { background-color: $contrast; }
- #action-buttons-card { background-color: $action_buttons; }
- #success-card { background-color: $success; }
- #attention-card { background-color: $attention; }
- #warning-card { background-color: $warning; }
- #error-card { background-color: $error; }
- #search-highlight-card { background-color: $search_highlight; }
- #count-background-card { background-color: $total_count_bg; }
-}
-/* Typeface cards definition*/
-ul.typography li h2 {
- &.bold-header { font-weight: bold; }
- &.extra-bold-header { font-weight: 800; }
- &.lighter-header { font-weight: lighter; }
-}
-
-ul.headers-and-sizes {
- margin: 20px 100px 0 0;
- display: inline-block;
-}
-
-section#icons i {
- font-size: xx-large;
- margin-right: 20px;
-} \ No newline at end of file
diff --git a/web-ui/app/scss/styles.scss b/web-ui/app/scss/styles.scss
index 7292f029..56c9ebbd 100644
--- a/web-ui/app/scss/styles.scss
+++ b/web-ui/app/scss/styles.scss
@@ -1,3 +1,4 @@
+
@import "compass/css3";
@import "colors";
@import "mixins";
@@ -37,7 +38,7 @@
vertical-align: top;
input[type=checkbox] {
@include check-box;
- margin: 7px 8px;
+ margin: 7px 13px 7px;
}
select {
padding: 1px 3px;
@@ -80,9 +81,9 @@
ul#mail-list {
clear: both;
li {
- height: 75px;
+ height: 66px;
position: relative;
- padding: 12px 10px;
+ padding: 8px 10px 10px 10px;
background: $contrast;
border-bottom: 1px solid white;
cursor: pointer;
@@ -100,6 +101,11 @@
}
a {
color: #333;
+ display: block;
+ height: 62px;
+ margin-top: -8px;
+ padding-top: 3px;
+ width: 106%;
}
}
.subject-and-tags {
@@ -114,8 +120,9 @@
line-height: 1.2;
margin: -3px 0 0 0;
li {
- background-color: #DDD;
- color: black;
+ font-size: 0.6rem;
+ background-color: lighten($action_buttons, 12);
+ color: white;
display: inline-block;
height: auto;
font-weight: 400;
@@ -156,6 +163,7 @@
}
&.selected {
background: #FFF;
+ z-index: 3;
a {
color: #333;
}
@@ -222,7 +230,7 @@ section {
input {
margin: 0;
padding: 8px 30px;
- color: $secondary;
+ color: $navigation_background;
background: white;
border: none;
transition: background-color 150ms ease-out;
@@ -245,10 +253,10 @@ section {
}
&#left-pane {
- background-color: $secondary;
+ background-color: $navigation_background;
color: white;
nav {
- border-right: 1px solid lighten($secondary, 10%);
+ border-right: 1px solid lighten($navigation_background, 10%);
ul#default-tag-list, #custom-tag-list {
li {
transition: background-color 150ms ease-out;
@@ -256,12 +264,12 @@ section {
cursor: pointer;
&:hover {
background: #CCC;
- color: $secondary;
+ color: $navigation_background;
}
&.selected {
font-weight: bold;
background: $contrast;
- color: $secondary;
+ color: $navigation_background;
}
}
}
@@ -273,6 +281,7 @@ section {
top: 1px;
left: 0;
border: 1px solid #FFF;
+ border-bottom: 1px solid white;
position: absolute;
opacity: 0.95;
}
@@ -283,18 +292,24 @@ section {
padding-left: 2px;
}
li {
- padding: 5px 10px 5px 16px;
+ padding: 5px 10px 5px 18px;
position: relative;
@include searching(4px, 19px, #333, 0.7em);
&:before {
font-size: 1.5em;
font-family: "FontAwesome";
- margin-right: 13px;
+ margin-right: 16px;
font-weight: normal;
position: relative;
top: 2px;
+ margin-left: -3px;
+ }
+
+ &:after {
+ padding-left: 10px;
}
+
&:nth-child(1) {
&:before {
content: "\f01c";
@@ -303,6 +318,7 @@ section {
&:nth-child(2) {
&:before {
content: "\f1d8";
+ margin-left: -5px;
}
}
&:nth-child(3) {
@@ -318,35 +334,72 @@ section {
&:nth-child(5) {
&:before {
content: "\f187";
+ margin-left: -5px;
}
}
}
}
ul#custom-tag-list {
+ visibility: hidden;
+ opacity: 0;
+ transition-duration: 500ms;
+ height: 220px;
+ overflow: auto;
+ background-color: lighten($navigation_background,1);
+
li {
white-space: nowrap;
overflow: hidden;
font-size: 0.8em;
padding: 5px 10px 5px 15px;
+ &.custom-tag {
+ text-overflow: ellipsis;
+ }
+
span.tag-label {
padding: 5px 20px 5px 38px;
}
}
}
+ ul#custom-tag-list.expanded {
+ visibility: visible;
+ opacity: 1;
+ }
+
+ div.tags-icon {
+ border-top: 1px solid white;
+ padding-top: 25px;
+ margin-bottom: 20px;
+ i {
+ font-size: 1.5em;
+ font-family: "FontAwesome";
+ margin-right: 13px;
+ font-weight: normal;
+ position: relative;
+ top: 2px;
+ left: 16px;
+ }
+ span.tag-label {
+ font-size: 0.9rem;
+ padding-left: 16px;
+ margin-bottom: 10px;
+ }
+ }
+
ul#logout {
li {
color: $action_buttons;
- background-color: $secondary;
+ background-color: $navigation_background;
padding: 5px 10px;
position: relative;
@include searching(4px, 19px, #333, 0.7em);
&:hover {
background-color: $action_buttons;
- color: $secondary;
+ color: $navigation_background;
}
div {
@@ -370,7 +423,7 @@ section {
padding: 5px;
font-weight: 600;
margin: 0 10px;
- border-bottom: 1px dotted lighten($secondary, 10%);
+ border-bottom: 1px dotted lighten($navigation_background, 10%);
}
}
}
@@ -486,28 +539,36 @@ button {
}
}
-.fake-left-off-canvas-toggle {
+.side-nav-toggle, .side-nav-toggle-icon {
color: white;
+ cursor: pointer;
&:hover, &:focus {
color: white;
}
+ background: $navigation_background;
+ &.logout {
+ color: $action_buttons;
+ }
+}
- padding: 9px 0px 8px 19px;
+.side-nav-toggle-icon {
+ padding: 6px 0px 8px 19px;
display: block;
left: 0;
- background: $secondary;
top: 0;
position: relative;
- &.logout {
- color: $action_buttons;
- }
}
.left-off-canvas-logo {
- img {
- padding: 9px 6px 6px 6px;
- width: 163px;
+ svg {
+ width: 162px;
+ height: 56px;
+ padding-left: 6px;
+ padding-top: 2px;
+ path, polygon, rect {
+ fill: $logo_color;
+ }
}
}
@@ -515,7 +576,7 @@ button {
width: 50px;
position: absolute;
height: 100vh;
- background: $secondary;
+ background: $navigation_background;
ul.shortcuts {
li {
@@ -527,7 +588,7 @@ button {
opacity: 1;
cursor: default;
a {
- color: $secondary;
+ color: $navigation_background;
}
}
@include searching(6px, 26px, #666, 0.9em);
@@ -540,7 +601,7 @@ button {
text-align: center;
&:hover {
background: darken($contrast, 10%);
- color: $secondary;
+ color: $navigation_background;
@include btn-transition;
&.logout{
color: #000000;
@@ -707,4 +768,11 @@ button {
}
}
+div.side-nav-bottom {
+ width: 100%;
+ position: fixed;
+ bottom: 0;
+ background-color: $navigation_background;
+}
+
@import "mascot.scss";
generated by cgit v1.2.3 (git 2.25.1) at 2024-10-01 09:41:45 +0000