lemniskett/momomail-roundcube-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
root 2024-04-20 18:57:49 +08:00
commit 648045ce49
79 changed files with 16256 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
README.md Normal file
View File

@ -0,0 +1,118 @@
Roundcube Webmail Skin "Elastic"
================================
This skin package contains a theme for the Roundcube Webmail
software. It can be used, modified and redistributed according to
the terms described in the LICENSE section.
For information about building or modifying Roundcube skins please visit
https://github.com/roundcube/roundcubemail/wiki/Skins
LICENSE
-------
The contents of this folder are subject to the Creative Commons
Attribution-ShareAlike License. It is allowed to copy, distribute,
transmit and to adapt the work by keeping credits to the original
authors in the README.md file.
See http://creativecommons.org/licenses/by-sa/3.0/ for details.
This folder also contains code licensed separately:
- Bootstrap Framework 4 from https://github.com/twbs/bootstrap
- FontAwesome 5 fonts from https://fontawesome.com/
- Roboto font from https://google-webfonts-helper.herokuapp.com/fonts/roboto?subsets=cyrillic,latin-ext,cyrillic-ext,latin,greek,greek-ext
INSTALLATION
------------
All styles are written using LESS syntax. Thus it needs to be compiled
using the `lessc` (>= 2.5.2) command line tool. This comes with the `nodejs-less`
RPM package or using `npm install less` which depend on nodejs.
```
$ lessc --clean-css="--s1 --advanced" styles/styles.less > styles/styles.min.css
$ lessc --clean-css="--s1 --advanced" styles/print.less > styles/print.min.css
$ lessc --clean-css="--s1 --advanced" styles/embed.less > styles/embed.min.css
```
(`--clean-css="--s1 --advanced"` minifies the css, requires the clean-css Less plugin.
The plugin can be installed using `npm install less-plugin-clean-css`)
References to image files from the included CSS files can be appended
with cache-buster marks to avoid browser caching issues after updating.
Run `bin/updatecss.sh --dir skins/elastic` before packaging the skin
or after installing it on the destination system.
FOR DEVELOPERS
--------------
- Supported browsers: Last 2 versions of Edge/Chrome/Firefox/Safari.
- Skin color palette changes and other css modifications can be done
via _styles.less and _variables.less files. Where you can overwrite all
variables and add custom styles.
- Minimum supported screen width is 240px (note that even if the device screen
resolution is e.g.320x372 changing the text size in device settings will reduce
the resolution)
- Every page (which is not a frame) has following required structure:
```
<body>
<div id="layout">
<div id="layout-menu"></div>
<div id="layout-sidebar"></div>
<div id="layout-list"></div>
<div id="layout-content"></div>
</div>
</body>
```
where `#layout-sidebar` and `#layout-list` are optional. Which element of the `#layout` will be displayed
as a main view on mobile devices can be defined by adding `selected` class to it.
- The `<html>` element will receive special classes that will be updated on resize
or orientation change:
- `touch`: A touch device, screen width <= 1024px,
- `layout-large`: Screen width > 1200px,
- `layout-normal`: Screen width <= 1200px and >= 768px,
- `layout-small`: Screen width < 768px and > 480px,
- `layout-phone`: Screen width <= 480px.
Frames will have the same classes applied as their parent windows.
- Every button, that is not <button> nor <input> should have inner <span class="inner"> element
for the button label.
- Every iframe need to be wrapped by an element with `iframe-wrapper` class. It is
required to have proper scrolling on mobile devices.
- Special attributes:
- `data-hidden`: Makes a menu entry/button hidden on specified screen sizes.
Can be used for example for functionality not implemented or that has no sense
on phones or touch devices. Contains a comma-separated list following values:
`large` (width > 1200px), `big` (width > 768px), `small` (width =< 768px),
`phone` (width =< 480px), `lbs` (width > 480px).
- `data-content-button`: Makes the action button with this attribute to be copied
to the content frame header on small/phone screens.
- Special URLs:
In phone mode we display Prev/Next navigation buttons below the content preview
frame. We do this e.g. for mail preview or contact preview. Plugins should use
_action=add* or _action=create* or _nav=hide in the frame URL if the navigation
should be hidden, which is the case when you create a content object.
- Dark mode:
In dark mode html element will have `dark-mode` class assigned.
It is possible to disable dark mode using less variable `@dark-mode-enabled`.
Option `dark_mode_support` in meta.json controls addition of the mode switch in the menu.
KNOWN ISSUES
------------
1. There are known issues with running less in Roundcube devel_mode:
- Dialogs executed on page load are displayed out of screen.
- CodeMirror editor (in managesieve raw script editing mode) is broken.

6
deps/bootstrap.bundle.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

6
deps/bootstrap.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

17
deps/less.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
fonts/fa-regular-400.woff Normal file
View File

Binary file not shown.

BIN
fonts/fa-regular-400.woff2 Normal file
View File

Binary file not shown.

BIN
fonts/fa-solid-900.woff Normal file
View File

Binary file not shown.

BIN
fonts/fa-solid-900.woff2 Normal file
View File

Binary file not shown.

BIN
images/arona.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 116 KiB

5
images/bg.svg Normal file
View File

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="512" height="512" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs/>
<path d="M 230.564 57.211 C 229.228 57.394 225.219 57.929 221.656 58.399 C 212.953 59.548 193.479 64.005 183.559 67.12 C 132.273 83.224 87.484 122.108 63.276 171.546 C 56.832 184.705 54.055 192.253 50.096 207.37 C 45.195 226.087 43.787 235.744 43.321 253.843 C 42.822 273.183 44.048 285.13 48.457 303.913 C 55.254 332.861 65.147 354.332 82.7 378.224 C 105.073 408.678 138.012 433.77 173.466 447.367 C 186.631 452.415 210.659 458.249 227.729 460.542 C 237.053 461.794 260.667 462.353 264.171 461.405 C 265.729 460.983 271.378 460.073 276.723 459.383 C 282.067 458.692 292.271 456.709 299.397 454.975 C 317.309 450.616 326.671 447.33 340.562 440.526 C 383.292 419.596 418.254 384.064 437.445 342.062 C 443.84 328.065 449.461 309.066 453.317 288.415 C 455.347 277.541 455.812 248.178 454.149 235.793 C 451.616 216.922 445.496 194.453 438.499 178.339 C 416.443 127.543 369.028 84.535 316.403 67.59 C 307.299 64.658 290.743 60.667 279.152 58.61 C 272.926 57.506 236.136 56.446 230.564 57.211 M 231.373 76.622 C 187.863 81.376 150.706 98.153 120.506 126.679 C 88.548 156.867 70.289 192.43 63.99 236.755 C 61.595 253.61 63.144 282.459 67.408 300.418 C 84.409 372.015 144.027 427.111 217.71 439.32 C 253.82 445.303 288.381 441.371 322.309 427.42 C 372.58 406.75 412.967 362.336 428.115 311.066 C 433.72 292.096 435.423 279.722 435.389 258.214 C 435.363 241.552 434.365 231.822 431.356 218.906 C 414.237 145.41 353.652 89.674 278.342 78.138 C 266.344 76.3 241.619 75.502 231.373 76.622 M 177.27 101.538 C 177.037 102.134 169.163 113.957 159.773 127.81 C 150.382 141.663 142.7 153.156 142.7 153.349 C 142.7 153.543 158.327 153.702 177.426 153.702 L 212.152 153.702 L 195.405 178.538 C 186.194 192.199 178.394 203.8 178.072 204.32 C 177.728 204.876 181.106 210.607 186.271 218.229 C 194.816 230.837 240.987 299.767 244.838 305.665 C 245.895 307.284 247.108 308.512 247.533 308.392 C 247.958 308.273 256.277 296.582 266.019 282.412 C 283.307 257.264 283.701 256.6 282.526 254.649 C 280.568 251.399 215.777 155.78 214.801 154.7 C 214.089 153.911 227.996 153.669 283.151 153.508 L 352.395 153.304 L 334.527 126.878 L 316.661 100.452 L 247.178 100.452 C 189.204 100.452 177.624 100.632 177.27 101.538 M 281.177 156.486 C 281.177 157.229 316.257 208.541 316.737 208.499 C 316.998 208.477 319.377 205.168 322.023 201.148 C 324.669 197.127 332.261 185.833 338.893 176.05 C 345.525 166.266 351.144 157.772 351.378 157.174 C 351.733 156.263 346.045 156.086 316.49 156.086 C 297.067 156.086 281.177 156.265 281.177 156.486 M 266.704 285.268 C 256.449 300.518 249.581 311.477 249.849 312.162 C 250.098 312.798 257.98 324.614 267.365 338.42 L 284.429 363.521 L 250.822 363.521 L 217.216 363.521 L 199.834 337.691 C 190.274 323.484 182.163 311.864 181.809 311.867 C 180.693 311.878 147.213 362.251 147.213 363.918 C 147.213 364.792 154.987 377.041 164.488 391.139 L 181.764 416.77 L 251.223 416.77 L 320.681 416.77 L 321.19 414.783 C 321.469 413.691 322.055 412.797 322.492 412.797 C 322.929 412.797 323.286 412.424 323.286 411.968 C 323.286 411.511 327.203 405.342 331.992 398.258 C 336.78 391.173 340.845 385.033 341.024 384.612 C 341.204 384.191 343.118 381.418 345.276 378.45 C 347.434 375.481 349.2 372.726 349.2 372.327 C 349.2 371.928 349.473 371.482 349.807 371.336 C 350.141 371.19 351.53 369.459 352.893 367.487 L 355.371 363.903 L 349.818 355.565 C 342.859 345.116 326.591 320.868 303.3 286.229 C 293.38 271.477 284.982 259.434 284.638 259.468 C 284.293 259.502 276.223 271.112 266.704 285.268" stroke="none" fill="#888888" fill-rule="evenodd" style=""/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

3
images/contactgroup.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
<path d="M133.5 273.5c30.3 0 55-24.7 55-55s-24.7-55-55-55-55 24.7-55 55 24.7 55 55 55zm385 0c30.3 0 55-24.7 55-55s-24.7-55-55-55-55 24.7-55 55 24.7 55 55 55zM546 301h-55c-15.1 0-28.8 6.1-38.8 16 34.6 19 59.2 53.3 64.5 94h56.7c15.2 0 27.5-12.3 27.5-27.5V356c.1-30.3-24.6-55-54.9-55zm-220 0c53.2 0 96.2-43.1 96.2-96.2s-43.1-96.2-96.2-96.2-96.2 43.1-96.2 96.2 43 96.2 96.2 96.2zm66 27.5h-7.1c-17.9 8.6-37.7 13.8-58.9 13.8s-40.9-5.2-58.9-13.8H260c-54.7 0-99 44.3-99 99v24.8c0 22.8 18.5 41.2 41.2 41.2h247.5c22.8 0 41.2-18.5 41.2-41.2v-24.8c.1-54.7-44.2-99-98.9-99zM199.8 317c-10-9.9-23.6-16-38.8-16h-55c-30.3 0-55 24.7-55 55v27.5c0 15.2 12.3 27.5 27.5 27.5h56.6c5.4-40.7 30-75 64.7-94z" fill="#ccc"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 769 B

3
images/contactpic.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M256 246c50.5 0 91.4-40.9 91.4-91.4S306.5 63.1 256 63.1s-91.4 40.9-91.4 91.4S205.5 246 256 246zm64 22.9h-11.9c-15.9 7.3-33.5 11.4-52.1 11.4s-36.1-4.1-52.1-11.4H192c-53 0-96 43-96 96v29.7c0 18.9 15.4 34.3 34.3 34.3h251.4c18.9 0 34.3-15.4 34.3-34.3v-29.7c0-53-43-96-96-96z" fill="#ccc"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 367 B

3
images/corner-handle.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path fill="#888" d="M6.7 16L16 6.7V5.3L5.3 16zM9.7 16L16 9.7V8.3L8.3 16zM12.7 16l3.3-3.3v-1.4L11.3 16zM15.7 16l.3-.3v-1.4L14.3 16z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 205 B

3
images/download.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 560">
<path fill="#d4dbde" d="M690 245c0 9.2-3.5 17.9-10.1 24.9l-175 175c-6.6 6.6-15.3 10.1-24.9 10.1-9.2 0-18.4-3.5-24.9-10.1l-175-175c-6.6-7-10.1-15.8-10.1-24.9 0-4.4.9-9.2 2.6-13.6C277.9 218.3 291 210 305 210h87.5V35c0-19.2 15.8-35 35-35h105c19.2 0 35 15.8 35 35v175H655c14 0 27.1 8.3 32.4 21.4 1.7 4.4 2.6 9.2 2.6 13.6zm0 245H270V350h-70v140c0 38.5 31.5 70 70 70h420c38.5 0 70-31.5 70-70V350h-70v140z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 472 B

BIN
images/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

1
images/google-icon.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="#4285F4" d="M45.12 24.5c0-1.56-.14-3.06-.4-4.5H24v8.51h11.84c-.51 2.75-2.06 5.08-4.39 6.64v5.52h7.11c4.16-3.83 6.56-9.47 6.56-16.17z"></path><path fill="#34A853" d="M24 46c5.94 0 10.92-1.97 14.56-5.33l-7.11-5.52c-1.97 1.32-4.49 2.1-7.45 2.1-5.73 0-10.58-3.87-12.31-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46z"></path><path fill="#FBBC05" d="M11.69 28.18C11.25 26.86 11 25.45 11 24s.25-2.86.69-4.18v-5.7H4.34C2.85 17.09 2 20.45 2 24c0 3.55.85 6.91 2.34 9.88l7.35-5.7z"></path><path fill="#EA4335" d="M24 10.75c3.23 0 6.13 1.11 8.41 3.29l6.31-6.31C34.91 4.18 29.93 2 24 2 15.4 2 7.96 6.93 4.34 14.12l7.35 5.7c1.73-5.2 6.58-9.07 12.31-9.07z"></path><path fill="none" d="M2 2h44v44H2z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 764 B

5
images/login.svg Normal file
View File

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="512" height="512" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs/>
<path d="M 230.564 57.211 C 229.228 57.394 225.219 57.929 221.656 58.399 C 212.953 59.548 193.479 64.005 183.559 67.12 C 132.273 83.224 87.484 122.108 63.276 171.546 C 56.832 184.705 54.055 192.253 50.096 207.37 C 45.195 226.087 43.787 235.744 43.321 253.843 C 42.822 273.183 44.048 285.13 48.457 303.913 C 55.254 332.861 65.147 354.332 82.7 378.224 C 105.073 408.678 138.012 433.77 173.466 447.367 C 186.631 452.415 210.659 458.249 227.729 460.542 C 237.053 461.794 260.667 462.353 264.171 461.405 C 265.729 460.983 271.378 460.073 276.723 459.383 C 282.067 458.692 292.271 456.709 299.397 454.975 C 317.309 450.616 326.671 447.33 340.562 440.526 C 383.292 419.596 418.254 384.064 437.445 342.062 C 443.84 328.065 449.461 309.066 453.317 288.415 C 455.347 277.541 455.812 248.178 454.149 235.793 C 451.616 216.922 445.496 194.453 438.499 178.339 C 416.443 127.543 369.028 84.535 316.403 67.59 C 307.299 64.658 290.743 60.667 279.152 58.61 C 272.926 57.506 236.136 56.446 230.564 57.211 M 231.373 76.622 C 187.863 81.376 150.706 98.153 120.506 126.679 C 88.548 156.867 70.289 192.43 63.99 236.755 C 61.595 253.61 63.144 282.459 67.408 300.418 C 84.409 372.015 144.027 427.111 217.71 439.32 C 253.82 445.303 288.381 441.371 322.309 427.42 C 372.58 406.75 412.967 362.336 428.115 311.066 C 433.72 292.096 435.423 279.722 435.389 258.214 C 435.363 241.552 434.365 231.822 431.356 218.906 C 414.237 145.41 353.652 89.674 278.342 78.138 C 266.344 76.3 241.619 75.502 231.373 76.622 M 177.27 101.538 C 177.037 102.134 169.163 113.957 159.773 127.81 C 150.382 141.663 142.7 153.156 142.7 153.349 C 142.7 153.543 158.327 153.702 177.426 153.702 L 212.152 153.702 L 195.405 178.538 C 186.194 192.199 178.394 203.8 178.072 204.32 C 177.728 204.876 181.106 210.607 186.271 218.229 C 194.816 230.837 240.987 299.767 244.838 305.665 C 245.895 307.284 247.108 308.512 247.533 308.392 C 247.958 308.273 256.277 296.582 266.019 282.412 C 283.307 257.264 283.701 256.6 282.526 254.649 C 280.568 251.399 215.777 155.78 214.801 154.7 C 214.089 153.911 227.996 153.669 283.151 153.508 L 352.395 153.304 L 334.527 126.878 L 316.661 100.452 L 247.178 100.452 C 189.204 100.452 177.624 100.632 177.27 101.538 M 281.177 156.486 C 281.177 157.229 316.257 208.541 316.737 208.499 C 316.998 208.477 319.377 205.168 322.023 201.148 C 324.669 197.127 332.261 185.833 338.893 176.05 C 345.525 166.266 351.144 157.772 351.378 157.174 C 351.733 156.263 346.045 156.086 316.49 156.086 C 297.067 156.086 281.177 156.265 281.177 156.486 M 266.704 285.268 C 256.449 300.518 249.581 311.477 249.849 312.162 C 250.098 312.798 257.98 324.614 267.365 338.42 L 284.429 363.521 L 250.822 363.521 L 217.216 363.521 L 199.834 337.691 C 190.274 323.484 182.163 311.864 181.809 311.867 C 180.693 311.878 147.213 362.251 147.213 363.918 C 147.213 364.792 154.987 377.041 164.488 391.139 L 181.764 416.77 L 251.223 416.77 L 320.681 416.77 L 321.19 414.783 C 321.469 413.691 322.055 412.797 322.492 412.797 C 322.929 412.797 323.286 412.424 323.286 411.968 C 323.286 411.511 327.203 405.342 331.992 398.258 C 336.78 391.173 340.845 385.033 341.024 384.612 C 341.204 384.191 343.118 381.418 345.276 378.45 C 347.434 375.481 349.2 372.726 349.2 372.327 C 349.2 371.928 349.473 371.482 349.807 371.336 C 350.141 371.19 351.53 369.459 352.893 367.487 L 355.371 363.903 L 349.818 355.565 C 342.859 345.116 326.591 320.868 303.3 286.229 C 293.38 271.477 284.982 259.434 284.638 259.468 C 284.293 259.502 276.223 271.112 266.704 285.268" stroke="none" fill="#128afa" fill-rule="evenodd" style=""/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

5
images/logo.svg Normal file
View File

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="512" height="512" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs/>
<path d="M 230.564 57.211 C 229.228 57.394 225.219 57.929 221.656 58.399 C 212.953 59.548 193.479 64.005 183.559 67.12 C 132.273 83.224 87.484 122.108 63.276 171.546 C 56.832 184.705 54.055 192.253 50.096 207.37 C 45.195 226.087 43.787 235.744 43.321 253.843 C 42.822 273.183 44.048 285.13 48.457 303.913 C 55.254 332.861 65.147 354.332 82.7 378.224 C 105.073 408.678 138.012 433.77 173.466 447.367 C 186.631 452.415 210.659 458.249 227.729 460.542 C 237.053 461.794 260.667 462.353 264.171 461.405 C 265.729 460.983 271.378 460.073 276.723 459.383 C 282.067 458.692 292.271 456.709 299.397 454.975 C 317.309 450.616 326.671 447.33 340.562 440.526 C 383.292 419.596 418.254 384.064 437.445 342.062 C 443.84 328.065 449.461 309.066 453.317 288.415 C 455.347 277.541 455.812 248.178 454.149 235.793 C 451.616 216.922 445.496 194.453 438.499 178.339 C 416.443 127.543 369.028 84.535 316.403 67.59 C 307.299 64.658 290.743 60.667 279.152 58.61 C 272.926 57.506 236.136 56.446 230.564 57.211 M 231.373 76.622 C 187.863 81.376 150.706 98.153 120.506 126.679 C 88.548 156.867 70.289 192.43 63.99 236.755 C 61.595 253.61 63.144 282.459 67.408 300.418 C 84.409 372.015 144.027 427.111 217.71 439.32 C 253.82 445.303 288.381 441.371 322.309 427.42 C 372.58 406.75 412.967 362.336 428.115 311.066 C 433.72 292.096 435.423 279.722 435.389 258.214 C 435.363 241.552 434.365 231.822 431.356 218.906 C 414.237 145.41 353.652 89.674 278.342 78.138 C 266.344 76.3 241.619 75.502 231.373 76.622 M 177.27 101.538 C 177.037 102.134 169.163 113.957 159.773 127.81 C 150.382 141.663 142.7 153.156 142.7 153.349 C 142.7 153.543 158.327 153.702 177.426 153.702 L 212.152 153.702 L 195.405 178.538 C 186.194 192.199 178.394 203.8 178.072 204.32 C 177.728 204.876 181.106 210.607 186.271 218.229 C 194.816 230.837 240.987 299.767 244.838 305.665 C 245.895 307.284 247.108 308.512 247.533 308.392 C 247.958 308.273 256.277 296.582 266.019 282.412 C 283.307 257.264 283.701 256.6 282.526 254.649 C 280.568 251.399 215.777 155.78 214.801 154.7 C 214.089 153.911 227.996 153.669 283.151 153.508 L 352.395 153.304 L 334.527 126.878 L 316.661 100.452 L 247.178 100.452 C 189.204 100.452 177.624 100.632 177.27 101.538 M 281.177 156.486 C 281.177 157.229 316.257 208.541 316.737 208.499 C 316.998 208.477 319.377 205.168 322.023 201.148 C 324.669 197.127 332.261 185.833 338.893 176.05 C 345.525 166.266 351.144 157.772 351.378 157.174 C 351.733 156.263 346.045 156.086 316.49 156.086 C 297.067 156.086 281.177 156.265 281.177 156.486 M 266.704 285.268 C 256.449 300.518 249.581 311.477 249.849 312.162 C 250.098 312.798 257.98 324.614 267.365 338.42 L 284.429 363.521 L 250.822 363.521 L 217.216 363.521 L 199.834 337.691 C 190.274 323.484 182.163 311.864 181.809 311.867 C 180.693 311.878 147.213 362.251 147.213 363.918 C 147.213 364.792 154.987 377.041 164.488 391.139 L 181.764 416.77 L 251.223 416.77 L 320.681 416.77 L 321.19 414.783 C 321.469 413.691 322.055 412.797 322.492 412.797 C 322.929 412.797 323.286 412.424 323.286 411.968 C 323.286 411.511 327.203 405.342 331.992 398.258 C 336.78 391.173 340.845 385.033 341.024 384.612 C 341.204 384.191 343.118 381.418 345.276 378.45 C 347.434 375.481 349.2 372.726 349.2 372.327 C 349.2 371.928 349.473 371.482 349.807 371.336 C 350.141 371.19 351.53 369.459 352.893 367.487 L 355.371 363.903 L 349.818 355.565 C 342.859 345.116 326.591 320.868 303.3 286.229 C 293.38 271.477 284.982 259.434 284.638 259.468 C 284.293 259.502 276.223 271.112 266.704 285.268" stroke="none" fill="#ffffff" fill-rule="evenodd" style=""/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

8
images/microsoft-icon.svg Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 116 116" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1,0,0,1,-22.0613,-141.704)"><path d="M26.088,145.515L77.643,145.515L77.639,197.07L26.088,197.07L26.088,145.515Z" style="fill:rgb(246,83,20);"/></g>
<g transform="matrix(1,0,0,1,-22.0613,-141.704)"><path d="M82.907,145.515L134.462,145.515C134.462,162.7 134.465,179.885 134.459,197.07C117.277,197.067 100.092,197.07 82.91,197.07C82.904,179.885 82.907,162.7 82.907,145.515Z" style="fill:rgb(127,187,65);"/></g>
<g transform="matrix(1,0,0,1,-22.0613,-141.704)"><path d="M26.088,202.331C43.273,202.337 60.458,202.329 77.643,202.337C77.646,219.522 77.643,236.704 77.643,253.889L26.088,253.889L26.088,202.331Z" style="fill:rgb(0,161,241);"/></g>
<g transform="matrix(1,0,0,1,-22.0613,-141.704)"><path d="M82.91,202.337C100.092,202.331 117.277,202.334 134.462,202.334L134.462,253.889L82.907,253.889C82.91,236.704 82.904,219.519 82.91,202.337Z" style="fill:rgb(255,187,0);"/></g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

21
meta.json Normal file
View File

@ -0,0 +1,21 @@
{
"name": "Blue Archive",
"author": "Syahrial Agni Prasetya",
"license": "Creative Commons Attribution-ShareAlike",
"license-url": "http://creativecommons.org/licenses/by-sa/3.0/",
"config": {
"supported_layouts": ["widescreen"],
"jquery_ui_colors_theme": "bootstrap",
"embed_css_location": "/styles/embed.css",
"editor_css_location": "/styles/embed.css",
"dark_mode_support": true,
"media_browser_css_location": "none",
"additional_logo_types": ["small"],
"dark_mode_support": false
},
"meta": {
"viewport": "width=device-width, initial-scale=1.0, shrink-to-fit=no, maximum-scale=1.0",
"theme-color": "#128afa",
"msapplication-navbutton-color": "#128afa"
}
}

1
styles.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

280
styles/colors.less Normal file
View File

@ -0,0 +1,280 @@
/**
* Roundcube Webmail styles for the Elastic skin
*
* Copyright (c) The Roundcube Dev Team
*
* The contents are subject to the Creative Commons Attribution-ShareAlike
* License. It is allowed to copy, distribute, transmit and to adapt the work
* by keeping credits to the original authors in the README.md file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
@color-main: #128afa;
@color-main-dark: darken(@color-main, 35%);
@color-black: #161b1d;
@color-font: lighten(@color-black, 10%);
@color-link: #336ca5;
@color-link-hover: darken(@color-link, 10%);
@color-border: #ddd;
@color-error: #ff5552;
@color-success: #41b849;
@color-warning: #ffd452;
@color-black-shade-text: tint(@color-black, 40%);
@color-black-shade-border: lighten(@color-black, 82%);
@color-black-shade-bg: lighten(@color-black, 87%);
// Layout elements
@color-layout-border: @color-black-shade-border;
@color-layout-header: @color-font;
@color-layout-sidebar-background: #fff;
@color-layout-list-background: #fff;
@color-layout-content-background: #fff;
@color-layout-header-background: #fff;
@color-layout-footer-background: #fff;
@color-layout-mobile-header-background: @color-layout-header-background;
@color-layout-mobile-footer-background: @color-layout-header-background;
// Task menu
@color-taskmenu-background: #128afa;
@color-taskmenu-button: #fff;
@color-taskmenu-button-selected: @color-taskmenu-button;
@color-taskmenu-button-action: #fff;
@color-taskmenu-button-selected-background: lighten(@color-taskmenu-background, 10%);
@color-taskmenu-button-action-background: transparent;
@color-taskmenu-button-hover: #fff;
@color-taskmenu-button-selected-hover: #fff;
@color-taskmenu-button-action-hover: #fff;
@color-taskmenu-button-background-hover: lighten(@color-taskmenu-background, 10%);
@color-taskmenu-button-action-background-hover: @color-taskmenu-button-background-hover;
@color-taskmenu-button-logout: #fff;
@color-taskmenu-button-logout-hover: #fff;
// Toolbar
@color-toolbar-button: @color-font;
@color-toolbar-button-background-hover: darken(@color-layout-header-background, 3%);
@color-searchbar-background: #fbfbfb;
// Toolbar menu
@color-menu-hover: #fff;
@color-menu-hover-background: @color-main;
// Listings
@color-list: @color-font;
@color-list-selected: @color-font;
//@color-list-selected-background: tint(@color-main, 90%);
@color-list-selected-background: @color-black-shade-border;
@color-list-flagged: @color-error;
@color-list-deleted: fadeout(@color-font, 50%);
@color-list-secondary: @color-black-shade-text;
@color-list-droptarget-background: #ffffcc;
@color-list-focus-indicator: lighten(@color-main, 20%);
@color-list-border: @color-black-shade-bg;
@color-list-badge: #fff;
@color-list-badge-background: @color-main;
@color-list-recent: darken(@color-main, 20%);
@color-list-recent-badge: #fff;
@color-list-recent-badge-background: @color-main;
@color-list-pagenav: @color-black-shade-text;
@color-list-icon: fadeout(@color-list-secondary, 25%);
@color-list-unread-status: @color-warning;
@color-attachmentlist-border: #f4f4f4;
@color-attachmentlist-background: #fcfcfc;
// Drag-n-drop layer
@color-drag-layer: #fff;
@color-drag-layer-background: @color-taskmenu-background;
@color-drag-layer-shadow: @color-black-shade-bg;
// Messages
@color-message: @color-font;
@color-message-border: transparent;
@color-message-background: fadeout(@color-main, 95%);
@color-message-text: #fff;
@color-message-link: @color-main;
@color-message-link-font-weight: normal;
@color-message-information: @color-main;
@color-message-success: @color-success;
@color-message-warning: @color-warning;
@color-message-error: @color-error;
@color-message-loading: tint(@color-font, 30%);
@color-message-information-text: @color-message-text;
@color-message-success-text: @color-message-text;
@color-message-warning-text: @color-message;
@color-message-error-text: @color-message-text;
@color-message-loading-text: @color-message-text;
@color-message-error-box: @color-message;
@color-message-information-box: @color-message;
@color-message-success-box: @color-message;
@color-message-warning-box: @color-message;
@color-message-error-box-background: fadeout(@color-message-error, 80%);
@color-message-information-box-background: fadeout(@color-message-information, 80%);
@color-message-success-box-background: fadeout(@color-message-success, 80%);
@color-message-warning-box-background: fadeout(@color-message-warning, 80%);
// Popovers (menus)
@color-popover-shadow: @color-black-shade-bg;
@color-popover-separator: @color-black-shade-text;
@color-popover-separator-background: @color-black-shade-bg;
@color-popover-mobile-header: #fff;
@color-popover-mobile-header-background: @color-main;
@color-popover-mobile-dropbutton-background: #f6f6f6;
// Dialogs
@color-dialog-overlay-background: fade(@color-font, 50%);
@color-dialog-header: @color-layout-header;
@color-dialog-header-border: @color-border;
@color-spinner-circle: @color-black-shade-bg;
@color-spinner-item: @color-black-shade-text;
// Forms
@color-input: @color-font;
@color-input-border: #ced4da; // from Bootstrap's .form-control
@color-input-border-focus: @color-main;
@color-input-border-focus-shadow: fadeout(@color-main, 75);
@color-input-border-invalid: @color-error;
@color-input-border-invalid-shadow: fadeout(@color-error, 75);
@color-input-addon-background: @color-black-shade-bg;
@color-recipient-input-border: @color-input-border;
@color-recipient-input-background: @color-black-shade-bg;
@color-input-placeholder: #bbb;
@color-checkbox: @color-main;
@color-checkbox-checked: @color-main;
@color-checkbox-checked-disabled: lighten(@color-main, 15%);
@color-checkbox-focus: @color-input-border-focus;
@color-checkbox-focus-shadow: @color-input-border-focus-shadow;
@color-form-hint: @color-black-shade-text;
@color-image-upload-background: #f4f4f4;
@color-btn-secondary: #fff;
@color-btn-secondary-background: lighten(@color-black, 50%);
@color-btn-primary: #fff;
@color-btn-primary-background: @color-main;
@color-btn-danger: #fff;
@color-btn-danger-background: @color-error;
@color-quota-background: #fff;
@color-quota-text: @color-black-shade-text;
@color-quota-value: @color-main;
@color-quota-value-warning: @color-error;
@color-blockquote-background: fadeout(@color-black-shade-bg, 50%);
@color-blockquote-0: darken(@color-main, 30%);
@color-blockquote-1: darken(@color-success, 25%);
@color-blockquote-2: darken(@color-error, 20%);
@color-blockquote-0-border: @color-blockquote-0;
@color-blockquote-1-border: @color-blockquote-1;
@color-blockquote-2-border: @color-blockquote-2;
@color-mail-signature: @color-black-shade-text;
@color-mail-headers: @color-black-shade-text;
@color-messagepart-border: #f4f4f4;
@color-messagepart-background: #fcfcfc;
@color-spellcheck-link: @color-error;
@color-table-border: @color-layout-border;
@color-table-selected: @color-list-selected;
@color-table-selected-background: @color-list-selected-background;
// Datepicker
@color-datepicker-border: @color-layout-border;
@color-datepicker-font: @color-font;
@color-datepicker-highlight: @color-main;
@color-datepicker-highlight-background: lighten(@color-main, 30%);
@color-datepicker-active: #fff;
@color-datepicker-active-background: @color-main;
// HTML editor
@color-editor-disabled-mask: fadeout(lighten(@color-black, 85), 10);
// Image tools
@color-image-tools: #fff;
@color-image-tools-background: fadeout(@color-main, 60%);
@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;
@color-dark-font: #c5d1d3;
@color-dark-border: #4d6066;
@color-dark-hint: darken(@color-dark-font, 20%);
@color-dark-information: shade(@color-main, 40%);
@color-dark-success: shade(@color-success, 40%);
@color-dark-warning: shade(@color-warning, 40%);
@color-dark-error: shade(@color-error, 40%);
@color-dark-list-selected: @color-main;
@color-dark-list-selected-background: #374549;
@color-dark-list-badge: lighten(@color-dark-font, 10%);
@color-dark-list-badge-background: @color-dark-border;
@color-dark-list-deleted: darken(@color-dark-hint, 15%);
@color-dark-list-droptarget-background: #4d4d00;
@color-dark-list-border: #2c373a;
@color-dark-input: @color-dark-font;
@color-dark-input-border: #7c949c;
@color-dark-input-background: @color-dark-background;
@color-dark-input-focus: #e2e7e9;
@color-dark-input-border-focus: @color-main;
@color-dark-input-background-focus: lighten(@color-dark-background, 5%);
@color-dark-input-addon-background: #374549;
@color-dark-input-addon-background-focus: lighten(@color-dark-list-selected-background, 15%);
@color-dark-checkbox: @color-dark-border;
@color-dark-checkbox-checked: @color-dark-main;
@color-dark-btn: lighten(@color-dark-font, 10%);
@color-dark-btn-primary-background: @color-dark-main;
@color-dark-btn-secondary-background: @color-dark-border;
@color-dark-btn-danger-background: @color-dark-error;
@color-dark-dialog-overlay-background: fade(black, 70%);
@color-dark-popover-background: #161b1d;
@color-dark-popover-border: lighten(#161b1d, 50%);
@color-dark-message-information: @color-dark-information;
@color-dark-message-success: @color-dark-success;
@color-dark-message-warning: @color-dark-warning;
@color-dark-message-error: @color-dark-error;
@color-dark-message-loading: lighten(@color-dark-background, 10%);
@color-dark-scrollbar-thumb: darken(@color-main, 25%);
@color-dark-scrollbar-track: @color-dark-border;
@color-dark-blockquote-0: lighten(@color-main, 10%);
@color-dark-blockquote-1: lighten(@color-success, 10%);
@color-dark-blockquote-2: lighten(@color-error, 10%);
@color-dark-blockquote-0-border: @color-dark-blockquote-0;
@color-dark-blockquote-1-border: @color-dark-blockquote-1;
@color-dark-blockquote-2-border: @color-dark-blockquote-2;

1123
styles/dark.less Normal file
View File

File diff suppressed because it is too large Load Diff

95
styles/embed.less Normal file
View File

@ -0,0 +1,95 @@
/**
* Roundcube Webmail styles for the Elastic skin
*
* Copyright (c) The Roundcube Dev Team
*
* The contents are subject to the Creative Commons Attribution-ShareAlike
* License. It is allowed to copy, distribute, transmit and to adapt the work
* by keeping credits to the original authors in the README.md file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
/* Style for embedded pages and TinyMCE editor content page */
@import "global";
.mce-content-body {
margin: 4px;
color: @color-input;
div.pre {
font-family: monospace;
}
blockquote {
border-left: #1010ff 2px solid;
margin: 0;
padding: 0 0.4em;
}
}
.rcmail-inline-message {
.font-family();
font-size: @page-font-size;
padding: .5em;
margin: 0 0 .5em 0;
opacity: .95;
color: @color-message;
background-color: @color-message-warning-box-background;
display: flex;
align-items: center;
&:before {
.font-icon-class();
font-size: 1.5em;
line-height: 1;
width: 1em;
margin-right: .3em;
content: @fa-var-exclamation-triangle;
color: @color-message-warning;
}
span {
line-height: 1.5;
}
a {
color: @color-link;
}
a:hover {
color: @color-link-hover;
}
button {
vertical-align: middle;
white-space: nowrap;
padding: .375em .75em;
margin-left: .5em;
font-size: 1em;
line-height: 1.5;
border-radius: .25em;
border: 1px solid transparent;
color: @color-btn-primary;
background: @color-btn-primary-background;
&:focus {
box-shadow: 0 0 0 .2rem fade(@color-btn-primary-background, 50%);
}
&:hover {
background: darken(@color-btn-primary-background, 8%);
border-color: darken(@color-btn-primary-background, 10%);
}
&:not([disabled]):not(.disabled):active {
background: darken(@color-btn-primary-background, 11%);
border-color: darken(@color-btn-primary-background, 13%);
box-shadow: 0 0 0 .2rem fade(@color-btn-primary-background, 53%);
}
}
}
.rcmail-inline-buttons {
margin: 0;
}

1
styles/embed.min.css vendored Normal file
View File

@ -0,0 +1 @@
.popover,.rcmail-inline-message,body,button,input,optgroup,select,textarea{font-family:Roboto,sans-serif}@font-face{font-family:Icons;font-style:normal;font-weight:900;src:url(../fonts/fa-solid-900.woff2) format('woff2'),url(../fonts/fa-solid-900.woff) format('woff')}@font-face{font-family:Icons;font-style:normal;font-weight:400;src:url(../fonts/fa-regular-400.woff2) format('woff2'),url(../fonts/fa-regular-400.woff) format('woff')}@font-face{font-family:Roboto;font-style:normal;font-weight:400;src:local('Roboto'),local('Roboto-Regular'),url(../fonts/roboto-v29-regular.woff2) format('woff2'),url(../fonts/roboto-v29-regular.woff) format('woff')}@font-face{font-family:Roboto;font-style:italic;font-weight:400;src:local('Roboto Italic'),local('Roboto-Italic'),url(../fonts/roboto-v29-italic.woff2) format('woff2'),url(../fonts/roboto-v29-italic.woff) format('woff')}@font-face{font-family:Roboto;font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(../fonts/roboto-v29-regular-700.woff2) format('woff2'),url(../fonts/roboto-v29-regular-700.woff) format('woff')}@font-face{font-family:Roboto;font-style:italic;font-weight:700;src:local('Roboto Bold Italic'),local('Roboto-BoldItalic'),url(../fonts/roboto-v29-italic-700.woff2) format('woff2'),url(../fonts/roboto-v29-italic-700.woff) format('woff')}button,input,select,textarea{line-height:initial}input{vertical-align:middle}a{color:#00acff}a:hover{color:#008acc}a.disabled{pointer-events:none}a.disabled:not(.btn){opacity:.5}html:not(.touch) ::-webkit-scrollbar{width:6px}html{scrollbar-color:#c1c1c1 #f1f1f1}html:not(.touch) ::-webkit-scrollbar-track{background-color:#f1f1f1}html:not(.touch) ::-webkit-scrollbar-thumb{background-color:#c1c1c1}.mce-content-body{margin:4px;color:#2c363a}.mce-content-body div.pre{font-family:monospace}.mce-content-body blockquote{border-left:#1010ff 2px solid;margin:0;padding:0 .4em}.rcmail-inline-message{font-size:14px;padding:.5em;margin:0 0 .5em;opacity:.95;color:#2c363a;background-color:rgba(255,212,82,.2);display:flex;align-items:center}.rcmail-inline-message:before{display:block;float:left;margin:0 .3em 0 0;height:1em;font-family:Icons;font-style:normal;font-weight:900;text-decoration:inherit;text-align:center;speak:none;font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:1.5em;line-height:1;width:1em;content:"\f071";color:#ffd452}.rcmail-inline-message span{line-height:1.5}.rcmail-inline-message a{color:#00acff}.rcmail-inline-message a:hover{color:#008acc}.rcmail-inline-message button{vertical-align:middle;white-space:nowrap;padding:.375em .75em;margin-left:.5em;font-size:1em;line-height:1.5;border-radius:.25em;border:1px solid transparent;color:#fff;background:#37beff}.rcmail-inline-message button:focus{box-shadow:0 0 0 .2rem rgba(55,190,255,.5)}.rcmail-inline-message button:hover{background:#0eb1ff;border-color:#04adff}.rcmail-inline-message button:not([disabled]):not(.disabled):active{background:#00abfe;border-color:#00a4f4;box-shadow:0 0 0 .2rem rgba(55,190,255,.53)}.rcmail-inline-buttons{margin:0}

1397
styles/fontawesome.less vendored Normal file
View File

File diff suppressed because it is too large Load Diff

149
styles/global.less Normal file
View File

@ -0,0 +1,149 @@
/**
* Roundcube Webmail styles for the Elastic skin
*
* Copyright (c) The Roundcube Dev Team
*
* The contents are subject to the Creative Commons Attribution-ShareAlike
* License. It is allowed to copy, distribute, transmit and to adapt the work
* by keeping credits to the original authors in the README.md file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
@import (reference) "variables";
@import (reference) "mixins";
/*** Fonts ***/
@font-face {
font-family: 'Icons';
font-style: normal;
font-weight: 900;
src: url("../fonts/fa-solid-900.woff2") format('woff2'),
url("../fonts/fa-solid-900.woff") format('woff');
}
@font-face {
font-family: 'Icons';
font-style: normal;
font-weight: 400;
src: url("../fonts/fa-regular-400.woff2") format('woff2'),
url("../fonts/fa-regular-400.woff") format('woff');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'),
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-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-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-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 */
body, button, input, optgroup, select, textarea, .popover {
.font-family();
}
button, input, select, textarea {
line-height: initial;
}
input {
vertical-align: middle;
}
a {
color: @color-link;
&:hover {
color: @color-link-hover;
}
&.disabled {
pointer-events: none;
}
&.disabled:not(.btn) {
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;
}
}
}

414
styles/layout.less Normal file
View File

@ -0,0 +1,414 @@
/**
* Roundcube Webmail styles for the Elastic skin
*
* Copyright (c) The Roundcube Dev Team
*
* The contents are subject to the Creative Commons Attribution-ShareAlike
* License. It is allowed to copy, distribute, transmit and to adapt the work
* by keeping credits to the original authors in the README.md file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
/*** Responsive design - Layout ***/
/*
- Large screen (width > 1200px)
-----------------------------------------------------------------------------------------------------
| menu | sidebar | list | content |
-----------------------------------------------------------------------------------------------------
- Normal screen (1200px => width => 768px) - typical: 768x1024 (iPad Mini/Air)
-------------------------------------------------------------------
|menu| sidebar/list | content |
-------------------------------------------------------------------
- Small (480px < width < 768px)
------------------------------------------
|menu| sidebar/list/content |
------------------------------------------
- Phone (width <= 480px) - typical: 320x480 (iPhone 5), 375x667 (iPhone 6-7), 360x564 (Galaxy S6)
------------------------
| sidebar/list/content |
------------------------
*/
html {
height: 100%;
font-size: @page-font-size;
}
body {
min-width: @page-min-width;
height: 100%;
color: @color-font;
overflow: hidden;
html.iframe & {
overflow: auto;
}
}
#layout {
overflow: hidden;
display: flex;
height: 100%;
width: 100%;
& > div {
& > .scroller {
flex: 1;
position: relative; // for .listing-info positioning
}
& > .header,
& > .footer {
font-size: @layout-header-font-size;
font-weight: bold;
line-height: @layout-header-height;
height: @layout-header-height;
min-height: @layout-header-height;
padding: 0 .25em;
margin: 0;
position: relative; // for absolute positioning of searchbar
overflow: hidden;
white-space: nowrap;
display: flex;
justify-content: center;
}
& > .header {
border-bottom: 1px solid @color-layout-border;
color: @color-layout-header;
background-color: @color-layout-header-background;
.header-title {
.overflow-ellipsis();
flex: 1;
text-align: center;
margin: 0 -20rem;
}
a.button {
color: @color-toolbar-button;
}
a.toolbar-list-button,
a.toolbar-menu-button {
order: 99; // always the last button
}
}
& > .footer {
border-top: 1px solid @color-layout-border;
background-color: @color-layout-footer-background;
& when not (@layout-footer-height = @layout-header-height) {
height: @layout-footer-height;
min-height: @layout-footer-height;
line-height: @layout-footer-height;
}
&.small {
height: @layout-footer-small-height;
min-height: @layout-footer-small-height;
line-height: @layout-footer-small-height;
}
&:empty {
display: none;
}
}
}
}
#layout-sidebar {
position: relative; // e.g. for .column-resizer
display: flex;
flex-direction: column;
flex: 2;
max-width: 30%;
min-width: 220px;
border-right: 1px solid @color-layout-border;
background-color: @color-layout-sidebar-background;
&.sidebar-right {
order: 2;
border-right: 0;
border-left: 1px solid @color-layout-border;
// sidebar on right is unusual situation, probably there's no list in layout,
// in such a case we can make it a little bit wider
flex: 3;
}
}
#layout-list {
position: relative; // e.g. for .column-resizer
display: flex;
flex-direction: column;
flex: 3;
max-width: 30%;
min-width: 300px;
border-right: 1px solid @color-layout-border;
background-color: @color-layout-list-background;
}
#layout-content {
display: flex;
flex: 6;
flex-direction: column;
background-color: @color-layout-content-background;
width: 100%;
html.iframe & {
height: 100%;
}
& > .formcontent, // e.g. Help plugin
& > .content {
height: 100%;
width: 100%;
overflow: auto;
flex: 1;
}
.iframe-wrapper {
width: 100%;
flex: 1;
iframe {
width: 100%;
height: 100%;
border: 0;
}
}
&.only > .scroller {
overflow: auto;
}
}
#layout-menu {
&.popover {
left: 0 !important;
}
.popover-header {
height: @layout-header-height;
line-height: @layout-header-height;
border: 0;
border-radius: 0;
text-align: center;
img {
max-height: @layout-header-height;
max-width: @layout-menu-width;
padding: .25rem;
@media screen and (min-width: (@screen-width-xs + 1px)) and (max-width: @screen-width-medium) {
max-width: @layout-menu-width * 0.45;
}
}
@media screen and (min-width: (@screen-width-xs + 1px)) {
padding: 0 !important;
background-color: @color-taskmenu-background !important;
a {
display: none !important;
}
}
html.layout-phone & {
display: flex !important;
align-items: center;
justify-content: center;
padding: 0 .5rem;
img {
max-width: @layout-mobile-menu-width - 50px;
}
a {
width: auto;
flex: 1;
&:before {
height: @layout-touch-header-height;
float: right;
}
.inner {
display: none;
}
}
}
}
}
.column-resizer {
cursor: col-resize;
z-index: 1;
position: absolute;
top: 0;
right: -3px;
width: 6px;
height: 100%;
&.inverted {
right: auto;
left: -3px;
}
&.active {
width: 10000px;
right: -5000px;
&.inverted {
right: auto;
left: -5000px;
}
}
}
@media screen and (max-width: @screen-width-large) {
#layout-sidebar,
#layout-list {
min-width: 260px;
flex: 3;
}
#layout-list > .header > a.button {
padding: 0 .25rem;
margin: 0 .25rem;
}
}
@media screen and (max-width: @screen-width-medium) {
// Disable column resizing by hiding splitters and resetting columns width
.column-resizer {
display: none;
}
#layout-sidebar,
#layout-list {
width: auto !important;
flex: 3 !important;
}
}
@media screen and (max-width: @screen-width-small) {
#layout-sidebar,
#layout-list {
max-width: none;
border: 0 !important;
}
#layout > div > .header {
background-color: @color-layout-mobile-header-background;
a.button {
// make the button active area smaller on touch devices
margin: 0 .3rem !important;
padding: 0 !important;
&:before {
font-size: 1.75rem;
height: @layout-touch-header-height;
margin: 0;
}
&.filter:before {
font-size: 1.6rem; // this icon is too big in FA5
}
.inner {
display: none;
}
}
}
#layout > div > .footer {
background-color: @color-layout-mobile-footer-background;
}
a.toolbar-list-button {
display: none;
}
}
@media screen and (max-width: @screen-width-xs) {
}
@media screen and (max-width: @screen-width-mini) {
#layout-sidebar,
#layout-list {
min-width: @page-min-width;
}
}
@media screen and (min-width: (@screen-width-xs + 1px)) {
a.task-menu-button {
display: none;
}
#layout-menu {
// FIXME: we set background color here not in taskmenu.less, because
// otherwise background is partially white on Android/iOS
background-color: @color-taskmenu-background;
width: @layout-menu-width-sm;
}
}
@media screen and (min-width: (@screen-width-small + 1px)) {
.floating-action-buttons,
#layout-content > .header > .header-title,
#layout > div > .header > .buttons,
a.toolbar-menu-button {
display: none;
}
}
@media screen and (min-width: (@screen-width-medium + 1px)) {
#layout-menu {
width: @layout-menu-width;
}
}
@media screen and (min-width: (@screen-width-large + 1px)) {
#layout-list > .header > .header-title:not(.all-sizes),
a.toolbar-list-button,
a.back-list-button,
a.back-sidebar-button {
display: none;
}
}
html.layout-phone {
.hidden-phone {
display: none !important;
}
}
html.layout-phone,
html.layout-small {
.hidden-small {
display: none !important;
}
}
html.layout-small {
.hidden-lbs {
display: none !important;
}
}
html.layout-large,
html.layout-normal {
.hidden-lbs,
.hidden-big {
display: none !important;
}
}
html.layout-large {
.hidden-large {
display: none !important;
}
}

62
styles/mixins.less Normal file
View File

@ -0,0 +1,62 @@
/**
* Roundcube Webmail styles for the Elastic skin
*
* Copyright (c) The Roundcube Dev Team
*
* The contents are subject to the Creative Commons Attribution-ShareAlike
* License. It is allowed to copy, distribute, transmit and to adapt the work
* by keeping credits to the original authors in the README.md file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
/*** Font-icons ***/
.font-icon-class {
font-size: 1.25em;
// FIXME: with inline-block we have some problems with icon alignment
// display: inline-block;
display: block;
float: left;
margin: 0 .25rem 0 0;
width: 1.18em;
height: 1em;
font-family: 'Icons';
font-style: normal;
font-weight: 900;
text-decoration: inherit;
text-align: center;
speak: none;
font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.animated-icon-class {
// spinner-border is defined in Bootstrap
-webkit-animation: spinner-border 1.5s infinite linear;
animation: spinner-border 1.5s infinite linear;
}
.font-icon-solid(@icon) {
content: @icon;
font-weight: 900;
}
.font-icon-regular(@icon) {
content: @icon;
font-weight: 400;
}
.overflow-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
}
.font-family {
font-family: 'Open Sans', sans-serif;
}
.style-input-focus {
border-color: @color-input-border-focus;
box-shadow: 0 0 0 .2rem @color-input-border-focus-shadow;
}

78
styles/print.less Normal file
View File

@ -0,0 +1,78 @@
/**
* Roundcube Webmail styles for the Elastic skin
*
* Copyright (c) The Roundcube Dev Team
*
* The contents are subject to the Creative Commons Attribution-ShareAlike
* License. It is allowed to copy, distribute, transmit and to adapt the work
* by keeping credits to the original authors in the README.md file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
/*** Additional styles for printouts ***/
body {
overflow: auto;
height: auto;
}
#print-layout {
margin: 1rem;
#logo {
max-height: 80px;
}
// Overwrites for mail message printouts
.image-attachment {
.image-link {
margin-bottom: .5rem;
}
.attachment-links {
display: none;
}
}
#message-header {
margin-bottom: .5rem;
}
.attachment-size {
padding-left: .1rem;
}
blockquote {
page-break-inside: auto;
}
// Overwrites for contact printouts
.formcontent {
padding: 0;
legend {
margin-top: .5rem;
}
.row .form-control-plaintext {
padding: .1rem;
}
.contactfield {
padding: .2rem 0;
}
}
.propform.grouped .row.input-group .input-group-text {
padding: 0;
min-width: 12rem;
background: #fff;
border: 0;
}
.contact-header {
margin-bottom: 0;
}
}

1
styles/print.min.css vendored Normal file
View File

@ -0,0 +1 @@
#print-layout #message-header,#print-layout .image-attachment .image-link{margin-bottom:.5rem}body{overflow:auto;height:auto}#print-layout{margin:1rem}#print-layout #logo{max-height:80px}#print-layout .image-attachment .attachment-links{display:none}#print-layout .attachment-size{padding-left:.1rem}#print-layout blockquote{page-break-inside:auto}#print-layout .formcontent{padding:0}#print-layout .formcontent legend{margin-top:.5rem}#print-layout .formcontent .row .form-control-plaintext{padding:.1rem}#print-layout .formcontent .contactfield{padding:.2rem 0}#print-layout .propform.grouped .row.input-group .input-group-text{padding:0;min-width:12rem;background:#fff;border:0}#print-layout .contact-header{margin-bottom:0}

458
styles/styles.less Normal file
View File

@ -0,0 +1,458 @@
/**
* Roundcube Webmail styles for the Elastic skin
*
* Copyright (c) The Roundcube Dev Team
*
* The contents are subject to the Creative Commons Attribution-ShareAlike
* License. It is allowed to copy, distribute, transmit and to adapt the work
* by keeping credits to the original authors in the README.md file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
@import "global";
@import "layout";
@import "widgets/common";
@import "widgets/buttons";
@import "widgets/jqueryui";
@import "widgets/dialogs";
@import "widgets/menu";
@import "widgets/messages";
@import "widgets/lists";
@import "widgets/forms";
@import "widgets/editor";
/*** Login form ***/
.task-login {
#layout-content {
text-align: center;
width: 100%;
display: block;
}
#logo {
display: inline-block;
position: relative;
top: 16vh;
max-height: 100px;
}
}
#login-form {
margin: 0 auto;
top: 20vh;
width: 95%;
max-width: 320px;
position: relative;
// Fixes table width in IE11
table, tbody {
display: block;
}
// Fixes input width in IE11
.row {
margin-right: 0;
margin-left: 0;
}
.oauthlogin {
margin-top: 1em;
padding-top: 1em;
}
.formbuttons + .oauthlogin {
border-top: 1px solid #ccc;
}
}
#rcmloginsubmit {
&:before {
display: none !important;
}
}
#login-footer {
flex: 1;
color: @color-black-shade-text;
& > div {
margin-top: 1rem;
padding: 1rem;
background: @color-black-shade-bg;
border-radius: .3rem;
}
}
#login-addon {
position: absolute;
bottom: 0;
max-height: 30%;
margin: 1rem !important;
width: auto !important;
overflow: auto;
@media screen and (min-width: (@screen-width-small + 1px)) {
max-width: @screen-width-small;
margin: auto !important;
bottom: 1rem;
left: 0;
right: 0;
}
}
body.task-error-login #layout {
#layout-menu,
#layout-content > .header {
display: none;
}
}
/*** Addressbook UI ***/
#contactpic {
width: @layout-contact-icon-width;
height: @layout-contact-icon-height;
border-radius: .5rem;
overflow: hidden;
display:table-cell;
vertical-align:middle;
text-align: center;
background-color: @color-image-upload-background;
img {
max-width: @layout-contact-icon-width;
max-height: @layout-contact-icon-height;
}
}
#contacthead {
.names {
margin-bottom: .5rem;
span.namefield {
font-size: 1.5rem;
font-weight: bold;
line-height: 1.2;
}
}
&.readonly {
.source.row {
color: @color-form-hint;
font-size: 90%;
margin-bottom: .25rem;
}
}
}
/*** Mail UI ***/
#message-header {
margin-bottom: 1rem;
& > .subject {
font-size: 1.5rem;
font-weight: bold;
body.status-flagged &:before {
&:extend(.font-icon-class);
display: inline;
float: none;
content: @fa-var-flag;
font-size: 1em;
color: @color-error;
}
a.extwin {
text-decoration: none;
&:before {
&:extend(.font-icon-class);
float: none;
display: inline-block;
font-size: 75%;
line-height: 1.5;
margin: 0;
content: @fa-var-external-link-square-alt;
}
}
span.inner {
display: none;
}
}
& > .header {
display: flex;
img.contactphoto {
margin: 0 1rem 0 0;
border-radius: 50%;
width: @mail-header-photo-height;
height: @mail-header-photo-height;
object-fit: cover;
background: @color-image-upload-background;
}
}
.header-content {
min-height: @mail-header-photo-height;
flex: 1;
&.details-view {
.header-summary {
display: none;
}
.header-headers {
display: initial;
}
}
}
.header-summary {
margin-top: .25rem;
& > span {
display: inline-block;
}
}
.header-headers {
display: none;
.header-title {
white-space: nowrap;
color: @color-black-shade-text;
font-weight: bold;
padding-right: 1rem;
vertical-align: top;
}
}
.header-links {
margin-top: .25rem;
a {
font-size: 90%;
margin-right: .5rem;
text-decoration: none;
white-space: nowrap;
display: inline-block;
&:before {
&:extend(.font-icon-class);
height: 1.5rem;
line-height: 1.3;
}
&.headers-details:before {
content: @fa-var-envelope;
}
&.headers-summary:before {
.font-icon-regular(@fa-var-envelope);
}
&.headers-all:before {
content: @fa-var-info-circle;
}
&.html:before {
content: @fa-var-image;
}
&.plain:before {
content: @fa-var-align-justify;
}
&.zipdownload:before {
content: @fa-var-download;
}
}
}
}
.message-partheaders {
padding: .25rem .5rem;
margin: .5rem 0 -.5rem 0;
border-top: 1px solid @color-messagepart-border;
background-color: @color-messagepart-background;
table.headers-table {
font-size: 90%;
color: @color-mail-headers;
.header-title {
.overflow-ellipsis();
white-space: nowrap;
max-width: 8em;
font-weight: bold;
padding-right: 1rem;
vertical-align: top;
}
.subject {
font-weight: bold;
}
& + .message-part,
& + .message-htmlpart {
border-top: 0;
margin: 0;
}
}
}
#message-content {
.attachmentslist:not(:empty) {
margin-bottom: 1rem;
}
}
#messagebody {
&.mailvelope {
iframe {
min-height: 75vh;
}
}
}
.message-part,
.message-htmlpart {
padding-top: .5rem;
// Fixes absolute positioned mail message content
position: relative;
&:not(:first-child) {
border-top: 1px solid @color-messagepart-border;
margin-top: .5rem;
}
&:last-child {
margin-bottom: .5rem;
}
div.rcmBody {
// Remove margins that can be set by the mail message styles
margin: 0 auto !important;
}
blockquote {
.overflow-ellipsis();
color: @color-blockquote-0;
border-left: 2px solid @color-blockquote-0-border;
border-right: 2px solid @color-blockquote-0-border;
background-color: @color-blockquote-background;
margin: 2px 0;
padding: 0 .4em;
blockquote {
color: @color-blockquote-1;
border-left: 2px solid @color-blockquote-1-border;
border-right: 2px solid @color-blockquote-1-border;
blockquote {
color: @color-blockquote-2;
border-left: 2px solid @color-blockquote-2-border;
border-right: 2px solid @color-blockquote-2-border;
}
}
span.blockquote-link {
top: 0;
cursor: pointer;
right: .5rem;
min-width: 4rem;
padding: .2rem .25rem .2rem .5rem;
font-size: 90%;
text-align: center;
color: @color-black-shade-text;
background: @color-black-shade-bg;
border: 1px solid @color-black-shade-border;
border-radius: .3rem;
line-height: 1;
.font-family(); // don't inherit monospace font
&:after {
&:extend(.font-icon-class);
content: @fa-var-angle-down;
display: inline-block;
float: none;
margin: 0;
font-size: 90%;
}
&.collapsed:after {
content: @fa-var-angle-up;
}
}
&.blockquote-header {
text-overflow: ellipsis !important;
padding-right: 5rem !important;
}
}
}
.message-part {
span.sig {
color: @color-mail-signature;
}
div.pre {
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 {
margin: 1rem 1rem 0 1rem;
}
#composestatusbar {
opacity: .3;
right: 2.5rem;
@media screen and (min-width: (@screen-width-small + 1px)) {
display: none;
}
a.button {
display: inline-block;
&:before {
line-height: @layout-touch-header-height;
font-size: 1.25rem !important;
}
}
}
/*** Settings UI ***/
// A default icon for settings menu entries added by plugins
.settings-default-icon {
tr > td.section::before,
li > a:before {
content: @fa-var-cog;
}
}
& when (@dark-mode-enabled = true) {
@import "dark";
}
@import (optional) "_styles";

1
styles/styles.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

63
styles/variables.less Normal file
View File

@ -0,0 +1,63 @@
/**
* Roundcube Webmail styles for the Elastic skin
*
* Copyright (c) The Roundcube Dev Team
*
* The contents are subject to the Creative Commons Attribution-ShareAlike
* License. It is allowed to copy, distribute, transmit and to adapt the work
* by keeping credits to the original authors in the README.md file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
@import (reference) "fontawesome";
@import (reference) "colors";
@dark-mode-enabled: true; // on change also have to change dark_mode_support in meta.json
@screen-width-large: 1200px;
@screen-width-medium: 1024px;
@screen-width-small: 768px;
@screen-width-xs: 480px;
@screen-width-mini: 320px;
@screen-width-touch: @screen-width-medium;
@screen-width-bs-phone: 576px;
@page-font-size: 14px;
@page-min-width: 240px;
// Note: we'll set some values in pixels instead of rem to eliminate
// Firefox sub-pixel rendering bug(s)
@layout-menu-width: floor(5.6 * @page-font-size);
@layout-menu-width-sm: floor(3 * @page-font-size);
@layout-header-height: floor(4.2 * @page-font-size);
@layout-footer-height: @layout-header-height;
@layout-footer-small-height: floor(2.5 * @page-font-size);
@layout-header-font-size: 1rem;
@layout-searchbar-height: floor(2.6 * @page-font-size);
@layout-touch-header-height: @layout-header-height;
@layout-touch-header-font-size: floor(1.2 * @page-font-size);
@layout-touch-menu-record-height: floor(3.4 * @page-font-size);
@layout-touch-menu-record-font-size: floor(1.2 * @page-font-size);
@layout-touch-icon-width: 2.2em;
@layout-mobile-menu-width: (@screen-width-mini * .85);
@layout-contact-icon-width: 112px;
@layout-contact-icon-height: 135px;
@listing-line-height: floor(2.5 * @page-font-size);
@listing-touch-line-height: floor(3.4 * @page-font-size);
@listing-treetoggle-width: 1.5em;
@mail-header-photo-height: 4rem;
// Scrollbars
@scrollbar-width: auto; // '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");
@import (reference, optional) "_variables";

350
styles/widgets/buttons.less Normal file
View File

@ -0,0 +1,350 @@
/**
* Roundcube Webmail styles for the Elastic skin
*
* Copyright (c) The Roundcube Dev Team
*
* The contents are subject to the Creative Commons Attribution-ShareAlike
* License. It is allowed to copy, distribute, transmit and to adapt the work
* by keeping credits to the original authors in the README.md file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
/*** Buttons ***/
.button.disabled {
opacity: .5;
}
a.button {
text-decoration: none !important;
}
/* font-icons */
a.button.icon,
button.btn {
font-weight: 700;
&:before {
&:extend(.font-icon-class);
}
&.sidebar-menu:before,
&.toolbar-menu-button:before,
&.toolbar-list-button:before {
content: @fa-var-ellipsis-v;
width: 1em;
}
&.task-menu-button:before {
content: @fa-var-bars;
}
&.back-sidebar-button:before,
&.back-content-button:before,
&.back-list-button:before {
content: @fa-var-chevron-left;
}
&.refresh:before {
content: @fa-var-sync;
}
&.generate:before,
&.yes:before,
&.submit:before,
&.continue:before,
&.save:before {
content: @fa-var-check;
}
&.create:before {
content: @fa-var-plus-square;
}
&.edit:before {
content: @fa-var-pencil-alt;
}
&.qrcode:before {
content: @fa-var-qrcode;
}
&.search:before {
content: @fa-var-search;
}
&.filter:before {
content: @fa-var-filter;
font-size: 1.2em; // this icon is too-big in FA5
}
&.import:before {
content: @fa-var-upload;
}
&.export:before {
content: @fa-var-download;
}
&.discard:before,
&.delete:before {
.font-icon-regular(@fa-var-trash-alt);
}
&.next:before {
content: @fa-var-arrow-right;
}
&.restore:before {
content: @fa-var-undo;
}
&.send:before,
&.bounce:before {
content: @fa-var-paper-plane;
}
&.attach:before {
content: @fa-var-paperclip;
}
&.attach.vcard:before {
content: @fa-var-user;
}
&.no:before,
&.close:before,
&.cancel:before {
content: @fa-var-times;
}
&.back:before {
content: @fa-var-chevron-left;
}
&.remove:before {
content: @fa-var-times;
}
&.unlock:before {
content: @fa-var-unlock;
}
&.help:before {
.font-icon-regular(@fa-var-life-ring);
}
&.folders:before {
content: @fa-var-folder-open;
}
&.options:before {
content: @fa-var-sliders-h;
}
&.tools:before,
&.settings:before {
content: @fa-var-cog;
}
&.properties:before {
content: @fa-var-info-circle;
}
&.selection:before {
.font-icon-regular(@fa-var-check-square);
}
&.insert.recipient:before {
content: @fa-var-user-plus;
}
&.encrypt:before {
content: @fa-var-lock;
}
&.sign:before {
content: @fa-var-signature;
}
&.sso:before {
content: @fa-var-sign-in-alt;
}
&.extwin:before {
content: @fa-var-external-link-square-alt;
}
}
a.btn,
button.btn {
&:before {
display: inline !important;
float: none !important;
vertical-align: middle;
margin-right: .4rem !important; // !important needed for a.btn
}
&.oauth.google:before,
&.oauth.outlook:before {
content: " ";
display: inline-block !important;
height: 1.5rem;
width: 1.5rem;
margin-right: .8rem !important;
background-size: 100% auto;
}
&.oauth.google:before {
background: url('../images/google-icon.svg') top left no-repeat;
}
&.oauth.outlook:before {
background: url('../images/microsoft-icon.svg') top left no-repeat;
}
}
a.button.icon {
&.dropdown:before {
content: @fa-var-caret-down;
font-size: 1em;
}
& > span.inner {
display: none;
}
}
html.touch {
.btn:focus {
box-shadow: none !important;
}
}
@floating-action-button-size: 4rem;
.floating-action-buttons {
position: absolute;
right: 0;
bottom: 0;
.footer:not(:empty) + & {
bottom: @layout-footer-small-height;
}
a.button {
display: block;
float: left;
width: @floating-action-button-size;
height: @floating-action-button-size;
border-radius: 50%;
background: @color-main;
color: white;
opacity: .95;
box-shadow: 0 0 5px 5px lighten(@color-main, 35%);
margin: 0 1rem 1rem 0;
&:before {
&:extend(.font-icon-class);
content: @fa-var-plus;
width: @floating-action-button-size;
height: @floating-action-button-size;
line-height: @floating-action-button-size;
}
&.compose {
&:before {
content: @fa-var-pen;
}
}
.inner {
display: none;
}
}
}
/*** Bootstrap button style overrides ***/
.btn {
&:focus {
box-shadow: 0 0 0 .2rem fade(@color-btn-primary-background, 30%);
}
}
.btn-link {
color: @color-link;
}
.btn-secondary {
color: @color-btn-secondary;
background: @color-btn-secondary-background;
border-color: @color-btn-secondary-background;
&:focus {
background: darken(@color-btn-secondary-background, 5%);
border-color: darken(@color-btn-secondary-background, 7%);
box-shadow: 0 0 0 .2rem fade(@color-btn-secondary-background, 50%);
}
&:hover {
background: darken(@color-btn-secondary-background, 5%);
border-color: darken(@color-btn-secondary-background, 7%);
}
&.disabled,
&:disabled {
background: @color-btn-secondary-background;
border-color: @color-btn-secondary-background;
}
&:not(:disabled):not(.disabled) {
&:active,
&.active {
background: darken(@color-btn-secondary-background, 10%);
border-color: darken(@color-btn-secondary-background, 12%);
&:focus {
box-shadow: 0 0 0 .2rem fade(@color-btn-secondary-background, 53%);
}
}
}
}
.btn-primary {
color: @color-btn-primary;
background: @color-btn-primary-background;
border-color: @color-btn-primary-background;
&:focus {
background: darken(@color-btn-primary-background, 5%);
border-color: darken(@color-btn-primary-background, 7%);
box-shadow: 0 0 0 .2rem fade(@color-btn-primary-background, 50%);
}
&:hover {
background: darken(@color-btn-primary-background, 5%);
border-color: darken(@color-btn-primary-background, 7%);
}
&.disabled,
&:disabled {
background: @color-btn-primary-background;
border-color: @color-btn-primary-background;
}
&:not(:disabled):not(.disabled) {
&:active,
&.active {
background: darken(@color-btn-primary-background, 10%);
border-color: darken(@color-btn-primary-background, 12%);
&:focus {
box-shadow: 0 0 0 .2rem fade(@color-btn-primary-background, 53%);
}
}
}
}
.btn-danger {
color: @color-btn-danger;
background: @color-btn-danger-background;
border-color: @color-btn-danger-background;
&:focus {
background: darken(@color-btn-danger-background, 5%);
border-color: darken(@color-btn-danger-background, 7%);
box-shadow: 0 0 0 .2rem fade(@color-btn-danger-background, 50%);
}
&:hover {
background: darken(@color-btn-danger-background, 5%);
border-color: darken(@color-btn-danger-background, 7%);
}
&.disabled,
&:disabled {
background: @color-btn-danger-background;
border-color: @color-btn-danger-background;
}
&:not(:disabled):not(.disabled) {
&:active,
&.active {
background: darken(@color-btn-danger-background, 10%);
border-color: darken(@color-btn-danger-background, 12%);
&:focus {
box-shadow: 0 0 0 .2rem fade(@color-btn-danger-background, 53%);
}
}
}
}

585
styles/widgets/common.less Normal file
View File

@ -0,0 +1,585 @@
/**
* Roundcube Webmail styles for the Elastic skin
*
* Copyright (c) The Roundcube Dev Team
*
* The contents are subject to the Creative Commons Attribution-ShareAlike
* License. It is allowed to copy, distribute, transmit and to adapt the work
* by keeping credits to the original authors in the README.md file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
/*** Common UI elements ***/
.rcmaddcontact,
.hidden,
.voice {
display: none !important;
}
font.bold {
font-weight: bold;
}
#rcmdraglayer {
min-width: 260px;
width: 260px;
background-color: @color-drag-layer-background;
color: @color-drag-layer;
box-shadow: 3px 3px 5px @color-drag-layer-shadow;
border-radius: .3rem;
z-index: 250;
opacity: .92;
padding: .5rem;
white-space: nowrap;
div {
line-height: 1.6em;
.overflow-ellipsis();
}
}
.frame-content {
padding: 1rem;
h2 {
font-weight: bold;
font-size: 1.5em;
}
h3 {
font-weight: bold;
font-size: 1.25em;
}
}
.listbox {
.scroller {
width: 100%;
overflow-x: hidden;
overflow-y: auto;
}
.navlist {
height: 0;
flex: initial !important;
.listing {
tr:last-child td,
li:last-child {
border-bottom: 0;
}
}
}
.popup & {
height: 100%;
display: flex;
flex-direction: column;
.scroller {
flex: 1;
}
.footer {
border-top: 1px solid @color-layout-border;
background-color: @color-searchbar-background;
}
}
}
.contact-header {
display: flex;
margin-bottom: 1rem;
.contact-photo {
min-width: @layout-contact-icon-width;
}
.contact-head {
margin-left: 1rem;
margin-top: 0 !important;
legend {
display: none;
}
}
}
@image-attachment-size: 250px;
// this is when image thumbnails are enabled
p.image-attachment {
position: relative;
border: 1px solid @color-border;
border-radius: .3rem;
background-color: @color-message-background;
float: left;
margin: .5rem;
min-width: 47%;
min-height: @image-attachment-size;
overflow: hidden;
// use flexbox to center the image
display: flex;
justify-content: center;
@media screen and (max-width: @screen-width-xs) {
float: none;
margin: .5rem 0 .5rem 0;
}
.image-link {
align-self: center;
text-align: center;
margin: 1.6rem .5rem;
}
span {
color: @color-form-hint;
padding: 0 .5rem;
font-size: 90%;
white-space: nowrap;
position: absolute;
line-height: 1.5rem;
}
.image-filename {
.overflow-ellipsis();
left: 0;
top: 0;
right: 0;
padding-right: 4rem;
}
.image-filesize {
right: 0;
top: 0;
}
.attachment-links {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
a {
text-decoration: none;
display: inline-block;
padding: 0 .5rem;
line-height: 1.5rem;
}
a:before {
&:extend(.font-icon-class);
display: inline-block;
}
a.open:before {
content: @fa-var-external-link-square-alt;
}
a.download:before {
content: @fa-var-download;
}
}
}
// this is when image thumbnails are disabled
fieldset.image-attachment {
margin-top: .5rem;
legend {
color: @color-form-hint;
font-size: .9rem;
border-top: 1px solid lighten(@color-mail-headers, 50%);
margin: 0;
}
img {
max-width: 100%;
}
}
#folder-selector {
overflow-y: auto;
}
.noselect {
user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
.iframe-loader {
width: 100%;
position: absolute;
top: 0;
bottom: 0;
background-color: rgba(255, 255, 255, .95);
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
.spinner-border {
width: 7rem;
height: 7rem;
color: @color-spinner-circle;
border: 1rem solid;
border-color: currentColor @color-spinner-item currentColor currentColor;
}
}
.footer.toolbar + .iframe-loader {
top: @layout-header-height;
bottom: @layout-header-height;
}
// iOS: Fix scrolling of iframe, display scrollbars on scrollable elements
.ios-scroll {
padding: 0;
-webkit-overflow-scrolling: touch !important;
overflow: scroll !important;
&.iframe-wrapper {
margin-top: 1px; // FIXME: without this scrolling hides the wrapper neighbours' border
}
}
.webkit-scroller {
&::-webkit-scrollbar {
-webkit-appearance: none;
}
&::-webkit-scrollbar:vertical {
width: .5rem;
}
&::-webkit-scrollbar:horizontal {
height: .5rem;
}
&::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .3);
border-radius: .25rem;
border: 2px solid #fff;
}
}
.quota-widget {
width: 100%;
max-width: 15em;
padding: .5rem 1rem;
display: flex;
align-items: center;
color: @color-quota-text;
&:before {
&:extend(.font-icon-class);
content: @fa-var-hdd;
line-height: 1;
}
.count {
font-size: 80%;
order: 2;
}
.bar {
flex: 1;
height: .5rem;
margin: 0 1rem;
background-color: @color-quota-background;
border: 1px solid @color-layout-border;
border-radius: .25rem;
overflow: hidden;
}
.value {
display: block;
background-color: @color-quota-value;
height: 1rem;
opacity: .75;
&.warning {
background-color: @color-quota-value-warning;
}
}
}
.image-tools {
position: absolute;
top: 5rem;
left: 0;
height: @layout-header-height;
overflow: hidden;
transform: translateX(-87%);
transition: transform 0.3s ease-in-out;
background-color: @color-image-tools-background;
border-radius: 0 .3rem .3rem 0;
.menu {
float: left;
}
a.button.icon.tools {
padding: 0 .25rem;
display: inline-block;
height: @layout-header-height;
span.inner {
display: none;
}
&:before {
line-height: @layout-header-height;
margin: 0;
}
}
&.open {
transform: translateX(0);
a.button.icon.tools:before {
content: @fa-var-chevron-left;
}
}
a {
color: @color-image-tools !important;
&:focus,
&:hover {
background-color: @color-image-tools-hover !important;
outline: 0;
}
}
}
.quota-info {
width: 100%;
display: table !important;
td,th {
text-align: center;
white-space: nowrap;
}
th {
border-top: 0;
}
.root {
line-height: 1;
font-style: italic;
color: @color-popover-separator;
background-color: @color-popover-separator-background;
}
th:first-child,
.name {
text-align: left;
}
}
// Make Bootstrap tabs non-wrappable
.nav-tabs {
flex-wrap: nowrap;
.nav-item {
white-space: nowrap;
overflow: hidden;
}
.nav-link {
.overflow-ellipsis();
}
}
.props-table {
td.title {
width: 7em;
}
}
.table-widget {
display: flex;
flex-direction: column;
margin-bottom: .5rem;
border: 1px solid @color-table-border;
& > .content {
overflow-x: auto;
flex-grow: 1;
height: 18.5em;
table th {
border-top: 0;
}
}
& > .footer {
height: 3.5rem;
border-top: 1px solid @color-table-border;
text-align: left;
a {
padding: .2rem .45rem !important;
height: ~"calc(3.5rem - 1px)" !important;
}
}
table {
margin: 0;
max-height: 18.5em;
}
// Options table is a table with first column for identifier/description
// and other columns for a state flag. E.g. ACL table
table.options-table {
td,th {
text-align: center;
vertical-align: middle;
&:first-child {
.overflow-ellipsis();
text-align: left;
}
}
tr:last-child td {
border-bottom: 1px solid @color-table-border;
}
tr.selected td {
background-color: @color-table-selected-background;
color: @color-table-selected;
outline: 0;
}
td:not(:first-child) span {
display: inline-block;
line-height: 1.25;
&:before {
&:extend(.font-icon-class);
}
}
td.enabled span:before {
content: @fa-var-check;
}
td.partial span:before {
opacity: .3;
content: @fa-var-check;
}
}
}
table.compact-table {
margin: 0;
width: 100%;
*:not(.invalid-feedback) {
font-size: inherit;
}
td {
padding: .25rem;
border: 0;
}
td:first-child {
padding-left: 0;
}
td:last-child {
padding-right: 0;
}
}
table.table {
.checkbox-cell {
width: 3rem;
white-space: nowrap;
overflow: hidden;
text-align: center;
padding: .5rem;
html.touch & {
padding: .5rem .3rem;
}
}
th.checkbox-cell {
padding: .75rem 0;
max-width: 1rem;
&:before {
&:extend(.font-icon-class);
cursor: pointer;
margin: 0 1rem;
line-height: 1;
}
&.subscription:before {
content: @fa-var-rss-square;
}
&.alarm:before {
.font-icon-regular(@fa-var-bell);
}
&.read:before {
content: @fa-var-eye;
}
&.write:before {
content: @fa-var-pencil-alt;
}
}
.buttons-cell {
width: 1%;
white-space: nowrap;
text-align: center;
a.button:before {
line-height: 1;
float: none;
display: inline-block;
}
@media screen and (min-width: @screen-width-xs) {
a.button .inner {
display: inline;
}
}
}
label {
margin: 0;
display: inline;
}
fieldset.tab-pane & thead th {
border: 0;
}
tr.deleted td {
color: @color-list-deleted !important;
}
}
/* Bootstrap's .table style overwrites */
.table {
thead th {
border-width: 1px;
white-space: nowrap;
}
}

263
styles/widgets/dialogs.less Normal file
View File

@ -0,0 +1,263 @@
/**
* Roundcube Webmail styles for the Elastic skin
*
* Copyright (c) The Roundcube Dev Team
*
* The contents are subject to the Creative Commons Attribution-ShareAlike
* License. It is allowed to copy, distribute, transmit and to adapt the work
* by keeping credits to the original authors in the README.md file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
/*** Dialogs and popovers ***/
.popupmenu {
display: none;
padding: 0;
min-width: 180px;
height: 100%;
li > a {
width: 100%;
}
&.propform {
overflow: hidden;
padding: .25rem; // so overflow do not truncate focus outline on inputs
}
&.simplelist {
min-width: 80px;
}
}
.popup.justified {
display: flex;
justify-content: space-around;
}
.popover-body {
padding: 0;
overflow-x: hidden;
& > .popupmenu {
display: block !important;
}
}
.popover {
box-shadow: 3px 3px 5px @color-popover-shadow;
border-color: @color-layout-border;
padding: 0;
z-index: 1300;
.popover-header {
// On mobile don't display popup arrows and titles
display: none;
}
@media screen and (min-width: (@screen-width-small + 1px)) {
.listing {
li:first-child {
border-radius: .25rem .25rem 0 0;
}
li:last-child {
border-bottom-right-radius: .25rem;
border-bottom-left-radius: .25rem;
}
ul.rounded-0 > li {
border-radius: 0;
}
}
}
}
html.layout-small,
html.layout-phone {
.popover:not(.select-menu) {
margin: 0 !important;
padding: 0;
right: 0;
left: initial !important;
bottom: 0;
top: 0;
width: @layout-mobile-menu-width;
transform: none !important;
border-radius: 0;
border: 0;
display: flex;
flex-direction: column;
box-shadow: none;
div.arrow {
display: none;
}
.listing li:last-child {
border-bottom: 1px solid @color-list-border;
}
}
.popover-overlay {
z-index: 1299;
background-color: @color-dialog-overlay-background;
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.popover-header {
display: block;
border-radius: 0;
border: 0;
padding: 0 .5em;
height: @layout-touch-header-height;
min-height: @layout-touch-header-height; // for when it's a flex item
line-height: @layout-touch-header-height;
font-size: @layout-touch-header-font-size;
color: @color-popover-mobile-header;
background-color: @color-popover-mobile-header-background;
&:before {
display: none; // hide the Bootstrap's popover arrow element
}
a {
display: inline-block;
width: 100%;
color: @color-popover-mobile-header;
}
}
.popover-body > * {
max-height: 100% !important;
}
}
html.touch .popover {
.listing {
li a {
line-height: @layout-touch-menu-record-height;
font-size: @layout-touch-menu-record-font-size;
padding: 0 .5em;
&:before {
float: left; // overwrite icon float to have unified element height
}
}
}
}
.select-menu {
max-width: initial;
margin: 0;
height: auto;
z-index: 1301; // above TinyMCE dialogs
.popover-header {
border-radius: .25rem .25rem 0 0 !important;
}
.listing li {
a {
padding-left: .25rem;
outline: 0; // for Android browser
}
&:last-child {
border-bottom-right-radius: .25rem;
border-bottom-left-radius: .25rem;
}
}
// Use 'inline' class for menus that have a list elements with no <a> inside
// and no header
&.inline {
.listing li {
padding-right: .5rem;
&:first-child {
border-top-left-radius: .25rem;
border-top-right-radius: .25rem;
}
}
}
}
/** PGP Key search/import dialog **/
.pgpkeyimport {
div.key {
position: relative;
padding: .5rem 0;
&.revoked,
&.disabled {
color: @color-list-secondary;
}
label {
display: inline-block;
margin-right: 0.5em;
margin-bottom: 0;
&:after {
content: ":";
}
&.keyid {
display: none;
}
}
label + a,
label + span {
line-height: 2.6rem;
margin-right: 1em;
white-space: nowrap;
text-decoration: none;
}
label.keyid + a {
font-weight: bold;
&:before {
&:extend(.font-icon-class);
content: @fa-var-key;
}
}
}
ul.uids {
margin: 0;
padding: 0;
}
li.uid {
border: 0;
padding: .25rem 0 0 1.5em;
line-height: 1.5rem !important;
list-style-type: none;
&:before {
&:extend(.font-icon-class);
content: @fa-var-user;
opacity: 0.25;
font-size: 1em;
line-height: 1.25;
}
}
button.importkey {
position: absolute;
top: .5rem;
right: 0;
}
button:disabled {
display: none;
}
}

537
styles/widgets/editor.less Normal file
View File

@ -0,0 +1,537 @@
/**
* Roundcube Webmail styles for the Elastic skin
*
* Copyright (c) The Roundcube Dev Team
*
* The contents are subject to the Creative Commons Attribution-ShareAlike
* License. It is allowed to copy, distribute, transmit and to adapt the work
* by keeping credits to the original authors in the README.md file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
/*** Text Editor widget (and TinyMCE editor) ***/
// use of div.tox instead of just .tox is to have prio over TinyMCE styles
div.tox {
font-size: 1rem;
&, :not(.svg) {
.font-family();
}
&.tox-tinymce {
border-radius: .25rem;
border: 1px solid @color-input-border;
}
&.focused {
border-color: @color-input-border-focus !important;
box-shadow: 0 0 0 .2rem @color-input-border-focus-shadow !important;
}
.tox-toolbar-overlord {
z-index: 1; // for sticky header feature
& > div {
// The svg is copied from TinyMCE with modified height params
background: url("data:image/svg+xml;charset=utf8,%3Csvg height='33px' viewBox='0 0 40 33px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='32px' width='100' height='1' fill='%23cccccc'/%3E%3C/svg%3E");
background-color: @color-input-addon-background;
}
}
.tox-toolbar__primary {
border-top: 0;
}
// This one is for mobile
.tox-toolbar {
background-color: @color-input-addon-background;
}
.tox-edit-area {
border: 0;
}
.tox-dialog {
border-radius: 0;
border-color: @color-layout-border;
box-shadow: none;
align-self: unset !important;
.tox-form__group {
margin-top: 0;
margin-bottom: .75rem;
}
.tox-dialog__body-nav-item--active {
color: @color-link;
border-color: transparent;
&:hover {
color: @color-link-hover;
}
}
}
.tox-dialog__body-content {
overflow: unset;
}
.tox-dialog__content-js {
overflow: auto;
}
.tox-dialog-wrap__backdrop {
background-color: @color-dialog-overlay-background;
}
.tox-dialog__header {
height: (@layout-header-height - 1px);
border-bottom: 1px solid @color-dialog-header-border;
justify-content: flex-end; // fixes close button position when dialog has no title
padding: 0;
.tox-button {
color: @color-dialog-header;
right: 0;
height: (@layout-header-height - .7rem);
width: 2.25em;
margin-right: .4rem;
&:hover {
background: transparent;
border-color: transparent;
}
.tox-icon {
display: none;
}
&:before {
&:extend(.font-icon-class);
content: @fa-var-times;
line-height: 1.5rem;
margin: 0 !important;
}
}
}
.tox-dialog__footer {
height: (@layout-footer-height - 1px) !important;
border: 0;
margin: 0;
padding: 0 1rem;
@media screen and (max-width: @screen-width-xs) {
border-top: 1px solid @color-dialog-header-border;
}
& > div {
white-space: nowrap;
max-height: (@layout-footer-height - 1px);
button:first-child {
margin: 0;
}
}
.tox-button {
.btn-primary();
font-weight: normal;
padding: .5rem .75rem;
&:before {
&:extend(.font-icon-class);
width: 1em;
content: @fa-var-check;
line-height: 1;
}
// this is redundant, but required because of tinymce styles interference
&:focus:not(:disabled) {
background: @color-btn-primary-background;
border-color: @color-btn-primary-background;
}
&.tox-button--secondary {
.btn-secondary();
color: @color-btn-secondary;
&:before {
content: @fa-var-times;
}
// this is redundant, but required because of tinymce styles interference
&:focus:not(:disabled) {
background: @color-btn-secondary-background;
border-color: @color-btn-secondary-background;
}
}
}
}
.tox-search-dialog {
.tox-form__group:not(:first-child) {
flex: initial !important;
}
.tox-dialog__footer-start {
button {
padding: .25rem;
}
}
.tox-dialog__footer-end {
button {
&:before {
content: @fa-var-pencil-alt !important;
}
&:nth-of-type(1):before {
content: @fa-var-search !important;
}
}
}
}
.tox-dialog__title {
line-height: calc(@layout-header-height - 1px);
font-size: 1.25rem;
font-weight: bold;
padding: 0 0 0 1rem;
width: 100%;
color: @color-dialog-header;
}
// Make toolbar buttons smaller
.tox-tbtn {
height: 28px;
&:not(.tox-tbtn--select,.tox-split-button__chevron) {
width: 32px;
}
}
.tox-button {
line-height: 1.5;
}
.tox-label {
color: @color-font;
padding-bottom: .25rem;
}
// Adding .form-control does not work with TinyMCE skins,
// so we have to overwrite some props here
.tox-color-input > input,
.tox-listboxfield .tox-listbox--select,
.tox-textarea,
.tox-textfield {
.font-family() !important;
font-size: @page-font-size;
line-height: 1.5;
color: @color-font;
border-radius: .25rem;
min-height: 0;
padding: .375rem .75rem;
&:focus {
border-color: @color-input-border-focus;
box-shadow: 0 0 0 .2rem @color-input-border-focus-shadow;
}
}
.tox-listbox__select-label {
margin: 0;
}
.tox-color-input span {
top: 5px;
}
.custom-switch {
position: relative;
font-size: 1rem;
margin-top: .15rem;
.tox-checkbox__icons {
display: none;
}
.tox-checkbox__label {
margin: 0;
}
}
.image-selector {
font-size: 1rem;
button {
.btn-secondary();
padding: .5rem .75rem;
line-height: 1.5;
}
}
// small fix for image dialog
.tox-form__controls-h-stack div:not(:last-child) {
flex: 1;
}
.tox-collection__item-label {
white-space: nowrap; // fix TinyMCE bug
}
}
@media screen and (max-width: @screen-width-xs) {
div.tox {
.tox-dialog {
margin: 0 !important;
width: 100% !important;
height: 100%;
left: 0 !important;
top: 0 !important;
border-width: 0 !important;
}
.tox-dialog__header {
background-color: @color-layout-mobile-header-background;
.tox-button {
display: none;
}
}
.tox-dialog__title {
font-size: 1rem;
text-align: center;
padding: 0 1rem;
}
.tox-dialog__footer {
background-color: @color-layout-mobile-footer-background;
.tox-button {
color: @color-font !important;
background: transparent !important;
padding: .45rem;
margin: 0 !important;
border: 0;
font-size: 90%;
&:before {
display: block;
float: none;
width: 100%;
margin: 0;
line-height: 1.75;
height: 1.75rem;
}
&:active,
&:focus,
&:hover {
background: transparent;
border: 0;
box-shadow: none;
color: @color-font;
}
}
& > div {
justify-content: space-evenly;
display: flex;
width: 100%;
&:empty {
display: none;
}
}
}
}
}
/*** Media file selector for TinyMCE ***/
.image-selector {
padding: 1rem .5rem 10rem .5rem !important;
&.droptarget {
border: .2rem dashed @color-table-border;
&:after {
margin-top: 2rem;
}
}
form {
position: absolute;
top: 0;
}
.attachmentslist {
margin: 0;
overflow-x: hidden;
overflow-y: auto;
height: 19.1em;
padding: 0 !important;
li {
padding: .25rem;
cursor: pointer;
&:before {
display: none;
}
&:hover,
&:focus {
background: @color-list-selected-background;
}
span.name {
flex: 1;
margin: auto;
padding-left: 1rem;
.overflow-ellipsis();
}
span.img {
height: 80px;
width: 80px;
display: flex;
border: 1px solid @color-list-border;
background: white;
border-radius: .75rem;
overflow: hidden;
}
img {
margin: auto;
}
}
html.layout-phone & {
height: auto;
}
}
}
/*** HTML editor widget ***/
.html-editor {
position: relative;
margin-bottom: .2rem;
.editor-toolbar {
position: absolute;
left: 1px;
top: 1px;
right: 1px;
border-radius: .25rem .25rem 0 0;
border-bottom: 1px solid @color-input-border;
background-color: @color-input-addon-background;
.mce-i-html {
display: block;
margin: 2px 2px 2px 4px;
width: 34px;
height: 28px;
border-radius: .25rem;
color: #222f3e; // from TinyMCE
&:focus,
&:hover {
text-decoration: none;
border-color: #e2e4e7;
background-color: #dee0e2; // from TinyMCE
}
&:before {
&:extend(.font-icon-class);
content: @fa-var-image;
margin: 0;
width: 34px;
line-height: 28px;
}
&[disabled] {
opacity: .7;
cursor: not-allowed;
}
}
}
// hide toolbar in html mode and in mailvelope mode
&.mailvelope .editor-toolbar,
.tox-tinymce + .editor-toolbar {
display: none;
}
& > .googie_edit_layer,
& > textarea {
font-family: monospace;
font-size: 13px;
width: 100% !important;
padding-top: 40px;
resize: none;
}
& > iframe { // e.g. mailvelope frame
border-radius: .3rem;
border: 1px solid @color-input-border;
min-height: 30em;
}
}
/*** GoogieSpell widget ***/
.googie_window {
width: 16rem;
height: auto;
}
.googie_edit_layer {
font-family: monospace;
// from Bootstrap's textarea
padding: .5rem .75rem;
border: 1px solid @color-input-border;
border-radius: .3rem;
line-height: 1.5;
}
.googie_link {
color: @color-spellcheck-link;
text-decoration: underline;
cursor: pointer;
}
.googie_list {
li {
min-width: 8rem;
width: auto;
&.googie_list_onhover {
color: @color-menu-hover;
background-color: @color-menu-hover-background;
}
.googie_list_revert:before {
&:extend(.font-icon-class);
content: @fa-var-undo;
}
.googie_add_to_dict:before {
&:extend(.font-icon-class);
content: @fa-var-plus-square;
}
}
input {
display: inline-block;
margin: .25rem .5rem;
}
}

1429
styles/widgets/forms.less Normal file
View File

File diff suppressed because it is too large Load Diff

440
styles/widgets/jqueryui.less Normal file
View File

@ -0,0 +1,440 @@
/**
* Roundcube Webmail styles for the Elastic skin
*
* Copyright (c) The Roundcube Dev Team
*
* The contents are subject to the Creative Commons Attribution-ShareAlike
* License. It is allowed to copy, distribute, transmit and to adapt the work
* by keeping credits to the original authors in the README.md file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
/*** jQuery-UI widgets' style overrides ***/
.ui-widget-overlay {
background-color: @color-dialog-overlay-background;
opacity: 1 !important; // override jQuery-UI opacity, the color above is semi-transparent
&.datepicker {
z-index: 119; // above Bootstrap's form controls, below datepicker
}
}
.ui-widget {
border: 1px solid @color-datepicker-border;
box-shadow: 3px 3px 5px @color-popover-shadow;
border-radius: .3rem;
}
.ui-menu {
overflow-y: auto;
overflow-x: hidden;
max-height: 400px;
border-radius: .3rem;
z-index: 240;
position: absolute;
.ui-state-active {
border: 0 !important;
background-color: @color-menu-hover-background !important;
}
.ui-menu-item {
white-space: nowrap;
cursor: default;
}
.ui-menu-item-wrapper {
margin: 0 !important;
}
}
.ui-dialog {
border-radius: 0;
box-shadow: none;
&.no-titlebar {
.ui-dialog-titlebar {
display: none;
}
}
.ui-dialog-titlebar {
height: @layout-header-height;
border-bottom: 1px solid @color-dialog-header-border;
button {
&:before {
margin: 0;
}
}
}
.ui-dialog-title {
line-height: @layout-header-height;
font-size: 1.25rem;
padding: 0 3rem 0 1rem;
color: @color-dialog-header;
}
.ui-dialog-titlebar-close {
border: 0;
color: @color-dialog-header;
background: transparent;
right: 0;
top: 0;
position: absolute;
padding: .25rem .5rem;
margin: ((@layout-header-height - 2 * @page-font-size) / 2) .5rem;
&:before {
&:extend(.font-icon-class);
content: @fa-var-times;
line-height: 1.5rem;
margin: 0 !important;
}
}
.ui-dialog-content {
& > .popupmenu {
display: block !important;
}
}
.ui-dialog-buttonpane {
.ui-dialog-buttonset {
display: flex;
justify-content: flex-end;
a.btn-link,
button {
.overflow-ellipsis();
min-width: 5rem;
margin: floor(.65 * @page-font-size) floor(.3 * @page-font-size);
&:last-child {
margin-right: 0;
}
}
a.btn-link {
padding-right: 0;
padding-left: 0;
text-decoration: none;
color: @color-font;
&:focus {
background-color: fade(@color-btn-primary-background, 50%);
}
&.options {
order: -1;
padding: .375rem .25rem;
margin-right: .3rem;
&:before {
// this icon is for mobile version
&:extend(.font-icon-class);
content: @fa-var-cog;
width: 100%;
height: 1.25em;
}
}
}
}
}
iframe,
.ui-dialog-content.iframe {
padding: 0;
width: 100% !important;
height: 100%;
border: 0;
overflow: hidden;
}
}
// Fix scrollbar/resize issue e.g. in qr-code dialog
.ui-dialog,
.ui-dialog-content {
box-sizing: initial;
}
// Overwriting this icon generally prevents from loading bigger images sprite from jQuery-UI
.ui-widget-content .ui-icon.ui-resizable-se {
background: @icon-resize-corner;
}
/* FIXME: why do I need !important here? */
@media screen and (max-width: @screen-width-xs) {
.ui-dialog {
width: 100% !important;
height: 100% !important;
display: flex;
flex-direction: column;
border: 0;
top: 0 !important; // for Chrome
.ui-resizable-handle,
.ui-dialog-titlebar-close {
display: none !important;
}
.ui-dialog-titlebar {
height: @layout-touch-header-height;
text-align: center;
background-color: @color-layout-mobile-header-background;
}
.ui-dialog-title {
line-height: @layout-touch-header-height;
font-size: @layout-header-font-size;
padding: 0 1rem;
}
.ui-dialog-content {
flex: 1;
&:not(.iframe) {
padding: 1rem;
}
}
.ui-dialog-buttonpane {
padding: 0 !important;
text-align: center !important;
border-top: 1px solid @color-dialog-header-border;
height: @layout-header-height !important;
background-color: @color-layout-mobile-footer-background;
.ui-dialog-buttonset {
justify-content: space-around;
button {
margin: 0 !important;
padding: .45rem;
border: 0 !important;
height: @layout-header-height;
box-shadow: none;
font-size: 90%;
line-height: 1.5;
&:before {
display: block !important;
float: none;
width: auto;
height: 1.75rem;
line-height: 1.75;
margin: 0 !important;
}
&:active {
box-shadow: none;
}
&.btn-primary,
&.btn-secondary {
color: @color-toolbar-button;
background: transparent;
}
&.btn-danger {
color: @color-btn-danger-background;
background: transparent;
}
&.disabled,
&:disabled {
opacity: .5;
}
&.cancel {
order: 100; // makes Cancel/close button the last one
}
}
a.btn-link {
color: @color-toolbar-button;
margin: 0;
padding: .45rem;
font-size: 90%;
&.options:before {
display: block !important;
height: 1.75rem;
line-height: 1.75;
margin: 0;
}
}
}
}
}
}
/* Slider widget */
.ui-slider {
box-shadow: none;
.ui-slider-range {
border-radius: .3rem;
background: lighten(@color-main, 30%);
}
.ui-slider-handle {
border-radius: .3rem;
&.ui-state-active {
background: @color-main;
border-color: @color-main-dark;
}
}
}
/* Datepicker widget */
.ui-datepicker {
// Always display datepicker centered, overwriting widgets position
margin: ~"calc(50vh - 10em) calc(50vw - 10em) !important";
top: 0 !important;
left: 0 !important;
box-shadow: none;
user-select: none;
&:not(.ui-datepicker-inline) {
z-index: 120 !important; // fixes datepicker over input-group and dialogs
}
.ui-datepicker-header,
.ui-datepicker-title {
line-height: 4rem;
height: 4rem;
padding: 0;
}
.ui-datepicker-header {
border-bottom: 1px solid @color-dialog-header-border;
a {
height: 4rem;
}
select {
display: inline-block;
}
}
.ui-icon {
background-image: none !important;
background-position: none !important;
}
.ui-datepicker-prev,
.ui-datepicker-next {
cursor: pointer;
width: auto;
color: @color-font;
text-decoration: none;
&:before {
&:extend(.font-icon-class);
content: "\f053";
margin: 0 .25em;
height: auto;
width: 1em;
}
}
.ui-datepicker-prev:before {
content: "\f053";
}
.ui-datepicker-next:before {
content: "\f054";
}
td a {
padding: 0;
line-height: 1.8em;
border-radius: .3rem;
}
.ui-state-default,
&.ui-widget-content .ui-state-default {
border: 0;
background: transparent;
color: @color-datepicker-font;
}
.ui-datepicker-days-cell-over a,
.ui-datepicker-days-cell-over a.ui-state-default,
.ui-state-highlight,
&.ui-widget-content .ui-state-highlight {
background: @color-datepicker-highlight-background;
color: @color-datepicker-highlight;
}
a.ui-state-active {
background: @color-datepicker-active-background !important;
color: @color-datepicker-active !important;
font-weight: bold;
}
html.touch {
& {
td a {
font-size: 1.2em;
line-height: 2.2em;
}
}
}
}
// Fixes datepicker z-index issue on input-group inputs in dialogs
// With non-relative position the input's z-index is ignored
.input-group > .form-control.hasDatepicker {
position: initial;
}
.minicolors-panel {
border: 1px solid @color-datepicker-border;
box-shadow: 3px 3px 5px @color-popover-shadow;
border-radius: .3rem;
height: 152px;
padding: 1px;
}
.input-group {
.minicolors-input {
width: 100%;
// needed so minicolors panel is not out of screen
// when the input is on the right side, e.g. Calendar plugin settings
// This is obviously minicolors script issue
min-width: 130px;
border-left: 0;
border-right: 0;
}
}
@media screen and (max-width: @screen-width-mini) {
.ui-widget-content {
border-radius: 0;
}
.ui-menu {
border-radius: .3rem;
left: 15px !important;
right: 15px;
width: auto;
}
.ui-dialog {
.ui-dialog-content:not(.iframe) {
padding: .65rem;
}
}
.ui-autocomplete {
// TODO: e.g. time input autocompletion on mobile
}
}

1086
styles/widgets/lists.less Normal file
View File

File diff suppressed because it is too large Load Diff

952
styles/widgets/menu.less Normal file
View File

@ -0,0 +1,952 @@
/**
* Roundcube Webmail styles for the Elastic skin
*
* Copyright (c) The Roundcube Dev Team
*
* The contents are subject to the Creative Commons Attribution-ShareAlike
* License. It is allowed to copy, distribute, transmit and to adapt the work
* by keeping credits to the original authors in the README.md file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
/*** Toolbar widget ***/
.menu {
margin: 0;
text-align: center;
white-space: nowrap;
a {
.overflow-ellipsis();
text-decoration: none;
&:before {
&:extend(.font-icon-class);
content: "\00a0"; // blank placeholder
}
&:hover,
&:focus {
outline: 0;
}
&:not(.disabled):focus,
&:not(.disabled):hover {
background-color: @color-toolbar-button-background-hover;
}
}
&.toolbar {
li {
display: inline-block;
height: @layout-touch-header-height;
}
a {
color: @color-toolbar-button;
display: block;
float: left;
border: 0 !important;
height: @layout-header-height;
min-width: 3.2rem;
max-width: 6rem;
width: auto; // reset width defined for links in .listing
padding: .45rem;
line-height: 1.5;
cursor: pointer;
font-size: 1rem;
text-align: center;
&:before {
height: 1.75rem !important;
float: none !important;
width: auto !important;
margin: 0 !important;
}
&.selected {
color: @color-success;
}
}
& > .spacer {
width: 1em;
}
.dropbutton {
&:not(.disabled):hover {
background-color: @color-toolbar-button-background-hover;
}
a.dropdown {
padding: 0 .3rem;
&:before {
line-height: @layout-header-height;
}
&:hover {
background-color: darken(@color-toolbar-button-background-hover, 5%);
}
}
}
}
span.inner {
font-size: 90%;
font-weight: normal;
}
.dropbutton {
display: inline-block;
a.dropdown {
font-size: 75%;
min-width: 0;
html.ie11 &:before {
font-size: 80%;
}
span.inner {
display: none;
}
}
a:first-child {
padding-right: 0;
}
}
&.pagenav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 !important;
font-size: 100%; // in case this is .footer.small
a {
flex-grow: 1;
display: inline-block;
min-width: 2rem !important;
height: @layout-footer-small-height;
color: @color-toolbar-button;
&:before {
margin: 0;
display: inline;
float: none;
line-height: @layout-footer-small-height;
}
}
.pagenav-text {
.overflow-ellipsis();
color: @color-list-pagenav;
flex-grow: 4;
font-size: 80%;
}
input {
width: 3rem;
max-width: 5rem;
font-size: 90%;
text-align: center;
max-height: 1.6rem;
margin: 0 .2rem;
html.layout-phone & {
display: none;
}
}
span.inner {
display: none;
}
&.pagenav-list {
cursor: pointer;
background-color: @color-searchbar-background;
border-bottom: 1px solid @color-list-border;
a {
flex-grow: unset;
}
.pagenav-text {
text-align: left;
font-size: 100%;
}
& + .navlist {
background-color: #fbfbfb;
}
&.expanded + .navlist {
border-bottom: 1px solid @color-layout-border;
}
}
}
&.content-frame-navigation.hide-nav-buttons {
a.next,
a.prev {
display: none;
}
}
.listselectors {
max-width: 100%;
display: flex;
justify-content: space-around;
}
.buttons {
display: block;
button {
display: block;
float: left;
cursor: pointer;
color: @color-toolbar-button;
background-color: transparent;
border: 0;
padding: 0;
height: @layout-touch-header-height;
line-height: @layout-touch-header-height;
width: 2.5em;
&:before {
font-size: 1.75rem;
}
}
}
.popover & {
li {
display: block;
height: auto;
text-align: left;
&.spacer {
display: none;
}
&:last-child {
border: 0;
}
&.separator {
line-height: 1.5rem !important;
font-size: .75rem !important;
padding: 0 .5rem;
color: @color-popover-separator;
background-color: @color-popover-separator-background;
label {
margin: 0; // Unsets Bootstrap label margin, bug?
}
}
a {
height: unset;
max-width: 100%;
width: 100%;
line-height: @listing-line-height;
display: block;
padding: 0 .5rem;
text-align: left;
&:before {
line-height: inherit;
height: inherit !important;
margin-right: .5rem !important;
float: left !important;
width: 1.18em !important;
min-width: 1.18em;
}
&:not(.disabled):hover {
color: @color-menu-hover;
background-color: @color-menu-hover-background;
}
&[aria-haspopup] {
display: flex;
&:after {
&:extend(.font-icon-class);
color: @color-black-shade-text;
font-size: .9em;
margin: 0 0 0 .2em;
min-width: 1.18em;
content: @fa-var-chevron-right;
html.layout-small & {
margin: 0 .2em;
}
}
&.dropdown:after {
color: @color-list;
margin: 0 .6em !important;
}
&:hover:after {
color: @color-menu-hover;
}
& > span {
.overflow-ellipsis();
flex: 1;
}
}
}
span.inner {
font-size: 100%;
}
}
.dropbutton {
display: flex;
a:first-child {
.overflow-ellipsis();
flex: 1;
}
&:not(.disabled):hover {
background-color: @color-popover-mobile-dropbutton-background;
}
a.dropdown {
width: 3.5rem;
padding: 0 .5em;
background-color: @color-popover-mobile-dropbutton-background;
&:hover {
background-color: @color-menu-hover-background;
}
// Note: :before icon is replaced with :after icon by a[aria-haspopup] above
&:before,
span.inner {
display: none;
}
}
}
&.no-icon a:before {
display: none;
}
}
}
@media screen and (min-width: (@screen-width-small + 1px)) {
.content-frame-navigation {
display: none !important;
}
.header a.button.icon {
&:not(.disabled):focus,
&:not(.disabled):hover {
background-color: @color-toolbar-button-background-hover;
outline: 0;
}
&:before {
margin: 0;
}
}
}
@media screen and (max-width: @screen-width-small) {
.menu.footer {
justify-content: space-around !important;
& > * {
flex-grow: 1;
}
.buttons {
display: flex;
justify-content: space-evenly;
}
.listselectors > * {
flex-grow: 1;
}
}
.menu.listing a {
color: @color-font;
}
}
a.toolbar-button {
cursor: pointer;
@media screen and (min-width: (@screen-width-large + 1px)) {
line-height: 1.5;
padding: .45rem;
&:before {
float: none !important;
height: 1.75rem !important;
line-height: 1.5;
width: auto !important;
}
span.inner {
display: inline !important;
font-weight: normal;
font-size: 90%;
}
}
}
/*** Menu button icons ***/
.menu a {
&.mail:before {
content: @fa-var-envelope;
}
&.contacts:before {
content: @fa-var-users;
}
&.options:before {
content: @fa-var-sliders-h;
}
&.settings:before {
content: @fa-var-cog;
}
&.theme.light:before {
content: @fa-var-sun;
}
&.theme.dark:before {
content: @fa-var-moon;
}
&.help:before {
content: @fa-var-life-ring;
}
&.logout:before {
content: @fa-var-power-off;
}
&.about:before {
content: @fa-var-question;
}
&.refresh:before {
content: @fa-var-sync;
}
&.compose:before {
content: @fa-var-edit;
}
&.calendar:before {
content: @fa-var-calendar-alt;
}
&.tasklist:before {
content: @fa-var-tasks;
}
&.files:before {
content: @fa-var-folder;
}
&.notes:before {
content: @fa-var-sticky-note;
}
&.chat:before {
content: @fa-var-comments;
}
&.actions:before {
content: @fa-var-cog;
}
&.addressbook:before {
content: @fa-var-user;
}
&.archive:before {
content: @fa-var-archive;
}
&.assigngroup:before {
content: @fa-var-user-plus;
}
&.attach:before,
&.vcard:before {
content: @fa-var-paperclip;
}
&.next:before {
content: @fa-var-arrow-right;
}
&.prev:before,
&.back:before {
content: @fa-var-arrow-left;
}
&.check:before {
content: "\00a0"; // just a space
}
&.check.selected:before {
content: @fa-var-check;
}
&.closewin:before {
content: @fa-var-window-close;
}
&.collapse:before {
content: @fa-var-angle-down;
}
&.copy:before {
content: @fa-var-copy;
}
&.create:before {
content: @fa-var-plus-square;
}
&.delete:before {
content: @fa-var-trash-alt;
}
&.download:before,
&.download.eml:before,
&.download.maildir:before,
&.download.mbox:before {
content: @fa-var-download;
}
&.dropdown:before {
content: @fa-var-caret-down;
}
&.edit:before {
content: @fa-var-pencil-alt;
}
&.encrypt:before,
&.enigma:before {
content: @fa-var-lock;
}
&.encrypt.sign:before {
content: @fa-var-lock; // TODO
}
&.expand:before {
content: @fa-var-angle-right;
}
&.expand.all:before {
content: @fa-var-angle-double-down;
}
&.expand.none:before {
content: @fa-var-angle-double-up;
}
&.export:before,
&.export.all:before,
&.export.selection:before {
content: @fa-var-download;
}
&.expunge:before {
content: @fa-var-compress-arrows-alt;
}
&.extwin:before {
content: @fa-var-external-link-square-alt;
}
&.filterlink:before {
content: @fa-var-filter;
}
&.firstpage:before {
content: @fa-var-angle-double-left;
}
&.nextpage:before {
content: @fa-var-angle-right;
}
&.prevpage:before {
content: @fa-var-angle-left;
}
&.lastpage:before {
content: @fa-var-angle-double-right;
}
&.flag:before,
&.select.flagged:before {
.font-icon-solid(@fa-var-flag);
}
&.unflag:before {
.font-icon-regular(@fa-var-flag);
}
&.undo:before {
content: @fa-var-redo;
}
&.folders:before {
content: @fa-var-folder;
}
&.forward:before,
&.forward.attachment:before,
&.forward.bounce:before,
&.forward.inline:before {
content: @fa-var-share;
}
&.import:before,
&.upload:before {
content: @fa-var-upload;
}
&.insertresponse:before {
content: @fa-var-comment;
}
&.junk:before {
content: @fa-var-fire-alt;
}
&.notjunk:before {
content: @fa-var-inbox;
}
&.markmessage:before {
content: @fa-var-tag;
}
&.more:before {
content: @fa-var-ellipsis-h;
}
&.move:before {
content: @fa-var-folder-open;
}
&.print:before {
content: @fa-var-print;
}
&.properties:before {
content: @fa-var-file;
}
&.purge:before {
content: @fa-var-eraser;
}
&.qrcode:before {
content: @fa-var-qrcode;
}
&.read:before {
.font-icon-regular(@fa-var-envelope-open);
}
&.unread:before,
&.expand.unread:before,
&.select.unread:before {
.font-icon-solid(@fa-var-envelope);
}
&.recipient:before {
.font-icon-regular(@fa-var-envelope);
}
&.refresh:before {
content: @fa-var-sync;
}
&.remove:before {
content: @fa-var-eraser;
}
&.removegroup:before {
content: @fa-var-user-times;
}
&.rename:before {
content: @fa-var-pencil-alt;
}
&.reply:before {
content: @fa-var-reply;
}
&.reply-all:before,
&.reply.all:before,
&.reply.list:before {
content: @fa-var-reply-all;
}
&.responses:before {
content: @fa-var-comment;
}
&.rotate:before {
content: @fa-var-redo-alt;
}
&.save:before {
.font-icon-regular(@fa-var-save);
}
&.search:before {
content: @fa-var-search;
}
&.search.delete:before {
content: @fa-var-trash-alt;
}
&.select:before {
content: @fa-var-mouse-pointer;
}
&.select.all:before {
content: @fa-var-asterisk;
}
&.select.invert:before {
content: @fa-var-check-square;
}
&.select.none:before {
.font-icon-solid(@fa-var-times);
}
&.select.page:before {
.font-icon-solid(@fa-var-bars);
}
&.selection:before {
.font-icon-regular(@fa-var-check-square) !important;
}
&.send:before {
content: @fa-var-paper-plane;
}
&.showurl:before {
content: @fa-var-link;
}
&.signature:before {
content: @fa-var-signature;
}
&.source:before {
content: @fa-var-file-code;
}
&.spellcheck:before {
content: @fa-var-spell-check;
}
&.status:before {
.font-icon-regular(@fa-var-lightbulb);
}
&.submit:before {
content: @fa-var-check;
}
&.info:before {
content: @fa-var-info-circle;
}
&.threads:before {
content: @fa-var-comments;
}
&.zoomin:before {
content: @fa-var-search-plus;
}
&.zoomout:before {
content: @fa-var-search-minus;
}
}
/*** Searchbar and searchoptions widgets ***/
.searchbar {
height: @layout-searchbar-height;
min-height: @layout-searchbar-height; // because of Flexbox
line-height: @layout-searchbar-height;
background-color: @color-searchbar-background;
border-bottom: 1px solid @color-list-border;
display: flex;
align-items: center;
overflow: hidden;
position: relative;
form {
flex: 1;
display: flex;
&:before {
&:extend(.font-icon-class);
content: @fa-var-search;
height: @layout-searchbar-height;
color: @color-list-pagenav;
margin: 0 0 0 .75rem;
}
}
input {
width: 100%;
border: 0;
background: transparent;
padding: .5rem;
line-height: normal; // fixes placeholder misalignment in IE11
outline: 0; // removes focus outline in Chrome
&::-ms-clear {
display: none; // for IE
}
}
a {
color: @color-toolbar-button;
&:before {
&:extend(.font-icon-class);
width: 2rem;
height: @layout-searchbar-height;
margin: 0;
}
&.options:before {
content: @fa-var-angle-down;
}
&.reset:before {
content: @fa-var-times;
font-size: 1rem;
}
&.unread:before {
.font-icon-solid(@fa-var-envelope);
}
&.reset,
&.search {
display: none;
}
&.selected {
color: @color-success;
}
}
span.inner {
display: none;
}
&.active {
a.reset {
display: inline;
}
}
&.open a.options:before {
content: @fa-var-angle-up;
}
}
.searchoptions {
button.search {
width: 100%;
}
ul.proplist {
& + div {
margin-top: 1rem;
}
}
.input-group {
&:not(:last-child) {
margin-bottom: .5rem;
}
.input-group-prepend {
width: 30%;
}
label {
width: 100%;
}
}
.formbuttons {
// this is needed because we hide .formbuttons on small devices
// we don't want it for search options form
display: block !important;
}
}
/*** Taskmenu ***/
#taskmenu {
a {
display: block;
float: none;
}
@media screen and (max-width: @screen-width-xs) {
z-index: 30001; // because autocompletion popup uses z-index:30000
overflow-x: hidden;
a {
max-width: unset;
padding: 0 .5em;
margin-top: 1px;
text-align: left;
line-height: @layout-touch-menu-record-height;
height: @layout-touch-menu-record-height;
border-bottom: 1px solid @color-list-border !important;
color: @color-list;
font-size: 1.2rem;
&:before {
float: left !important;
width: 1.2em !important;
margin-right: .5rem !important;
}
}
span.inner {
font-size: 100%;
}
}
@media screen and (min-width: (@screen-width-xs + 1px)) {
a {
color: @color-taskmenu-button;
padding: .45rem 0;
min-width: unset;
&.selected {
color: @color-taskmenu-button-selected;
background: @color-taskmenu-button-selected-background;
&:hover {
color: @color-taskmenu-button-selected-hover;
background: @color-taskmenu-button-background-hover;
}
}
&:hover {
color: @color-taskmenu-button-hover;
background: @color-taskmenu-button-background-hover;
}
}
.special-buttons {
position: absolute;
bottom: 0;
left: 0;
background-color: @color-taskmenu-background;
}
.action-buttons {
a {
color: @color-taskmenu-button-action;
background: @color-taskmenu-button-action-background;
&:hover {
color: @color-taskmenu-button-action-hover;
background: @color-taskmenu-button-action-background-hover;
}
}
}
a.logout {
color: @color-taskmenu-button-logout !important;
&:hover {
color: @color-taskmenu-button-logout-hover !important;
}
}
}
@media screen and (min-width: (@screen-width-xs + 1px)) and (max-width: @screen-width-medium) {
a {
width: @layout-menu-width-sm;
height: @layout-menu-width-sm;
font-size: 1.2rem;
padding: 0;
&:before {
line-height: @layout-menu-width-sm;
}
}
span.inner {
display: none;
}
}
@media screen and (min-width: (@screen-width-medium + 1px)) {
a {
width: @layout-menu-width;
font-size: 1rem;
&:before {
float: none; // fixed overflowing text in Edge
}
&:focus {
background-color: @color-taskmenu-button-selected-background;
}
}
span.inner {
padding: 0 .1em;
}
}
}

267
styles/widgets/messages.less Normal file
View File

@ -0,0 +1,267 @@
/**
* Roundcube Webmail styles for the Elastic skin
*
* Copyright (c) The Roundcube Dev Team
*
* The contents are subject to the Creative Commons Attribution-ShareAlike
* License. It is allowed to copy, distribute, transmit and to adapt the work
* by keeping credits to the original authors in the README.md file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
/*** UI Messages ***/
// .boxwarning/.boxerror/.boxinformation classes are converted to .ui.alert in bootstrap_init()
.ui.alert {
margin: 0;
margin-bottom: .2rem;
opacity: .95;
width: 100%;
padding: .75em;
color: @color-message;
border: 1px solid @color-message-border;
background-color: @color-message-background;
display: flex;
align-items: center;
@media screen and (max-width: @screen-width-xs) {
border: 0;
}
span {
margin: auto 0;
}
& > i.icon {
line-height: 1;
color: lighten(@color-black, 25%);
margin: auto 0;
}
& > i.icon:before {
&:extend(.font-icon-class);
content: @fa-var-info-circle;
margin-right: .6rem;
}
.btn {
margin-left: .5rem;
}
&.loading {
color: @color-message-loading;
& > i.icon:before {
content: @fa-var-circle-notch;
.animated-icon-class();
width: 1em;
}
}
&.alert-success > i.icon:before {
content: @fa-var-check-circle;
color: @color-message-success;
}
&.alert-warning > i.icon:before {
content: @fa-var-exclamation-triangle;
color: @color-message-warning;
}
&.alert-danger > i.icon:before {
content: @fa-var-exclamation-circle;
color: @color-message-error;
}
&.vcardattachment > i.icon:before {
content: @fa-var-address-card; // vcard_attachments plugin
}
&.enigmaattachment > i.icon:before {
content: @fa-var-key; // enigma plugin
}
&.signed > i.icon:before,
&.encrypted > i.icon:before {
content: @fa-var-lock; // enigma plugin
}
&.chat > i.icon:before {
content: @fa-var-comment;
}
// #6797: Fix for long buttons issue
.boxbuttons {
white-space: nowrap;
.btn {
.overflow-ellipsis();
max-width: 220px;
}
@media screen and (max-width: @screen-width-xs) {
display: flex;
flex-direction: column;
.btn {
max-width: 160px;
&:not(:first-child) {
margin-top: .25rem;
}
}
}
}
// This works with following structure: <i> <span> [button].
// <span> here is a one-line text, and button can be anything but <span>.
&.aligned-buttons {
display: flex;
span {
flex: 1;
}
}
a:not(.btn) {
color: @color-message-link;
font-weight: @color-message-link-font-weight;
}
h3 {
font-weight: bold;
font-size: 1.2rem;
}
p {
margin: 1rem 0;
}
&.boxerror,
&.boxconfirmation,
&.boxinformation,
&.boxwarning {
padding: .5em;
border-radius: 0;
i.icon {
font-size: 1.5em !important;
}
}
&.boxerror {
background-color: @color-message-error-box-background;
& when not(@color-message-error-box = @color-message) { color: @color-message-error-box; }
}
&.boxinformation {
background-color: @color-message-information-box-background;
& when not(@color-message-information-box = @color-message) { color: @color-message-information-box; }
}
&.boxconfirmation {
background-color: @color-message-success-box-background;
& when not(@color-message-error-box = @color-message) { color: @color-message-error-box; }
}
&.boxwarning {
background-color: @color-message-warning-box-background;
& when not(@color-message-warning-box = @color-message) { color: @color-message-warning-box; }
}
& + table {
margin-top: 1em;
}
}
#messagestack {
position: absolute;
bottom: .5em;
right: .7em;
z-index: 105; // needs to be above .ui-widget-overlay
width: 320px;
height: auto;
max-height: 85%;
@media screen and (max-width: @screen-width-xs) {
left: 0;
right: 0;
bottom: 0;
width: auto;
}
div {
background-color: @color-message;
color: @color-message-text;
@media screen and (max-width: @screen-width-xs) {
margin: 0;
border-radius: 0;
min-height: 4.2rem;
}
&.voice {
position: absolute;
top: -1000px;
}
i.icon {
font-size: 1.5em !important;
}
& > i.icon:before {
color: @color-message-text;
}
&:last-child {
margin-bottom: 0;
}
}
.loading {
background-color: @color-message-loading;
& when not(@color-message-loading-text = @color-message-text) { color: @color-message-loading-text; }
& > i.icon:before {
& when not(@color-message-loading-text = @color-message-text) { color: @color-message-loading-text; }
}
}
.alert-info.information {
background-color: @color-message-information;
& when not(@color-message-information-text = @color-message-text) { color: @color-message-information-text; }
& > i.icon:before {
& when not(@color-message-information-text = @color-message-text) { color: @color-message-information-text; }
}
}
.alert-success {
background-color: @color-message-success;
& when not(@color-message-success-text = @color-message-text) { color: @color-message-success-text; }
& > i.icon:before {
& when not(@color-message-success-text = @color-message-text) { color: @color-message-success-text; }
}
}
.alert-warning {
background-color: @color-message-warning;
& when not(@color-message-warning-text = @color-message-text) { color: @color-message-warning-text; }
& > i.icon:before {
& when not(@color-message-warning-text = @color-message-text) { color: @color-message-warning-text; }
}
}
.alert-danger {
background-color: @color-message-error;
& when not(@color-message-error-text = @color-message-text) { color: @color-message-error-text; }
& > i.icon:before {
& when not(@color-message-error-text = @color-message-text) { color: @color-message-error-text; }
}
}
a {
color: inherit !important;
text-decoration: underline;
cursor: pointer;
}
}

0
styles/widgets/styles.min.css vendored Normal file
View File

16
templates/about.html Normal file
View File

@ -0,0 +1,16 @@
<roundcube:include file="includes/layout.html" />
<h1 class="voice"><roundcube:label name="about" /></h1>
<div class="frame-content">
<roundcube:object name="aboutcontent" />
<h2 class="sysname">Roundcube Webmail <roundcube:object name="version" /></h2>
<p class="copyright"><roundcube:object name="copyright" /></p>
<p class="license"><roundcube:object name="license" /></p>
<div class="readtext">
<h3><roundcube:label name="installedplugins" /></h3>
<roundcube:object name="pluginlist" id="pluginlist" class="records-table" />
</div>
</div>
<roundcube:include file="includes/footer.html" />

157
templates/addressbook.html Normal file
View File

@ -0,0 +1,157 @@
<roundcube:include file="includes/layout.html" />
<roundcube:include file="includes/menu.html" />
<h1 class="voice"><roundcube:label name="addressbook" /></h1>
<!-- sources/groups list -->
<div id="layout-sidebar" class="listbox" role="navigation" aria-labelledby="directorylist-header">
<div class="header">
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
<span id="directorylist-header" class="header-title"><roundcube:label name="groups" /></span>
<roundcube:button name="groupoptions" type="link" title="arialabelabookgroupoptions" label="actions"
class="button icon sidebar-menu" innerClass="inner" data-popup="groupoptions-menu" />
</div>
<div class="scroller">
<roundcube:object name="directorylist" id="directorylist" class="treelist listing iconized" />
<h3 class="voice"><roundcube:label name="savedsearches" /></h3>
<roundcube:object name="savedsearchlist" id="savedsearchlist" class="treelist listing iconized" />
</div>
</div>
<!-- contacts list -->
<div id="layout-list" class="listbox selected" aria-labelledby="aria-label-contactslist">
<div class="header">
<a class="button icon task-menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
<a class="button icon back-sidebar-button folders" href="#sidebar"><span class="inner"><roundcube:label name="groups" /></span></a>
<roundcube:object name="addresslisttitle" label="contacts" tag="span" class="header-title" />
<div class="toolbar menu" role="toolbar">
<a href="#select" class="button select disabled" data-popup="listselect-menu" data-toggle-button="list-toggle-button" title="<roundcube:label name="select" />"><span class="inner"><roundcube:label name="select" /></span></a>
<roundcube:container name="listcontrols" id="listcontrols" />
</div>
<a class="button icon toolbar-menu-button" href="#list-menu"><span class="inner"><roundcube:label name="menu" /></span></a>
</div>
<roundcube:object name="searchform" id="searchform" wrapper="searchbar menu"
label="contactsearchform" buttontitle="findcontacts" options="searchmenu" ariatag="h2" />
<div id="searchmenu" class="hidden searchoptions scroller propform formcontainer" aria-labelledby="aria-label-search-menu">
<h3 id="aria-label-search-menu" class="voice"><roundcube:label name="searchmod" /></h3>
<div class="formcontent">
<ul class="proplist">
<li><label><input type="checkbox" name="s_mods[]" value="name" /><roundcube:label name="name" /></label></li>
<li><label><input type="checkbox" name="s_mods[]" value="firstname" /><roundcube:label name="firstname" /></label></li>
<li><label><input type="checkbox" name="s_mods[]" value="surname" /><roundcube:label name="surname" /></label></li>
<li><label><input type="checkbox" name="s_mods[]" value="email" /><roundcube:label name="email" /></label></li>
<li><label><input type="checkbox" name="s_mods[]" value="*" /><roundcube:label name="allfields" /></label></li>
</ul>
</div>
<div class="formbuttons">
<button type="button" class="btn btn-primary icon search" onclick="return rcmail.command('search')"><roundcube:label name="search" /></button>
</div>
</div>
<div class="scroller">
<h2 id="aria-label-contactslist" class="voice"><roundcube:label name="contacts" /></h2>
<roundcube:object name="addresslist" id="contacts-table" class="listing iconized contactlist"
noheader="true" role="listbox" data-list="contact_list"
data-label-msg="listempty" data-label-ext="listusebutton" data-create-command="add" />
</div>
<roundcube:include file="includes/pagenav.html" />
</div>
<!-- contact details frame -->
<div id="layout-content" role="main">
<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
<div class="header" role="toolbar" aria-labelledby="aria-label-toolbar">
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
<span class="header-title"></span>
<!-- toolbar -->
<div id="addressbooktoolbar" class="toolbar menu">
<roundcube:button command="add" type="link" class="create disabled" classAct="create"
label="create" title="newcontact" innerclass="inner" data-fab="true" />
<roundcube:button command="print" type="link" data-hidden="small"
class="print disabled" classAct="print"
label="print" title="printcontact" innerclass="inner" />
<roundcube:button command="delete" type="link" class="delete disabled" classAct="delete"
label="delete" title="deletecontact" innerClass="inner" />
<span class="spacer"></span>
<roundcube:button command="advanced-search" type="link" class="search disabled" classAct="search"
label="search" title="advsearch" innerclass="inner" />
<roundcube:container name="toolbar" id="addressbooktoolbar" />
<roundcube:button command="import" type="link" class="import disabled" classAct="import"
label="import" title="importcontacts" innerclass="inner" />
<span class="dropbutton">
<roundcube:button command="export" type="link" class="export disabled" classAct="export"
label="export" title="exportvcards" innerclass="inner" />
<a href="#export" class="dropdown" data-popup="export-menu">
<span class="inner"><roundcube:label name="arialabelcontactexportoptions" /></span>
</a>
</span>
<roundcube:button name="contactmenulink" id="contactmenulink" type="link"
class="more" label="more" title="moreactions"
data-popup="contact-menu" innerclass="inner" />
</div>
</div>
<h2 id="aria-label-contact-frame" class="voice"><roundcube:label name="contactproperties" /></h2>
<div class="iframe-wrapper">
<roundcube:object name="contentframe" id="contact-frame" src="env:blankpage" title="contactproperties"
aria-labelledby="aria-label-contact-frame" />
</div>
</div>
<!-- popup menus -->
<div id="export-menu" class="popupmenu">
<h3 id="aria-label-export-menu" class="voice"><roundcube:label name="arialabelcontactexportoptions" /></h3>
<ul class="menu listing" role="menu" aria-labelledby="aria-label-export-menu">
<roundcube:button type="link-menuitem" command="export" label="exportall" prop="sub" class="export all disabled" classAct="export all active" />
<roundcube:button type="link-menuitem" command="export-selected" label="exportsel" prop="sub" class="export select disabled" classAct="export select active" />
</ul>
</div>
<div id="groupoptions-menu" class="popupmenu">
<h3 id="aria-label-groupoptions-menu" class="voice"><roundcube:label name="arialabelabookgroupoptions" /></h3>
<ul class="menu listing" role="menu" aria-labelledby="aria-label-groupoptions-menu">
<roundcube:button type="link-menuitem" command="group-create" title="newgroup" label="addgroup" class="create disabled" classAct="create active" />
<roundcube:button type="link-menuitem" command="group-rename" label="grouprename" class="group rename disabled" classAct="group rename active" />
<roundcube:button type="link-menuitem" command="group-delete" label="groupdelete" class="group delete disabled" classAct="group delete active" />
<roundcube:button type="link-menuitem" command="search-create" label="searchsave" class="search disabled" classAct="search active" />
<roundcube:button type="link-menuitem" command="search-delete" label="searchdelete" class="search delete disabled" classAct="search delete active" />
<roundcube:container name="groupoptions" id="groupoptionsmenu" />
</ul>
</div>
<div id="listselect-menu" class="popupmenu">
<h3 id="aria-label-listselect-menu" class="voice"><roundcube:label name="arialabellistselectmenu" /></h3>
<ul class="menu listing" role="menu" aria-labelledby="aria-label-listselect-menu">
<roundcube:button type="link-menuitem" label="selection" class="selection" classAct="selection active"
name="list-toggle-button" id="list-toggle-button" onclick="UI.toggle_list_selection(this, 'contacts-table')" />
<roundcube:button command="select-all" type="link-menuitem" prop="page" label="currpage" class="select page disabled" classAct="select page active" />
<roundcube:button command="select-all" type="link-menuitem" prop="invert" label="invert" class="select invert disabled" classAct="select invert active" />
<roundcube:button command="select-none" type="link-menuitem" label="none" class="select none disabled" classAct="select none active" />
</ul>
</div>
<div id="dragcontact-menu" class="popupmenu">
<h3 id="aria-label-dragcontact-menu" class="voice"><roundcube:label name="arialabeldropactionmenu" /></h3>
<ul class="menu listing" role="menu" aria-labelledby="aria-label-dragcontact-menu">
<roundcube:button type="link-menuitem" command="move" onclick="return rcmail.drag_menu_action('move')" label="move" class="disabled" classAct="active" />
<roundcube:button type="link-menuitem" command="copy" onclick="return rcmail.drag_menu_action('copy')" label="copy" class="disabled" classAct="active" />
</ul>
</div>
<div id="contact-menu" class="popupmenu">
<h3 id="aria-label-contact-menu" class="voice"><roundcube:label name="arialabelmorecontactactions" /></h3>
<ul class="menu listing" role="menu" aria-labelledby="aria-label-contact-menu">
<roundcube:if condition="env:qrcode" />
<roundcube:button type="link-menuitem" command="qrcode" label="qrcode" class="qrcode disabled" classAct="qrcode active" />
<roundcube:endif />
<roundcube:button type="link-menuitem" command="group-assign-selected" label="groupassign" class="assigngroup disabled" classAct="assigngroup active" innerclass="folder-selector-link" aria-haspopup="true" />
<roundcube:button type="link-menuitem" command="group-remove-selected" label="groupremove" class="removegroup disabled" classAct="removegroup active" />
<roundcube:if condition="env:contact_move_enabled" />
<roundcube:button type="link-menuitem" command="move" label="moveto" class="move disabled" classAct="move active" innerclass="folder-selector-link" aria-haspopup="true" />
<roundcube:endif />
<roundcube:if condition="env:contact_copy_enabled" />
<roundcube:button type="link-menuitem" command="copy" label="copyto" class="copy disabled" classAct="copy active" innerclass="folder-selector-link" aria-haspopup="true" />
<roundcube:endif />
<roundcube:container name="contactmenu" id="contact-menu" />
</ul>
</div>
<roundcube:include file="includes/footer.html" />

74
templates/bounce.html Normal file
View File

@ -0,0 +1,74 @@
<roundcube:include file="includes/layout.html" />
<h1 class="voice"><roundcube:label name="bouncemsg" /></h1>
<div class="formcontent">
<roundcube:object name="bounceObjects" id="bounce-objects" class="mb-3" />
<roundcube:object name="composeFormHead" role="main" />
<div id="bounceheaders" role="region" aria-labelledby="aria-label-composeheaders">
<h2 id="aria-label-composeheaders" class="voice"><roundcube:label name="arialabelmessageheaders" /></h2>
<div class="compose-headers">
<div id="compose_from" class="form-group row">
<label for="_from" class="col-2 col-form-label"><roundcube:label name="from" /></label>
<div class="col-10">
<div class="input-group">
<roundcube:object name="composeHeaders" part="from" id="_from" form="form" tabindex="1" class="form-control" />
<span class="input-group-append">
<a href="#identities" onclick="return rcmail.command('switch-task', 'settings/identities')" class="input-group-text icon edit" title="<roundcube:label name="editidents" />" tabindex="1"><span class="inner"><roundcube:label name="editidents" /></span></a>
</div>
</div>
</div>
<div id="compose_to" class="form-group row">
<label for="_to" class="col-2 col-form-label"><roundcube:label name="to" /></label>
<div class="col-10">
<div class="input-group">
<roundcube:object name="composeHeaders" part="to" id="_to" form="form" tabindex="1" aria-required="true" data-recipient-input="true" />
<span class="input-group-append">
<a href="#add-header" data-popup="headers-menu" class="input-group-text icon add" title="<roundcube:label name="addheader" />" tabindex="1"><span class="inner"><roundcube:label name="addheader" /></span></a>
</span>
</div>
</div>
</div>
<div id="compose_cc" class="hidden form-group row">
<label for="_cc" class="col-2 col-form-label"><roundcube:label name="cc" /></label>
<div class="col-10">
<div class="input-group">
<roundcube:object name="composeHeaders" part="cc" id="_cc" form="form" tabindex="1" data-recipient-input="true" />
<span class="input-group-append">
<a href="#delete" onclick="UI.header_reset('_cc')" class="input-group-text icon delete" title="<roundcube:label name='delete' />" tabindex="1"><span class="inner"><roundcube:label name="delete" /></span></a>
</span>
</div>
</div>
</div>
<div id="compose_bcc" class="hidden form-group row">
<label for="_bcc" class="col-2 col-form-label"><roundcube:label name="bcc" /></label>
<div class="col-10">
<div class="input-group">
<roundcube:object name="composeHeaders" part="bcc" id="_bcc" form="form" tabindex="1" data-recipient-input="true" />
<span class="input-group-append">
<a href="#delete" onclick="UI.header_reset('_bcc')" class="input-group-text icon delete" title="<roundcube:label name='delete' />" tabindex="1"><span class="inner"><roundcube:label name="delete" /></span></a>
</span>
</div>
</div>
</div>
</div>
<roundcube:if condition="!config:no_save_sent_messages" />
<div class="form-group row">
<label for="compose-store-target" class="col-form-label col-6"><roundcube:label name="savesentmessagein" /></label>
<div class="col-6">
<roundcube:object name="storetarget" id="compose-store-target" noform="true" tabindex="2" class="form-control" />
</div>
</div>
<roundcube:endif />
</form>
</div>
<div id="headers-menu" class="popupmenu" data-popup-init="headersmenu">
<h3 id="aria-label-headersmenu" class="voice"><roundcube:label name="arialabelheadersmenu" /></h3>
<ul class="menu listing" role="menu" aria-labelledby="aria-label-headersmenu">
<li role="menuitem"><a data-target="cc" href="#" role="button" tabindex="-1" class="recipient active"><roundcube:label name="cc" /></a></li>
<li role="menuitem"><a data-target="bcc" href="#" role="button" tabindex="-1" class="recipient active"><roundcube:label name="bcc" /></a></li>
</ul>
</div>
<roundcube:include file="includes/footer.html" />

286
templates/compose.html Normal file
View File

@ -0,0 +1,286 @@
<roundcube:include file="includes/layout.html" />
<roundcube:include file="includes/menu.html" condition="!env:extwin && !env:framed" />
<roundcube:add_label name="recipientsadded" />
<roundcube:add_label name="nocontactselected" />
<roundcube:add_label name="recipient" />
<roundcube:add_label name="insert" />
<roundcube:add_label name="insertcontact" />
<roundcube:add_label name="recipientedit" />
<h1 class="voice"><roundcube:label name="compose" /></h1>
<!-- compose options and attachments list -->
<div id="layout-sidebar" class="listbox sidebar-right">
<div class="header">
<a class="button icon back-content-button" href="#content" data-hidden="big"><span class="inner"><roundcube:label name="back" /></span></a>
<span class="header-title all-sizes"><roundcube:label name="optionsandattachments" /></span>
</div>
<div class="scroller">
<!-- attachments -->
<div id="compose-attachments" class="file-upload" role="region" aria-labelledby="aria-label-compose-attachments">
<h2 id="aria-label-compose-attachments" class="voice"><roundcube:label name="attachments" /></h2>
<div class="upload-form">
<roundcube:object name="composeAttachmentForm" mode="hint" />
<button type="button" class="btn btn-secondary attach" tabindex="2" onclick="rcmail.upload_input('uploadform')"><roundcube:label name="addattachment" /></button>
</div>
<roundcube:object name="composeAttachmentList" id="attachment-list" class="attachmentslist" tabindex="2" />
<roundcube:object name="fileDropArea" id="compose-attachments" />
</div>
<!-- compose options -->
<div id="compose-options" class="formcontent" role="region" aria-labelledby="aria-label-composeoptions">
<h2 id="aria-label-composeoptions" class="voice"><roundcube:label name="arialabelcomposeoptions" /></h2>
<roundcube:container name="composeoptions" id="compose-options" />
<roundcube:if condition="!in_array('mdn_default', (array)config:dont_override)" />
<div class="form-group row form-check">
<label for="compose-mdn" class="col-form-label col-6"><roundcube:label name="returnreceipt" /></label>
<div class="col-6 form-check">
<roundcube:object name="mdnCheckBox" id="compose-mdn" noform="true" tabindex="2" class="form-check-input" />
</div>
</div>
<roundcube:endif />
<roundcube:if condition="!in_array('dsn_default', (array)config:dont_override)" />
<div class="form-group row form-check">
<label for="compose-dsn" class="col-form-label col-6"><roundcube:label name="dsn" /></label>
<div class="col-6 form-check">
<roundcube:object name="dsnCheckBox" id="compose-dsn" noform="true" tabindex="2" class="form-check-input" />
</div>
</div>
<roundcube:endif />
<div class="form-group row form-check">
<label for="compose-keep-formatting" class="col-form-label col-6"><roundcube:label name="keepformatting" /></label>
<div class="col-6 form-check">
<roundcube:object name="keepFormattingCheckBox" id="compose-keep-formatting" noform="true" tabindex="2" class="form-check-input" />
</div>
</div>
<div class="form-group row">
<label for="compose-priority" class="col-form-label col-6"><roundcube:label name="priority" /></label>
<div class="col-6">
<roundcube:object name="prioritySelector" id="compose-priority" noform="true" tabindex="2" class="custom-select" />
</div>
</div>
<roundcube:if condition="!config:no_save_sent_messages" />
<div class="form-group row">
<label for="compose-store-target" class="col-form-label col-6"><roundcube:label name="savesentmessagein" /></label>
<div class="col-6">
<roundcube:object name="storetarget" id="compose-store-target" noform="true" tabindex="2" class="custom-select" />
</div>
</div>
<roundcube:endif />
</div>
</div>
</div>
<div id="layout-content" class="listbox selected" role="main">
<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
<div class="header">
<a class="button icon task-menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
<span class="header-title"><roundcube:label name="compose" /></span>
<div id="composestatusbar" class="position-absolute"></div>
<!-- toolbar -->
<div id="messagetoolbar" class="toolbar menu" role="toolbar" aria-labelledby="aria-label-toolbar">
<a class="options" href="#options" onclick="UI.show_sidebar()" data-hidden="big">
<span class="inner"><roundcube:label name="optionsandattachments"></span>
</a>
<roundcube:button command="savedraft" type="link" class="save draft disabled" classAct="save draft"
label="save" title="savemessage" tabindex="2" innerclass="inner" data-content-button="true" />
<span class="spacer"></span>
<roundcube:button name="addattachment" type="link" class="attach"
label="attach" title="addattachment" data-hidden="small"
onclick="if (!$(this).is('.disabled')) rcmail.upload_input('uploadform')"
aria-haspopup="true" aria-expanded="false" tabindex="2" innerclass="inner" />
<roundcube:button command="insert-sig" type="link" class="signature disabled" classAct="signature"
label="signature" title="insertsignature" tabindex="2" innerclass="inner" />
<a href="#responses" class="responses" label="responses" title="<roundcube:label name='insertresponse' />" unselectable="on" tabindex="2" data-popup="responses-menu">
<span class="inner"><roundcube:label name="responses" /></span>
</a>
<roundcube:if condition="!empty(env:spell_langs)" />
<span class="dropbutton">
<roundcube:button command="spellcheck" type="link" class="spellcheck disabled"
classAct="spellcheck" classSel="button spellcheck pressed"
label="spellcheck" title="checkspelling" tabindex="2" innerclass="inner" />
<a href="#languages" class="dropdown" tabindex="2" data-popup="spell-menu">
<span class="inner"><roundcube:label name="language" /></span>
</a>
</span>
<roundcube:endif />
<span class="dropbutton" style="display:none">
<roundcube:button command="compose-encrypted" type="link" class="encrypt disabled"
classAct="encrypt" classSel="encrypt selected" innerclass="inner"
label="encrypt" title="encryptmessagemailvelope" tabindex="2" />
<a href="#encryption" id="encryption-menu-button" class="dropdown" tabindex="2" data-popup="encryption-menu">
<span class="inner"><roundcube:label name="encryptmessagemailvelope" /></span>
</a>
</span>
<roundcube:container name="toolbar" id="compose-toolbar" />
</div>
</div>
<div id="compose-content" class="formcontainer content">
<roundcube:object name="composeFormHead" role="main" class="formcontent scroller" />
<roundcube:object name="composeObjects" id="compose-objects" class="mb-3" />
<!-- message headers -->
<div id="compose-headers" role="region" aria-labelledby="aria-label-composeheaders">
<h2 id="aria-label-composeheaders" class="voice"><roundcube:label name="arialabelmessageheaders" /></h2>
<div class="compose-headers">
<div id="compose_from" class="form-group row">
<label for="_from" class="col-2 col-form-label"><roundcube:label name="from" /></label>
<div class="col-10">
<div class="input-group">
<roundcube:object name="composeHeaders" part="from" id="_from" form="form" tabindex="1" class="form-control" />
<span class="input-group-append">
<a href="#identities" onclick="return rcmail.command('switch-task', 'settings/identities')" class="input-group-text icon edit" title="<roundcube:label name="editidents" />" tabindex="1"><span class="inner"><roundcube:label name="editidents" /></span></a>
</span>
</div>
</div>
</div>
<div id="compose_to" class="form-group row">
<label for="_to" class="col-2 col-form-label"><roundcube:label name="to" /></label>
<div class="col-10">
<div class="input-group">
<roundcube:object name="composeHeaders" part="to" id="_to" form="form" tabindex="1" aria-required="true" data-recipient-input="true" />
<span class="input-group-append">
<a href="#add-contact" onclick="UI.recipient_selector('to')" class="input-group-text icon add recipient" title="<roundcube:label name="addcontact" />" tabindex="1"><span class="inner"><roundcube:label name="addcontact" /></span></a>
</span>
<span class="input-group-append">
<a href="#add-header" data-popup="headers-menu" class="input-group-text icon add" title="<roundcube:label name="addheader" />" tabindex="1"><span class="inner"><roundcube:label name="addheader" /></span></a>
</span>
</div>
</div>
</div>
<div id="compose_cc" class="hidden form-group row">
<label for="_cc" class="col-2 col-form-label"><roundcube:label name="cc" /></label>
<div class="col-10">
<div class="input-group">
<roundcube:object name="composeHeaders" part="cc" id="_cc" form="form" tabindex="1" data-recipient-input="true" />
<span class="input-group-append">
<a href="#add-contact" onclick="UI.recipient_selector('cc')" class="input-group-text icon add recipient" title="<roundcube:label name="addcontact" />" tabindex="1"><span class="inner"><roundcube:label name="addcontact" /></span></a>
</span>
<span class="input-group-append">
<a href="#delete" onclick="UI.header_reset('_cc')" class="input-group-text icon delete" title="<roundcube:label name='delete' />" tabindex="1"><span class="inner"><roundcube:label name="delete" /></span></a>
</span>
</div>
</div>
</div>
<div id="compose_bcc" class="hidden form-group row">
<label for="_bcc" class="col-2 col-form-label"><roundcube:label name="bcc" /></label>
<div class="col-10">
<div class="input-group">
<roundcube:object name="composeHeaders" part="bcc" id="_bcc" form="form" tabindex="1" data-recipient-input="true" />
<span class="input-group-append">
<a href="#add-contact" onclick="UI.recipient_selector('bcc')" class="input-group-text icon add recipient" title="<roundcube:label name="addcontact" />" tabindex="1"><span class="inner"><roundcube:label name="addcontact" /></span></a>
</span>
<span class="input-group-append">
<a href="#delete" onclick="UI.header_reset('_bcc')" class="input-group-text icon delete" title="<roundcube:label name='delete' />" tabindex="1"><span class="inner"><roundcube:label name="delete" /></span></a>
</span>
</div>
</div>
</div>
<div id="compose_replyto" class="hidden form-group row">
<label for="_replyto" class="col-2 col-form-label"><roundcube:label name="replyto" /></label>
<div class="col-10">
<div class="input-group">
<roundcube:object name="composeHeaders" part="replyto" id="_replyto" form="form" tabindex="1" data-recipient-input="true" />
<span class="input-group-append">
<a href="#add-contact" onclick="UI.recipient_selector('replyto')" class="input-group-text icon add recipient" title="<roundcube:label name="addcontact" />" tabindex="1"><span class="inner"><roundcube:label name="addcontact" /></span></a>
</span>
<span class="input-group-append">
<a href="#delete" onclick="UI.header_reset('_replyto')" class="input-group-text icon delete" title="<roundcube:label name='delete' />" tabindex="1"><span class="inner"><roundcube:label name="delete" /></span></a>
</span>
</div>
</div>
</div>
<div id="compose_followupto" class="hidden form-group row">
<label for="_followupto" class="col-2 col-form-label"><roundcube:label name="followupto" /></label>
<div class="col-10">
<div class="input-group">
<roundcube:object name="composeHeaders" part="followupto" id="_followupto" form="form" tabindex="1" data-recipient-input="true" />
<span class="input-group-append">
<a href="#add-contact" onclick="UI.recipient_selector('followupto')" class="input-group-text icon add recipient" title="<roundcube:label name="addcontact" />" tabindex="1"><span class="inner"><roundcube:label name="addcontact" /></span></a>
</span>
<span class="input-group-append">
<a href="#delete" onclick="UI.header_reset('_followupto')" class="input-group-text icon delete" title="<roundcube:label name='delete' />" tabindex="1"><span class="inner"><roundcube:label name="delete" /></span></a>
</span>
</div>
</div>
</div>
<div id="compose_subject" class="form-group row">
<label for="compose-subject" class="col-2 col-form-label"><roundcube:label name="subject" /></label>
<div class="col-10">
<roundcube:object name="composeSubject" id="compose-subject" form="form" tabindex="1" class="form-control" />
</div>
</div>
</div>
</div>
<!-- message compose body -->
<div id="composebodycontainer">
<label for="composebody" class="voice"><roundcube:label name="arialabelmessagebody" /></label>
<roundcube:object name="composeBody" id="composebody" form="form" cols="70" rows="20" class="form-control" tabindex="1" />
<roundcube:if condition="!in_array('htmleditor', (array)config:dont_override)" />
<roundcube:object name="editorSelector" id="editor-selector" editorid="composebody" noform="true" class="hidden" />
<roundcube:endif />
</div>
</form>
<div class="formbuttons">
<roundcube:button command="send" class="btn btn-primary send" label="send" tabindex="1" data-content-button="true" />
<div class="float-right">
<roundcube:button command="extwin" type="link" label="openinextwin" data-hidden="small" class="button icon btn btn-link extwin" data-tabindex="1" condition="!env:extwin" />
</div>
</div>
</div>
</div>
<roundcube:object name="composeAttachmentForm" id="uploadform" mode="smart" />
<div id="spell-menu" class="popupmenu" data-popup-init="spellmenu"></div>
<div id="headers-menu" class="popupmenu" data-popup-init="headersmenu">
<h3 id="aria-label-headersmenu" class="voice"><roundcube:label name="arialabelheadersmenu" /></h3>
<ul class="menu listing" role="menu" aria-labelledby="aria-label-headersmenu">
<li role="menuitem"><a data-target="cc" href="#" role="button" tabindex="-1" class="recipient active"><roundcube:label name="cc" /></a></li>
<li role="menuitem"><a data-target="bcc" href="#" role="button" tabindex="-1" class="recipient active"><roundcube:label name="bcc" /></a></li>
<li role="menuitem"><a data-target="replyto" href="#" role="button" tabindex="-1" class="recipient active"><roundcube:label name="replyto" /></a></li>
<li role="menuitem"><a data-target="followupto" href="#" role="button" tabindex="-1" class="recipient active"><roundcube:label name="followupto" /></a></li>
</ul>
</div>
<div id="responses-menu" class="popupmenu">
<h3 id="aria-label-responsesmenu" class="voice"><roundcube:label name="arialabelresponsesmenu" /></h3>
<ul class="menu listing" role="menu" aria-labelledby="aria-label-responsesmenu">
<li role="separator" class="separator"><label><roundcube:label name="insertresponse" /></label></li>
<roundcube:object name="responseslist" id="responseslist" tagname="ul" class="rounded-0" itemclass="active" list-placeholder="noresponsesavailable" />
<li role="separator" class="separator"><label><roundcube:label name="manageresponses" /></label></li>
<roundcube:button name="responses" type="link-menuitem" label="editresponses" class="edit responses active" onclick="return rcmail.command('switch-task', 'settings/responses')" />
</ul>
</div>
<div id="attachmentmenu" class="popupmenu">
<h3 id="aria-label-attachmentmenu" class="voice"><roundcube:label name="arialabelattachmentmenu" /></h3>
<ul class="menu listing" role="menu" aria-labelledby="aria-label-attachmentmenu">
<roundcube:button command="open-attachment" id="attachmenuopen" type="link-menuitem" label="open" class="extwin disabled" classAct="extwin active" />
<roundcube:button command="download-attachment" id="attachmenudownload" type="link-menuitem" label="download" class="download disabled" classAct="download active" />
<roundcube:button command="rename-attachment" id="attachmenurename" type="link-menuitem" label="rename" class="rename disabled" classAct="rename active" />
<roundcube:container name="attachmentmenu" id="attachmentoptionsmenu" />
</ul>
</div>
<div id="encryption-menu" class="popupmenu">
<ul class="menu listing" role="menu">
<roundcube:button command="compose-encrypted" type="link-menuitem" label="encryptmessage" class="encrypt disabled" classAct="encrypt active" />
<roundcube:button command="compose-encrypted-signed" type="link-menuitem" label="encryptandsign" class="encrypt sign disabled" classAct="encrypt sign active" />
</ul>
</div>
<div id="recipient-dialog" class="popupmenu" role="region" aria-labelledby="aria-label-composecontacts">
<div class="listbox">
<roundcube:object name="searchform" id="searchform" wrapper="searchbar menu"
label="contactsearchform" buttontitle="findcontacts" ariatag="h2" class="no-bs" />
<div class="scroller" tabindex="-1">
<roundcube:object name="addressbooks" id="directorylist" class="treelist listing iconized"
summary="ariasummarycomposecontacts" />
<roundcube:object name="addresslist" id="contacts-table" class="listing iconized contactlist"
noheader="true" role="listbox" data-list="contact_list" data-list-select-replace="#recipient-dialog .pagenav-text" />
</div>
<roundcube:include file="includes/pagenav.html" />
</div>
</div>
<roundcube:include file="includes/footer.html" />

23
templates/contact.html Normal file
View File

@ -0,0 +1,23 @@
<roundcube:include file="includes/layout.html" />
<h1 class="voice"><roundcube:label name="contactproperties" /></h1>
<div class="formcontent">
<div class="contact-header">
<div id="contactphoto" class="contact-photo">
<roundcube:object name="contactphoto" id="contactpic" placeholder="/images/contactpic.svg"
placeholderGroup="/images/contactgroup.svg" bg-color="transparent" />
</div>
<roundcube:object name="contacthead" id="contacthead" class="contact-head readonly" with-source="true" />
</div>
<div id="contacttabs" class="tabbed">
<roundcube:object name="contactdetails" fieldset-class="propform grouped readonly"
short-legend-labels="true" />
</div>
</div>
<div class="formbuttons">
<roundcube:button command="edit" class="btn btn-primary edit" label="edit" condition="!ENV:readonly" />
</div>
<roundcube:include file="includes/footer.html" />

29
templates/contactedit.html Normal file
View File

@ -0,0 +1,29 @@
<roundcube:include file="includes/layout.html" />
<h1 class="voice"><roundcube:object name="steptitle" /></h1>
<roundcube:form name="editform" method="post" id="contact-details" class="formcontent">
<div class="contact-header">
<fieldset id="contactphoto" class="contact-photo">
<legend class="voice"><roundcube:label name="contactphoto" /></legend>
<roundcube:object name="contactphoto" id="contactpic" class="image-upload" placeholder="/images/contactpic.svg" />
<roundcube:if condition="env:photocol" />
<roundcube:object name="fileDropArea" id="contactpic" />
<roundcube:endif />
</fieldset>
<roundcube:object name="contactedithead" id="contacthead" form="editform"
class="propform contact-head" use-labels="true" with-source="true" />
</div>
<div id="contacttabs" class="tabbed">
<roundcube:object name="contacteditform" textareacols="60" form="editform"
fieldset-class="propform grouped" compact-form="true" short-legend-labels="true" />
</div>
</form>
<div class="formbuttons">
<roundcube:button command="save" class="btn btn-primary submit" label="save" />
</div>
<roundcube:object name="photoUploadForm" id="upload-form" mode="smart" />
<roundcube:include file="includes/footer.html" />

9
templates/contactimport.html Normal file
View File

@ -0,0 +1,9 @@
<roundcube:include file="includes/layout.html" />
<h1 class="voice"><roundcube:label name="addressbook" /> : <roundcube:label name="importcontacts" /></h1>
<div class="formcontent">
<roundcube:object name="importstep" class="propform" table-header-class="form-group row d-none d-sm-flex" table-col-source-class="col-sm-4" table-col-destination-class="col-sm-8" />
</div>
<roundcube:include file="includes/footer.html" />

19
templates/contactprint.html Normal file
View File

@ -0,0 +1,19 @@
<roundcube:include file="includes/layout.html" />
<roundcube:object name="logo" id="logo" alt="Logo" logo-type="print" logo-match="template" class="float-sm-right" />
<div class="print-content formcontent" role="main">
<div class="contact-header">
<div id="contactphoto" class="contact-photo">
<roundcube:object name="contactphoto" id="contactpic" placeholder="/images/contactpic.svg"
placeholderGroup="/images/contactgroup.svg" />
</div>
<roundcube:object name="contacthead" id="contacthead" class="contact-head readonly" with-source="true" />
</div>
<div id="contacttabs">
<roundcube:object name="contactdetails" fieldset-class="propform grouped readonly"
short-legend-labels="true" />
</div>
</div>
<roundcube:include file="includes/footer.html" />

9
templates/contactsearch.html Normal file
View File

@ -0,0 +1,9 @@
<roundcube:include file="includes/layout.html" />
<h1 class="voice"><roundcube:label name="addressbook" /> : <roundcube:label name="advsearch" /></h1>
<div class="formcontent">
<roundcube:object name="searchform" id="advsearchform" class="tabbed propform" short-legend-labels="true" />
</div>
<roundcube:include file="includes/footer.html" />

7
templates/dialog.html Normal file
View File

@ -0,0 +1,7 @@
<roundcube:include file="includes/layout.html" />
<div class="frame-content <roundcube:var name="env:dialog_class" />">
<roundcube:object name="dialogcontent" />
</div>
<roundcube:include file="includes/footer.html" />

21
templates/error.html Normal file
View File

@ -0,0 +1,21 @@
<roundcube:include file="includes/layout.html" />
<roundcube:if condition="!env:framed && !env:extwin" />
<roundcube:include file="includes/menu.html" />
<div id="layout-content" class="selected" role="main">
<div class="header">
<a class="button icon task-menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
<span class="header-title"></span>
</div>
<div class="frame-content scroller">
<roundcube:else />
<div id="layout-content" class="selected" role="main">
<div class="frame-content scroller">
<roundcube:endif />
$__page_content
</div>
</div>
<roundcube:include file="includes/footer.html" />

13
templates/folderedit.html Normal file
View File

@ -0,0 +1,13 @@
<roundcube:include file="includes/layout.html" />
<h1 class="voice"><roundcube:label name="folderproperties" /></h1>
<div class="formcontent">
<roundcube:object name="folderdetails" class="propform" />
</div>
<div class="formbuttons">
<roundcube:button command="save" class="btn btn-primary submit" label="save" />
</div>
<roundcube:include file="includes/footer.html" />

61
templates/folders.html Normal file
View File

@ -0,0 +1,61 @@
<roundcube:include file="includes/layout.html" />
<roundcube:include file="includes/menu.html" />
<roundcube:include file="includes/settings-menu.html" />
<h1 class="voice"><roundcube:label name="folders" /></h1>
<!-- folders list -->
<div id="layout-list" class="listbox selected" aria-labelledby="aria-label-folderslist">
<div class="header">
<a class="button icon back-sidebar-button" href="#sidebar"><span class="inner"><roundcube:label name="settings" /></span></a>
<span id="aria-label-folderslist" class="header-title"><roundcube:label name="folders" /></span>
<a class="button icon toolbar-menu-button" href="#list-menu"><span class="inner"><roundcube:label name="menu" /></span></a>
</div>
<roundcube:object name="searchform" id="foldersearch" wrapper="searchbar menu" ariatag="h2"
label="foldersearchform" buttontitle="findfolders" options="foldersearchmenu" />
<div id="foldersearchmenu" class="hidden searchoptions scroller propform formcontainer" aria-labelledby="aria-label-search-menu" aria-controls="subscription-table">
<h3 id="aria-label-search-menu" class="voice"><roundcube:label name="searchmod" /></h3>
<div class="formcontent">
<roundcube:object name="folderfilter" id="folderlist-filter" noheader="true" noevent="true" />
</div>
<div class="formbuttons">
<button type="button" class="btn btn-primary icon search" onclick="rcmail.folder_filter($('#folderlist-filter').val())"><roundcube:label name="search" /></button>
</div>
</div>
<div class="scroller" tabindex="-1">
<roundcube:object name="foldersubscription" id="subscription-table"
class="treelist listing folderlist iconized" role="listbox" data-list="subscription_list"
data-label-msg="listempty" data-label-ext="listusebutton" data-create-command="folder-create" />
</div>
<div class="footer small">
<roundcube:if condition="env:quota" />
<div id="quotadisplay" class="quota-widget">
<span class="voice"><roundcube:label name="quota"></span>
<roundcube:object name="quotaDisplay" class="count" display="text" />
</div>
<roundcube:endif />
</div>
</div>
<!-- folder info frame -->
<div id="layout-content" role="main">
<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
<div class="header" role="toolbar" aria-labelledby="aria-label-toolbar">
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
<span class="header-title"></span>
<!-- toolbar -->
<div id="folderstoolbar" class="toolbar menu">
<roundcube:button command="create-folder" type="link" class="create disabled" classAct="create"
label="create" title="createfolder" innerClass="inner" data-fab="true" />
<roundcube:button command="delete-folder" type="link" class="delete disabled" classAct="delete"
label="delete" title="delete" innerclass="inner" />
<roundcube:button command="purge" type="link" class="purge disabled" classAct="purge"
label="empty" title="empty" innerclass="inner" />
</div>
</div>
<div class="iframe-wrapper">
<roundcube:object name="contentframe" id="preferences-frame" src="env:blankpage" />
</div>
</div>
<roundcube:include file="includes/footer.html" />

43
templates/identities.html Normal file
View File

@ -0,0 +1,43 @@
<roundcube:include file="includes/layout.html" />
<roundcube:include file="includes/menu.html" />
<roundcube:include file="includes/settings-menu.html" />
<h1 class="voice"><roundcube:label name="settings" /> : <roundcube:label name="identities" /></h1>
<!-- responses list -->
<div id="layout-list" class="listbox selected" aria-labelledby="aria-label-identitieslist">
<div class="header">
<a class="button icon back-sidebar-button" href="#sidebar"><span class="inner"><roundcube:label name="settings" /></span></a>
<span id="aria-label-identitieslist" class="header-title"><roundcube:label name="identities" /></span>
<a class="button icon toolbar-menu-button" href="#list-menu"><span class="inner"><roundcube:label name="menu" /></span></a>
</div>
<div class="scroller">
<roundcube:object name="identitieslist" id="identities-table" class="listing"
noheader="true" role="listbox" data-list="identity_list"
data-label-msg="listempty" data-label-ext="listusebutton" data-create-command="add" />
</div>
<div class="footer"></div>
</div>
<!-- response details frame -->
<div id="layout-content" role="main">
<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
<div class="header" role="toolbar" aria-labelledby="aria-label-toolbar">
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
<span class="header-title"></span>
<!-- toolbar -->
<div id="identitiestoolbar" class="toolbar menu">
<roundcube:button command="add" type="link" class="create disabled" classAct="create"
label="create" title="newidentity" innerClass="inner"
condition="config:identities_level:0<2" data-fab="true" />
<roundcube:button command="delete" type="link" class="delete disabled" classAct="delete"
label="delete" title="delete" innerClass="inner"
condition="config:identities_level:0<2" />
</div>
</div>
<div class="iframe-wrapper">
<roundcube:object name="contentframe" id="preferences-frame" src="env:blankpage" title="arialabelidentityeditfrom" />
</div>
</div>
<roundcube:include file="includes/footer.html" />

13
templates/identityedit.html Normal file
View File

@ -0,0 +1,13 @@
<roundcube:include file="includes/layout.html" />
<h1 class="voice"><roundcube:object name="steptitle" /></h1>
<div class="formcontent">
<roundcube:object name="identityform" class="propform" size="40" textareacols="40" textarearows="6" />
</div>
<div class="formbuttons">
<roundcube:button command="save" class="btn btn-primary submit" label="save" condition="!env:readonly" />
</div>
<roundcube:include file="includes/footer.html" />

14
templates/includes/footer.html Normal file
View File

@ -0,0 +1,14 @@
<roundcube:if condition="!env:framed || env:extwin" />
</div>
<roundcube:if condition="config:support_url" />
<a href="<roundcube:var name='config:support_url' />" target="_blank" id="supportlink" class="hidden"><roundcube:label name="support" /></a>
<roundcube:endif />
<roundcube:endif />
<roundcube:object name="message" id="messagestack" />
<script src="/deps/bootstrap.bundle.min.js"></script>
<script src="/ui.js"></script>
</body>
</html>

46
templates/includes/layout.html Normal file
View File

@ -0,0 +1,46 @@
<roundcube:add_label name="back" />
<roundcube:add_label name="errortitle" />
<roundcube:add_label name="options" />
<roundcube:add_label name="plaintoggle" />
<roundcube:add_label name="htmltoggle" />
<roundcube:add_label name="previous" />
<roundcube:add_label name="next" />
<roundcube:add_label name="select" />
<roundcube:add_label name="close" />
<roundcube:add_label name="browse" />
<roundcube:add_label name="choosefile" />
<roundcube:add_label name="choosefiles" />
<roundcube:object name="doctype" value="html5" />
<roundcube:if condition="!env:framed || env:extwin" />
<html>
<roundcube:else />
<html class="iframe">
<roundcube:endif />
<head>
<roundcube:object name="meta" />
<roundcube:object name="links" />
<link rel="stylesheet" href="/deps/bootstrap.min.css">
<roundcube:if condition="config:devel_mode" />
<link rel="stylesheet/less" href="/styles/styles.less">
<roundcube:link rel="stylesheet/less" href="/styles/print.less" condition="env:action == 'print'" />
<script src="/deps/less.min.js" data-env="development"></script>
<roundcube:else />
<link rel="stylesheet" href="/styles/styles.css">
<roundcube:link rel="stylesheet" href="/styles/print.css" condition="env:action == 'print'" />
<roundcube:endif />
<roundcube:if condition="env:action != 'print' && !config:devel_mode && config:dark_mode_support" />
<script>
try {
if (document.cookie.indexOf('colorMode=dark') > -1
|| (document.cookie.indexOf('colorMode=light') === -1 && window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
document.documentElement.className += ' dark-mode';
}
} catch (e) { }
</script>
<roundcube:endif />
</head>
<body class="task-<roundcube:exp expression="env:error_task ?: env:task ?: 'error'"> action-<roundcube:exp expression="asciiwords(env:action, true, '-') ?: 'none'">">
<roundcube:if condition="!env:framed || env:extwin" />
<div id="<roundcube:exp expression="env:action == 'print' ? 'print-' : ''">layout">
<roundcube:endif />

95
templates/includes/mail-menu.html Normal file
View File

@ -0,0 +1,95 @@
<roundcube:add_label name="viewsource" />
<div id="mailtoolbar" class="toolbar menu" role="toolbar">
<roundcube:button command="compose" type="link" class="compose hidden"
label="compose" title="writenewmessage" innerclass="inner" />
<roundcube:button command="reply" type="link" class="reply disabled" classAct="reply"
label="reply" title="replytomessage" innerclass="inner" data-content-button="true" />
<span class="dropbutton">
<roundcube:button command="reply-all" type="link" class="reply-all disabled" classAct="reply-all"
label="replyall" title="replytoallmessage" innerclass="inner" />
<a href="#reply-all" id="replyallmenulink" class="dropdown" data-popup="replyall-menu" tabindex="0">
<span class="inner"><roundcube:label name="arialabelreplyalloptions" /></span>
</a>
</span>
<span class="dropbutton">
<roundcube:button command="forward" type="link" class="forward disabled" classAct="forward"
label="forward" title="forwardmessage" innerclass="inner" />
<a href="#forward" id="forwardmenulink" class="dropdown" data-popup="forward-menu" tabindex="0">
<span class="inner"><roundcube:label name="arialabelforwardingoptions" /></span>
</a>
</span>
<span class="spacer"></span>
<roundcube:button command="delete" type="link" class="delete disabled" classAct="delete"
label="delete" title="deletemessage" innerclass="inner" />
<roundcube:if condition="template:name == 'message'" />
<roundcube:button command="print" type="link" class="print disabled" classAct="print"
label="print" title="printmessage" innerclass="inner" data-hidden="small" />
<roundcube:endif />
<roundcube:container name="toolbar" id="mailtoolbar" />
<roundcube:button name="markmenulink" id="markmessagemenulink" type="link" class="markmessage"
label="mark" title="markmessages" data-popup="markmessage-menu" innerclass="inner" />
<roundcube:button name="messagemenulink" id="messagemenulink" type="link" class="more"
label="more" title="moreactions" data-popup="message-menu" innerclass="inner" />
<roundcube:if condition="template:name == 'message'" />
<span class="spacer"></span>
<roundcube:button command="previousmessage" type="link" class="prev disabled" classAct="prev"
innerclass="inner" label="previous" title="previousmessage" data-hidden="small" />
<roundcube:button command="nextmessage" type="link" class="next disabled" classAct="next"
innerclass="inner" label="next" title="nextmessage" data-hidden="small" />
<roundcube:endif />
</div>
<div id="forward-menu" class="popupmenu">
<h3 id="aria-label-forward-menu" class="voice"><roundcube:label name="arialabelforwardingoptions" /></h3>
<ul class="menu listing" role="menu" aria-labelledby="aria-label-forward-menu">
<roundcube:button type="link-menuitem" command="forward-inline" label="forwardinline" prop="sub" class="forward inline disabled" classAct="forward inline active" />
<roundcube:button type="link-menuitem" command="forward-attachment" label="forwardattachment" prop="sub" class="forward attachment disabled" classAct="forward attachment active" />
<roundcube:button type="link-menuitem" command="bounce" label="bouncemsg" class="forward bounce disabled" classAct="forward bounce active" />
<roundcube:container name="forwardmenu" id="forward-menu" />
</ul>
</div>
<div id="replyall-menu" class="popupmenu">
<h3 id="aria-label-replyall-menu" class="voice"><roundcube:label name="arialabelreplyalloptions" /></h3>
<ul class="menu listing" role="menu" aria-labelledby="aria-label-replyall-menu">
<roundcube:button type="link-menuitem" command="reply-all" label="replyall" prop="sub" class="reply all disabled" classAct="reply all active" />
<roundcube:button type="link-menuitem" command="reply-list" label="replylist" prop="sub" class="reply list disabled" classAct="reply list active" />
<roundcube:container name="replyallmenu" id="replyall-menu" />
</ul>
</div>
<div id="message-menu" class="popupmenu">
<h3 id="aria-label-message-menu" class="voice"><roundcube:label name="arialabelmoremessageactions" /></h3>
<ul class="menu listing" role="menu" aria-labelledby="aria-label-message-menu">
<roundcube:button type="link-menuitem" command="print" label="printmessage" class="print disabled" classAct="print active" data-hidden="small"/>
<roundcube:if condition="template:name != 'message'" />
<roundcube:button type="link-menuitem" command="import-messages" label="import" class="import disabled" classAct="import active"
name="messageimport" onclick="UI.import_dialog()" />
<roundcube:endif />
<roundcube:button type="link-menuitem" command="download" label="export" class="download disabled" classAct="download active" />
<roundcube:button type="link-menuitem" command="edit" prop="new" label="editasnew" class="edit asnew disabled" classAct="edit asnew active" />
<roundcube:button type="link-menuitem" command="viewsource" label="viewsource" class="source disabled" classAct="source active" />
<roundcube:button type="link-menuitem" command="move" label="moveto" class="move disabled" classAct="move active" innerclass="folder-selector-link" aria-haspopup="true" />
<roundcube:button type="link-menuitem" command="copy" label="copyto" class="copy disabled" classAct="copy active" innerclass="folder-selector-link" aria-haspopup="true" />
<roundcube:button type="link-menuitem" command="open" label="openinextwin" target="_blank" class="extwin disabled" classAct="extwin active" data-hidden="small" />
<roundcube:container name="messagemenu" id="message-menu" />
</ul>
</div>
<div id="markmessage-menu" class="popupmenu">
<h3 id="aria-label-markmessage-menu" class="voice"><roundcube:label name="arialabelmarkmessagesas" /></h3>
<ul class="menu listing" role="menu" aria-labelledby="aria-label-markmessage-menu">
<roundcube:button type="link-menuitem" command="mark" prop="read" label="markread" classAct="read active" class="read disabled" />
<roundcube:button type="link-menuitem" command="mark" prop="unread" label="markunread" classAct="unread active" class="unread disabled" />
<roundcube:button type="link-menuitem" command="mark" prop="flagged" label="markflagged" classAct="flag active" class="flag disabled" />
<roundcube:button type="link-menuitem" command="mark" prop="unflagged" label="markunflagged" classAct="unflag active" class="unflag disabled" />
<roundcube:if condition="config:flag_for_deletion && !config:skip_deleted" />
<roundcube:button type="link-menuitem" command="mark" prop="undelete" label="markundeleted" classAct="undo active" class="undo disabled" />
<roundcube:endif />
<roundcube:container name="markmenu" id="markmessage-menu" />
</ul>
</div>
<roundcube:if condition="template:name != 'message'" />
<roundcube:object name="messageimportform" id="uploadform" class="popupmenu formcontent" buttons="no" />
<roundcube:endif />

42
templates/includes/menu.html Normal file
View File

@ -0,0 +1,42 @@
<div id="layout-menu">
<h2 id="aria-label-tasknav" class="voice"><roundcube:label name="arialabeltasknav" /></h2>
<div class="popover-header">
<roundcube:object name="logo" src="/images/logo.svg" id="logo" alt="Logo" />
<a class="button icon cancel"><span class="inner"><roundcube:label name="close" /></span></a>
</div>
<div id="taskmenu" class="menu toolbar" role="navigation" aria-labelledby="aria-label-tasknav">
<span class="action-buttons">
<roundcube:if condition="env:action == 'compose' and env:task == 'mail'" />
<roundcube:button command="compose" type="link" class="compose selected"
label="compose" title="writenewmessage" innerclass="inner" />
<roundcube:else />
<roundcube:button command="compose" type="link" class="compose"
label="compose" title="writenewmessage" innerclass="inner"
data-fab="true" data-fab-task="mail" data-fab-action="none" />
<roundcube:endif />
</span>
<roundcube:if condition="env:action == 'compose' and env:task == 'mail'" />
<roundcube:button command="mail" label="mail" type="link" innerClass="inner"
class="mail" />
<roundcube:else />
<roundcube:button command="mail" label="mail" type="link" innerClass="inner"
class="mail" classSel="mail selected" />
<roundcube:endif />
<roundcube:button command="addressbook" label="contacts" type="link" innerClass="inner"
class="contacts" classSel="contacts selected" />
<roundcube:container name="taskbar" id="taskmenu" />
<roundcube:button command="settings" label="settings" type="link" innerClass="inner"
class="settings" classSel="settings selected" />
<span class="special-buttons">
<roundcube:if condition="config:dark_mode_support" />
<roundcube:add_label name="darkmode" />
<roundcube:add_label name="lightmode" />
<roundcube:button name="theme" label="darkmode" type="link" innerClass="inner" class="theme dark" />
<roundcube:endif />
<roundcube:button name="about" label="about" type="link"
class="about" innerClass="inner" onclick="UI.about_dialog(this)" />
<roundcube:button command="logout" label="logout" type="link"
class="logout" innerClass="inner" />
</span>
</div>
</div>

20
templates/includes/pagenav.html Normal file
View File

@ -0,0 +1,20 @@
<div class="pagenav menu footer small" role="toolbar" aria-label="<roundcube:label name="arialabellistnav" />">
<roundcube:button command="firstpage" type="link" class="firstpage disabled" classAct="firstpage"
title="firstpage" label="first" innerclass="inner" />
<roundcube:button command="previouspage" type="link" class="prevpage disabled" classAct="prevpage"
title="previouspage" label="previous" innerclass="inner" />
<roundcube:if condition="template:name == 'mail'" />
<roundcube:object name="messageCountDisplay" class="pagenav-text" aria-live="polite" aria-relevant="text" />
<input class="form-control" type="text" size="3" disabled title="<roundcube:label name="currpage" />" />
<roundcube:elseif condition="template:name == 'addressbook'" />
<span class="pagenav-text" aria-live="polite" aria-relevant="text">
<roundcube:object name="recordsCountDisplay" label="fromtoshort" />
</span>
<roundcube:else />
<span class="pagenav-text" aria-live="polite" aria-relevant="text">&nbsp;</span>
<roundcube:endif />
<roundcube:button command="nextpage" type="link" class="nextpage disabled" classAct="nextpage"
title="nextpage" label="next" innerclass="inner" />
<roundcube:button command="lastpage" type="link" class="lastpage disabled" classAct="lastpage"
title="lastpage" label="last" innerclass="inner" />
</div>

12
templates/includes/settings-menu.html Normal file
View File

@ -0,0 +1,12 @@
<div id="layout-sidebar" class="listbox<roundcube:exp expression="!request:_action ? ' selected' : ''"/>" role="navigation" aria-labelledby="aria-label-settingstabs">
<div class="header">
<a class="button icon task-menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
<span id="aria-label-settingstabs" class="header-title"><roundcube:label name="settings" /></span>
</div>
<div class="scroller">
<ul id="settings-menu" class="listing iconized settings-default-icon<roundcube:exp expression="!request:_action ? ' selection-large-only' : ''"/>">
<roundcube:object name="settingstabs" class="listitem" tagname="li" />
<roundcube:container name="tabs" id="settings-menu" />
</ul>
</div>
</div>

24
templates/login.html Normal file
View File

@ -0,0 +1,24 @@
<roundcube:include file="includes/layout.html" />
<h1 class="voice"><roundcube:object name="productname" /> <roundcube:label name="login" /></h1>
<div id="layout-content" class="selected no-navbar" role="main">
<roundcube:object name="logo" src="/images/login.svg" id="logo" alt="Logo" />
<roundcube:form id="login-form" name="login-form" method="post" class="propform">
<roundcube:object name="loginform" form="login-form" size="40" submit=true class="form-control" />
<div id="login-footer" role="contentinfo">
<roundcube:object name="productname" condition="config:display_product_info &gt; 0" />
<roundcube:object name="version" condition="config:display_product_info == 2" />
<roundcube:if condition="config:support_url" />
&nbsp;&bull;&nbsp; <a href="<roundcube:var name='config:support_url' />" target="_blank" class="support-link"><roundcube:label name="support" /></a>
<roundcube:endif />
<roundcube:container name="loginfooter" id="login-footer" />
</div>
</form>
</div>
<noscript>
<p class="noscriptwarning"><roundcube:label name="noscriptwarning" /></p>
</noscript>
<roundcube:include file="includes/footer.html" />

220
templates/mail.html Normal file
View File

@ -0,0 +1,220 @@
<roundcube:include file="includes/layout.html" />
<roundcube:include file="includes/menu.html" />
<h1 class="voice"><roundcube:label name="mail" /></h1>
<!-- folders list -->
<div id="layout-sidebar" class="listbox" role="navigation" aria-labelledby="aria-label-folderlist">
<div class="header">
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
<span class="header-title username"><roundcube:object name="username" /></span>
<roundcube:button name="folderactions" type="link" title="folderactions" label="actions"
class="button icon sidebar-menu" innerclass="inner" data-popup="mailboxoptions-menu" />
</div>
<h2 id="aria-label-folderlist" class="voice"><roundcube:label name="arialabelfolderlist" /></h2>
<div id="folderlist-content" class="scroller">
<roundcube:object name="mailboxlist" id="mailboxlist" class="treelist listing folderlist" folder_filter="mail" unreadwrap="%s" />
</div>
<div class="footer small">
<roundcube:if condition="env:quota" />
<div id="quotadisplay" class="quota-widget">
<span class="voice"><roundcube:label name="quota"></span>
<roundcube:object name="quotaDisplay" class="count" display="text" />
</div>
<roundcube:endif />
</div>
</div>
<!-- messages list -->
<div id="layout-list" class="listbox selected">
<div id="messagelist-header" class="header">
<a class="button icon task-menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
<a class="button icon back-sidebar-button folders" href="#sidebar"><span class="inner"><roundcube:label name="mailboxlist" /></span></a>
<span class="header-title"></span>
<div class="toolbar menu" role="toolbar">
<a href="#select" class="select disabled" data-popup="listselect-menu" data-toggle-button="list-toggle-button" title="<roundcube:label name="select" />"><span class="inner"><roundcube:label name="select" /></span></a>
<roundcube:if condition="env:threads" />
<a href="#threads" class="threads disabled" data-popup="threadselect-menu" title="<roundcube:label name="threads" />"><span class="inner"><roundcube:label name="threads" /></span></a>
<roundcube:endif />
<roundcube:object name="listmenulink" class="options active" label="options" innerclass="inner" />
<roundcube:container name="listcontrols" id="listcontrols" />
</div>
<roundcube:button command="checkmail" type="link" class="button icon toolbar-button refresh"
label="refresh" title="checkmail" innerclass="inner" />
<a class="button icon toolbar-menu-button" href="#list-menu"><span class="inner"><roundcube:label name="menu" /></span></a>
</div>
<roundcube:add_label name="showunread" />
<roundcube:object name="searchform" id="mailsearchform" wrapper="searchbar menu"
label="mailquicksearchbox" buttontitle="findmail" options="searchmenu" ariatag="h2" />
<div id="searchmenu" class="hidden searchoptions scroller propform formcontainer" aria-labelledby="aria-label-search-menu" aria-controls="messagelist">
<h3 id="aria-label-search-menu" class="voice"><roundcube:label name="searchmod" /></h3>
<div class="formcontent">
<ul class="proplist">
<li><label><input type="checkbox" name="s_mods[]" value="subject" /><roundcube:label name="subject" /></label></li>
<li class="with-sublist">
<label><input type="checkbox" name="s_mods[]" value="sender" /><roundcube:label name="sender" /></label>
<a class="button icon dropdown" role="button" href="#" title="<roundcube:label name="details" />"></a>
<ul class="proplist d-none">
<li><label><input type="checkbox" name="s_mods[]" value="from" /><roundcube:label name="from" /></label></li>
<li><label><input type="checkbox" name="s_mods[]" value="replyto" /><roundcube:label name="replyto" /></label></li>
<li><label><input type="checkbox" name="s_mods[]" value="followupto" /><roundcube:label name="followupto" /></label></li>
</ul>
</li>
<li class="with-sublist">
<label><input type="checkbox" name="s_mods[]" value="recipient" /><roundcube:label name="recipient" /></label>
<a class="button icon dropdown" role="button" href="#" title="<roundcube:label name="details" />"></a>
<ul class="proplist d-none">
<li><label><input type="checkbox" name="s_mods[]" value="to" /><roundcube:label name="to" /></label></li>
<li><label><input type="checkbox" name="s_mods[]" value="cc" /><roundcube:label name="cc" /></label></li>
<li><label><input type="checkbox" name="s_mods[]" value="bcc" /><roundcube:label name="bcc" /></label></li>
</ul>
</li>
<li><label><input type="checkbox" name="s_mods[]" value="body" /><roundcube:label name="body" /></label></li>
<li><label><input type="checkbox" name="s_mods[]" value="text" /><roundcube:label name="msgtext" /></label></li>
</ul>
<div class="input-group">
<div class="input-group-prepend">
<label for="searchfilter" class="input-group-text"><roundcube:label name="type" /></label>
</div>
<roundcube:object name="searchfilter" id="searchfilter" noevent="true" class="custom-select" />
</div>
<div class="input-group">
<div class="input-group-prepend">
<label for="s_interval" class="input-group-text"><roundcube:label name="date" /></label>
</div>
<roundcube:object name="searchinterval" id="s_interval" class="custom-select" />
</div>
<div class="input-group">
<div class="input-group-prepend">
<label for="s_scope" class="input-group-text"><roundcube:label name="searchscope" /></label>
</div>
<select name="s_scope" id="s_scope" class="custom-select">
<option value="base"><roundcube:label name="currentfolder" /></option>
<option value="sub"><roundcube:label name="subfolders" /></option>
<option value="all"><roundcube:label name="allfolders" /></option>
</select>
</div>
</div>
<div class="formbuttons">
<button type="button" class="btn btn-primary icon search" onclick="return rcmail.command('search')"><roundcube:label name="search" /></button>
</div>
</div>
<div id="messagelist-content" class="scroller" tabindex="-1">
<h2 id="aria-label-messagelist" class="voice"><roundcube:label name="arialabelmessagelist" /></h2>
<roundcube:object name="messages" id="messagelist" class="listing messagelist sortheader fixedheader"
aria-labelledby="aria-label-messagelist" data-list="message_list" data-label-msg="listempty"
/>
</div>
<roundcube:include file="includes/pagenav.html" />
</div>
<!-- message preview -->
<div id="layout-content">
<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
<div class="header" role="toolbar" aria-labelledby="aria-label-toolbar">
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
<span class="header-title"></span>
<roundcube:include file="includes/mail-menu.html" />
</div>
<h2 id="aria-label-mailpreviewframe" class="voice"><roundcube:label name="arialabelmailpreviewframe" /></h2>
<div class="iframe-wrapper">
<roundcube:object name="contentframe"
id="messagecontframe"
aria-labelledby="aria-label-mailpreviewframe"
src="env:blankpage"
title="arialabelmailpreviewframe"
/>
</div>
</div>
<!-- popup menus -->
<div id="dragmessage-menu" class="popupmenu">
<h3 id="aria-label-dragmessage-menu" class="voice"><roundcube:label name="arialabeldropactionmenu" /></h3>
<ul class="menu listing" role="menu" aria-labelledby="aria-label-dragmessage-menu">
<roundcube:button command="move" type="link-menuitem" onclick="return rcmail.drag_menu_action('move')" label="move" class="disabled" classAct="active" />
<roundcube:button command="copy" type="link-menuitem" onclick="return rcmail.drag_menu_action('copy')" label="copy" class="disabled" classAct="active" />
</ul>
</div>
<div id="mailboxoptions-menu" class="popupmenu">
<h3 id="aria-label-mailboxoptions-menu" class="voice"><roundcube:label name="arialabelmailboxmenu" /></h3>
<ul class="menu listing" role="menu" aria-labelledby="aria-label-mailboxoptions-menu">
<roundcube:button command="expunge" type="link-menuitem" label="compact" class="expunge disabled" classAct="expunge active" />
<roundcube:button command="purge" type="link-menuitem" label="empty" class="purge disabled" classAct="purge active" />
<roundcube:button command="mark-all-read" type="link-menuitem" label="markallread" class="read disabled" classAct="read active" />
<roundcube:button command="folders" task="settings" type="link-menuitem" label="managefolders" class="folders disabled" classAct="folders active" />
<roundcube:container name="mailboxoptions" id="mailboxoptionsmenu" />
</ul>
</div>
<div id="listselect-menu" class="popupmenu">
<h3 id="aria-label-listselect-menu" class="voice"><roundcube:label name="arialabellistselectmenu" /></h3>
<ul class="menu listing" role="menu" aria-labelledby="aria-label-listselect-menu">
<roundcube:button type="link-menuitem" label="selection" class="selection disabled" classAct="selection active"
name="list-toggle-button" id="list-toggle-button" onclick="UI.toggle_list_selection(this, 'messagelist')" />
<roundcube:button command="select-all" type="link-menuitem" label="all" class="select all disabled" classAct="select all active" />
<roundcube:button command="select-all" type="link-menuitem" prop="page" label="currpage" class="select page disabled" classAct="select page active" />
<roundcube:button command="select-all" type="link-menuitem" prop="unread" label="unread" class="select unread disabled" classAct="select unread active" />
<roundcube:button command="select-all" type="link-menuitem" prop="flagged" label="flagged" class="select flagged disabled" classAct="select flagged active" />
<roundcube:button command="select-all" type="link-menuitem" prop="invert" label="invert" class="select invert disabled" classAct="select invert active" />
<roundcube:button command="select-none" type="link-menuitem" label="none" class="select none disabled" classAct="select none active" />
</ul>
</div>
<div id="threadselect-menu" class="popupmenu">
<h3 id="aria-label-threadselectmenu" class="voice"><roundcube:label name="arialabelthreadselectmenu" /></h3>
<ul class="menu listing" role="menu" aria-labelledby="aria-label-threadselectmenu">
<roundcube:button command="expand-unread" type="link-menuitem" label="expand-unread" class="expand unread disabled" classAct="expand unread active" />
<roundcube:button command="expand-all" type="link-menuitem" label="expand-all" class="expand all disabled" classAct="expand all active" />
<roundcube:button command="collapse-all" type="link-menuitem" label="collapse-all" class="expand none disabled" classAct="expand none active" />
</ul>
</div>
<div id="listoptions-menu" class="popupmenu propform" role="dialog" aria-labelledby="aria-label-listoptions">
<h3 id="aria-label-listoptions" class="voice"><roundcube:label name="arialabelmessagelistoptions" /></h3>
<roundcube:if condition="!in_array('message_sort_col', (array)config:dont_override)" />
<div class="form-group row">
<label for="listoptions-sortcol" class="col-form-label col-sm-4"><roundcube:label name="listsorting" /></label>
<div class="col-sm-8">
<select id="listoptions-sortcol" name="sort_col">
<option value=""><roundcube:label name="nonesort" /></option>
<option value="arrival"><roundcube:label name="arrival" /></option>
<option value="date"><roundcube:label name="sentdate" /></option>
<option value="subject"><roundcube:label name="subject" /></option>
<option value="fromto"><roundcube:label name="fromto" /></option>
<option value="from"><roundcube:label name="from" /></option>
<option value="to"><roundcube:label name="to" /></option>
<option value="cc"><roundcube:label name="cc" /></option>
<option value="size"><roundcube:label name="size" /></option>
</select>
</div>
</div>
<roundcube:endif />
<roundcube:if condition="!in_array('message_sort_order', (array)config:dont_override)" />
<div class="form-group row">
<label for="listoptions-sortord" class="col-form-label col-sm-4"><roundcube:label name="listorder" /></label>
<div class="col-sm-8">
<select id="listoptions-sortord" name="sort_ord">
<option value="ASC"><roundcube:label name="asc" /></option>
<option value="DESC"><roundcube:label name="desc" /></option>
</select>
</div>
</div>
<roundcube:endif />
<roundcube:if condition="env:threads" />
<div class="form-group row">
<label for="listoptions-threads" class="col-form-label col-sm-4"><roundcube:label name="lmode" /></label>
<div class="col-sm-8">
<select id="listoptions-threads" name="mode">
<option value="list"><roundcube:label name="list" /></option>
<option value="threads"><roundcube:label name="threads" /></option>
</select>
</div>
</div>
<roundcube:endif />
<roundcube:container name="listoptions" id="listoptionsmenu" />
<roundcube:add_label name="listoptionstitle" />
</div>
<roundcube:include file="includes/footer.html" />

83
templates/message.html Normal file
View File

@ -0,0 +1,83 @@
<roundcube:include file="includes/layout.html" />
<roundcube:include file="includes/menu.html" condition="!env:framed && !env:extwin" />
<roundcube:object name="mailboxlist" folder_filter="mail" type="js" />
<h1 class="voice"><roundcube:label name="arialabelmailpreviewframe" /></h1>
<div id="layout-content" class="selected">
<roundcube:if condition="!env:framed" />
<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
<div class="header" role="toolbar" aria-labelledby="aria-label-toolbar">
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
<span class="header-title"></span>
<roundcube:include file="includes/mail-menu.html" />
</div>
<roundcube:endif />
<div class="content frame-content" role="main">
<div id="message-header">
<h2 class="subject">
<span class="voice"><roundcube:label name="subject" />: </span>
<roundcube:object name="messageHeaders" valueOf="subject" />
<roundcube:if condition="!env:message_context && !env:extwin">
<roundcube:button command="extwin" type="link" class="extwin" innerClass="inner"
label="openinextwin" title="openinextwin" data-hidden="small" />
<roundcube:endif />
</h2>
<div class="header">
<roundcube:object name="contactphoto" class="contactphoto" placeholder="/images/contactpic.svg" bg-color="transparent" />
<div class="header-content">
<roundcube:object name="messageSummary" class="header-summary" addicon="virtual" />
<roundcube:object name="messageHeaders" class="header-headers" addicon="virtual" exclude="subject" max="10" />
<div class="header-links">
<roundcube:add_label name="details" />
<roundcube:add_label name="summary" />
<a href="#headers" class="headers-summary" onclick="return UI.headers_show(true)"></a>
<a href="#all-headers" class="headers-all" onclick="return UI.headers_dialog()"><roundcube:label name="headers" /></a>
<roundcube:add_label name="arialabelmessageheaders" />
<roundcube:if condition="env:optional_format=='text'" />
<roundcube:button command="change-format" prop="text" type="link" class="plain" innerClass="inner"
title="changeformattext" label="plaintoggle" />
<roundcube:elseif condition="env:optional_format=='html'" />
<roundcube:button command="change-format" prop="html" type="link" class="html" innerClass="inner"
title="changeformathtml" label="htmltoggle" />
<roundcube:endif />
<roundcube:container name="headerlinks" id="header-links" />
</div>
</div>
</div>
</div>
<div id="message-content">
<div class="leftcol" role="region" aria-labelledby="aria-label-messageattachments">
<h2 id="aria-label-messageattachments" class="voice"><roundcube:label name="attachments" /></h2>
<roundcube:object name="messageAttachments" id="attachment-list" class="attachmentslist" />
</div>
<div class="rightcol" role="region" aria-labelledby="aria-label-messagebody">
<h2 id="aria-label-messagebody" class="voice"><roundcube:label name="arialabelmessagebody" /></h2>
<roundcube:object name="messageObjects" id="message-objects" />
<roundcube:object name="messageBody" id="messagebody" headertableclass="headers-table" />
</div>
</div>
</div>
</div>
<!-- popup menus -->
<div id="attachmentmenu" class="popupmenu">
<h3 id="aria-label-attachmentmenu" class="voice"><roundcube:label name="arialabelattachmentmenu" /></h3>
<ul class="menu listing" role="menu" aria-labelledby="aria-label-attachmentmenu">
<roundcube:button command="open-attachment" type="link-menuitem" id="attachmenuopen" label="open" class="extwin disabled" classAct="extwin active" />
<roundcube:button command="download-attachment" type="link-menuitem" id="attachmenudownload" label="download" class="download disabled" classAct="download active" />
<roundcube:container name="attachmentmenu" id="attachmentmenu" />
</ul>
</div>
<div id="mailto-menu" class="popupmenu">
<h3 id="aria-label-mailtomenu" class="voice"><roundcube:label name="arialabelmailtomenu" /></h3>
<ul class="menu listing" role="menu" aria-labelledby="aria-label-mailtomenu">
<roundcube:button name="addtoaddressbook" type="link-menuitem" label="addtoaddressbook" class="addressbook" classAct="addressbook active" />
<roundcube:button name="composeto" type="link-menuitem" label="composeto" class="compose" classAct="compose active" />
<roundcube:container name="mailtomenu" id="mailto-menu" />
</ul>
</div>
<roundcube:include file="includes/footer.html" />

119
templates/messagepart.html Normal file
View File

@ -0,0 +1,119 @@
<roundcube:include file="includes/layout.html" />
<h1 class="voice"><roundcube:var name="env:filename" /></h1>
<div id="layout-content" class="selected">
<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
<div class="header" role="toolbar" aria-labelledby="aria-label-toolbar">
<span class="header-title constant"><roundcube:var name="env:filename" /></span>
<div id="messagetoolbar" class="toolbar menu">
<roundcube:button type="link" name="info" label="properties" title="properties"
class="info" innerclass="inner" onclick="UI.props_dialog()" />
<roundcube:button command="download" type="link" label="download" title="download"
class="download disabled" classAct="download" innerclass="inner" />
<roundcube:button command="print" type="link" label="print" title="print"
class="print disabled" classAct="print" innerclass="inner" data-hidden="small" />
<roundcube:container name="toolbar" id="messagetoolbar" />
<roundcube:if condition="env:is_message" />
<span class="spacer"></span>
<roundcube:button command="reply" type="link" class="reply disabled" classAct="reply"
label="reply" title="replytomessage" innerclass="inner" />
<span class="dropbutton">
<roundcube:button command="reply-all" type="link" class="reply-all disabled" classAct="reply-all"
label="replyall" title="replytoallmessage" innerclass="inner" />
<a href="#reply-all" id="replyallmenulink" class="dropdown" data-popup="replyall-menu" tabindex="0">
<span class="inner"><roundcube:label name="arialabelreplyalloptions" /></span>
</a>
</span>
<span class="dropbutton">
<roundcube:button command="forward" type="link" class="forward disabled" classAct="forward"
label="forward" title="forwardmessage" innerclass="inner" />
<a href="#forward" id="forwardmenulink" class="dropdown" data-popup="forward-menu" tabindex="0">
<span class="inner"><roundcube:label name="arialabelforwardingoptions" /></span>
</a>
</span>
<span class="spacer"></span>
<roundcube:button name="messagemenulink" id="messagemenulink" type="link"
class="more" label="more" title="moreactions" data-popup="message-menu"
innerclass="inner" data-hidden="small" />
<roundcube:endif />
<roundcube:if condition="stripos(env:mimetype, 'image/') === 0" />
<span class="spacer"></span>
<roundcube:button command="image-scale" type="link" prop="+" data-hidden="small"
class="zoomin disabled" classAct="zoomin"
label="zoomin" title="increaseimage" innerclass="inner" />
<roundcube:button command="image-scale" type="link" prop="-" data-hidden="small"
class="zoomout disabled" classAct="zoomout"
label="zoomout" title="decreaseimage" innerclass="inner" />
<roundcube:button command="image-rotate" type="link" data-hidden="small"
class="rotate disabled" classAct="rotate"
label="rotate" title="rotateimage" innerclass="inner" />
<roundcube:endif />
</div>
</div>
<h2 id="aria-label-messagepart" class="voice"><roundcube:label name="arialabelattachmentpreview" /></h2>
<div class="iframe-wrapper">
<roundcube:object name="messagePartFrame" id="messagepartframe" title="arialabelattachmentpreview"
role="main" aria-labelledby="aria-label-messagepart" />
</div>
<roundcube:if condition="stripos(env:mimetype, 'image/') === 0" />
<div id="image-tools" class="image-tools" data-hidden="big">
<h3 id="aria-label-imagetools" class="voice"><roundcube:label name="arialabelimagetools" /></h3>
<div class="toolbar menu" role="menu" aria-labelledby="aria-label-imagetools">
<roundcube:button command="image-scale" type="link" prop="+"
class="zoomin disabled" classAct="zoomin"
label="zoomin" title="increaseimage" innerclass="inner" />
<roundcube:button command="image-scale" type="link" prop="-"
class="zoomout disabled" classAct="zoomout"
label="zoomout" title="decreaseimage" innerclass="inner" />
<roundcube:button command="image-rotate" type="link"
class="rotate disabled" classAct="rotate"
label="rotate" title="rotateimage" innerclass="inner" />
</div>
<a href="#" class="button icon tools" onclick="$(this).attr('title', $(this).data('label-' + ($('#image-tools').toggleClass('open').is('.open') ? 'hide' : 'show')))"
data-label-show="<roundcube:label name="showtools" />" data-label-hide="<roundcube:label name="hidetools" />" title="<roundcube:label name="showtools" />">
<span class="inner"><roundcube:label name="showtools" /></span>
</a>
</div>
<roundcube:endif />
</div>
<roundcube:if condition="env:is_message" />
<div id="forward-menu" class="popupmenu">
<h3 id="aria-label-forwardmenu" class="voice"><roundcube:label name="arialabelforwardingoptions" /></h3>
<ul class="menu listing" role="menu" aria-labelledby="aria-label-forwardmenu">
<roundcube:button type="link-menuitem" command="forward-inline" label="forwardinline" prop="sub" classAct="forward inline active" class="forward disabled" />
<roundcube:button type="link-menuitem" command="forward-attachment" label="forwardattachment" prop="sub" classAct="forward attachment active" class="forward attachment disabled" />
<roundcube:container name="forwardmenu" id="forward-menu" />
</ul>
</div>
<div id="replyall-menu" class="popupmenu">
<h3 id="aria-label-replyallmenu" class="voice"><roundcube:label name="arialabelreplyalloptions" /></h3>
<ul class="menu listing" role="menu" aria-labelledby="aria-label-replyallmenu">
<roundcube:button type="link-menuitem" command="reply-all" label="replyall" prop="sub" class="reply all disabled" classAct="reply all active" />
<roundcube:button type="link-menuitem" command="reply-list" label="replylist" prop="sub" class="reply list disabled" classAct="reply list active" />
<roundcube:container name="replyallmenu" id="replyall-menu" />
</ul>
</div>
<div id="message-menu" class="popupmenu">
<h3 id="aria-label-messagemenu" class="voice"><roundcube:label name="arialabelmoremessageactions" /></h3>
<ul class="menu listing" role="menu" aria-labelledby="aria-label-messagemenu">
<roundcube:button type="link-menuitem" command="edit" prop="new" label="editasnew" class="edit asnew disabled" classAct="edit asnew active" />
<roundcube:button type="link-menuitem" command="viewsource" label="viewsource" class="source disabled" classAct="source active" />
<roundcube:container name="messagemenu" id="message-menu" />
</ul>
</div>
<roundcube:endif />
<roundcube:add_label name="properties" />
<div id="properties-menu" class="popupmenu" role="dialog" aria-labelledby="aria-label-contentinfo">
<h3 id="aria-label-contentinfo" class="voice"><roundcube:label name="properties" /></h3>
<div class="scroller">
<roundcube:object name="messagePartControls" class="listing props-table" role="contentinfo"
aria-labelledby="aria-label-contentinfo" />
</div>
</div>
<roundcube:include file="includes/footer.html" />

27
templates/messageprint.html Normal file
View File

@ -0,0 +1,27 @@
<roundcube:include file="includes/layout.html" />
<roundcube:object name="logo" id="logo" alt="Logo" logo-type="print" logo-match="template" class="float-sm-right" />
<div class="print-content" role="main">
<div id="message-header">
<h2 class="subject">
<roundcube:object name="messageHeaders" valueOf="subject" />
</h2>
<div class="header">
<roundcube:object name="contactphoto" class="contactphoto" placeholder="/images/contactpic.svg" />
<div class="header-content details-view">
<roundcube:object name="messageHeaders" class="header-headers" addicon="virtual" exclude="subject" max="10" />
</div>
</div>
</div>
<div id="message-content">
<div role="region">
<roundcube:object name="messageAttachments" id="attachment-list" class="attachmentslist" />
</div>
<div role="region">
<roundcube:object name="messageBody" id="messagebody" headertableclass="headers-table" />
</div>
</div>
</div>
<roundcube:include file="includes/footer.html" />

15
templates/plugin.html Normal file
View File

@ -0,0 +1,15 @@
<roundcube:include file="includes/layout.html" />
<roundcube:include file="includes/menu.html" />
<roundcube:include file="includes/settings-menu.html" condition="env:task == 'settings'" />
<div id="layout-content" class="selected" role="main">
<div class="header">
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
<span class="header-title"></span>
</div>
<roundcube:object name="plugin.body" />
</div>
<roundcube:object name="plugin.footer" />
<roundcube:include file="includes/footer.html" />

13
templates/responseedit.html Normal file
View File

@ -0,0 +1,13 @@
<roundcube:include file="includes/layout.html" />
<h1 class="voice"><roundcube:object name="steptitle" /></h1>
<div class="formcontent">
<roundcube:object name="responseform" class="propform" size="60" textareacols="60" textarearows="18" />
</div>
<div class="formbuttons">
<roundcube:button command="save" class="btn btn-primary submit" label="save" condition="!env:readonly" />
</div>
<roundcube:include file="includes/footer.html" />

41
templates/responses.html Normal file
View File

@ -0,0 +1,41 @@
<roundcube:include file="includes/layout.html" />
<roundcube:include file="includes/menu.html" />
<roundcube:include file="includes/settings-menu.html" />
<h1 class="voice"><roundcube:label name="responses" /></h1>
<!-- responses list -->
<div id="layout-list" class="listbox selected" aria-labelledby="aria-label-responseslist">
<div class="header">
<a class="button icon back-sidebar-button" href="#sidebar"><span class="inner"><roundcube:label name="settings" /></span></a>
<span id="aria-label-responseslist" class="header-title"><roundcube:label name="responses" /></span>
<a class="button icon toolbar-menu-button" href="#list-menu"><span class="inner"><roundcube:label name="menu" /></span></a>
</div>
<div class="scroller">
<roundcube:object name="responseslist" id="responses-table" class="listing"
noheader="true" role="listbox" data-list="responses_list"
data-label-msg="listempty" data-label-ext="listusebutton" data-create-command="add" />
</div>
<div class="footer"></div>
</div>
<!-- response details frame -->
<div id="layout-content" role="main">
<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
<div class="header" role="toolbar" aria-labelledby="aria-label-toolbar">
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
<span class="header-title"></span>
<!-- toolbar -->
<div id="responsestoolbar" class="toolbar menu">
<roundcube:button command="add" type="link" class="create disabled" classAct="create"
label="create" title="newresponse" innerClass="inner" data-fab="true" />
<roundcube:button command="delete" type="link" class="delete disabled" classAct="delete"
label="delete" title="delete" innerClass="inner" />
</div>
</div>
<div class="iframe-wrapper">
<roundcube:object name="contentframe" id="preferences-frame" src="env:blankpage" title="arialabelresponseeditfrom" />
</div>
</div>
<roundcube:include file="includes/footer.html" />

28
templates/settings.html Normal file
View File

@ -0,0 +1,28 @@
<roundcube:include file="includes/layout.html" />
<roundcube:include file="includes/menu.html" />
<roundcube:include file="includes/settings-menu.html" />
<h1 class="voice"><roundcube:label name="preferences" /></h1>
<div id="layout-list" class="listbox<roundcube:exp expression="!request:_action ? '' : ' selected'"/>" aria-labelledby="aria-label-prefsection">
<div class="header">
<a class="button icon back-sidebar-button" href="#sidebar"><span class="inner"><roundcube:label name="settings" /></span></a>
<span id="aria-label-prefsection" class="header-title"><roundcube:label name="preferences" /></span>
</div>
<div class="scroller">
<roundcube:object name="sectionslist" id="sections-table" class="listing iconized settings-default-icon"
noheader="true" role="listbox" data-list="sections_list" />
</div>
</div>
<div id="layout-content" role="main">
<div class="header">
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
<span class="header-title"></span>
</div>
<div class="iframe-wrapper">
<roundcube:object name="contentframe" id="preferences-frame" src="env:blankpage" title="arialabelpreferencesform" />
</div>
</div>
<roundcube:include file="includes/footer.html" />

13
templates/settingsedit.html Normal file
View File

@ -0,0 +1,13 @@
<roundcube:include file="includes/layout.html" />
<h1 class="voice"><roundcube:object name="sectionname" /></h1>
<div class="formcontent">
<roundcube:object name="userprefs" form="form" class="propform cols-sm-6-6" />
</div>
<div class="formbuttons">
<roundcube:button command="save" class="btn btn-primary submit" label="save" />
</div>
<roundcube:include file="includes/footer.html" />

BIN
thumbnail.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

4378
ui.js Normal file
View File

File diff suppressed because it is too large Load Diff

13
ui.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

37
watermark.html Normal file
View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html, body { height: 100%; overflow: hidden; }
body {
background: url(images/arona.png) center no-repeat #fff;
background-size: 50%;
}
html:not(.dark-mode) body:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(255, 255, 255, .25);
}
html.dark-mode > body {
background-color: #21292c;
background-blend-mode: soft-light;
}
</style>
<script>
try {
if (document.cookie.indexOf('colorMode=dark') > -1
|| (document.cookie.indexOf('colorMode=light') === -1 && window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
document.documentElement.className += ' dark-mode';
}
} catch (e) { }
</script>
</head>
<body></body>
</html>