544 lines
12 KiB
Plaintext
544 lines
12 KiB
Plaintext
/**
|
|
* 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-menu,
|
|
.tox-dialog__body-nav,
|
|
.tox-collection__group {
|
|
scrollbar-width: @scrollbar-width;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|