code

<ul class="history">
    <li>
        <span> DOCUMENT </span>
        <p> Dated on : 27-02-2024 01:07 PM </p>
    </li>                              
</ul>
  • DOCUMENT Dated on : 27-02-2024 01:07 PM
  • DOCUMENT Dated on : 27-02-2024 01:07 PM

:root {
–menuWidth : 0;
–font-1 : ‘PT Sans’, sans-serif;
–c1 : #CF382B;
–c2 : #208C3F;
–c3 : #2D70C3;
–c4 : #FF7F55;

--bgColor : #fff;
--bgColor2 : #e7f0f6;
// --bgColor3 : #e7e7e7;
--bgColor3 : #ebebeb;
--darkColor : #1C1D24;

--textColor : #333;
--inverseBg : #222;
--hoverColor : #000;
--liteColor : #f5f5f5;
--borderColor : #cfcbcb;
// --borderColor2 : #e5e5e5;
--borderColor2 : #cfcbcb;
--highlightColor : #222;
--labelColor : #333;
--whiteColor : #fff;
--spl : #ddd;
--hlTd : #defade;
--bshadow1 : 0 4px 10px rgba(0, 0, 0, 0.2);

--btnWidth : auto;
--addBg : #2b997b;
--viewBg : #057de7;
// --editBg : #e2984b;
--editBg : #e98100;
--deleteBg : #df2626;
--errorColor : #df2626;
--onDutyBg : #9b3090;
--leaveBg : orange;
--gradient1 : linear-gradient(#5A3B5B,#694164, #814F6C, #AC6279);
--inputBorderColor : #979494;

}

ul.history {
margin-left: 10px;
padding-top: 0;
border-left: 1px solid var(–textColor);
}
ul.history li {
position: relative;
font-size: 14px;
padding-left: 25px;
margin-bottom: 15px;
}
ul.history li span {
display: block;
font-weight: bold;
margin-bottom: 0;
}
ul.history li p {
margin-bottom: 0;
}
ul.history li::before {
content: “\f00c”;
position: absolute;
left: -11px;
top: 0;
font-family: “FontAwesome”;
background-color: var(–addBg);
border: 1px solid var(–addBg);
padding: 5px;
width: 20px;
height: 20px;
border-radius: 20px;
text-align: center;
line-height: 10px;
color: var(–whiteColor);
font-size: 10px;
}
ul.history li.active::before {
content: “\f1b9”;
background-color: var(–bgColor);
font-size: 24px;
border: none;
left: -17px;
top: 2px;
color: var(–deleteBg) !important;
}
ul.history li.active ~ li::before {
display: none;
}
ul.history li:last-child::before {
content: “\f1b9”;
background-color: var(–bgColor);
font-size: 24px;
border: none;
left: -17px;
top: 2px;
color: var(–deleteBg) !important;
}
ul.history li:last-child.active::before {
content: “\f00c”;
position: absolute;
left: -11px;
top: 0;
font-family: “FontAwesome”;
background-color: var(–addBg);
border: 1px solid var(–addBg);
font-size: 14px;
color: var(–whiteColor) !important;
}