gingervitis
6 years ago
18 changed files with 373 additions and 529 deletions
@ -0,0 +1,25 @@
@@ -0,0 +1,25 @@
|
||||
// styles for social handles editing section |
||||
|
||||
.social-option, |
||||
.social-dropdown { |
||||
.ant-select-item-option-content, |
||||
.ant-select-selection-item { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: flex-start; |
||||
align-items: center; |
||||
padding: .25em; |
||||
line-height: normal; |
||||
|
||||
.option-icon { |
||||
height: 1.5em; |
||||
width: 1.5em; |
||||
line-height: normal; |
||||
} |
||||
.option-label { |
||||
display: inline-block; |
||||
margin-left: 1em; |
||||
line-height: normal; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,49 @@
@@ -0,0 +1,49 @@
|
||||
// styles for Storage config section |
||||
|
||||
|
||||
.edit-storage-container { |
||||
.form-fields { |
||||
display: none; |
||||
margin-bottom: 1em; |
||||
} |
||||
&.enabled { |
||||
.form-fields { |
||||
display: block; |
||||
} |
||||
} |
||||
|
||||
.button-container { |
||||
margin: 1em 0; |
||||
} |
||||
.advanced-section { |
||||
margin: 1em 0; |
||||
} |
||||
} |
||||
|
||||
|
||||
// Do something special for the stream key field |
||||
.field-streamkey-container { |
||||
margin-bottom: 1.5em; |
||||
.field-tip { |
||||
color: var(--ant-warning); |
||||
} |
||||
.left-side { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: flex-start; |
||||
} |
||||
|
||||
.textfield-with-submit-container { |
||||
margin-bottom: 0; |
||||
} |
||||
|
||||
.streamkey-actions { |
||||
white-space: nowrap; |
||||
button { |
||||
margin: .25em; |
||||
} |
||||
@media (max-width: 800px) { |
||||
margin-top: 2em; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,37 @@
@@ -0,0 +1,37 @@
|
||||
// config tags block |
||||
|
||||
.tag-current-tags { |
||||
.ant-tag { |
||||
margin: .1rem; |
||||
font-size: .85rem; |
||||
border-radius: 10em; |
||||
padding: .25em 1em; |
||||
background-color: rgba(255,255,255,.5); |
||||
|
||||
.ant-tag-close-icon { |
||||
transform: translateY(-1px); |
||||
margin-left: .3rem; |
||||
padding: 2px; |
||||
border-radius: 5rem; |
||||
border: 1px solid #eee; |
||||
&:hover { |
||||
border-color: #e03; |
||||
svg { |
||||
fill: black; |
||||
transition: fill .3s; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.add-new-tag-section { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: flex-start; |
||||
align-items: center; |
||||
|
||||
.new-tag-input { |
||||
width: 16em; |
||||
} |
||||
} |
||||
@ -0,0 +1,85 @@
@@ -0,0 +1,85 @@
|
||||
// styles for Video variant editor (table + modal) |
||||
|
||||
|
||||
.config-variant-form { |
||||
.blurb { |
||||
margin: 1em; |
||||
opacity: .75; |
||||
} |
||||
.note { |
||||
display: inline-block; |
||||
margin-left: 1em; |
||||
font-size: .75em; |
||||
opacity: .5; |
||||
font-style: italic; |
||||
} |
||||
.section-intro { |
||||
margin-bottom: 2em; |
||||
} |
||||
.field { |
||||
margin-bottom: 2em; |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: center; |
||||
align-items: flex-start; |
||||
transform: opacity .15s; |
||||
&.disabled { |
||||
opacity: .25; |
||||
} |
||||
|
||||
.label { |
||||
width: 40%; |
||||
text-align: right; |
||||
padding-right: 2em; |
||||
font-weight: bold; |
||||
color: var(--owncast-purple); |
||||
} |
||||
.info-tip { |
||||
margin-right: 1em; |
||||
} |
||||
.form-component { |
||||
width: 60%; |
||||
|
||||
.selected-value-note { |
||||
font-size: .85em; |
||||
display: inline-block; |
||||
text-align: center; |
||||
} |
||||
} |
||||
} |
||||
.ant-collapse { |
||||
border: none; |
||||
border-radius: 6px; |
||||
} |
||||
.ant-collapse > .ant-collapse-item:last-child, |
||||
.ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header { |
||||
border: none; |
||||
background-color: rgba(0,0,0,.25); |
||||
border-radius: 6px; |
||||
} |
||||
.ant-collapse-content { |
||||
background-color: rgba(0,0,0,.1); |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
.config-video-segements-conatiner { |
||||
|
||||
.status-message { |
||||
text-align: center; |
||||
} |
||||
} |
||||
|
||||
|
||||
.variants-table { |
||||
.actions { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
.delete-button { |
||||
margin-left: .5em; |
||||
opacity: .8; |
||||
} |
||||
} |
||||
@ -0,0 +1,64 @@
@@ -0,0 +1,64 @@
|
||||
/* Base styles for misc helper components around forms */ |
||||
|
||||
/* STATUS-CONTAINER BASE */ |
||||
.status-container { |
||||
&.status-success { |
||||
color: var(--ant-success); |
||||
} |
||||
&.status-error { |
||||
color: var(--ant-error); |
||||
} |
||||
&.status-warning { |
||||
color: var(--ant-warning); |
||||
} |
||||
|
||||
&.empty { |
||||
display: none; |
||||
} |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: flex-start; |
||||
align-items: center; |
||||
font-size: .75rem; |
||||
.status-icon { |
||||
display: inline-block; |
||||
margin-right: .5em; |
||||
} |
||||
} |
||||
|
||||
|
||||
/* TIP CONTAINER BASE */ |
||||
.field-tip { |
||||
font-size: .7em; |
||||
color: rgba(255,255,255,.5) |
||||
} |
||||
|
||||
|
||||
/* |
||||
Ideal for wrapping each Textfield on a page with many text fields in a row. This div will alternate colors and look like a table. |
||||
*/ |
||||
.field-container { |
||||
padding: .85em 0 .5em; |
||||
&:nth-child(even) { |
||||
background-color: rgba(0,0,0,.25); |
||||
} |
||||
} |
||||
|
||||
|
||||
/* SEGMENT SLIDER */ |
||||
.segment-slider-container { |
||||
width: 90%; |
||||
margin: auto; |
||||
padding: 1em 2em .75em; |
||||
background-color: black; |
||||
border-radius: 1em; |
||||
} |
||||
|
||||
|
||||
.segment-tip { |
||||
width: 10em; |
||||
text-align: center; |
||||
margin: auto; |
||||
display: inline-block; |
||||
} |
||||
|
||||
@ -0,0 +1,29 @@
@@ -0,0 +1,29 @@
|
||||
/* TOGGLE SWITCH-WITH-SUBMIT-CONTAINER BASE */ |
||||
|
||||
|
||||
.toggleswitch-container { |
||||
|
||||
.status-container { |
||||
margin-top: .25rem; |
||||
} |
||||
|
||||
.toggleswitch { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: flex-start; |
||||
.label { |
||||
font-weight: bold; |
||||
color: var(--owncast-purple); |
||||
} |
||||
.info-tip { |
||||
margin-left: .5rem; |
||||
svg { |
||||
fill: white; |
||||
} |
||||
} |
||||
.ant-form-item { |
||||
margin: 0 .75rem 0 0; |
||||
} |
||||
} |
||||
} |
||||
@ -1,27 +1,27 @@
@@ -1,27 +1,27 @@
|
||||
import React, { useState, useEffect } from 'react'; |
||||
import React, { useState } from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
|
||||
export const AlertMessageContext = React.createContext({ |
||||
message: null, |
||||
setMessage: (text?: string) => { |
||||
return text; |
||||
} |
||||
message: null, |
||||
setMessage: (text?: string) => { |
||||
return text; |
||||
}, |
||||
}); |
||||
|
||||
const AlertMessageProvider = ({ children }) => { |
||||
const [message, setMessage] = useState(''); |
||||
|
||||
const providerValue = { |
||||
message, |
||||
setMessage |
||||
} |
||||
return ( |
||||
<AlertMessageContext.Provider value={providerValue}>{children}</AlertMessageContext.Provider> |
||||
) |
||||
} |
||||
const [message, setMessage] = useState(''); |
||||
|
||||
const providerValue = { |
||||
message, |
||||
setMessage, |
||||
}; |
||||
return ( |
||||
<AlertMessageContext.Provider value={providerValue}>{children}</AlertMessageContext.Provider> |
||||
); |
||||
}; |
||||
|
||||
AlertMessageProvider.propTypes = { |
||||
children: PropTypes.element.isRequired |
||||
children: PropTypes.element.isRequired, |
||||
}; |
||||
|
||||
export default AlertMessageProvider; |
||||
export default AlertMessageProvider; |
||||
|
||||
Loading…
Reference in new issue