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

     1  :root {
     2  	--main: #f44336;
     3  	--border: #e5e5e5;
     4  	--colorLink: #999;
     5  	--archiveHeaderBg: rgba(255, 255, 255, 0.95);
     6  
     7  	@media (prefers-color-scheme: dark) {
     8  		--border: #191919;
     9  		--archiveHeaderBg: rgba(41, 41, 41, 0.95);
    10  	}
    11  }
    12  
    13  @header-height: 60px;
    14  @screen-sm-max: 600px;
    15  @screen-sm-header-height: 50px;
    16  
    17  body {
    18  	padding: 0;
    19  	margin: 0;
    20  }
    21  
    22  * {
    23  	box-sizing: border-box;
    24  }
    25  
    26  body.archive {
    27  	display: grid;
    28  	grid-template-rows: minmax(1px, auto) 1fr;
    29  	height: 100vh;
    30  	width: 100vw;
    31  
    32  	.header {
    33  		display: flex;
    34  		flex-flow: row wrap;
    35  		height: @header-height;
    36  		box-sizing: border-box;
    37  		padding: 0 16px;
    38  		align-items: center;
    39  		font-size: 16px;
    40  		border-bottom: 1px solid var(--border);
    41  		background-color: var(--archiveHeaderBg);
    42  
    43  		* {
    44  			border-width: 0;
    45  			box-sizing: border-box;
    46  			font-family: "Source Sans Pro", sans-serif;
    47  			margin: 0;
    48  			padding: 0;
    49  		}
    50  
    51  		> *:not(:last-child) {
    52  			margin-right: 8px;
    53  		}
    54  
    55  		> .spacer {
    56  			flex: 1;
    57  		}
    58  
    59  		#shiori-logo {
    60  			font-size: 2em;
    61  			font-weight: 100;
    62  			color: var(--main);
    63  
    64  			span {
    65  				margin-right: 8px;
    66  			}
    67  		}
    68  
    69  		a {
    70  			display: block;
    71  			color: var(--colorLink);
    72  			text-decoration: underline;
    73  
    74  			&:hover,
    75  			&:focus {
    76  				color: var(--main);
    77  			}
    78  		}
    79  
    80  		@media (max-width: @screen-sm-max) {
    81  			font-size: 14px;
    82  			height: @screen-sm-header-height;
    83  
    84  			#shiori-logo {
    85  				font-size: 1.5em;
    86  			}
    87  		}
    88  	}
    89  
    90  	iframe {
    91  		width: 100%;
    92  		height: 100%;
    93  	}
    94  }