Skip to content

Instantly share code, notes, and snippets.

@dugite-code dugite-code/horizontal.css
Last active Feb 22, 2019

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-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;
}
#mail-message-list #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;
}
#reply-composer {
border-top: 20px solid #ebebeb !important;
}
#show-images-text {
border: 1px solid #ffd480 !important;
background: #ffff99 !important;
padding: 10px !important;
margin-bottom: 25px;
}
iframe table{
table-layout: inherit !important;
}
}
@dugite-code

This comment has been minimized.

Copy link
Owner Author

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

Tested with: Firefox 62.0.3 - Nextcloud 14.0.3

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

commented Nov 30, 2017

2017-11-30_000036

@dugite-code

This comment has been minimized.

Copy link
Owner Author

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

commented Sep 27, 2018

Updated for Nextcloud 14. Note: Not backwards compatible

@dugite-code

This comment has been minimized.

Copy link
Owner Author

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.