diff --git a/skins/elastic/styles/styles.less b/skins/elastic/styles/styles.less index 34be5aefa..796855379 100644 --- a/skins/elastic/styles/styles.less +++ b/skins/elastic/styles/styles.less @@ -1,7 +1,7 @@ @import (reference) "fontawesome.less"; @import (reference) "colors.less"; -/* Fonts */ +/*** Fonts ***/ @font-face { font-family: 'Icons'; @@ -68,7 +68,7 @@ button, input, select, textarea { @import "layout.less"; -/* Font-icons */ +/*** Font-icons ***/ .font-icon-class { font-size: 1.25em; @@ -124,16 +124,10 @@ button, input, select, textarea { /*** Common UI elements ***/ #uploadform, -.ui.popup, .voice { display: none; } -div.ui-dialog-content > .ui.popup, -div.popover-content > .ui.popup { - display: block !important; -} - body.iframe { .formcontent { padding: 1em; @@ -144,22 +138,6 @@ body.iframe { } } -.ui-dialog iframe { - width: 100%; - height: 100%; - border: 0; -} - -.ui-dialog-content.iframe { - padding: 0 !important; - overflow: hidden !important; -} - -.ui.popup { - padding: 0; - min-width: 180px; -} - #rcmdraglayer { min-width: 260px; width: auto !important; @@ -187,25 +165,25 @@ body.iframe { } } - -div.popover-content { - padding: 0; -} - -div.popover > h3 { - display: none; -} - #content .watermark { background: url(../images/watermark.jpg) center no-repeat; width: 100%; height: 100%; } +.noselect { + user-select: none; + -moz-user-select: none; + -khtml-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; +} + -/* Widgets */ +/*** Widgets ***/ @import "widgets/buttons.less"; +@import "widgets/dialogs.less"; @import "widgets/taskmenu.less"; @import "widgets/messages.less"; @import "widgets/toolbar.less"; @@ -213,6 +191,7 @@ div.popover > h3 { @import "widgets/lists.less"; @import "widgets/folderlist.less"; @import "widgets/messagelist.less"; +@import "widgets/messagebody.less"; @import "widgets/attachmentlist.less"; @import "widgets/googiespell.less"; @@ -231,3 +210,64 @@ div.popover > h3 { width: 95%; max-width: 320px; } + + +/*** Addressbook UI ***/ + +#contacts-table { + .contact.readonly td { + font-style: italic; + } + + td.action { + /* TODO */ + a { + /* TODO */ + } + } + + span.email { + display: inline; + color: #69939e; /* TODO */ + font-style: italic; + margin-left: 0.5em; + } +} + +#contactpic { /* TODO */ } +#contactphoto { /* TODO */ } +#contacthead { /* TODO */ } +.contactfieldgroup { /* TODO */ } + + +/*** Settings UI ***/ + +.skinselection { + span { + display: inline-block; + vertical-align: middle; + padding-right: 1em; + } + + .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 #ccc; /* TODO */ + background: #fff; + border-radius: 4px; + } +} diff --git a/skins/elastic/styles/widgets/dialogs.less b/skins/elastic/styles/widgets/dialogs.less new file mode 100644 index 000000000..6b84950e9 --- /dev/null +++ b/skins/elastic/styles/widgets/dialogs.less @@ -0,0 +1,40 @@ +/*** Style for dialogs ***/ + +/* TODO: To be reviewed with popups implementation */ + +.ui.popup { + display: none; +} + +div.ui-dialog-content > .ui.popup, +div.popover-content > .ui.popup { + display: block !important; +} + +.ui-dialog iframe { + width: 100%; + height: 100%; + border: 0; +} + +.ui-dialog-content.iframe { + padding: 0 !important; + overflow: hidden !important; +} + +.ui.popup { + padding: 0; + min-width: 180px; +} + +div.popover-content { + padding: 0; +} + +div.popover > h3 { + display: none; +} + +.pgpkeyimport { + /* TODO */ +} diff --git a/skins/elastic/styles/widgets/folderlist.less b/skins/elastic/styles/widgets/folderlist.less index fd6dc273c..7299a0c3a 100644 --- a/skins/elastic/styles/widgets/folderlist.less +++ b/skins/elastic/styles/widgets/folderlist.less @@ -19,13 +19,21 @@ font-weight: bold; } - &.selected > a .unreadcount { + &.selected .unreadcount { background: /* todo */; } - &.recent > a .unreadcount { + &.recent > .unreadcount { background: /* todo */; } + + &.unread { + /* TODO */ + } + + &.recent { + /* TODO */ + } } a:before { diff --git a/skins/elastic/styles/widgets/lists.less b/skins/elastic/styles/widgets/lists.less index e9e316cb1..5aa078e18 100644 --- a/skins/elastic/styles/widgets/lists.less +++ b/skins/elastic/styles/widgets/lists.less @@ -41,6 +41,11 @@ td.selection > input { vertical-align: middle; } + + /* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */ + &.focus tbody tr.focused > td:first-child { + border-left: 2px solid #739da8; /* TODO */ + } } table.listing { @@ -134,6 +139,9 @@ ul.listing { &.contact.person td.name:before { content: @fa-var-user; } + &.contact.group td.name:before { + content: @fa-var-group; + } &.general > td.section:before { content: @fa-var-desktop; } diff --git a/skins/elastic/styles/widgets/messagebody.less b/skins/elastic/styles/widgets/messagebody.less new file mode 100644 index 000000000..78cfc520d --- /dev/null +++ b/skins/elastic/styles/widgets/messagebody.less @@ -0,0 +1,65 @@ +/***** Styles for message body elements *****/ + + +#messagebody { + /* TODO */ + + &.mailvelope { + margin: 0; + } +} + +div.message-part, +div.message-htmlpart { + /* TODO */ + + blockquote { + color: blue; + border-left: 2px solid blue; + border-right: 2px solid blue; + background-color: #F6F6F6; /* TODO */ + margin: 2px 0; + padding: 0 0.4em; + overflow: hidden; + text-overflow: ellipsis; + + blockquote { + color: green; + border-left: 2px solid green; + border-right: 2px solid green; + + blockquote { + color: #900; + border-left: 2px solid #b00; + border-right: 2px solid #b00; + } + } + } +} + +div.message-partheaders { + /* TODO */ +} + +#messagepartframe { + border: 0; + width: 100%; + height: 100%; +} + +#messagepartheader { + table { + table-layout: fixed; + overflow: hidden; + + td { + text-overflow: ellipsis; + overflow: hidden; + + &.title { + width: 60px; + padding-right: 0; + } + } + } +} diff --git a/skins/elastic/styles/widgets/messagelist.less b/skins/elastic/styles/widgets/messagelist.less index 93620bb45..035392322 100644 --- a/skins/elastic/styles/widgets/messagelist.less +++ b/skins/elastic/styles/widgets/messagelist.less @@ -73,6 +73,15 @@ table.fixedcopy { tr.deleted td.subject span.fromto { color: #ccc; /* TODO */ } + + tr.unread td.subject span.subject { + /* TODO font-weight: bold? */ + } + + /* thread parent message with unread children */ + tr.unroot td.subject a { + text-decoration: underline; + } }