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
|
||||
|
||||
== owncast colours
|
||||
|
||||
* Action: #1DAD27
|
||||
* Action Hover: #7BFA56
|
||||
* Primary Button Border: #7BC965
|
||||
|
||||
== custom page content
|
||||
|
||||
Please ignore how markdown parsers render this file since it is not intended for their parser systems.
|
||||
|
|
|
|||
|
|
@ -10,9 +10,9 @@
|
|||
|
||||
Hardware:
|
||||
|
||||
* **CPU:** Ryzen 7 3700X @ 4.40GHz
|
||||
* **GPU:** ASUS ROG Strix OC Radeon RX 580 8GB
|
||||
* **RAM:** 32GB DDR4 3600 MHz
|
||||
* **CPU:** Ryzen 5 7600X @ 4.70GHz
|
||||
* **GPU:** Sapphire Pulse Radeon RX 6700 10GB DDR6
|
||||
* **RAM:** 32GB DDR5 6000 MHz
|
||||
* **Keyboard:** HyperX Alloy FPS Pro Mechanical
|
||||
* **Mouse:** ASUS TUF Gaming M3
|
||||
* **Microphone:** TONOR TC-2030 with arm
|
||||
|
|
@ -22,10 +22,8 @@ Hardware:
|
|||
Software:
|
||||
|
||||
* **OS:** Gentoo/Linux x86_64
|
||||
* **Kernel:** 5.17.0-gentoo
|
||||
* **Desktop:** Plasma 5.24.3
|
||||
* **Mesa:** 22.0.0
|
||||
* **Broadcast Software:** OBS Studio 27.2.3
|
||||
* **Desktop:** Plasma Wayland
|
||||
* **Broadcast Software:** OBS Studio
|
||||
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -37,6 +35,6 @@ Software:
|
|||
* 64 GB RAM
|
||||
* 2x512 GB NVMe
|
||||
* 1Gbit/s network connection
|
||||
* Owncast v0.0.11
|
||||
* Owncast v0.1.1
|
||||
|
||||
</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 {
|
||||
--header-bg-color: #222;
|
||||
--owncast-purple: #333;
|
||||
--header-height: 50px;
|
||||
}
|
||||
|
||||
#logo-container {
|
||||
background-size: 2em;
|
||||
background-image: url("/logo");
|
||||
[class^="Sidebar_root"],
|
||||
[class*=" Sidebar_root"] {
|
||||
top: calc(var(--header-height) - 1px);
|
||||
}
|
||||
|
||||
.tab-bar [role="tab"][aria-selected="true"] {
|
||||
background-color: #888;
|
||||
/* Add padding to chat */
|
||||
[class^="ChatContainer_virtuoso"] > div > div,
|
||||
[class*=" ChatContainer_virtuoso"] > div > div {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.tab-bar [role="tab"]:hover {
|
||||
background-color: #444;
|
||||
/* Show user name for each message, inline */
|
||||
[class^="ChatUserMessage_repeat"],
|
||||
[class*=" ChatUserMessage_repeat"],
|
||||
[class^="ChatUserMessage_user"],
|
||||
[class*=" ChatUserMessage_user"] {
|
||||
display: inline-block!important;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.text-indigo-600 {
|
||||
color: #8b9fc3;
|
||||
[class^="ChatUserMessage_user_"]::after,
|
||||
[class*=" ChatUserMessage_user_"]::after,
|
||||
[class^="ChatUserMessage_repeat"]::after,
|
||||
[class*=" ChatUserMessage_repeat"]::after {
|
||||
content: ": ";
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.text-gray-500 {
|
||||
color: #666;
|
||||
[class^="ChatUserMessage_userBadges"],
|
||||
[class*=" ChatUserMessage_userBadges"] {
|
||||
margin: 0px 0px 0px -4px !important;
|
||||
float: left;
|
||||
/* Show badges on left of username */
|
||||
}
|
||||
|
||||
.text-gray-700 {
|
||||
color: #aaa;
|
||||
[class^="ChatUserMessage_message"] p,
|
||||
[class*=" ChatUserMessage_message"] p {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.text-gray-800 {
|
||||
color: #aaa;
|
||||
/* Fix spacing between leading message and followups */
|
||||
[class^="ChatUserMessage_messagePadding"],
|
||||
[class*=" ChatUserMessage_messagePadding"] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.bg-gray-300 {
|
||||
background-color: #222;
|
||||
/* Remove colorful border on messages */
|
||||
[class^="ChatUserMessage_root"],
|
||||
[class*=" ChatUserMessage_root"],
|
||||
[class^="ChatUserMessage_ownMessage"],
|
||||
[class*=" ChatUserMessage_ownMessage"] {
|
||||
border: none!important;
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
border-color: #aaa;
|
||||
background-color: rgba(26,32,44,var(--bg-opacity));
|
||||
/* Colors */
|
||||
:root {
|
||||
--darker-grey: #0B0C0D;
|
||||
--lighter-grey-2: #29292E;
|
||||
--lighter-grey: #131516;
|
||||
--whitish: rgb(239, 239, 241);
|
||||
}
|
||||
|
||||
/* Browser notify content */
|
||||
#modal-content-content div {
|
||||
background-color: #444;
|
||||
color: #aaa;
|
||||
body {
|
||||
background-color: var(--darker-grey);
|
||||
}
|
||||
|
||||
/* Requires important because colour set by javascript */
|
||||
#notify-button-container button {
|
||||
background-color: #444 !important;
|
||||
border-color: #666;
|
||||
[class^="Header_header"],
|
||||
[class*=" Header_header"] {
|
||||
background-color: var(--darker-grey);
|
||||
}
|
||||
|
||||
/* Invert the bell svg colour */
|
||||
#notify-button-container .external-action-button img {
|
||||
filter: invert(100%);
|
||||
}
|
||||
/*-- end browser notify content */
|
||||
|
||||
/* Formatting tech specs for thin vs wide */
|
||||
#tech-specs-flex {
|
||||
display: flex;
|
||||
[class^="Content_mobileActionButtons"],
|
||||
[class*=" Content_mobileActionButtons"] {
|
||||
color: var(--theme-color-action);
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.column {
|
||||
width: 50%;
|
||||
#chat-container {
|
||||
background-color: var(--lighter-grey);
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
#tech-specs-flex {
|
||||
display: initial;
|
||||
[class^="ChatContainer_chatTextField"],
|
||||
[class*=" ChatContainer_chatTextField"] {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.column {
|
||||
width: 100%;
|
||||
}
|
||||
[class^="ChatTextField_root"],
|
||||
[class*=" ChatTextField_root"] {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@media (min-width: 1540px) {
|
||||
.user-content {
|
||||
margin: auto;
|
||||
width: 75%;
|
||||
header {
|
||||
background-color: var(--darker-grey);
|
||||
}
|
||||
|
||||
[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