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

     1  :root {
     2  	--dialogHeaderBg: #292929;
     3  	--colorDialogHeader: #fff;
     4  }
     5  
     6  .custom-dialog-overlay {
     7  	display: flex;
     8  	flex-flow: column nowrap;
     9  	align-items: center;
    10  	justify-content: center;
    11  	min-width: 0;
    12  	min-height: 0;
    13  	overflow: hidden;
    14  	position: fixed;
    15  	top: 0;
    16  	left: 0;
    17  	width: 100%;
    18  	width: 100dvw;
    19  	height: 100%;
    20  	height: 100dvh;
    21  	z-index: 10001;
    22  	background-color: rgba(0, 0, 0, 0.6);
    23  	padding: 32px;
    24  
    25  	.custom-dialog {
    26  		display: flex;
    27  		flex-flow: column nowrap;
    28  		min-height: 0;
    29  		max-height: 100%;
    30  		max-width: 100%;
    31  		width: 400px;
    32  		overflow: auto;
    33  		background-color: var(--contentBg);
    34  		font-size: 16px;
    35  		resize: both;
    36  
    37  		.custom-dialog-header {
    38  			padding: 16px;
    39  			color: var(--colorDialogHeader);
    40  			background-color: var(--dialogHeaderBg);
    41  			font-weight: 600;
    42  			font-size: 1em;
    43  			text-transform: uppercase;
    44  			border-bottom: 1px solid var(--border);
    45  		}
    46  
    47  		.custom-dialog-body {
    48  			padding: 16px 16px 0;
    49  			display: grid;
    50  			max-height: 100%;
    51  			min-height: 80px;
    52  			min-width: 0;
    53  			overflow: auto;
    54  			font-size: 1em;
    55  			grid-template-columns: max-content 1fr;
    56  			align-content: start;
    57  			align-items: baseline;
    58  			grid-gap: 16px;
    59  			flex-grow: 1;
    60  
    61  			&::after {
    62  				content: "";
    63  				display: block;
    64  				min-height: 1px;
    65  				grid-column-end: -1;
    66  				grid-column-start: 1;
    67  			}
    68  
    69  			.custom-dialog-content {
    70  				grid-column-end: -1;
    71  				grid-column-start: 1;
    72  				color: var(--color);
    73  				align-self: baseline;
    74  			}
    75  
    76  			> label {
    77  				color: var(--color);
    78  				padding: 8px 0;
    79  				font-size: 1em;
    80  			}
    81  
    82  			> input[type="text"],
    83  			> input[type="password"],
    84  			> textarea {
    85  				color: var(--color);
    86  				padding: 8px;
    87  				font-size: 1em;
    88  				border: 1px solid var(--border);
    89  				background-color: var(--contentBg);
    90  				min-width: 0;
    91  			}
    92  
    93  			.checkbox-field {
    94  				color: var(--color);
    95  				font-size: 1em;
    96  				display: flex;
    97  				flex-flow: row nowrap;
    98  				padding: 0;
    99  				grid-column-start: 1;
   100  				grid-column-end: -1;
   101  				cursor: pointer;
   102  
   103  				&:hover,
   104  				&:focus {
   105  					text-decoration: underline;
   106  					text-decoration-color: var(--main);
   107  				}
   108  
   109  				> input[type="checkbox"] {
   110  					margin-right: 8px;
   111  				}
   112  			}
   113  
   114  			> textarea {
   115  				height: 6em;
   116  				min-height: 37px;
   117  				resize: vertical;
   118  			}
   119  
   120  			> .suggestion {
   121  				position: absolute;
   122  				display: block;
   123  				padding: 8px;
   124  				background-color: var(--contentBg);
   125  				border: 1px solid var(--border);
   126  				color: var(--color);
   127  				font-size: 0.9em;
   128  			}
   129  		}
   130  
   131  		.custom-dialog-footer {
   132  			padding: 16px;
   133  			display: flex;
   134  			flex-flow: row wrap;
   135  			justify-content: flex-end;
   136  			border-top: 1px solid var(--border);
   137  
   138  			> a {
   139  				padding: 0 8px;
   140  				font-size: 0.9em;
   141  				font-weight: 600;
   142  				color: var(--color);
   143  				text-transform: uppercase;
   144  
   145  				&:hover,
   146  				&:focus {
   147  					outline: none;
   148  					color: var(--main);
   149  				}
   150  			}
   151  
   152  			> i.fa-spinner.fa-spin {
   153  				width: 19px;
   154  				line-height: 19px;
   155  				text-align: center;
   156  				color: var(--color);
   157  			}
   158  		}
   159  	}
   160  }
   161  
   162  @media only screen and (max-width: 768px) {
   163  	.custom-dialog-overlay {
   164  		padding: 0px;
   165  	}
   166  
   167  	.custom-dialog {
   168  		width: 100% !important;
   169  		height: 100% !important;
   170  		resize: none !important;
   171  	}
   172  }