egroupware_official/mail/templates/pixelegg/app.less
2013-12-19 03:14:47 +00:00

1211 lines
26 KiB
Plaintext
Executable File
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/**
* EGroupware: CSS with less preprocessor
*
* Please do NOT change app.css directly, instead change app.less and compile it!
*
* @link http://www.egroupware.org
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @author Stefan Reinhard <stefan.reinhard@pixelegg.de>
* @package mail
* @version $Id$
*/
@import (reference) "../../../pixelegg/less/def_buttons.less";
@import (reference) "../../../pixelegg/less/def_design_pattern_color_font_shadow.less";
@import (less) "../default/app.css";
#popupMainDiv{
padding: 5px;
.et2_grid{
tr{
td{
padding: 5px 0;
}
}
}
}
/*##############################################
# # #
# # #
# # #
# # #
# # #
# # #
# # #
# # iframe #
# # #
# # #
# # #
# # #
# # #
# # #
##############################################
*/
div#mail-index{
table.egwGridView_grid{
// border-collapse: inherit;
// width: 99%;
}
// Rahmen + padding
// .box_shadow_dialog;
#mail-index_mailPreviewContainer {}
// Message - standdardmäßig ausgeblendet
span#mail-index_msg{
span {
// background: red;
// height: 30px;
}
}
// alles
margin: 0 1% 0 0 !important;
// Box mit Header und Liste
div#mail-index_nm{
// Header
div.nextmatch_header{
// Counter
span.header_count ui-corner-all{
span{}
}
// Filter
div.filters{
// Fläche
select {margin-top: 8px;}
select#mail-index_filter{
}
select#mail-index_filter2{ }
// Suchfeld
input#mail-index_search{
height: 20px !important;
}
// Suchknopf
button.et2_button {
}
} // Ende Filter
} // Ende Header
// Listenausgabe der Emails
div {}
// Bilder in den Listen
tr.mail td img {height: 16px;}
} // Ende: Box mit Header und Liste
// Splitterbar
div.splitter-bar,
div.splitter-bar-horizontal {}
// Ansicht der Emails
div#mail-index_mailPreview{
// padding: 3px;
margin: 0;
.background-color-25-gray;
// From
div#mail-index_mailPreviewHeadersFrom{
width: 50%;
}
// An
div#mail-index_mailPreviewHeadersTo{
width: 50%;
}
// Date
div#mail-index_mailPreviewHeadersDate{
width: 50%;
}
// Subject
div#mail-index_mailPreviewHeadersSubject{
width: 100%;
}
// Icons
div#mail-index_mailPreviewIcons{}
// Email Inhalt
div#mail-index_mailPreviewContainer{
iframe#mail-index_messageIFRAME{
// Email Inhalt
div{}
// Zeit für das Anzeigen
div#divGenTime{}
}
}
} // Ende: Ansicht der Emails
} // iframe
/*##############################################
# # #
# # #
# # #
# # #
# # #
# # #
# # #
# Side # #
# bar # #
# # #
# # #
# # #
# # #
# # #
############################################## */
.egw_fw_ui_category_content{
// Create Feld
#mail-index_buttonmailcreate{
margin-left: 0px;
// #####################################################
// Create Button (mail)
button#mail-index_button[mailcreate],
button[id*="mailcreate"]{
.Complete_Button_add;
background-image: url("images/write_mail.png") !important;
background-position: right center !important;
background-repeat: no-repeat;
background-size: 24px 24px;
padding-left: 25px;
text-align: left;
width: 93%;
&:hover {
.box_shadow_standard_light_hover;
}
&:focus {
.border_radius_button_lefttop ;
.box_shadow_standard_light_inset;
}
}
}
// Mail Liste der Postfächer
span#mail-tree_target {
max-height: 50%;
}
.dtree {
.basefontfamily;
}
/*new mail in FOlder
span.standartTreeRow b {color: @egw_color_2_a;}
*/
} // Ende Sidebox
/* ##################################################################################
* E-Mail Dialog "Compose"
*
* ##################################################################################
*/
/*###########################################
# #
# #
#############################################
# #
# #
# #
# #
# #
# dialog #
# #
# #
#############################################
# #
# buttons #
# #
# #
##############################################*/
#mail-compose{
// gesamtbreite
width: 870px;
padding: 5px;
// ##################################
// Toolbar
.mail-compose_toolbar{
img{width: 22px;}
// Button senden -> dev_buttons.less
.mail-compose_button{
margin-right: 15px;
padding: 0 3px 0 0;
}
// Save
img#mail-compose_button[saveAsDraft],
.et2_button_icon {
vertical-align: middle;
padding: 2px;
.Complete_Button_Icon_normal;
&:hover {.box_shadow_standard_light_hover; .background-color-15-gray;}
&:focus {.box_shadow_standard_light_inset; .background-color-15-gray;}
}
// Dateien Upload
.et2_file,
.mail-compose_fileselector{
vertical-align: middle;
#mail-compose_uploadForCompose{
font-size: 0.7em;
.Complete_Button_text_icon_before;
background-image: url(images/attach.png) !important;
.background-color-5-gray;
height: 20px;
margin-left: 5px;
&:hover {.box_shadow_standard_light_hover; .background-color-15-gray;}
&:focus {.box_shadow_standard_light_inset; .background-color-15-gray;}
}
div.progress {width: 247px;}
}
// Speichern als
span.et2_label {font-size: 0.7em;}
//als INfolog
.mail-compose_infolog{
vertical-align: middle;
height: 20px;
padding: 3px 2px;
.Complete_Button_Icon_normal;
margin-right: 3px;
.et2_button_icon {border: none; box-shadow: none; border-radius: 0px; background-color: transparent;}
}
//als Ticket
.mail-compose_tracker{
vertical-align: middle;
height: 20px;
padding: 3px 2px;
.Complete_Button_Icon_normal;
margin-right: 3px;
span.et2_label {font-size: 0.7em; height: 20px;}
.et2_button_icon {border: none; box-shadow: none; border-radius: 0px; background-color: transparent;}
}
// Empfangsbenachrichtigung
.mail-compose_notification{
vertical-align: middle;
height: 20px;
padding: 3px 2px;
.Complete_Button_Icon_normal;
margin-right: 3px;
}
// Priorität
.mail-compose_priority{
vertical-align: middle;
height: 20px;
padding: 3px 2px;
.Complete_Button_Icon_normal;
margin-right: 3px;
span.et2_label {margin-right: 3px;}
select#mail-compose_priority{
box-shadow: none;
font-size: 0.8em;
border: none;
}
}
} // Toolbar Ende
// #############################
// Mail Header
.mailComposeHeaders,.mailComposeHeadersSection{
margin: 2px 0;
width: 98%;
span { width: 8em; font-size: 0.8em;}
div{ max-width: 770px; }
// Automatische Auwahlliste
span.ui-state-error {color: @egw_color_2_c;}
div.ms-res-item-active {
background: @egw_color_2_a;
span {color: #FFFFFF;}
}
// Betreff
input#mail-compose_subject { max-width: 750px;}
} // Ende Header
// Mail Body
// Signature
fieldset.mailSignature {
font-size: 0.8em;
select {}
span {margin-left: 8px;}
}
} // Ende Dialog
/* ##################################################################################
* E-Mail Dialog "Ansehen"
*
* ##################################################################################
*/
#mail-display{
// gesamtbreite
width: 870px;
padding: 5px;
.mailDisplayHeaderSection{
top: 0;
position: relative;
#mail-display_toolbar{
background-color: @egw_color_2_e;
background-image: none;
padding: 5px 3px;
height: 25px;
display: -webkit-box;
button {
// float: left;
.Complete_Button_Icon_normal;
height: 20px;
&:hover {.box_shadow_standard_light_hover; .background-color-15-gray;}
&:focus {.box_shadow_standard_light_inset; .background-color-15-gray;}
}
span.ui-state-default{
float: left;
background-image: none;
}
// Button ?
// Button antworten
// allen antworten
// Forward
#mail-display_forward_wrapper {
&:hover {}
&:focus {}
li {
a {
img { width: 16px;margin-right: 3px;}
}
}
}
// ?
// speichern
#mail-display_save_wrapper{
&:hover {}
&:focus {}
// das Wort speichern
button#mail-display_save {
background-image: url('../images/speichern.png');
background-position: left center;
background-repeat: no-repeat;
background-size: 16px 16px;
box-shadow: none;
&:hover {
img {display: none; background-image: none;}
}
&:focus {box-shadow: none; }
}
li {
a {
img { width: 16px;margin-right: 3px;}
}
}
}
// anzeigen
#mail-display_view_wrapper{
&:hover {}
&:focus {}
button#mail-display_view{
box-shadow: none;
&:hover {
img {display: none; background-image: none;}
}
&:focus {box-shadow: none; }
}
li {
a {
img { width: 16px;margin-right: 3px;}
}
}
}
// mark
#mail-display_mark_wrapper{
&:hover {}
&:focus {}
button#mail-display_mark{
box-shadow: none;
&:hover {
img {display: none; background-image: none;}
}
&:focus {box-shadow: none; }
}
li {
a {
img { width: 16px;margin-right: 3px;}
}
}
}
}
}
// Dateianhänge
.mailDisplayAttachments {
// background-color:#efefdf;
.background-color-10-gray;
max-height: 10%;
position: fixed;
bottom: 26px;
border: 0px solid @egw_color_3_a;
border-bottom: 0px;
opacity: 1;
-moz-opacity:1;
// filter: Alpha(opacity=100);
img {width: 16px;}
}
.mail_DisplayNone{
display: none;
}
} // Ende Display
/* ##################################################################################
* E-Mail
*
* ##################################################################################
*/
/* felamimail uses the styledefinitions below to format navButton/navSeparator */
tr.navbarBackground {
background-color:#dddddd;
}
div.navButton {
background-color:#dddddd;
float:left;
padding: 2px;
margin: 2px;
border: solid #dddddd 1px;
}
div.navButton:hover, div.navButtonHover {
background-color:#eeeeee;
float:left;
padding: 2px;
margin: 2px;
border: solid white 1px;
border-right: solid black 1px;
border-bottom: solid black 1px;
position: relative;
}
div.navButton:active, div.navButtonActive {
background-color:#dddddd;
float:left;
padding: 2px;
margin: 2px;
border: solid white 1px;
border-left: solid black 1px;
border-top: solid black 1px;
position: relative;
}
div.navSeparator {
background-color:#dddddd;
float:left;
padding: 0px;
margin: 2px;
border: solid silver 1px;
height:24px;
position: relative;
}
/* Fixes z-index problem with the calendar year selection (displays behind selectboxes)*/
.calendar .combo {
z-index: 1 !important;
}
//#############################################################################################
// mail/templates/app.css
textarea
{
font-family: monospace, sans-serif;
font-size: 110%;
}
.defaultProfile { color:#000000; font-weight:bold !important; }
.quoted1 { color:#660066; }
.quoted2 { color:#007777; }
.quoted3 { color:#990000; }
.quoted4 { color:#000099; }
.quoted5 { color:#bb6600; }
tr.mail div {
cursor: default;
white-space: normal;
text-overflow: ellipsis;
span {text-overflow: ellipsis;white-space: normal;}
}
tr.mail a {
cursor: pointer;
white-space: nowrap;
text-overflow: ellipsis;
}
tr.recent div,
tr.recent span,
tr.recent time,
tr.recent a,
tr.unseen div,
tr.unseen span,
tr.unseen time,
tr.unseen a {
color: #003075;
font-weight: bold;
}
tr.labelone div,
tr.labelone span,
tr.labelone time,
tr.labelone a {
color: #ff0080 !important;
}
tr.labeltwo div,
tr.labeltwo span,
tr.labeltwo time,
tr.labeltwo a {
color: #ff8000 !important;
}
tr.labelthree div,
tr.labelthree span,
tr.labelthree time,
tr.labelthree a {
color: #008000 !important;
}
tr.labelfour div,
tr.labelfour span,
tr.labelfour time,
tr.labelfour a {
color: #0000ff !important;
}
tr.labelfive div,
tr.labelfive span,
tr.labelfive time,
tr.labelfive a {
color: #8000ff !important;
}
tr.flagged div,
tr.flagged span,
tr.flagged time,
tr.flagged a {
color: #ff0000 !important;
}
tr.prio_high div,
tr.prio_high span,
tr.prio_high time,
tr.prio_high a {
color: #ac0000 !important;
}
tr.deleted div,
tr.deleted span,
tr.deleted time,
tr.deleted a {
color: silver;
text-decoration : line-through;
}
span.status_img {
display: inline-block;
width: 12px;
height: 12px;
background-repeat: no-repeat;
background-image: url(images/kmmsgread.png);
background-size: 12px 12px;
}
tr.deleted span.status_img {
background-image: url(images/kmmsgdel.png);
}
tr.unseen span.status_img {
background-image: url(images/kmmsgunseen.png);
}
tr.flagged_seen span.status_img {
background-image: url(images/read_flagged_small.png) !important;
}
tr.flagged_unseen span.status_img {
background-image: url(images/unread_flagged_small.png) !important;
}
tr.recent span.status_img {
background-image: url(images/kmmsgnew.png) !important;
}
tr.replied span.status_img {
background-image: url(images/kmmsgreplied.png) !important;
}
tr.forwarded span.status_img {
background-image: url(images/kmmsgforwarded.png) !important;
}
.subjectBold
{
font-size: 12px;
font-weight : bold;
font-family : Arial;
}
.subject
{
font-size: 12px;
font-family : Arial;
}
TR.sieveRowActive
{
font-size: 11px;
height : 20px;
padding: 0;
background : White;
}
A.sieveRowActive
{
font-size: 11px;
height : 14px;
padding: 0;
}
TR.sieveRowInActive
{
font-size: 11px;
height : 20px;
padding: 0;
background : White;
color: Silver;
}
A.sieveRowInActive
{
font-size: 11px;
height : 14px;
padding: 0;
color: Silver;
}
.bodyDIV {
position:absolute;
background-color:white;
top:134px;
bottom:0px;
width:100%;
border-top: 1px solid #efefdf;
}
.bodyDIVAttachment {
bottom:80px;
}
#attachmentSpanAllDIV{
background-color:#efefdf;
height:260px;
overflow:auto;
}
#attachmentDIV {
position:fixed;
background-color:#efefdf;
bottom:0px;
min-height:80px;
max-height:239px;
width:100%;
border-top: 1px solid silver;
overflow:auto;
}
#popupattachmentDIV {
position:top;
background-color:#efefdf;
bottom:0px;
min-height:80px;
max-height:239px;
width:100%;
border-top: 1px solid silver;
overflow:auto;
}
pre {
white-space: pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
width: 99%;
}
/*
avoid the vertical scrollbar within the sidebox section (triggered by the vertical dimension of the tree)
*/
.divSidebox {
overflow: hidden;
}
.textSidebox {
overflow-x: hidden;
overflow-y: auto;
}
/*
avoid the vertical scrollbar within the actual tablecontainer (of the tree)
*/
.containerTableStyle {
width: 100%;
overflow: hidden;
}
.dtree {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666;
white-space: nowrap;
div {
width: 100%;
}
img {
border: 0px;
vertical-align: middle;
}
a {
color: #333;
text-decoration: none;
}
a.node, a.nodeSel {
white-space: nowrap;
padding: 1px 2px 1px 2px;
&:hover{
color: #333;
text-decoration: underline;
}
}
a.nodeSel {
background-color: #c0d2ec;
}
.clip {
overflow: hidden;
}
table, tr, td {
border: none;
}
table {
overflow: hidden;
width: 100%;
display: table-row;
}
tbody, tr, td, span {
width: 100%;
overflow: hidden;
}
// Ende dtree
}
.useEllipsis {
text-overflow: ellipsis;
width: 250px;
white-space: nowrap;
overflow: hidden;
}
#mail-index {
position: relative
}
.mail-index_quotabox {
position: absolute;
top:8px;
right:74px;
width:200px !important;
z-index:99;
}
.mail-index_quotaDisplayNone {
display: none !important;
}
.mail-index_QuotaGreen, .mail-index_QuotaYellow, .mail-index_QuotaRed {
height:12px !important;
width:100px !important;
}
.mail-index_QuotaGreen > div {
background-color: green !important;
height:11px !important;
}
.mail-index_QuotaYellow > div {
background-color: yellow !important;
height:11px !important;
}
.mail-index_QuotaRed > div {
background-color: red !important;
height:11px !important;
}
/*
influence the tree display and scrolling behavior
*/
#mail-tree_target {
min-height: 35px;
max-height: 450px;
display: block;
display: -moz-inline-stack;
display: -moz-box;
width: 100%;
overflow: hidden;
overflow-y: auto;
z-index:100;
}
/*
we need the the image displayed with our buttons on the left side
*/
input[type=button] {
background-position: left;
}
#mail-index_messageIFRAME {
width: 100%;
height: 100%;
border: 0;
}
//#mail-index_button\[mailcreate\]
#mail-index_button[id*="mailcreate"]{
width: 99%;
text-align: left;
font-weight: bold;
padding-left: 25px;
background-image: url(images/write_mail.png) !important;
background-position: left;
background-repeat: no-repeat;
}
//#mail-compose_button[id*="send"] {
// text-align: left;
// font-weight: bold;
// padding-left: 30px;
// width: 80px;
// margin: 0px !important;
// background-image: url(images/mail_send.png) !important;
// background-position: left;
// background-repeat: no-repeat;
//}
.mailDisplay, #mail-index_mailPreview {
overflow: hidden;
position: relative;
margin-top: 5px;
}
#mail-compose_fileselector {
width: 245px !important;
}
#mail-compose_toolbar {
padding: 0px !important;
}
#mail-compose_toolbar > button {
padding: .2em .4em;
}
#mail-compose_toolbar > img {
width: 16px;
padding: 0px;
height: 16px !important;
}
#mail-compose_toolbar > button > span > img {
width: 16px;
padding: 0px;
height: 16px !important;
}
#mail-display_toolbar {
padding: 0px;
}
#mail-display_toolbar > button > span {
padding: .2em .4em;
}
#mail-display_toolbar > button > span > img {
width: 16px;
padding: 0px;
height: 16px !important;
}
#mail-index_mailPreviewIcons {
position: absolute;
right: 0;
top: 0;
}
// Headerbereich grau hinterlegt
#mail-index_mailPreviewContainer {
position: absolute;
border: 1px solid silver;
top: 75px;
bottom: 0;
left: 3px;
right: 0;
}
/*Toolbar der Email*/
#mail-index_toolbar {
padding: 0px;
background: none;
margin: 5px 5px 0 0;
border: none;
/* Elemente */
button {
background: none;
background-image: none;
padding: 0px !important;
.Complete_Button_Icon_normal;
&:hover {.Complete_Button_Icon_hover;}
&:active {.Complete_Button_Icon_active;}
&:focus {border: none;}
span {
padding: .2em .6em;
img {
width: 16px;
padding: 0px;
height: 16px !important;
}
}
}
}
// Anhänge an Email
#mail-index_previewAttachmentArea {
// background-color:#efefdf;
.background-color-10-gray;
max-height: 5%;
max-width: 50%;
position: absolute;
overflow:scroll;
overflow-x:hidden;
right: 7px;
top: 45px;
border-color: @gray-10;
.border_normal;
opacity: 1;
-moz-opacity:1;
z-index: 100;
// filter: Alpha(opacity=100);
img {width: 16px; height: 16px;}
td{padding: 2px;}
}
#mail-index_previewAttachmentArea.noContent {
border:0px !important;
}
.mailDisplayContainer, .mailDisplayAttachments {
display: block;
display: -moz-inline-stack;
display: -moz-box;
width: 99%;
overflow: hidden;
overflow-y: auto;
left: 3px;
right: 3px;
z-index: 100;
}
.mailDisplayContainer {
position: fixed;
overflow: hidden;
overflow-y: auto;
border: 1px solid silver;
top: 120px;
bottom: 100px;
}
.mailDisplayHeaders {
overflow: hidden;
}
.mailDisplayHeaderSection {
position: absolute;
top: 12px;
}
div.mailDisplayHeaders > div:first-parent {
overflow: hidden;
}
div.mailDisplayHeaders > span:first-child, div.mailComposeHeaders > span:first-child, div.mailPreviewHeaders > span:first-child {
width: 7em;
display: inline-block;
}
div.mailComposeHeaders > span:first-child {
width: 8em;
}
div.mailDisplayHeaders > span:first-child, div.mailComposeHeaders > span:first-child, div.mailComposeBody, div.mailPreviewHeaders > * {
margin-left: 3px;}
#mail-importMessage{
.et2_button_icon{
height: auto;
width: 24px;
}
}
//