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

     1  :root {
     2  	--bg: #eee;
     3  	--sidebarBg: #292929;
     4  	--sidebarHoverBg: #232323;
     5  	--headerBg: #fff;
     6  	--contentBg: #fff;
     7  	--border: #e5e5e5;
     8  	--color: #232323;
     9  	--colorLink: #999;
    10  	--colorSidebar: #fff;
    11  	--main: #f44336;
    12  	--errorColor: #f44336;
    13  	--selectedBg: #ffe7e5;
    14  
    15  	@media (prefers-color-scheme: dark) {
    16  		&:root {
    17  			--bg: #1f1f1f;
    18  			--headerBg: #292929;
    19  			--contentBg: #292929;
    20  			--border: #191919;
    21  			--color: #fff;
    22  			--selectedBg: #261918;
    23  		}
    24  	}
    25  }
    26  
    27  &.night {
    28  	--bg: #1f1f1f;
    29  	--headerBg: #292929;
    30  	--contentBg: #292929;
    31  	--border: #191919;
    32  	--color: #fff;
    33  	--selectedBg: #261918;
    34  }
    35  
    36  * {
    37  	border-width: 0;
    38  	box-sizing: border-box;
    39  	font-family: "Source Sans Pro", sans-serif;
    40  	margin: 0;
    41  	padding: 0;
    42  	text-decoration: none;
    43  }
    44  
    45  body {
    46  	background-color: var(--bg);
    47  }
    48  
    49  a {
    50  	cursor: pointer;
    51  }
    52  
    53  .spacer {
    54  	flex: 1;
    55  }
    56  
    57  #login-scene {
    58  	height: 100%;
    59  	height: 100dvh;
    60  	padding: 16px;
    61  	overflow: auto;
    62  	display: flex;
    63  	align-items: center;
    64  	flex-flow: column nowrap;
    65  	background-color: var(--bg);
    66  
    67  	> .error-message {
    68  		width: 100%;
    69  		max-width: 400px;
    70  		font-size: 1em;
    71  		background-color: var(--contentBg);
    72  		border: 1px solid var(--border);
    73  		padding: 16px;
    74  		margin-top: auto;
    75  		margin-bottom: 16px;
    76  		text-align: center;
    77  		color: var(--errorColor);
    78  	}
    79  
    80  	#login-box {
    81  		width: 100%;
    82  		max-width: 400px;
    83  		margin-bottom: auto;
    84  		background-color: var(--contentBg);
    85  		display: flex;
    86  		flex-flow: column nowrap;
    87  		border: 1px solid var(--border);
    88  		flex-shrink: 0;
    89  
    90  		&:first-child {
    91  			margin-top: auto;
    92  		}
    93  
    94  		#logo-area {
    95  			display: flex;
    96  			align-items: center;
    97  			flex-flow: column nowrap;
    98  			padding: 16px;
    99  			background-color: var(--main);
   100  			border-bottom: 1px solid var(--border);
   101  			flex-shrink: 0;
   102  
   103  			#logo {
   104  				font-size: 3em;
   105  				font-weight: 100;
   106  				color: var(--contentBg);
   107  
   108  				span {
   109  					margin-right: 8px;
   110  				}
   111  			}
   112  
   113  			#tagline {
   114  				font-weight: 500;
   115  				margin-top: 4px;
   116  				color: var(--contentBg);
   117  				text-align: center;
   118  			}
   119  		}
   120  
   121  		#input-area {
   122  			padding: 16px;
   123  			display: grid;
   124  			grid-gap: 16px;
   125  			grid-template-columns: auto 1fr;
   126  			justify-content: baseline;
   127  			align-items: center;
   128  			border-bottom: 1px solid var(--border);
   129  
   130  			> label {
   131  				color: var(--color);
   132  			}
   133  
   134  			> input {
   135  				color: var(--color);
   136  				padding: 8px;
   137  				background-color: var(--contentBg);
   138  				border: 1px solid var(--border);
   139  				min-width: 0;
   140  				font-size: 1em;
   141  			}
   142  
   143  			.checkbox-field {
   144  				grid-column: 1 / span 2;
   145  				display: flex;
   146  				flex-flow: row nowrap;
   147  				align-items: center;
   148  				justify-content: center;
   149  				cursor: pointer;
   150  
   151  				&:hover,
   152  				&:focus {
   153  					text-decoration: underline;
   154  					text-decoration-color: var(--main);
   155  				}
   156  
   157  				> input[type="checkbox"] {
   158  					margin-right: 8px;
   159  				}
   160  			}
   161  		}
   162  
   163  		#button-area {
   164  			display: flex;
   165  			flex-flow: row nowrap;
   166  			padding: 16px;
   167  			justify-content: center;
   168  
   169  			a {
   170  				color: var(--color);
   171  				text-transform: uppercase;
   172  				text-align: center;
   173  				font-weight: 600;
   174  				cursor: default;
   175  
   176  				&.button {
   177  					cursor: pointer;
   178  
   179  					&:hover,
   180  					&:focus {
   181  						color: var(--main);
   182  					}
   183  				}
   184  			}
   185  		}
   186  	}
   187  }
   188  
   189  #main-scene {
   190  	min-height: 100%;
   191  	min-height: 100dvh;
   192  	padding-top: 60px;
   193  	padding-left: 60px;
   194  	background-color: var(--bg);
   195  
   196  	#main-sidebar {
   197  		top: 0;
   198  		left: 0;
   199  		width: 60px;
   200  		height: 100%;
   201  		height: 100dvh;
   202  		position: fixed;
   203  		display: flex;
   204  		flex-flow: column nowrap;
   205  		background-color: var(--sidebarBg);
   206  		z-index: 1;
   207  
   208  		a {
   209  			flex-shrink: 0;
   210  			display: block;
   211  			width: 60px;
   212  			line-height: 60px;
   213  			text-align: center;
   214  			font-size: 1em;
   215  			color: var(--colorSidebar);
   216  
   217  			&.active {
   218  				cursor: default;
   219  				color: var(--colorSidebar);
   220  				background-color: var(--main);
   221  			}
   222  
   223  			&:hover,
   224  			&:focus {
   225  				color: var(--main);
   226  				background-color: var(--sidebarHoverBg);
   227  			}
   228  		}
   229  	}
   230  
   231  	.page-header {
   232  		top: 0px;
   233  		left: 60px;
   234  		right: 0px;
   235  		height: 60px;
   236  		position: fixed;
   237  		color: var(--color);
   238  		background-color: var(--headerBg);
   239  		border-bottom: 1px solid var(--border);
   240  		padding: 0 16px;
   241  		z-index: 10;
   242  	}
   243  
   244  	h1.page-header {
   245  		line-height: 60px;
   246  		font-size: 1.3em;
   247  		font-weight: 600;
   248  	}
   249  
   250  	div.page-header {
   251  		display: flex;
   252  		flex-flow: row nowrap;
   253  		align-items: center;
   254  
   255  		p {
   256  			flex: 1 0;
   257  			font-size: 1.3em;
   258  			font-weight: 600;
   259  			line-height: 60px;
   260  			color: var(--color);
   261  		}
   262  
   263  		input[type="text"] {
   264  			flex: 1 0;
   265  			min-width: 0;
   266  			margin-right: 8px;
   267  			font-size: 1.1em;
   268  			font-weight: 500;
   269  			line-height: 59px;
   270  			color: var(--color);
   271  			background-color: var(--contentBg);
   272  
   273  			&::placeholder {
   274  				color: var(--colorLink);
   275  			}
   276  		}
   277  
   278  		a {
   279  			display: block;
   280  			width: 24px;
   281  			line-height: 24px;
   282  			color: var(--colorLink);
   283  			text-align: center;
   284  
   285  			&:not(:last-child) {
   286  				margin-right: 8px;
   287  			}
   288  
   289  			&:hover {
   290  				color: var(--main);
   291  			}
   292  		}
   293  	}
   294  
   295  	.loading-overlay {
   296  		display: flex;
   297  		flex-flow: column nowrap;
   298  		align-items: center;
   299  		justify-content: center;
   300  		overflow: hidden;
   301  		position: fixed;
   302  		top: 0;
   303  		left: 0;
   304  		width: 100%;
   305  		width: 100dvw;
   306  		height: 100%;
   307  		height: 100dvh;
   308  		z-index: 10001;
   309  		background-color: rgba(0, 0, 0, 0.6);
   310  
   311  		i {
   312  			color: var(--colorSidebar);
   313  			font-size: 4em;
   314  			text-align: center;
   315  			width: 80px;
   316  			line-height: 80px;
   317  			position: absolute;
   318  		}
   319  	}
   320  
   321  	@media (max-width: 600px) {
   322  		padding-top: 50px;
   323  		padding-left: 0;
   324  		padding-bottom: 50px;
   325  
   326  		#main-sidebar {
   327  			top: auto;
   328  			right: 0;
   329  			bottom: 0;
   330  			width: 100%;
   331  			width: 100dvw;
   332  			height: 50px;
   333  			flex-flow: row nowrap;
   334  			border-top: 1px solid var(--border);
   335  
   336  			.spacer {
   337  				display: none;
   338  			}
   339  
   340  			a {
   341  				width: auto;
   342  				flex: 1 0;
   343  				line-height: 50px;
   344  
   345  				&:hover,
   346  				&:focus {
   347  					color: var(--colorSidebar);
   348  					background-color: var(--main);
   349  				}
   350  			}
   351  		}
   352  
   353  		.page-header {
   354  			left: 0;
   355  			height: 50px;
   356  		}
   357  
   358  		h1.page-header {
   359  			text-align: center;
   360  			font-size: 1em;
   361  			line-height: 50px;
   362  			text-transform: uppercase;
   363  		}
   364  
   365  		div.page-header {
   366  			flex-flow: row wrap;
   367  
   368  			p {
   369  				flex: 1 0;
   370  				font-size: 1em;
   371  				font-weight: 500;
   372  				line-height: 3em;
   373  				padding: 0;
   374  			}
   375  
   376  			input[type="text"] {
   377  				flex: 1 0;
   378  				font-size: 1em;
   379  				font-weight: 500;
   380  				line-height: 3em;
   381  			}
   382  
   383  			a {
   384  				display: block;
   385  				width: 24px;
   386  				line-height: 100%;
   387  			}
   388  		}
   389  	}
   390  }
   391  
   392  #content-scene {
   393  	padding: 20px;
   394  	display: flex;
   395  	color: var(--color);
   396  	background-color: var(--bg);
   397  	flex-flow: column nowrap;
   398  	align-items: center;
   399  
   400  	#header {
   401  		width: 100%;
   402  		padding: 20px;
   403  		max-width: 840px;
   404  		margin-bottom: 16px;
   405  		background-color: var(--contentBg);
   406  		border: 1px solid var(--border);
   407  		display: flex;
   408  		flex-flow: column;
   409  		align-items: center;
   410  
   411  		#metadata {
   412  			display: flex;
   413  			flex-flow: row wrap;
   414  			text-align: center;
   415  			font-size: 16px;
   416  			color: var(--colorLink);
   417  
   418  			&[v-cloak] {
   419  				visibility: hidden;
   420  			}
   421  		}
   422  
   423  		#title {
   424  			padding: 8px 0;
   425  			grid-column-start: 1;
   426  			grid-column-end: -1;
   427  			font-size: 36px;
   428  			font-weight: 700;
   429  			word-break: break-word;
   430  			hyphens: none;
   431  			text-align: center;
   432  		}
   433  
   434  		#links {
   435  			display: flex;
   436  			flex-flow: row wrap;
   437  
   438  			a {
   439  				padding: 0 4px;
   440  				color: var(--color);
   441  				text-decoration: underline;
   442  
   443  				&:hover,
   444  				&:focus {
   445  					color: var(--main);
   446  				}
   447  			}
   448  		}
   449  	}
   450  
   451  	#content {
   452  		width: 100%;
   453  		padding: 20px;
   454  		max-width: 840px;
   455  		background-color: var(--contentBg);
   456  		border: 1px solid var(--border);
   457  
   458  		* {
   459  			font-size: 18px;
   460  			line-height: 180%;
   461  
   462  			&:not(:last-child) {
   463  				margin-bottom: 20px;
   464  			}
   465  		}
   466  
   467  		a {
   468  			color: var(--color);
   469  			text-decoration: underline;
   470  
   471  			&:hover,
   472  			&:focus {
   473  				color: var(--main);
   474  			}
   475  		}
   476  
   477  		pre,
   478  		code {
   479  			overflow: auto;
   480  			border: 1px solid var(--border);
   481  			font-family: "Ubuntu Mono", "Courier New", Courier, monospace;
   482  			font-size: 16px;
   483  		}
   484  
   485  		pre {
   486  			padding: 8px;
   487  
   488  			> code {
   489  				border: 0;
   490  			}
   491  		}
   492  
   493  		ol,
   494  		ul {
   495  			padding-left: 16px;
   496  		}
   497  
   498  		img {
   499  			height: auto;
   500  			max-width: 100%;
   501  		}
   502  
   503  		table {
   504  			border: 1px solid var(--border);
   505  			border-collapse: collapse;
   506  
   507  			tr,
   508  			th,
   509  			td {
   510  				border: 1px solid var(--border);
   511  			}
   512  		}
   513  	}
   514  }
   515  
   516  #page-home {
   517  	> .empty-message {
   518  		width: 100%;
   519  		max-width: 400px;
   520  		font-size: 1em;
   521  		background-color: var(--contentBg);
   522  		border: 1px solid var(--border);
   523  		padding: 16px;
   524  		margin: 16px;
   525  		color: var(--errorColor);
   526  	}
   527  
   528  	#edit-box {
   529  		background-color: var(--selectedBg);
   530  		border-bottom: 1px solid var(--main);
   531  	}
   532  
   533  	#bookmarks-grid {
   534  		display: grid;
   535  		grid-template-rows: min-content;
   536  		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   537  		grid-gap: 16px;
   538  		padding: 16px;
   539  		overflow: auto;
   540  
   541  		.bookmark {
   542  			align-self: start;
   543  		}
   544  
   545  		.pagination-box {
   546  			grid-column-end: -1;
   547  			grid-column-start: 1;
   548  			display: flex;
   549  			flex-flow: row nowrap;
   550  			align-self: start;
   551  
   552  			a {
   553  				padding: 8px;
   554  				color: var(--colorLink);
   555  
   556  				&:hover,
   557  				&:focus {
   558  					color: var(--main);
   559  				}
   560  			}
   561  
   562  			input {
   563  				width: 40px;
   564  				padding: 8px;
   565  				text-align: center;
   566  				font-size: 0.9em;
   567  				color: var(--color);
   568  				border: 1px solid var(--border);
   569  				background-color: var(--contentBg);
   570  				margin: 0 8px;
   571  			}
   572  
   573  			p {
   574  				font-size: 0.9em;
   575  				color: var(--colorLink);
   576  				line-height: 37px;
   577  				font-weight: 600;
   578  
   579  				&:last-of-type::before {
   580  					content: "/";
   581  					margin-right: 8px;
   582  				}
   583  			}
   584  		}
   585  
   586  		&.list {
   587  			grid-gap: 0;
   588  			padding-bottom: 0;
   589  			grid-template-columns: minmax(0, 1000px);
   590  
   591  			.pagination-box {
   592  				padding: 16px 0;
   593  
   594  				&:first-child {
   595  					padding-top: 0;
   596  				}
   597  			}
   598  
   599  			@media (max-width: 600px) {
   600  				padding: 16px 0 0;
   601  
   602  				.pagination-box {
   603  					padding: 16px;
   604  				}
   605  			}
   606  		}
   607  	}
   608  
   609  	#dialog-tags {
   610  		.custom-dialog-body {
   611  			grid-template-columns: repeat(2, minmax(0, 1fr));
   612  
   613  			@media (max-width: 600px) {
   614  				grid-template-columns: minmax(0, 1fr);
   615  			}
   616  
   617  			a {
   618  				font-size: 1em;
   619  				color: var(--color);
   620  
   621  				span {
   622  					&:last-child {
   623  						font-size: 1em;
   624  						color: var(--colorLink);
   625  						margin-left: 4px;
   626  
   627  						&::before {
   628  							content: "(";
   629  							margin-right: 2px;
   630  						}
   631  
   632  						&::after {
   633  							content: ")";
   634  							margin-left: 2px;
   635  						}
   636  					}
   637  				}
   638  
   639  				&:hover,
   640  				&:focus {
   641  					color: var(--main);
   642  				}
   643  			}
   644  		}
   645  	}
   646  }
   647  
   648  #page-setting {
   649  	min-height: 0;
   650  	max-height: 100%;
   651  	display: flex;
   652  	flex-flow: column nowrap;
   653  
   654  	.setting-container {
   655  		padding: 8px;
   656  		display: flex;
   657  		overflow: auto;
   658  		flex-flow: column nowrap;
   659  		flex: 1 0;
   660  
   661  		&::after {
   662  			content: "";
   663  			display: block;
   664  			min-height: 1px;
   665  		}
   666  
   667  		details.setting-group {
   668  			margin: 8px;
   669  			display: block;
   670  			max-width: 350px;
   671  			color: var(--color);
   672  			background-color: var(--contentBg);
   673  			border: 1px solid var(--border);
   674  
   675  			@media (max-width: 600px) {
   676  				max-width: 100%;
   677  			}
   678  
   679  			summary {
   680  				list-style: none;
   681  				font-weight: 600;
   682  				width: 100%;
   683  				padding: 12px 8px;
   684  				font-size: 1.1em;
   685  
   686  				cursor: pointer;
   687  
   688  				&:hover {
   689  					color: var(--main);
   690  				}
   691  
   692  				&::-webkit-details-marker {
   693  					display: none;
   694  				}
   695  
   696  				&::after {
   697  					content: "+";
   698  					margin-left: 8px;
   699  					font-weight: 600;
   700  				}
   701  			}
   702  
   703  			&[open] summary {
   704  				border-bottom: 1px solid var(--border);
   705  
   706  				::after {
   707  					content: "-";
   708  				}
   709  			}
   710  
   711  			div.setting-group-footer {
   712  				padding: 4px 8px;
   713  				display: flex;
   714  				flex-flow: column nowrap;
   715  				align-items: flex-end;
   716  				border-top: 1px solid var(--border);
   717  
   718  				> a {
   719  					text-transform: uppercase;
   720  					padding: 8px 4px;
   721  					font-size: 0.9em;
   722  					font-weight: 600;
   723  
   724  					&:hover {
   725  						color: var(--main);
   726  					}
   727  
   728  					&:focus {
   729  						outline: none;
   730  						color: var(--main);
   731  						border-bottom: 1px dashed var(--main);
   732  					}
   733  				}
   734  			}
   735  		}
   736  	}
   737  
   738  	#setting-display,
   739  	#setting-bookmarks {
   740  		display: flex;
   741  		flex-flow: column nowrap;
   742  
   743  		&[open] {
   744  			padding-bottom: 8px;
   745  
   746  			summary {
   747  				margin-bottom: 8px;
   748  			}
   749  		}
   750  
   751  		label {
   752  			padding: 4px 8px;
   753  			color: var(--color);
   754  			display: flex;
   755  			flex-flow: row nowrap;
   756  			align-items: center;
   757  			cursor: pointer;
   758  
   759  			&:hover,
   760  			&:focus {
   761  				text-decoration: underline;
   762  				text-decoration-color: var(--main);
   763  			}
   764  
   765  			> input[type="checkbox"] {
   766  				margin-right: 8px;
   767  			}
   768  		}
   769  	}
   770  
   771  	#setting-accounts {
   772  		summary {
   773  			margin-bottom: 0;
   774  		}
   775  
   776  		ul {
   777  			list-style: none;
   778  
   779  			li {
   780  				padding: 8px;
   781  				display: flex;
   782  				flex-flow: row nowrap;
   783  				align-items: center;
   784  
   785  				&:not(:last-child) {
   786  					border-bottom: 1px solid var(--border);
   787  				}
   788  
   789  				p {
   790  					font-size: 1em;
   791  					color: var(--color);
   792  					flex: 1 0;
   793  
   794  					span {
   795  						color: var(--colorLink);
   796  					}
   797  				}
   798  
   799  				a {
   800  					margin-left: 8px;
   801  					color: var(--colorLink);
   802  
   803  					&:hover {
   804  						color: var(--main);
   805  					}
   806  				}
   807  			}
   808  		}
   809  	}
   810  }