Alternative style for HaxBall browser game
HaxBall_neg by negbro
Details
Authornegbro
LicenseCC-BY-4.0
Categorygaming haxball
Created
Updated
Size14 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name HaxBall
@namespace USO Archive
@author H
@description Alternative style for HaxBall browser game
@version 20230501.5.0
@license CC-BY-4.0
@preprocessor uso
==/UserStyle== */
@-moz-document domain("haxball.com") {
.rightbar {
display: none;
}
.header {
display: none;
}
.game-timer-view>.overtime {
margin-right: 20px;
}
.game-timer-view.time-warn {
animation: none;
}
.game-state-view .bar {
background: rgba(41, 32, 31, .24) !important;
font-size: 14px;
text-shadow: 1px 1px 1px #000, 0px 1px 1px #000;
}
.chatbox-view > .log p.notice {
color: #f9817f;
}
.game-state-view .bar>.scoreboard .teamicon.red {
background-color: #e56e56;
box-shadow: 1px 1px 1px #000, 0px 1px 1px #000;
}
}
.game-state-view .bar>.scoreboard .teamicon.blue {
background-color: #5689e5;
box-shadow: 1px 1px 1px #000, 0px 1px 1px #000;
}
.rc-anchor-dark {
background: #29201f;
color: #fff;
}
.chatbox-view-contents {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
font-size: 10px;
text-shadow: 1px 1px 1px #000, 0px 1px 1px #000;
box-sizing: border-box;
display: flex;
flex-direction: column;
padding: 1px 1px 1px 1px;
background-color: rgb(26 33 37 / 0%);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.chatbox-view-contents>.input {
display: flex;
flex-direction: row;
flex-shrink: 0;
height: 10px;
}
.chatbox-view-contents>.input input[type=text] {
color: #fff;
background-color: rgba(41, 32, 31, .24);
border: none;
border-radius: 5px;
padding: 0 8px;
flex-grow: 1;
align-self: stretch;
box-sizing: border-box
}
.chatbox-view-contents>.input input[type=text]:focus {
border: 1px solid #29201f;
padding: 0 7px;
}
.chatbox-view-contents>.drag::before {
content: "";
position: absolute;
top: 0;
left: calc(50% - 10px);
width: 20px;
bottom: 0;
border-radius: 10px;
background-color: rgb(60 49 43)
}
.chatbox-view-contents>.drag:hover::before {
background-color: rgb(60 49 43)
}
.chatbox-view-contents>.drag {
position: absolute;
top: 0;
left: 10px;
right: 10px;
border-radius: 2.5px;
cursor: n-resize;
height: 0px
}
.game-view > .bottom-section button {
background-color: #29201f;
}
.dialog,
.room-view > .container {
background-color: #3c312b;
display: flex;
flex-direction: column;
align-items: stretch;
padding: 10px;
overflow: hidden;
box-sizing: border-box;
border-radius: 5px;
}
.dialog button,
.room-view > .container button {
background-color: #24496700;
}
.settings-view .section .inputrow:nth-child(odd) {
background-color: #29201f21;
}
.settings-view .section select {
height: 25px;
border: none;
background-color: #19111685;
margin-left: 10px;
}
.settings-view .section .inputrow > :not(:first-child) {
background-color: #19111685;
border-radius: 7px;
margin: 2px 2px;
padding: 1px 5px;
display: inline-block;
}
.room-view > .container > .teams .player-list-view .list {
flex: 1;
background-color: #19111685;
overflow-x: hidden;
overflow-y: auto;
}
.dialog select,
.room-view > .container select {
border: 1px solid #19111685;
background-color: #19111685;
border-radius: 5px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: white;
padding: 1px 5px;
}
.dialog .label-input,
.room-view > .container .label-input {
display: flex;
background-color: #24496700;
align-items: baseline;
border-radius: 5px;
padding: 3px 3px 3px 5px;
}
.dialog input,
.room-view > .container input {
color: white;
background-color: #19111685;
border: none;
border-radius: 5px;
padding: 0 10px;
box-sizing: border-box;
}
.dialog > h1,
.room-view > .container > h1 {
font-size: 20px;
font-weight: 600;
margin-bottom: 20px !important;
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 3px;
border-bottom-color: #f98280;
border-bottom-style: solid;
}
.landing-page .about-box {
background: rgba(20, 30, 53, 0);
padding: 20px 55px;
padding-top: 30px;
border-radius: 50px;
margin-top: 40px;
margin-bottom: 25px;
text-align: center;
}
.dialog button,
.room-view > .container button {
background-color: #29201f;
}
.dialog .file-btn label,
.room-view > .container .file-btn label {
box-sizing: border-box;
width: 100%;
text-align: center;
background-color: #29201f;
display: inline-block;
cursor: pointer;
}
.roomlist-view > .dialog > .splitter .filters .bool,
.room-view.roomlist-view > .container > .splitter .filters .bool {
margin-right: 6px;
padding: 1px 6px;
background-color: #29201f;
border-radius: 5px;
}
.dialog select,
.room-view > .container select {
border: 1px solid #19111600;
background-color: #29201f;
border-radius: 5px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: white;
padding: 1px 5px;
}
.ps__thumb-y {
background-color: #29201f;
border-radius: 6px;
transition: background-color .2s linear, width .2s ease-in-out;
-webkit-transition: background-color .2s linear, width .2s ease-in-out;
width: 6px;
right: 2px;
position: absolute;
}
.roomlist-view > .dialog > .splitter > .list .separator,
.room-view.roomlist-view > .container > .splitter > .list .separator {
height: 2px;
width: 100%;
background-color: #f98280;
}
.game-state-view.restricted {
background-color: #000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.game-state-view.restricted canvas {
width: 100%;
height: 100%-35px;
max-width: 960px;
max-height: 460px;
}
.landing-page .about-box .play-link {
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: -40px;
background: linear-gradient(#3c312b, #3c312bbf);
border-radius: 200px;
padding: 15px;
font-size: 35px;
font-weight: bold;
display: block;
text-align: center;
width: 237px;
color: white;
border: 3px solid rgba(247, 255, 235, 0.7);
box-shadow: 0 0 0 3px #8da86b, 0 0 6px 6px rgba(0, 0, 0, 0.33);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
transition: 0.1s linear
}
.replay-controls-view {
-webkit-user-select: none;
user-select: none;
position: absolute;
bottom: 0;
height: 40px;
width: 100%;
background-color: transparent;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding-left: 6px;
padding-right: 6px;
box-sizing: border-box;
}
.replay-controls-view button {
background-color: #29201f;
}
.replay-controls-view .timebar .bar {
background-color: #29201f;
position: absolute;
left: 0;
top: 0;
bottom: 0;
}
.rc-anchor-dark {
background: #3c312b;
color: #fff;
}
.settings-view .tabs .selected {
background-color: #f98280;
}
.dialog input:not([type=range]),
.room-view > .container input:not([type=range]) {
color: #fff;
background-color: #29201f;
border: none;
border-radius: 5px;
padding: 0 10px;
box-sizing: border-box;
}
.stats-view {
background-color: rgb(26 33 37 / 0%);
text-shadow: 1px 1px 1px #000, 0px 1px 1px #000;
padding: 4px;
margin: 4px;
white-space: nowrap;
flex: 0 0 100px;
line-height: 1.5em
}
.game-view > .bottom-section > .buttons {
padding: 10px;
white-space: nowrap;
margin-left: auto;
background-color: #3c312b00;
border-top-left-radius: 5px;
display: flex;
flex-direction: column;
}
.game-view.chat-bg-full .bottom-section {
align-items: flex-start;
background-color: rgba(60, 49, 43, var(--chat-opacity, 1))
}
.game-view > .bottom-section button:disabled {
background-color: #29201f
}
.landing-page #logo {
position: relative;
left: 35px;
margin-top: 175px;
}
.dialog input:focus:not([type=range]),
.room-view > .container input:focus:not([type=range]) {
border-color: #29201f
}
.game-view>.buttons {
white-space: nowrap;
background-color: #3c312b00;
display: flex;
...