diff --git a/README.md b/README.md index 23e87f4625afdca7b3ae39b92ed118140a99ed1c..30bb68f52a948d6b6e407cb83224c3118a17c945 100644 --- a/README.md +++ b/README.md @@ -89,4 +89,4 @@ Show your appreciation to those who have contributed to the project. For open source projects, say how it is licensed. ## Project status -If you have run out of energy or time for your project, put a note at the top of the README saying that development has slowed down or stopped completely. Someone may choose to fork your project or volunteer to step in as a maintainer or owner, allowing your project to keep going. You can also make an explicit request for maintainers. +If you have run out of energy or time for your project, put a note at the top of the README saying that development has slowed down or stopped completely. Someone may choose to fork your project or volunteer to step in as a maintainer or owner, allowing your project to keep going. You can also make an explicit request for maintainers. \ No newline at end of file diff --git a/images/archieve-color.svg b/images/archieve-color.svg new file mode 100644 index 0000000000000000000000000000000000000000..eb34bd0a8e46cb21b1338b40f066c79079213a0f --- /dev/null +++ b/images/archieve-color.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/archieve.svg b/images/archieve.svg new file mode 100644 index 0000000000000000000000000000000000000000..5cab49b2bf1e67f02c77dab06070bd1b7adcc73f --- /dev/null +++ b/images/archieve.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/archievetop-color.svg b/images/archievetop-color.svg new file mode 100644 index 0000000000000000000000000000000000000000..156c76dda2c01e28e353b763372ac54cbfbdebe6 --- /dev/null +++ b/images/archievetop-color.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/attachnextcloud-files.svg b/images/attachnextcloud-files.svg new file mode 100644 index 0000000000000000000000000000000000000000..995b4bf7774a3cf74200dc730b1d310ab55e1bc9 --- /dev/null +++ b/images/attachnextcloud-files.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/back.svg b/images/back.svg new file mode 100644 index 0000000000000000000000000000000000000000..00b375d8236d6988d7cd395de066a6656f006495 --- /dev/null +++ b/images/back.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/compose-contact.svg b/images/compose-contact.svg new file mode 100644 index 0000000000000000000000000000000000000000..2e52fb440de5e5771b820e58fc7d6da1be33ffab --- /dev/null +++ b/images/compose-contact.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/contact.svg b/images/contact.svg new file mode 100644 index 0000000000000000000000000000000000000000..2e52fb440de5e5771b820e58fc7d6da1be33ffab --- /dev/null +++ b/images/contact.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/contactsmall.svg b/images/contactsmall.svg new file mode 100644 index 0000000000000000000000000000000000000000..ca96c064fe40e2516ac4debf563dff53f11a186e --- /dev/null +++ b/images/contactsmall.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/createfolder-color.svg b/images/createfolder-color.svg new file mode 100644 index 0000000000000000000000000000000000000000..7a65e434b95f894448e86456aba9878af3d979c4 --- /dev/null +++ b/images/createfolder-color.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/createfolder.svg b/images/createfolder.svg new file mode 100644 index 0000000000000000000000000000000000000000..8cf9fc2f575e85ce387c9b805a60d5af5eb13ad4 --- /dev/null +++ b/images/createfolder.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/cross.svg b/images/cross.svg new file mode 100644 index 0000000000000000000000000000000000000000..bb523aedafa5d5a3bef60b9b060d4195e69cbc4d --- /dev/null +++ b/images/cross.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/date-ascending.svg b/images/date-ascending.svg new file mode 100644 index 0000000000000000000000000000000000000000..e788d340d4961389a2b653d61260e9d81349fa00 --- /dev/null +++ b/images/date-ascending.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/date-descending.svg b/images/date-descending.svg new file mode 100644 index 0000000000000000000000000000000000000000..2eab6dc21439db30b6131af7d03afabbe2bc9ea5 --- /dev/null +++ b/images/date-descending.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/deletetop-color.svg b/images/deletetop-color.svg new file mode 100644 index 0000000000000000000000000000000000000000..54fdbc1424b66558a5f508cb92d81a804b3ed3f5 --- /dev/null +++ b/images/deletetop-color.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/downicon.svg b/images/downicon.svg new file mode 100644 index 0000000000000000000000000000000000000000..23a178eb7023ffd96968d080ce7d0580dc7a62fe --- /dev/null +++ b/images/downicon.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/draft-color.svg b/images/draft-color.svg new file mode 100644 index 0000000000000000000000000000000000000000..d0fbd63b5e4837529dbce3d2ab2c95479726829f --- /dev/null +++ b/images/draft-color.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/draft.svg b/images/draft.svg new file mode 100644 index 0000000000000000000000000000000000000000..39581ef80a07524d523b0b94b58f02acb976ff57 --- /dev/null +++ b/images/draft.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/editnote.png b/images/editnote.png new file mode 100644 index 0000000000000000000000000000000000000000..1aad7b39bd986f0e0d9203cfafd54be39c6278bc Binary files /dev/null and b/images/editnote.png differ diff --git a/images/folder-color.svg b/images/folder-color.svg new file mode 100644 index 0000000000000000000000000000000000000000..612aa29cdf7920edc341373391e01616136a58c6 --- /dev/null +++ b/images/folder-color.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/folder.svg b/images/folder.svg new file mode 100644 index 0000000000000000000000000000000000000000..a6b48cda4bc074e9120afc95ac0a695487ef3d1b --- /dev/null +++ b/images/folder.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/from-a-z-ascending.svg b/images/from-a-z-ascending.svg new file mode 100644 index 0000000000000000000000000000000000000000..d7935526ac7743f27c3c6e356861716bccf3e408 --- /dev/null +++ b/images/from-a-z-ascending.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/from-a-z-descending.svg b/images/from-a-z-descending.svg new file mode 100644 index 0000000000000000000000000000000000000000..4dd537f80abd64af95cdd3a280892251c91c3c5e --- /dev/null +++ b/images/from-a-z-descending.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/greendot.svg b/images/greendot.svg new file mode 100644 index 0000000000000000000000000000000000000000..9ac8e12f4009720832d9231317fc26c787156445 --- /dev/null +++ b/images/greendot.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/help.svg b/images/help.svg new file mode 100644 index 0000000000000000000000000000000000000000..6d511a76f936ee93e58cee269ef93a097f0b5d03 --- /dev/null +++ b/images/help.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/hide-my-email.svg b/images/hide-my-email.svg new file mode 100644 index 0000000000000000000000000000000000000000..c778c5ba3620ce87033c9d4a09e6706d32894731 --- /dev/null +++ b/images/hide-my-email.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/inbox-color.svg b/images/inbox-color.svg new file mode 100644 index 0000000000000000000000000000000000000000..080eed2bdcdd7595619ecf9cfe3f4e84db5d1180 --- /dev/null +++ b/images/inbox-color.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/inbox.png b/images/inbox.png new file mode 100644 index 0000000000000000000000000000000000000000..2e59c426d924b32a37345173e34dd75d41895fcc Binary files /dev/null and b/images/inbox.png differ diff --git a/images/inbox.svg b/images/inbox.svg new file mode 100644 index 0000000000000000000000000000000000000000..2f5d14f332457045dab9fe2cfb87eda7d0b267ba --- /dev/null +++ b/images/inbox.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/info.svg b/images/info.svg new file mode 100644 index 0000000000000000000000000000000000000000..f0b26b63ad35e7fc43bf3280b1481b8adf8901ad --- /dev/null +++ b/images/info.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/language.svg b/images/language.svg new file mode 100644 index 0000000000000000000000000000000000000000..fd5ecb2217889f829fb6ade3636f578b0ee2cba5 --- /dev/null +++ b/images/language.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/loading.svg b/images/loading.svg new file mode 100644 index 0000000000000000000000000000000000000000..cd4d4e4d0df1ed61480b3b65f5a6552cb6a9c84f --- /dev/null +++ b/images/loading.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/logout.svg b/images/logout.svg new file mode 100644 index 0000000000000000000000000000000000000000..f769d88471ecf45b47831ba6abe4f8119bb6735b --- /dev/null +++ b/images/logout.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/mailselected.svg b/images/mailselected.svg new file mode 100644 index 0000000000000000000000000000000000000000..cfbf74890df9e4a162c3dd8531d0f1da93f14293 --- /dev/null +++ b/images/mailselected.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/minimize.svg b/images/minimize.svg new file mode 100644 index 0000000000000000000000000000000000000000..94d03cc1355a9b9a646a34b4b087f4c6b591b4f3 --- /dev/null +++ b/images/minimize.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/mobile.svg b/images/mobile.svg new file mode 100644 index 0000000000000000000000000000000000000000..0286462cfaac8fa4a794fc1b297c525b0dbae71f --- /dev/null +++ b/images/mobile.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/more-color.svg b/images/more-color.svg new file mode 100644 index 0000000000000000000000000000000000000000..5fcb8b2e528597b6105914cbf56a81dbcd927c75 --- /dev/null +++ b/images/more-color.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/more.svg b/images/more.svg new file mode 100644 index 0000000000000000000000000000000000000000..16ccb7232fa031f51ad97c7d811226ad5a1838a1 --- /dev/null +++ b/images/more.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/movetop-color.svg b/images/movetop-color.svg new file mode 100644 index 0000000000000000000000000000000000000000..c8271f03ff9eff7b388dff4473be0b96d2fb0615 --- /dev/null +++ b/images/movetop-color.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/murena-mail.svg b/images/murena-mail.svg new file mode 100644 index 0000000000000000000000000000000000000000..c191170b63609d720f55654b7a04e8c80c431933 --- /dev/null +++ b/images/murena-mail.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/navtop-color.svg b/images/navtop-color.svg new file mode 100644 index 0000000000000000000000000000000000000000..41918972070306927c964dfc6a78174a93dfae70 --- /dev/null +++ b/images/navtop-color.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/noimage.svg b/images/noimage.svg new file mode 100644 index 0000000000000000000000000000000000000000..4f02c11d4f43a36ac7922cd682fd8cf84989ae16 --- /dev/null +++ b/images/noimage.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/plus.svg b/images/plus.svg new file mode 100644 index 0000000000000000000000000000000000000000..3f9a3a95d81560e9c280b33688c7bca6509b2f9b --- /dev/null +++ b/images/plus.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/preview.png b/images/preview.png index 10cda3fb44cca81a0a1311bece6ae8e8e6f70617..d1f82db8789628047c5cf794d1d949276d860712 100644 Binary files a/images/preview.png and b/images/preview.png differ diff --git a/images/profiledownarrow.svg b/images/profiledownarrow.svg new file mode 100644 index 0000000000000000000000000000000000000000..0381d362c68120cc4b3ab892cdeae9d394d6c974 --- /dev/null +++ b/images/profiledownarrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/profilesetting.svg b/images/profilesetting.svg new file mode 100644 index 0000000000000000000000000000000000000000..9dbb1c88f1d4bf707a00b2c290e68d636c199a2b --- /dev/null +++ b/images/profilesetting.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/images/profiletick.svg b/images/profiletick.svg new file mode 100644 index 0000000000000000000000000000000000000000..2c0ba0355e685dc36800d17c038427a597b39ec6 --- /dev/null +++ b/images/profiletick.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/search.svg b/images/search.svg new file mode 100644 index 0000000000000000000000000000000000000000..276c41a1f924f74133ea353acb018ff7fc9ca5fd --- /dev/null +++ b/images/search.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/sent-color.svg b/images/sent-color.svg new file mode 100644 index 0000000000000000000000000000000000000000..32fe8a84c7e600c234f2dbadb13cd511055269a8 --- /dev/null +++ b/images/sent-color.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/sent.svg b/images/sent.svg new file mode 100644 index 0000000000000000000000000000000000000000..20a485798c9dae45d278ddcaf8cbd32129b42afc --- /dev/null +++ b/images/sent.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/setting.svg b/images/setting.svg new file mode 100644 index 0000000000000000000000000000000000000000..6d5562dd2a534236b9e08d2d6da1c77be5281881 --- /dev/null +++ b/images/setting.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/size-ascending.svg b/images/size-ascending.svg new file mode 100644 index 0000000000000000000000000000000000000000..63e929783f7bd3038608fb19f8c77efaa8d9e163 --- /dev/null +++ b/images/size-ascending.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/size-descending.svg b/images/size-descending.svg new file mode 100644 index 0000000000000000000000000000000000000000..97662d9f10ec43179af7cc0f7daff80a8efb5a2e --- /dev/null +++ b/images/size-descending.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/sort-color.svg b/images/sort-color.svg new file mode 100644 index 0000000000000000000000000000000000000000..5e331ce3f2c54648f53f86a8756a3e5906faa610 --- /dev/null +++ b/images/sort-color.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/sort.svg b/images/sort.svg new file mode 100644 index 0000000000000000000000000000000000000000..de79f400eba7288bc301947a211c7f3c00527d74 --- /dev/null +++ b/images/sort.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/spam-color.svg b/images/spam-color.svg new file mode 100644 index 0000000000000000000000000000000000000000..83a57064f5cf5626d05ee2f839ee0f0c4a71c2af --- /dev/null +++ b/images/spam-color.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/images/spam.svg b/images/spam.svg new file mode 100644 index 0000000000000000000000000000000000000000..e09b3746aa3c138cb230ae73738fb08b009a4bd8 --- /dev/null +++ b/images/spam.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/images/tag.svg b/images/tag.svg new file mode 100644 index 0000000000000000000000000000000000000000..c31058e9f360d60e1709b48052991376ecad438e --- /dev/null +++ b/images/tag.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/toolbar-folder.svg b/images/toolbar-folder.svg new file mode 100644 index 0000000000000000000000000000000000000000..b1f8ea9d1db5de4b798887eaff06a7e78bb8fc64 --- /dev/null +++ b/images/toolbar-folder.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/toolbar-photo.svg b/images/toolbar-photo.svg new file mode 100644 index 0000000000000000000000000000000000000000..07a7c9a39367f3660b38a1085a218837be2b857c --- /dev/null +++ b/images/toolbar-photo.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/trash-color.svg b/images/trash-color.svg new file mode 100644 index 0000000000000000000000000000000000000000..54fdbc1424b66558a5f508cb92d81a804b3ed3f5 --- /dev/null +++ b/images/trash-color.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/trash.svg b/images/trash.svg new file mode 100644 index 0000000000000000000000000000000000000000..5d5979d25b45431202cf905c873f47b9b511948d --- /dev/null +++ b/images/trash.svg @@ -0,0 +1,3 @@ + + + diff --git a/styles.css b/styles.css index 6d9e200093a037db82a0805e261e1b818941f214..c29242de3c7723347a0540d97e524978cd19460c 100644 --- a/styles.css +++ b/styles.css @@ -7,20 +7,228 @@ /* * app layout changes, background & color */ + /** + * Nextcloud - SnappyMail mail plugin + * + * @author Nextcloud Team + * + * Based on https://github.com/nextcloud/server/blob/master/core/css/variables.scss + * + * Theme variables for Nextcloud backwards compatibility! + * + * When using this theme as a standalone SnappyMail theme, + * this file will serve as a template for customization. + */ +/* Default Nextcloud (v25) theme variables and colors */ +:root { + --color-main-background: #ffffff; + --color-main-background-not-plain: #0082c9; + --color-main-background-rgb: 255,255,255; + --color-main-background-translucent: rgba(var(--color-main-background-rgb), .97); + --color-main-background-blur: rgba(var(--color-main-background-rgb), .8); + --filter-background-blur: blur(25px); + --gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%; + --color-background-hover: #f5f5f5; + --color-background-dark: #ededed; + --color-background-black: rgba(0, 0, 0, 0.12); + --color-background-darker: #dbdbdb; + --color-placeholder-light: #e6e6e6; + --color-placeholder-dark: #cccccc; + --color-background-red: rgba(248, 67, 46, 0.08); + --color-background-orange: rgba(255, 122, 0, 0.08); + --color-background-green: rgba(68, 176, 76, 0.08); + --color-background-blue: rgba(8, 123, 249, 0.08); + --color-background-purple: rgba(176, 52, 240, 0.07); + --color-background-light-second: #f9f9f9; + --color-main-text: #222222; + --color-text-maxcontrast: #767676; + --color-text-maxcontrast-default: #767676; + --color-text-maxcontrast-background-blur: #646464; + --color-text-light: #222222; + --color-text-lighter: #767676; + --color-text-dark-second: rgba(0, 0, 0, 0.38); + --color-scrollbar: rgba(34,34,34, .15); + --color-error: #e9322d; + --color-error-second: #F8432E; + --color-error-rgb: 233,50,45; + --color-error-hover: #ed5a56; + --color-warning: #eca700; + --color-warning-rgb: 236,167,0; + --color-warning-hover: #efb832; + --color-success: #46ba61; + --color-success-second: #44B04C; + --color-success-rgb: 70,186,97; + --color-success-hover: #6ac780; + --color-loading-light: #cccccc; + --color-loading-dark: #444444; + --color-box-shadow-rgb: 77,77,77; + --color-box-shadow: rgba(var(--color-box-shadow-rgb), 0.5); + --color-box-shadow-second: rgba(0,0,0, 0.02); + --color-border: #ededed; + --color-border-grey: #e6e6e6; + --color-border-input: #e6e8e9; + --color-border-dark: #dbdbdb; + --color-border-second: #e0e0e0; + --color-border-red: #F8432E; + --color-border-orange: #FF7A00; + --color-border-green: #44B04C; + --color-border-purple: #B034F0; + --color-border-light-second: #DCDCDC; + --font-face: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', Arial, sans-serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; + --default-font-size: 15px; + --animation-quick: 100ms; + --animation-slow: 300ms; + --border-radius: 3px; + --border-radius-large: 10px; + --border-radius-pill: 100px; + --default-clickable-area: 44px; + --default-line-height: 24px; + --default-grid-baseline: 4px; + --header-height: 50px; + --navigation-width: 300px; + --sidebar-min-width: 300px; + --sidebar-max-width: 500px; + --list-min-width: 200px; + --list-max-width: 300px; + --header-menu-item-height: 44px; + --header-menu-profile-item-height: 66px; + --breakpoint-mobile: 1024px; + --primary-invert-if-bright: no; + --background-invert-if-dark: no; + --background-invert-if-bright: invert(100%); + --color-primary: #087BF9; + --color-primary-default: #0082c9; + --color-primary-text: #ffffff; + --color-primary-hover: #3282ae; + --color-primary-light: #e5eff4; + --color-primary-light-text: #00273d; + --color-primary-light-hover: #dbe4e9; + --color-primary-text-dark: #ededed; + --color-primary-element: #087BF9; + --color-primary-element-text: #ffffff; + --color-primary-element-hover: #3282ae; + --color-primary-element-light: #e5eff4; + --color-primary-element-light-text: #00273d; + --color-primary-element-light-hover: #dbe4e9; + --color-primary-element-text-dark: #ededed; + --color-primary-element-text-grey: #333333; + --color-primary-element-text-blue: #087BF9; + --color-primary-element-text-black: #000000; + --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); +} + +@media (prefers-color-scheme: dark) { + :root { + --color-main-background: #171717; + --color-main-background-not-plain: #0082c9; + --color-main-background-rgb: 23,23,23; + --color-main-background-translucent: rgba(var(--color-main-background-rgb), .97); + --color-main-background-blur: rgba(var(--color-main-background-rgb), .8); + --filter-background-blur: blur(25px); + --gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%; + --color-background-hover: #212121; + --color-background-dark: #292929; + --color-background-black:rgba(0, 0, 0, 0.12); + --color-background-darker: #3b3b3b; + --color-placeholder-light: #313131; + --color-placeholder-dark: #4a4a4a; + --color-background-red: rgba(248, 67, 46, 0.08); + --color-background-orange: rgba(255, 122, 0, 0.08); + --color-background-green: rgba(68, 176, 76, 0.08); + --color-background-blue: rgba(8, 123, 249, 0.08); + --color-background-purple: rgba(176, 52, 240, 0.07); + --color-background-light-second: #f9f9f9; + --color-main-text: #D8D8D8; + --color-text-maxcontrast: #8c8c8c; + --color-text-maxcontrast-default: #8c8c8c; + --color-text-maxcontrast-background-blur: #919191; + --color-text-light: #bfbfbf; + --color-text-lighter: #a5a5a5; + --color-text-dark-second: rgba(0, 0, 0, 0.38); + --color-scrollbar: #3d3d3d; + --color-error: #e9322d; + --color-error-second: #F8432E; + --color-error-rgb: 233,50,45; + --color-error-hover: #ed5a56; + --color-warning: #eca700; + --color-warning-rgb: 236,167,0; + --color-warning-hover: #efb832; + --color-success: #46ba61; + --color-success-second: #44B04C; + --color-success-rgb: 70,186,97; + --color-success-hover: #6ac780; + --color-loading-light: #777; + --color-loading-dark: #CCC; + --color-box-shadow-rgb: 0,0,0; + --color-box-shadow: #000000; + --color-box-shadow-second: rgba(0,0,0, 0.02); + --color-border: #292929; + --color-border-grey: #e6e6e6; + --color-border-input: #e6e8e9; + --color-border-dark: #3b3b3b; + --color-border-second: #e0e0e0; + --color-border-red: #F8432E; + --color-border-orange: #FF7A00; + --color-border-green: #44B04C; + --color-border-purple: #B034F0; + --color-border-light-second: #DCDCDC; + --font-face: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', Arial, sans-serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; + --default-font-size: 15px; + --animation-quick: 100ms; + --animation-slow: 300ms; + --border-radius: 3px; + --border-radius-large: 10px; + --border-radius-pill: 100px; + --default-clickable-area: 44px; + --default-line-height: 24px; + --default-grid-baseline: 4px; + --header-height: 50px; + --navigation-width: 300px; + --sidebar-min-width: 300px; + --sidebar-max-width: 500px; + --list-min-width: 200px; + --list-max-width: 300px; + --header-menu-item-height: 44px; + --header-menu-profile-item-height: 66px; + --breakpoint-mobile: 1024px; + --primary-invert-if-bright: no; + --background-invert-if-dark: invert(100%); + --background-invert-if-bright: no; + --color-primary: #087BF9; + --color-primary-default: #0082c9; + --color-primary-text: #ffffff; + --color-primary-hover: #04537f; + --color-primary-light: #141e24; + --color-primary-light-text: #99c0d6; + --color-primary-light-hover: #1d272d; + --color-primary-text-dark: hsl(0, 0%, 93%); + --color-primary-element: #087BF9; + --color-primary-element-text: #ffffff; + --color-primary-element-hover: #04537f; + --color-primary-element-light: #141e24; + --color-primary-element-light-text: #99c0d6; + --color-primary-element-light-hover: #1d272d; + --color-primary-element-text-dark: #ededed; + --color-primary-element-text-grey: #333333; + --color-primary-element-text-blue: #087BF9; + --color-primary-element-text-black: #000000; + --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); + } +} :root { --link-color: var(--color-primary-light-text); } #rl-app { color: var(--color-main-text); - background-color: transparent; + background-color: var(--color-main-background); font-family: var(--font-face); font-size: var(--default-font-size); } #rl-app #rl-left { - background-color: var(--color-main-background-blur, var(--color-main-background)); + background-color: var(--color-main-background); -webkit-backdrop-filter: var(--filter-background-blur, none); backdrop-filter: var(--filter-background-blur, none); } @@ -190,6 +398,7 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { height: 44px; min-height: 44px; line-height: 44px; + border-radius: unset; } #rl-app #V-AdminMenu nav a.selected, @@ -197,6 +406,7 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { #rl-app .b-folders li a.selectable.selected { color: unset; background-color: var(--color-primary-light); + border-radius: unset; } #rl-app #V-AdminMenu nav a:not(.selected):hover, @@ -211,8 +421,7 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { #rl-app .b-folders .b-folders-system a[data-unread]::after { display: block; - margin: 0 ; - padding: 2px 6px; + margin: 0 ; top: 50%; transform: translateY(-50%); @@ -221,14 +430,59 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { font-size: 12px; text-shadow: none; -} + padding-right: 15px; +} +#rl-app .b-folders .b-folders-system a[data-unread].selectable.selected::after{ + background-color: transparent; + color: var(--color-primary-element); +} +#rl-app .b-folders .b-folders-system a[data-unread].selectable::after{ + background-color: transparent; + color: var(--color-primary-element-text-grey); +} #rl-app .b-folders hr { border-top: solid var(--color-main-text); border-radius: var(--border-radius-pill); opacity: .1; } - +#rl-app .b-footer.btn-toolbar .btn-group a.btn.fontastic:nth-child(1){ + background-image: url('images/back.svg'); + background-position: center center; + background-repeat: no-repeat; + height:34px; + padding-left: 20px; + padding-right: 19px; + line-height: 0; + font-size: 0; + color: transparent; +} +#rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn.icon-folder-add{ + background-image: url('images/createfolder.svg'); + background-position: center center; + background-repeat: no-repeat; + height:34px; + padding-left: 20px; + padding-right: 19px; + line-height: 0; + font-size: 0; + color: transparent; +} +#rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn.icon-folder-add:before{ + content:""; +} + +#rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled a.btn:nth-child(2){ + background-image: url('images/setting.svg'); + background-position: center center; + background-repeat: no-repeat; + height:34px; + padding-left: 20px; + padding-right: 19px; + line-height: 0; + font-size: 0; + color: transparent; +} #rl-app .b-folders input { width: calc(100% - 10px); margin: 5px; @@ -237,8 +491,7 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { #rl-app .b-footer.btn-toolbar.hide-mobile, #rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled { - display: flex; - flex-direction: column; + display:inline-block; align-content: stretch; justify-content: flex-start; height: unset; @@ -261,21 +514,30 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { /* * buttons */ - -#rl-app .btn, -#rl-app button.btn:not(.button-vue) { + #rl-app #rl-popups .btn.buttonAdvSearch, +#rl-app #rl-popups .btn.buttonAddAccount, +#rl-app #rl-popups .btn.buttonAddIdentity { + color: var(--color-primary-element-text); + background: var(--color-primary-element-text-blue); + border: 1px solid var(--color-border-dark) ; + border-radius: 6px; + } + #rl-app .btn { min-height: 36px; height: 36px; box-sizing: border-box !important; padding: 8px 14px; line-height: 20px; color: var(--color-main-text); - background-color: var(--color-background-dark); - border: 1px solid var(--color-border-dark) !important; - border-radius: var(--border-radius-pill); + background: var(--color-primary-element-text-blue); + border: 1px solid var(--color-border-dark) ; + border-radius: 6px; font-size: var(--default-font-size); } - +#rl-app .btn-toolbar .btn { + background-color: transparent; + border: none; +} #rl-app .btn.btn-thin { padding-right: 9px; padding-left: 9px; @@ -317,19 +579,133 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { font-weight: bold; max-width: 100%; width: 100%; - box-sizing: content-box !important; +} +#rl-app #rl-left,#rl-app #rl-right,#rl-app .messageList, #rl-app .messageView{ + background-color:var(--color-main-background); +} +#rl-app .b-folders li a.selectable.selected +{ + border-radius:0; +} +#rl-app .b-folders li a.selectable::before +{ + content:""; + background-position: left center; + background-repeat: no-repeat; + height:20px; + padding-left: 20px; + padding-right: 19px; +} +#rl-app .b-folders .b-folders-system +{ + font-weight: 400; +} +#rl-app .b-folders .b-folders-system li:nth-child(1) a.selectable::before +{ + background-image: url('images/inbox.svg'); +} +#rl-app .b-folders .b-folders-system li:nth-child(1) a.selectable.selected::before +{ + background-image: url('images/inbox-color.svg'); +} +#rl-app .b-folders .b-folders-system li:nth-child(2) a.selectable::before +{ + background-image: url('images/sent.svg'); +} +#rl-app .b-folders .b-folders-system li:nth-child(2) a.selectable.selected::before +{ + background-image: url('images/sent-color.svg'); +} +#rl-app .b-folders .b-folders-system li:nth-child(3) a.selectable::before +{ + background-image: url('images/draft.svg'); +} +#rl-app .b-folders .b-folders-system li:nth-child(3) a.selectable.selected::before +{ + background-image: url('images/draft-color.svg'); +} +#rl-app .b-folders .b-folders-system li:nth-child(4) a.selectable::before +{ + background-image: url('images/spam.svg'); +} +#rl-app .b-folders .b-folders-system li:nth-child(4) a.selectable.selected::before +{ + background-image: url('images/spam-color.svg'); +} +#rl-app .b-folders .b-folders-system li:nth-child(5) a.selectable.selected::before +{ + background-image: url('images/trash-color.svg'); +} +#rl-app .b-folders .b-folders-system li:nth-child(5) a.selectable::before +{ + background-image: url('images/trash.svg'); +} +#rl-app .b-folders .b-folders-system li:nth-child(6) a.selectable.selected::before +{ + background-image: url('images/archieve-color.svg'); +} +#rl-app .b-folders .b-folders-system li:nth-child(6) a.selectable::before +{ + background-image: url('images/archieve.svg'); +} +#rl-app .b-folders .b-folders-user li a.selectable.selected::before +{ + background-image: url('images/folder-color.svg'); +} +#rl-app .b-folders .b-folders-user li a.selectable::before +{ + background-image: url('images/folder.svg'); +} +#rl-app .b-folders .b-folders-user li a.selectable .e-collapsed-sign{ + display:none; +} +#rl-app #V-SettingsMenu nav.b-content, .b-folders .b-content{ + padding:0; +} +.rl-side-preview-pane #V-MailMessageList { + max-width: 40%; +} +#rl-app #rl-content .btn.buttonCompose{ + box-sizing: border-box; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 12px 16px; + width: 173px; + height: 32px; + background: var(--color-primary-element-text-blue); + border-radius: 6px; + flex: none; + order: 0; + flex-grow: 0; + font-weight:400; +} +#rl-app #rl-content .btn.buttonCompose::before { + content:""; + background-image: url('images/editnote.png'); + background-position: left center; + background-repeat: no-repeat; + padding-left: 20px; + height:18px; + } +#rl-app #rl-content .b-folders-system li .flag-icon{ + display:none; +} +#rl-app #rl-content .btn.buttonCompose .icon-paper-plane{ + display:none } #rl-app .btn.btn-success { color: var(--color-primary-element-text); - background-color: var(--color-primary-element); - border-color: var(--color-primary-element) !important; + background-color: var(--color-primary-element-text-blue); + border-color: var(--color-primary-element-text-blue) !important; } #rl-app .btn.btn-success:hover, #rl-app .btn.btn-success:focus { - background-color: var(--color-primary-element-hover) !important; - border-color: var(--color-primary-element-hover) !important; + background-color: var(--color-primary-element-text-blue); + border-color: var(--color-primary-element-text-blue); } #rl-app .btn.buttonCompose:active { @@ -364,15 +740,19 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { margin: 3px; user-select: none; } - #rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn { width: -webkit-fill-available; width: -moz-available; width: fill-available; } +#rl-app #content .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn { + width: 30%; + display: inline-block; + float: left; +} #rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn.fontastic { - background-color: var(--color-main-background); + background-color:var(--color-main-background); } #rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn:after { @@ -383,11 +763,11 @@ html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar { } #rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn.fontastic:after { - content: 'SnappyMail-Settings'; + content: ''; } #rl-app .b-footer.btn-toolbar .btn-group .btn.icon-folder-add:after { - content: 'Create new folder'; + content: ''; } html.rl-left-panel-disabled #rl-app .b-footer.btn-toolbar .btn-group .btn.fontastic:after, @@ -428,13 +808,48 @@ html.rl-left-panel-disabled #rl-app .b-footer.btn-toolbar .btn-group .btn.icon-f #rl-app #V-MailMessageList .btn-toolbar { text-align: center; + border: 1px solid var(--color-border-grey); +} +#rl-app #V-MailMessageList.btn-toolbar .btn-group a.btn:nth-child(1) { + background-image: url('images/loading.svg'); + background-position: center center; + background-repeat: no-repeat; + height:20px; + padding-left: 20px; + padding-right: 19px; +} +#rl-app #V-MailMessageList .btn-toolbar a.btn:nth-child(1) .icon-spinner{ + background-image: url('images/loading.svg'); + background-position: center center; + background-repeat: no-repeat; + height:20px; + padding-left: 20px; + padding-right: 19px; + content: ""; + color: transparent; + border: none; } +/* #rl-app #V-MailMessageList .btn-toolbar a.btn:nth-child(1) .icon-spinner{ + display: none; +}*/ -#rl-app #V-MailMessageList .btn-toolbar .btn-group .btn { - border-radius: var(--border-radius-large); - margin: 0 .5px; +#rl-app #V-MailMessageList.btn-toolbar .btn-group a.btn:nth-child(2) .icon-copy,#rl-app #V-MailMessageList.btn-toolbar .btn-group a.btn:nth-child(2) .fontastic { + display: none; } - +/* + * inputs + */ + #rl-app input.inputSearch { + border-radius:52px; + } + #rl-app #V-MailMessageList input.inputSearch { + padding-left:36px; + background-image: url('images/search.svg'); + background-position: 10px center; + background-repeat: no-repeat; + height:40px; + border-radius: 52px; + } /* * inputs */ @@ -446,7 +861,6 @@ html.rl-left-panel-disabled #rl-app .b-footer.btn-toolbar .btn-group .btn.icon-f background-color: unset; height: 36px; outline: none; - border: 2px solid var(--color-border-dark); border-radius: var(--border-radius-large); } @@ -463,11 +877,11 @@ html.rl-left-panel-disabled #rl-app .b-footer.btn-toolbar .btn-group .btn.icon-f -webkit-appearance: none; } -#rl-app input[type=number] { +#rl-app input[type=number] { -moz-appearance: textfield; - -webkit-appearance: textfield; + -webkit-appearance: textfield; appearance: textfield; - margin: 0; + margin: 0; } /* @@ -646,12 +1060,21 @@ html:not(rl-mobile) #rl-app .hideMessageListCheckbox .checkboxCheckAll { } #rl-app .messageList .btn.buttonMoreSearch { - background: unset; + background-image: url('images/downicon.svg'); + background-position: center center; + background-repeat: no-repeat; + height:20px; + width:20px; + color:transparent; border-radius: var(--border-radius-large); margin: 0 0 0 8px; line-height: 20px !important; } +#rl-app .btn.buttonMoreSearch{ + background: var(--color-main-background); +} + #rl-app .messageList .checkboxCheckAll, #rl-app .messageList .btn.buttonMoreSearch { font-size: var(--default-font-size); @@ -679,6 +1102,9 @@ html:not(rl-mobile) #rl-app .hideMessageListCheckbox .checkboxCheckAll { #rl-app .messageList .b-content .listSearchDesc { border-color: var(--color-border); + font-weight: 500; + font-size: 16px; + line-height: 24px; } #rl-app .messageList .b-content .listDragOver { @@ -695,7 +1121,30 @@ html:not(rl-mobile) #rl-app .hideMessageListCheckbox .checkboxCheckAll { #rl-app .messageList .b-content .listLoading { color: var(--color-text-lighter); } - +#rl-app .messageListItem .senderParent.actionHandle { + font-weight: 500; + font-size: 16px; + line-height: 24px; + color: var(--color-primary-element-text-black); + opacity: 0.8; +} +#rl-app .messageListItem .subjectParent.actionHandle { + font-weight: 400; + font-size: 14px; + line-height: 20px; + color: var(--color-primary-element-text-black); + opacity: 0.6; +} +#rl-app .messageListItem time.actionHandle { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color:var(--color-primary-element-text-black); + opacity: 0.3; +} +#rl-app .messageListItem .fromPic{ + display: none; +} #rl-app .messageListItem .checkboxMessage { border-color: var(--color-text-lighter); color: var(--color-text-lighter); @@ -735,8 +1184,8 @@ html:not(rl-mobile) #rl-app .hideMessageListCheckbox .checkboxCheckAll { #rl-app .messageListItem, #rl-app .messageListItem.focused { - background-color: var(--color-background); - border-left-color: var(--color-border); + background-color: var(--color-main-background); + border-left-color: var(--color-main-background); } #rl-app .messageListItem:hover, @@ -748,7 +1197,7 @@ html:not(rl-mobile) #rl-app .hideMessageListCheckbox .checkboxCheckAll { #rl-app .messageListItem.selected, #rl-app .messageListItem.selected:hover { background-color: var(--color-primary-light) !important; - border-left-color: var(--color-primary-element-light-text); + border-left-color: var(--color-primary-light) !important; } #rl-app .messageListItem.unseen, @@ -873,7 +1322,9 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar #rl-app .messageView .messageAssignedTags span { border-radius: var(--border-radius-pill); background: unset; - padding: 2px 5px; + font-size: 12px; + line-height: normal; + padding: 2px 10px; } #rl-app #messageItem .readReceipt, @@ -1052,7 +1503,7 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar #rl-app .dropdown-menu li:not(.disabled) > a:hover, #rl-app .dropdown-menu li:not(.disabled) > a:focus { - background-color: var(--color-main-background-translucent); + background-color: var(--color-primary-light); color: unset; opacity: unset; } @@ -1084,24 +1535,53 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar flex-direction: row; align-items: center; box-sizing: content-box; + background-color:var(--color-primary-text); } +#rl-app #V-SystemDropDown .btn-toolbar.g-ui-user-select-none { + border:none; + +} #rl-app #V-SystemDropDown .accountPlace { - background: unset; - color: unset; + background: rgba(0, 0, 0, 0.04); + color: rgba(0, 0, 0, 0.6); text-shadow: none; + font-weight: 400; + font-size: 14px; + height:32px; +} +#rl-app #V-SystemDropDown .btn-toolbar.g-ui-user-select-none .btn-group.dropdown{ + height: 32px; + margin-left: 8px; } -#rl-app #V-SystemDropDown #top-system-dropdown-id { - background-color: unset; - border: unset !important; - border-radius: var(--border-radius-large) !important; - height: 20px; +#rl-app #V-SystemDropDown .btn-toolbar #top-system-dropdown-id{ + background: var(--color-background-black); + border-radius: 8px; + height:32px; + min-height: 32px; +} + + +#rl-app #V-SystemDropDown #top-system-dropdown-id .fontastic:nth-child(1) { + + color:transparent; + background-image: url('images/profilesetting.svg'); + background-position: center center; + background-repeat: no-repeat; + font-size:20px; +} +#rl-app #V-SystemDropDown #top-system-dropdown-id:after { + color:transparent; + background-image: url('images/profiledownarrow.svg'); + background-position: center center; + background-repeat: no-repeat; + padding-left:10px; } #rl-app #V-SystemDropDown #top-system-dropdown-id:hover, #rl-app #V-SystemDropDown #top-system-dropdown-id:focus { - background-color: var(--color-main-background-translucent); + background-color: var(--color-background-dark); } #rl-app #V-SystemDropDown #top-system-dropdown-id:active { @@ -1125,7 +1605,7 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar /* TODO: Improve settings layout and theming */ /* - * settings + * settings */ #rl-app #rl-settings-subscreen { @@ -1196,7 +1676,7 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar } /* - * admin settings + * admin settings */ #rl-app #V-AdminPane #rl-settings-subscreen { @@ -1260,21 +1740,798 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar } #rl-app #V-PopupsCompose .b-header { - background: unset; + background:var(--color-main-background); } - +#rl-app #V-PopupsCompose .b-header table{ + border-collapse: unset; +} +#rl-app #V-PopupsCompose .b-header table td{ + border-bottom: 1px solid var(--color-border); +} +#rl-app #V-PopupsCompose .b-header input[type=text],#rl-app #V-PopupsCompose .b-header .emailaddresses { + border:none; + border-radius:unset; + box-shadow:none; +} +#rl-app #V-PopupsCompose .btn-group:nth-of-type(1) button.btn { + background: var(--color-main-background); + border: 1px solid var(--color-border-second) !important; + border-radius: 4px 0px 0px 4px; + } + #rl-app #V-PopupsCompose .btn-group:nth-of-type(1) button.btn.active { + background: rgba(0, 0, 0, 0.12); + } + #rl-app #V-PopupsCompose .squire-plain, #rl-app .squire-wysiwyg ,#rl-app .squire-toolbar{ + background:var(--color-main-background); + } + #rl-app #V-PopupsCompose .btn-group:nth-of-type(3) a.btn.fontastic { + background: var(--color-main-background); + border: 1px solid var(--color-border-second) !important; + border-radius: 4px 0px 0px 4px; + height:35px; + } +#rl-app #V-PopupsCompose .btn-group:nth-of-type(3) a.btn.fontastic:nth-child(2) { + background-image: url('images/attachnextcloud-files.svg'); + background-position: center center; + background-repeat: no-repeat; + height:35px; + color:transparent; + } + #rl-app #V-PopupsCompose #squire-toolgroup-mode .btn, + #rl-app #V-PopupsCompose #squire-toolgroup-font .btn, + #rl-app #V-PopupsCompose #squire-toolgroup-colors , + #rl-app #V-PopupsCompose #squire-toolgroup-inline, + #rl-app #V-PopupsCompose #squire-toolgroup-block, + #rl-app #V-PopupsCompose #squire-toolgroup-targets, + #rl-app #V-PopupsCompose #squire-toolgroup-changes{ + border: 1px solid var(--color-border-second) !important; + border-radius: 4px; + height:33px; + line-height: 33px; + padding: 0px 12px; + } + #rl-app #V-PopupsCompose #squire-toolgroup-mode .btn:nth-child(1), #rl-app #V-PopupsCompose #squire-toolgroup-font .btn:nth-child(2){ + width:71px; + vertical-align: baseline; + } +#rl-app #V-PopupsCompose #squire-toolgroup-font .btn{ + vertical-align: baseline; + } + #rl-app #V-PopupsCompose #squire-toolgroup-font .btn:nth-child(2){ + margin-left:3px; + } + #rl-app #V-PopupsCompose #squire-toolgroup-colors .btn, + #rl-app #V-PopupsCompose #squire-toolgroup-inline .btn, + #rl-app #V-PopupsCompose #squire-toolgroup-block .btn, + #rl-app #V-PopupsCompose #squire-toolgroup-targets .btn, + #rl-app #V-PopupsCompose #squire-toolgroup-changes .btn{ + padding:4px 6px; + } + #rl-app #V-PopupsCompose .pull-right .minimize-custom, + #rl-app #V-PopupsCompose .pull-right .close +{ + color: var(--color-primary-element-text-grey); + border-color:var(--color-primary-element-text-grey); + } + #rl-app #advancedsearchform .control-group input, #rl-app #advancedsearchform .control-group select, #rl-app #advancedsearchform .control-group .e-component.e-checkbox.material-design{ + height:34px; + border-radius:3px; + padding-left: 10px; + } #rl-app .squire-toolbar { height: 50px; box-sizing: content-box; } - +#rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show{ + background: var(--color-main-background); + box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.14), 0px 3px 14px rgba(0, 0, 0, 0.12), 0px 5px 5px rgba(0, 0, 0, 0.2); + border-radius: 4px; +} + +#rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show li{ + height:35px; + margin-top:9px; + padding-top:9px; +} +#rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show .email-title::before { + background-image: url('images/profiletick.svg'); + background-position: center center; + background-repeat: no-repeat; + height:20px; + width:20px; + color:transparent; +} +#rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show .dividerbar a:nth-child(1)::before { + content: ""; + background-image: url('images/plus.svg'); + background-position: center center; + background-repeat: no-repeat; + height:20px; + width:20px; + color:transparent; +} +#rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show li:nth-child(3) a::before { + content: ""; + background-image: url('images/contactsmall.svg'); + background-position: center center; + background-repeat: no-repeat; + height:20px; + width:20px; + color:transparent; +} +#rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show li:nth-child(4) a::before { + content: ""; + background-image: url('images/hide-my-email.svg'); + background-position: center center; + background-repeat: no-repeat; + height:20px; + width:20px; + color:transparent; +} +#rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show li:nth-child(5) a::before { + content: ""; + background-image: url('images/setting.svg'); + background-position: center center; + background-repeat: no-repeat; + height:20px; + width:20px; + color:transparent; +} + +#rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show li:nth-child(6) a::before { + content: ""; + background-image: url('images/help.svg'); + background-position: center center; + background-repeat: no-repeat; + height:20px; + width:20px; + color:transparent; +} +#rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show li:nth-child(7) a:nth-child(2)::before { + content: ""; + background-image: url('images/mobile.svg'); + background-position: center center; + background-repeat: no-repeat; + height:20px; + width:20px; + color:transparent; +} +#rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show li:nth-child(8){ + display:none; +} +#rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show li:nth-child(8) a::before { + content: ""; + background-image: url('images/logout.svg'); + background-position: center center; + background-repeat: no-repeat; + height:20px; + width:20px; + color:transparent; +} #rl-app dialog > header, #rl-app dialog > footer, #rl-app .squire-toolbar { border-color: var(--color-border); } - +#rl-app #V-PopupsCompose header{ + background-color: var(--color-primary-text); +} +#rl-app #V-PopupsCompose header .button-save{ + background: var(--color-background-black); +} #rl-app #V-PopupsCompose header .close, #rl-app #V-PopupsCompose header .minimize-custom { box-sizing: content-box; -} \ No newline at end of file +} + +#rl-app #rl-right #V-MailMessageList .btn-toolbar .btn-group i.fontastic { + display:none; +} +#rl-app #rl-right #V-MailMessageList .btn-toolbar div.btn-group:nth-of-type(1) a.btn.disabled { + background-image: url('images/createfolder.svg'); + background-position: center center; + background-repeat: no-repeat; + height:18px; + color:transparent; +} +#rl-app #rl-right #V-MailMessageList .btn-toolbar div.btn-group:nth-of-type(1) a.btn { + background-image: url('images/createfolder-color.svg'); + background-position: center center; + background-repeat: no-repeat; + height:18px; + color:transparent; +} +#rl-app #rl-right #V-MailMessageList .btn-toolbar div.btn-group:nth-of-type(2) a.btn.disabled:nth-child(1) { + background-image: url('images/archieve.svg'); + background-position: center center; + background-repeat: no-repeat; + height:18px; + color:transparent; +} +#rl-app #rl-right #V-MailMessageList .btn-toolbar div.btn-group:nth-of-type(2) a.btn:nth-child(1) { + background-image: url('images/archieve-color.svg'); + background-position: center center; + background-repeat: no-repeat; + height:18px; + color:transparent; +} +#rl-app #rl-right #V-MailMessageList .btn-toolbar div.btn-group:nth-of-type(2) a.btn.fontastic.disabled:nth-child(2) { + background-image: url('images/spam.svg'); + background-position: center center; + background-repeat: no-repeat; + height:18px; + color:transparent; +} +#rl-app #rl-right #V-MailMessageList .btn-toolbar div.btn-group:nth-of-type(2) a.btn.fontastic:nth-child(2) { + background-image: url('images/spam-color.svg'); + background-position: center center; + background-repeat: no-repeat; + height:18px; + color:transparent; +} +#rl-app #rl-right #V-MailMessageList .btn-toolbar div.btn-group:nth-of-type(2) a.btn.fontastic.disabled:nth-child(4) { + background-image: url('images/trash.svg'); + background-position: center center; + background-repeat: no-repeat; + height:18px; + color:transparent; +} +#rl-app #rl-right #V-MailMessageList .btn-toolbar div.btn-group:nth-of-type(2) a.btn.fontastic:nth-child(4) { + background-image: url('images/trash-color.svg'); + background-position: center center; + background-repeat: no-repeat; + height:18px; + color:transparent; +} +#rl-app #rl-right #V-MailMessageList .btn-toolbar div.btn-group:nth-of-type(3) #more-list-dropdown-id,#rl-app #more-view-dropdown-id { + background-image: url('images/more.svg') !important; + background-position: center center !important; + background-repeat: no-repeat !important; + height:18px; + color:transparent; +} + +#rl-app #rl-right #V-MailMessageList .btn-toolbar div.btn-group:nth-of-type(4) #sort-list-dropdown-id { + background-image: url('images/sort.svg'); + background-position: center center; + background-repeat: no-repeat; + height:18px; + color:transparent; + order: 1; +} +#rl-app #rl-content .select,#rl-app #rl-content input,#rl-app #rl-content select,#rl-app #rl-popups select,#rl-app #rl-popups input{ + height:34px; + padding:0 0 0 5px; + border-radius:3px; + background: var(--color-primary-text); +} +#rl-app #rl-content #V-Settings-Folders .btn { + color: var(--color-primary-text); + +} +#r +#rl-app #rl-content #V-Settings-Folders .btn .icon-folder-add{ + background-image: url('images/createfolder.svg'); + background-position: center center; + background-repeat: no-repeat; + height:20px; + width:20px; + line-height: 20px; + font-size: 0; + color: transparent; + vertical-align: middle; +} +#rl-app footer .btn.buttonCreate { + flex-shrink: 1; + width: 200px; + min-width: 150px; + color: var(--color-primary-text); + width: 173px; + height: 32px; + background-color: var(--color-primary); + border-radius: var(--border-radius-pill); + font-weight: bold; +} +#rl-app #V-MailFolderList .buttonContacts { + background-image: url('images/contact.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 18px; + color:transparent; +} +#rl-app #rl-right .dropdown-menu.show li a { + text-align:left; +} +#rl-app .dropdown-menu.right-edge.show .msgflag-\$label1:not(.focused) { + border-color:var(--color-border-red); +} +#rl-app .dropdown-menu.right-edge.show .msgflag-\$label2:not(.focused) { + border-color:var(--color-border-orange); +} +#rl-app .dropdown-menu.right-edge.show .msgflag-\$label3:not(.focused) { + border-color:var(--color-border-green); +} +#rl-app .dropdown-menu.right-edge.show .msgflag-\$label4:not(.focused) { + border-color: var(--color-primary-element-text-blue); +} +#rl-app .dropdown-menu.right-edge.show .msgflag-\$label5:not(.focused) { + border-color: var(--color-border-purple); +} +#rl-app .messageView .messageAssignedTags span.focused.msgflag-\$label1:not(.selected) { + background: var(--color-background-red); + border: 1px solid var(--color-border-red); + border-radius: 16px; + color: var(--color-border-red); + font-weight: 400; + font-size: 12px; + line-height: normal; + padding: 2px 10px; +} +#rl-app .messageView .messageAssignedTags span.focused.msgflag-\$label2:not(.selected) { + background: var(--color-background-orange); + border: 1px solid var(--color-border-orange); + border-radius: 16px; + color:var(--color-border-orange); + font-weight: 400; + font-size: 12px; + line-height: normal; + padding: 2px 10px; +} + +#rl-app .messageView .messageAssignedTags span.focused.msgflag-\$label3:not(.selected) { + background: var(--color-background-green); + border: 1px solid var(--color-border-green); + border-radius: 16px; + color:var(--color-border-green); + font-weight: 400; + font-size: 12px; + line-height: normal; + padding: 2px 10px; +} + +#rl-app .messageView .messageAssignedTags span.focused.msgflag-\$label4:not(.selected) { + background: var(--color-background-blue); + border: 1px solid var(--color-primary-element-text-blue); + border-radius: 16px; + color: var(--color-primary-element-text-blue); + font-weight: 400; + font-size: 12px; + line-height: normal; + padding: 2px 10px; +} + +#rl-app .messageView .messageAssignedTags span.focused.msgflag-\$label5:not(.selected) { + background:var(--color-background-purple); + border: 1px solid var(--color-border-purple); + border-radius: 16px; + color:var(--color-border-purple); + font-weight: 400; + font-size: 12px; + line-height: normal; + padding: 2px 10px; +} + + +#rl-app #rl-right .dropdown-menu.show li:nth-child(10) a::before { + background-image: url('images/createfolder.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 20px; + width: 20px; + color: transparent; +} +#rl-app #rl-right .dropdown-menu.show li:nth-child(11) a::before, +#rl-app #rl-right .b-message menu.dropdown-menu.right-edge.show .dividerbar:nth-of-type(2) li:nth-child(1) a::before { + background-image: url('images/archieve.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 20px; + width: 20px; + color: transparent; +} +#rl-app #rl-right .dropdown-menu.show li:nth-child(12) a::before, +#rl-app #rl-right .b-message menu.dropdown-menu.right-edge.show .dividerbar:nth-of-type(2) li:nth-child(2) a::before { + background-image: url('images/spam.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 20px; + width: 20px; + color: transparent; +} +#rl-app #rl-right .dropdown-menu.show li:nth-child(13) a::before, +#rl-app #rl-right .dropdown-menu.show li:nth-child(14) a::before, +#rl-app #rl-right .b-message menu.dropdown-menu.right-edge.show .dividerbar:nth-of-type(2) li:nth-child(4) a::before, +#rl-app #rl-right .b-message menu.dropdown-menu.right-edge.show .dividerbar:nth-of-type(2) li:nth-child(5) a::before { + background-image: url('images/trash.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 20px; + width: 20px; + color: transparent; +} + +#rl-app #V-Settings-Security button.btn,#rl-app #V-Settings-Accounts .btn { + color: var(--color-primary-text); +} +#rl-app #V-PopupsCompose header .pull-right a.btn{ + background: none; + font-weight: 400; + font-size: 16px; + line-height: 24px; + letter-spacing: 0.5px; + text-decoration: underline; + color: var(--color-primary-element-text-black); + opacity: 0.8; + text-transform: uppercase; +} +#rl-app #V-PopupsCompose header .pull-right a.btn.fontastic,#rl-app #V-PopupsCompose header .pull-right a.btn-group.dropdown{ + text-decoration:none; + +} +#rl-app #V-PopupsCompose .emailaddresses{ + padding:0 12px; +} +#rl-app .messageTags #tags-dropdown-id { + background-image: url('images/tag.svg') !important; + background-position: center center !important; + background-repeat: no-repeat !important; + height: 20px; + width: 20px; + color: transparent; +} +#rl-app #messageItem .bodySubHeader .showImages{ + background-color:var(--color-background-light-second); + box-shadow: 0px 2px 4px var(--color-box-shadow-second); + border-radius: 0; + border: 1px solid var(--color-background-light-second) !important; + margin:0px; + font-weight: 400; + font-size: 12px; + line-height: 16px; +} +#rl-app #messageItem .bodySubHeader .showImages::before{ + background-image: url('images/noimage.svg') !important; + background-position: center center; + background-repeat: no-repeat; + height: 14px; + width: 14px; + color: transparent; +} +#rl-app #messageItem .b-text-part.html img[data-x-src]:not([src])::after{ + background-image: url('images/noimage.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 14px; + width: 14px; + content:''; +} +#rl-app #V-MailMessageView .messageView .messageItemHeader .subject{ + font-weight: 500; + font-size: 16px; + line-height: 24px; + color: var(--color-primary-element-text-black); + opacity:0.8; +} +#rl-app #V-MailMessageView .messageView span.infoParent{ + background-image: url('images/info.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 25px; + width: 15px; + color: transparent; +} +#rl-app #V-MailMessageView .messageView span.flagParent{ + font-size:15px; +} +#rl-app .messageView .b-message-view-checked-helper::after{ + background-image: url('images/mailselected.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 32px; + width: 40px; + color: transparent; +} +#rl-app .messageView .b-content .b-message-view-checked-helper { + color: var(--color-primary-element-text-blue); + opacity: 1; + display: inline-grid; + position: absolute; + left: 50%; + +} +#rl-content .LoginView{ + width: 512px; + height: 528px; + background-color: var(--color-main-background); + border: 1px solid var(--color-border-light-second); + border-radius: 8px; + +} +#rl-content .LoginView form{ + background-color: var(--color-main-background); +} + +#rl-content .LoginView .descWrapper{ + font-weight: 500; + font-size: 32px; + line-height: 48px; + text-align: center; + color: var(--color-primary-element-text-grey); + padding: 64px 44px 0px 44px; +} +#rl-content .LoginView form .buttonLogin{ + padding: 12px 16px; + width: 424px; + height: 48px; + background: var(--color-primary-element-text-blue); + border-radius: 6px; + font-weight: 400; + font-size: 16px; + line-height: 24px; + color: var(--color-primary-element-text); + text-transform: capitalize; +} +#rl-content .LoginView form .controls span.fontastic{ + display: none; +} +#rl-content #V-Login input{ + padding-left:20px; + border-color: var(--color-border-input); + +} +#rl-content #V-Login .language-buttons .language-button,#rl-content #V-Login .e-checkbox .fontastic,#rl-content #V-Login .e-checkbox span{ + color: var(--color-primary-element-text-grey); +} +#rl-content #V-Login .language-buttons .language-button{ + background-image: url('images/language.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 20px; + width: 20px; + color: transparent; +} +#rl-app footer button.btn.buttonYes,#rl-app footer button.btn.buttonNo,#rl-popups .button-delete,#V-PopupsContacts .control-group .btn.fontastic { + color: var(--color-primary-element-text); + margin-right: 10px; + border-radius:6px; +} +#V-PopupsContacts .b-header-toolbar.g-ui-user-select-none .btn{ + background: var(--color-primary-element-text-blue); + border-radius: 6px; + color: var(--color-primary-element-text); +} +#V-PopupsContacts .b-header-toolbar.g-ui-user-select-none .btn-toolbar .btn-success{ + background: transparent; +} +#V-PopupsContacts .b-view-content-toolbar.btn-toolbar .btn.button-save-contact, +#V-PopupsContacts .b-view-content-toolbar.btn-toolbar #button-add-prop-dropdown-id{ + background: var(--color-primary-element-text); + border-radius: 6px; + color: var(--color-primary-element-text-blue); + border:1px solid var(--color-primary-element-text-blue) !important; + height:36px; +} +#rl-content .LoginView .descWrapper::before{ + background-image: url('images/murena-mail.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 48px; + width: 58px; + color: transparent; + content:""; + display: inline-flex; + vertical-align: top; +} + +#rl-app .unseen .senderParent ::before{ + background-image: url('images/greendot.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 10px; + width: 44px; + color: transparent; + content:""; + display: inline-flex; +} +#rl-app .senderParent.actionHandle:before{ + content: ""; + height: 10px; + width: 44px; + display: inline-flex; +} +#rl-app #V-MailMessageList .messageListItem .subjectParent.actionHandle{ + padding-left: 44px; +} + +#rl-app #V-MailMessageView .messageView .b-message-view-desc{ + color: var(--color-text-dark-second); + font-weight: 400; + font-size: 24px; +} +.dropdown-menu.show li{ + color: var(--color-primary-element-text-black); + opacity:0.8; + font-size: 14px; +} +#rl-app #V-MailMessageList #sort-list-dropdown-id li:nth-child(1) a::before{ + background-image: url('images/date-descending.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 20px; + width: 20px; + color: transparent; + content:"" +} +#rl-app #V-MailMessageList #sort-list-dropdown-id li:nth-child(2) a::before{ + background-image: url('images/date-ascending.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 20px; + width: 20px; + color: transparent; + content:""; +} +#rl-app #V-MailMessageList #sort-list-dropdown-id li:nth-child(3) a::before{ + background-image: url('images/size-descending.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 20px; + width: 20px; + color: transparent; + content:""; +} +#rl-app #V-MailMessageList #sort-list-dropdown-id li:nth-child(4) a::before{ + background-image: url('images/size-ascending.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 20px; + width: 20px; + color: transparent; + content:""; +} +#rl-app #V-MailMessageList #sort-list-dropdown-id li:nth-child(5) a::before{ + content:""; +} +#rl-app #V-MailMessageList #sort-list-dropdown-id li:nth-child(6) a::before{ + content:""; +} +#rl-app #V-MailMessageList #sort-list-dropdown-id li:nth-child(7) a::before{ + background-image: url('images/from-a-z-descending.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 20px; + width: 20px; + color: transparent; + content:""; +} +#rl-app #V-MailMessageList #sort-list-dropdown-id li:nth-child(8) a::before{ + background-image: url('images/from-a-z-ascending.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 20px; + width: 20px; + color: transparent; + content:""; +} +#rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show li{ + height: 48px; + margin-top: 0px; + padding-top: 0px; + vertical-align: middle; + padding-top: 10px; +} +#rl-app #rl-right #V-SystemDropDown .dropdown-menu.right-edge.show li a{ + vertical-align: middle; + display: flex; + width:auto +} +#rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-colors, +#rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-inline, +#rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-block, +#rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-targets, +#rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-changes{ + height: 37px; + line-height: 37px; + +} +#rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-colors .btn, +#rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-inline .btn, +#rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-block .btn, +#rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-targets .btn, +#rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-changes .btn{ + font-weight:400; +} +#rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-targets button.btn:nth-child(3){ + background-image: url('images/toolbar-folder.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 20px; + width: 20px; + color: transparent; + content:""; +} +#rl-app #rl-popups #V-PopupsCompose #squire-toolgroup-targets button.btn:nth-child(2){ + background-image: url('images/toolbar-photo.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 20px; + width: 20px; + color: transparent; + content:""; +} +#rl-app #rl-popups #V-PopupsCompose .g-ui-user-select-none .btn.btn-success{ + background: var(--color-success-second); + border-radius: 6px; +} +#rl-app #rl-popups #V-PopupsCompose .pull-right .close{ + background-image: url('images/cross.svg'); + background-position: center center; + background-repeat: no-repeat; + height: 20px; + width: 20px; + color: transparent; + content:""; + border: none; + text-shadow: none; + vertical-align: middle; +} +#rl-app #rl-popups #V-PopupsCompose .pull-right .minimize-custom{ + background-image: url('images/minimize.svg'); + background-position: 10px 20px; + background-repeat: no-repeat; + height: 30px; + width: 20px; + color: transparent; + content: ""; + border: none; + text-shadow: none; + vertical-align: middle; +} + +#rl-app #V-PopupsCompose header .pull-right a.btn:nth-child(3){ + background-image: url('images/compose-contact.svg'); + background-position: center 11px; + background-repeat: no-repeat; + height: 18px; + width: 24px; + color: transparent; + content:""; +} +#rl-app #V-PopupsCompose header .pull-right .btn-group.dropdown a.btn{ + color: var(--color-primary-element-text-black); + opacity:0.6; +} +#rl-app #rl-popups #V-PopupsCompose .btn-group:nth-of-type(1) button.btn.active{ + background:var(--color-border-second); +} +#rl-app #rl-popups #V-PopupsCompose .b-header.g-ui-user-select-none .error-to::before { + border: 1px solid var(--color-error-second); + color: var(--color-error-second); + font-weight: 400; + font-size: 14px; + padding: 10px; +} +#rl-app #rl-popups #V-PopupsCompose .b-header .error-to{ + color:var(--color-error-second); + font-weight: 400; + font-size: 14px; + +} +#rl-app #V-MailMessageView .messageView .b-content .b-message-view-checked-helper{ + font-weight: 400; + font-size: 32px; +} +#rl-app #V-MailMessageList .dropdown-menu{ + left:auto; + top:auto; +} +#rl-app #V-Login .alert { + top: 0; + background-color: var(--color-warning-rgb); +} + +#rl-app #V-Login .alert .close{ + top: -24px; + right: -14px; +} + diff --git a/variables.css b/variables.css deleted file mode 100644 index b4442e7ff7b25fa375827754885ca6c391db7da5..0000000000000000000000000000000000000000 --- a/variables.css +++ /dev/null @@ -1,165 +0,0 @@ -/** - * Nextcloud - SnappyMail mail plugin - * - * @author Nextcloud Team - * - * Based on https://github.com/nextcloud/server/blob/master/core/css/variables.scss - * - * Theme variables for Nextcloud backwards compatibility! - * - * When using this theme as a standalone SnappyMail theme, - * this file will serve as a template for customization. - */ - -/* Default Nextcloud (v25) theme variables and colors */ -:root { - --color-main-background: #ffffff; - --color-main-background-not-plain: #0082c9; - --color-main-background-rgb: 255,255,255; - --color-main-background-translucent: rgba(var(--color-main-background-rgb), .97); - --color-main-background-blur: rgba(var(--color-main-background-rgb), .8); - --filter-background-blur: blur(25px); - --gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%; - --color-background-hover: #f5f5f5; - --color-background-dark: #ededed; - --color-background-darker: #dbdbdb; - --color-placeholder-light: #e6e6e6; - --color-placeholder-dark: #cccccc; - --color-main-text: #222222; - --color-text-maxcontrast: #767676; - --color-text-maxcontrast-default: #767676; - --color-text-maxcontrast-background-blur: #646464; - --color-text-light: #222222; - --color-text-lighter: #767676; - --color-scrollbar: rgba(34,34,34, .15); - --color-error: #e9322d; - --color-error-rgb: 233,50,45; - --color-error-hover: #ed5a56; - --color-warning: #eca700; - --color-warning-rgb: 236,167,0; - --color-warning-hover: #efb832; - --color-success: #46ba61; - --color-success-rgb: 70,186,97; - --color-success-hover: #6ac780; - --color-loading-light: #cccccc; - --color-loading-dark: #444444; - --color-box-shadow-rgb: 77,77,77; - --color-box-shadow: rgba(var(--color-box-shadow-rgb), 0.5); - --color-border: #ededed; - --color-border-dark: #dbdbdb; - --font-face: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', Arial, sans-serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; - --default-font-size: 15px; - --animation-quick: 100ms; - --animation-slow: 300ms; - --border-radius: 3px; - --border-radius-large: 10px; - --border-radius-pill: 100px; - --default-clickable-area: 44px; - --default-line-height: 24px; - --default-grid-baseline: 4px; - --header-height: 50px; - --navigation-width: 300px; - --sidebar-min-width: 300px; - --sidebar-max-width: 500px; - --list-min-width: 200px; - --list-max-width: 300px; - --header-menu-item-height: 44px; - --header-menu-profile-item-height: 66px; - --breakpoint-mobile: 1024px; - --primary-invert-if-bright: no; - --background-invert-if-dark: no; - --background-invert-if-bright: invert(100%); - --color-primary: #00639a; - --color-primary-default: #0082c9; - --color-primary-text: #ffffff; - --color-primary-hover: #3282ae; - --color-primary-light: #e5eff4; - --color-primary-light-text: #00273d; - --color-primary-light-hover: #dbe4e9; - --color-primary-text-dark: #ededed; - --color-primary-element: #00639a; - --color-primary-element-text: #ffffff; - --color-primary-element-hover: #3282ae; - --color-primary-element-light: #e5eff4; - --color-primary-element-light-text: #00273d; - --color-primary-element-light-hover: #dbe4e9; - --color-primary-element-text-dark: #ededed; - --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); -} - -@media (prefers-color-scheme: dark) { - :root { - --color-main-background: #171717; - --color-main-background-not-plain: #0082c9; - --color-main-background-rgb: 23,23,23; - --color-main-background-translucent: rgba(var(--color-main-background-rgb), .97); - --color-main-background-blur: rgba(var(--color-main-background-rgb), .8); - --filter-background-blur: blur(25px); - --gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%; - --color-background-hover: #212121; - --color-background-dark: #292929; - --color-background-darker: #3b3b3b; - --color-placeholder-light: #313131; - --color-placeholder-dark: #4a4a4a; - --color-main-text: #D8D8D8; - --color-text-maxcontrast: #8c8c8c; - --color-text-maxcontrast-default: #8c8c8c; - --color-text-maxcontrast-background-blur: #919191; - --color-text-light: #bfbfbf; - --color-text-lighter: #a5a5a5; - --color-scrollbar: #3d3d3d; - --color-error: #e9322d; - --color-error-rgb: 233,50,45; - --color-error-hover: #ed5a56; - --color-warning: #eca700; - --color-warning-rgb: 236,167,0; - --color-warning-hover: #efb832; - --color-success: #46ba61; - --color-success-rgb: 70,186,97; - --color-success-hover: #6ac780; - --color-loading-light: #777; - --color-loading-dark: #CCC; - --color-box-shadow-rgb: 0,0,0; - --color-box-shadow: #000000; - --color-border: #292929; - --color-border-dark: #3b3b3b; - --font-face: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', Arial, sans-serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; - --default-font-size: 15px; - --animation-quick: 100ms; - --animation-slow: 300ms; - --border-radius: 3px; - --border-radius-large: 10px; - --border-radius-pill: 100px; - --default-clickable-area: 44px; - --default-line-height: 24px; - --default-grid-baseline: 4px; - --header-height: 50px; - --navigation-width: 300px; - --sidebar-min-width: 300px; - --sidebar-max-width: 500px; - --list-min-width: 200px; - --list-max-width: 300px; - --header-menu-item-height: 44px; - --header-menu-profile-item-height: 66px; - --breakpoint-mobile: 1024px; - --primary-invert-if-bright: no; - --background-invert-if-dark: invert(100%); - --background-invert-if-bright: no; - --color-primary: #00639a; - --color-primary-default: #0082c9; - --color-primary-text: #ffffff; - --color-primary-hover: #04537f; - --color-primary-light: #141e24; - --color-primary-light-text: #99c0d6; - --color-primary-light-hover: #1d272d; - --color-primary-text-dark: #ededed; - --color-primary-element: #00639a; - --color-primary-element-text: #ffffff; - --color-primary-element-hover: #04537f; - --color-primary-element-light: #141e24; - --color-primary-element-light-text: #99c0d6; - --color-primary-element-light-hover: #1d272d; - --color-primary-element-text-dark: #ededed; - --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); - } -} \ No newline at end of file