Custom Scroll

blue edition

by Dumine Stefan Daniel

HTML

<br><br><br><br><pre id="txtlog" style='height: 100px;' class="custom-scroll v_scroll">[16:35:40 - 10/1/2020] uSON 7.0 MOBILIS status changed by System from '<span class="status inactive">Inactive</span>' to '<span class="status active">Active</span>'
[16:00:53 - 10/1/2020] uSON 7.0 MOBILIS status changed by System from '<span class="status active">Active</span>' to '<span class="status inactive">Inactive</span>'
[15:36:57 - 10/1/2020] PM 8.1 AVEA status changed by System from '<span class="status inactive">Inactive</span>' to '<span class="status active">Active</span>'
[15:21:24 - 10/1/2020] uSON 6.0.1 AVEA_LARGE status changed by System from '<span class="status active">Active</span>' to '<span class="status inactive">Inactive</span>'
[14:39:54 - 10/1/2020] uSON 7.0 AVEA status changed by System from '<span class="status active">Active</span>' to '<span class="status inactive">Inactive</span>'
[14:38:46 - 10/1/2020] uSON 6.0.1 AVEA_LARGE status changed by System from '<span class="status inactive">Inactive</span>' to '<span class="status active">Active</span>'
[14:38:37 - 10/1/2020] Inspection 10.0 AVEA_LARGE status changed by System from '<span class="status maintenance">Maintenance</span>' to '<span class="status active">Active</span>'
[14:36:03 - 10/1/2020] PM 8.1 AVEA_LARGE status changed by System from '<span class="status maintenance">Maintenance</span>' to '<span class="status active">Active</span>'
[14:35:56 - 10/1/2020] PM 9.0 AVEA_LARGE status changed by System from '<span class="status maintenance">Maintenance</span>' to '<span class="status active">Active</span>'
[14:34:26 - 10/1/2020] USON 7.0 AVEA status changed by <span class="status">user</span> from '<span class="status inactive">Inactive</span>' to '<span class="status active">Active</span>'
[14:13:38 - 10/1/2020] uSON 7.0 AVEA status changed by System from '<span class="status active">Active</span>' to '<span class="status inactive">Inactive</span>'




 </pre>

CSS

.custom-scroll
{
	overflow-y: scroll !important;
}


.custom-scroll::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
	background-color: #f5f5f5;
}

.custom-scroll::-webkit-scrollbar
{
	width: 8px;
	height: 8px;
	background-color: #F5F5F5;
}

.h_scroll::-webkit-scrollbar-thumb
{
	background-color: #0ae;
    background-image: -webkit-linear-gradient(left,
											  #00A3E0 0%,
											  #0ca9e4 10%,
											  #00A3E0 20%,
											  #1bafe6 30%,
											  #37b5e4 40%,
											  #52c6f1 50%,
											  #6ac9ed 51%,
											  #52c6f1 60%,
											  #37b5e4 70%,
											  #1bafe6 80%,
											  #0ca9e4 90%,
											  #00A3E0 100%);
}

.v_scroll::-webkit-scrollbar-thumb
{
	background-color: #0ae;
    background-image: -webkit-linear-gradient(top,
											  #00A3E0 0%,
											  #0ca9e4 10%,
											  #00A3E0 20%,
											  #1bafe6 30%,
											  #37b5e4 40%,
											  #52c6f1 50%,
											  #6ac9ed 51%,
											  #52c6f1 60%,
											  #37b5e4 70%,
											  #1bafe6 80%,
											  #0ca9e4 90%,
											  #00A3E0 100%);
}