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

cleanup commented out styles

Browse Source
This commit is contained in:
Ginger Wong 2020-08-23 18:33:19 -07:00
parent 3d679a28fb
commit 786b4c04fa
6 changed files with 24 additions and 300 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
webroot/index2.html
View File

@ -1,3 +1,14 @@
<!--
todo
- clean up commented out css
- fix / consolidate responsive styles
- consolidate utils
- remove unused files
- reorg /js
- standalone video.html
-->
<html> <html>
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@ -28,7 +39,8 @@
<script src="//unpkg.com/video.js@7.9.2/dist/video.js"></script> <script src="//unpkg.com/video.js@7.9.2/dist/video.js"></script>
<script src="//unpkg.com/showdown/dist/showdown.min.js"></script> <script src="//unpkg.com/showdown/dist/showdown.min.js"></script>
<link href="./styles/layout.css" rel="stylesheet" /> <link href="./styles/app.css" rel="stylesheet" />
<link href="./styles/video.css" rel="stylesheet" />
<link href="./styles/chat.css" rel="stylesheet" /> <link href="./styles/chat.css" rel="stylesheet" />
<link href="./styles/user-content.css" rel="stylesheet" /> <link href="./styles/user-content.css" rel="stylesheet" />

2
webroot/js/app2.js
View File

@ -390,7 +390,7 @@ export default class App extends Component {
</div> </div>
<section id="stream-info" aria-label="Stream status" class="flex text-center flex-row justify-between w-full text-xs font-mono py-2 px-8 bg-gray-900 text-indigo-200 shadow-md border-b border-gray-100 border-solid ${streamInfoClass}"> <section id="stream-info" aria-label="Stream status" class="flex text-center flex-row justify-between font-mono py-2 px-8 bg-gray-900 text-indigo-200 shadow-md border-b border-gray-100 border-solid ${streamInfoClass}">
<span>${streamStatusMessage}</span> <span>${streamStatusMessage}</span>
<span>${viewerCount} ${pluralize('viewer', viewerCount)}.</span> <span>${viewerCount} ${pluralize('viewer', viewerCount)}.</span>
<span>Max ${pluralize('viewer', sessionMaxViewerCount)}.</span> <span>Max ${pluralize('viewer', sessionMaxViewerCount)}.</span>

2
webroot/js/chat/username.js
View File

@ -87,7 +87,7 @@ export default class UsernameForm extends Component {
<span id="username-display" class="text-indigo-600 text-xs font-semibold truncate overflow-hidden whitespace-no-wrap">${username}</span> <span id="username-display" class="text-indigo-600 text-xs font-semibold truncate overflow-hidden whitespace-no-wrap">${username}</span>
</div> </div>
<div id="user-info-change" class="flex p-1 items-center justify-end" style=${styles.form}> <div id="user-info-change" class="flex flex-no-wrap p-1 items-center justify-end" style=${styles.form}>
<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 text-xs 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 text-xs focus:bg-white"

63
webroot/styles/chat.css
View File

@ -6,11 +6,6 @@
width: var(--right-col-width); width: var(--right-col-width);
height: calc(100vh - var(--header-height)); height: calc(100vh - var(--header-height));
/* overflow: hidden; */
/* display: flex;
flex-direction: column;
justify-content: flex-end; */
} }
.touch-screen #chat-container { .touch-screen #chat-container {
@ -27,23 +22,9 @@
} }
#messages-container {
/* overflow: auto;
padding: 1em 0; */
}
#message-input-container {
/* width: 100%; */
/* padding: 1em; */
}
/******************************/ /******************************/
/******************************/ /******************************/
#message-input {
/* height: 5rem; */
/* font-size: .85em; */
}
#message-input img { #message-input img {
display: inline; display: inline;
vertical-align: middle; vertical-align: middle;
@ -79,49 +60,14 @@
/******************************/ /******************************/
/* #message-form {
flex-direction: column;
align-items: flex-end;
margin-bottom: 0;
} */
#message-form-actions {
/* flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%; */
}
#message-form-actions-buttons {
/* flex-direction: row;
justify-content: flex-end;
align-items: center; */
}
/* Emoji picker button */
#emoji-button {
/* font-size: 1.75em; */
/* cursor: pointer;
margin-right: .5em; */
}
.emoji-picker__emoji { .emoji-picker__emoji {
border-radius: 10px; border-radius: 10px;
} }
.message {
/* padding: .85em; */
/* align-items: flex-start; */
}
.message-avatar { .message-avatar {
height: 3.0em; height: 3.0em;
width: 3.0em; width: 3.0em;
/* margin-right: .75em; */
} }
.message-avatar img { .message-avatar img {
max-width: unset; max-width: unset;
@ -131,9 +77,6 @@
} }
.message-content { .message-content {
/* font-size: .85em; */
max-width: 85%;
/* word-wrap: break-word; */
} }
@ -190,10 +133,6 @@
height: 12rem; height: 12rem;
} }
.message-text .highlighted {
/* color: orange;
font-weight: 400;
} */
/* MESSAGE TEXT CONTENT */ /* MESSAGE TEXT CONTENT */
/* MESSAGE TEXT CONTENT */ /* MESSAGE TEXT CONTENT */
/* MESSAGE TEXT CONTENT */ /* MESSAGE TEXT CONTENT */

174
webroot/styles/layout.css
View File

@ -1,6 +1,7 @@
/* /*
Overall layout styles for all of owncast app. Overall layout styles for all of owncast app.
DE[RECATE THIS LAYOUT.CSS FILE.
*/ */
/* variables */ /* variables */
@ -12,22 +13,19 @@ Overall layout styles for all of owncast app.
--user-image-width: 10em; --user-image-width: 10em;
} }
body { html {
font-size: 14px; font-size: 14px;
} }
a:hover { a:hover {
text-decoration: underline; text-decoration: underline;
} }
/* vuejs attribute to hide things before content ready */
[v-cloak] { visibility: hidden; }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 0px; width: 0px;
background: transparent; background: transparent;
} }
.visually-hidden { .visually-hidden {
position: absolute !important; position: absolute !important;
height: 1px; height: 1px;
@ -38,176 +36,25 @@ a:hover {
white-space: nowrap; /* added line */ white-space: nowrap; /* added line */
} }
#app-container {
/* width: 100%;
flex-direction: column;
justify-content: flex-start;
position: relative; */
}
header { header {
/* position: fixed;
width: 100%; */
height: var(--header-height); height: var(--header-height);
/* top: 0;
left: 0; */
background-color: var(--header-bg-color); background-color: var(--header-bg-color);
/* z-index: 10; */
/* flex-direction: row;
justify-content: space-between; */
/* flex-wrap: nowrap; */
} }
header h1 {
/* font-size: 1.25em; */
/* font-weight: 100;
letter-spacing: 1.2; */
/* text-transform: uppercase; */
/* padding: .5em; */
/* white-space: nowrap; */
/* justify-content: flex-start;
align-items: center;
flex-direction: row; */
/* overflow: hidden; */
}
#logo-container { #logo-container {
/* height: 1.75em;
width: 1.75em; */
/* min-height: 1.75em;
min-width: 1.75em; */
/* margin-right: .5em; */
/* display: inline-block; */
/* background-repeat: no-repeat; */
/* background-position: center center; */
background-size: 1.35em; background-size: 1.35em;
} }
header .instance-title {
/* overflow: hidden;
text-overflow: ellipsis; */
}
#chat-toggle { #chat-toggle {
/* cursor: pointer;
text-align: center; */
/* height: 100%;*/
min-width: 3rem; min-width: 3rem;
/* justify-content: center;
align-items: center; */
} }
footer {
/* flex-direction: row;
justify-content: flex-start;
font-size: .75em;
padding: 2em;
opacity: .5; */
}
footer span {
/* display: inline-block;
margin: 0 1em; */
}
/* ************************************************8 */ /* ************************************************8 */
#stream-info {
/* padding: .5em 2em; */
/* text-align: center;
width: 100%;
flex-direction: row;
justify-content: space-between; */
}
#stream-info span {
/* font-size: .7em; */
}
.user-content {
/* padding: 2em; */
}
/* #user-content {
display: block;
}
#user-content-touch {
display: none;
} */
/* ************************************************8 */
/* .user-image img {
display: inline-block;
width: 100%;
height: 100%;
} */
.stream-summary {
/* margin: 1em 0; */
}
h2 {
/* font-size: 3em; */
}
/* ************************************************8 */
#user-options-container {
/* flex-direction: row;
justify-content: flex-end;
align-items: center;
flex-wrap: nowrap; */
}
#user-info-display {
/* display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
cursor: pointer;
padding: .5em 1em;
overflow: hidden;
width: 100%; */
}
#username-avatar {
/* height: 2.1em;
width: 2.1em;
margin-right: .5em; */
}
#username-display {
/* font-weight: 600; */
/* font-size: .75em; */
/* white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden; */
}
#user-info-display:hover {
/* transition: opacity .2s;
opacity: .75; */
}
#user-info-change { #user-info-change {
display: none; display: none;
/* justify-content: flex-end;
align-items: center;
padding: .25em; */
}
#username-change-input {
/* font-size: .75em; */
}
#button-update-username {
/* font-size: .65em; */
/* text-transform: uppercase; */
/* height: 2.5em; */
}
#button-cancel-change {
/* cursor: pointer; */
/* height: 2.5em; */
/* font-size: .65em; */
}
.user-btn {
/* margin: 0 .25em; */
} }
/* ************************************************8 */ /* ************************************************8 */
@ -215,20 +62,12 @@ h2 {
#video-container { #video-container {
height: calc(var(--video-container-height)); height: calc(var(--video-container-height));
/* width: 100%; */
margin-top: var(--header-height); margin-top: var(--header-height);
/* background-position: center center;
background-repeat: no-repeat; */
background-size: 30%; background-size: 30%;
} }
.owncast-video-container { .owncast-video-container {
height: auto; height: auto;
/* display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center; */
} }
.owncast-video-container .video-js { .owncast-video-container .video-js {
width: 100%; width: 100%;
@ -271,10 +110,9 @@ h2 {
width: calc(100% - var(--right-col-width)); width: calc(100% - var(--right-col-width));
} }
#stream-info span {
font-size: .70rem;
}
/* ************************************************8 */ /* ************************************************8 */

65
webroot/styles/user-content.css
View File

@ -1,82 +1,26 @@
.user-content {
/* padding: 3rem; */
/* display: flex;
flex-direction: row; */
}
.user-content .user-image { .user-content .user-image {
/* padding: 1rem;
margin-right: 2rem; */
min-width: var(--user-image-width); min-width: var(--user-image-width);
width: var(--user-image-width); width: var(--user-image-width);
height: var(--user-image-width); height: var(--user-image-width);
max-height: var(--user-image-width); max-height: var(--user-image-width);
/* background-repeat: no-repeat;
background-position: center center; */
background-size: calc(var(--user-image-width) - 1em); background-size: calc(var(--user-image-width) - 1em);
} }
.user-content-header {
/* margin-bottom: 2rem; */
}
.tag-list {
/* flex-direction: row; */
/* margin: 1em 0; */
}
.tag-list li {
/* font-size: .75rem; */
/* text-transform: uppercase; */
/* margin-right: .75rem; */
/* padding: .5rem; */
}
.social-list {
/* flex-direction: row; */
/* align-items: center; */
/* justify-content: flex-start; */
/* flex-wrap: wrap; */
}
.social-list .follow-label {
/* font-weight: bold; */
/* font-size: .75rem; */
/* margin-right: .5rem; */
/* text-transform: uppercase; */
}
.user-social-item {
/* display: flex;
justify-content: flex-start;
align-items: center;
margin-right: -.25rem; */
}
.user-social-item .platform-icon { .user-social-item .platform-icon {
--icon-width: 40px; --icon-width: 40px;
height: var(--icon-width); height: var(--icon-width);
width: var(--icon-width); width: var(--icon-width);
background-image: url(/img/social-icons.gif); background-image: url(/img/social-icons.gif);
/* background-repeat: no-repeat; */
background-position: calc(var(--imgCol) * var(--icon-width)) calc(var(--imgRow) * var(--icon-width)); background-position: calc(var(--imgCol) * var(--icon-width)) calc(var(--imgRow) * var(--icon-width));
transform: scale(.65); transform: scale(.65);
} }
.user-social-item.use-default .platform-label {
/* font-size: .7rem; */
/* text-transform: uppercase; */
/* display: inline-block; */
/* max-width: 10rem; */
}
/* /*
EXTRA CUSTOM CONTENT STYLES EXTRA CUSTOM CONTENT STYLES
Assumes markup converted from markdown input. Assumes markup converted from markdown input.
*/ */
#extra-user-content {
/* padding: 1rem 3rem 3rem 3rem; */
}
#extra-user-content ul, #extra-user-content ul,
#extra-user-content ol { #extra-user-content ol {
@ -94,14 +38,6 @@ Assumes markup converted from markdown input.
margin-left: 1.5rem; margin-left: 1.5rem;
} }
/* #extra-user-content h1,
#extra-user-content h2,
#extra-user-content h3,
#extra-user-content h4 {
color: #111111;
font-weight: 400;
} */
#extra-user-content h1, #extra-user-content h1,
#extra-user-content h2, #extra-user-content h2,
#extra-user-content h3, #extra-user-content h3,
@ -116,7 +52,6 @@ Assumes markup converted from markdown input.
} }
#extra-user-content h1 { #extra-user-content h1 {
font-size: 2.1rem; font-size: 2.1rem;
} }