ব্যবহারকারী:মোহাম্মদ মারুফ/twinkleLite.css

 /**
 * Styles for the Twinkle Box component.
 *
 * The Twinkle Box is a fixed, centered container with a grid layout.
 * It has a title section, a tag section, and a button section.
 *
 *
 * @author মোহাম্মদ মারুফ
 * @version 1.0
 */
 #twinkleBox {
     display: grid;
     grid-template-columns: 1fr 1fr;
     width: min(85%, 800px);
     background: #a5bfd9;
     position: fixed;
     z-index: 10;
     transform: translate(-50%, -50%);
     top: 50%;
     left: 50%;
     color: #333;
     border-radius: 5px
 }

 .mw-ui-icon-portletlink-twinkle {
     background: url(https://upload.wikimedia.org/wikipedia/commons/6/67/Patrol2.svg);
     background-repeat: no-repeat;
     background-position:center;
 }

 .oo-ui-buttonElement-button {
     padding: 5px;
     font-weight: 600;
 }

 #twinkleBox>* {
     padding: 5px
 }

 #twinkleBox div.tw-bdbox {
     border: solid 2px #ffffff;
     opacity: .5
 }

 #twinkleBox div.active {
     opacity: 1;
     background: #70adeb
 }

 #twinkleBox .tw-title {
     grid-column: 1 / 3;
     display: flex;
     align-items: center;
     justify-content: space-between;
     font-weight: 700;
     color: #321900
 }

 #twinkleBox h4 {
     width: 100%;
     text-align: center
 }

 #twinkleBox #tag,
 #twinkleBox .subbtncnt {
     grid-column: 1 / 3
 }

 #twinkleBox .subbtncnt {
     display: flex;
     align-items: center;
     justify-content: end
 }

 #twinkleBox #tag ul {
     display: grid;
     grid-template-columns: 1fr 1fr
 }

 input.otherinp.hide {
     width: 70%;
     height: 0;
     border: none;
     padding: 0;
     margin-left: 20%
 }

 input.otherinp {
     width: 80%;
     height: 20px;
     border: inherit;
     transition: .5s;
     margin-left: 10%
 }

 #twinkleBox ul li {
     list-style: none
 }