BBM-Repeater-1.35

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
          
    <style>
        ::-webkit-scrollbar {
			width: 1px; 
		}
		
		body {
			margin: auto;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 98vw;
			height: 100vh;
			background-color: lightgrey;
			overflow: hidden;
    }

    .divMainContainer {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 98vw;
			height: 90vh;	  
			background-color: grey;
			margin: auto;
			border-radius: 3%;
			border: 1px solid white;
			padding: 2% 0px 2% 0px;		
			overflow-y: scroll;			
		}     
		
		.containerItem {
			width: 88vw;         
			min-height: 50px;
			max-height: 150px;
			margin: auto; 
			margin-top: 3px;		  
			padding: 20px;
			border: 2px solid #ccc;
			border-radius: 20px;
			position: relative;
			background: rgba(175, 165, 145, 0.5);
			transition: background-color 0.5s, color 0.8s;          
			display: flex;
			align-items: center;
			background: orange;			
        }
		
		/* --------------------[ CSS-STRING-CONTAINER ]----------------------- */
		
		.containerString {
		  display: flex;
		  flex-direction: column; 
		  width: 20vw;			
		  min-height: 100px;
		  max-height: 120px;
		  padding: 0.5%;
		  margin: 0.5%;
		  color: white;
		  background: rgba(50, 100, 255, 0.3);
		  border-radius: 1%;
		  transition: transform 0.7s ease;	
		  overflow: auto !important;
			
		}
		.containerString:hover {
				overflow: hidden;
			cursor: pointer; 
			border: 1px dashed white !important;
			background: rgba(50, 100, 255, 0.5) !important;
			/*background: green !important;*/
			.divKey{background: rgba(10, 50, 250, 0.5)!important; color: white !important;}
			.divValue{background: rgba(255, 255, 255, 1)!important;	color: black !important;}
		}
		
		/* --------------------[ CSS-NUMBER-CONTAINER ]-----------------------...