mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-08-31 13:09:21 +03:00
Cleanup styling and gulp merge @media queries
This commit is contained in:
djmaze
parent
d3d0180208
commit
e13337e247
60 changed files with 699 additions and 731 deletions
11
dev/Styles/User/AdvancedSearch.less
Normal file
11
dev/Styles/User/AdvancedSearch.less
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
.b-advanced-search-content {
|
||||
&.modal {
|
||||
max-width: 780px;
|
||||
}
|
||||
.control-label {
|
||||
width: 110px;
|
||||
}
|
||||
.span4 {
|
||||
width: 360px;
|
||||
}
|
||||
}
|
||||
71
dev/Styles/User/Animations.less
Normal file
71
dev/Styles/User/Animations.less
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
|
||||
@keyframes highlight-folder-row {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.1); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
@keyframes textLoadingAnimationKeyFrame {
|
||||
0% { opacity: 1; }
|
||||
33% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes animate-stripes {
|
||||
0% {background-position: 0 0;}
|
||||
100% {background-position: 60px 0;}
|
||||
}
|
||||
|
||||
.e-strip-animation {
|
||||
background-size: 60px 60px;
|
||||
background-image: linear-gradient(135deg, #000 25%, #fff 25%,
|
||||
#fff 50%, #000 50%, #000 75%,
|
||||
#fff 75%, #fff);
|
||||
animation: animate-stripes 2s linear infinite;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1000px) {
|
||||
|
||||
.button-delete-transitions {
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
|
||||
.b-folders .e-item .anim-action-class {
|
||||
animation: highlight-folder-row 0.5s linear;
|
||||
}
|
||||
|
||||
.b-folders .btn.buttonContacts {
|
||||
transition: margin 0.3s linear;
|
||||
}
|
||||
|
||||
#rl-left .b-content {
|
||||
transition: opacity 0.3s linear;
|
||||
}
|
||||
|
||||
.b-list-content {
|
||||
.e-contact-item {
|
||||
transition: max-height 400ms ease;
|
||||
}
|
||||
}
|
||||
|
||||
.b-compose.loading .b-header-toolbar {
|
||||
background-size: 60px 60px;
|
||||
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%,
|
||||
transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%,
|
||||
transparent 75%, transparent);
|
||||
animation: animate-stripes 2s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.textLoadingAnimationD1, .textLoadingAnimationD2, .textLoadingAnimationD3 {
|
||||
animation: textLoadingAnimationKeyFrame 1s linear infinite 0s;
|
||||
}
|
||||
|
||||
.textLoadingAnimationD2 {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
.textLoadingAnimationD3 {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
131
dev/Styles/User/Attachmnets.less
Normal file
131
dev/Styles/User/Attachmnets.less
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
.attachmentItem {
|
||||
|
||||
position: relative;
|
||||
|
||||
display: inline-block;
|
||||
margin: 5px;
|
||||
max-width: 200px;
|
||||
min-width: 60px;
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
line-height: 24px;
|
||||
border: 0;
|
||||
background-color: rgba(128, 128, 128, 0.1);
|
||||
|
||||
box-shadow: 0 1px 4px #ccc;
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 5px rgba(0, 0, 0, 0.1);
|
||||
|
||||
border-radius: 3px;
|
||||
|
||||
&.waiting {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&.checked {
|
||||
box-shadow: 0 1px 4px #00a;
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 255, 0.3);
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 255, 0.1), 0 1px 5px rgba(0, 0, 255, 0.2);
|
||||
}
|
||||
|
||||
.checkboxAttachment {
|
||||
bottom: 6px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
}
|
||||
|
||||
.attachmentSize {
|
||||
font-size: 12px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.error {
|
||||
.iconMain, .iconPreview, .attachmentSize, .attachmentName {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.attachmentIconParent {
|
||||
|
||||
position: absolute;
|
||||
height: 56px;
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
|
||||
.iconPreview, .iconBG, .iconMain, .iconProgress {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.iconProgress {
|
||||
background: #eee;
|
||||
width: 0%;
|
||||
}
|
||||
|
||||
.iconBG {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
line-height: 55px;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.iconPreview {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.attachmentNameParent {
|
||||
|
||||
position: relative;
|
||||
|
||||
margin-left: 60px;
|
||||
padding: 4px 4px 3px 6px;
|
||||
min-width: 90px;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.iconMain, .iconPreview {
|
||||
box-sizing: border-box;
|
||||
padding: 6px 0 0;
|
||||
font-size: 36px;
|
||||
color: #aaa;
|
||||
|
||||
&.icon-none {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
.attachmentIconParent.hasPreview.isImage {
|
||||
.iconMain {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
.showPreview, .showPreplay,
|
||||
.attachmentIconParent.hasPreview:hover .iconMain,
|
||||
.attachmentIconParent.hasPreplay:hover .iconMain,
|
||||
.attachmentIconParent.hasPreview .hidePreview,
|
||||
.attachmentIconParent.hasPreplay .hidePreview {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.attachmentIconParent.hasPreview:hover .iconPreview,
|
||||
.attachmentIconParent.hasPreplay:hover .iconPreview {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.attachmentIconParent.hasPreview .showPreview,
|
||||
.attachmentIconParent.hasPreplay .showPreplay {
|
||||
display: inline;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
172
dev/Styles/User/Compose.less
Normal file
172
dev/Styles/User/Compose.less
Normal file
|
|
@ -0,0 +1,172 @@
|
|||
|
||||
.b-compose {
|
||||
|
||||
&.modal {
|
||||
width: 98%;
|
||||
max-width: 1000px;
|
||||
min-height: calc(100% - 52px);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.textAreaParent, .attachmentAreaParent {
|
||||
box-sizing: border-box;
|
||||
min-height: 200px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.attachmentAreaParent {
|
||||
border-top: 1px solid #ccc;
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
|
||||
.no-attachments-desc {
|
||||
padding-top: 50px;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
color: #666;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.attachmentList {
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.b-header-toolbar {
|
||||
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
|
||||
.close, .minimize-custom {
|
||||
opacity: 1;
|
||||
color: #fff;
|
||||
border-color: #eee;
|
||||
|
||||
font-size: 24px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.btn.disabled {
|
||||
&.button-delete {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.button-save, .button-delete, .saved-text {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.button-close, .button-skip {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.disabled.button-delete {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.b-header {
|
||||
|
||||
padding: 10px;
|
||||
background-color: rgba(128,128,128,0.2);;
|
||||
|
||||
.e-identity {
|
||||
|
||||
color: var(--main-color);
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
|
||||
&.multiply {
|
||||
cursor: pointer;
|
||||
border-bottom: 1px dashed var(--main-color);
|
||||
}
|
||||
}
|
||||
|
||||
.e-row {
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.e-label {
|
||||
text-align: right;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.e-value {
|
||||
|
||||
padding: 2px 0;
|
||||
|
||||
textarea, input[type="text"] {
|
||||
width: 100%;
|
||||
}
|
||||
textarea {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.error-desc {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.error-to {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.b-attachment-button {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.b-attachment-place {
|
||||
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
bottom: 5px;
|
||||
|
||||
border: 2px #777 dashed;
|
||||
z-index: 300;
|
||||
|
||||
line-height: 119px;
|
||||
text-align: center;
|
||||
background-color: #efefef;
|
||||
font-size: 24px;
|
||||
|
||||
border-radius: 10px;
|
||||
|
||||
&.dragAndDropOver {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 999px) {
|
||||
.b-compose.modal {
|
||||
border: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.minimize-custom {
|
||||
border: 0 solid #333;
|
||||
border-bottom-width: 3px;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
height: 20px;
|
||||
width: 16px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
margin-right: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.b-compose .b-header .e-label {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
285
dev/Styles/User/Contacts.less
Normal file
285
dev/Styles/User/Contacts.less
Normal file
|
|
@ -0,0 +1,285 @@
|
|||
|
||||
@contacts-popup-left-width: 220px;
|
||||
|
||||
.b-contacts-content {
|
||||
|
||||
.control-group {
|
||||
.control-label {
|
||||
padding-top: 0;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
&.modal {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: auto;
|
||||
min-width: 550px;
|
||||
max-width: 900px;
|
||||
min-height: 300px;
|
||||
max-height: 700px;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
height: calc(100% - 49px);
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.b-list-toolbar {
|
||||
padding: 0;
|
||||
height: 44px;
|
||||
text-align: center;
|
||||
width: @contacts-popup-left-width;
|
||||
border-bottom: 1px solid rgba(128,128,128,0.4);
|
||||
|
||||
.e-search {
|
||||
margin-top: 7px;
|
||||
width: @contacts-popup-left-width - 20;
|
||||
}
|
||||
}
|
||||
|
||||
.b-list-footer-toolbar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 46px;
|
||||
width: @contacts-popup-left-width;
|
||||
background-color: var(--message-list-toolbar-bg-color,#eee);
|
||||
box-shadow: inset 0 1px 0 #ccc;
|
||||
|
||||
.footer-pager {
|
||||
padding: 8px 10px 0 0;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.b-list-content {
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
bottom: 46px;
|
||||
left: 0;
|
||||
width: @contacts-popup-left-width;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
.listClear {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
line-height: 13px;
|
||||
box-shadow: inset 0 -1px 0 #ccc;
|
||||
}
|
||||
|
||||
.listEmptyList, .listEmptyListLoading, .listEmptySearchList {
|
||||
color: #999;
|
||||
text-align: center;
|
||||
padding: 60px 10px;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
&.hideContactListCheckbox {
|
||||
.checkboxItem {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.e-contact-item {
|
||||
display: flex;
|
||||
height: 55px;
|
||||
max-height: 45px;
|
||||
line-height: 45px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border-left: 6px solid #eee;
|
||||
border-bottom: 1px solid rgba(128,128,128,0.25);
|
||||
|
||||
&.focused {
|
||||
border-left-color: #bbb;
|
||||
}
|
||||
|
||||
&.deleted {
|
||||
max-height: 0;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.checkboxItem {
|
||||
line-height: 45px;
|
||||
padding: 0 8px 0 6px;
|
||||
}
|
||||
|
||||
.nameParent {
|
||||
font-size: 16px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.checked {
|
||||
border-left-color: #69A8F5;
|
||||
|
||||
&.focused {
|
||||
border-left-color: darken(#69A8F5, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
|
||||
background-color: rgba(140, 200, 255, 0.3);
|
||||
border-left-color: #398CF2;
|
||||
|
||||
&.focused {
|
||||
border-left-color: darken(#398CF2, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.b-view-content-toolbar {
|
||||
padding: 7px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: @contacts-popup-left-width;
|
||||
height: 30px;
|
||||
text-align: right;
|
||||
border-bottom: 1px solid rgba(128,128,128,0.4);
|
||||
|
||||
.button-save-contact {
|
||||
&.dirty:enabled {
|
||||
color: #51a351;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
&.read-only .button-save-contact {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.b-view-content {
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
bottom: 0;
|
||||
left: @contacts-popup-left-width;
|
||||
right: 0;
|
||||
overflow: auto;
|
||||
border-left: 1px solid rgba(128,128,128,0.25);
|
||||
|
||||
span {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
display: none;
|
||||
padding: 5px 7px;
|
||||
font-size: 18px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.b-contact-view-desc {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
padding-top: 120px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.top-part {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.property-line {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.top-row {
|
||||
padding: 10px 0;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.add-link {
|
||||
margin-left: 2px;
|
||||
padding: 5px;
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
box-shadow: none;
|
||||
border-color: #fff;
|
||||
font-size: 18px;
|
||||
width: 70vw;
|
||||
max-width: 400px;
|
||||
|
||||
&:hover {
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
border-color: #ccc;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
border-color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.hasError {
|
||||
input {
|
||||
color: #ee5f5b;
|
||||
border-color: #ee5f5b;
|
||||
}
|
||||
}
|
||||
|
||||
.e-save-trigger {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.e-read-only-sign {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 40px;
|
||||
}
|
||||
|
||||
.e-share-sign {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.read-only {
|
||||
span, .e-read-only-sign {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
input, textarea, .e-share-sign {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.b-contacts-content {
|
||||
.b-list-content, .b-list-toolbar, .b-list-footer-toolbar {
|
||||
width: 170px;
|
||||
}
|
||||
.b-list-toolbar .e-search {
|
||||
width: 150px;
|
||||
}
|
||||
.b-view-content-toolbar, .b-view-content {
|
||||
left: 170px;
|
||||
}
|
||||
}
|
||||
}
|
||||
83
dev/Styles/User/EmailAddresses.less
Normal file
83
dev/Styles/User/EmailAddresses.less
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
.emailaddresses {
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
|
||||
box-sizing: border-box;
|
||||
cursor: text;
|
||||
font-size: 90%;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
transition: border linear .2s, box-shadow linear .2s;
|
||||
}
|
||||
|
||||
.emailaddresses.emailaddresses-focused {
|
||||
background-color: #fff;
|
||||
border: 1px solid darken(@inputBorder, 20%);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.emailaddresses li {
|
||||
display: inline-block;
|
||||
}
|
||||
.emailaddresses li[draggable] {
|
||||
background-color: #eee;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 0 rgba(255,255,255,0.75) inset;
|
||||
color: #555;
|
||||
cursor: default;
|
||||
max-width: 500px;
|
||||
overflow: hidden;
|
||||
margin: 2px;
|
||||
padding: 2px 15px 2px 5px;
|
||||
position: relative;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.emailaddresses li.pgp {
|
||||
background-color: #E5F3E2;
|
||||
}
|
||||
|
||||
.emailaddresses li span {
|
||||
padding-right: 3px;
|
||||
}
|
||||
|
||||
.emailaddresses li a {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
padding: 1px;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
text-decoration: none;
|
||||
top: 1px;
|
||||
}
|
||||
.emailaddresses li a:hover {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.emailaddresses .emailaddresses-input {
|
||||
margin: 0 2px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#rl-app .emailaddresses input[type="text"],
|
||||
#rl-app .emailaddresses input[type="text"]:focus,
|
||||
#rl-app .emailaddresses input[type="text"]:hover {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
height: auto;
|
||||
line-height: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.emailaddresses li.emailaddresses-selected,
|
||||
.emailaddresses li.emailaddresses-selected a {
|
||||
background-color: Highlight;
|
||||
color: HighlightText;
|
||||
}
|
||||
13
dev/Styles/User/Filter.less
Normal file
13
dev/Styles/User/Filter.less
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
.b-filter-content {
|
||||
|
||||
width: 750px;
|
||||
|
||||
.button-delete {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.setRecipientsBtn {
|
||||
margin-top: -2px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
268
dev/Styles/User/FolderList.less
Normal file
268
dev/Styles/User/FolderList.less
Normal file
|
|
@ -0,0 +1,268 @@
|
|||
|
||||
@folderItemPadding: 7px;
|
||||
@subPadding: 15px;
|
||||
|
||||
.b-folders {
|
||||
|
||||
.move-action-content-wrapper {
|
||||
z-index: -1;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
opacity: 0.05;
|
||||
background-color: #fff;
|
||||
background-size: 60px 60px;
|
||||
background-image: linear-gradient(135deg, #000 25%, transparent 25%,
|
||||
transparent 50%, #000 50%, #000 75%,
|
||||
transparent 75%, transparent);
|
||||
}
|
||||
|
||||
.b-folders-user {
|
||||
a.print-count.system .badge {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.b-toolbar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 30px;
|
||||
padding: 10px 0 0 @rlLowMargin;
|
||||
color: #fff;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
.b-footer {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 30px;
|
||||
padding: 0 10px 0 5px;
|
||||
z-index: 101;
|
||||
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.b-content {
|
||||
position: absolute;
|
||||
top: 50px + @rlLowMargin;
|
||||
bottom: 32px + @rlLowMargin + @rlBottomMargin;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 10px;
|
||||
border-top: 0;
|
||||
border-bottom: 1px solid #999;
|
||||
}
|
||||
|
||||
.e-item {
|
||||
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
background-color: transparent;
|
||||
vertical-align: middle;
|
||||
color: var(--folders-disabled-color, #666);
|
||||
cursor: not-allowed;
|
||||
font-size: 14px;
|
||||
border-left: 3px solid transparent;
|
||||
|
||||
.inbox-star-icon {
|
||||
display: none;
|
||||
margin-left: 7px;
|
||||
|
||||
.flagged {
|
||||
display: none;
|
||||
}
|
||||
.unflagged {
|
||||
opacity: .5;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-inbox .inbox-star-icon {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
padding: 0 @folderItemPadding;
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
&.selectable {
|
||||
|
||||
color: var(--folders-color, #333);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--folders-hover-bg-color, #333);
|
||||
color: var(--folders-hover-color, #eee);
|
||||
}
|
||||
|
||||
&.droppableHover {
|
||||
background-color: var(--folders-drop-bg-color, #333);
|
||||
color: var(--folders-drop-color, #eee);
|
||||
}
|
||||
|
||||
&.droppableHover * {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.focused {
|
||||
background-color: var(--folders-focused-bg-color, #333);
|
||||
color: var(--folders-focused-color, #eee);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: var(--folders-selected-bg-color, #333);
|
||||
color: var(--folders-selected-color, #eee);
|
||||
}
|
||||
}
|
||||
|
||||
&.focused {
|
||||
background-color: #888;
|
||||
border-left-color: #fff;
|
||||
}
|
||||
|
||||
&.system {
|
||||
cursor: default;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.count {
|
||||
position: relative;
|
||||
display: none;
|
||||
margin-top: 5px;
|
||||
line-height: 19px;
|
||||
}
|
||||
|
||||
&.print-count {
|
||||
font-weight: bold;
|
||||
.count {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
&.unread-sub {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.e-collapsed-sign {
|
||||
cursor: pointer;
|
||||
vertical-align: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.b-sub-folders.collapsed {
|
||||
max-height: 0;
|
||||
height: 0;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.inbox-is-starred {
|
||||
.flagged {
|
||||
color: orange;
|
||||
display: inline-block !important;
|
||||
}
|
||||
.unflagged {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.b-folder-system-item {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.b-sub-folders .e-item a {
|
||||
padding-left: @subPadding * 1 + @folderItemPadding;
|
||||
}
|
||||
.b-sub-folders .b-sub-folders .e-item a {
|
||||
padding-left: @subPadding * 2 + @folderItemPadding;
|
||||
}
|
||||
.b-sub-folders .b-sub-folders .b-sub-folders .e-item a {
|
||||
padding-left: @subPadding * 3 + @folderItemPadding;
|
||||
}
|
||||
.b-sub-folders .b-sub-folders .b-sub-folders .b-sub-folders .e-item a {
|
||||
padding-left: @subPadding * 4 + @folderItemPadding;
|
||||
}
|
||||
|
||||
/**/
|
||||
&.single-root-inbox a.i-am-inbox {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&.single-root-inbox .i-am-inbox-wrapper > .b-sub-folders {
|
||||
max-height: none !important;
|
||||
height: inherit !important;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
&.single-root-inbox .i-am-inbox-wrapper {
|
||||
.b-sub-folders .e-item a {
|
||||
padding-left: @folderItemPadding;
|
||||
}
|
||||
.b-sub-folders .b-sub-folders .e-item a {
|
||||
padding-left: @subPadding * 1 + @folderItemPadding;
|
||||
}
|
||||
.b-sub-folders .b-sub-folders .b-sub-folders .e-item a {
|
||||
padding-left: @subPadding * 2 + @folderItemPadding;
|
||||
}
|
||||
.b-sub-folders .b-sub-folders .b-sub-folders .b-sub-folders .e-item a {
|
||||
padding-left: @subPadding * 3 + @folderItemPadding;
|
||||
}
|
||||
}
|
||||
/**/
|
||||
}
|
||||
|
||||
.btn {
|
||||
&.buttonCompose {
|
||||
width: calc(100% - 85px);
|
||||
max-width: -moz-fit-content;
|
||||
max-width: -webkit-fit-content;
|
||||
max-width: fit-content;
|
||||
overflow: hidden;
|
||||
height: 19px;
|
||||
margin-top: 1px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
html.rl-left-panel-disabled {
|
||||
.buttonComposeText{
|
||||
display: none;
|
||||
}
|
||||
.btn.buttonCompose {
|
||||
width: auto;
|
||||
}
|
||||
.btn.buttonContacts {
|
||||
margin-top: 10px !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
&.rl-mobile #rl-left {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
21
dev/Styles/User/Identity.less
Normal file
21
dev/Styles/User/Identity.less
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
.b-identity-content {
|
||||
|
||||
&.modal {
|
||||
max-width: 770px;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.e-signature-place {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.textEmail {
|
||||
margin-top: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
394
dev/Styles/User/Layout.less
Normal file
394
dev/Styles/User/Layout.less
Normal file
|
|
@ -0,0 +1,394 @@
|
|||
|
||||
.UserBackground body {
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
#rl-left, #rl-right {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
html.rl-mobile {
|
||||
|
||||
&:not(.rl-left-panel-disabled) #rl-right {
|
||||
right: -150px;
|
||||
}
|
||||
|
||||
&.rl-left-panel-disabled #rl-right {
|
||||
left: 5px !important;
|
||||
}
|
||||
}
|
||||
|
||||
#rl-left {
|
||||
width: @rlLeftWidth;
|
||||
}
|
||||
|
||||
/*
|
||||
.resizable::after {
|
||||
background-color: #aaa;
|
||||
bottom: 0;
|
||||
content: '';
|
||||
height: 22px;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
width: 20px;
|
||||
}
|
||||
.resizable::-webkit-resizer {
|
||||
background: #aaa;
|
||||
background: rgba(255,255,255,0.5);
|
||||
}
|
||||
*/
|
||||
|
||||
.resizable > .resizer {
|
||||
background: #aaa;
|
||||
background: rgba(255,255,255,0.5);
|
||||
display: none;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
z-index: 102;
|
||||
}
|
||||
.resizable > .resizer:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
html:not(.rl-left-panel-disabled) #rl-left.resizable {
|
||||
resize: horizontal;
|
||||
overflow: hidden;
|
||||
min-width: 155px;
|
||||
max-width: 350px;
|
||||
}
|
||||
#rl-left > .resizer {
|
||||
cursor: ew-resize;
|
||||
height: 100%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.g-ui-menu {
|
||||
max-height: 60vh;
|
||||
max-width: 90vw;
|
||||
overflow: auto;
|
||||
|
||||
.e-link {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
color: var(--dropdown-menu-color, #333);
|
||||
background-color: var(--dropdown-menu-bg-color, #fff);
|
||||
}
|
||||
|
||||
.e-item.selected > .e-link {
|
||||
background-color: var(--dropdown-menu-selected-bg-color, #eee);
|
||||
}
|
||||
|
||||
.e-item:not(.disabled) > .e-link:focus,
|
||||
.e-item:not(.disabled) > .e-link:hover {
|
||||
background-color: var(--dropdown-menu-hover-bg-color, #444);
|
||||
background-image: none;
|
||||
color: var(--dropdown-menu-hover-color, #eee);
|
||||
}
|
||||
|
||||
.e-item.disabled > .e-link {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.g-ui-table {
|
||||
|
||||
display: table;
|
||||
width: 100%;
|
||||
|
||||
.e-row {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
.e-cell {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.b-message-list-wrapper.resizable {
|
||||
resize: vertical;
|
||||
overflow: hidden;
|
||||
min-height: 200px;
|
||||
max-height: 500px;
|
||||
}
|
||||
.b-message-list-wrapper > .resizer {
|
||||
cursor: ns-resize;
|
||||
height: 5px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
|
||||
.b-message-list-wrapper > .resizer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#rl-right {
|
||||
z-index: 1;
|
||||
left: @rlLeftWidth;
|
||||
}
|
||||
|
||||
#rl-sub-left {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
#rl-sub-right {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 50%;
|
||||
|
||||
.b-message-view-backdrop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, .4);
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
|
||||
.backdrop-message {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
background: rgba(0, 0, 0, .6);
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
text-shadow: 0 1px 1px #000;
|
||||
transform: translateY(-50%);
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
#rl-popups > dialog {
|
||||
top: 0;
|
||||
margin: 10px auto;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
*/
|
||||
#rl-popups > .rl-view-model {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1100;
|
||||
overflow: auto;
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
#rl-settings-subscreen {
|
||||
padding:20px;
|
||||
}
|
||||
|
||||
.dropdown-menu * + .dividerbar {
|
||||
margin-top: 9px;
|
||||
padding-top: 9px;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.dropdown.colored-toggle.open .btn.dropdown-toggle {
|
||||
color: #BD362F;
|
||||
|
||||
.caret {
|
||||
border-top-color: #BD362F;
|
||||
}
|
||||
}
|
||||
|
||||
.btn.btn-transparent {
|
||||
background: none !important;
|
||||
border-color: transparent !important;
|
||||
text-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
opacity: .6;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group.open .btn.btn-transparent.dropdown-toggle {
|
||||
color: #BD362F;
|
||||
.caret {
|
||||
border-top-color: #BD362F;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group > .btn.single {
|
||||
border-radius: 3px !important;
|
||||
}
|
||||
|
||||
/* desktop */
|
||||
@media screen and (min-width: 1000px) {
|
||||
}
|
||||
|
||||
/* desktop-large */
|
||||
@media screen and (min-width: 1401px) {
|
||||
#rl-left {
|
||||
width: @rlLeftWidth + 20;
|
||||
}
|
||||
|
||||
#rl-right {
|
||||
left: @rlLeftWidth + 20;
|
||||
}
|
||||
|
||||
#rl-sub-left {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
#rl-sub-right {
|
||||
left: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
/* mobile and tablet */
|
||||
@media screen and (max-width: 999px) {
|
||||
#rl-left {
|
||||
width: 155px;
|
||||
}
|
||||
|
||||
#rl-right {
|
||||
left: 155px;
|
||||
}
|
||||
|
||||
#rl-settings-subscreen {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.dropdown-menu a {
|
||||
line-height: 2.5;
|
||||
}
|
||||
}
|
||||
|
||||
html:not(.rl-ctrl-key-pressed) .visible-on-ctrl-btn,
|
||||
html.rl-ctrl-key-pressed .hidden-on-ctrl-btn,
|
||||
.show-on-panel-disabled {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html.rl-left-panel-disabled {
|
||||
|
||||
#rl-left {
|
||||
width: 60px !important;
|
||||
|
||||
.show-on-panel-disabled {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.b-content {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.hide-on-panel-disabled {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#rl-right {
|
||||
left: 60px !important;
|
||||
}
|
||||
}
|
||||
|
||||
html.rl-mobile,
|
||||
html.rl-no-preview-pane {
|
||||
|
||||
#rl-sub-left {
|
||||
right: @rlBottomMargin !important;
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
#rl-sub-right {
|
||||
left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
html.rl-mobile #rl-left > .resizer,
|
||||
html.rl-side-preview-pane:not(.rl-mobile) #rl-right .resizer {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
html.rl-bottom-preview-pane:not(.rl-mobile) {
|
||||
|
||||
#rl-sub-left {
|
||||
right: @rlBottomMargin !important;
|
||||
width: inherit;
|
||||
|
||||
.b-message-list-wrapper {
|
||||
bottom: inherit;
|
||||
height: 300px;
|
||||
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
#rl-sub-right {
|
||||
|
||||
left: 0 !important;
|
||||
|
||||
.b-message-view-wrapper {
|
||||
top: 356px;
|
||||
left: 0;
|
||||
right: 5px;
|
||||
box-shadow: none;
|
||||
background-color: var(--message-bg-color, #fff);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html.rl-mobile .hide-mobile,
|
||||
html:not(.rl-mobile) .show-mobile {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
html.rl-mobile .width100-on-mobile {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.e-paginator {
|
||||
|
||||
.e-page {
|
||||
opacity: 0.5;
|
||||
text-decoration: none;
|
||||
font-size: 22px;
|
||||
padding: 3px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&.current {
|
||||
opacity: 1;
|
||||
font-size: 25px;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
541
dev/Styles/User/MessageList.less
Normal file
541
dev/Styles/User/MessageList.less
Normal file
|
|
@ -0,0 +1,541 @@
|
|||
|
||||
html.rl-mobile,
|
||||
html.rl-no-preview-pane {
|
||||
.messageList.message-selected {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#sort-list-dropdown-id {
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
.messageList {
|
||||
|
||||
.toolbar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 30px;
|
||||
padding: 10px 1px;
|
||||
z-index: 102;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.b-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 30px;
|
||||
padding: 7px;
|
||||
z-index: 101;
|
||||
|
||||
background-color: var(--message-list-toolbar-bg-color, #eee);
|
||||
// #gradient > .vertical(#f4f4f4, #dfdfdf);
|
||||
|
||||
border-bottom-right-radius: @rlMainBorderRadius;
|
||||
border-bottom-left-radius: @rlMainBorderRadius;
|
||||
border-top: 1px solid #bbb;
|
||||
|
||||
.e-quota {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-left: 5px;
|
||||
font-size: 18px;
|
||||
cursor: help;
|
||||
}
|
||||
.e-quota:hover {
|
||||
border-bottom: 1px dashed #333;
|
||||
}
|
||||
}
|
||||
|
||||
.btn.buttonMoreSearch {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.b-message-list-wrapper {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: @rlBottomMargin;
|
||||
|
||||
border: 1px solid @rlMainDarkColor;
|
||||
|
||||
box-shadow: @rlMainShadow;
|
||||
border-radius: @rlMainBorderRadius;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
.second-toolbar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 29px;
|
||||
padding: 10px 8px 10px 11px;
|
||||
z-index: 101;
|
||||
white-space: nowrap;
|
||||
|
||||
background-color: var(--message-list-toolbar-bg-color, #eee);
|
||||
// #gradient > .vertical(#f4f4f4, #dfdfdf);
|
||||
|
||||
border-top-right-radius: @rlMainBorderRadius;
|
||||
border-top-left-radius: @rlMainBorderRadius;
|
||||
border-bottom: 1px solid #bbb;
|
||||
|
||||
.checkboxCheckAll {
|
||||
cursor: pointer;
|
||||
vertical-align: middle
|
||||
}
|
||||
|
||||
.input-append {
|
||||
margin-left: 14px;
|
||||
text-align: right;
|
||||
width: calc(100% - 30px);
|
||||
|
||||
.close-input-wrp {
|
||||
width: 90%;
|
||||
min-width: 200px;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.inputSearch {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.line-loading {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 102;
|
||||
height: 0;
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
.b-content {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
bottom: 45px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
z-index: 101;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
background-color: #fff;
|
||||
|
||||
.listClear {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
line-height: 13px;
|
||||
}
|
||||
|
||||
.listEmptyList, .listEmptyListLoading, .listDragOver, .listError, .listEmptySearchList {
|
||||
color: #999;
|
||||
text-align: center;
|
||||
padding: 60px 10px;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
|
||||
.e-icon {
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.listDragOver {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.listDragOver.viewAppendArea {
|
||||
max-height: 120px;
|
||||
padding: 30px 10px;
|
||||
}
|
||||
.listDragOver.dragOverEnter {
|
||||
background-color: #e0fdda;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.listError {
|
||||
color: #DA4F49;
|
||||
}
|
||||
|
||||
.listSearchDesc {
|
||||
font-size: 16px;
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.listThreadUidDesc {
|
||||
font-size: 16px;
|
||||
padding: 7px 20px 6px 20px;
|
||||
background-color: rgba(128,128,128,0.5);
|
||||
border-bottom: 1px solid #888;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
text-shadow: 0 1px 0 #000;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fullThreadsParent {
|
||||
height: 25px;
|
||||
padding: 3px 5px;
|
||||
background-color: #f4f4f4;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&.message-focused {
|
||||
.b-message-list-wrapper {
|
||||
background-color: #000;
|
||||
}
|
||||
.b-content {
|
||||
opacity: 0.97;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hideMessageListCheckbox {
|
||||
.checkboxCheckAll {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.checkboxMessage {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.messageListItem {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
|
||||
margin: 0;
|
||||
padding: 5px 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid rgba(153, 153, 153, 0.2);
|
||||
border-left: 6px solid #eee;
|
||||
|
||||
z-index: 100;
|
||||
|
||||
> * {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
&.focused {
|
||||
background-color: rgba(128, 128, 128, 0.1);
|
||||
border-left-color: #ccc;
|
||||
}
|
||||
|
||||
.importantMark {
|
||||
display: none;
|
||||
|
||||
color:red;
|
||||
margin-right:5px
|
||||
}
|
||||
|
||||
&.deleted-mark {
|
||||
opacity: .7;
|
||||
.subjectParent {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
|
||||
&.important .importantMark {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
&.new {
|
||||
max-height: 0;
|
||||
}
|
||||
|
||||
&.deleted {
|
||||
max-height: 0;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.checkboxMessage {
|
||||
line-height: 12px;
|
||||
padding: 0 8px 0 6px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.flagParent {
|
||||
padding: 0 10px 0 5px;
|
||||
}
|
||||
|
||||
time, .sizeParent {
|
||||
margin: 0 5px;
|
||||
opacity: 0.6;
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.threadsParent {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.attachmentParent {
|
||||
position: relative;
|
||||
margin: 2px 10px 0 5px;
|
||||
color: #666;
|
||||
text-shadow: 0 1px 0 #eee;
|
||||
}
|
||||
|
||||
.senderParent, .subjectParent {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.threadsCountParent {
|
||||
display: inline;
|
||||
overflow: hidden;
|
||||
background-color: #eee;
|
||||
padding: 1px 5px;
|
||||
margin-right: 5px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.threadsCountParent.lastSelected {
|
||||
background-color: #999;
|
||||
border-color: #999;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.threadsCountParent:hover {
|
||||
border-color: #666;
|
||||
}
|
||||
|
||||
.subjectParent .emptySubjectText {
|
||||
display: none;
|
||||
font-style: italic;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.emptySubject .subjectParent {
|
||||
.subject {
|
||||
display: none;
|
||||
}
|
||||
.emptySubjectText {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
.sender, .subject {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.threads-len {
|
||||
.threads-len-data {
|
||||
|
||||
border-radius: 6px;
|
||||
padding: 2px 0 1px 4px;
|
||||
border: 1px solid #ccc;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(127,127,127,0.3);
|
||||
border-color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flagOff {
|
||||
opacity: 0.5;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.flagOn, .flagOnHalf {
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.replyFlag, .forwardFlag {
|
||||
display: none;
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
|
||||
&.answered .replyFlag {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&.forwarded .forwardFlag {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&:not(.withAttachments) .attachmentParent {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.hasUnseenSubMessage {
|
||||
background-color: rgba(255, 255, 64, 0.15);
|
||||
border-left-color: lighten(orange, 30%);
|
||||
&.focused {
|
||||
border-left-color: darken(orange, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&.unseen {
|
||||
background-color: rgba(255, 255, 64, 0.15);
|
||||
border-left-color: orange;
|
||||
.sender, .subjectParent {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.focused {
|
||||
border-left-color: darken(orange, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&.checked {
|
||||
border-left-color: lighten(#398CF2, 10%);
|
||||
|
||||
&.focused {
|
||||
border-left-color: darken(#398CF2, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: rgba(140, 200, 255, 0.3);
|
||||
border-bottom-color: rgba(57, 140, 242, 0.2);
|
||||
border-left-color: #398CF2;
|
||||
z-index: 101;
|
||||
|
||||
+ .messageListItem {
|
||||
border-bottom-color: rgba(57, 140, 242, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.flagged) .flagOn,
|
||||
&:not(.hasFlaggedSubMessage) .flagOnHalf,
|
||||
&.flagged .flagOff, &.hasFlaggedSubMessage .flagOff {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
html.rl-ctrl-key-pressed .messageListItem {
|
||||
cursor: copy;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1000px) {
|
||||
.messageList {
|
||||
.listDragOver {
|
||||
transition: all 400ms ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* desktop-large */
|
||||
@media screen and (min-width: 1401px) {
|
||||
.messageListItem {
|
||||
font-size: 13px;
|
||||
time {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html .messageList .line-loading {
|
||||
height: 5px !important;
|
||||
}
|
||||
|
||||
#messagesDragImage {
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
height: 20px;
|
||||
min-width: 30px;
|
||||
padding: 4px 10px;
|
||||
position: fixed;
|
||||
right: -100px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.rl-side-preview-pane, .rl-mobile {
|
||||
|
||||
.messageListItem {
|
||||
|
||||
.checkboxMessage {
|
||||
margin: 10px 0 -5px;
|
||||
}
|
||||
|
||||
.subjectParent {
|
||||
flex: 1 0 auto;
|
||||
line-height: 16px;
|
||||
order: 1;
|
||||
width: calc(100% - 120px);
|
||||
}
|
||||
|
||||
.senderParent {
|
||||
flex: 1 0 45%;
|
||||
}
|
||||
|
||||
.flagParent {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.sizeParent {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.attachmentParent {
|
||||
order: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.b-message-list-wrapper:not(.hideMessageListCheckbox) .subjectParent {
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
html:not(.rl-mobile):not(.rl-side-preview-pane) {
|
||||
|
||||
.messageListItem {
|
||||
|
||||
line-height: 25px;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.checkboxMessage {
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.flagParent {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.attachmentParent {
|
||||
margin: 6px 8px 0 0;
|
||||
}
|
||||
|
||||
.senderParent {
|
||||
font-weight: normal;
|
||||
text-overflow: none;
|
||||
flex: 0 0 25%;
|
||||
}
|
||||
|
||||
.subjectParent {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
568
dev/Styles/User/MessageView.less
Normal file
568
dev/Styles/User/MessageView.less
Normal file
|
|
@ -0,0 +1,568 @@
|
|||
.g-ui-min-height-300 {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.messageView {
|
||||
|
||||
.toolbar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 30px;
|
||||
padding: 10px 0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.b-content {
|
||||
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
top: 50px + @rlLowMargin;
|
||||
bottom: @rlLowMargin + @rlBottomMargin;
|
||||
right: @rlLowMargin;
|
||||
left: -2px;
|
||||
/*overflow: hidden;*/
|
||||
border: 1px solid @rlMainDarkColor;
|
||||
|
||||
border-radius: @rlMainBorderRadius;
|
||||
|
||||
background-color: #fff;
|
||||
|
||||
.b-message-view-checked-helper {
|
||||
text-align: center;
|
||||
font-size: 70px;
|
||||
line-height: 70px;
|
||||
padding-top: 100px;
|
||||
color: #999;
|
||||
|
||||
.icon-mail {
|
||||
font-size: 100px;
|
||||
font-size: 50px;
|
||||
line-height: 90px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.b-message-view-desc {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
color: #999;
|
||||
padding: 120px 10px 0 10px;
|
||||
}
|
||||
|
||||
.b-message-view-desc.error {
|
||||
color: #DA4F49;
|
||||
}
|
||||
|
||||
.message-fixed-button-toolbar {
|
||||
z-index: 100;
|
||||
position: absolute;
|
||||
top: 33px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.infoParent {
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.flagParent {
|
||||
|
||||
cursor: pointer;
|
||||
margin: 0 0.25em;
|
||||
|
||||
.flagOn {
|
||||
color: orange;
|
||||
}
|
||||
|
||||
&.flagOff:not(:hover) {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.messageItemHeader {
|
||||
|
||||
padding: 10px;
|
||||
background-color: #f8f8f8;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-radius: @rlMainBorderRadius @rlMainBorderRadius 0 0;
|
||||
|
||||
.subjectParent {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.messageButtons {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.informationShort {
|
||||
margin: 4px 50px 0 5px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
a {
|
||||
.g-ui-link;
|
||||
}
|
||||
}
|
||||
|
||||
.informationShortWrp {
|
||||
max-height: 100px;
|
||||
overflow-y: auto;
|
||||
min-height: 30px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.informationFull {
|
||||
margin-top: 30px;
|
||||
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
table, tr, td {
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 4px;
|
||||
vertical-align: top;
|
||||
min-width: 43px;
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
border-right: 1px solid #999;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.labelTo {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
td + td {
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
.emptySubjectText {
|
||||
display: none;
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
&.emptySubject .emptySubjectText {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
.messageItem {
|
||||
|
||||
color: #000;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: auto;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
.buttonFull {
|
||||
display: inline-block;
|
||||
position: fixed;
|
||||
right: 25px;
|
||||
bottom: 25px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 30px;
|
||||
background-color: transparent;
|
||||
background-color: #fff;
|
||||
border: 1px solid #333;
|
||||
color: #333;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
border-color: #666;
|
||||
background-color: #888;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
color: grey;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.line-loading {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.showImages, .readReceipt, .pgpSigned, .pgpEncrypted {
|
||||
cursor: pointer;
|
||||
padding: 10px 15px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.pgpInfo {
|
||||
padding: 5px 15px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
background-color: #fcf8e3;
|
||||
|
||||
&.success {
|
||||
background-color: #e9f4ff;
|
||||
}
|
||||
}
|
||||
|
||||
.readReceipt {
|
||||
background-color: #ffffd9;
|
||||
}
|
||||
|
||||
.attachmentsPlace {
|
||||
|
||||
padding: 10px 10px 6px 10px;
|
||||
background: #eee;
|
||||
border-bottom: 1px solid #ddd;
|
||||
position: relative;
|
||||
|
||||
.attachmentList {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:not(.selection-mode) {
|
||||
.checkboxAttachment {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.unselectedAttachmentsError {
|
||||
.attachmentItem {
|
||||
box-shadow: 0 1px 4px red;
|
||||
box-shadow: 0 1px 5px rgba(255, 0, 0, 0.4);
|
||||
box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.2), 0 1px 5px rgba(255, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.controls-handle {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
right: 8px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.attachmentsControls {
|
||||
padding: 7px 5px 7px 14px;
|
||||
background: #e8e8e8;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.rlBlockquoteSwitcher {
|
||||
border: 1px solid #999;
|
||||
display: block;
|
||||
width: 3em;
|
||||
line-height: 1em;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
margin: 2em 0 10px;
|
||||
|
||||
opacity: 0.5;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.b-text-part {
|
||||
|
||||
height: 100%;
|
||||
|
||||
div[data-x-div-type=html] {
|
||||
height: 100%;
|
||||
div[data-x-div-type=body] {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: blue;
|
||||
text-decoration: underline;
|
||||
|
||||
&:visited {
|
||||
color: #609;
|
||||
}
|
||||
&:active {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 2px solid #000;
|
||||
padding: 0 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.rl-bq-switcher.hidden-bq {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.html {
|
||||
|
||||
div[data-x-div-type=body] {
|
||||
/*padding: 15px;*/
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
img[data-x-src]:not([src]) {
|
||||
border: 1px solid #999;
|
||||
position: relative;
|
||||
}
|
||||
img[data-x-src]:not([src])::after {
|
||||
content: "🖼";
|
||||
font-family: snappymail;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
}
|
||||
img[data-x-src]:not([src]):hover::after {
|
||||
content: attr(data-x-src);
|
||||
font-family: var(--fontSans);
|
||||
font-size: 11px;
|
||||
height: auto;
|
||||
transform: translate(-25%,0);
|
||||
width: auto;
|
||||
width: -moz-fit-content;
|
||||
width: -webkit-fit-content;
|
||||
width: fit-content;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
pre, code {
|
||||
margin: 0;
|
||||
border: none;
|
||||
word-break: normal;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
code {
|
||||
border-radius: 0;
|
||||
display: inline;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
pre {
|
||||
border-radius: 5px;
|
||||
display: block;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.plain {
|
||||
|
||||
padding: 15px;
|
||||
/*white-space: pre-wrap;*/
|
||||
font-family: var(--fontMono);
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
display: block;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
pre.b-plain-openpgp {
|
||||
display: inline-block;
|
||||
padding: 6px 10px;
|
||||
border: 1px dashed #666;
|
||||
word-break: break-all;
|
||||
|
||||
&.success {
|
||||
border-color: green;
|
||||
background-color: rgba(0, 255, 0, 0.03);
|
||||
}
|
||||
&.error {
|
||||
border-color: red;
|
||||
background-color: rgba(255, 0, 0, 0.03);
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 2px solid blue;
|
||||
color: blue;
|
||||
}
|
||||
|
||||
blockquote blockquote {
|
||||
border-left: 2px solid green;
|
||||
color: green;
|
||||
}
|
||||
|
||||
blockquote blockquote blockquote {
|
||||
border-left: 2px solid red;
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.b-openpgp-control {
|
||||
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.success {
|
||||
color: green;
|
||||
cursor: help;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.error {
|
||||
color: red;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.message-focused .b-content {
|
||||
z-index: 101;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
border-color: darken(@rlMainDarkColor, 5%);
|
||||
}
|
||||
|
||||
.thread-controls {
|
||||
.dropdown-toggle {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
&.open .dropdown-toggle {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.thread-list {
|
||||
|
||||
.e-link {
|
||||
padding: 4px 8px 6px 10px;
|
||||
}
|
||||
|
||||
&.hide-more .thread-list-message.more-that {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.thread-date {
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.more-threads {
|
||||
text-align: center;
|
||||
padding: 8px;
|
||||
background-color: #F5F5F5;
|
||||
color: #555;
|
||||
text-decoration: underline;
|
||||
border-top: 1px dashed #555;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html.rl-mobile .messageView,
|
||||
html.rl-no-preview-pane .messageView {
|
||||
|
||||
&:not(.message-selected) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
padding-left: 1px;
|
||||
}
|
||||
|
||||
.b-content {
|
||||
top: 50px;
|
||||
left: 0;
|
||||
bottom: @rlBottomMargin;
|
||||
right: @rlBottomMargin;
|
||||
border: 1px solid @rlMainDarkColor;
|
||||
box-shadow: @rlMainShadow;
|
||||
}
|
||||
}
|
||||
|
||||
html:not(.rl-mobile):not(.rl-no-preview-pane) .messageView {
|
||||
.top-toolbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
html.rl-bottom-preview-pane:not(.rl-mobile) .messageView {
|
||||
.b-content {
|
||||
bottom: @rlBottomMargin;
|
||||
}
|
||||
}
|
||||
|
||||
html.rl-message-fullscreen {
|
||||
|
||||
#rl-left {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#rl-right {
|
||||
.RL-MailMessageList,
|
||||
.RL-SettingsPane,
|
||||
.RL-SystemDropDown,
|
||||
.RL-MailMessageView .messageView .toolbar {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.messageView .b-content {
|
||||
position: fixed !important;
|
||||
margin: 5px !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
bottom: 0 !important;
|
||||
z-index: 10000 !important;
|
||||
border: 1px solid @rlMainDarkColor !important;
|
||||
}
|
||||
}
|
||||
|
||||
html:not(.rl-mobile) .messageItem {
|
||||
.buttonFull {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
144
dev/Styles/User/OpenPgpKey.less
Normal file
144
dev/Styles/User/OpenPgpKey.less
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
.b-open-pgp-key-view-content, .b-open-pgp-key-generate-content {
|
||||
&.modal {
|
||||
max-width: 570px;
|
||||
}
|
||||
}
|
||||
|
||||
.b-open-pgp-key-view-content {
|
||||
.key-viewer {
|
||||
max-height: 500px;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.b-compose-open-pgp-content {
|
||||
&.modal {
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.key-list {
|
||||
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 5px;
|
||||
padding: 10px 15px;
|
||||
|
||||
&-wrp {
|
||||
|
||||
&:hover {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
&:hover .key-list__item-name {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
&.empty {
|
||||
text-align: center;
|
||||
padding-top: 10px;
|
||||
color: #aaa;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
|
||||
color: #333;
|
||||
white-space: nowrap;
|
||||
padding-bottom: 4px;
|
||||
display: flex;
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&-delete {
|
||||
cursor: pointer;
|
||||
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&-names {
|
||||
color: #333;
|
||||
width: 80%;
|
||||
|
||||
&.empty {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
&-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&-error {
|
||||
color: red;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
&-hash {
|
||||
color: #aaa;
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.key-actions {
|
||||
margin-top: 10px;
|
||||
min-height: 40px;
|
||||
|
||||
select option:nth-child(even) {
|
||||
background-color: rgba(128, 128, 128, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.b-message-open-pgp-content {
|
||||
&.modal {
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.key-list {
|
||||
|
||||
margin-top: 5px;
|
||||
overflow: hidden;
|
||||
|
||||
&__item {
|
||||
|
||||
color: #555;
|
||||
cursor: pointer;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&__radio {
|
||||
padding: 3px 5px 0 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&__name {
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
&__names {
|
||||
display: inline-block;
|
||||
|
||||
&:hover .key-list__item__name {
|
||||
border-bottom: 1px dashed #555;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.b-open-pgp-key-add-content {
|
||||
&.modal {
|
||||
max-width: 645px;
|
||||
}
|
||||
.inputKey {
|
||||
font-family: var(--fontMono);
|
||||
width: 600px;
|
||||
|
||||
}
|
||||
}
|
||||
90
dev/Styles/User/Settings.less
Normal file
90
dev/Styles/User/Settings.less
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
|
||||
.b-settins-left {
|
||||
|
||||
.b-footer {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
padding: 0 10px 0 5px;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
.b-content {
|
||||
position: absolute;
|
||||
top: 50px + @rlLowMargin + 10px;
|
||||
bottom: @rlLowMargin;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
nav {
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
color: var(--settings-menu-color, #333);
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
height: 30px;
|
||||
line-height: 29px;
|
||||
overflow: hidden;
|
||||
padding: 4px 10px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:focus, a:hover {
|
||||
background-color: var(--settings-menu-hover-bg-color, #333);
|
||||
color: var(--settings-menu-hover-color, #eee);
|
||||
}
|
||||
|
||||
a.selected {
|
||||
background-color: var(--settings-menu-selected-bg-color, #333);
|
||||
color: var(--settings-menu-selected-color, #eee);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.b-settins-right {
|
||||
|
||||
.b-toolbar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 34px;
|
||||
padding: 8px 0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.b-content {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
bottom: @rlLowMargin;
|
||||
left: 0;
|
||||
right: @rlLowMargin;
|
||||
overflow-y: auto;
|
||||
z-index: 2;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
background-color: #fff;
|
||||
border: 1px solid @rlMainDarkColor;
|
||||
box-shadow: @rlMainShadow;
|
||||
border-radius: @rlMainBorderRadius;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 4px 8px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
html.rl-mobile .rl-settings-view-model {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.firefox-drag .b-settins-right .b-content,
|
||||
.firefox-drag .modal-body {
|
||||
overflow: hidden;
|
||||
}
|
||||
57
dev/Styles/User/SettingsAccounts.less
Normal file
57
dev/Styles/User/SettingsAccounts.less
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
|
||||
.b-settings-accounts {
|
||||
|
||||
.list-table {
|
||||
|
||||
.account-img, .identity-img {
|
||||
font-size: 12px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.account-name {
|
||||
display: inline-block;
|
||||
word-break: break-all;
|
||||
box-sizing: border-box;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.identity-default {
|
||||
cursor: pointer;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.identity-name {
|
||||
display: inline-block;
|
||||
word-break: break-all;
|
||||
box-sizing: border-box;
|
||||
line-height: 22px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.accounts-list-top-padding, .identities-list-top-padding {
|
||||
display: inline-block;
|
||||
height: 5px;
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.account-item {
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
.delete-account {
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.identity-item {
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
.delete-identity {
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
37
dev/Styles/User/SettingsFilters.less
Normal file
37
dev/Styles/User/SettingsFilters.less
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
|
||||
.b-filter-script {
|
||||
width: auto;
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
.filter-item td.drag-wrapper {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.b-filter-script .filter-item,
|
||||
.b-settings-filters .script-item {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.filter-item .delete-filter {
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.filter-item .filter-name,
|
||||
.filter-item .filter-sub-name {
|
||||
display: inline-block;
|
||||
word-break: break-all;
|
||||
box-sizing: border-box;
|
||||
line-height: 22px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filter-item .filter-sub-name {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.b-filter-script textarea {
|
||||
height: 300px;
|
||||
font-family: var(--fontMono);
|
||||
}
|
||||
73
dev/Styles/User/SettingsFolders.less
Normal file
73
dev/Styles/User/SettingsFolders.less
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
|
||||
.b-settings-folders {
|
||||
|
||||
.folders-list-error {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.list-table {
|
||||
margin-top: 1em;
|
||||
|
||||
.folder-padding {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.folder-name {
|
||||
display: inline-block;
|
||||
word-break: break-all;
|
||||
white-space: pre-wrap;
|
||||
box-sizing: border-box;
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
.folder-system-name {
|
||||
display: inline-block;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.folder-name.can-be-edited:hover {
|
||||
text-decoration-style: dashed;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.folder-item {
|
||||
|
||||
&.system .folder-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
input {
|
||||
border-width: 1px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.button-delete {
|
||||
margin-right: 15px;
|
||||
margin-top: 5px;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.unsubscribed-folder, .unchecked-folder {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
.folder-padding.deep-1 {
|
||||
width: 25px;
|
||||
}
|
||||
.folder-padding.deep-2 {
|
||||
width: 40px;
|
||||
}
|
||||
.folder-padding.deep-3 {
|
||||
width: 55px;
|
||||
}
|
||||
.folder-padding.deep-4 {
|
||||
width: 70px;
|
||||
}
|
||||
.folder-padding.deep-5 {
|
||||
width: 85px;
|
||||
}
|
||||
}
|
||||
19
dev/Styles/User/SettingsGeneral.less
Normal file
19
dev/Styles/User/SettingsGeneral.less
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
|
||||
.b-settings-general {
|
||||
|
||||
.flag-selector {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.flag-name {
|
||||
|
||||
border-bottom: 1px dashed #555;
|
||||
cursor: pointer;
|
||||
padding: 2px 0;
|
||||
|
||||
&:focus {
|
||||
outline: 1px;
|
||||
outline-style: dotted;
|
||||
}
|
||||
}
|
||||
}
|
||||
36
dev/Styles/User/SettingsOpenPGP.less
Normal file
36
dev/Styles/User/SettingsOpenPGP.less
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
|
||||
.b-settings-open-pgp {
|
||||
|
||||
.list-table {
|
||||
|
||||
.open-pgp-key-img {
|
||||
margin-right: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.open-pgp-key-id, .open-pgp-key-user {
|
||||
display: inline-block;
|
||||
word-break: break-all;
|
||||
box-sizing: border-box;
|
||||
line-height: 22px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.open-pgp-key-user-address:first-child {
|
||||
line-height: 30px;
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
.open-pgp-key-item {
|
||||
|
||||
.delete-open-pgp-key, .view-open-pgp-key {
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
32
dev/Styles/User/SettingsTemplates.less
Normal file
32
dev/Styles/User/SettingsTemplates.less
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
|
||||
.b-settings-templates {
|
||||
|
||||
.list-table {
|
||||
|
||||
.template-img {
|
||||
font-size: 12px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.template-name {
|
||||
display: inline-block;
|
||||
word-break: break-all;
|
||||
box-sizing: border-box;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.templates-list-top-padding {
|
||||
display: inline-block;
|
||||
height: 5px;
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.template-item {
|
||||
|
||||
.delete-template {
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
26
dev/Styles/User/SettingsThemes.less
Normal file
26
dev/Styles/User/SettingsThemes.less
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
|
||||
.b-themes-list {
|
||||
|
||||
.e-item {
|
||||
|
||||
display: inline-block;
|
||||
border: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
padding: 16px;
|
||||
margin: 5px;
|
||||
|
||||
&:hover {
|
||||
border-color: grey;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: rgba(64, 255, 64, 0.2);
|
||||
border-color: #000;
|
||||
}
|
||||
|
||||
.e-image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
7
dev/Styles/User/Shortcuts.less
Normal file
7
dev/Styles/User/Shortcuts.less
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
.rl-view-model {
|
||||
.b-shortcuts-content {
|
||||
&.modal {
|
||||
max-width: 700px;
|
||||
}
|
||||
}
|
||||
}
|
||||
177
dev/Styles/User/SquireUI.less
Normal file
177
dev/Styles/User/SquireUI.less
Normal file
|
|
@ -0,0 +1,177 @@
|
|||
|
||||
.squire-toolbar {
|
||||
padding: 2px;
|
||||
border-bottom: 1px solid #b6b6b6;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.squire-toolbar select {
|
||||
font-size: 12px;
|
||||
padding: 4px 1.5em 4px 6px;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
width: 7em;
|
||||
}
|
||||
.squire-toolbar select[data-action="fontSize"] {
|
||||
width: 5em;
|
||||
}
|
||||
.squire-toolbar button {
|
||||
font-family: snappymail, var(--fontSans)
|
||||
}
|
||||
.squire-toolbar button[data-action="bold"] {
|
||||
font-weight: bold;
|
||||
}
|
||||
.squire-toolbar button[data-action="italic"] {
|
||||
font-style: italic;
|
||||
}
|
||||
/*
|
||||
.squire-toolbar button[data-action="underline"] {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.squire-toolbar button[data-action="strikethrough"] {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
*/
|
||||
|
||||
.squire-wysiwyg, .squire-plain {
|
||||
box-sizing: border-box;
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
min-height: 200px;
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.squire-wysiwyg {
|
||||
font-family: var(--fontSans);
|
||||
|
||||
ul {
|
||||
padding-left: 40px;
|
||||
li {
|
||||
list-style-type: disc !important;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
padding-left: 40px;
|
||||
li {
|
||||
list-style-type: decimal !important;
|
||||
}
|
||||
}
|
||||
|
||||
pre, code {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
font-family: var(--fontMono);
|
||||
display: block;
|
||||
word-break: normal;
|
||||
word-wrap: break-word;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
code {
|
||||
display: inline;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border: 0;
|
||||
border-left: solid 2px #444;
|
||||
margin: 5px 0 5px 5px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
blockquote p {
|
||||
margin: 0 0 10px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
a {
|
||||
color: blue;
|
||||
text-decoration: underline;
|
||||
|
||||
&:visited {
|
||||
color: #609;
|
||||
}
|
||||
&:active {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* This does make the block element focusable with mouse in Gecko and Webkit so we don't need a <BR>.
|
||||
However, arrow up/down still not working.
|
||||
Secondly, we can't rely on MUA's what to do with :empty
|
||||
.squire-wysiwyg div:empty,
|
||||
.squire-wysiwyg div:-moz-only-whitespace {
|
||||
min-height: 16px;
|
||||
}
|
||||
/* This "placeholder" doesn't work good in Gecko
|
||||
.squire-wysiwyg div:empty::before,
|
||||
.squire-wysiwyg div:-moz-only-whitespace::before {
|
||||
content: "Start writing here…";
|
||||
opacity: 0.5;
|
||||
user-select: text;
|
||||
-moz-user-select: text;
|
||||
}
|
||||
*/
|
||||
|
||||
.squire-plain {
|
||||
background-color: #fff;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
display: none;
|
||||
font-family: var(--fontMono);
|
||||
margin: 0;
|
||||
resize: none;
|
||||
white-space: pre-wrap;
|
||||
width: 100%;
|
||||
}
|
||||
.squire-mode-plain .squire-wysiwyg,
|
||||
.squire-mode-plain .btn-group:not(#squire-toolgroup-mode) {
|
||||
display: none;
|
||||
}
|
||||
.squire-mode-plain .squire-plain {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* @media (hover: none) */
|
||||
.rl-mobile .textAreaParent:not(:focus-within) .squire-toolbar {
|
||||
display: none;
|
||||
}
|
||||
.rl-mobile .squire-toolbar {
|
||||
background: #EEE;
|
||||
padding: 1px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.rl-mobile .b-compose.modal,
|
||||
.rl-mobile .b-identity-content.modal {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.rl-mobile .b-compose.modal {
|
||||
min-height: calc(100% - 62px);
|
||||
}
|
||||
152
dev/Styles/User/SystemDropDown.less
Normal file
152
dev/Styles/User/SystemDropDown.less
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
|
||||
#top-system-dropdown-id {
|
||||
overflow: hidden;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.rl-left-panel-disabled #more-list-dropdown-id + .dropdown-menu {
|
||||
position: fixed;
|
||||
top: 40px;
|
||||
}
|
||||
|
||||
.b-system-drop-down {
|
||||
|
||||
.b-toolbar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 30px;
|
||||
padding: 10px @rlLowMargin;
|
||||
z-index: 103;
|
||||
}
|
||||
|
||||
.email-title {
|
||||
display: inline-block;
|
||||
max-width: 50vw;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
margin-right: 28px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.audioPlace {
|
||||
display: inline-block;
|
||||
font-size: 30px;
|
||||
height: 30px;
|
||||
margin-right: 10px;
|
||||
width: 1em;
|
||||
|
||||
.playIcon, .stopIcon {
|
||||
cursor: pointer;
|
||||
color: orange;
|
||||
text-shadow: 0 1px 0 #555;
|
||||
}
|
||||
|
||||
.stopIcon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
.playIcon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.stopIcon {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accountPlace {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
height: 29px;
|
||||
line-height: 30px;
|
||||
max-width: 25vw;
|
||||
overflow: hidden;
|
||||
padding: 1px 8px;
|
||||
text-overflow: ellipsis;
|
||||
text-shadow: 0 1px 0 #000;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.account-item {
|
||||
&:not(.current) i:first-child,
|
||||
&.current i + i {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.counter {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.g-ui-menu .e-link.account-item {
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes firstBar {
|
||||
0% { height: 30%; }
|
||||
50% { height: 100%; }
|
||||
100% { height: 30%; }
|
||||
}
|
||||
|
||||
@keyframes secondBar {
|
||||
0% { height: 90%; }
|
||||
50% { height: 30%; }
|
||||
100% { height: 100%; }
|
||||
}
|
||||
|
||||
@keyframes thirdBar {
|
||||
0% { height: 20%; }
|
||||
40% { height: 40%; }
|
||||
60% { height: 80%; }
|
||||
100% { height: 40%; }
|
||||
}
|
||||
|
||||
.equaliser {
|
||||
|
||||
margin-top: 5px;
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
position: relative;
|
||||
|
||||
.bar {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background: orange;
|
||||
position: absolute;
|
||||
bottom:0;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.first {
|
||||
left: calc(1em / 2 - 10px);
|
||||
}
|
||||
.second {
|
||||
left: calc(1em / 2 - 2px);
|
||||
}
|
||||
.third {
|
||||
left: calc(1em / 2 + 6px);
|
||||
}
|
||||
|
||||
&.animated {
|
||||
.first {
|
||||
animation: firstBar 1s infinite;
|
||||
}
|
||||
.second {
|
||||
animation: secondBar 1s infinite;
|
||||
}
|
||||
.third {
|
||||
animation: thirdBar 1s infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
10
dev/Styles/User/Template.less
Normal file
10
dev/Styles/User/Template.less
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
.b-template-add-content {
|
||||
|
||||
&.modal {
|
||||
max-width: 750px;
|
||||
}
|
||||
|
||||
.e-template-place {
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue