SethTrowbridge/boxcast-playlist
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

revert border stuff

Browse Source
This commit is contained in:
TreetopFlyer 2022-04-28 11:02:23 -04:00
parent d7ea84ec95
commit d4bbc49260
1 changed files with 16 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
app.js
View File

@ -6,11 +6,11 @@ import { html } from "https://esm.sh/htm/react";
import styled from 'https://esm.sh/styled-components?deps=react@18'; import styled from 'https://esm.sh/styled-components?deps=react@18';
import { createElement as h, useState, useEffect, useRef } from 'https://esm.sh/react@18'; import { createElement as h, useState, useEffect, useRef } from 'https://esm.sh/react@18';
import { createRoot } from "https://esm.sh/react-dom/client"; import { createRoot } from "https://esm.sh/react-dom/client";
/*
import State01 from "./testdata-01.json" assert { type: "json" }; import State01 from "./testdata-01.json" assert { type: "json" };
import State02 from "./testdata-02.json" assert { type: "json" }; import State02 from "./testdata-02.json" assert { type: "json" };
import State03 from "./testdata-03.json" assert { type: "json" }; import State03 from "./testdata-03.json" assert { type: "json" };
*/
const StyledRoot = styled.div` const StyledRoot = styled.div`
.Boxcast-Upper .Boxcast-Upper
@ -134,42 +134,27 @@ const StyledRoot = styled.div`
display: block; display: block;
width: 100%; width: 100%;
padding: 5px 10px 5px 10px; padding: 5px 10px 5px 10px;
background: black; background: #0e2a3f;
cursor: pointer; cursor: pointer;
border: none; border: none;
color: white; color: white;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
transition: all 0.4s; transition: all 0.4s;
}
button:hover
{
border-radius: 50px;
}
button[disabled]
{
border-radius: 50px;
background: red !important;
}
&::before
{
content: " ";
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border: 0px solid transparent;
outline: 0px solid red;
transition: all 0.4s;
}
}
button[disabled]::before
{
top: -5px;
left: -5px;
border: 5px solid transparent;
outline: 5px solid red;
}
button:hover::before
{
outline: 5px solid red;
}
&.future button &.future button
{ {
background: #aaa; background: #c3b7a9;
} }
@media(max-width:500px) @media(max-width:500px)
@ -358,11 +343,13 @@ const App = props =>
<div class="Boxcast-Upper"> <div class="Boxcast-Upper">
<div class="Boxcast-Player" id=${PlayerID}></div> <div class="Boxcast-Player" id=${PlayerID}></div>
<!--
<div> <div>
<button onClick=${()=>ListSet(SortStart(State01))}>testdata-01</button> <button onClick=${()=>ListSet(SortStart(State01))}>testdata-01</button>
<button onClick=${()=>ListSet(SortStart(State02))}>testdata-02</button> <button onClick=${()=>ListSet(SortStart(State02))}>testdata-02</button>
<button onClick=${()=>ListSet(SortStart(State03))}>testdata-03</button> <button onClick=${()=>ListSet(SortStart(State03))}>testdata-03</button>
</div> </div>
-->
<div class="Boxcast-Active"> <div class="Boxcast-Active">
<h2>${ ListGet.filter( item=>item.id == SelectedGet )[0]?.name }</h2> <h2>${ ListGet.filter( item=>item.id == SelectedGet )[0]?.name }</h2>