|
/* ==UserStyle== |
|
@name mBotB |
|
@namespace https://battleofthebits.com |
|
@version 1.0.0 |
|
@description Mobile tweaks for BotB |
|
@author uart @ botb |
|
@license CC0 |
|
@preprocessor stylus |
|
} |
|
|
|
==/UserStyle== */ |
|
|
|
@-moz-document domain("battleofthebits.com") { |
|
|
|
@media (max-width: 960px) { |
|
|
|
/* at the risk of destroying the website, we're undoing all hardcoded widths on containers. we'll fix it later */ |
|
|
|
.grid_2, .grid_3, .grid_4, .grid_7, .grid_6, .grid_8, .grid_10, .grid_12 { |
|
width: 100% !important; |
|
margin-left: 0; margin-right: 0; |
|
box-sizing: border-box; |
|
} |
|
|
|
img { max-width: 100%; } |
|
br + img { display: block; } |
|
|
|
/* make button text smaller */ |
|
.vButt, .hButt { |
|
font-size: 12px; |
|
} |
|
|
|
/* make headers smaller */ |
|
|
|
* { word-break: break-word; } |
|
|
|
.t2, .tb2 { font-size: 16px; } |
|
.t3, .tb3 { font-size: 20px; } |
|
.t4, .tb4 { font-size: 24px; } |
|
.t5, .tb5 { font-size: 36px; } |
|
.t6, .tb6 { font-size: 48px; } |
|
|
|
.tb4 { line-height: 24px; } |
|
.tb5 { line-height: 36px; } |
|
.tb6 { line-height: 48px; } |
|
|
|
/* holy mother of all selectors what is going on here!! |
|
(spoiler alert: this selects all buttons with an icon) */ |
|
.tab.boxLink:has(.botb-icon) { |
|
display: flex; |
|
align-items: center; |
|
gap: 6px; |
|
} |
|
|
|
/* white-space: unset and height: auto fix the logo formatting type in anything that uses firki markup. |
|
* if it breaks, you know what to blame */ |
|
.logo { font-size: 36px; letter-spacing: -4px; white-space: unset; height: auto; } |
|
|
|
body { |
|
width: calc(100% - 10px); |
|
margin: 0 5px; |
|
} |
|
|
|
#footer { |
|
position: unset; |
|
margin-left: -5px; |
|
width: 100vw; |
|
min-width: auto; |
|
|
|
#footerMSG { |
|
padding: 20px; |
|
box-sizing: border-box; |
|
width: auto; |
|
max-width: 100%; |
|
display: flex; |
|
flex-wrap: wrap; |
|
flex-direction: column; |
|
|
|
> * { |
|
margin: 0 !important; width: 100% !important; flex: 0 1; |
|
font-size: 14px; |
|
} |
|
} |
|
} |
|
|
|
#pageBG { |
|
width: auto !important; |
|
max-width: 960px; |
|
box-sizing: border-box; |
|
padding-bottom: 20px; |
|
padding-left: 15px; padding-right: 15px; |
|
|
|
> .hSeperator { display: none; } |
|
> #SIDE_BOX { display: none; } |
|
> :first-child { |
|
box-sizing: border-box; |
|
/* 5px + 15px + 15px + 5px */ |
|
width: calc(100vw - 40px) !important; |
|
max-width: calc(100vw - 40px); |
|
} |
|
} |
|
|
|
#pageWrap > div:nth-child(2) { |
|
display: none; |
|
} |
|
|
|
/* header - logo, user info, links, messages */ |
|
#pageBG > div:first-child > div:first-child { |
|
display: flex; |
|
flex-direction: column; |
|
flex-wrap: wrap; |
|
width: auto; |
|
margin-bottom: 10px; |
|
|
|
#LOGO { order: 0; margin-top: -4px; } |
|
#LOGO .logo1 { top: 4px; } |
|
#LOGO .logo2 { top: 8px; } |
|
#USER_STATUS { |
|
order: 1; |
|
margin-top: 14px; |
|
width: 300px; |
|
|
|
> .inner.NoOPEN:first-child { |
|
border-top: 2px var(--color4, #000) solid; |
|
border-top-left-radius: 7px; |
|
border-top-right-radius: 7px; |
|
} |
|
|
|
.levelProgress { |
|
transform: scaleX(0.755); |
|
margin-left: -42px; |
|
} |
|
} |
|
|
|
/* Fix menu button dropdowns appearing under other buttons. |
|
* I wanted to use counters for this, but it turns out that counters cannot be used |
|
* inside of calc so this doesn't work (https://github.com/w3c/csswg-drafts/issues/1026). |
|
* Nonetheless, should the W3C ever fix this, I'm leaving the code here: */ |
|
/* |
|
.menu_butt { z-index: calc(111 + ( counter(menu-button-layers) * 2 ) + 1); } |
|
.menu_butt_content { z-index: calc(111 + ( counter(menu-button-layers) * 2) ); counter-increment: menu-button-layers; } |
|
*/ |
|
/* Instead, we have to use the "good enough" approach of abusing the preprocessor: */ |
|
for i in (0..10) { |
|
.menu_butt:nth-last-child({i}) { |
|
z-index: 111 + i; |
|
> .menu_butt_content { |
|
z-index: 111 + i; |
|
} |
|
} |
|
} |
|
|
|
> .uiWindow { |
|
order: 3; |
|
margin: 20px 0; |
|
} |
|
|
|
> .hSeperator { |
|
display: none !important; /* we use margins instead :D */ |
|
} |
|
|
|
#MENU { |
|
order: 2; |
|
margin-top: 10px; |
|
display: flex; |
|
flex-wrap: wrap; |
|
} |
|
} |
|
|
|
/* main page */ |
|
#homeMenu { |
|
display: flex; |
|
flex-direction: column; |
|
width: 100% !important; |
|
|
|
/* navbar */ |
|
|
|
> div:first-child { |
|
width: auto; |
|
margin-top: 10px; |
|
|
|
> .hSeperator { |
|
height: 10px; |
|
} |
|
|
|
/* avatar + links box */ |
|
> .inner.clearfix:first-child { |
|
--mbotb-homepage-pfp-size: 66px; |
|
|
|
position: relative; |
|
display: grid; |
|
height: auto; |
|
min-height: var(--mbotb-homepage-pfp-size, 50px); |
|
grid-template-columns: 1fr 1fr 1fr; |
|
gap: 4px; |
|
padding-left: calc(var(--mbotb-homepage-pfp-size, 50px) + 20px); |
|
|
|
> .botbrAvatar { |
|
position: absolute; |
|
left: 10px; |
|
top: calc(50% - var(--mbotb-homepage-pfp-size, 50px) / 2); |
|
width: var(--mbotb-homepage-pfp-size, 50px); |
|
height: var(--mbotb-homepage-pfp-size, 50px); |
|
box-sizing: border-box; |
|
} |
|
|
|
> .botbrAvatar img { |
|
width: var(--mbotb-homepage-pfp-size, 50px); height: var(--mbotb-homepage-pfp-size, 50px); |
|
max-width: var(--mbotb-homepage-pfp-size, 50px); |
|
max-height: var(--mbotb-homepage-pfp-size, 50px); |
|
box-sizing: border-box; |
|
} |
|
|
|
> .hMiniSeperator { |
|
display: none !important; |
|
} |
|
} |
|
|
|
/* burfdays box. nth-child(3) because hSeparator gets in the way */ |
|
> .inner.clearfix:nth-child(3) { |
|
padding-top: 4px !important; |
|
display: grid; |
|
grid-template-columns: repeat(auto-fill, calc(50% - 2px)); |
|
gap: 4px; |
|
|
|
/* lazy hack so that i don't have to absolute-position the title and can keep the grid */ |
|
.hMiniSeperator:not(:nth-child(2)) { |
|
display: none; |
|
} |
|
} |
|
} |
|
|
|
/* main content */ |
|
> div:nth-child(3) { |
|
padding-top: 10px; |
|
display: flex; |
|
flex-wrap: wrap; |
|
flex-direction: column; |
|
|
|
/* ideally we'd use a gap here, but current battles and upcoming battles are just |
|
* thrown raw into the container and not wrapped into their own div so they get |
|
* weird spaces inbetween. |
|
* for now we just hardcode the margins for some common elements */ |
|
|
|
> .tb4, > div.inner.clearfix, #botb-gear-banner-container, > .tb3, > .grid_4 { margin-top: 10px; } |
|
|
|
|
|
> .hSeperator { display: none; } |
|
> .alpha, > .omega { margin-left: 0; margin-right: 0; } |
|
|
|
iframe { |
|
width: auto; |
|
max-width: 80%; |
|
} |
|
|
|
/* Current Battles */ |
|
> a.boxLink:has(div[style^="padding-left:"]) { |
|
display: flex; |
|
flex-wrap: wrap; |
|
|
|
/* image */ |
|
.fleft:has(> img) { |
|
order: 0; |
|
left: 8px; |
|
top: 8px; |
|
height: 48px; |
|
img { width: 48px; height: 48px; } |
|
} |
|
|
|
/* entry/voting period */ |
|
> .fright { |
|
order: 2; |
|
width: 100%; |
|
flex-shrink: 0; flex-grow: 1; |
|
} |
|
|
|
/* battle title */ |
|
> div:nth-child(3) { |
|
order: 1; |
|
padding-top: 2px; |
|
padding-left: 56px !important; |
|
} |
|
} |
|
|
|
/* Entry of the Day */ |
|
.inner.clearfix:has(.fleft.tb5:first-child):has(iframe.fright) { |
|
> .fleft, > .fright { float: unset; } |
|
> .fleft > br { display: none; } |
|
> .fleft { margin-bottom: 10px; } |
|
} |
|
|
|
#botb-gear-banner, #botb-gear-banner-hover { |
|
display: block; |
|
width: auto !important; max-width: 100% !important; |
|
border-radius: 6px !important; |
|
} |
|
} |
|
} |
|
|
|
|
|
/* comments/threads */ |
|
.threadContainer { |
|
display: grid; |
|
grid-template-columns: 100%; |
|
gap: 10px; |
|
width: 100%; |
|
|
|
> .hSeperator { |
|
display: none; |
|
} |
|
} |
|
|
|
.threadContainer > .post, form > .post { |
|
> .post_id { width: 0;} |
|
width: 100%; |
|
float: unset; |
|
display: flex; |
|
|
|
/* pfp */ |
|
> .left { |
|
width: 58px; |
|
flex-shrink: 0; |
|
height: 52px; |
|
> .botbrAvatar { |
|
width: 48px; height: 48px; |
|
img { width: 48px; height: 48px; } |
|
} |
|
} |
|
|
|
/* main comment content */ |
|
> .right { |
|
flex-grow: 1; |
|
float: unset; |
|
width: 100%; |
|
|
|
.details { |
|
font-size: 11px !important; |
|
} |
|
|
|
.text { |
|
img { |
|
max-width: 100%; |
|
} |
|
} |
|
} |
|
|
|
textarea { |
|
width: calc(100% - 8px); |
|
} |
|
} |
|
|
|
|
|
/* audio player - appears e.g. on sfx pages, main popup player CSS is in the "Player" section */ |
|
.audioPlayer { |
|
width: 300px; |
|
> .progress { |
|
width: 210px; |
|
} |
|
} |
|
|
|
/* forms with rows: settings, submitting an entry, etc. */ |
|
form { |
|
padding-right: 10px; |
|
.formLabel { text-align: left; width: auto; flex-shrink: 1; flex-grow: 0; } |
|
.formInput input:not([type=checkbox]):not([type=submit]), .formInput textarea { width: 100%; max-width: 100%; } |
|
.formRow:has(> .formInput):not(:has(.formLabel > input[type=checkbox])) { |
|
display: flex; flex-direction: column; flex-wrap: wrap; |
|
} |
|
/* hack for license selectors in entry submission menu to make the checkboxes fit */ |
|
.formInput[style^="width"] { |
|
width: calc(100% - 32px) !important; |
|
} |
|
} |
|
|
|
} |
|
|
|
@media (max-width: 500px) { |
|
/* comments/threads */ |
|
.threadContainer { |
|
> .post { |
|
/* pfp */ |
|
> .left { |
|
width: 40px; |
|
flex-shrink: 0; |
|
height: 40px; |
|
> .botbrAvatar { |
|
width: 36px; height: 36px; |
|
img { width: 36px; height: 36px; } |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
@media (max-width: 400px) { |
|
#homeMenu > div:first-child > .inner.clearfix:first-child { |
|
--mbotb-homepage-pfp-size: 48px; |
|
width: 100%; |
|
box-sizing: border-box; |
|
grid-template-columns: 1fr 1fr; |
|
.tab { |
|
height: 24px; |
|
} |
|
} |
|
} |
|
|
|
} |
|
|
|
@-moz-document regexp("https?://battleofthebits.com/arena/Battle/(.*)") { |
|
/* Battles */ |
|
|
|
@media (max-width: 960px) { |
|
/* Sidebar */ |
|
#pageBG > .grid_1 > .grid_2 { |
|
> .loljax_menu { |
|
display: grid; |
|
grid-template-columns: 1fr 1fr; |
|
width: 100%; |
|
box-sizing: border-box; |
|
gap: 6px; |
|
> .hMiniSeperator { display: none; } |
|
} |
|
|
|
/* Battle Host box */ |
|
> div.inner:last-child { |
|
width: 100%; |
|
box-sizing: border-box; |
|
} |
|
|
|
margin-bottom: 10px; |
|
} |
|
|
|
#pageBG > .grid_1 > .grid_8 { |
|
|
|
/* majors */ |
|
> .loljax_container:has(> div.fright) { |
|
width: 100%; |
|
box-sizing: border-box; |
|
|
|
> a { height: 50px; } |
|
|
|
> div.fright.margin0 { |
|
width: calc(100% - 64px); |
|
display: flex; |
|
> a { |
|
width: 100% !important; |
|
margin-bottom: 32px; |
|
} |
|
|
|
> .fleft.margin0 { |
|
a.inner.boxLink { |
|
text-align: center; |
|
min-width: 55px; |
|
> div.botb-icon { display: block; margin: 0 auto; } |
|
} |
|
} |
|
} |
|
|
|
|
|
> .hSeperator { height: 12px; } |
|
} |
|
|
|
/* minors */ |
|
/* extremely annoying layout; the entries are in the same div as the info and comment boxes, |
|
* which makes grid unusable. */ |
|
> .loljax_container:not(:has(> div.fright)) { |
|
width: 100%; |
|
box-sizing: border-box; |
|
|
|
> a.inner.boxLink[href^="https://battleofthebits.com/arena/Entry"] { |
|
width: 100% !important; |
|
max-width: calc(100% - 58px - 5px - 90px - 5px); |
|
box-sizing: border-box; |
|
margin-bottom: 32px; |
|
} |
|
|
|
> .tb1:has(a.boxLink):has(.hMiniSeperator) { |
|
> a.inner.boxLink { |
|
text-align: center; |
|
min-width: 55px; |
|
> div.botb-icon { display: block; margin: 0 auto; } |
|
} |
|
} |
|
} |
|
|
|
/* problem: the play etc counters will go into the text on the box if the text is big enough |
|
* solution: move them out of the box :D */ |
|
a.inner.boxLink > div:has(.lilBox) { |
|
top: calc(100% + 2px); |
|
display: flex; gap: 2px; |
|
> .lilBox { min-width: 0; } |
|
} |
|
|
|
/* Visual entries show thumbnail instead of listen/download buttons */ |
|
a.boxLink:has(div.icons-eye) { |
|
> img.box48 { margin-left: 2px; } |
|
> div.icons-eye { |
|
position: absolute; top: 2px; right: 2px; |
|
} |
|
} |
|
|
|
/* bit pack/final pack buttons */ |
|
> .loljax_container > .grid_4.alpha + .grid_4.omega { |
|
margin-top: 10px; |
|
} |
|
} |
|
|
|
/* Vote table */ |
|
.voteForm { |
|
width: 100%; |
|
box-sizing: border-box; |
|
padding: 10px; |
|
|
|
.vote-table { |
|
counter-reset: entry; |
|
display: flex; |
|
flex-wrap: wrap; |
|
|
|
tr { |
|
display: flex; |
|
flex-direction: column-reverse; |
|
} |
|
|
|
/* reimplement counter so that we can place it next to the input row */ |
|
.entry_counter { display: none; } |
|
.vote-cell-entry-link a::before { |
|
content: counter(entry) ". "; |
|
counter-increment: entry; |
|
} |
|
} |
|
} |
|
|
|
#voteSave, .voteSave { float: none; width: 100%; max-width: calc(100% - 50px); } |
|
|
|
/* Hide the huge OHB logo at the bottom */ |
|
center:last-child:has(img) { |
|
display: none; |
|
} |
|
} |
|
|
|
} |
|
|
|
@-moz-document regexp("https?://battleofthebits.com/arena/Entry/(.*)") { |
|
/* Entries */ |
|
|
|
@media (max-width: 960px) { |
|
/* This is almost the nicest page of them all; each element is clearly split up |
|
* into its own separate div. However, the actual page content isn't its own div |
|
* and is in the main grid instead, and it's missing IDs for easy selection. */ |
|
|
|
#pageBG > .grid_1 { |
|
display: flex; |
|
flex-wrap: wrap; |
|
flex-direction: column; |
|
box-sizing: border-box; |
|
width: 100%; |
|
> * { |
|
flex: 0 1 100%; |
|
} |
|
|
|
.hSeperator { height: 16px; } |
|
|
|
/* botb logo, user info, etc... */ |
|
> :nth-child(1) { |
|
order: 0; |
|
} |
|
|
|
/* tags and faves container */ |
|
> :nth-child(2) { |
|
margin-left: 0 !important; |
|
order: 3; |
|
} |
|
|
|
/* "author box" - pfp */ |
|
> :nth-child(3) { |
|
order: 1; |
|
> .boxLink { |
|
min-height: 52px; |
|
> .botbrAvatar { |
|
float: left; margin-right: 10px; |
|
width: 52px; height: 52px; |
|
> img:first-child { width: 52px; height: 52px;} |
|
> img.noLink { width: 48px; height: 48px;} |
|
} |
|
} |
|
} |
|
|
|
/* main entry box */ |
|
> :nth-child(4) { |
|
order: 2; |
|
|
|
> .inner:first-child { |
|
display: flex; flex-wrap: wrap; flex-direction: column; |
|
|
|
/* listen/donload/get mp3 buttons */ |
|
> .tb1:first-child { |
|
float: unset !important; |
|
margin: 0 !important; |
|
width: 100% !important; |
|
order: 999; |
|
margin-top: 10px !important; |
|
} |
|
|
|
/* title */ |
|
> .tb4 { |
|
width: auto !important; margin-bottom: 6px; |
|
} |
|
} |
|
|
|
/* battle logo button - not enough space, sorry! */ |
|
> .boxLink[href^="https://battleofthebits.com/arena/Battle"] { |
|
display: none; |
|
} |
|
|
|
/* previous/nextious entry */ |
|
> .boxLink[href^="https://battleofthebits.com/"] { |
|
width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; |
|
box-sizing: border-box; |
|
margin-bottom: 10px; |
|
} |
|
|
|
} |
|
|
|
/* major vote box + comments container */ |
|
|
|
.voteMSG { float: unset; } |
|
> :nth-child(5) { |
|
order: 4; |
|
|
|
> .inner:has(.voteForm) { |
|
margin-bottom: 260px; |
|
.voteForm { |
|
width: 100%; |
|
|
|
.catLabel { word-break: break-word; } |
|
td:has(.voteInput) { min-width: 140px;} |
|
|
|
.button_hype { |
|
width: 100%; |
|
position: absolute; |
|
bottom: -110%; |
|
left: 0; |
|
display: flex; |
|
flex-direction: column; |
|
flex-wrap: wrap; |
|
> * { flex: 0 0; max-width: unset; } |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@-moz-document regexp("https?://battleofthebits.com/barracks/Profile/(.*)") { |
|
/* Profile pages */ |
|
|
|
/* a large portion of the profile page is handled by divs with no classes but inline styles :D */ |
|
|
|
@media (max-width: 960px) { |
|
#pageBG > .grid_1:first-child { |
|
> .grid_8 { |
|
|
|
/* profile picture */ |
|
> div:first-child { |
|
float: unset !important; |
|
width: 140px !important; |
|
} |
|
|
|
> #profileMenu { |
|
/* buttons: Profile, listen, entries, etc. */ |
|
> div:first-child { |
|
width: 100% !important; |
|
display: flex; |
|
flex-wrap: wrap; |
|
} |
|
|
|
> .ajaxContent { |
|
/* points by class */ |
|
> div:first-child { |
|
float: unset !important; |
|
width: 100% !important; |
|
margin-left: 0 !important; |
|
margin-bottom: 10px; |
|
> .inner.clearfix > .t0 { |
|
display: grid; |
|
grid-template-columns: 1fr 1fr 1fr; |
|
} |
|
} |
|
|
|
/* 2nd child: trophies container, though we can select the inner grid */ |
|
.trophiez { |
|
grid-template-columns: repeat(auto-fill, 26px); |
|
} |
|
.trophiez_xhb { |
|
grid-template-columns: repeat(auto-fill, 70px); |
|
} |
|
|
|
/* 3rd child: bio. 2nd child if there are no trophies */ |
|
> div[style="float:left;width:464px;"] { |
|
float: unset; |
|
width: 100% !important; |
|
box-sizing: border-box; |
|
} |
|
} |
|
|
|
/* Entry browser */ |
|
> .ajaxContent:has(#entry_browser) { |
|
#main_output { |
|
/* layout is like minors, but 1. icons are in one div (thank you <3), 2. there is no content after the entry list so we can use grid :) */ |
|
display: grid; |
|
grid-template-columns: 64px auto 90px; |
|
gap: 10px 0; |
|
> .hSeperator { display: none; } |
|
> .boxLink { width: auto !important; margin-bottom: 15px; } |
|
|
|
> .fleft.margin0[style^="width:126px"] { |
|
display: flex; flex-wrap: wrap; |
|
> :first-child { margin-bottom: 5px;} |
|
width: 64px !important; |
|
} |
|
|
|
/* --- same code as for entries above --- */ |
|
|
|
/* problem: the play etc counters will go into the text on the box if the text is big enough |
|
* solution: move them out of the box :D */ |
|
a.inner.boxLink > div:has(.lilBox) { |
|
top: calc(100% + 2px); |
|
display: flex; gap: 2px; |
|
> .lilBox { min-width: 0; } |
|
} |
|
|
|
/* Visual entries show thumbnail instead of listen/download buttons */ |
|
a.boxLink:has(div.icons-eye) { |
|
> img.box48 { margin-left: 2px; } |
|
> div.icons-eye { |
|
position: absolute; top: 2px; right: 2px; |
|
} |
|
} |
|
|
|
/* --- same code as for entries above --- */ |
|
} |
|
} |
|
} |
|
} |
|
|
|
/* mightier BotBrs */ |
|
> div:last-child { |
|
margin-top: 10px; |
|
width: calc(100vw - 60px); |
|
box-sizing: border-box; |
|
} |
|
} |
|
} |
|
|
|
} |
|
@-moz-document regexp("https?://battleofthebits.com/browser/") { |
|
/* Browser */ |
|
|
|
@media (max-width: 960px) { |
|
/* Entry boxes are the same as on profiles */ |
|
/* Entry browser */ |
|
#main_output { |
|
/* layout is like minors, but 1. icons are in one div (thank you <3), 2. there is no content after the entry list so we can use grid :) */ |
|
display: grid; |
|
grid-template-columns: 64px auto 96px; |
|
gap: 10px 0; |
|
> .hSeperator { display: none; } |
|
> .boxLink { width: auto !important; margin-bottom: 15px; } |
|
|
|
> .fleft.margin0[style^="width:126px"] { |
|
display: flex; flex-wrap: wrap; |
|
> :first-child { margin-bottom: 5px;} |
|
width: 64px !important; |
|
} |
|
|
|
/* --- same code as for entries above --- */ |
|
|
|
/* problem: the play etc counters will go into the text on the box if the text is big enough |
|
* solution: move them out of the box :D */ |
|
a.inner.boxLink > div:has(.lilBox) { |
|
top: calc(100% + 2px); |
|
display: flex; gap: 2px; |
|
> .lilBox { min-width: 0; } |
|
} |
|
|
|
/* Visual entries show thumbnail instead of listen/download buttons */ |
|
a.boxLink:has(div.icons-eye) { |
|
> img.box48 { margin-left: 2px; } |
|
> div.icons-eye { |
|
position: absolute; top: 2px; right: 2px; |
|
} |
|
} |
|
|
|
/* --- same code as for entries above --- */ |
|
} |
|
} |
|
|
|
} |
|
@-moz-document regexp("https?://battleofthebits.com/player/(.*)") { |
|
|
|
/* Player */ |
|
@media (max-width: 780px) { |
|
body { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
gap: 10px; |
|
padding: 10px 0; |
|
float: unset; |
|
|
|
/* single-entry player */ |
|
> div:has(.inner.NoOPEN) { |
|
width: calc(100% - 30px) !important; |
|
min-width: 0 !important; |
|
float: unset !important; |
|
|
|
> .inner.NoOPEN { |
|
border-top-left-radius: 7px; |
|
border-top-right-radius: 7px; |
|
|
|
|
|
} |
|
} |
|
|
|
/* multi-entry player / "listen all" */ |
|
> #playlist { |
|
.playlist_entry { |
|
display: flex; flex-wrap: wrap; flex-direction: column; |
|
align-items: center; |
|
|
|
> a.mainBox { |
|
display: flex; |
|
gap: 6px; |
|
flex-wrap: wrap; |
|
flex-direction: column; |
|
text-align: center; |
|
|
|
width: calc(100% - 10px); |
|
|
|
> div:has(.lilBox) { margin: 0 auto; order: 999; } |
|
|
|
> div.t0.fright { display: none; } |
|
|
|
>.fleft:has(.botb-icon) { |
|
margin: 0 auto; |
|
.hMiniSeperator { display: none; } |
|
} |
|
|
|
> *[style^="position:"] { position: unset !important; } |
|
|
|
.audioPlayer { margin: 0 auto; display: flex; > .progress { flex-shrink: 0; } } |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
} |
