0.3.0 upgrade Roundcube Webmail 1.6.0 - elastic skins

YetiForceCompany · Aug 3, 2022 · bd0e363 · bd0e363
1 parent d1a2289
commit bd0e363
Show file tree

Hide file tree

Showing 18 changed files with 282 additions and 111 deletions.
diff --git a/skins/elastic/styles/colors.less b/skins/elastic/styles/colors.less
@@ -216,6 +216,11 @@
 @color-image-tools-hover:               fadeout(@color-main, 50%);
 
 
+// Scrollbars
+@color-scrollbar-thumb:     #c1c1c1;
+@color-scrollbar-track:     #f1f1f1;
+
+
 // Dark mode colors
 @color-dark-main:           darken(@color-main, 30%);
 @color-dark-background:     #21292c;
@@ -262,7 +267,7 @@
 @color-dark-message-error:              @color-dark-error;
 @color-dark-message-loading:            lighten(@color-dark-background, 10%);
 
-@color-dark-scrollbar-thumb:            @color-dark-main;
+@color-dark-scrollbar-thumb:            darken(@color-main, 25%);
 @color-dark-scrollbar-track:            @color-dark-border;
 
 @color-dark-blockquote-0:               lighten(@color-main, 10%);

diff --git a/skins/elastic/styles/dark.less b/skins/elastic/styles/dark.less
@@ -13,33 +13,14 @@
 
 html.dark-mode {
     scrollbar-color: @color-dark-scrollbar-thumb @color-dark-scrollbar-track;
-    scrollbar-width: thin;
-
-    textarea,
-    select,
-    .popover-body,
-    .popupmenu,
-    .ui-dialog-content,
-    .frame-content,
-    .formcontent,
-    .table-responsive,
-    .table-responsive-sm,
-    .scroller {
-        // Firefox does not inherit scrollbar size from the html element
-        scrollbar-width: thin;
-    }
 
     &:not(.touch) {
-        ::-webkit-scrollbar {
-            width: 6px;
-        }
-
         ::-webkit-scrollbar-track {
-            background-color: @color-dark-border;
+            background-color: @color-dark-scrollbar-track;
         }
 
         ::-webkit-scrollbar-thumb {
-            background-color: @color-dark-main;
+            background-color: @color-dark-scrollbar-thumb;
         }
     }
 
@@ -267,6 +248,7 @@ html.dark-mode {
     // Lists
     // ---------------------------------
 
+    .proplist li.with-sublist > a.dropdown,
     .listing tbody td,
     .listing tbody td a,
     .listing li a {
@@ -773,17 +755,11 @@ html.dark-mode {
         }
 
         .tox-menu {
-            scrollbar-width: thin;
             background-color: @color-dark-popover-background;
             border-color: @color-dark-popover-border;
             box-shadow: none;
         }
 
-        .tox-dialog__body-nav,
-        .tox-collection__group {
-            scrollbar-width: thin;
-        }
-
         .tox-collection__item-caret svg {
             fill: @color-dark-font;
         }
@@ -977,7 +953,6 @@ html.dark-mode {
     }
 
     .ui-menu {
-        scrollbar-width: thin;
         background-color: @color-dark-popover-background;
         border-color: @color-dark-popover-border;
         box-shadow: none;

diff --git a/skins/elastic/styles/embed.min.css b/skins/elastic/styles/embed.min.css
diff --git a/skins/elastic/styles/global.less b/skins/elastic/styles/global.less
@@ -35,35 +35,35 @@
   font-style: normal;
   font-weight: 400;
   src: local('Roboto'), local('Roboto-Regular'),
-       url('../fonts/roboto-v19-regular.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
-       url('../fonts/roboto-v19-regular.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
+       url('../fonts/roboto-v29-regular.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
+       url('../fonts/roboto-v29-regular.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
 }
 
 @font-face {
   font-family: 'Roboto';
   font-style: italic;
   font-weight: 400;
   src: local('Roboto Italic'), local('Roboto-Italic'),
-       url('../fonts/roboto-v19-italic.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
-       url('../fonts/roboto-v19-italic.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
+       url('../fonts/roboto-v29-italic.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
+       url('../fonts/roboto-v29-italic.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
 }
 
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 700;
   src: local('Roboto Bold'), local('Roboto-Bold'),
-       url('../fonts/roboto-v19-regular-700.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
-       url('../fonts/roboto-v19-regular-700.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
+       url('../fonts/roboto-v29-regular-700.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
+       url('../fonts/roboto-v29-regular-700.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
 }
 
 @font-face {
   font-family: 'Roboto';
   font-style: italic;
   font-weight: 700;
   src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'),
-       url('../fonts/roboto-v19-italic-700.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
-       url('../fonts/roboto-v19-italic-700.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
+       url('../fonts/roboto-v29-italic-700.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
+       url('../fonts/roboto-v29-italic-700.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
 }
 
 /* Reset some Bootstrap style */
@@ -95,3 +95,55 @@ a {
         opacity: .5;
     }
 }
+
+/* Scrollbar styles */
+
+html when not (@scrollbar-width = unset) {
+    // Ignore thin width setting for Firefox, it makes the scrollbar very very thin in Firefox >= 100
+    & when not (@scrollbar-width = thin) {
+        scrollbar-width: @scrollbar-width;
+
+        textarea,
+        select,
+        .popover-body,
+        .popupmenu,
+        .ui-menu,
+        .ui-dialog-content,
+        .frame-content,
+        .formcontent,
+        .table-responsive,
+        .table-responsive-sm,
+        .tox-menu,
+        .tox-dialog__body-nav,
+        .tox-collection__group,
+        .scroller {
+            // Firefox does not inherit scrollbar size from the html element
+            scrollbar-width: @scrollbar-width;
+        }
+    }
+
+    &:not(.touch) {
+        ::-webkit-scrollbar when (@scrollbar-width = auto) {
+            // Note: If we do not set the width a default scrollbar is used in Chrome.
+            // And the custom colors set below do not work
+            width: 12px;
+        }
+        ::-webkit-scrollbar when (@scrollbar-width = thin) {
+            width: 6px;
+        }
+    }
+}
+
+html {
+    scrollbar-color: @color-scrollbar-thumb @color-scrollbar-track;
+
+    &:not(.touch) {
+        ::-webkit-scrollbar-track {
+            background-color: @color-scrollbar-track;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background-color: @color-scrollbar-thumb;
+        }
+    }
+}
diff --git a/skins/elastic/styles/styles.less b/skins/elastic/styles/styles.less
@@ -405,6 +405,18 @@ body.task-error-login #layout {
         font-family: monospace;
         font-size: 13px;
     }
+
+    // This is needed for proper display of quoted plain text
+    blockquote {
+        display: inline-block;
+        min-width: 100%;
+
+        & + br {
+            // compensate the spacing "removed" by the inline-block style above
+            display: block;
+            margin-top: 1em;
+        }
+    }
 }
 
 #compose-attachments {

diff --git a/skins/elastic/styles/styles.min.css b/skins/elastic/styles/styles.min.css
diff --git a/skins/elastic/styles/variables.less b/skins/elastic/styles/variables.less
@@ -53,6 +53,9 @@
 
 @mail-header-photo-height:              4rem;
 
+// Scrollbars
+@scrollbar-width:       thin; // 'auto' or 'thin' or 'unset'
+
 // Additional icons
 @icon-resize-corner:    data-uri("image/svg+xml;charset=utf-8", "../images/corner-handle.svg"); // size: 16x16
 @icon-file-drop:        data-uri("image/svg+xml;charset=utf-8", "../images/download.svg");

diff --git a/skins/elastic/styles/widgets/dialogs.less b/skins/elastic/styles/widgets/dialogs.less
@@ -128,6 +128,7 @@ html.layout-phone {
         a {
             display: inline-block;
             width: 100%;
+            color: @color-popover-mobile-header;
         }
     }
 

diff --git a/skins/elastic/styles/widgets/editor.less b/skins/elastic/styles/widgets/editor.less
@@ -78,6 +78,10 @@ div.tox {
         overflow: unset;
     }
 
+    .tox-dialog__content-js {
+        overflow: auto;
+    }
+
     .tox-dialog-wrap__backdrop {
         background-color: @color-dialog-overlay-background;
     }
@@ -451,6 +455,11 @@ div.tox {
                 width: 34px;
                 line-height: 28px;
             }
+
+            &[disabled] {
+                opacity: .7;
+                cursor: not-allowed;
+            }
         }
     }
 

diff --git a/skins/elastic/styles/widgets/forms.less b/skins/elastic/styles/widgets/forms.less
@@ -697,6 +697,28 @@ html.ms .propform {
             width: auto;
             display: inline;
         }
+
+        &.with-sublist {
+            flex-wrap: wrap;
+            position: relative;
+
+            & > :first-child {
+                width: 100%;
+                margin-right: 2em;
+            }
+
+            & > .proplist {
+                margin-left: 2.5rem;
+            }
+
+            & > a.dropdown {
+                position: absolute;
+                right: 0;
+                top: 0;
+                height: 2em;
+                color: @color-font;
+            }
+        }
     }
 }
 
@@ -937,24 +959,51 @@ html.ms .propform {
         .style-input-focus();
     }
 
-    .recipient {
-        display: flex;
-        position: relative;
-        max-width: ~"calc(50% - 3px)";
-        border: 1px solid @color-recipient-input-border;
-        background-color: @color-recipient-input-background;
-        border-radius: .25em;
-        padding: 0 .25em;
+    li {
+        max-width: 100%;
+
+        &:not(.recipient) {
+            user-select: text;
+        }
+
+        &.input {
+            flex: 1;
+            min-width: 100px;
+        }
+    }
+
+    input {
+        width: 100%;
+        background: transparent !important;
+        border: 0 !important;
         margin-top: @recipient-input-margin-fix;
-        margin-right: .2em;
-        white-space: nowrap;
-        cursor: default;
+        outline: 0;
+        line-height: 1.5;
 
-        @media screen and (max-width: 450px) {
-            width: 100%;
-            max-width: 100%;
+        &::-ms-clear {
+            display: none; // removes clear icon in IE11
         }
     }
+}
+
+.recipient-input li.recipient,
+body > li.recipient.ui-sortable-helper {
+    display: flex;
+    position: relative;
+    max-width: ~"calc(50% - 3px)";
+    border: 1px solid @color-recipient-input-border;
+    background-color: @color-recipient-input-background;
+    border-radius: .25rem;
+    padding: 0 .25rem;
+    margin-top: @recipient-input-margin-fix;
+    margin-right: .2em;
+    white-space: nowrap;
+    cursor: default;
+
+    @media screen and (max-width: 450px) {
+        width: 100%;
+        max-width: 100%;
+    }
 
     .name {
         .overflow-ellipsis();
@@ -989,30 +1038,9 @@ html.ms .propform {
         }
     }
 
-    li {
-        max-width: 100%;
-
-        &:not(.recipient) {
-            user-select: text;
-        }
-
-        &.input {
-            flex: 1;
-            min-width: 100px;
-        }
-    }
-
-    input {
-        width: 100%;
-        background: transparent !important;
-        border: 0 !important;
-        margin-top: @recipient-input-margin-fix;
-        outline: 0;
-        line-height: 1.5;
-
-        &::-ms-clear {
-            display: none; // removes clear icon in IE11
-        }
+    &.ui-sortable-helper {
+        // fix element width while dragging
+        padding: 0 0 0 .25rem !important;
     }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -128,6 +128,7 @@ html.layout-phone { @@
             a {
                 display: inline-block;
                 width: 100%;
+                color: @color-popover-mobile-header;
             }
         }
@@ Expand Down @@