pimhwang
/
owncast
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

update colors using tailwind styles

pull/5/head
Ginger Wong 5 years ago
parent
5d8bb53e4b
commit
f864e57340
2 changed files with 22 additions and 50 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 32
      webroot/index.html
  2. 40
      webroot/styles/layout.css

32
webroot/index.html
Unescape View File

@ -16,33 +16,33 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -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"

40
webroot/styles/layout.css
Unescape View File

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

Write Preview
Loading…
Cancel
Save