Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

update colors using tailwind styles

Browse Source
This commit is contained in:
Ginger Wong 2020-06-14 23:12:58 -07:00
parent 5d8bb53e4b
commit f864e57340
2 changed files with 22 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
webroot/index.html
View File

@ -16,33 +16,33 @@
<link href="./styles/layout.css" rel="stylesheet" /> <link href="./styles/layout.css" rel="stylesheet" />
</head> </head>
<body> <body class="bg-gray-300 text-gray-800">
<div id="app-container" class="flex no-chat"> <div id="app-container" class="flex no-chat">
<header class="flex"> <header class="flex border-b border-gray-900 border-solid shadow-md">
<h1> <h1 class="text-gray-400">
😈 Owncast 😈 Owncast
</h1> </h1>
<div id="user-options-container" class="flex"> <div id="user-options-container" class="flex">
<div id="user-info"> <div id="user-info">
<div id="user-info-display" title="Click to update user name" class="flex"> <div id="user-info-display" title="Click to update user name" class="flex">
<img src="https://robohash.org/username123" id="username-avatar" class="rounded-full" /> <img src="https://robohash.org/username123" id="username-avatar" class="rounded-full bg-black bg-opacity-50 border border-solid border-gray-700" />
<span id="username-display"></span> <span id="username-display" class="text-indigo-600"></span>
</div> </div>
<div id="user-info-change"> <div id="user-info-change">
<input type="text" <input type="text"
id="username-change-input" id="username-change-input"
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-1 px-1 leading-tight focus:bg-white" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-1 px-1 leading-tight focus:bg-white"
value="Random Username 123" value="Random Username 123"
maxlength="100" maxlength="100"
placeholder="Update username" placeholder="Update username"
> >
<button id="button-update-username" class="bg-blue-500 hover:bg-blue-700 text-white py-1 px-1 rounded user-btn">Update</button> <button id="button-update-username" class="bg-blue-500 hover:bg-blue-700 text-white py-1 px-1 rounded user-btn">Update</button>
<button id="button-cancel-change" class="bg-gray-900 hover:bg-gray-800 py-1 px-2 rounded user-btn" title="cancel">X</button> <button id="button-cancel-change" class="bg-gray-900 hover:bg-gray-800 py-1 px-2 rounded user-btn text-white text-opacity-50" title="cancel">X</button>
</div> </div>
</div> </div>
<button type="button" id="chat-toggle" class="flex">💬</button> <button type="button" id="chat-toggle" class="flex bg-gray-800 hover:bg-gray-700">💬</button>
</div> </div>
</header> </header>
@ -50,7 +50,7 @@
<!-- LEFT CONTAINER SIDE--> <!-- LEFT CONTAINER SIDE-->
<div class="flex main-cols left-col"> <div class="flex main-cols left-col">
<div id="video-container" class="flex shadow-md owncast-video-container"> <div id="video-container" class="flex owncast-video-container bg-black">
<video <video
class="video-js" class="video-js"
id="video" id="video"
@ -66,7 +66,7 @@
</video> </video>
</div> </div>
<div id="stream-info" class="flex"> <div id="stream-info" class="flex font-mono bg-gray-900 text-indigo-200 shadow-md border-b border-gray-100 border-solid">
<span>{{ streamStatus }}</span> <span>{{ streamStatus }}</span>
<span>{{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.</span> <span>{{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.</span>
<span>Max {{ sessionMaxViewerCount }} {{ 'viewer' | plural(sessionMaxViewerCount) }}.</span> <span>Max {{ sessionMaxViewerCount }} {{ 'viewer' | plural(sessionMaxViewerCount) }}.</span>
@ -93,23 +93,23 @@
<!-- RIGHT CONTAINER SIDE--> <!-- RIGHT CONTAINER SIDE-->
<div class="flex main-cols right-col"> <div class="flex main-cols right-col">
<div id="chat-container"> <div id="chat-container" class="bg-gray-800">
<div id="messages-container"> <div id="messages-container">
<div v-for="(message, index) in messages"> <div v-for="(message, index) in messages">
<div class="message flex"> <div class="message flex">
<img <img
v-bind:src="message.image" v-bind:src="message.image"
class="message-avatar rounded-full" class="message-avatar rounded-full bg-black bg-opacity-50"
/> />
<div class="message-content"> <div class="message-content">
<p class="message-author">{{ message.author }}</p> <p class="message-author text-white font-bold">{{ message.author }}</p>
<p class="message-text" v-html="message.formatText()"></p> <p class="message-text text-gray-400 font-thin " v-html="message.formatText()"></p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="message-input-container" class="shadow-md"> <div id="message-input-container" class="shadow-md bg-gray-900 border-t border-gray-700 border-solid">
<form id="message-form" class="flex" /*@submit="submitChatForm"*/> <form id="message-form" class="flex" /*@submit="submitChatForm"*/>
<input type="hidden" name="inputAuthor" id="self-message-author" v-model="message.author" /> <input type="hidden" name="inputAuthor" id="self-message-author" v-model="message.author" />
@ -122,7 +122,7 @@
></textarea> ></textarea>
<div id="message-form-actions" class="flex"> <div id="message-form-actions" class="flex">
<span id="message-form-warning"></span> <span id="message-form-warning" class="text-red-600 text-xs"></span>
<button <button
id="button-submit-message" id="button-submit-message"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"

40
webroot/styles/layout.css
View File

@ -3,13 +3,11 @@
--header-height: 3em; --header-height: 3em;
--right-col-width: 24em; --right-col-width: 24em;
--chat-bg-color: rgba(11,0,33,.95);
--header-bg-color: rgba(20,0,40,1); --header-bg-color: rgba(20,0,40,1);
} }
body { body {
font-size: 14px; font-size: 14px;
background-color: #eee;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 0px; width: 0px;
@ -41,7 +39,6 @@ header h1 {
font-weight: 100; font-weight: 100;
letter-spacing: 1.2; letter-spacing: 1.2;
text-transform: uppercase; text-transform: uppercase;
color: #ddd;
padding: .5em; padding: .5em;
white-space: nowrap; white-space: nowrap;
width: 20em; width: 20em;
@ -49,16 +46,12 @@ header h1 {
#chat-toggle { #chat-toggle {
cursor: pointer; cursor: pointer;
background-color: #555;
text-align: center; text-align: center;
height: 100%; height: 100%;
min-width: 3em; min-width: 3em;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
#chat-toggle:hover {
background-color: #666;
}
/* ************************************************8 */ /* ************************************************8 */
@ -84,12 +77,10 @@ header h1 {
height: 1.75em; height: 1.75em;
width: 1.75em; width: 1.75em;
margin-right: .5em; margin-right: .5em;
border: 1px solid rgba(255,255,255,.25)
} }
#username-display { #username-display {
font-weight: bold; font-weight: 600;
font-size: .75em; font-size: .75em;
color: #516FEB;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
@ -115,7 +106,6 @@ header h1 {
height: 2.5em; height: 2.5em;
} }
#button-cancel-change { #button-cancel-change {
color: rgba(255,255,255,.5);
cursor: pointer; cursor: pointer;
height: 2.5em; height: 2.5em;
font-size: .65em; font-size: .65em;
@ -152,7 +142,6 @@ header h1 {
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
background-color: black;
height: calc(100vh - 8em); /* Fallback for browsers that do not support Custom Properties */ height: calc(100vh - 8em); /* Fallback for browsers that do not support Custom Properties */
height: calc((var(--vh, 1vh) * 100) - var(--header-height) - 5em); height: calc((var(--vh, 1vh) * 100) - var(--header-height) - 5em);
@ -180,10 +169,7 @@ header h1 {
#stream-info { #stream-info {
padding: .5em 2em; padding: .5em 2em;
text-align: center; text-align: center;
font-family: monospace; font-size: .7em;
font-size: .75em;
background-color: rgba(0,0,0,.5);
border-bottom: 1px solid black;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
@ -202,7 +188,6 @@ header h1 {
right: 0; right: 0;
height: 100%; height: 100%;
width: var(--right-col-width); width: var(--right-col-width);
background-color: var(--chat-bg-color);
height: calc(100vh - 3em); /* Fallback for browsers that do not support Custom Properties */ height: calc(100vh - 3em); /* Fallback for browsers that do not support Custom Properties */
height: calc((var(--vh, 1vh) * 100) - var(--header-height)); height: calc((var(--vh, 1vh) * 100) - var(--header-height));
@ -219,9 +204,7 @@ header h1 {
} }
#message-input-container { #message-input-container {
width: 100%; width: 100%;
border-top: 1px solid #eee;
padding: 1em; padding: 1em;
background-color: #334;
} }
#message-form { #message-form {
@ -238,10 +221,7 @@ header h1 {
align-items: center; align-items: center;
width: 100%; width: 100%;
} }
#message-form-warning {
font-size: .75em;
color: red;
}
/* ************************************************8 */ /* ************************************************8 */
@ -253,25 +233,17 @@ header h1 {
height: 2.5em; height: 2.5em;
width: 2.5em; width: 2.5em;
margin-right: .75em; margin-right: .75em;
background-color: rgba(0,0,0, .75);
} }
.message-content { .message-content {
font-size: .85em; font-size: .85em;
} }
.message-content a { .message-content a {
color: #6699cc; color: #7F9CF5; /* indigo-400 */
} }
.message-content a:hover { .message-content a:hover {
text-decoration: underline; text-decoration: underline;
} }
.message-author {
font-weight: 600;
color: #fff;
}
.message-text {
color: #ccc;
font-weight: 200;
}
/* ************************************************8 */ /* ************************************************8 */
@ -283,7 +255,7 @@ header h1 {
} }
.no-chat #chat-toggle { .no-chat #chat-toggle {
opacity: .5; opacity: .75;
} }
/* ************************************************8 */ /* ************************************************8 */