2021-01-23, 06:44 PM
DVZ Shoutbox CSS Grid
DVZ Shoutbox on Responsive Screen
just replace CSS with your existing Shoutbox Style css
BR
Mujeeb
DVZ Shoutbox on Responsive Screen
just replace CSS with your existing Shoutbox Style css
/* DVZ Shoutbox */
#shoutbox { margin-bottom: 10px; border: solid 2px rgba(0,0,0,0.1); }
#shoutbox .head { padding: 8px; }
#shoutbox.front .head { cursor: pointer; }
#shoutbox .head .right { float: right; margin: 0; font-size: 13px; }
#shoutbox.collapsed .head { opacity: 0.6; }
#shoutbox.collapsed .body { display: none; }
#shoutbox .panel { border-top: solid 2px rgba(0,0,0,0.1); }
#shoutbox input.text { margin: 0; padding: 10px 8px; width: 100%; box-sizing: border-box; border: none; box-shadow: inset 0 2px 4px rgba(0,0,0,0.08); font-family: Arial, sans-serif; font-size: 12px; color: #000;}
#shoutbox .minposts, #shoutbox .blocked { padding: 6px; font-size: 11px; }
#shoutbox .panel.minposts { background: #FFFED8; color: #727250; }
#shoutbox .panel.blocked { background: #FCEFEF; color: #543A3A; }
#shoutbox .panel p { margin: 0; }
#shoutbox .window { border-top: solid 2px rgba(0,0,0,0.1); overflow-y: scroll; }
#shoutbox .data {display: table;width: 100%;border-top: solid 2px rgba(0,0,0,0.1);font-family: Arial, sans-serif;font-size: 12px;}
#shoutbox.front .data { border-top: none; }
#shoutbox .entry {display: grid;grid-template-columns: 25px minmax(100px,130px) auto 140px ;grid-template-rows: minmax(35px,auto);grid-template-areas:
"eavt eusr etxt einfo ";align-items:center;transition: background-color 0.2s;}
#shoutbox .entry:nth-child(even) { background-color: rgba(0,0,0,0.01); }
#shoutbox .entry.new { background-color: rgba(255,255,100,0.1); }
#shoutbox .entry > div {border-bottom: dashed 1px rgba(0,0,0,0.05);overflow: hidden;line-break: auto;}
#shoutbox .entry:last-child > div { border-bottom: none; }
#shoutbox .entry > div {padding: 4px;}
#shoutbox .avatar img {margin: 0 auto;vertical-align: middle;max-height: 20px;max-width: 20px;border: solid 1px rgba(255,255,255,0.1);box-shadow: 0 0 2px rgba(0,0,0,0.1);cursor: pointer;}
#shoutbox .avatar {grid-area:eavt}
#shoutbox .user {border-right: solid 1px rgba(0,0,0,0.05);text-align: right;white-space: nowrap;grid-area: eusr;}
#shoutbox .text {width: 100%;color: #555;grid-area: etxt;}
#shoutbox .info {font-size: 11px;color: #AAA;white-space: nowrap;text-align: right;grid-area: einfo;}
#shoutbox .mod { padding: 6px 8px; font-size: 9px; font-weight: bold; color: #AAA; text-decoration: none; }
#shoutbox .mod:nth-of-type(2) { margin-right: 5px; border-left: solid 1px rgba(0,0,0,0.1); }
#shoutbox .ip { margin-right: 10px; color: #CECECE; }
@media only screen and (max-width: 600px) {
#shoutbox .window { height:250px!important; }
#shoutbox .entry {display: grid;grid-template-columns:30px auto 20% 20% ;grid-template-rows: 18px;
border: 1px solid #dedede;align-items:center;width:90%;background-color: #f1f1f1; border-radius: 10px;
padding-bottom:5px; padding-left:3px; margin: 2px 0; grid-template-areas: "eusr eusr einfo einfo" "eavt etxt etxt etxt";}
#shoutbox .entry > div {padding: 0px; border-bottom:none;}
#shoutbox .entry:nth-child(even) { float:right; margin-right:3px;border-bottom-right-radius:0px!important;}
#shoutbox .entry:nth-child(odd) { float:left; margin-left:3px;border-bottom-left-radius:0px!important; }
#shoutbox .text {width:99%;}
#shoutbox .user {text-align:left;}
#shoutbox .info {padding-right:3px!important;}
#shoutbox .avatar img {border-radius:10px;}
}
BR
Mujeeb