github.com/soulteary/pocket-bookcase@v0.0.0-20240428065142-0b5a9a0fc98a/internal/view/assets/less/bookmark-item.less (about)

     1  .bookmark {
     2  	display: flex;
     3  	flex-flow: column nowrap;
     4  	min-width: 0;
     5  	border: 1px solid var(--border);
     6  	background-color: var(--contentBg);
     7  	height: 100%;
     8  	position: relative;
     9  
    10  	&:hover,
    11  	&:focus {
    12  		.bookmark-menu > a {
    13  			display: block;
    14  		}
    15  	}
    16  
    17  	&.selected {
    18  		background-color: var(--selectedBg);
    19  	}
    20  
    21  	.bookmark-selector {
    22  		position: absolute;
    23  		top: 0;
    24  		left: 0;
    25  		width: 100%;
    26  		height: 100%;
    27  		z-index: 9;
    28  	}
    29  
    30  	.bookmark-link {
    31  		display: block;
    32  		cursor: default;
    33  
    34  		&[href] {
    35  			cursor: pointer;
    36  
    37  			&:hover,
    38  			&:focus {
    39  				.title {
    40  					color: var(--main);
    41  				}
    42  			}
    43  		}
    44  
    45  		span.thumbnail {
    46  			width: 100%;
    47  			height: 200px;
    48  			display: block;
    49  			background-size: cover;
    50  			background-repeat: no-repeat;
    51  			background-position: center center;
    52  			margin-bottom: 8px;
    53  			border-bottom: 1px solid var(--border);
    54  		}
    55  
    56  		.id {
    57  			color: var(--color);
    58  			border: 1px solid var(--border);
    59  			background-color: var(--contentBg);
    60  			font-size: 0.7em;
    61  			font-weight: bold;
    62  			left: -1px;
    63  			top: -1px;
    64  			position: absolute;
    65  			padding: 0px 0.3em;
    66  			opacity: 0.7;
    67  		}
    68  
    69  		.title {
    70  			text-overflow: ellipsis;
    71  			word-wrap: break-word;
    72  			overflow: hidden;
    73  			font-size: 1.2em;
    74  			line-height: 1.3em;
    75  			max-height: 5.2em;
    76  			font-weight: 600;
    77  			padding: 0 16px;
    78  			color: var(--color);
    79  
    80  			&:first-child {
    81  				margin-top: 16px;
    82  			}
    83  
    84  			i {
    85  				color: var(--colorLink);
    86  				margin-left: 4px;
    87  				font-size: 14px;
    88  			}
    89  		}
    90  
    91  		.excerpt {
    92  			color: var(--color);
    93  			margin-top: 8px;
    94  			padding: 0 16px;
    95  			text-overflow: ellipsis;
    96  			word-wrap: break-word;
    97  			overflow: hidden;
    98  			font-size: 0.9em;
    99  			line-height: 1.5em;
   100  			max-height: 10.5em;
   101  		}
   102  	}
   103  
   104  	.bookmark-tags {
   105  		display: flex;
   106  		flex-flow: row wrap;
   107  		margin: 8px 0 -4px;
   108  		padding: 0 8px;
   109  
   110  		a {
   111  			margin: 4px;
   112  			padding: 4px 8px;
   113  			font-size: 0.8em;
   114  			font-weight: 600;
   115  			border: 1px solid var(--border);
   116  			border-radius: 4px;
   117  			color: var(--colorLink);
   118  			background-color: var(--contentBg);
   119  
   120  			&:hover,
   121  			&:focus {
   122  				color: var(--main);
   123  			}
   124  		}
   125  	}
   126  
   127  	.bookmark-menu {
   128  		padding: 8px 16px 16px;
   129  		display: flex;
   130  		flex-flow: row nowrap;
   131  		min-width: 0;
   132  		min-height: 0;
   133  		align-items: center;
   134  
   135  		a {
   136  			color: var(--colorLink);
   137  			flex-shrink: 0;
   138  			opacity: 0.8;
   139  			display: none;
   140  			font-size: 0.9em;
   141  
   142  			&:not(:last-child) {
   143  				margin-right: 12px;
   144  			}
   145  
   146  			&:hover,
   147  			&:focus {
   148  				color: var(--main);
   149  				opacity: 1;
   150  			}
   151  		}
   152  
   153  		.url {
   154  			flex: 1 0;
   155  			opacity: 1;
   156  			display: block;
   157  			white-space: nowrap;
   158  			overflow: hidden;
   159  			text-overflow: ellipsis;
   160  			line-height: 21px;
   161  
   162  			&:not([href]) {
   163  				cursor: default;
   164  				color: var(--colorLink);
   165  			}
   166  		}
   167  
   168  		@media (max-width: 600px) {
   169  			a {
   170  				display: block;
   171  			}
   172  		}
   173  	}
   174  }
   175  
   176  .bookmark.list {
   177  	border-top-width: 0;
   178  	border-bottom-width: 1px;
   179  	padding: 16px 24px 16px 100px;
   180  
   181  	&:first-child {
   182  		border-top-width: 1px;
   183  	}
   184  
   185  	.bookmark-link {
   186  		span.thumbnail {
   187  			position: absolute;
   188  			top: 0;
   189  			left: 0;
   190  			width: 100px;
   191  			height: 100%;
   192  			margin-bottom: 0;
   193  			border-bottom: 0px;
   194  			border-right: 1px solid var(--border);
   195  		}
   196  
   197  		.title {
   198  			margin: 0;
   199  			padding-left: 24px;
   200  		}
   201  	}
   202  
   203  	.excerpt,
   204  	> .spacer {
   205  		display: none;
   206  	}
   207  
   208  	.bookmark-tags {
   209  		padding-left: 16px;
   210  		padding-right: 0;
   211  	}
   212  
   213  	.bookmark-menu {
   214  		padding: 8px 0 0 24px;
   215  		align-items: flex-end;
   216  	}
   217  
   218  	&.no-thumbnail {
   219  		padding-left: 16px;
   220  		padding-right: 16px;
   221  
   222  		.bookmark-link .title {
   223  			padding: 0;
   224  			margin-bottom: 4px;
   225  		}
   226  
   227  		.excerpt {
   228  			margin-top: 0;
   229  			margin-bottom: 4px;
   230  			padding: 0;
   231  			display: block;
   232  		}
   233  
   234  		.bookmark-tags {
   235  			padding-left: 0;
   236  			margin: 0 -4px 0;
   237  		}
   238  
   239  		.bookmark-menu {
   240  			padding-top: 0;
   241  			padding-left: 0;
   242  		}
   243  	}
   244  
   245  	@media (max-width: 600px) {
   246  		padding: 8px 16px 8px 70px;
   247  		border-width: 0 !important;
   248  		border-bottom-width: 1px !important;
   249  
   250  		.bookmark-link {
   251  			span.thumbnail {
   252  				width: 70px;
   253  			}
   254  
   255  			.title {
   256  				font-size: 1.1em;
   257  				font-weight: 500;
   258  				padding-left: 16px;
   259  			}
   260  		}
   261  
   262  		.bookmark-tags {
   263  			padding-left: 8px;
   264  		}
   265  
   266  		.bookmark-menu {
   267  			padding-left: 16px;
   268  		}
   269  	}
   270  }