diff --git a/README.adoc b/README.adoc
index a9f9fb6..ad3614e 100644
--- a/README.adoc
+++ b/README.adoc
@@ -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.
diff --git a/custom-page-content.md b/custom-page-content.md
index f69d5cb..c9ec492 100644
--- a/custom-page-content.md
+++ b/custom-page-content.md
@@ -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
@@ -37,6 +35,6 @@ Software:
* 64 GB RAM
* 2x512 GB NVMe
* 1Gbit/s network connection
-* Owncast v0.0.11
+* Owncast v0.1.1
diff --git a/custom.css b/custom.css
index 18e5fef..fdf8f65 100644
--- a/custom.css
+++ b/custom.css
@@ -1,86 +1,299 @@
-:root {
- --header-bg-color: #222;
- --owncast-purple: #333;
-}
+/*
+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:
-#logo-container {
- background-size: 2em;
- background-image: url("/logo");
-}
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
-.tab-bar [role="tab"][aria-selected="true"] {
- background-color: #888;
-}
+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-height: 50px;
+ }
-.tab-bar [role="tab"]:hover {
- background-color: #444;
-}
+ [class^="Sidebar_root"],
+ [class*=" Sidebar_root"] {
+ top: calc(var(--header-height) - 1px);
+ }
-.text-indigo-600 {
- color: #8b9fc3;
-}
+ /* Add padding to chat */
+ [class^="ChatContainer_virtuoso"] > div > div,
+ [class*=" ChatContainer_virtuoso"] > div > div {
+ padding-left: 1em;
+ padding-right: 1em;
+ }
-.text-gray-500 {
- color: #666;
-}
+ /* 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-gray-700 {
- color: #aaa;
-}
+ [class^="ChatUserMessage_user_"]::after,
+ [class*=" ChatUserMessage_user_"]::after,
+ [class^="ChatUserMessage_repeat"]::after,
+ [class*=" ChatUserMessage_repeat"]::after {
+ content: ": ";
+ font-weight: normal;
+ }
-.text-gray-800 {
- color: #aaa;
-}
+ [class^="ChatUserMessage_userBadges"],
+ [class*=" ChatUserMessage_userBadges"] {
+ margin: 0px 0px 0px -4px !important;
+ float: left;
+ /* Show badges on left of username */
+ }
-.bg-gray-300 {
- background-color: #222;
-}
+ [class^="ChatUserMessage_message"] p,
+ [class*=" ChatUserMessage_message"] p {
+ display: inline;
+ }
-.bg-white {
- border-color: #aaa;
- background-color: rgba(26,32,44,var(--bg-opacity));
-}
+ /* Fix spacing between leading message and followups */
+ [class^="ChatUserMessage_messagePadding"],
+ [class*=" ChatUserMessage_messagePadding"] {
+ padding: 0;
+ }
-/* Browser notify content */
-#modal-content-content div {
- background-color: #444;
- color: #aaa;
-}
+ /* Remove colorful border on messages */
+ [class^="ChatUserMessage_root"],
+ [class*=" ChatUserMessage_root"],
+ [class^="ChatUserMessage_ownMessage"],
+ [class*=" ChatUserMessage_ownMessage"] {
+ border: none!important;
+ margin-bottom: 0.3em;
+ }
-/* Requires important because colour set by javascript */
-#notify-button-container button {
- background-color: #444 !important;
- border-color: #666;
-}
+ /* Colors */
+ :root {
+ --darker-grey: #0B0C0D;
+ --lighter-grey-2: #29292E;
+ --lighter-grey: #131516;
+ --whitish: rgb(239, 239, 241);
+ }
-/* Invert the bell svg colour */
-#notify-button-container .external-action-button img {
- filter: invert(100%);
-}
-/*-- end browser notify content */
+ body {
+ background-color: var(--darker-grey);
+ }
-/* Formatting tech specs for thin vs wide */
-#tech-specs-flex {
- display: flex;
-}
+ [class^="Header_header"],
+ [class*=" Header_header"] {
+ background-color: var(--darker-grey);
+ }
-.column {
- width: 50%;
-}
+ [class^="Content_mobileActionButtons"],
+ [class*=" Content_mobileActionButtons"] {
+ color: var(--theme-color-action);
+ font-weight: bolder;
+ }
-@media (max-width: 960px) {
- #tech-specs-flex {
- display: initial;
- }
+ #chat-container {
+ background-color: var(--lighter-grey);
+ }
- .column {
- width: 100%;
- }
-}
+ [class^="ChatContainer_chatTextField"],
+ [class*=" ChatContainer_chatTextField"] {
+ border-top: none;
+ }
+
+ [class^="ChatTextField_root"],
+ [class*=" ChatTextField_root"] {
+ background-color: transparent;
+ }
+
+ 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;
+ }
-@media (min-width: 1540px) {
- .user-content {
- margin: auto;
- width: 75%;
- }
-}