ব্যবহারকারী:Maruf/twinkleLite.css
লক্ষ্য করুন: প্রকাশ করার পর, পরিবর্তনগুলো দেখতে আপনাকে আপনার ব্রাউজারের ক্যাশে পরিষ্কার করার প্রয়োজন হতে পারে।
- ফায়ারফক্স / সাফারি: পুনরায় লোড-এ ক্লিক করার সময় শিফট টিপে ধরে রাখুন, অথবা হয় Ctrl-F5 বা Ctrl-R টিপুন (ম্যাকে ⌘-R টিপুন)
- গুগল ক্রোম: Ctrl-Shift-R (ম্যাকে ⌘-Shift-R) টিপুন
- এজ: Ctrl ধরে রাখা অবস্থায় Refresh-এ ক্লিক করুন, অথবা Ctrl-F5 টিপুন।
- অপেরা: Ctrl-F5 টিপুন।
/**
* 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
}