andyburke/autonomous.contact
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
autonomous.contact/public/icons.css

1330 lines
21 KiB
CSS
Raw Permalink Normal View History

fix: styling improvements
2026-03-03 20:32:45 -08:00
/* ICONS */
.icon {
width: 24px;
height: 24px;
transform: scale(var(--icon-scale, 1));
stroke: white;
fill: transparent;
stroke-width: 1pt;
stroke-miterlimit: 10;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 400;
margin: 0 auto;
}
/* ICON - ADD (with box) */
.icon.add {
box-sizing: border-box;
position: relative;
display: block;
width: 22px;
height: 22px;
border: 2px solid;
transform: scale(var(--icon-scale, 1));
border-radius: 4px;
}
.icon.add::after,
.icon.add::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 10px;
height: 2px;
background: currentColor;
border-radius: 5px;
top: 8px;
left: 4px;
}
.icon.add::after {
width: 2px;
height: 10px;
top: 4px;
left: 8px;
}
/* ICON - ATTACHMENT */
.icon.attachment {
box-sizing: border-box;
position: relative;
display: block;
width: 14px;
height: 14px;
border: 2px solid;
border-top: 0;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
transform: scale(var(--icon-scale, 1));
margin-top: 11px;
}
.icon.attachment::after,
.icon.attachment::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
border-radius: 3px;
border: 2px solid;
}
.icon.attachment::after {
border-bottom: 0;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
right: -2px;
width: 10px;
height: 14px;
bottom: 8px;
}
.icon.attachment::before {
width: 6px;
height: 12px;
border-top: 0;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
left: 2px;
bottom: 4px;
}
/* ICON - BLURB */
.icon.blurb {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
border: 2px solid;
border-radius: 3px;
width: 22px;
height: 16px;
}
.icon.blurb::after,
.icon.blurb::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
height: 2px;
border-radius: 3px;
background: currentColor;
bottom: 2px;
}
.icon.blurb::before {
width: 10px;
left: 2px;
box-shadow: 4px -4px 0;
}
.icon.blurb::after {
width: 3px;
right: 2px;
box-shadow: -11px -4px 0;
}
/* ICON - CALENDAR */
.icon.calendar,
.icon.calendar::before {
display: block;
box-sizing: border-box;
}
.icon.calendar {
position: relative;
transform: scale(var(--icon-scale, 1));
width: 18px;
height: 18px;
border: 2px solid;
border-top: 4px solid;
border-radius: 3px;
}
.icon.calendar::before {
content: "";
position: absolute;
width: 10px;
border-radius: 3px;
left: 2px;
background: currentColor;
height: 2px;
top: 2px;
}
/* ICON - CAMERA */
.icon.camera {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
border: 2px solid;
border-radius: 3px;
width: 18px;
height: 12px;
perspective: 24px;
}
.icon.camera::after,
.icon.camera::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
}
.icon.camera::before {
border: 2px solid;
border-left-color: transparent;
transform: rotateY(-70deg);
width: 8px;
height: 8px;
right: -7px;
top: 0;
}
.icon.camera::after {
width: 10px;
height: 5px;
border-top: 2px solid;
border-right: 2px solid;
top: -5px;
right: 2px;
border-top-right-radius: 2px;
}
/* ICON - CHAT */
.icon.chat {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 14px;
height: 10px;
}
.icon.chat::after,
.icon.chat::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
border-radius: 3px;
height: 2px;
background: currentColor;
}
.icon.chat::before {
width: 10px;
opacity: 0.5;
box-shadow: 0 4px 0;
}
.icon.chat::after {
width: 14px;
bottom: 0;
}
/* ICON - CIRCLE */
.icon.circle {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 19px;
height: 19px;
border: 2px solid;
border-radius: 100px;
}
/* ICON - CLOSE */
.icon.close {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 22px;
height: 22px;
border: 2px solid;
border-radius: var(--border-radius);
}
.icon.close::after,
.icon.close::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 12px;
height: 2px;
background: currentColor;
transform: rotate(45deg);
border-radius: var(--border-radius);
top: 8px;
left: 3px;
}
.icon.close::after {
transform: rotate(-45deg);
}
/* ICON - CONTROLLER */
.icon.controller {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 8px;
height: 8px;
border: 2px solid;
border-radius: 100px;
}
.icon.controller::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 14px;
height: 14px;
box-shadow:
-6px -6px 0 -4px,
6px 6px 0 -4px,
6px -6px 0 -4px,
-6px 6px 0 -4px;
left: -5px;
top: -5px;
transform: rotate(45deg);
}
/* ICON - DOWNLOAD */
.icon.download {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 16px;
height: 6px;
border: 2px solid;
border-top: 0;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
margin-top: 8px;
}
.icon.download::after {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 8px;
height: 8px;
border-left: 2px solid;
border-bottom: 2px solid;
transform: rotate(-45deg);
left: 2px;
bottom: 4px;
}
.icon.download::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
border-radius: 3px;
width: 2px;
height: 10px;
background: currentColor;
left: 5px;
bottom: 5px;
}
/* ICON - ESSAY */
.icon.essay {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 22px;
height: 18px;
border: 2px solid;
border-radius: 3px;
box-shadow: 0 -1px 0;
}
.icon.essay::after,
.icon.essay::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 6px;
top: 2px;
}
.icon.essay::before {
background: currentColor;
left: 2px;
box-shadow:
0 4px 0,
0 8px 0;
border-radius: 3px;
height: 2px;
}
.icon.essay::after {
height: 10px;
border: 2px solid;
right: 2px;
border-radius: 1px;
}
/* ICON - EXCHANGE */
.icon.exchange,
.icon.exchange::after,
.icon.exchange::before {
display: block;
box-sizing: border-box;
width: 8px;
height: 8px;
}
.icon.exchange {
position: relative;
transform: scale(var(--icon-scale, 1));
box-shadow:
-3px 3px 0 -1px,
3px -3px 0 -1px;
}
.icon.exchange::after,
.icon.exchange::before {
content: "";
position: absolute;
border: 2px solid;
}
.icon.exchange::before {
top: -5px;
left: -5px;
}
.icon.exchange::after {
bottom: -5px;
right: -5px;
}
/* ICON - FORUM */
.icon.forum {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 16px;
height: 14px;
border-bottom: 2px solid;
}
.icon.forum::after,
.icon.forum::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
top: 2px;
}
.icon.forum::before {
border-left: 4px solid;
left: 1px;
width: 0;
height: 0;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
}
.icon.forum::after {
width: 8px;
height: 6px;
border-top: 2px solid;
border-bottom: 2px solid;
right: 0;
}
/* ICON - FORWARD */
.icon.forward-copy {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 16px;
height: 16px;
box-shadow: 6px -6px 0 -4px;
}
.icon.forward-copy::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 8px;
height: 8px;
border: 2px solid;
border-radius: 1px;
left: 0;
bottom: 0;
}
.icon.forward-copy::after {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
background: currentColor;
width: 2px;
height: 10px;
transform: rotate(45deg);
bottom: 8px;
right: 2px;
border-radius: 4px;
}
/* ICON - HOME */
.icon.home {
background:
linear-gradient(to left, currentColor 5px, transparent 0) no-repeat 0 bottom/4px 2px,
linear-gradient(to left, currentColor 5px, transparent 0) no-repeat right bottom/4px 2px;
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 18px;
height: 14px;
border: 2px solid;
border-top: 0;
border-bottom: 0;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
margin-bottom: -2px;
}
.icon.home::after,
.icon.home::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
}
.icon.home::before {
border-top: 2px solid;
border-left: 2px solid;
border-top-left-radius: 4px;
transform: rotate(45deg);
top: -5px;
border-radius: 3px;
width: 14px;
height: 14px;
left: 0;
}
.icon.home::after {
width: 8px;
height: 10px;
border: 2px solid;
border-radius: 100px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom: 0;
left: 3px;
bottom: 0;
}
/* ICON - LIVE */
.icon.live {
transform: scale(var(--icon-scale, 1));
}
.icon.live,
.icon.live::after,
.icon.live::before {
box-sizing: border-box;
position: relative;
display: block;
width: 14px;
height: 14px;
border: 2px solid;
border-bottom-color: transparent;
border-radius: 50%;
}
.icon.live::after,
.icon.live::before {
content: "";
position: absolute;
width: 6px;
height: 6px;
top: 2px;
left: 2px;
}
.icon.live::after {
width: 22px;
height: 22px;
top: -6px;
left: -6px;
}
refactor: require password verification chore: styling work
2026-03-09 14:57:11 -07:00
/* ICON - MIC */
.icon.mic {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 16px;
height: 12px;
border-bottom-left-radius: 120px;
border-bottom-right-radius: 120px;
border: 2px solid;
border-top: 0;
margin-top: 3px;
}
.icon.mic::after,
.icon.mic::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
}
.icon.mic::after {
border: 2px solid;
width: 8px;
height: 18px;
left: 2px;
top: -10px;
border-radius: 4px;
}
.icon.mic::before {
width: 10px;
height: 4px;
top: 12px;
left: 1px;
border-right: 4px solid transparent;
box-shadow:
0 2px 0,
inset -2px 0 0;
}
fix: styling improvements
2026-03-03 20:32:45 -08:00
/* ICON - MINUS */
.icon.minus {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 16px;
height: 2px;
background: currentColor;
border-radius: 10px;
}
/* ICON - MORE */
.icon.more {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 24px;
height: 20px;
border: 2px solid;
border-radius: 3px;
}
.icon.more::before {
content: "";
position: absolute;
box-sizing: border-box;
display: block;
width: 4px;
height: 4px;
background-color: currentColor;
border-radius: 20px;
top: 6px;
left: 8px;
box-shadow:
-5px 0 0,
5px 0 0;
}
/* ICON - MOREBORDERLESS */
.icon.more-borderless {
transform: scale(var(--icon-scale, 1));
}
.icon.more-borderless,
.icon.more-borderless::after,
.icon.more-borderless::before {
box-sizing: border-box;
position: relative;
display: block;
width: 4px;
height: 4px;
background: currentColor;
border-radius: 100%;
}
.icon.more-borderless::after,
.icon.more-borderless::before {
content: "";
position: absolute;
top: 0;
}
.icon.more-borderless::after {
left: -6px;
}
.icon.more-borderless::before {
right: -6px;
}
/* ICON - MORECIRCLE */
.icon.more-circle {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 24px;
height: 24px;
border: 2px solid;
border-radius: 24px;
}
.icon.more-circle::before {
content: "";
position: absolute;
box-sizing: border-box;
display: block;
width: 4px;
height: 4px;
background-color: currentColor;
border-radius: 20px;
top: 8px;
left: 8px;
box-shadow:
-5px 0 0,
5px 0 0;
}
/* ICON - PHONE */
.icon.phone {
box-sizing: border-box;
position: relative;
display: block;
width: 22px;
height: 22px;
transform: scale(var(--icon-scale, 1));
}
.icon.phone::after,
.icon.phone::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
}
.icon.phone::after {
width: 18px;
height: 18px;
border-top-left-radius: 1px;
border-bottom-right-radius: 1px;
border-bottom-left-radius: 12px;
border-left: 4px solid;
border-bottom: 4px solid;
left: 2px;
bottom: 2px;
background:
linear-gradient(to left, currentColor 10px, transparent 0) no-repeat right 11px/6px 4px,
linear-gradient(to left, currentColor 10px, transparent 0) no-repeat -1px 0/4px 6px;
}
.icon.phone::before {
width: 20px;
height: 20px;
border: 6px double;
border-top-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
border-radius: 50%;
transform: rotate(-45deg);
bottom: 2px;
left: 2px;
}
/* ICON - PLUS */
.icon.plus,
.icon.plus::after,
.icon.plus::before {
display: block;
box-sizing: border-box;
}
.icon.plus::after,
.icon.plus::before {
border-radius: 10px;
background: currentColor;
}
.icon.plus {
position: relative;
transform: scale(var(--icon-scale, 1));
width: 16px;
height: 16px;
}
.icon.plus::after {
content: "";
position: absolute;
width: 2px;
height: 16px;
top: 0;
left: 7px;
}
.icon.plus::before {
content: "";
position: absolute;
width: 16px;
height: 2px;
top: 7px;
left: 0;
}
/* ICON - REPLY */
.icon.reply {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 16px;
height: 16px;
box-shadow: -6px -6px 0 -4px;
}
.icon.reply::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 8px;
height: 8px;
border: 2px solid;
border-radius: 1px;
right: 0;
bottom: 0;
}
.icon.reply::after {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
background: currentColor;
width: 2px;
height: 10px;
transform: rotate(-45deg);
bottom: 8px;
left: 2px;
border-radius: 4px;
}
/* ICON - RESOURCES */
.icon.resources,
.icon.resources::after {
display: block;
box-sizing: border-box;
border-radius: 22px;
}
.icon.resources {
position: relative;
transform: scale(var(--icon-scale, 1));
width: 20px;
height: 20px;
border: 2px solid transparent;
}
.icon.resources::after {
content: "";
position: absolute;
width: 4px;
height: 4px;
background: currentColor;
top: 6px;
left: 6px;
box-shadow:
0 7px 0 1px,
0 -7px 0 1px,
-7px 0 0 1px,
7px 0 0 1px;
}
/* ICON - SEND */
.icon.send {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 22px;
height: 22px;
border: 2px solid;
border-radius: 4px;
}
.icon.send::after,
.icon.send::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 2px;
height: 8px;
border-right: 2px solid;
top: 5px;
right: 5px;
}
.icon.send::after {
width: 6px;
height: 6px;
border-bottom: 2px solid;
transform: rotate(-45deg);
right: 9px;
top: 6px;
}
/* ICON - TALK */
.icon.talk {
transform: scale(var(--icon-scale, 1));
}
.icon.talk,
.icon.talk::after {
box-sizing: border-box;
position: relative;
display: block;
width: 20px;
height: 20px;
border-radius: 100px;
border: 2px dotted currentColor;
}
.icon.talk::after {
content: "";
position: absolute;
width: 8px;
height: 8px;
border: 1px solid transparent;
top: 4px;
left: 4px;
box-shadow:
0 0 0 2px,
inset 0 0 0 2px currentColor;
}
/* ICON - TRASH */
.icon.trash {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 10px;
height: 12px;
border: 2px solid transparent;
box-shadow:
0 0 0 2px,
inset -2px 0 0,
inset 2px 0 0;
border-bottom-left-radius: 1px;
border-bottom-right-radius: 1px;
margin-top: 4px;
}
.icon.trash::after,
.icon.trash::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
}
.icon.trash::after {
background: currentColor;
border-radius: 3px;
width: 16px;
height: 2px;
top: -4px;
left: -5px;
}
.icon.trash::before {
width: 10px;
height: 4px;
border: 2px solid;
border-bottom: transparent;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
top: -7px;
left: -2px;
}
/* ICON - USER */
.icon.user,
.icon.user::after,
.icon.user::before {
display: block;
box-sizing: border-box;
border: 2px solid;
border-radius: 100px;
}
.icon.user {
overflow: hidden;
transform: scale(var(--icon-scale, 1));
width: 22px;
height: 22px;
position: relative;
}
.icon.user::after,
.icon.user::before {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 8px;
height: 8px;
}
.icon.user::after {
border-radius: 200px;
top: 11px;
left: 0px;
width: 18px;
height: 18px;
}
/* ICON - WORK */
.icon.work {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 20px;
height: 20px;
border: 2px solid;
border-radius: 22px;
}
.icon.work::after,
.icon.work::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
}
.icon.work::before {
width: 12px;
height: 6px;
border: 2px solid;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
top: 2px;
left: 2px;
border-bottom: 0;
}
.icon.work::after {
width: 18px;
height: 2px;
background: currentColor;
left: -1px;
top: 8px;
}
/* ICONS - RIGHT/LEFT */
.icon.right {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 22px;
height: 22px;
}
.icon.right::after,
.icon.right::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 8px;
height: 8px;
border-right: 2px solid;
border-top: 2px solid;
transform: rotate(45deg);
top: 7px;
right: 6px;
}
.icon.right::after {
right: 11px;
}
.icon.left {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 22px;
height: 22px;
}
.icon.left::after,
.icon.left::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 8px;
height: 8px;
border-left: 2px solid;
border-bottom: 2px solid;
transform: rotate(45deg);
top: 7px;
left: 6px;
}
.icon.left::after {
left: 11px;
}
.icon.map-pin {
box-sizing: border-box;
position: relative;
display: block;
transform: rotate(45deg) scale(var(--icon-scale, 1));
width: 18px;
height: 18px;
border-radius: 100% 100% 0 100%;
border: 2px solid;
margin-top: -4px;
}
.icon.map-pin::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 8px;
height: 8px;
border: 2px solid;
top: 3px;
left: 3px;
border-radius: 40px;
}
/* AUDIO PLAYER ICONS */
.icon.skip-back {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 22px;
height: 22px;
border: 2px solid;
border-radius: 4px;
}
.icon.skip-back::after,
.icon.skip-back::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
height: 8px;
top: 5px;
}
.icon.skip-back::before {
width: 2px;
border-radius: 2px;
right: 11px;
background: currentColor;
}
.icon.skip-back::after {
width: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-right: 5px solid;
right: 5px;
}
.icon.rewind {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
border: 2px solid;
border-radius: 4px;
width: 22px;
height: 22px;
}
.icon.rewind::after,
.icon.rewind::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 6px;
height: 6px;
border-left: 2px solid;
border-bottom: 2px solid;
transform: rotate(45deg);
top: 6px;
left: 5px;
}
.icon.rewind::after {
left: 9px;
}
.icon.play {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 22px;
height: 22px;
border: 2px solid;
border-radius: 4px;
}
.icon.play::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 0;
height: 10px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 6px solid;
top: 4px;
left: 7px;
}
.icon.pause {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 22px;
height: 22px;
border: 2px solid;
border-radius: 4px;
}
.icon.pause::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 6px;
height: 6px;
left: 6px;
top: 6px;
border-left: 2px solid;
border-right: 2px solid;
}
.icon.fastforward {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
border: 2px solid;
border-radius: 4px;
width: 22px;
height: 22px;
}
.icon.fastforward::after,
.icon.fastforward::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 6px;
height: 6px;
border-right: 2px solid;
border-top: 2px solid;
transform: rotate(45deg);
top: 6px;
right: 5px;
}
.icon.fastforward::after {
right: 9px;
}
.icon.skip-forward {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 22px;
height: 22px;
border: 2px solid;
border-radius: 4px;
}
.icon.skip-forward::after,
.icon.skip-forward::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
height: 8px;
top: 5px;
}
.icon.skip-forward::before {
width: 2px;
border-radius: 2px;
left: 11px;
background: currentColor;
}
.icon.skip-forward::after {
width: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 5px solid;
left: 5px;
}
Reference in a new issue Copy permalink