/** * Roundcube webmail styles for the Elastic skin * * Copyright (c) 2017, 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 form elements ***/ #uploadform { display: none; } form.smart-upload, input.smart-upload { visibility: hidden; width: 1px; height: 1px; opacity: 0; } .propform { /* TODO: do we need this? */ &:not(.popupmenu) { width: 100%; } /* This is the way we can have multiple checkboxes in a single form field */ .form-check td:not(.title) > label { display: block; margin: 0; line-height: 2rem; label { margin-right: .5rem; } } td.datetime { display: flex; input:first-child { margin-right: .5rem; } input:last-child { width: 75%; } } td.rowbuttons { width: 1%; white-space: nowrap; span { display: none; } a { padding: 0; line-height: 2.3rem; height: 2.3rem; font-size: 1rem; &:before { &:extend(.font-icon-class); content: @fa-var-plus; margin: 0; } &.delete:before { content: @fa-var-trash-o; } &.advanced:before { content: @fa-var-cog; } &:not(:last-child) { margin-right: .25rem; } } } td.rowactions { width: 1%; .form-control { width: auto; } } td.rowtargets { .input-group { margin-bottom: .25rem; *:first-child.input-group-addon { text-align: left; min-width: 7.5em; } } & > .advanced { margin-top: .25rem; } } td > .flexbox { display: flex; & > .multi-input { width: 100%; margin-left: .25rem; } } .rulerow { margin-bottom: .5rem; } &.groupped { &.readonly { legend { margin: 0; } label { min-width: 7rem; /* Overwrite Bootstrap .input-group-addon style to make the label transparent */ background-color: transparent; border: 0; border-radius: 0; } } .row.input-group { margin-bottom: .5rem; flex-wrap: nowrap; & > *:first-child { min-width: 8rem; height: auto; padding-right: .375rem; padding-left: .375rem; overflow: hidden; text-overflow: ellipsis; @media screen and (max-width: @screen-width-xs) { min-width: 6rem; width: 6rem; flex-grow: unset; } } & > *:nth-child(2) { flex-grow: 30; } &:last-child { margin-bottom: 1rem; } select { text-align: left; height: auto; } .content { padding: 0; display: flex; flex-wrap: wrap; input { border-radius: 0; border-color: transparent; } .ff_street { width: 100%; } .ff_locality { width: 75%; } .ff_zipcode { width: 25%; } .ff_country, .ff_region { width: 50%; } } } .form-control-plaintext { flex-grow: 1; } } .addfield { margin: 0; select { width: 8rem; margin-top: .5rem; } } } @media screen and (max-width: 576px) { .propform { table.compact-table { overflow-x: initial; tbody { display: block; } .rowactions > select, .flexbox > select { width: 100%; } tr { display: flex; flex-direction: column; td { width: 100%; padding-right: 0; padding-left: 0; &.rowbuttons { text-align: right; a { margin-right: .5rem; & > span { display: inline; } } } } } } } } .propform, .formcontent { legend { font-weight: bold; font-size: 1.2em; } } /* Forms fixes for IE and Edge */ html.ms .propform { .row:not(.form-check) > td { display: flex; } @media screen and (min-width: 576px) { .row.form-check > td { display: flex; } } @media screen and (max-width: 575px) { .row { display: block; } } } .formcontainer { display: flex; flex-direction: column; justify-content:flex-start; overflow-y: hidden !important; height: 100%; .formcontent { overflow-x: hidden; overflow-y: auto; } .formbuttons { padding: 0.5rem 1rem; button { margin-right: .5rem; } } } html.layout-phone { .formcontainer { .formbuttons { display: none; } } } .formcontent { padding: 1em; .row { margin-right: 0; /* without these the form is too wide causing horizontal scrollbar appearence */ margin-left: 0; .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 { /* overwrite Bootstrap's redundant padding */ padding: 0; } .form-control-plaintext, label.col-form-label { padding: .375rem .375rem .375rem 0; } } .row.form-check { padding-right: 0; /* without these e.g. inputs in compose screen are not aligned properly */ display: flex; /* https://github.com/twbs/bootstrap/issues/22348 */ flex-wrap: nowrap; /* fixed checkbox vertical alignment */ td:not(.col-form-label) { padding: 0; } /* alignment fixes needed because we do not stick precissely to Bootstrap's form structure */ @media screen and (max-width: 576px) { .col-6 { max-width: 100%; flex: auto; } & > *:last-child { width: 1%; min-width: 2.2em; /* for icon-checkbox */ padding-right: 15px; } } .form-check-input { margin: 0; /* fixes checkbox alignment with other inputs in a form */ margin-top: .5rem; margin-bottom: .5rem; } } .nav-tabs { margin-bottom: 1rem; } .hint { margin-bottom: 1em; font-style: italic; } .contact-header { display: flex; margin-bottom: 1rem; .contact-photo { min-width: @layout-contact-icon-width; } .contact-head { margin-left: 1rem; legend { display: none; } } } } @media screen and (max-width: @screen-width-mini) { .formcontent { .col-form-label { flex: auto; max-width: 100%; } .col-10 { flex: auto; max-width: 100%; } } } /* Some common icons for "iconized inputs" */ .input-group-addon.icon { text-decoration: none; &:before { &:extend(.font-icon-class); margin: 0; line-height: 1; } &.user:before { content: @fa-var-user; } &.pass:before { content: @fa-var-lock; } &.host:before { content: @fa-var-home; } &.cancel:before { content: @fa-var-close; } &.delete:before { content: @fa-var-trash-o; } &.edit:before { content: @fa-var-pencil; } &.add:before { content: @fa-var-plus; } &.search:before { content: @fa-var-search; } &.filter:before { content: @fa-var-filter; } .inner { display: none; } } td.editfield { width: 99%; /* TODO */ } ul.proplist { padding-left: 15px; margin-bottom: 0; list-style-type: none; li { line-height: 2.4rem; margin-bottom: .25rem; display: flex; input[type=radio] { vertical-align: middle; margin-right: .5em; & + .input-group { flex-grow: 1; } } label { margin: 0; } .icon-checkbox { height: 2.4rem !important; margin-left: -1.2em; & + label { height: 1.8rem; margin-right: .5rem; } } select { width: auto; display: inline; } } } .checklist { .form-check-input + label { margin-right: .25rem; line-height: 1; } } /*** Forms in popups ***/ .popup form.propform { padding: .5rem; overflow-x: hidden; } .popupmenu.form { &.nolist { padding: 0 .5rem; } ul { list-style-type: none; padding: 0; margin: 0; } li:not(.separator) { padding: 0 1rem; label { margin: 0; height: @listing-line-height; input { margin-right: .5rem; } } } input { vertical-align: middle; height: @listing-line-height !important; } select { margin: .5rem 0; } .buttons { text-align: center; padding: .5rem; } } html.touch .popupmenu.form { li { input.icon-checkbox + label:before { line-height: 1.4; } } } /*** Smart list (multiple input) field ***/ .multi-input { & > .content { max-height: 11.65em; overflow: hidden; overflow-y: auto; border-radius: .25rem; border: 1px solid @color-input-border; &.focused { border: 1px solid @color-input-border-focus; } /* TODO: style button focus */ } .input-group { margin: 0 !important; } .input-group-addon { &.reset:before { &:extend(.font-icon-class); content: @fa-var-trash-o; margin: 0; } } .input-group-addon, .form-control { height: 2.25rem; /* to be the same height as select.form-control element */ } input.form-control { padding-left: .5rem; } input, input:focus, .input-group-addon { border-radius: 0; border: 0; border-bottom: 1px solid @color-input-border; } .input-group:last-child * { border: 0; } & + .btn { margin-top: .5rem; } &.is-invalid { & > .content { border: 1px solid @color-input-border-invalid; } & > .invalid-feedback { display: inline-block; } } } /*** Files upload widget with list of files, upload form and drop area ***/ .file-upload { /* TODO */ padding: 1em 1em 12em; margin: 1em; background-color: #f4f4f4; .upload-form { text-align: center; padding-bottom: 1em; } .hint { margin-bottom: .5rem; } .attachmentslist { list-style: none; li { display: block; padding-bottom: .5em; } } &.droptarget { &.hover { } &.active { } } } /*** Smart recipient input field ***/ @recipient-input-margin-fix: .375rem; .recipient-input { display: flex; flex-wrap: wrap; padding: 0 .75rem @recipient-input-margin-fix .75rem; &.focus { border-color: @color-input-border-focus; } .recipient { flex: 1; display: flex; position: relative; max-width: 50%; border: 1px solid @color-recipient-input-border; background-color: @color-recipient-input-background; border-radius: .25em; padding: 0 .25em; margin-top: @recipient-input-margin-fix; margin-right: .2em; white-space: nowrap; @media screen and (max-width: 450px) { width: 100%; max-width: 100%; } } .name { flex-grow: 1; display: inline-block; line-height: 1.1; padding: .25rem; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; } .email { text-indent: -5000rem; display: inline-block; width: 0; } .quotes { position: absolute; width: 0; opacity: 0; } a.button.icon { font-size: .8em; cursor: pointer; line-height: 1.5; &:before { float: none; display: inline-block; width: 1em; margin: 0; } } input { flex-grow: 1; min-width: 25%; background: transparent !important; border: 0 !important; margin-top: @recipient-input-margin-fix; outline: 0; } } /*** Skin selection widget ***/ .skinselection { white-space: nowrap; display: table-row; & > span { display: table-cell; vertical-align: middle; padding: .1em .5em; white-space: normal; &:last-child { padding-right: 0; } } .skinitem input { width: auto; } .skinname { font-weight: bold; } .skinlicense, .skinlicense a { font-style: italic; text-decoration: none; } .skinlicense a:hover { text-decoration: underline; } .skinthumbnail { width: 64px; height: 64px; border: 1px solid @color-input-border; background: #fff; border-radius: 4px; } } /*** Image upload widget ***/ .image-upload { position: relative; overflow: hidden; cursor: pointer; background-color: @color-image-upload-background; a.button { display: none; position: absolute; left: 0; top: 0; background-color: rgba(255, 255, 255, .85); border-radius: 5px; width: 2.5em; padding: .5em; margin: .5em; line-height: 1; } &.changed a.button { display: inline; } } /*** Pretty icon checkbox ***/ input.icon-checkbox { opacity: 0; margin-left: -1.5em; & + label { margin: 0; display: inline; font-size: 1.2rem; &:before { &:extend(.font-icon-class); content: @fa-var-toggle-off; margin: 0; color: @color-checkbox; height: 2rem; } } &:disabled + label { opacity: 0.4; pointer-events: none; } &:checked + label:before { content: @fa-var-toggle-on; color: @color-checkbox-checked; } &:focus + label:before { color: @color-checkbox-focus; } &:checked:focus + label:before { color: @color-checkbox-checked-focus; } &.form-check-input + label { font-size: 1.25rem; padding-top: .25rem; } } html.touch input.icon-checkbox + label { font-size: 1.5rem; } /*** HTML editor widget (and TinyMCE editor) ***/ .mce-tinymce { &.mce-container.mce-panel { border-radius: .25rem; border-color: @color-input-border; overflow: hidden; } .mce-btn, .mce-panel { background-color: @color-input-addon-background; } } .html-editor { position: relative; display: flex; & > .nav { border-color: transparent; z-index: 1; position: absolute; top: 1px; right: 1rem; a.active { border-color: @color-input-border !important; &.mode-html { background-color: @color-input-addon-background; border-bottom-color: @color-input-addon-background !important; } &.mode-plain { border-bottom-color: #fff !important; } } a:hover { border-bottom-color: transparent; } } & > .googie_edit_layer, & > .mce-tinymce, & > textarea { margin-top: 2.55rem; font-family: monospace; width: 100% !important; } } /*** GoogieSpell widget ***/ .googie_window { width: 16rem; } .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.25; } .googie_link { color: @color-spellcheck-link; text-decoration: underline; cursor: pointer; } .googie_list { td { min-width: 8rem; width: auto; &.googie_list_onhover { color: @color-toolbarmenu-hover; background-color: @color-toolbarmenu-hover-background; } .googie_list_revert:before { &:extend(.font-icon-class); content: @fa-var-plus-square; } .googie_add_to_dict:before { &:extend(.font-icon-class); content: @fa-var-plus-square; } } input { display: inline-block; margin: .5rem .5rem .5rem 0 !important; padding: .5rem .75rem !important; } } /* Remove outline on selects in Firefox */ @-moz-document url-prefix() { select:-moz-focusring { color: transparent !important; text-shadow: 0 0 0 @color-font !important; } } /* Bootstrap style overrides */ .form-control, .form-control:focus { color: @color-font; } .invalid-feedback { color: @color-error; } .form-control.is-invalid { border-color: @color-input-border-invalid; } .form-group { margin-bottom: .5rem; }