mirror of
				https://github.com/TriliumNext/Notes.git
				synced 2025-11-04 07:01:31 +08:00 
			
		
		
		
	Merge pull request #3756 from meichthys/note-book-card-margin
Use same margin all around note-book-card
This commit is contained in:
		
						commit
						56e8506cb9
					
				@ -12,86 +12,86 @@ const TPL = `
 | 
				
			|||||||
        position: relative;
 | 
					        position: relative;
 | 
				
			||||||
        height: 100%;
 | 
					        height: 100%;
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    
 | 
					
 | 
				
			||||||
    .note-list.grid-view .note-list-container {
 | 
					    .note-list.grid-view .note-list-container {
 | 
				
			||||||
        display: flex;
 | 
					        display: flex;
 | 
				
			||||||
        flex-wrap: wrap;
 | 
					        flex-wrap: wrap;
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    
 | 
					
 | 
				
			||||||
    .note-list.grid-view .note-book-card {
 | 
					    .note-list.grid-view .note-book-card {
 | 
				
			||||||
        flex-basis: 300px;
 | 
					        flex-basis: 300px;
 | 
				
			||||||
        border: 1px solid transparent;
 | 
					        border: 1px solid transparent;
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    
 | 
					
 | 
				
			||||||
    .note-list.grid-view .note-expander {
 | 
					    .note-list.grid-view .note-expander {
 | 
				
			||||||
        display: none;
 | 
					        display: none;
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    
 | 
					
 | 
				
			||||||
    .note-list.grid-view .note-book-card {
 | 
					    .note-list.grid-view .note-book-card {
 | 
				
			||||||
        max-height: 300px;
 | 
					        max-height: 300px;
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    
 | 
					
 | 
				
			||||||
    .note-list.grid-view .note-book-card:hover {
 | 
					    .note-list.grid-view .note-book-card:hover {
 | 
				
			||||||
        cursor: pointer;
 | 
					        cursor: pointer;
 | 
				
			||||||
        border: 1px solid var(--main-border-color);
 | 
					        border: 1px solid var(--main-border-color);
 | 
				
			||||||
        background: var(--more-accented-background-color);
 | 
					        background: var(--more-accented-background-color);
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    
 | 
					
 | 
				
			||||||
    .note-book-card {
 | 
					    .note-book-card {
 | 
				
			||||||
        border-radius: 10px;
 | 
					        border-radius: 10px;
 | 
				
			||||||
        background-color: var(--accented-background-color);
 | 
					        background-color: var(--accented-background-color);
 | 
				
			||||||
        padding: 10px 15px 15px 8px;
 | 
					        padding: 10px 15px 15px 8px;
 | 
				
			||||||
        margin: 5px 5px 5px 0;
 | 
					        margin: 5px 5px 5px 5px;
 | 
				
			||||||
        overflow: hidden;
 | 
					        overflow: hidden;
 | 
				
			||||||
        display: flex;
 | 
					        display: flex;
 | 
				
			||||||
        flex-direction: column;
 | 
					        flex-direction: column;
 | 
				
			||||||
        flex-shrink: 0;
 | 
					        flex-shrink: 0;
 | 
				
			||||||
        flex-grow: 1;
 | 
					        flex-grow: 1;
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    
 | 
					
 | 
				
			||||||
    .note-book-card:not(.expanded) .note-book-content {
 | 
					    .note-book-card:not(.expanded) .note-book-content {
 | 
				
			||||||
        display: none !important;
 | 
					        display: none !important;
 | 
				
			||||||
        padding: 10px
 | 
					        padding: 10px
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    
 | 
					
 | 
				
			||||||
    .note-book-card.expanded .note-book-content {
 | 
					    .note-book-card.expanded .note-book-content {
 | 
				
			||||||
        display: block;
 | 
					        display: block;
 | 
				
			||||||
        min-height: 0;
 | 
					        min-height: 0;
 | 
				
			||||||
        height: 100%;
 | 
					        height: 100%;
 | 
				
			||||||
        padding-top: 10px;
 | 
					        padding-top: 10px;
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    
 | 
					
 | 
				
			||||||
    .note-book-header {
 | 
					    .note-book-header {
 | 
				
			||||||
        margin-bottom: 0;
 | 
					        margin-bottom: 0;
 | 
				
			||||||
        word-break: break-all;
 | 
					        word-break: break-all;
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    
 | 
					
 | 
				
			||||||
    /* not-expanded title is limited to one line only */
 | 
					    /* not-expanded title is limited to one line only */
 | 
				
			||||||
    .note-book-card:not(.expanded) .note-book-header {
 | 
					    .note-book-card:not(.expanded) .note-book-header {
 | 
				
			||||||
        overflow: hidden;
 | 
					        overflow: hidden;
 | 
				
			||||||
        white-space: nowrap;
 | 
					        white-space: nowrap;
 | 
				
			||||||
        text-overflow: ellipsis;
 | 
					        text-overflow: ellipsis;
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    
 | 
					
 | 
				
			||||||
    .note-book-header .rendered-note-attributes {
 | 
					    .note-book-header .rendered-note-attributes {
 | 
				
			||||||
        font-size: medium;
 | 
					        font-size: medium;
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    
 | 
					
 | 
				
			||||||
    .note-book-header .rendered-note-attributes:before {
 | 
					    .note-book-header .rendered-note-attributes:before {
 | 
				
			||||||
        content: "\\00a0\\00a0";
 | 
					        content: "\\00a0\\00a0";
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    
 | 
					
 | 
				
			||||||
    .note-book-header .note-icon {
 | 
					    .note-book-header .note-icon {
 | 
				
			||||||
        font-size: 100%;
 | 
					        font-size: 100%;
 | 
				
			||||||
        display: inline-block;
 | 
					        display: inline-block;
 | 
				
			||||||
        padding-right: 7px;
 | 
					        padding-right: 7px;
 | 
				
			||||||
        position: relative;
 | 
					        position: relative;
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    
 | 
					
 | 
				
			||||||
    .note-book-card .note-book-card {
 | 
					    .note-book-card .note-book-card {
 | 
				
			||||||
        border: 1px solid var(--main-border-color);
 | 
					        border: 1px solid var(--main-border-color);
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    
 | 
					
 | 
				
			||||||
    .note-book-content.type-image, .note-book-content.type-file, .note-book-content.type-protectedSession {
 | 
					    .note-book-content.type-image, .note-book-content.type-file, .note-book-content.type-protectedSession {
 | 
				
			||||||
        display: flex;
 | 
					        display: flex;
 | 
				
			||||||
        align-items: center;
 | 
					        align-items: center;
 | 
				
			||||||
@ -99,46 +99,46 @@ const TPL = `
 | 
				
			|||||||
        text-align: center;
 | 
					        text-align: center;
 | 
				
			||||||
        padding: 10px;
 | 
					        padding: 10px;
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    
 | 
					
 | 
				
			||||||
    .note-book-content.type-image img, .note-book-content.type-canvas svg {
 | 
					    .note-book-content.type-image img, .note-book-content.type-canvas svg {
 | 
				
			||||||
        max-width: 100%;
 | 
					        max-width: 100%;
 | 
				
			||||||
        max-height: 100%;
 | 
					        max-height: 100%;
 | 
				
			||||||
        object-fit: contain;
 | 
					        object-fit: contain;
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    
 | 
					
 | 
				
			||||||
    .note-book-card.type-image .note-book-content img,
 | 
					    .note-book-card.type-image .note-book-content img,
 | 
				
			||||||
    .note-book-card.type-text .note-book-content img,
 | 
					    .note-book-card.type-text .note-book-content img,
 | 
				
			||||||
    .note-book-card.type-canvas .note-book-content img {
 | 
					    .note-book-card.type-canvas .note-book-content img {
 | 
				
			||||||
        max-width: 100%;
 | 
					        max-width: 100%;
 | 
				
			||||||
        max-height: 100%;
 | 
					        max-height: 100%;
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    
 | 
					
 | 
				
			||||||
    .note-book-header {
 | 
					    .note-book-header {
 | 
				
			||||||
        flex-grow: 0;
 | 
					        flex-grow: 0;
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    
 | 
					
 | 
				
			||||||
    .note-list-wrapper {
 | 
					    .note-list-wrapper {
 | 
				
			||||||
        height: 100%;
 | 
					        height: 100%;
 | 
				
			||||||
        overflow: auto;
 | 
					        overflow: auto;
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    
 | 
					
 | 
				
			||||||
    .note-expander {
 | 
					    .note-expander {
 | 
				
			||||||
        font-size: x-large;
 | 
					        font-size: x-large;
 | 
				
			||||||
        position: relative;
 | 
					        position: relative;
 | 
				
			||||||
        top: 3px;
 | 
					        top: 3px;
 | 
				
			||||||
        cursor: pointer;
 | 
					        cursor: pointer;
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    
 | 
					
 | 
				
			||||||
    .note-list-pager {
 | 
					    .note-list-pager {
 | 
				
			||||||
        text-align: center;
 | 
					        text-align: center;
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    </style>
 | 
					    </style>
 | 
				
			||||||
    
 | 
					
 | 
				
			||||||
    <div class="note-list-wrapper">
 | 
					    <div class="note-list-wrapper">
 | 
				
			||||||
        <div class="note-list-pager"></div>
 | 
					        <div class="note-list-pager"></div>
 | 
				
			||||||
    
 | 
					
 | 
				
			||||||
        <div class="note-list-container"></div>
 | 
					        <div class="note-list-container"></div>
 | 
				
			||||||
        
 | 
					
 | 
				
			||||||
        <div class="note-list-pager"></div>
 | 
					        <div class="note-list-pager"></div>
 | 
				
			||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
</div>`;
 | 
					</div>`;
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user