LogalDeveloper/owncast
0
Fork 0
Code 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
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" />
</head>
<body>
<body class="bg-gray-300 text-gray-800">
<div id="app-container" class="flex no-chat">
<header class="flex">
<h1>
<header class="flex border-b border-gray-900 border-solid shadow-md">
<h1 class="text-gray-400">
😈 Owncast
</h1>
<div id="user-options-container" class="flex">
<div id="user-info">
<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" />
<span id="username-display"></span>
<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" class="text-indigo-600"></span>
</div>
<div id="user-info-change">
<input type="text"
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"
maxlength="100"
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-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>
<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>
</header>
@@ -50,7 +50,7 @@
<!-- LEFT CONTAINER SIDE-->
<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
class="video-js"
id="video"
@@ -66,7 +66,7 @@
</video>
</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>{{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.</span>
<span>Max {{ sessionMaxViewerCount }} {{ 'viewer' | plural(sessionMaxViewerCount) }}.</span>
@@ -93,23 +93,23 @@
<!-- RIGHT CONTAINER SIDE-->
<div class="flex main-cols right-col">
<div id="chat-container">
<div id="chat-container" class="bg-gray-800">
<div id="messages-container">
<div v-for="(message, index) in messages">
<div class="message flex">
<img
v-bind:src="message.image"
class="message-avatar rounded-full"
class="message-avatar rounded-full bg-black bg-opacity-50"
/>
<div class="message-content">
<p class="message-author">{{ message.author }}</p>
<p class="message-text" v-html="message.formatText()"></p>
<p class="message-author text-white font-bold">{{ message.author }}</p>
<p class="message-text text-gray-400 font-thin " v-html="message.formatText()"></p>
</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"*/>
<input type="hidden" name="inputAuthor" id="self-message-author" v-model="message.author" />
@@ -122,7 +122,7 @@
></textarea>
<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
id="button-submit-message"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"