make css additional to default css instead of replacing it
This commit is contained in:
parent
fb167337bb
commit
0ed5193982
|
|
@ -10,6 +10,7 @@ import { IconContext } from 'react-icons';
|
|||
|
||||
import store from '../ui/store';
|
||||
|
||||
import Style from './Style';
|
||||
import CoordinatesBox from './CoordinatesBox';
|
||||
import CanvasSwitchButton from './CanvasSwitchButton';
|
||||
import OnlineBox from './OnlineBox';
|
||||
|
|
@ -19,10 +20,12 @@ import Menu from './Menu';
|
|||
import UI from './UI';
|
||||
import ReCaptcha from './ReCaptcha';
|
||||
import ExpandMenuButton from './ExpandMenuButton';
|
||||
import MinecraftTPButton from './MinecraftTPButton';
|
||||
import ModalRoot from './ModalRoot';
|
||||
|
||||
const App = () => (
|
||||
<div>
|
||||
<Style />
|
||||
<div id="outstreamContainer" />
|
||||
<ReCaptcha />
|
||||
<IconContext.Provider value={{ style: { verticalAlign: 'middle' } }}>
|
||||
|
|
@ -33,6 +36,7 @@ const App = () => (
|
|||
<OnlineBox />
|
||||
<CoordinatesBox />
|
||||
<ExpandMenuButton />
|
||||
<MinecraftTPButton />
|
||||
<UI />
|
||||
<ModalRoot />
|
||||
</IconContext.Provider>
|
||||
|
|
|
|||
|
|
@ -12,13 +12,8 @@ import Chat from './Chat';
|
|||
|
||||
|
||||
const ChatBox = ({ chatOpen }) => (
|
||||
<div>
|
||||
{(chatOpen)
|
||||
? (
|
||||
<div className="chatbox">
|
||||
<Chat />
|
||||
</div>
|
||||
) : null}
|
||||
<div className={(chatOpen) ? "chatbox show" : "chatbox"}>
|
||||
<Chat />
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -11,30 +11,21 @@ import HelpButton from './HelpButton';
|
|||
import SettingsButton from './SettingsButton';
|
||||
import LogInButton from './LogInButton';
|
||||
import DownloadButton from './DownloadButton';
|
||||
import MinecraftTPButton from './MinecraftTPButton';
|
||||
import MinecraftButton from './MinecraftButton';
|
||||
|
||||
const Menu = ({
|
||||
menuOpen, minecraftname, messages, canvasId,
|
||||
}) => (
|
||||
<div id="menu">
|
||||
{(menuOpen) ? <SettingsButton /> : null}
|
||||
{(menuOpen) ? <LogInButton /> : null}
|
||||
{(menuOpen) ? <DownloadButton /> : null}
|
||||
{(menuOpen) ? <MinecraftButton /> : null}
|
||||
{(menuOpen) ? <HelpButton /> : null}
|
||||
{(minecraftname && !messages.includes('not_mc_verified') && canvasId === 0)
|
||||
? <MinecraftTPButton /> : null}
|
||||
const Menu = ({ menuOpen }) => (
|
||||
<div className={menuOpen ? 'menu show' : 'menu'}>
|
||||
<SettingsButton />
|
||||
<LogInButton />
|
||||
<DownloadButton />
|
||||
<MinecraftButton />
|
||||
<HelpButton />
|
||||
</div>
|
||||
);
|
||||
|
||||
function mapStateToProps(state: State) {
|
||||
const { menuOpen } = state.gui;
|
||||
const { minecraftname, messages } = state.user;
|
||||
const { canvasId } = state.canvas;
|
||||
return {
|
||||
menuOpen, minecraftname, messages, canvasId,
|
||||
};
|
||||
return { menuOpen };
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps)(Menu);
|
||||
|
|
|
|||
|
|
@ -26,21 +26,36 @@ async function submitMinecraftTp(view) {
|
|||
}
|
||||
|
||||
|
||||
const MinecraftTPButton = ({ view }) => (
|
||||
<div
|
||||
id="minecrafttpbutton"
|
||||
className="actionbuttons"
|
||||
role="button"
|
||||
tabIndex={-1}
|
||||
onClick={() => submitMinecraftTp(view)}
|
||||
>
|
||||
<MdNearMe />
|
||||
</div>
|
||||
);
|
||||
function MinecraftTPButton({
|
||||
view,
|
||||
canvasId,
|
||||
minecraftname,
|
||||
messages,
|
||||
}) {
|
||||
if (minecraftname
|
||||
&& !messages.includes('not_mc_verified')
|
||||
&& canvasId === 0) {
|
||||
return (
|
||||
<div
|
||||
id="minecrafttpbutton"
|
||||
className="actionbuttons"
|
||||
role="button"
|
||||
tabIndex={-1}
|
||||
onClick={() => submitMinecraftTp(view)}
|
||||
>
|
||||
<MdNearMe />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function mapStateToProps(state: State) {
|
||||
const { view } = state.canvas;
|
||||
return { view };
|
||||
const { view, canvasId } = state.canvas;
|
||||
const { minecraftname, messages } = state.user;
|
||||
return {
|
||||
view, canvasId, minecraftname, messages,
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps)(MinecraftTPButton);
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ import type { State } from '../reducers';
|
|||
* based on windowSize
|
||||
*/
|
||||
function getStylesByWindowSize(
|
||||
paletteOpen,
|
||||
windowSize,
|
||||
colors,
|
||||
clrIgnore,
|
||||
|
|
@ -27,30 +28,47 @@ function getStylesByWindowSize(
|
|||
} = windowSize;
|
||||
const numCal = colors.length - clrIgnore;
|
||||
|
||||
let width;
|
||||
let height;
|
||||
let flexDirection;
|
||||
let spanSize;
|
||||
let paletteCols;
|
||||
if (windowWidth <= 300 || windowHeight <= 432) {
|
||||
// tiny compact palette
|
||||
spanSize = 24;
|
||||
height = Math.ceil(numCal / 5 * spanSize);
|
||||
width = 5 * spanSize;
|
||||
paletteCols = 5;
|
||||
flexDirection = 'row';
|
||||
} else if (numCal > 30 || compactPalette) {
|
||||
// compact palette
|
||||
spanSize = 28;
|
||||
height = Math.ceil(numCal / 5 * spanSize);
|
||||
width = 5 * spanSize;
|
||||
paletteCols = 5;
|
||||
flexDirection = 'row';
|
||||
} else {
|
||||
// ordinary palette (one or two colums)
|
||||
spanSize = 24;
|
||||
const paletteCols = (windowHeight < 801) ? 2 : 1;
|
||||
height = numCal * spanSize / paletteCols;
|
||||
width = spanSize * paletteCols;
|
||||
paletteCols = (windowHeight < 801) ? 2 : 1;
|
||||
flexDirection = 'column';
|
||||
}
|
||||
const height = Math.ceil(numCal * spanSize / paletteCols);
|
||||
const width = spanSize * paletteCols;
|
||||
|
||||
if (!paletteOpen) {
|
||||
return [{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
textAlign: 'center',
|
||||
lineHeight: 0,
|
||||
height: 0,
|
||||
width,
|
||||
flexDirection,
|
||||
visibility: 'hidden',
|
||||
}, {
|
||||
display: 'block',
|
||||
height: 0,
|
||||
width: spanSize,
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
visibility: 'hidden',
|
||||
}];
|
||||
}
|
||||
|
||||
return [{
|
||||
display: 'flex',
|
||||
|
|
@ -60,6 +78,7 @@ function getStylesByWindowSize(
|
|||
height,
|
||||
width,
|
||||
flexDirection,
|
||||
visibility: 'visible',
|
||||
}, {
|
||||
display: 'block',
|
||||
width: spanSize,
|
||||
|
|
@ -67,6 +86,7 @@ function getStylesByWindowSize(
|
|||
margin: 0,
|
||||
padding: 0,
|
||||
cursor: 'pointer',
|
||||
visibility: 'visible',
|
||||
}];
|
||||
}
|
||||
|
||||
|
|
@ -99,11 +119,8 @@ function Palette({
|
|||
select,
|
||||
clrIgnore,
|
||||
}) {
|
||||
if (!paletteOpen) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const [paletteStyle, spanStyle] = getStylesByWindowSize(
|
||||
paletteOpen,
|
||||
useWindowSize(),
|
||||
colors,
|
||||
clrIgnore,
|
||||
|
|
@ -112,8 +129,7 @@ function Palette({
|
|||
|
||||
return (
|
||||
<div
|
||||
className="palettebox"
|
||||
id="colors"
|
||||
id="palettebox"
|
||||
style={paletteStyle}
|
||||
>
|
||||
{colors.slice(2).map((color, index) => (
|
||||
|
|
|
|||
|
|
@ -185,7 +185,7 @@ function SettingsModal({
|
|||
) : null }
|
||||
{(typeof window.availableStyles !== 'undefined') && (
|
||||
<SettingsItemSelect
|
||||
title="Styles"
|
||||
title="Themes"
|
||||
description="How pixelplanet should look like."
|
||||
values={Object.keys(window.availableStyles)}
|
||||
selected={selectedStyle}
|
||||
|
|
|
|||
24
src/components/Style.jsx
Normal file
24
src/components/Style.jsx
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
/*
|
||||
*
|
||||
* @flow
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import type { State } from '../reducers';
|
||||
|
||||
function Style({ style }) {
|
||||
const cssUri = window.availableStyles[style];
|
||||
return (style === 'default') ? null
|
||||
: (<link rel="stylesheet" type="text/css" href={cssUri} />);
|
||||
}
|
||||
|
||||
function mapStateToProps(state: State) {
|
||||
const {
|
||||
style,
|
||||
} = state.gui;
|
||||
return { style };
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps)(Style);
|
||||
|
|
@ -9,7 +9,6 @@ import audio from './audio';
|
|||
import swal from './sweetAlert';
|
||||
import protocolClientHook from './protocolClientHook';
|
||||
import rendererHook from './rendererHook';
|
||||
import styleHook from './styleHook';
|
||||
// import ads from './ads';
|
||||
// import analytics from './analytics';
|
||||
import array from './array';
|
||||
|
|
@ -41,7 +40,6 @@ const store = createStore(
|
|||
title,
|
||||
protocolClientHook,
|
||||
rendererHook,
|
||||
styleHook,
|
||||
// ads,
|
||||
// analytics,
|
||||
logger,
|
||||
|
|
|
|||
|
|
@ -1,22 +0,0 @@
|
|||
/*
|
||||
* @flow
|
||||
*/
|
||||
|
||||
import setStyle from '../ui/setStyle';
|
||||
|
||||
export default () => (next) => (action) => {
|
||||
switch (action.type) {
|
||||
case 'SELECT_STYLE': {
|
||||
const {
|
||||
style,
|
||||
} = action;
|
||||
setStyle(style);
|
||||
break;
|
||||
}
|
||||
|
||||
default:
|
||||
// nothing
|
||||
}
|
||||
|
||||
return next(action);
|
||||
};
|
||||
|
|
@ -1,43 +1,3 @@
|
|||
body {
|
||||
margin: 0;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
user-select: none;
|
||||
background: white;
|
||||
}
|
||||
|
||||
html, body {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/**
|
||||
* https://github.com/benweet/stackedit/issues/212
|
||||
*/
|
||||
kbd {
|
||||
padding: 0.1em 0.6em;
|
||||
border: 1px solid #ccc;
|
||||
font-size: 11px;
|
||||
font-family: Arial,Helvetica,sans-serif;
|
||||
background-color: #f7f7f7;
|
||||
color: #333;
|
||||
-moz-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
|
||||
-webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
|
||||
box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
display: inline-block;
|
||||
margin: 0 0.1em;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: #91ffe0;
|
||||
}
|
||||
|
|
@ -51,51 +11,19 @@ a:hover {
|
|||
}
|
||||
|
||||
.modallink {
|
||||
text-decoration: none;
|
||||
color: #91ffe0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.modallink:hover){
|
||||
font-weight: bold;
|
||||
|
||||
.modallink:hover {
|
||||
color: #d9f68a;
|
||||
}
|
||||
|
||||
.inarea {
|
||||
border-style: solid;
|
||||
border-color: #d5d5d5;
|
||||
padding: 4px;
|
||||
margin-top: 4px;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.tab-list {
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.tab-list-item {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
margin-bottom: -1px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
|
||||
.tab-list-active {
|
||||
background-color: #7b7b7b;
|
||||
border: solid #ccc;
|
||||
border-width: 1px 1px 0 1px;
|
||||
}
|
||||
|
||||
table {
|
||||
font-family: arial, sans-serif;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
td, th {
|
||||
border: 1px solid #dddddd;
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
|
|
@ -103,44 +31,14 @@ tr:nth-child(even) {
|
|||
}
|
||||
|
||||
.chatbox {
|
||||
position: absolute;
|
||||
background-color: rgba(59, 59, 59, 0.8);
|
||||
width: 350px;
|
||||
height: 200px;
|
||||
bottom: 16px;
|
||||
right: 98px;
|
||||
border: solid black;
|
||||
border-width: thin;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.actionbuttons, .coorbox, .onlinebox, .cooldownbox, .palettebox {
|
||||
position: absolute;
|
||||
background-color: rgba(59, 59, 59, 0.8);
|
||||
color: #f4f4f4;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 36px;
|
||||
height: 36px;
|
||||
width: auto;
|
||||
padding: 0 16px;
|
||||
border: solid black;
|
||||
border-radius: 21px;
|
||||
border-width: thin;
|
||||
}
|
||||
.coorbox {
|
||||
left: 16px;
|
||||
cursor: pointer;
|
||||
bottom: 16px;
|
||||
}
|
||||
.onlinebox {
|
||||
left: 16px;
|
||||
bottom: 57px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#menubutton {
|
||||
left: 16px;
|
||||
top: 16px;
|
||||
.actionbuttons, .coorbox, .onlinebox, .cooldownbox, #historyselect {
|
||||
background-color: rgba(59, 59, 59, 0.8);
|
||||
color: #f4f4f4;
|
||||
border-radius: 21px;
|
||||
}
|
||||
|
||||
#menu > div {
|
||||
|
|
@ -148,337 +46,62 @@ tr:nth-child(even) {
|
|||
background-color: #15374fd1;
|
||||
}
|
||||
|
||||
#helpbutton {
|
||||
left: 16px;
|
||||
top: 221px;
|
||||
}
|
||||
#minecraftbutton {
|
||||
left: 16px;
|
||||
top: 180px;
|
||||
}
|
||||
#settingsbutton {
|
||||
left: 16px;
|
||||
top: 57px;
|
||||
}
|
||||
#loginbutton {
|
||||
left: 16px;
|
||||
top: 98px;
|
||||
}
|
||||
#downloadbutton {
|
||||
left: 16px;
|
||||
top: 139px;
|
||||
}
|
||||
#globebutton {
|
||||
left: 98px;
|
||||
top: 16px;
|
||||
}
|
||||
#voxelbutton {
|
||||
left: 180px;
|
||||
top: 16px;
|
||||
}
|
||||
#canvasbutton {
|
||||
left: 57px;
|
||||
top: 16px;
|
||||
}
|
||||
#minecrafttpbutton {
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
}
|
||||
#palselbutton {
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
}
|
||||
#chatbutton {
|
||||
bottom: 16px;
|
||||
right: 57px;
|
||||
}
|
||||
|
||||
#historyselect {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
height: 70px;
|
||||
width: 140px;
|
||||
background-color: rgba(226, 226, 226, 0.80);
|
||||
color: black;
|
||||
font-size: 14px;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
border: solid black;
|
||||
border-width: thin;
|
||||
padding: 0 24px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hsar {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.Modal {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
border: 1px solid rgb(204, 204, 204);
|
||||
background: #444242 none repeat scroll 0 0;;
|
||||
color: #f4f4f4;
|
||||
overflow-y: auto;
|
||||
border-radius: 4px;
|
||||
outline: currentcolor none medium;
|
||||
transform: translate(-50%, -50%);
|
||||
height: 80%;
|
||||
max-height: 900px;
|
||||
width: 70%;
|
||||
transition: all 0.5s ease 0s;
|
||||
border-radius: 21px;
|
||||
}
|
||||
|
||||
.modaltext, .modalcotext {
|
||||
color: #f4f4f4;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
position: relative;
|
||||
text-align: inherit;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.modaltext {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.modaltitle {
|
||||
color: #d7e5fb;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
margin-left: 0;
|
||||
margin-right: 10px;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.modaldesc {
|
||||
box-sizing: border-box;
|
||||
flex: 1 1 auto;
|
||||
color: hsla(220, 100%, 95.3%, 0.6);
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-weight: 500;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.modaldivider {
|
||||
box-sizing: border-box;
|
||||
margin-top: 20px;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background-color: hsla(216, 4%, 74%, .3);
|
||||
}
|
||||
|
||||
.modalinfo {
|
||||
color: #ddd;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
text-align: inherit;
|
||||
float: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.modalcvtext {
|
||||
color: hsla(220, 100%, 95.3%, 0.6);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-top: 3px;
|
||||
margin-bottom: 3px;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.ModalClose {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 0 0 36px;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
cursor: pointer;
|
||||
background-color: #55555d;
|
||||
border-color: #dcddde;
|
||||
top: 30px;
|
||||
right: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 604px) {
|
||||
.Modal {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
height: 95%;
|
||||
width: 90%;
|
||||
transform: none;
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
padding: 5%;
|
||||
}
|
||||
}
|
||||
.Overlay {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
z-index: 4;
|
||||
background-color: rgba(187, 187, 187, 0.75);
|
||||
}
|
||||
|
||||
.chatbox div .chatarea {
|
||||
height: 174px;
|
||||
}
|
||||
.chatarea {
|
||||
padding: 3px 3px 0px 3px;
|
||||
margin: 0px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
height: 95%;
|
||||
}
|
||||
.chatinput {
|
||||
height: 22px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.chatname {
|
||||
color: #4B0000;
|
||||
font-size: 13px;
|
||||
user-select: all;
|
||||
}
|
||||
.chatmsg {
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
user-select: text;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.usermessages {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
}
|
||||
.stattext {
|
||||
font-size: 18px;
|
||||
}
|
||||
.statvalue {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #ecc9ff;
|
||||
}
|
||||
|
||||
.pressed {
|
||||
box-shadow:0 0 3px 2px rgba(0,0,0,.6);
|
||||
}
|
||||
|
||||
.notifyboxvis, .notifyboxhid {
|
||||
background-color: rgba(226, 226, 226, 0.80);
|
||||
position: absolute;
|
||||
top: 57px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
height: 30px;
|
||||
width: 20px;
|
||||
color: black;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
border: solid black;
|
||||
border-width: thin;
|
||||
padding: 0 24px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.notifyboxvis {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: visibility 0s, opacity 0.5s linear;
|
||||
}
|
||||
.notifyboxhid {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: visibility 0.5s, opacity 0.5s linear;
|
||||
}
|
||||
|
||||
.cooldownbox {
|
||||
top: 16px;
|
||||
width: 48px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.actionbuttons {
|
||||
vertical-align: text-bottom;
|
||||
cursor: pointer;
|
||||
width: 36px;
|
||||
padding: 0;
|
||||
background-color: rgba(59, 59, 59, 0.8);
|
||||
border-radius: 21px;
|
||||
}
|
||||
|
||||
.actionbuttons:hover, .coorbox:hover, #menu > div:hover {
|
||||
background-color: #363637;
|
||||
}
|
||||
|
||||
.palettebox {
|
||||
z-index: 1;
|
||||
bottom: 59px;
|
||||
padding: 3px;
|
||||
position: fixed;
|
||||
right: 16px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#colors .selected,
|
||||
#colors span:hover {
|
||||
z-index: 2 !important;
|
||||
outline: rgb(234, 234, 234) solid 1px;
|
||||
box-shadow: rgba(0, 0, 0, 0.80) 0px 0px 5px 2px;
|
||||
-ms-transform: scale(1.10,1.10); /* IE 9 */
|
||||
-webkit-transform: scale(1.10,1.10); /* Safari */
|
||||
transform: scale(1.10,1.10); /* Standard syntax */
|
||||
}
|
||||
|
||||
#outstreamContainer {
|
||||
position: fixed;
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
background-color: black;
|
||||
z-index: 9000;
|
||||
}
|
||||
|
||||
.grecaptcha-badge {
|
||||
visibility: hidden;
|
||||
background-color: black;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,43 +1,3 @@
|
|||
body {
|
||||
margin: 0;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
user-select: none;
|
||||
background: white;
|
||||
}
|
||||
|
||||
html, body {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/**
|
||||
* https://github.com/benweet/stackedit/issues/212
|
||||
*/
|
||||
kbd {
|
||||
padding: 0.1em 0.6em;
|
||||
border: 1px solid #ccc;
|
||||
font-size: 11px;
|
||||
font-family: Arial,Helvetica,sans-serif;
|
||||
background-color: #f7f7f7;
|
||||
color: #333;
|
||||
-moz-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
|
||||
-webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
|
||||
box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
display: inline-block;
|
||||
margin: 0 0.1em;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: #91ffe0;
|
||||
}
|
||||
|
|
@ -51,51 +11,19 @@ a:hover {
|
|||
}
|
||||
|
||||
.modallink {
|
||||
text-decoration: none;
|
||||
color: #91ffe0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.modallink:hover){
|
||||
font-weight: bold;
|
||||
|
||||
.modallink:hover {
|
||||
color: #d9f68a;
|
||||
}
|
||||
|
||||
.inarea {
|
||||
border-style: solid;
|
||||
border-color: #d5d5d5;
|
||||
padding: 4px;
|
||||
margin-top: 4px;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.tab-list {
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.tab-list-item {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
margin-bottom: -1px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
|
||||
.tab-list-active {
|
||||
background-color: #7b7b7b;
|
||||
border: solid #ccc;
|
||||
border-width: 1px 1px 0 1px;
|
||||
}
|
||||
|
||||
table {
|
||||
font-family: arial, sans-serif;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
td, th {
|
||||
border: 1px solid #dddddd;
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
|
|
@ -103,43 +31,12 @@ tr:nth-child(even) {
|
|||
}
|
||||
|
||||
.chatbox {
|
||||
position: absolute;
|
||||
background-color: rgba(59, 59, 59, 0.8);
|
||||
width: 350px;
|
||||
height: 200px;
|
||||
bottom: 16px;
|
||||
right: 98px;
|
||||
border: solid black;
|
||||
border-width: thin;
|
||||
}
|
||||
|
||||
.actionbuttons, .coorbox, .onlinebox, .cooldownbox, .palettebox {
|
||||
position: absolute;
|
||||
background-color: rgba(59, 59, 59, 0.8);
|
||||
color: #f4f4f4;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 36px;
|
||||
height: 36px;
|
||||
width: auto;
|
||||
padding: 0 16px;
|
||||
border: solid black;
|
||||
border-width: thin;
|
||||
}
|
||||
.coorbox {
|
||||
left: 16px;
|
||||
cursor: pointer;
|
||||
bottom: 16px;
|
||||
}
|
||||
.onlinebox {
|
||||
left: 16px;
|
||||
bottom: 57px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#menubutton {
|
||||
left: 16px;
|
||||
top: 16px;
|
||||
.actionbuttons, .coorbox, .onlinebox, .cooldownbox, .palettebox, #historyselect {
|
||||
background-color: rgba(59, 59, 59, 0.8);
|
||||
color: #f4f4f4;
|
||||
}
|
||||
|
||||
#menu > div {
|
||||
|
|
@ -147,335 +44,60 @@ tr:nth-child(even) {
|
|||
background-color: #15374fd1;
|
||||
}
|
||||
|
||||
#helpbutton {
|
||||
left: 16px;
|
||||
top: 221px;
|
||||
}
|
||||
#minecraftbutton {
|
||||
left: 16px;
|
||||
top: 180px;
|
||||
}
|
||||
#settingsbutton {
|
||||
left: 16px;
|
||||
top: 57px;
|
||||
}
|
||||
#loginbutton {
|
||||
left: 16px;
|
||||
top: 98px;
|
||||
}
|
||||
#downloadbutton {
|
||||
left: 16px;
|
||||
top: 139px;
|
||||
}
|
||||
#globebutton {
|
||||
left: 98px;
|
||||
top: 16px;
|
||||
}
|
||||
#voxelbutton {
|
||||
left: 180px;
|
||||
top: 16px;
|
||||
}
|
||||
#canvasbutton {
|
||||
left: 57px;
|
||||
top: 16px;
|
||||
}
|
||||
#minecrafttpbutton {
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
}
|
||||
#palselbutton {
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
}
|
||||
#chatbutton {
|
||||
bottom: 16px;
|
||||
right: 57px;
|
||||
}
|
||||
|
||||
#historyselect {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
height: 70px;
|
||||
width: 140px;
|
||||
background-color: rgba(226, 226, 226, 0.80);
|
||||
color: black;
|
||||
font-size: 14px;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
border: solid black;
|
||||
border-width: thin;
|
||||
padding: 0 24px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hsar {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.Modal {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
border: 1px solid rgb(204, 204, 204);
|
||||
background: #444242 none repeat scroll 0 0;;
|
||||
color: #f4f4f4;
|
||||
overflow-y: auto;
|
||||
border-radius: 4px;
|
||||
outline: currentcolor none medium;
|
||||
transform: translate(-50%, -50%);
|
||||
height: 80%;
|
||||
max-height: 900px;
|
||||
width: 70%;
|
||||
transition: all 0.5s ease 0s;
|
||||
}
|
||||
|
||||
.modaltext, .modalcotext {
|
||||
color: #f4f4f4;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
position: relative;
|
||||
text-align: inherit;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.modaltext {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.modaltitle {
|
||||
color: #d7e5fb;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
margin-left: 0;
|
||||
margin-right: 10px;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.modaldesc {
|
||||
box-sizing: border-box;
|
||||
flex: 1 1 auto;
|
||||
color: hsla(220, 100%, 95.3%, 0.6);
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-weight: 500;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.modaldivider {
|
||||
box-sizing: border-box;
|
||||
margin-top: 20px;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background-color: hsla(216, 4%, 74%, .3);
|
||||
}
|
||||
|
||||
.modalinfo {
|
||||
color: #ddd;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
text-align: inherit;
|
||||
float: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.modalcvtext {
|
||||
color: hsla(220, 100%, 95.3%, 0.6);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-top: 3px;
|
||||
margin-bottom: 3px;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.ModalClose {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 0 0 36px;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
cursor: pointer;
|
||||
background-color: #55555d;
|
||||
border-color: #dcddde;
|
||||
top: 30px;
|
||||
right: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 604px) {
|
||||
.Modal {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
height: 95%;
|
||||
width: 90%;
|
||||
transform: none;
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
padding: 5%;
|
||||
}
|
||||
}
|
||||
.Overlay {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
z-index: 4;
|
||||
background-color: rgba(187, 187, 187, 0.75);
|
||||
}
|
||||
|
||||
.chatbox div .chatarea {
|
||||
height: 174px;
|
||||
}
|
||||
.chatarea {
|
||||
padding: 3px 3px 0px 3px;
|
||||
margin: 0px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
height: 95%;
|
||||
}
|
||||
.chatinput {
|
||||
height: 22px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.chatname {
|
||||
color: #4B0000;
|
||||
font-size: 13px;
|
||||
user-select: all;
|
||||
}
|
||||
.chatmsg {
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
user-select: text;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.usermessages {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
}
|
||||
.stattext {
|
||||
font-size: 18px;
|
||||
}
|
||||
.statvalue {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #ecc9ff;
|
||||
}
|
||||
|
||||
.pressed {
|
||||
box-shadow:0 0 3px 2px rgba(0,0,0,.6);
|
||||
}
|
||||
|
||||
.notifyboxvis, .notifyboxhid {
|
||||
background-color: rgba(226, 226, 226, 0.80);
|
||||
position: absolute;
|
||||
top: 57px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
height: 30px;
|
||||
width: 20px;
|
||||
color: black;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
border: solid black;
|
||||
border-width: thin;
|
||||
padding: 0 24px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.notifyboxvis {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: visibility 0s, opacity 0.5s linear;
|
||||
}
|
||||
.notifyboxhid {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: visibility 0.5s, opacity 0.5s linear;
|
||||
}
|
||||
|
||||
.cooldownbox {
|
||||
top: 16px;
|
||||
width: 48px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.actionbuttons {
|
||||
vertical-align: text-bottom;
|
||||
cursor: pointer;
|
||||
width: 36px;
|
||||
padding: 0;
|
||||
background-color: rgba(59, 59, 59, 0.8);
|
||||
}
|
||||
|
||||
.actionbuttons:hover, .coorbox:hover, #menu > div:hover {
|
||||
background-color: #363637;
|
||||
}
|
||||
|
||||
.palettebox {
|
||||
z-index: 1;
|
||||
bottom: 59px;
|
||||
padding: 3px;
|
||||
position: fixed;
|
||||
right: 16px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
#colors .selected,
|
||||
#colors span:hover {
|
||||
z-index: 2 !important;
|
||||
outline: rgb(234, 234, 234) solid 1px;
|
||||
box-shadow: rgba(0, 0, 0, 0.80) 0px 0px 5px 2px;
|
||||
-ms-transform: scale(1.10,1.10); /* IE 9 */
|
||||
-webkit-transform: scale(1.10,1.10); /* Safari */
|
||||
transform: scale(1.10,1.10); /* Standard syntax */
|
||||
}
|
||||
|
||||
#outstreamContainer {
|
||||
position: fixed;
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
background-color: black;
|
||||
z-index: 9000;
|
||||
}
|
||||
|
||||
.grecaptcha-badge {
|
||||
visibility: hidden;
|
||||
background-color: black;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,12 +38,25 @@ kbd {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: #428bca;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #327bba;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.modallink {
|
||||
text-decoration: none;
|
||||
color: #428bca;
|
||||
cursor: pointer;
|
||||
}
|
||||
.modallink:hover){
|
||||
|
||||
.modallink:hover {
|
||||
font-weight: bold;
|
||||
color: #226baa;
|
||||
}
|
||||
|
|
@ -93,79 +106,101 @@ tr:nth-child(even) {
|
|||
.chatbox {
|
||||
position: absolute;
|
||||
background-color: rgba(226, 226, 226, 0.92);
|
||||
width: 350px;
|
||||
height: 200px;
|
||||
border: solid black;
|
||||
border-width: thin;
|
||||
width: 0px;
|
||||
height: 36px;
|
||||
bottom: 16px;
|
||||
right: 98px;
|
||||
visibility: hidden;
|
||||
overflow: hidden;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.chatbox.show {
|
||||
height: 200px;
|
||||
width: 350px;
|
||||
bottom: 16px;
|
||||
right: 98px;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.actionbuttons, .coorbox, .onlinebox, .cooldownbox, #palettebox {
|
||||
position: absolute;
|
||||
background-color: rgba(226, 226, 226, 0.80);
|
||||
color: black;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 36px;
|
||||
height: 36px;
|
||||
width: auto;
|
||||
padding: 0 16px;
|
||||
border: solid black;
|
||||
border-width: thin;
|
||||
}
|
||||
|
||||
.actionbuttons, .coorbox, .onlinebox, .cooldownbox, .palettebox {
|
||||
position: absolute;
|
||||
background-color: rgba(226, 226, 226, 0.80);
|
||||
color: black;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 36px;
|
||||
height: 36px;
|
||||
width: auto;
|
||||
padding: 0 16px;
|
||||
border: solid black;
|
||||
border-width: thin;
|
||||
}
|
||||
.coorbox {
|
||||
left: 16px;
|
||||
cursor: pointer;
|
||||
bottom: 16px;
|
||||
left: 16px;
|
||||
cursor: pointer;
|
||||
bottom: 16px;
|
||||
}
|
||||
.onlinebox {
|
||||
left: 16px;
|
||||
bottom: 57px;
|
||||
white-space: nowrap;
|
||||
left: 16px;
|
||||
bottom: 57px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#menubutton {
|
||||
left: 16px;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
top: 16px;
|
||||
}
|
||||
|
||||
#menu > div {
|
||||
.menu > div {
|
||||
z-index: 1;
|
||||
background-color: rgb(213, 238, 255);
|
||||
}
|
||||
|
||||
.menu {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all .1s cubic-bezier(.46,.03,.52,.96);
|
||||
}
|
||||
|
||||
.menu.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#helpbutton {
|
||||
left: 16px;
|
||||
top: 221px;
|
||||
left: 16px;
|
||||
top: 221px;
|
||||
}
|
||||
#minecraftbutton {
|
||||
left: 16px;
|
||||
top: 180px;
|
||||
left: 16px;
|
||||
top: 180px;
|
||||
}
|
||||
#settingsbutton {
|
||||
left: 16px;
|
||||
top: 57px;
|
||||
left: 16px;
|
||||
top: 57px;
|
||||
}
|
||||
#loginbutton {
|
||||
left: 16px;
|
||||
top: 98px;
|
||||
left: 16px;
|
||||
top: 98px;
|
||||
}
|
||||
#downloadbutton {
|
||||
left: 16px;
|
||||
top: 139px;
|
||||
left: 16px;
|
||||
top: 139px;
|
||||
}
|
||||
#globebutton {
|
||||
left: 98px;
|
||||
top: 16px;
|
||||
left: 98px;
|
||||
top: 16px;
|
||||
}
|
||||
#voxelbutton {
|
||||
left: 180px;
|
||||
top: 16px;
|
||||
left: 180px;
|
||||
top: 16px;
|
||||
}
|
||||
#canvasbutton {
|
||||
left: 57px;
|
||||
top: 16px;
|
||||
left: 57px;
|
||||
top: 16px;
|
||||
}
|
||||
#minecrafttpbutton {
|
||||
top: 16px;
|
||||
|
|
@ -324,13 +359,13 @@ tr:nth-child(even) {
|
|||
}
|
||||
}
|
||||
.Overlay {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
z-index: 4;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.chatbox div .chatarea {
|
||||
|
|
@ -374,74 +409,79 @@ tr:nth-child(even) {
|
|||
}
|
||||
|
||||
.pressed {
|
||||
box-shadow:0 0 3px 2px rgba(0,0,0,.6);
|
||||
box-shadow:0 0 3px 2px rgba(0,0,0,.6);
|
||||
}
|
||||
|
||||
.notifyboxvis, .notifyboxhid {
|
||||
background-color: rgba(226, 226, 226, 0.80);
|
||||
position: absolute;
|
||||
top: 57px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
height: 30px;
|
||||
width: 20px;
|
||||
color: black;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
border: solid black;
|
||||
border-width: thin;
|
||||
padding: 0 24px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
z-index: 2;
|
||||
background-color: rgba(226, 226, 226, 0.80);
|
||||
position: absolute;
|
||||
top: 57px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
height: 30px;
|
||||
width: 20px;
|
||||
color: black;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
border: solid black;
|
||||
border-width: thin;
|
||||
padding: 0 24px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.notifyboxvis {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: visibility 0s, opacity 0.5s linear;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: visibility 0s, opacity 0.5s linear;
|
||||
}
|
||||
.notifyboxhid {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: visibility 0.5s, opacity 0.5s linear;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: visibility 0.5s, opacity 0.5s linear;
|
||||
}
|
||||
|
||||
.cooldownbox {
|
||||
top: 16px;
|
||||
width: 48px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
z-index: 2;
|
||||
top: 16px;
|
||||
width: 48px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.actionbuttons {
|
||||
vertical-align: text-bottom;
|
||||
cursor: pointer;
|
||||
width: 36px;
|
||||
padding: 0;
|
||||
vertical-align: text-bottom;
|
||||
cursor: pointer;
|
||||
width: 36px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.actionbuttons:hover, .coorbox:hover, #menu > div:hover {
|
||||
.actionbuttons:hover, .coorbox:hover, .menu > div:hover {
|
||||
background-color: #d2d2d2cc;
|
||||
}
|
||||
|
||||
.palettebox {
|
||||
z-index: 1;
|
||||
bottom: 59px;
|
||||
padding: 3px;
|
||||
position: fixed;
|
||||
right: 16px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
#palettebox {
|
||||
z-index: 1;
|
||||
bottom: 59px;
|
||||
padding: 3px;
|
||||
position: fixed;
|
||||
right: 16px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#colors .selected,
|
||||
#colors span:hover {
|
||||
#palettebox, #palettebox span {
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
#palettebox .selected,
|
||||
#palettebox span:hover {
|
||||
z-index: 2 !important;
|
||||
outline: rgb(234, 234, 234) solid 1px;
|
||||
box-shadow: rgba(0, 0, 0, 0.80) 0px 0px 5px 2px;
|
||||
|
|
@ -451,18 +491,18 @@ tr:nth-child(even) {
|
|||
}
|
||||
|
||||
#outstreamContainer {
|
||||
position: fixed;
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
background-color: black;
|
||||
z-index: 9000;
|
||||
position: fixed;
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
background-color: black;
|
||||
z-index: 9000;
|
||||
}
|
||||
|
||||
.grecaptcha-badge {
|
||||
visibility: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,471 +1,15 @@
|
|||
body {
|
||||
margin: 0;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
user-select: none;
|
||||
background: white;
|
||||
}
|
||||
|
||||
html, body {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/**
|
||||
* https://github.com/benweet/stackedit/issues/212
|
||||
*/
|
||||
kbd {
|
||||
padding: 0.1em 0.6em;
|
||||
border: 1px solid #ccc;
|
||||
font-size: 11px;
|
||||
font-family: Arial,Helvetica,sans-serif;
|
||||
background-color: #f7f7f7;
|
||||
color: #333;
|
||||
-moz-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
|
||||
-webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
|
||||
box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
display: inline-block;
|
||||
margin: 0 0.1em;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.modallink {
|
||||
text-decoration: none;
|
||||
color: #428bca;
|
||||
cursor: pointer;
|
||||
}
|
||||
.modallink:hover){
|
||||
font-weight: bold;
|
||||
color: #226baa;
|
||||
}
|
||||
|
||||
.inarea {
|
||||
border-style: solid;
|
||||
border-color: #d5d5d5;
|
||||
padding: 4px;
|
||||
margin-top: 4px;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.tab-list {
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.tab-list-item {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
margin-bottom: -1px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
|
||||
.tab-list-active {
|
||||
background-color: white;
|
||||
border: solid #ccc;
|
||||
border-width: 1px 1px 0 1px;
|
||||
}
|
||||
|
||||
table {
|
||||
font-family: arial, sans-serif;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
td, th {
|
||||
border: 1px solid #dddddd;
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #dddddd;
|
||||
}
|
||||
|
||||
.chatbox {
|
||||
position: absolute;
|
||||
background-color: rgba(226, 226, 226, 0.92);
|
||||
width: 350px;
|
||||
height: 200px;
|
||||
bottom: 16px;
|
||||
right: 98px;
|
||||
border: solid black;
|
||||
border-width: thin;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.actionbuttons, .coorbox, .onlinebox, .cooldownbox, .palettebox {
|
||||
position: absolute;
|
||||
background-color: rgba(226, 226, 226, 0.80);
|
||||
color: black;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 36px;
|
||||
height: 36px;
|
||||
width: auto;
|
||||
padding: 0 16px;
|
||||
border: solid black;
|
||||
border-radius: 21px;
|
||||
border-width: thin;
|
||||
}
|
||||
.coorbox {
|
||||
left: 16px;
|
||||
cursor: pointer;
|
||||
bottom: 16px;
|
||||
}
|
||||
.onlinebox {
|
||||
left: 16px;
|
||||
bottom: 57px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#menubutton {
|
||||
left: 16px;
|
||||
top: 16px;
|
||||
}
|
||||
|
||||
#menu > div {
|
||||
z-index: 1;
|
||||
background-color: rgb(213, 238, 255);
|
||||
}
|
||||
|
||||
#helpbutton {
|
||||
left: 16px;
|
||||
top: 221px;
|
||||
}
|
||||
#minecraftbutton {
|
||||
left: 16px;
|
||||
top: 180px;
|
||||
}
|
||||
#settingsbutton {
|
||||
left: 16px;
|
||||
top: 57px;
|
||||
}
|
||||
#loginbutton {
|
||||
left: 16px;
|
||||
top: 98px;
|
||||
}
|
||||
#downloadbutton {
|
||||
left: 16px;
|
||||
top: 139px;
|
||||
}
|
||||
#globebutton {
|
||||
left: 98px;
|
||||
top: 16px;
|
||||
}
|
||||
#voxelbutton {
|
||||
left: 180px;
|
||||
top: 16px;
|
||||
}
|
||||
#canvasbutton {
|
||||
left: 57px;
|
||||
top: 16px;
|
||||
}
|
||||
#minecrafttpbutton {
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
}
|
||||
#palselbutton {
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
}
|
||||
#chatbutton {
|
||||
bottom: 16px;
|
||||
right: 57px;
|
||||
}
|
||||
|
||||
#historyselect {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
height: 70px;
|
||||
width: 140px;
|
||||
background-color: rgba(226, 226, 226, 0.80);
|
||||
color: black;
|
||||
font-size: 14px;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
border: solid black;
|
||||
border-width: thin;
|
||||
padding: 0 24px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hsar {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.Modal {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
border: 1px solid rgb(204, 204, 204);
|
||||
background: rgb(255, 255, 255) none repeat scroll 0% 0%;
|
||||
overflow-y: auto;
|
||||
border-radius: 4px;
|
||||
outline: currentcolor none medium;
|
||||
transform: translate(-50%, -50%);
|
||||
height: 80%;
|
||||
max-height: 900px;
|
||||
width: 70%;
|
||||
transition: all 0.5s ease 0s;
|
||||
.actionbuttons, .coorbox, .onlinebox, .cooldownbox, #historyselect {
|
||||
border-radius: 21px;
|
||||
}
|
||||
|
||||
.modaltext, .modalcotext {
|
||||
color: hsla(218, 5%, 47%, .6);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
position: relative;
|
||||
text-align: inherit;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.modaltext {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.modaltitle {
|
||||
color: #4f545c;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
margin-left: 0;
|
||||
margin-right: 10px;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.modaldesc {
|
||||
box-sizing: border-box;
|
||||
flex: 1 1 auto;
|
||||
color: hsla(218, 5%, 47%, .6);
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-weight: 500;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.modaldivider {
|
||||
box-sizing: border-box;
|
||||
margin-top: 20px;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background-color: hsla(216, 4%, 74%, .3);
|
||||
}
|
||||
|
||||
.modalinfo {
|
||||
color: #4f545c;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
text-align: inherit;
|
||||
float: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.modalcvtext {
|
||||
color: hsla(218, 5%, 47%, .6);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-top: 3px;
|
||||
margin-bottom: 3px;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.ModalClose {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 0 0 36px;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
cursor: pointer;
|
||||
background-color: #f6f6f7;
|
||||
border-color: #dcddde;
|
||||
top: 30px;
|
||||
right: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 604px) {
|
||||
.Modal {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
height: 95%;
|
||||
width: 90%;
|
||||
transform: none;
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
padding: 5%;
|
||||
}
|
||||
}
|
||||
.Overlay {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.chatbox div .chatarea {
|
||||
height: 174px;
|
||||
}
|
||||
.chatarea {
|
||||
padding: 3px 3px 0px 3px;
|
||||
margin: 0px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
height: 95%;
|
||||
}
|
||||
.chatinput {
|
||||
height: 22px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.chatname {
|
||||
color: #4B0000;
|
||||
font-size: 13px;
|
||||
user-select: all;
|
||||
}
|
||||
.chatmsg {
|
||||
color: #030303;
|
||||
font-size: 13px;
|
||||
user-select: text;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.usermessages {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
}
|
||||
.stattext {
|
||||
font-size: 18px;
|
||||
}
|
||||
.statvalue {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #2d0045;
|
||||
}
|
||||
|
||||
.pressed {
|
||||
box-shadow:0 0 3px 2px rgba(0,0,0,.6);
|
||||
.Modal {
|
||||
border-radius: 21px;
|
||||
}
|
||||
|
||||
.notifyboxvis, .notifyboxhid {
|
||||
background-color: rgba(226, 226, 226, 0.80);
|
||||
position: absolute;
|
||||
top: 57px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
height: 30px;
|
||||
width: 20px;
|
||||
color: black;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
border: solid black;
|
||||
border-width: thin;
|
||||
padding: 0 24px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.notifyboxvis {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: visibility 0s, opacity 0.5s linear;
|
||||
}
|
||||
.notifyboxhid {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: visibility 0.5s, opacity 0.5s linear;
|
||||
}
|
||||
|
||||
.cooldownbox {
|
||||
top: 16px;
|
||||
width: 48px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.actionbuttons {
|
||||
vertical-align: text-bottom;
|
||||
cursor: pointer;
|
||||
width: 36px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.actionbuttons:hover, .coorbox:hover, #menu > div:hover {
|
||||
background-color: #d2d2d2cc;
|
||||
}
|
||||
|
||||
.palettebox {
|
||||
z-index: 1;
|
||||
bottom: 59px;
|
||||
padding: 3px;
|
||||
position: fixed;
|
||||
right: 16px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#colors .selected,
|
||||
#colors span:hover {
|
||||
z-index: 2 !important;
|
||||
outline: rgb(234, 234, 234) solid 1px;
|
||||
box-shadow: rgba(0, 0, 0, 0.80) 0px 0px 5px 2px;
|
||||
-ms-transform: scale(1.10,1.10); /* IE 9 */
|
||||
-webkit-transform: scale(1.10,1.10); /* Safari */
|
||||
transform: scale(1.10,1.10); /* Standard syntax */
|
||||
}
|
||||
|
||||
#outstreamContainer {
|
||||
position: fixed;
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
background-color: black;
|
||||
z-index: 9000;
|
||||
}
|
||||
|
||||
.grecaptcha-badge {
|
||||
visibility: hidden;
|
||||
border-radius: 21px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,11 +4,7 @@
|
|||
*/
|
||||
|
||||
import configureStore from '../store/configureStore';
|
||||
import setStyle from './setStyle';
|
||||
|
||||
const store = configureStore(() => {
|
||||
const state = store.getState();
|
||||
setStyle(state.gui.style);
|
||||
});
|
||||
const store = configureStore();
|
||||
|
||||
export default store;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user