mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-09 10:34:17 +00:00
add newStreaming
This commit is contained in:
srgooglo
parent
78760978d4
commit
8b85fe65a6
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
@ -1,3 +1,3 @@
|
||||
{
|
||||
"discord.enabled": true
|
||||
"discord.enabled": false
|
||||
}
|
||||
85
package-lock.json
generated
85
package-lock.json
generated
@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "comty",
|
||||
"version": "0.11.15",
|
||||
"version": "0.11.22",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "comty",
|
||||
"version": "0.11.15",
|
||||
"version": "0.11.22",
|
||||
"hasInstallScript": true,
|
||||
"license": "LGPL-2.1",
|
||||
"dependencies": {
|
||||
@ -19,6 +19,7 @@
|
||||
"antd": "^4.8.2",
|
||||
"axios": "^0.21.0",
|
||||
"babel-core": "^6.26.3",
|
||||
"chart.js": "^2.9.4",
|
||||
"classnames": "^2.2.6",
|
||||
"colors": "^1.4.0",
|
||||
"concat-stream": "^2.0.0",
|
||||
@ -16357,6 +16358,45 @@
|
||||
"integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/chart.js": {
|
||||
"version": "2.9.4",
|
||||
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz",
|
||||
"integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==",
|
||||
"dependencies": {
|
||||
"chartjs-color": "^2.1.0",
|
||||
"moment": "^2.10.2"
|
||||
}
|
||||
},
|
||||
"node_modules/chartjs-color": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
|
||||
"integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
|
||||
"dependencies": {
|
||||
"chartjs-color-string": "^0.6.0",
|
||||
"color-convert": "^1.9.3"
|
||||
}
|
||||
},
|
||||
"node_modules/chartjs-color-string": {
|
||||
"version": "0.6.0",
|
||||
"resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
|
||||
"integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
|
||||
"dependencies": {
|
||||
"color-name": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/chartjs-color/node_modules/color-convert": {
|
||||
"version": "1.9.3",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
||||
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
|
||||
"dependencies": {
|
||||
"color-name": "1.1.3"
|
||||
}
|
||||
},
|
||||
"node_modules/chartjs-color/node_modules/color-name": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
|
||||
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
|
||||
},
|
||||
"node_modules/check-types": {
|
||||
"version": "8.0.3",
|
||||
"resolved": "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz",
|
||||
@ -59427,6 +59467,47 @@
|
||||
"resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
|
||||
"integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA=="
|
||||
},
|
||||
"chart.js": {
|
||||
"version": "2.9.4",
|
||||
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz",
|
||||
"integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==",
|
||||
"requires": {
|
||||
"chartjs-color": "^2.1.0",
|
||||
"moment": "^2.10.2"
|
||||
}
|
||||
},
|
||||
"chartjs-color": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
|
||||
"integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
|
||||
"requires": {
|
||||
"chartjs-color-string": "^0.6.0",
|
||||
"color-convert": "^1.9.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"color-convert": {
|
||||
"version": "1.9.3",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
||||
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
|
||||
"requires": {
|
||||
"color-name": "1.1.3"
|
||||
}
|
||||
},
|
||||
"color-name": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
|
||||
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
|
||||
}
|
||||
}
|
||||
},
|
||||
"chartjs-color-string": {
|
||||
"version": "0.6.0",
|
||||
"resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
|
||||
"integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
|
||||
"requires": {
|
||||
"color-name": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"check-types": {
|
||||
"version": "8.0.3",
|
||||
"resolved": "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz",
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "comty",
|
||||
"UUID": "C8mVSr-4nmPp2-pr5Vrz-CU4kg4",
|
||||
"version": "0.11.15",
|
||||
"version": "0.11.22",
|
||||
"stage": "alpha",
|
||||
"description": "An prototype of a social network",
|
||||
"author": "RageStudio",
|
||||
@ -44,6 +44,7 @@
|
||||
"antd": "^4.8.2",
|
||||
"axios": "^0.21.0",
|
||||
"babel-core": "^6.26.3",
|
||||
"chart.js": "^2.9.4",
|
||||
"classnames": "^2.2.6",
|
||||
"colors": "^1.4.0",
|
||||
"concat-stream": "^2.0.0",
|
||||
|
||||
@ -3,9 +3,10 @@ import verbosity from 'core/libs/verbosity'
|
||||
import { connect } from 'umi'
|
||||
import classnames from 'classnames'
|
||||
|
||||
import {
|
||||
Primary
|
||||
} from './components'
|
||||
import { Primary } from './components'
|
||||
import { __legacy__objectToArray } from '@ragestudio/nodecore-utils'
|
||||
|
||||
const includeAllowedProps = [ "size" ]
|
||||
|
||||
@connect(({ app }) => ({ app }))
|
||||
export default class Overlay extends React.Component {
|
||||
@ -62,9 +63,9 @@ export default class Overlay extends React.Component {
|
||||
componentDidUpdate() {
|
||||
if (this.props.app.overlayElement) {
|
||||
document.addEventListener('keydown', this.keydownFilter, false)
|
||||
document.addEventListener('mousedown', this.handleClickOutside);
|
||||
document.addEventListener('mousedown', this.handleClickOutside)
|
||||
} else {
|
||||
document.removeEventListener('mousedown', this.handleClickOutside);
|
||||
document.removeEventListener('mousedown', this.handleClickOutside)
|
||||
}
|
||||
}
|
||||
|
||||
@ -73,6 +74,7 @@ export default class Overlay extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
let props = {}
|
||||
const { overlayElement, overlayActive } = this.props.app
|
||||
|
||||
const isOnMode = (mode) => {
|
||||
@ -84,15 +86,24 @@ export default class Overlay extends React.Component {
|
||||
|
||||
const renderElement = () => {
|
||||
if (overlayElement && overlayActive) {
|
||||
const renderProps = { id: overlayElement.id, mode: overlayElement.mode, fragment: overlayElement.element }
|
||||
return <Primary {...renderProps} />
|
||||
return <Primary {...overlayElement} />
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
try {
|
||||
__legacy__objectToArray(overlayElement).forEach((e) => {
|
||||
if (includeAllowedProps.includes(e.key)) {
|
||||
props[e.key] = e.value
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
// terrible (⓿_⓿)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
style={props.size? { width: props.size } : null}
|
||||
id="overlay"
|
||||
ref={this.setWrapperRef}
|
||||
focus="no_loose"
|
||||
|
||||
154
src/components/StreamingOverlay/index.js
Normal file
154
src/components/StreamingOverlay/index.js
Normal file
@ -0,0 +1,154 @@
|
||||
import React from 'react'
|
||||
import * as antd from 'antd'
|
||||
import * as Icons from 'components/Icons'
|
||||
import { connect } from 'umi'
|
||||
import { __legacy__objectToArray } from '@ragestudio/nodecore-utils'
|
||||
import classnames from 'classnames'
|
||||
|
||||
import StatisticConnection from './statistics/connection'
|
||||
|
||||
const statisticsComponents = {
|
||||
connection: <StatisticConnection />
|
||||
}
|
||||
|
||||
const statisticsList = [
|
||||
{
|
||||
id: "connection",
|
||||
title: <span><Icons.GitMerge /> Network</span>,
|
||||
help: "Measure your connection with our servers",
|
||||
default: true
|
||||
},
|
||||
{
|
||||
id: "audience",
|
||||
title: <span><Icons.Eye /> Audience</span>,
|
||||
help: "Blah blah blah",
|
||||
default: false
|
||||
}
|
||||
]
|
||||
|
||||
@connect(({ app, streaming }) => ({ app, streaming }))
|
||||
export default class StreamingPanel extends React.Component {
|
||||
|
||||
state = {
|
||||
activeStatistics: [],
|
||||
hidden: {}
|
||||
}
|
||||
|
||||
isHidden(key) {
|
||||
if (typeof (this.state.hidden[key]) == "undefined") {
|
||||
return true
|
||||
}
|
||||
|
||||
return this.state.hidden[key]
|
||||
}
|
||||
|
||||
handleHidden(key) {
|
||||
let updated = this.state.hidden
|
||||
|
||||
if (typeof (this.state.hidden[key]) == "undefined") {
|
||||
updated[key] = false
|
||||
} else {
|
||||
updated[key] = !this.state.hidden[key]
|
||||
}
|
||||
|
||||
this.setState({ hidden: updated })
|
||||
}
|
||||
|
||||
renderLiveTag() {
|
||||
return <div className={classnames(window.classToStyle("streamingPanel_onlivetag"), { ["active"]: this.props.streaming?.onStreaming })} >
|
||||
{this.props.streaming?.onStreaming ? "On Live" : "Offline"}
|
||||
</div>
|
||||
}
|
||||
|
||||
renderOptions() {
|
||||
return (
|
||||
<div className={window.classToStyle("streamingPanel_cardBody")}>
|
||||
<div>
|
||||
<h1><Icons.Activity /> Information </h1>
|
||||
</div>
|
||||
<div style={{ display: "flex", alignItems: "center" }}>
|
||||
<div className={classnames(window.classToStyle("streamingPanel_connectionIndicator"), { ["active"]: this.props.streaming?.isConnected })} > </div>
|
||||
{this.props.streaming?.isConnected ? "Connected" : "Disconnected"}
|
||||
</div>
|
||||
<div>
|
||||
<antd.Tag><Icons.Eye /> 0 Viewers </antd.Tag>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
renderStadistics() {
|
||||
const { isConnected, spectators } = this.props.streaming
|
||||
|
||||
const onChangeCheckbox = (e) => {
|
||||
let updated = this.state.activeStatistics
|
||||
updated[e] = !updated[e]
|
||||
|
||||
this.setState({ updated })
|
||||
}
|
||||
|
||||
const getCheckboxes = () => {
|
||||
return statisticsList.map(e => {
|
||||
if (!e.id) {
|
||||
return null
|
||||
}
|
||||
return <antd.Tooltip key={e.id} title={e.help} >
|
||||
<antd.Checkbox onChange={() => { onChangeCheckbox(e.id) }} defaultChecked={e.default} checked={this.state.activeStatistics[e.id]} key={e.id} >
|
||||
{e.title ?? e.id}
|
||||
</antd.Checkbox>
|
||||
</antd.Tooltip>
|
||||
})
|
||||
}
|
||||
|
||||
const renderCharts = () => {
|
||||
return __legacy__objectToArray(this.state.activeStatistics).map((e) => {
|
||||
if (e.value) {
|
||||
return statisticsComponents[e.key]
|
||||
}
|
||||
return null
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
{getCheckboxes()}
|
||||
</div>
|
||||
<div>
|
||||
{renderCharts()}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
console.log(this.props.streaming)
|
||||
return (
|
||||
<div id="streamingWrapper" className={window.classToStyle("streamingPanel_wrapper")} >
|
||||
<h1><Icons.Radio /> Your streaming</h1>
|
||||
<div className={window.classToStyle("streamingPanel_content")}>
|
||||
<div style={{ float: "left", display: "flex", fontSize: "27px", alignItems: "center", maxWidth: "80%" }}>
|
||||
<antd.Avatar style={{ width: "70px", height: "70px", marginRight: "17px" }} src={this.props.app.session_data.avatar} size="large" shape="square" />
|
||||
<h1 style={{ color: "#333", margin: 0 }}> @{this.props.app.session_data.username} </h1>
|
||||
</div>
|
||||
<div style={{ float: "right", width: "100px" }} >
|
||||
{this.renderLiveTag()}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ padding: "25px 40px" }} className={window.classToStyle("streamingPanel_content")}>
|
||||
<div style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "1fr 1fr",
|
||||
gridTemplateRows: "1fr",
|
||||
gap: "0px 20px"
|
||||
}}>
|
||||
{this.renderOptions()}
|
||||
{this.renderStadistics()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,58 @@
|
||||
import React from 'react'
|
||||
import Chart from 'chart.js'
|
||||
|
||||
const elementID = "statistic_connection"
|
||||
|
||||
export default class StatisticConnection extends React.Component {
|
||||
refComponent = null
|
||||
|
||||
createRef (node) {
|
||||
this.refComponent = node
|
||||
}
|
||||
|
||||
init() {
|
||||
new Chart(this.refComponent, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
|
||||
datasets: [{
|
||||
label: '# of Votes',
|
||||
data: [12, 19, 3, 5, 2, 3],
|
||||
backgroundColor: [
|
||||
'rgba(255, 99, 132, 0.2)',
|
||||
'rgba(54, 162, 235, 0.2)',
|
||||
'rgba(255, 206, 86, 0.2)',
|
||||
'rgba(75, 192, 192, 0.2)',
|
||||
'rgba(153, 102, 255, 0.2)',
|
||||
'rgba(255, 159, 64, 0.2)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgba(255, 99, 132, 1)',
|
||||
'rgba(54, 162, 235, 1)',
|
||||
'rgba(255, 206, 86, 1)',
|
||||
'rgba(75, 192, 192, 1)',
|
||||
'rgba(153, 102, 255, 1)',
|
||||
'rgba(255, 159, 64, 1)'
|
||||
],
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log(this.refComponent)
|
||||
return <canvas ref={(e) => this.createRef(e)} width="400" height="400">
|
||||
|
||||
</canvas>
|
||||
}
|
||||
}
|
||||
@ -1,9 +1,10 @@
|
||||
import StreamingOverlay from 'components/StreamingOverlay'
|
||||
|
||||
export function goLive(payload) {
|
||||
window.overlaySwap.open({
|
||||
id: 'search',
|
||||
mode: 'full',
|
||||
element: <div>
|
||||
SomeSomeSomeSomeSomeSomeSomeSomeSomeSome
|
||||
</div>
|
||||
mode: 'half',
|
||||
size: "50%",
|
||||
element: <StreamingOverlay />
|
||||
})
|
||||
}
|
||||
@ -59,8 +59,8 @@ export default class PrimaryLayout extends React.Component {
|
||||
|
||||
window.toogleSidebarCollapse = () => {
|
||||
this.props.dispatch({
|
||||
type: "app/handleCollapseSidebar",
|
||||
payload: !this.props.app.sidebar_collapsed
|
||||
type: "app/updateState",
|
||||
payload: { sidebar_collapsed: !this.props.app.sidebar_collapsed }
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -261,8 +261,6 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
if (!state.session_data) {
|
||||
verbosity(`session_data is not valid but the session is valid, updating from ws`)
|
||||
state.dispatcher({ type: "updateUserData" })
|
||||
|
||||
23
src/models/streaming.js
Normal file
23
src/models/streaming.js
Normal file
@ -0,0 +1,23 @@
|
||||
import verbosity from 'core/libs/verbosity'
|
||||
|
||||
export default {
|
||||
namespace: 'streaming',
|
||||
state: {
|
||||
onStreaming: false,
|
||||
isConnected: false,
|
||||
},
|
||||
effects: {
|
||||
*initStreaming({ payload }, { select, put }) {
|
||||
|
||||
},
|
||||
|
||||
},
|
||||
reducers: {
|
||||
updateState(state, { payload }) {
|
||||
return {
|
||||
...state,
|
||||
...payload,
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
14
src/pages/new_streaming/index.js
Normal file
14
src/pages/new_streaming/index.js
Normal file
@ -0,0 +1,14 @@
|
||||
import React from 'react'
|
||||
import * as antd from 'antd'
|
||||
import { connect } from 'umi'
|
||||
|
||||
@connect(({ app }) => ({ app }))
|
||||
export default class NewStreaming extends React.Component{
|
||||
render(){
|
||||
return(
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
52
src/pages/streams/index.js
Normal file
52
src/pages/streams/index.js
Normal file
@ -0,0 +1,52 @@
|
||||
import React from 'react'
|
||||
import * as antd from 'antd'
|
||||
import * as Icons from 'components/Icons'
|
||||
import { connect } from 'umi'
|
||||
import verbosity from 'core/libs/verbosity'
|
||||
|
||||
import { goLive } from 'core/models/helpers'
|
||||
|
||||
@connect(({ app }) => ({ app }))
|
||||
export default class Streams extends React.Component {
|
||||
|
||||
state = {
|
||||
list: []
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
try {
|
||||
|
||||
} catch (error) {
|
||||
verbosity([error])
|
||||
}
|
||||
}
|
||||
|
||||
availableList = () => {
|
||||
if (!Array.isArray(this.state.list)) {
|
||||
return false
|
||||
}
|
||||
if (this.state.list.length == 0) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
if (!this.availableList()) {
|
||||
return <div style={{ display: "flex", textAlign: "center", justifyContent: "center" }}>
|
||||
<antd.Result status="404" title="Its seems like nothing is on streaming" >
|
||||
<antd.Button onClick={() => {goLive()}} type="primary" >
|
||||
<Icons.Cast /> Start Streaming
|
||||
</antd.Button>
|
||||
</antd.Result>
|
||||
</div>
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -148,6 +148,7 @@ body {
|
||||
// Right Sidebar
|
||||
@__app_overlay_padding: 30px 30px 30px 35px;
|
||||
.app_right_sidebar_wrapper {
|
||||
opacity: 1;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
@ -166,6 +167,7 @@ body {
|
||||
transition: all @__app_SwapDuration ease-in-out;
|
||||
|
||||
&.swapped {
|
||||
opacity: 0;
|
||||
transform: translate(100%, 0);
|
||||
}
|
||||
}
|
||||
@ -225,8 +227,6 @@ body {
|
||||
|
||||
color: @Overlay_container1_def_color;
|
||||
|
||||
|
||||
|
||||
transition: all @__app_SwapDuration ease-in-out;
|
||||
}
|
||||
|
||||
@ -255,6 +255,82 @@ body {
|
||||
transition: all @__Global_Components_transitions_dur linear;
|
||||
}
|
||||
|
||||
// Streaming Drawer
|
||||
.app_streamingPanel_wrapper {
|
||||
h1 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.app_streamingPanel_content {
|
||||
h1 {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
display: inline-block;
|
||||
align-items: center;
|
||||
margin: auto;
|
||||
color: #333;
|
||||
border-radius: 14px;
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.app_streamingPanel_onlivetag {
|
||||
color: #9597A1;
|
||||
background-color: #cecece;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
font-size: 14;
|
||||
|
||||
transition: all 150ms ease-in-out;
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.app_streamingPanel_connectionIndicator {
|
||||
background-color: #cecece;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
|
||||
border-radius: 24px;
|
||||
transition: all 150ms ease-in-out;
|
||||
margin-right: 12px;
|
||||
|
||||
&.active {
|
||||
background-color: #38b000;
|
||||
}
|
||||
}
|
||||
|
||||
.app_streamingPanel_cardBody {
|
||||
> div {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.app_streamingPanel_hiddenkey {
|
||||
text-align: center;
|
||||
background-color: #cecece;
|
||||
border-radius: 7px;
|
||||
padding: 12px 0;
|
||||
filter: blur(4px);
|
||||
transition: all 150ms ease-in-out;
|
||||
|
||||
user-select: all;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.app_streamingPanel_hiddenkey:hover {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
// CardComponent (External Module)
|
||||
.cardComponent_wrapper {
|
||||
@ -266,7 +342,7 @@ body {
|
||||
padding: 10px;
|
||||
|
||||
|
||||
h2,h3,h4{
|
||||
h1,h2,h3,h4{
|
||||
color: #9597A1;
|
||||
font-family: Netflix Sans;
|
||||
font-style: normal;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user