Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Nextcloud Mail App horizontal layout - For use in the custom css app
@media only screen and (min-width: 768px) {
.app-mail #app-navigation {
min-width: 250px !important;
}
#mail-new-message-fixed, #app-navigation-accounts, .app-mail #app #app-navigation #app-settings #app-settings-header, .app-mail #app #app-navigation #app-settings #app-settings-content {
width: 300px !important;
}
.app-mail #app-content {
height: calc(100vh - 50px);
display: flex;
flex-direction: column;
flex-grow: 0;
overflow-x: hidden;
}
.app-mail #app-content #app-content-wrapper {
flex-direction: column;
overflow: hidden;
}
.app-mail #app-content #app-content-wrapper .app-content-list {
top: auto !important;
width: auto !important;
max-width: 100vw !important;
min-height: 10% !important;
height: 30%;
border-right: none !important;
border-bottom: 4px solid #ebebeb !important;
resize: vertical;
flex: unset;
}
.app-mail #app-content #app-content-wrapper .app-content-details {
max-height: 90% !important;
min-height: 20% !important;
flex: 1;
overflow-y: auto;
}
#mail-message, .app-content-details{
max-width: revert !important;
margin: revert !important;
}
#mail-message-header {
top: auto !important;
position: relative !important;
background: #ebebeb !important;
width: 100% !important;
}
#mail-message-header h2 {
font-weight: bold;
}
#mail-content, .mail-message-attachments {
margin: 10px 10px 50px 30px !important;
}
#emptycontent {
margin-top: 5vh;
}
#load-more-mail-messages {
margin-top: 5px !important;
margin-bottom: 5px !important;
}
.special-inbox.collapsible > .folder, .special-drafts.collapsible > .folder, .special-flagged.collapsible > .folder, .special-sent.collapsible > .folder {
flex: auto !important;
margin-left: 20px !important;
box-shadow: none !important;
}
.app-mail #app-navigation .collapsible:not(.open) .app-navigation-entry-utils{
border-bottom: #0082C9 solid 2px !important;
}
.app-mail #app-navigation .collapsible.open {
background-color: #ebebeb !important;
border-top: #fff 5px solid;
}
.app-mail #app-navigation .collapsible.open > .folder {
font-weight: bold;
border-bottom: #0082C9 solid 2px !important;
}
#mail-message-has-blocked-content {
border: 1px solid #ffd480 !important;
background: #ffff99 !important;
padding: 10px !important;
}
iframe table{
table-layout: inherit !important;
}
}
@dugite-code

This comment has been minimized.

Copy link
Owner Author

dugite-code commented Nov 29, 2017

2017/11/29

  • - Fixed loading image position
  • - Added highlight to The images have been blocked to protect your privacy.
  • - Fixed empty folder background image position
  • - Added resize to messages pane
  • - Changed subfolder background color from gradient to solid

2018/02/09

  • - Added indicator line to subfolder Parent
  • - Added indicator line and Bold text to open Parent Folder
  • - Added more specific selectors for the app-navigation changes to avoid conflicts with the news app in NC13
  • - Fixed Settings menu width
    - [x] - Forced Subfolders to new lines - No longer needed in Nextcloud 13

2018/02/12

  • - Fix empty folder mail icon location

2018/05/30

  • - Fixed special folder subfolder collapse

2018/09/27

  • - Nextcloud 14 structural changes

2018/10/17

-[x] - Fixed message list not filling screen with recent update

2019/11/07

-[x] - Fixed message list not filling screen with NC17
-[x] - Fixed message composer not filling screen with NC17

Tested with: Firefox 70.0.1 (64-bit) - Nextcloud 17.0.0

Buy me a Beer

Bitcoin Litecoin

image

image

Bitcoin Address: 155xGQ2sPt2BAbmLUp5myyfjLmAm3c8pPP Litecoin Address: LNiBt4ksgDgTqGq4BYcLS8vtNkdn1Lrmmh

Website: PeekRead.Info

@dugite-code

This comment has been minimized.

Copy link
Owner Author

dugite-code commented Nov 30, 2017

2017-11-30_000036

@dugite-code

This comment has been minimized.

Copy link
Owner Author

dugite-code commented Feb 8, 2018

Updated for Nextcloud 13 See the revisions page for Nextcloud 12

@dugite-code

This comment has been minimized.

Copy link
Owner Author

dugite-code commented Sep 27, 2018

Updated for Nextcloud 14. Note: Not backwards compatible

@dugite-code

This comment has been minimized.

Copy link
Owner Author

dugite-code commented Jan 29, 2019

Tested with Nextcloud 15

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.