mirror of
https://codeberg.org/demostf/frontend.git
synced 2026-06-03 18:24:12 +02:00
fix sync
This commit is contained in:
parent
8f9eeadb74
commit
b08267a08c
10 changed files with 318 additions and 304 deletions
2
Cargo.lock
generated
2
Cargo.lock
generated
|
|
@ -953,7 +953,7 @@ dependencies = [
|
|||
|
||||
[[package]]
|
||||
name = "demostf-frontend"
|
||||
version = "1.0.0"
|
||||
version = "1.0.1"
|
||||
dependencies = [
|
||||
"async-session",
|
||||
"axum",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
[package]
|
||||
name = "demostf-frontend"
|
||||
version = "1.0.0"
|
||||
version = "1.0.1"
|
||||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
|
|
|
|||
30
flake.lock
generated
30
flake.lock
generated
|
|
@ -22,17 +22,14 @@
|
|||
]
|
||||
},
|
||||
"locked": {
|
||||
"lastModified": 1731933812,
|
||||
"narHash": "sha256-PeuRDDq1DcHxbOmXWb3nWMp5PqWUn5PSKimNbUzWEaQ=",
|
||||
"owner": "nix-community",
|
||||
"repo": "flakelight",
|
||||
"rev": "f4b26f683be5c9ac1ec05f968dbbcb35f4bb6346",
|
||||
"type": "github"
|
||||
"lastModified": 1732198790,
|
||||
"narHash": "sha256-VNTFKcX52PRh3I88ofYTyBWCtqVQB3fVIMO64HHs3+0=",
|
||||
"path": "/home/robin/Projects/flakelight",
|
||||
"type": "path"
|
||||
},
|
||||
"original": {
|
||||
"owner": "nix-community",
|
||||
"repo": "flakelight",
|
||||
"type": "github"
|
||||
"path": "/home/robin/Projects/flakelight",
|
||||
"type": "path"
|
||||
}
|
||||
},
|
||||
"mill-scale": {
|
||||
|
|
@ -44,17 +41,14 @@
|
|||
"rust-overlay": "rust-overlay"
|
||||
},
|
||||
"locked": {
|
||||
"lastModified": 1732197065,
|
||||
"narHash": "sha256-Lyosd/rJHFp1xnWPNhukQkW1hFtIiIiVDxQ+fcVypgI=",
|
||||
"owner": "icewind1991",
|
||||
"repo": "mill-scale",
|
||||
"rev": "8051d162308a80dde168b7efe012bfa1363be4ba",
|
||||
"type": "github"
|
||||
"lastModified": 1732212005,
|
||||
"narHash": "sha256-t2+yKoxZe2JkvyHkJAAyyLS6N8yzyx0o95DuzHqv7JA=",
|
||||
"path": "/home/robin/Projects/mill-scale",
|
||||
"type": "path"
|
||||
},
|
||||
"original": {
|
||||
"owner": "icewind1991",
|
||||
"repo": "mill-scale",
|
||||
"type": "github"
|
||||
"path": "/home/robin/Projects/mill-scale",
|
||||
"type": "path"
|
||||
}
|
||||
},
|
||||
"nixpkgs": {
|
||||
|
|
|
|||
|
|
@ -2,11 +2,13 @@
|
|||
inputs = {
|
||||
nixpkgs.url = "nixpkgs/nixos-24.05";
|
||||
flakelight = {
|
||||
url = "github:nix-community/flakelight";
|
||||
# url = "github:nix-community/flakelight";
|
||||
url = "path:/home/robin/Projects/flakelight";
|
||||
inputs.nixpkgs.follows = "nixpkgs";
|
||||
};
|
||||
mill-scale = {
|
||||
url = "github:icewind1991/mill-scale";
|
||||
# url = "github:icewind1991/mill-scale";
|
||||
url = "path:/home/robin/Projects/mill-scale";
|
||||
inputs.flakelight.follows = "flakelight";
|
||||
};
|
||||
npmlock2nix = {
|
||||
|
|
@ -37,6 +39,8 @@
|
|||
];
|
||||
toolchain = pkgs: pkgs.rust-bin.fromRustupToolchainFile ./rust-toolchain.toml;
|
||||
tools = pkgs: with pkgs; [
|
||||
bacon
|
||||
cargo-edit
|
||||
nodejs
|
||||
nodePackages.svgo
|
||||
typescript
|
||||
|
|
|
|||
|
|
@ -1,26 +1,29 @@
|
|||
export interface AnalyseMenuProps {
|
||||
sessionName: string;
|
||||
onShare: Function;
|
||||
canShare: boolean;
|
||||
isShared: boolean;
|
||||
sessionName: string;
|
||||
onShare: Function;
|
||||
canShare: boolean;
|
||||
isShared: boolean;
|
||||
}
|
||||
|
||||
export function AnalyseMenu({sessionName, onShare, canShare, isShared}:AnalyseMenuProps) {
|
||||
export function AnalyseMenu(props: AnalyseMenuProps) {
|
||||
const loc = () => window.location.toString().replace(/\#.*/, '') + '#' + props.sessionName;
|
||||
const shareText = () => (props.isShared) ?
|
||||
<input class="share-text" value={loc()} readOnly={true}
|
||||
title="Use this link to join the current session"
|
||||
style={{width: `${(loc().length * 8)}px`}}
|
||||
onFocus={(event) => {
|
||||
(event.target as HTMLInputElement).select()
|
||||
}}/> : '';
|
||||
|
||||
const loc = window.location.toString().replace(/\#.+/, '') + '#' + sessionName;
|
||||
const shareText = (isShared) ?
|
||||
<input class="share-text" value={loc} readOnly={true}
|
||||
title="Use this link to join the current session"
|
||||
style={{width: `${(loc.length*8)}px`}}
|
||||
onFocus={(event)=>{(event.target as HTMLInputElement).select()}}/> : '';
|
||||
const shareButton = () => (props.canShare) ? <div class="analyse-menu">
|
||||
<button class="share-session" title="Start a shared session"
|
||||
onClick={() => {
|
||||
props.onShare()
|
||||
}}/>
|
||||
{shareText}
|
||||
</div> : '';
|
||||
|
||||
const shareButton = (canShare) ? <div class="analyse-menu">
|
||||
<button class="share-session" title="Start a shared session"
|
||||
onClick={()=>{onShare()}}/>
|
||||
{shareText}
|
||||
</div>: '';
|
||||
|
||||
return (<div>
|
||||
{shareButton}
|
||||
</div>)
|
||||
return (<div>
|
||||
{shareButton}
|
||||
</div>)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,178 +12,182 @@ import {Session, StateUpdate} from "./Session";
|
|||
import {DemoHead} from "../../header";
|
||||
|
||||
export interface AnalyseProps {
|
||||
header: DemoHead;
|
||||
isStored: boolean;
|
||||
parser: AsyncParser;
|
||||
header: DemoHead;
|
||||
isStored: boolean;
|
||||
parser: AsyncParser;
|
||||
}
|
||||
|
||||
export const Analyser = (props: AnalyseProps) => {
|
||||
const parser = props.parser;
|
||||
const intervalPerTick = props.header.duration / props.header.ticks;
|
||||
const parser = props.parser;
|
||||
const intervalPerTick = props.header.duration / props.header.ticks;
|
||||
|
||||
const [tick, setTick] = createSignal<number>(0);
|
||||
const [scale, setScale] = createSignal<number>(1);
|
||||
const [playing, setPlaying] = createSignal<boolean>(false);
|
||||
const [sessionName, setSessionName] = createSignal<string>("");
|
||||
const [tick, setTick] = createSignal<number>(0);
|
||||
const [scale, setScale] = createSignal<number>(1);
|
||||
const [playing, setPlaying] = createSignal<boolean>(false);
|
||||
const [sessionName, setSessionName] = createSignal<string>("");
|
||||
|
||||
let lastFrameTime = 0;
|
||||
let playStartTick = 0;
|
||||
let playStartTime = 0;
|
||||
let lastFrameTime = 0;
|
||||
let playStartTick = 0;
|
||||
let playStartTime = 0;
|
||||
|
||||
const onUpdate = (update: StateUpdate) => {
|
||||
if (update["tick"]) {
|
||||
setTick(update["tick"]);
|
||||
}
|
||||
if (update["playing"]) {
|
||||
setPlaying(update["playing"]);
|
||||
}
|
||||
}
|
||||
const onUpdate = (update: StateUpdate) => {
|
||||
if (update["tick"]) {
|
||||
setTick(update["tick"]);
|
||||
}
|
||||
if (update.hasOwnProperty("playing")) {
|
||||
if (update["playing"]) {
|
||||
play();
|
||||
} else {
|
||||
pause();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let session: Session | null = null;
|
||||
if (props.isStored && window.location.hash) {
|
||||
const parsed = parseInt(window.location.hash.substr(1), 10);
|
||||
if (('#' + parsed) === window.location.hash) {
|
||||
setTick(Math.floor(parsed));
|
||||
} else {
|
||||
const name = window.location.hash.substring(1);
|
||||
Session.join(name, onUpdate);
|
||||
setSessionName(name);
|
||||
}
|
||||
}
|
||||
let session: Session | null = null;
|
||||
if (props.isStored && window.location.hash) {
|
||||
const parsed = parseInt(window.location.hash.substr(1), 10);
|
||||
if (('#' + parsed) === window.location.hash) {
|
||||
setTick(Math.floor(parsed));
|
||||
} else {
|
||||
const name = window.location.hash.substring(1);
|
||||
session = Session.join(name, onUpdate);
|
||||
setSessionName(name);
|
||||
}
|
||||
}
|
||||
|
||||
const map = parser.demo.header.map;
|
||||
const backgroundBoundaries = getMapBoundaries(map);
|
||||
if (!backgroundBoundaries) {
|
||||
throw new Error(`Map not supported "${map}".`);
|
||||
}
|
||||
const worldSize = {
|
||||
width: backgroundBoundaries.boundary_max.x - backgroundBoundaries.boundary_min.x,
|
||||
height: backgroundBoundaries.boundary_max.y - backgroundBoundaries.boundary_min.y,
|
||||
};
|
||||
const map = parser.demo.header.map;
|
||||
const backgroundBoundaries = getMapBoundaries(map);
|
||||
if (!backgroundBoundaries) {
|
||||
throw new Error(`Map not supported "${map}".`);
|
||||
}
|
||||
const worldSize = {
|
||||
width: backgroundBoundaries.boundary_max.x - backgroundBoundaries.boundary_min.x,
|
||||
height: backgroundBoundaries.boundary_max.y - backgroundBoundaries.boundary_min.y,
|
||||
};
|
||||
|
||||
const setTickNow = (tick) => {
|
||||
lastFrameTime = 0;
|
||||
playStartTick = tick;
|
||||
playStartTime = window.performance.now();
|
||||
setTick(tick);
|
||||
setHash(tick);
|
||||
if (session) {
|
||||
session.update({tick});
|
||||
}
|
||||
}
|
||||
const setTickNow = (tick) => {
|
||||
lastFrameTime = 0;
|
||||
playStartTick = tick;
|
||||
playStartTime = window.performance.now();
|
||||
setTick(tick);
|
||||
setHash(tick);
|
||||
if (session) {
|
||||
session.update({tick});
|
||||
}
|
||||
}
|
||||
|
||||
const pause = () => {
|
||||
setPlaying(false);
|
||||
lastFrameTime = 0;
|
||||
if (session) {
|
||||
session.update({playing: false});
|
||||
}
|
||||
}
|
||||
const pause = () => {
|
||||
setPlaying(false);
|
||||
lastFrameTime = 0;
|
||||
if (session) {
|
||||
session.update({playing: false});
|
||||
}
|
||||
}
|
||||
|
||||
const play = () => {
|
||||
playStartTick = tick();
|
||||
playStartTime = window.performance.now();
|
||||
setPlaying(true);
|
||||
requestAnimationFrame(animFrame);
|
||||
if (session) {
|
||||
session.update({playing: false});
|
||||
}
|
||||
}
|
||||
const play = () => {
|
||||
playStartTick = tick();
|
||||
playStartTime = window.performance.now();
|
||||
setPlaying(true);
|
||||
requestAnimationFrame(animFrame);
|
||||
if (session) {
|
||||
session.update({playing: true});
|
||||
}
|
||||
}
|
||||
|
||||
const togglePlay = () => {
|
||||
if (playing()) {
|
||||
pause();
|
||||
} else {
|
||||
play();
|
||||
}
|
||||
}
|
||||
const togglePlay = () => {
|
||||
if (playing()) {
|
||||
pause();
|
||||
} else {
|
||||
play();
|
||||
}
|
||||
}
|
||||
|
||||
const syncPlayTick = debounce(500, () => {
|
||||
if (session) {
|
||||
session.update({
|
||||
playing: playing(),
|
||||
tick: tick(),
|
||||
});
|
||||
}
|
||||
});
|
||||
const syncPlayTick = throttle(2500, () => {
|
||||
if (session) {
|
||||
session.update({
|
||||
playing: playing(),
|
||||
tick: tick(),
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const setHash = debounce(250, (tick) => {
|
||||
if (!session && props.isStored) {
|
||||
history.replaceState('', '', '#' + tick);
|
||||
}
|
||||
});
|
||||
const setHash = debounce(250, (tick) => {
|
||||
if (!session && props.isStored) {
|
||||
history.replaceState('', '', '#' + tick);
|
||||
}
|
||||
});
|
||||
|
||||
const animFrame = (timestamp:number) => {
|
||||
const timePassed = (timestamp - playStartTime) / 1000;
|
||||
const targetTick = playStartTick + (Math.round(timePassed / intervalPerTick));
|
||||
lastFrameTime = timestamp;
|
||||
if (targetTick >= (parser.demo.tick - 1)) {
|
||||
pause();
|
||||
}
|
||||
setHash(targetTick);
|
||||
setTick(targetTick);
|
||||
syncPlayTick();
|
||||
const animFrame = (timestamp: number) => {
|
||||
const timePassed = (timestamp - playStartTime) / 1000;
|
||||
const targetTick = playStartTick + (Math.round(timePassed / intervalPerTick));
|
||||
lastFrameTime = timestamp;
|
||||
if (targetTick >= (parser.demo.tick - 1)) {
|
||||
pause();
|
||||
}
|
||||
setHash(targetTick);
|
||||
setTick(targetTick);
|
||||
syncPlayTick();
|
||||
|
||||
if (playing()) {
|
||||
requestAnimationFrame(animFrame);
|
||||
}
|
||||
}
|
||||
if (playing()) {
|
||||
requestAnimationFrame(animFrame);
|
||||
}
|
||||
}
|
||||
|
||||
const players = () => parser.getPlayersAtTick(tick());
|
||||
const buildings = () => parser.getBuildingsAtTick(tick());
|
||||
const kills = parser.getKills();
|
||||
const playButtonText = () => (playing()) ? '⏸' : '▶️';
|
||||
const disabled = session && !session.isOwner();
|
||||
const isShared = () => sessionName() !== '';
|
||||
const players = () => parser.getPlayersAtTick(tick());
|
||||
const buildings = () => parser.getBuildingsAtTick(tick());
|
||||
const kills = parser.getKills();
|
||||
const playButtonText = () => (playing()) ? '⏸' : '▶️';
|
||||
const disabled = session && !session.isOwner();
|
||||
const isShared = () => sessionName() !== '';
|
||||
|
||||
console.log(intervalPerTick);
|
||||
console.log(intervalPerTick);
|
||||
|
||||
const timeTitle = () => `${tickToTime(tick(), intervalPerTick)} (tick ${tick()})`;
|
||||
const timeTitle = () => `${tickToTime(tick(), intervalPerTick)} (tick ${tick()})`;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div class="map-holder">
|
||||
<MapContainer contentSize={worldSize}
|
||||
onScale={setScale}>
|
||||
<MapRender size={worldSize}
|
||||
players={players()}
|
||||
buildings={buildings()}
|
||||
header={props.header}
|
||||
world={backgroundBoundaries}
|
||||
scale={scale()}/>
|
||||
</MapContainer>
|
||||
<AnalyseMenu sessionName={sessionName()}
|
||||
onShare={() => {
|
||||
session = Session.create({
|
||||
tick: tick(),
|
||||
playing: playing()
|
||||
});
|
||||
setSessionName(session.sessionName);
|
||||
}}
|
||||
canShare={props.isStored && !disabled}
|
||||
isShared={isShared()}
|
||||
/>
|
||||
<SpecHUD parser={parser} tick={tick()}
|
||||
players={players()} kills={kills}/>
|
||||
</div>
|
||||
<div class="time-control"
|
||||
title={timeTitle()}>
|
||||
<input class="play-pause-button" type="button"
|
||||
value={playButtonText()}
|
||||
disabled={disabled}
|
||||
onClick={togglePlay}
|
||||
/>
|
||||
<Timeline parser={parser} tick={tick()}
|
||||
onSetTick={throttle(50, (tick) => {
|
||||
setTickNow(tick);
|
||||
})}
|
||||
disabled={disabled}/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
<div class="map-holder">
|
||||
<MapContainer contentSize={worldSize}
|
||||
onScale={setScale}>
|
||||
<MapRender size={worldSize}
|
||||
players={players()}
|
||||
buildings={buildings()}
|
||||
header={props.header}
|
||||
world={backgroundBoundaries}
|
||||
scale={scale()}/>
|
||||
</MapContainer>
|
||||
<AnalyseMenu sessionName={sessionName()}
|
||||
onShare={() => {
|
||||
session = Session.create({
|
||||
tick: tick(),
|
||||
playing: playing()
|
||||
});
|
||||
setSessionName(session.sessionName);
|
||||
}}
|
||||
canShare={props.isStored && !disabled}
|
||||
isShared={isShared()}
|
||||
/>
|
||||
<SpecHUD parser={parser} tick={tick()}
|
||||
players={players()} kills={kills}/>
|
||||
</div>
|
||||
<div class="time-control"
|
||||
title={timeTitle()}>
|
||||
<input class="play-pause-button" type="button"
|
||||
value={playButtonText()}
|
||||
disabled={disabled}
|
||||
onClick={togglePlay}
|
||||
/>
|
||||
<Timeline parser={parser} tick={tick()}
|
||||
onSetTick={throttle(50, (tick) => {
|
||||
setTickNow(tick);
|
||||
})}
|
||||
disabled={disabled}/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function tickToTime(tick: number, intervalPerTick: number): string {
|
||||
let seconds = Math.floor(tick * intervalPerTick);
|
||||
return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}`;
|
||||
let seconds = Math.floor(tick * intervalPerTick);
|
||||
return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ export class Session {
|
|||
this.sessionName = name;
|
||||
this.initialState = initialState;
|
||||
this.onState = onState;
|
||||
this.open();
|
||||
}
|
||||
|
||||
public static create(state: PlaybackState): Session {
|
||||
|
|
@ -98,7 +99,7 @@ export class Session {
|
|||
tick: update["tick"]
|
||||
}));
|
||||
}
|
||||
if (update["playing"]) {
|
||||
if (update.hasOwnProperty("playing")) {
|
||||
this.socket.send(JSON.stringify({
|
||||
type: 'play',
|
||||
session: this.sessionName,
|
||||
|
|
|
|||
|
|
@ -293,10 +293,10 @@ impl Render for DemoFormat {
|
|||
MapMode::Ultiduo => "Ultiduo",
|
||||
MapMode::Bball => "BBall",
|
||||
MapMode::Other => match self.player_count {
|
||||
17 | 18 | 19 => "HL",
|
||||
15 | 14 => "Prolander",
|
||||
13 | 12 | 11 => "6v6",
|
||||
7 | 8 | 9 => "4v4",
|
||||
17..=19 => "HL",
|
||||
14..=15 => "Prolander",
|
||||
11..=13 => "6v6",
|
||||
7..=9 => "4v4",
|
||||
_ => "Other",
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,42 +1,42 @@
|
|||
.analyse-menu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0.5;
|
||||
transition: all 0.5s;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0.5;
|
||||
transition: all 0.5s;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
& .share-session {
|
||||
|
||||
background: transparent;
|
||||
color: var(--primary-color);
|
||||
font-size: 200%;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: 10px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
background-image: url("images/link_white.svg");
|
||||
background-size: contain;
|
||||
|
||||
&:active, &:focus {
|
||||
outline: none;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
& .share-text {
|
||||
color: var(--primary-color);
|
||||
background-color: var(--text-secondary);
|
||||
padding: 5px;
|
||||
margin-top: 0;
|
||||
border: 1px #888 solid;
|
||||
border-radius: 5px;
|
||||
& .share-session {
|
||||
|
||||
&:active, &:focus {
|
||||
outline: none;
|
||||
background: transparent;
|
||||
color: var(--primary-color);
|
||||
font-size: 200%;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: 10px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
background-image: url("inline://images//link_white.svg");
|
||||
background-size: contain;
|
||||
|
||||
&:active, &:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
& .share-text {
|
||||
color: var(--primary-color);
|
||||
background-color: var(--text-secondary);
|
||||
padding: 5px;
|
||||
margin-top: 0;
|
||||
border: 1px #888 solid;
|
||||
border-radius: 5px;
|
||||
|
||||
&:active, &:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,75 +1,83 @@
|
|||
.map-holder {
|
||||
position: fixed;
|
||||
top: 32px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: calc(100% - 32px - 100px);
|
||||
position: fixed;
|
||||
top: 32px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: calc(100% - 32px - 100px);
|
||||
}
|
||||
|
||||
.time-control {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
background-color: var(--primary-color-accent);
|
||||
|
||||
& .timeline {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 64px;
|
||||
width: calc(100% - 64px);
|
||||
}
|
||||
|
||||
& .play-pause-button {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
width: 64px;
|
||||
background-color: transparent;
|
||||
color: black;
|
||||
font-size: 200%;
|
||||
border: none;
|
||||
background-color: var(--primary-color-accent);
|
||||
|
||||
&:focus, &:active {
|
||||
outline: none;
|
||||
& .timeline {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 64px;
|
||||
width: calc(100% - 64px);
|
||||
|
||||
& .timeline-progress[disabled] {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
& .play-pause-button {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 100px;
|
||||
width: 64px;
|
||||
background-color: transparent;
|
||||
color: black;
|
||||
font-size: 200%;
|
||||
border: none;
|
||||
|
||||
&:focus, &:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.error-holder {
|
||||
.error-image {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
font-size: 250%;
|
||||
.error-image {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
font-size: 250%;
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
content: '';
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
background-image: url('images/teleporter.png');
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
margin: 50px 0;
|
||||
&::after {
|
||||
display: block;
|
||||
content: '';
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
background-image: url('images/teleporter.png');
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
margin: 50px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .error {
|
||||
background-color: #FF9494;
|
||||
line-height: 32px;
|
||||
margin: 0 -30px;
|
||||
padding: 32px;
|
||||
padding-left: 74px;
|
||||
background-image: url('images/error.png');
|
||||
background-size: 32px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 32px 32px;
|
||||
& .error {
|
||||
background-color: #FF9494;
|
||||
line-height: 32px;
|
||||
margin: 0 -30px;
|
||||
padding: 32px;
|
||||
padding-left: 74px;
|
||||
background-image: url('images/error.png');
|
||||
background-size: 32px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 32px 32px;
|
||||
|
||||
& .error-hint {
|
||||
margin-top: 32px;
|
||||
& .error-hint {
|
||||
margin-top: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue