storj.io/minio@v0.0.0-20230509071714-0cbc90f649b1/browser/app/less/inc/misc.less (about)

     1  /*--------------------------
     2      Close
     3  ----------------------------*/
     4  .close-variant(@color, @bg-color, @color-hover, @bg-color-hover) {
     5  	span {
     6  		background-color: @bg-color;
     7  		color: @color;
     8  	}
     9  
    10  	&:hover,
    11  	&:focus {
    12  		span {
    13  			background-color: @bg-color-hover;
    14  			color: @color-hover;
    15  		}
    16  	}
    17  }
    18  
    19  .close {
    20  	right: 15px;
    21  	font-weight: normal;
    22  	opacity: 1;
    23  	font-size: 18px;
    24  	position: absolute;
    25  	text-align: center;
    26  	top: 16px;
    27  	z-index: 1;
    28  	padding: 0;
    29  	border: 0;
    30  	background-color: transparent;
    31  
    32  	span {
    33  		width: 25px;
    34  		height: 25px;
    35  		display: block;
    36  		border-radius: 50%;
    37  		line-height: 24px;
    38  		text-shadow: none;
    39  	}
    40  	
    41  	&:not(.close-alt) {
    42  		.close-variant(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1), @white, rgba(255, 255, 255, 0.2));
    43  	}
    44  }
    45  
    46  .close-alt {
    47  	.close-variant(#989898, #efefef, #7b7b7b, #e8e8e8);
    48  }
    49  
    50  
    51  /*--------------------------
    52      Hidden
    53  ----------------------------*/
    54  .hidden {
    55  	display: none !important;
    56  }
    57  
    58  
    59  /*--------------------------
    60      Copy text
    61  ----------------------------*/
    62  .copy-text {
    63  	input {
    64  		width: 100%;
    65  		border-radius: 1px;
    66  		border: 1px solid @input-border;
    67  		padding: 7px 12px;
    68  		font-size: 13px;
    69  		line-height: 100%;
    70  		cursor: text;
    71  		.transition(border-color);
    72  		.transition-duration(300ms);
    73  		
    74  		&:hover {
    75  			border-color: darken(@input-border, 5%);
    76  		}
    77  	}
    78  
    79  	svg {
    80  	  display: block;
    81  		margin: 0 auto 5px;
    82  	}
    83  }
    84  
    85  /*--------------------------
    86      Sharing
    87  ----------------------------*/
    88  .share-availability {
    89  	margin-bottom: 40px;
    90  
    91  	&:before,
    92  	&:after {
    93  		position: absolute;
    94  		bottom: -30px;
    95  		font-size: 10px;
    96  	}
    97  
    98  	&:before {
    99  		content: '01 Sec';
   100  		left: 0;
   101  	}
   102  
   103  	&:after {
   104  		content: '7 days';
   105  		right: 0;
   106  	}
   107  }
   108  
   109  
   110  .modal-aheader {
   111  	height: 100px;
   112  
   113  	&:before {
   114  		height: 0 !important;
   115  	}
   116  
   117  	.modal-dialog {
   118  		margin: 0;
   119  		vertical-align: top;
   120  	}
   121  }
   122  
   123  .loading {
   124    position: absolute;
   125    margin: auto;
   126    left: 0;
   127    right: 0;
   128    top: 0;
   129    bottom: 0;
   130    border-top: 1px solid @loading-track-bg;
   131    border-right: 1px solid @loading-track-bg;
   132    border-bottom: 1px solid @loading-track-bg;
   133    border-left: 1px solid @loading-point-bg;
   134    transform: translateZ(0);
   135    animation: loading 1.1s infinite linear;
   136    border-radius: 50%;
   137  	width: 35px;
   138  	height: 35px;
   139  	margin-top: 30px;
   140  }
   141  
   142  @-webkit-keyframes loading {
   143    0% {
   144      transform: rotate(0deg);
   145    }
   146    100% {
   147      transform: rotate(360deg);
   148    }
   149  }
   150  
   151  @keyframes loading {
   152    0% {
   153      transform: rotate(0deg);
   154    }
   155    100% {
   156      transform: rotate(360deg);
   157    }
   158  }