Initial commit
This commit is contained in:
commit
975e49cc86
GPG Key ID:
24260130A908EB5A
118
README.md
Normal file
118
README.md
Normal 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
6
deps/bootstrap.bundle.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
6
deps/bootstrap.min.css
vendored
Normal file
6
deps/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
17
deps/less.min.js
vendored
Normal file
17
deps/less.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
fonts/fa-regular-400.woff
Normal file
BIN
fonts/fa-regular-400.woff
Normal file
Binary file not shown.
BIN
fonts/fa-regular-400.woff2
Normal file
BIN
fonts/fa-regular-400.woff2
Normal file
Binary file not shown.
BIN
fonts/fa-solid-900.woff
Normal file
BIN
fonts/fa-solid-900.woff
Normal file
Binary file not shown.
BIN
fonts/fa-solid-900.woff2
Normal file
BIN
fonts/fa-solid-900.woff2
Normal file
Binary file not shown.
BIN
images/arona.png
Normal file
BIN
images/arona.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 116 KiB |
5
images/bg.svg
Normal file
5
images/bg.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
3
images/contactgroup.svg
Normal file
3
images/contactgroup.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 769 B |
3
images/contactpic.svg
Normal file
3
images/contactpic.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 367 B |
3
images/corner-handle.svg
Normal file
3
images/corner-handle.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 205 B |
3
images/download.svg
Normal file
3
images/download.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 472 B |
BIN
images/favicon.ico
Normal file
BIN
images/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
1
images/google-icon.svg
Normal file
1
images/google-icon.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 764 B |
5
images/login.svg
Normal file
5
images/login.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
5
images/logo.svg
Normal file
5
images/logo.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
8
images/microsoft-icon.svg
Normal file
8
images/microsoft-icon.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
21
meta.json
Normal file
21
meta.json
Normal 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
1
styles.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
280
styles/colors.less
Normal file
280
styles/colors.less
Normal 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
1123
styles/dark.less
Normal file
File diff suppressed because it is too large
Load Diff
95
styles/embed.less
Normal file
95
styles/embed.less
Normal 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
1
styles/embed.min.css
vendored
Normal 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
1397
styles/fontawesome.less
vendored
Normal file
File diff suppressed because it is too large
Load Diff
149
styles/global.less
Normal file
149
styles/global.less
Normal 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
414
styles/layout.less
Normal 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
62
styles/mixins.less
Normal 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
78
styles/print.less
Normal 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
1
styles/print.min.css
vendored
Normal 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
458
styles/styles.less
Normal 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 {
|
||||
| ||||