summaryrefslogtreecommitdiff
path: root/web-ui/app/scss/views
diff options
context:
space:
mode:
Diffstat (limited to 'web-ui/app/scss/views')
-rw-r--r--web-ui/app/scss/views/_close-button.scss22
-rw-r--r--web-ui/app/scss/views/_compose-button.scss24
-rw-r--r--web-ui/app/scss/views/_compose-view.scss320
-rw-r--r--web-ui/app/scss/views/_message-panel.scss26
-rw-r--r--web-ui/app/scss/views/_no-mails-available.scss3
-rw-r--r--web-ui/app/scss/views/_no-message-selected.scss14
-rw-r--r--web-ui/app/scss/views/_read-view.scss181
7 files changed, 590 insertions, 0 deletions
diff --git a/web-ui/app/scss/views/_close-button.scss b/web-ui/app/scss/views/_close-button.scss
new file mode 100644
index 00000000..37171c18
--- /dev/null
+++ b/web-ui/app/scss/views/_close-button.scss
@@ -0,0 +1,22 @@
+.close-mail-button {
+ $button-size: 27px;
+
+ margin-right: 3px;
+ float: left;
+ background: $lighter_gray;
+ color: $medium_light_grey;
+ width: $button-size;
+ height: $button-size;
+ padding: 0;
+ border-radius: 0;
+
+ &:hover, &:focus, &:active {
+ background-color: darken($lighter_gray, 2);
+ color: darken($medium_light_grey, 10);
+ }
+
+ i {
+ padding: 0;
+ margin: 0;
+ }
+}
diff --git a/web-ui/app/scss/views/_compose-button.scss b/web-ui/app/scss/views/_compose-button.scss
new file mode 100644
index 00000000..41814a38
--- /dev/null
+++ b/web-ui/app/scss/views/_compose-button.scss
@@ -0,0 +1,24 @@
+// COMPOSE BUTTON
+#compose {
+ margin-bottom: 5px;
+ padding-right: 4px;
+ #compose-trigger {
+ width: 100%;
+ display: inline-block;
+ padding: 5px;
+ #compose-mails-trigger {
+ background: $action_buttons;
+ color: $white;
+ padding: 10px 30px;
+ text-align: center;
+ font-weight: 400;
+ font-size: 1.2em;
+ @include btn-transition;
+ &:hover {
+ background: lighten($action_buttons, 10%);
+ cursor: pointer;
+ }
+ }
+ }
+}
+
diff --git a/web-ui/app/scss/views/_compose-view.scss b/web-ui/app/scss/views/_compose-view.scss
new file mode 100644
index 00000000..2ed305c8
--- /dev/null
+++ b/web-ui/app/scss/views/_compose-view.scss
@@ -0,0 +1,320 @@
+.compose-view {
+ overflow: auto;
+}
+
+// COMPOSE PANE
+#compose-box, #draft-box, #reply-box, #feedback-box {
+ div.floatlabel {
+ position: relative;
+ }
+
+ .input-container {
+ padding: 1px;
+ }
+
+ label, span {
+ color: $recipients_font_color;
+ padding: 0.5rem;
+ cursor: text;
+ display: inline-block;
+ }
+
+ label {
+ padding: 13px 10px;
+ }
+
+ span {
+ padding: 3px;
+
+ &.attachment-size {
+ color: $attachment_size;
+ cursor: pointer;
+ }
+ }
+
+ label.floatlabel {
+ padding: 0.4rem !important;
+ position: absolute;
+ font-size: 0.6rem;
+ transition: all 0.1s linear;
+ opacity: 0;
+ font-weight: bold;
+ }
+
+ label.showfloatlabel {
+ color: $light_blue !important;
+ top: -0.3rem;
+ opacity: 1;
+ }
+
+ input, textarea {
+ margin: 0;
+ border: none;
+ transition: all 0.1s linear;
+ }
+
+ input.showfloatlabel, textarea.showfloatlabel {
+ padding-top: 1rem !important;
+ }
+
+ input#subject, #feedback-subject {
+ font-size: 1.6875rem;
+ line-height: 1.4;
+ border-top: 1px solid $lighter_gray;
+ }
+
+ #feedback-subject {
+ color: $dark_grey;
+ }
+
+ textarea {
+ border-bottom: 2px solid $lighter_gray;
+ min-height: 400px;
+ font-family: inherit;
+ font-weight: normal;
+ font-size: 1rem;
+ line-height: 1.6;
+ text-rendering: optimizeLegibility;
+ }
+
+ &.reply-box, &.forward-box {
+ margin: 0;
+
+ h4 {
+ font-size: 0.9em;
+ font-style: italic;
+ color: $medium_grey;
+ margin: 2px 0;
+ clear: both;
+ cursor: pointer;
+
+ &:hover {
+ background: $contrast;
+ }
+ }
+
+ textarea {
+ min-height: 200px;
+ margin: 10px 0;
+ }
+
+ p {
+ padding: 5px;
+ margin: 10px 0;
+ font-style: italic;
+ cursor: pointer;
+
+ &:hover {
+ background: $contrast;
+ }
+ }
+ }
+
+ button.close-mail-button {
+ margin: 1px;
+ }
+
+ .buttons-group {
+ margin-top: 0px;
+ }
+
+ #attachment-upload-item {
+ display: none;
+
+ .progress {
+ width: 0%;
+ position: absolute;
+ right: 0;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ min-height: 100%;
+
+ .progress-bar {
+ height: 100%;
+ background-color: rgba($light_blue, 0.3);
+ }
+ }
+ }
+
+ .attachmentsAreaWrap {
+ padding: 0;
+
+ .attachmentsArea {
+ padding: 0;
+ border-top: 0;
+
+ #upload-error {
+ color: $error;
+ margin-bottom: 20px;
+
+ .close-icon {
+ font-size: 1.0rem;
+ cursor: pointer;
+ }
+
+ span, a {
+ color: $error;
+ font-size: 0.9rem;
+ }
+
+ a {
+ text-decoration: underline;
+ padding: 5px;
+ }
+ }
+ }
+ }
+
+ .recipients-area {
+ -webkit-appearance: none;
+ background-color: white;
+ font-family: inherit;
+ display: flex;
+ flex-wrap: wrap;
+ font-size: 0.898em;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ position: relative;
+
+ .compose-column-label {
+ width: 5%;
+ display: inline-block;
+ }
+
+ .compose-column-recipients {
+ width: 95%;
+ display: inline-block;
+ }
+
+ .recipients-label {
+ width: 100%;
+ height: 100%;
+ }
+
+ .recipients-navigation-handler {
+ z-index: -1;
+ position: absolute;
+ top: -200px;
+ }
+
+ .twitter-typeahead {
+ flex: 1 1 50px;
+ }
+
+ .invalid-format {
+ border-bottom: 1px dotted $error;
+ }
+
+ input[type=text] {
+ vertical-align: top;
+ height: 35px;
+ margin-left: 1px;
+ font-size: 0.9em;
+ width: 100%;
+ }
+
+ .fixed-recipient {
+ display: inline-block;
+ margin-right: -3px;
+ flex: none;
+ position: relative;
+
+ .recipient-value {
+ &.selected {
+ border: 1px solid $medium_dark_grey;
+ }
+
+ &:before {
+ font-family: FontAwesome;
+ padding-right: 4px;
+ }
+
+ &.encrypted {
+ border-bottom-color: $will_be_encrypted;
+
+ &:before {
+ color: $will_be_encrypted;
+ content: "\f023 ";
+ }
+ }
+
+ &.not-encrypted {
+ border-bottom-color: $wont_be_encrypted;
+
+ &:before {
+ color: $wont_be_encrypted;
+ content: "\f13e ";
+ }
+ }
+
+ &.deleting span {
+ text-decoration: line-through;
+ }
+
+ & span {
+ margin: 0px;
+ padding: 0px;
+ cursor: pointer;
+ }
+
+ margin: 3px;
+ padding: 5px;
+ background-color: $background_light_grey;
+ border: 1px solid $border_light_grey;
+ border-radius: 2px;
+ }
+
+ .recipient-del {
+ position: relative;
+ color: $recipients_font_color;
+
+ &:hover, &:focus {
+ color: $recipients_font_color;
+ }
+
+ &:before {
+ margin-left: 0.4em;
+ font-weight: bold;
+ content: "x";
+ }
+
+ &.deleteTooltip:hover:after {
+ position: absolute;
+ content: "Click to remove";
+ font-size: 0.5rem;
+
+ @include tooltip(25px, 0px);
+ }
+ }
+ }
+
+ input.recipients-input:focus {
+ background-color: $dark_white !important;
+ border-color: $medium_light_grey;
+ outline: none;
+ width: 270px;
+ }
+ }
+
+ .collapse {
+ display: block;
+ position: absolute;
+ right: 10px;
+ padding-right: 15px;
+ padding-left: 15px;
+ font-family: 'FontAwesome';
+ font-weight: bolder;
+ font-size: larger;
+ cursor: pointer;
+ }
+
+ .collapse + input, .collapse + input + * {
+ display: none;
+ }
+
+ .collapse + input:checked + * {
+ display: block;
+ }
+}
diff --git a/web-ui/app/scss/views/_message-panel.scss b/web-ui/app/scss/views/_message-panel.scss
new file mode 100644
index 00000000..4a0a7a6b
--- /dev/null
+++ b/web-ui/app/scss/views/_message-panel.scss
@@ -0,0 +1,26 @@
+.message-panel {
+ width: 100%;
+ margin: 10px auto;
+ position: fixed;
+ z-index: 10000;
+ text-align: center;
+
+ &__growl {
+ padding: 5px 60px;
+
+ &--success {
+ background: $warning;
+ color: darken($warning, 50%);
+ border: 1px solid darken($warning, 10%);
+ @include box-shadow(1px 1px 3px darken($warning, 60%));
+ }
+
+ &--error {
+ font-weight: bold;
+ color: white;
+ background: $error;
+ border: 1px solid darken($error, 10%);
+ @include box-shadow(1px 1px 3px darken($error, 60%));
+ }
+ }
+}
diff --git a/web-ui/app/scss/views/_no-mails-available.scss b/web-ui/app/scss/views/_no-mails-available.scss
new file mode 100644
index 00000000..bf5d256a
--- /dev/null
+++ b/web-ui/app/scss/views/_no-mails-available.scss
@@ -0,0 +1,3 @@
+.no-mails-available-pane {
+ @extend .no-content-placeholder;
+}
diff --git a/web-ui/app/scss/views/_no-message-selected.scss b/web-ui/app/scss/views/_no-message-selected.scss
new file mode 100644
index 00000000..0e367bf2
--- /dev/null
+++ b/web-ui/app/scss/views/_no-message-selected.scss
@@ -0,0 +1,14 @@
+.no-message-selected-pane {
+ background: $contrast;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+
+ &__text {
+ @extend .no-content-placeholder;
+
+ margin-bottom: 40px; // aligns label with "no results for XYZ"
+ }
+}
diff --git a/web-ui/app/scss/views/_read-view.scss b/web-ui/app/scss/views/_read-view.scss
new file mode 100644
index 00000000..6c229f9b
--- /dev/null
+++ b/web-ui/app/scss/views/_read-view.scss
@@ -0,0 +1,181 @@
+.mail-read-view {
+ $component-vertical-spacing: 10px;
+ $view-top-spacing: 3px;
+
+ // NB! Setting overflow: hidden on an element causes
+ // a new float context to be created, so elements that
+ // are floated inside an element that has overflow: hidden
+ // applied are cleared.
+ overflow-x: hidden;
+
+ hr {
+ margin: 0;
+ }
+
+ &__header {
+ @include scut-clearfix;
+
+ font-size: 0.9em;
+ margin: 0;
+ margin: $view-top-spacing 0 $component-vertical-spacing 0;
+
+ &-recipients {
+ display: inline;
+ margin-bottom: 5px;
+ line-height: 1.5em;
+
+ &-separator {
+ margin: 0 10px;
+ }
+
+ &--highlight-sender {
+ font-weight: bold;
+ }
+ }
+
+ &-date {
+ display: inline;
+ float: right;
+ }
+
+ &-subject {
+ display: inline;
+ float: left;
+ max-width: 80%;
+ }
+
+ &-actions {
+ display: inline;
+ float: right;
+ max-width: 20%;
+ background: $white;
+ white-space: nowrap;
+ margin-top: $component-vertical-spacing;
+
+ &-button {
+ color: $medium_light_grey;
+ background-color: inherit;
+ display: inline;
+ border: 1px solid $lighter_gray;
+ line-height: 2em;
+
+ margin-bottom: 0;
+
+ i {
+ // workaround: remove padding and margin inserted by font-awesome
+ margin: 0;
+ padding: 0;
+ }
+
+ &:hover, &:active, &:focus {
+ @include btn-transition;
+
+ background: darken($contrast, 5%);
+ color: inherit;
+ }
+
+ &--reply {
+ padding: 0 20px;
+ margin-right: -4px; // force buttons together
+
+ }
+
+ &--more {
+ padding: 0 5px;
+ }
+ }
+
+ &-dropdown {
+ $container-right-padding: 10px;
+
+ background: inherit;
+ position: absolute;
+ border: 1px solid $lighter_gray;
+ right: $container-right-padding;
+
+ &-entry {
+ box-sizing: border-box;
+ background: inherit;
+ padding: 5px 10px;
+ display: block;
+ border-bottom: 1px solid $lighter_gray;
+
+ &:last-child {
+ border-bottom: none;
+ }
+
+ &:hover {
+ cursor: pointer;
+ background: $contrast;
+ }
+ }
+ }
+ }
+
+ &-tags {
+ clear: both;
+ margin: 0 0 10px;
+
+ // TODO refactor
+
+ @include tags;
+
+ ul li {
+ &.tag:hover {
+ &:before {
+ content: "click to remove";
+ text-transform: lowercase;
+ font-size: 0.5rem;
+
+ @include tooltip(18px, 8px);
+ }
+ }
+ }
+ }
+ }
+
+ &__body {
+ margin: $component-vertical-spacing 0;
+ width: 100%;
+ border: none;
+ }
+
+ &__attachments {
+ margin: $component-vertical-spacing 0;
+
+ &-header {
+ font-weight: bold;
+ }
+
+ &-item {
+ @include scut-clearfix;
+
+ display: block;
+ margin-bottom: 8px;
+ padding: 5px;
+ border: 1px solid $border_light_grey;
+ border-radius: 2px;
+ background-color: $background_light_grey;
+
+ &-label {
+ color: $attachment_text;
+ text-decoration: none;
+
+ &:hover, &:focus {
+ i.download-icon {
+ color: lighten($attachment_icon, 15);
+ }
+
+ color: $attachment_icon;
+ outline: none;
+ }
+ }
+
+ &-download {
+ color: #a2a2a2;
+ float: right;
+ margin-top: 5px;
+ }
+ }
+ }
+}
generated by cgit v1.2.3 (git 2.25.1) at 2024-06-28 05:22:32 +0000