Updating files for owncast 0.1.1; changing owncast theme
This commit is contained in:
parent
dd437f9b71
commit
73c7761837
|
|
@ -4,6 +4,12 @@
|
||||||
|
|
||||||
Customisations for OwnCast
|
Customisations for OwnCast
|
||||||
|
|
||||||
|
== owncast colours
|
||||||
|
|
||||||
|
* Action: #1DAD27
|
||||||
|
* Action Hover: #7BFA56
|
||||||
|
* Primary Button Border: #7BC965
|
||||||
|
|
||||||
== custom page content
|
== custom page content
|
||||||
|
|
||||||
Please ignore how markdown parsers render this file since it is not intended for their parser systems.
|
Please ignore how markdown parsers render this file since it is not intended for their parser systems.
|
||||||
|
|
|
||||||
|
|
@ -10,9 +10,9 @@
|
||||||
|
|
||||||
Hardware:
|
Hardware:
|
||||||
|
|
||||||
* **CPU:** Ryzen 7 3700X @ 4.40GHz
|
* **CPU:** Ryzen 5 7600X @ 4.70GHz
|
||||||
* **GPU:** ASUS ROG Strix OC Radeon RX 580 8GB
|
* **GPU:** Sapphire Pulse Radeon RX 6700 10GB DDR6
|
||||||
* **RAM:** 32GB DDR4 3600 MHz
|
* **RAM:** 32GB DDR5 6000 MHz
|
||||||
* **Keyboard:** HyperX Alloy FPS Pro Mechanical
|
* **Keyboard:** HyperX Alloy FPS Pro Mechanical
|
||||||
* **Mouse:** ASUS TUF Gaming M3
|
* **Mouse:** ASUS TUF Gaming M3
|
||||||
* **Microphone:** TONOR TC-2030 with arm
|
* **Microphone:** TONOR TC-2030 with arm
|
||||||
|
|
@ -22,10 +22,8 @@ Hardware:
|
||||||
Software:
|
Software:
|
||||||
|
|
||||||
* **OS:** Gentoo/Linux x86_64
|
* **OS:** Gentoo/Linux x86_64
|
||||||
* **Kernel:** 5.17.0-gentoo
|
* **Desktop:** Plasma Wayland
|
||||||
* **Desktop:** Plasma 5.24.3
|
* **Broadcast Software:** OBS Studio
|
||||||
* **Mesa:** 22.0.0
|
|
||||||
* **Broadcast Software:** OBS Studio 27.2.3
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -37,6 +35,6 @@ Software:
|
||||||
* 64 GB RAM
|
* 64 GB RAM
|
||||||
* 2x512 GB NVMe
|
* 2x512 GB NVMe
|
||||||
* 1Gbit/s network connection
|
* 1Gbit/s network connection
|
||||||
* Owncast v0.0.11
|
* Owncast v0.1.1
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
315
custom.css
315
custom.css
|
|
@ -1,86 +1,299 @@
|
||||||
|
/*
|
||||||
|
Copyright 2023 Le fractal
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the “Software”), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is furnished
|
||||||
|
to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
|
||||||
|
INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS
|
||||||
|
OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
|
||||||
|
AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH
|
||||||
|
THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||||
|
*/
|
||||||
|
/* Custom theme by Le fractal - https://direct.disquette.top. */
|
||||||
|
/* shoutout appreciated! */
|
||||||
|
/* Smaller header */
|
||||||
:root {
|
:root {
|
||||||
--header-bg-color: #222;
|
--header-height: 50px;
|
||||||
--owncast-purple: #333;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#logo-container {
|
[class^="Sidebar_root"],
|
||||||
background-size: 2em;
|
[class*=" Sidebar_root"] {
|
||||||
background-image: url("/logo");
|
top: calc(var(--header-height) - 1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-bar [role="tab"][aria-selected="true"] {
|
/* Add padding to chat */
|
||||||
background-color: #888;
|
[class^="ChatContainer_virtuoso"] > div > div,
|
||||||
|
[class*=" ChatContainer_virtuoso"] > div > div {
|
||||||
|
padding-left: 1em;
|
||||||
|
padding-right: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-bar [role="tab"]:hover {
|
/* Show user name for each message, inline */
|
||||||
background-color: #444;
|
[class^="ChatUserMessage_repeat"],
|
||||||
|
[class*=" ChatUserMessage_repeat"],
|
||||||
|
[class^="ChatUserMessage_user"],
|
||||||
|
[class*=" ChatUserMessage_user"] {
|
||||||
|
display: inline-block!important;
|
||||||
|
margin-right: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-indigo-600 {
|
[class^="ChatUserMessage_user_"]::after,
|
||||||
color: #8b9fc3;
|
[class*=" ChatUserMessage_user_"]::after,
|
||||||
|
[class^="ChatUserMessage_repeat"]::after,
|
||||||
|
[class*=" ChatUserMessage_repeat"]::after {
|
||||||
|
content: ": ";
|
||||||
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-gray-500 {
|
[class^="ChatUserMessage_userBadges"],
|
||||||
color: #666;
|
[class*=" ChatUserMessage_userBadges"] {
|
||||||
|
margin: 0px 0px 0px -4px !important;
|
||||||
|
float: left;
|
||||||
|
/* Show badges on left of username */
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-gray-700 {
|
[class^="ChatUserMessage_message"] p,
|
||||||
color: #aaa;
|
[class*=" ChatUserMessage_message"] p {
|
||||||
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-gray-800 {
|
/* Fix spacing between leading message and followups */
|
||||||
color: #aaa;
|
[class^="ChatUserMessage_messagePadding"],
|
||||||
|
[class*=" ChatUserMessage_messagePadding"] {
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-gray-300 {
|
/* Remove colorful border on messages */
|
||||||
background-color: #222;
|
[class^="ChatUserMessage_root"],
|
||||||
|
[class*=" ChatUserMessage_root"],
|
||||||
|
[class^="ChatUserMessage_ownMessage"],
|
||||||
|
[class*=" ChatUserMessage_ownMessage"] {
|
||||||
|
border: none!important;
|
||||||
|
margin-bottom: 0.3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-white {
|
/* Colors */
|
||||||
border-color: #aaa;
|
:root {
|
||||||
background-color: rgba(26,32,44,var(--bg-opacity));
|
--darker-grey: #0B0C0D;
|
||||||
|
--lighter-grey-2: #29292E;
|
||||||
|
--lighter-grey: #131516;
|
||||||
|
--whitish: rgb(239, 239, 241);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Browser notify content */
|
body {
|
||||||
#modal-content-content div {
|
background-color: var(--darker-grey);
|
||||||
background-color: #444;
|
|
||||||
color: #aaa;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Requires important because colour set by javascript */
|
[class^="Header_header"],
|
||||||
#notify-button-container button {
|
[class*=" Header_header"] {
|
||||||
background-color: #444 !important;
|
background-color: var(--darker-grey);
|
||||||
border-color: #666;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Invert the bell svg colour */
|
[class^="Content_mobileActionButtons"],
|
||||||
#notify-button-container .external-action-button img {
|
[class*=" Content_mobileActionButtons"] {
|
||||||
filter: invert(100%);
|
color: var(--theme-color-action);
|
||||||
}
|
font-weight: bolder;
|
||||||
/*-- end browser notify content */
|
|
||||||
|
|
||||||
/* Formatting tech specs for thin vs wide */
|
|
||||||
#tech-specs-flex {
|
|
||||||
display: flex;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.column {
|
#chat-container {
|
||||||
width: 50%;
|
background-color: var(--lighter-grey);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 960px) {
|
[class^="ChatContainer_chatTextField"],
|
||||||
#tech-specs-flex {
|
[class*=" ChatContainer_chatTextField"] {
|
||||||
display: initial;
|
border-top: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.column {
|
[class^="ChatTextField_root"],
|
||||||
width: 100%;
|
[class*=" ChatTextField_root"] {
|
||||||
}
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1540px) {
|
header {
|
||||||
.user-content {
|
background-color: var(--darker-grey);
|
||||||
margin: auto;
|
|
||||||
width: 75%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[class^="ChatUserMessage_background"],
|
||||||
|
[class*=" ChatUserMessage_background"] {
|
||||||
|
background-color: transparent!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[class^="DesktopContent_bottomSectionContent"],
|
||||||
|
[class*=" DesktopContent_bottomSectionContent"] {
|
||||||
|
background-color: var(--darker-grey);
|
||||||
|
color: #fff!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class^="ContentHeader_root"],
|
||||||
|
[class*=" ContentHeader_root"] {
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class^="ContentHeader_titleSection"],
|
||||||
|
[class*=" ContentHeader_titleSection"] {
|
||||||
|
padding: 2em;
|
||||||
|
border-radius: var(--theme-rounded-corners);
|
||||||
|
background-color: var(--lighter-grey);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-tabs-tab {
|
||||||
|
/*background-color: red;*/
|
||||||
|
color: var(--theme-color-action);
|
||||||
|
}
|
||||||
|
.ant-tabs-tab:hover {
|
||||||
|
color: var(--whitish);
|
||||||
|
}
|
||||||
|
.ant-tabs-tab-active {
|
||||||
|
/*background-color: lime!important;*/
|
||||||
|
background-color: transparent!important;
|
||||||
|
|
||||||
|
}
|
||||||
|
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
|
||||||
|
color: var(--whitish)!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class^="CustomPageContent_customPageContent"],
|
||||||
|
[class*=" CustomPageContent_customPageContent"],
|
||||||
|
[class^="Content_bottomPageContentContainer"],
|
||||||
|
[class*=" Content_bottomPageContentContainer"] {
|
||||||
|
background-color: var(--darker-grey);
|
||||||
|
color: var(--whitish);
|
||||||
|
}
|
||||||
|
|
||||||
|
[class^="CustomPageContent_customPageContent"] a,
|
||||||
|
[class*=" CustomPageContent_customPageContent"] a,
|
||||||
|
[class^="Content_bottomPageContentContainer"] a,
|
||||||
|
[class*=" Content_bottomPageContentContainer"] a {
|
||||||
|
filter: saturate(1);
|
||||||
|
text-decoration: underline;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
[class^="CustomPageContent_customPageContent"] hr,
|
||||||
|
[class*=" CustomPageContent_customPageContent"] hr {
|
||||||
|
border-top: 1px solid var(--lighter-grey-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
[class^="ContentHeader_logoTitleSection"],
|
||||||
|
[class*=" ContentHeader_logoTitleSection"] {
|
||||||
|
color: var(--whitish);
|
||||||
|
}
|
||||||
|
|
||||||
|
[class^="ContentHeader_tagList"] > span,
|
||||||
|
[class*=" ContentHeader_tagList"] > span {
|
||||||
|
background-color: #393939;
|
||||||
|
color: rgb(140, 140, 140);
|
||||||
|
padding-left: 9px;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding-right: 5px;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class^="Logo_root"],
|
||||||
|
[class*=" Logo_root"] {
|
||||||
|
border-color: var(--theme-color-action-hover);
|
||||||
|
background-color: var(--theme-color-action);
|
||||||
|
}
|
||||||
|
|
||||||
|
a[class^="SocialLinks_link"],
|
||||||
|
a[class*=" SocialLinks_link"] {
|
||||||
|
/*background-color: var(--theme-color-components-primary-button-background);*/
|
||||||
|
background-color: var(--whitish);
|
||||||
|
padding: 5px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class^="ChatTextField_root"] :empty::before,
|
||||||
|
[class*=" ChatTextField_root"] :empty::before {
|
||||||
|
color: var(--theme-color-action);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class^="ChatTextField_root"],
|
||||||
|
[class*=" ChatTextField_root"] {
|
||||||
|
color: var(--whitish);
|
||||||
|
}
|
||||||
|
|
||||||
|
[class^="ChatTextField_inputWrap"],
|
||||||
|
[class*=" ChatTextField_inputWrap"] {
|
||||||
|
background-color: transparent!important;
|
||||||
|
border: 1px solid var(--theme-color-action);
|
||||||
|
color: var(--whitish)!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class^="ChatSystemMessage_chatSystemMessage"],
|
||||||
|
[class*=" ChatSystemMessage_chatSystemMessage"] {
|
||||||
|
/*
|
||||||
|
background: var(--theme-color-action);
|
||||||
|
background: linear-gradient(70deg,var(--theme-color-action),var(--theme-color-action-hover) 40%,var(--theme-color-action) 80%);
|
||||||
|
*/
|
||||||
|
background:none;
|
||||||
|
margin: 5px 5px 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
border-width: 1px;
|
||||||
|
border-style: solid;
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Followers list */
|
||||||
|
[class^="FollowerCollection_followerRow"] > div > a,
|
||||||
|
[class*=" FollowerCollection_followerRow"] > div > a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
[class^="FollowerCollection_followerRow"] > div > a > div,
|
||||||
|
[class*=" FollowerCollection_followerRow"] > div > a > div {
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
[class^="SingleFollower_username"],
|
||||||
|
[class*=" SingleFollower_username"],
|
||||||
|
[class^="SingleFollower_account"],
|
||||||
|
[class*=" SingleFollower_account"] {
|
||||||
|
color: var(--whitish)!important;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class^="SingleFollower_account"],
|
||||||
|
[class*=" SingleFollower_account"] {
|
||||||
|
/*display: none!important;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
[class^="SingleFollower_follower"],
|
||||||
|
[class*=" SingleFollower_follower"] {
|
||||||
|
border: none;
|
||||||
|
border-bottom: 3px solid transparent;
|
||||||
|
}
|
||||||
|
[class^="SingleFollower_follower"]:hover,
|
||||||
|
[class*=" SingleFollower_follower"]:hover {
|
||||||
|
border: none;
|
||||||
|
border-bottom: 3px solid var(--theme-color-action);
|
||||||
|
border-radius: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
[class^="FollowerCollection_pagination"] > li > button,
|
||||||
|
[class*=" FollowerCollection_pagination"] > li > button,
|
||||||
|
[class^="FollowerCollection_pagination"] > li,
|
||||||
|
[class*=" FollowerCollection_pagination"] > li {
|
||||||
|
background-color: var(--lighter-grey-2)!important;
|
||||||
|
border: none!important;
|
||||||
|
font-weight: bold!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class^="FollowerCollection_pagination"] > li > button,
|
||||||
|
[class*=" FollowerCollection_pagination"] > li > button,
|
||||||
|
[class^="FollowerCollection_pagination"] > li > a,
|
||||||
|
[class*=" FollowerCollection_pagination"] > li > a {
|
||||||
|
color: var(--whitish)!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue