fix placehodler style, fix chat panel cookieing
This commit is contained in:
Ginger Wong
@@ -9,11 +9,54 @@
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
#message-form {
|
||||
/******************************/
|
||||
/******************************/
|
||||
#message-input {
|
||||
height: 5rem;
|
||||
font-size: .85em;
|
||||
}
|
||||
#message-input img {
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#message-input .emoji {
|
||||
width: 2.2em;
|
||||
}
|
||||
|
||||
|
||||
/* If the div is empty then show the placeholder */
|
||||
#message-input:empty:before{
|
||||
content: attr(placeholderText);
|
||||
pointer-events: none;
|
||||
display: block; /* For Firefox */
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* When chat is enabled (contenteditable=true) */
|
||||
#message-input[contenteditable=true]:before {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
|
||||
/* When chat is disabled (contenteditable=false) chat input div should appear disabled. */
|
||||
#message-input:disabled,
|
||||
#message-input[contenteditable=false] {
|
||||
opacity: 0.6;
|
||||
}
|
||||
/******************************/
|
||||
/******************************/
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* #message-form {
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
} */
|
||||
|
||||
|
||||
|
||||
@@ -122,56 +165,5 @@
|
||||
|
||||
|
||||
|
||||
/*
|
||||
The chat input has a fake placeholder that is styled below.
|
||||
It pulls the placeholder text from the div's placeholder attribute.
|
||||
But really it's just the innerHTML content.
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#message-body-form {
|
||||
font-size: 1em;
|
||||
height: 60px;
|
||||
}
|
||||
#message-body-form:disabled{
|
||||
opacity: .5;
|
||||
}
|
||||
#message-body-form img {
|
||||
display: inline;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
#message-body-form .emoji {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
|
||||
/* If the div is empty then show the placeholder */
|
||||
#message-body-form:empty:before{
|
||||
content: attr(placeholder);
|
||||
pointer-events: none;
|
||||
display: block; /* For Firefox */
|
||||
|
||||
/* Style the div's placeholder text color */
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* When chat is enabled (contenteditable=true) */
|
||||
#message-body-form[contenteditable=true]:before {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
|
||||
/* When chat is disabled (contenteditable=false) chat input div should appear disabled. */
|
||||
#message-body-form[contenteditable=false] {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -242,7 +242,6 @@ h2 {
|
||||
}
|
||||
|
||||
.vjs-airplay .vjs-icon-placeholder::before {
|
||||
/* content: 'AP'; */
|
||||
content: url("../img/airplay.png");
|
||||
}
|
||||
|
||||
|
||||
@@ -55,7 +55,7 @@
|
||||
--icon-width: 40px;
|
||||
height: 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));
|
||||
transform: scale(.65);
|
||||
@@ -69,105 +69,137 @@
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
EXTRA CUSTOM CONTENT STYLES
|
||||
Assumes markup converted from markdown input.
|
||||
*/
|
||||
|
||||
|
||||
.extra-user-content {
|
||||
#extra-user-content {
|
||||
padding: 1em 3em 3em 3em;
|
||||
}
|
||||
|
||||
.extra-user-content ol {
|
||||
#extra-user-content ol {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
.extra-user-content ul {
|
||||
#extra-user-content ul {
|
||||
list-style: unset;
|
||||
}
|
||||
|
||||
.extra-user-content h1, .extra-user-content h2, .extra-user-content h3, .extra-user-content h4 {
|
||||
#extra-user-content h1,
|
||||
#extra-user-content h2,
|
||||
#extra-user-content h3,
|
||||
#extra-user-content h4 {
|
||||
color: #111111;
|
||||
font-weight: 400; }
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.extra-user-content h1, .extra-user-content h2, .extra-user-content h3, .extra-user-content h4, .extra-user-content h5, .extra-user-content p {
|
||||
#extra-user-content h1,
|
||||
#extra-user-content h2,
|
||||
#extra-user-content h3,
|
||||
#extra-user-content h4,
|
||||
#extra-user-content h5,
|
||||
#extra-user-content p {
|
||||
margin-bottom: 24px;
|
||||
padding: 0; }
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.extra-user-content h1 {
|
||||
font-size: 48px; }
|
||||
#extra-user-content h1 {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.extra-user-content h2 {
|
||||
#extra-user-content h2 {
|
||||
font-size: 36px;
|
||||
margin: 24px 0 6px; }
|
||||
margin: 24px 0 6px;
|
||||
}
|
||||
|
||||
.extra-user-content h3 {
|
||||
font-size: 24px; }
|
||||
#extra-user-content h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.extra-user-content h4 {
|
||||
font-size: 21px; }
|
||||
#extra-user-content h4 {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.extra-user-content h5 {
|
||||
font-size: 18px; }
|
||||
#extra-user-content h5 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.extra-user-content a {
|
||||
#extra-user-content a {
|
||||
color: #0099ff;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
vertical-align: baseline; }
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.extra-user-content ul, .extra-user-content ol {
|
||||
#extra-user-content ul, #extra-user-content ol {
|
||||
padding: 0;
|
||||
margin: 0; }
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.extra-user-content li {
|
||||
line-height: 24px; }
|
||||
#extra-user-content li {
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.extra-user-content li ul, .extra-user-content li ul {
|
||||
#extra-user-content li ul, #extra-user-content li ul {
|
||||
margin-left: 24px; }
|
||||
|
||||
.extra-user-content p, .extra-user-content ul, .extra-user-content ol {
|
||||
#extra-user-content p, #extra-user-content ul, #extra-user-content ol {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.extra-user-content pre {
|
||||
}
|
||||
|
||||
#extra-user-content pre {
|
||||
padding: 0px 24px;
|
||||
max-width: 800px;
|
||||
white-space: pre-wrap; }
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.extra-user-content code {
|
||||
#extra-user-content code {
|
||||
font-family: Consolas, Monaco, Andale Mono, monospace;
|
||||
line-height: 1.5;
|
||||
font-size: 13px; }
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.extra-user-content aside {
|
||||
#extra-user-content aside {
|
||||
display: block;
|
||||
float: right;
|
||||
width: 390px; }
|
||||
width: 390px;
|
||||
}
|
||||
|
||||
.extra-user-content blockquote {
|
||||
#extra-user-content blockquote {
|
||||
margin: 1em 2em;
|
||||
max-width: 476px; }
|
||||
max-width: 476px;
|
||||
}
|
||||
|
||||
.extra-user-content blockquote p {
|
||||
#extra-user-content blockquote p {
|
||||
color: #666;
|
||||
max-width: 460px; }
|
||||
max-width: 460px;
|
||||
}
|
||||
|
||||
.extra-user-content hr {
|
||||
#extra-user-content hr {
|
||||
width: 540px;
|
||||
text-align: left;
|
||||
margin: 0 auto 0 0;
|
||||
color: #999; }
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.extra-user-content table {
|
||||
#extra-user-content table {
|
||||
border-collapse: collapse;
|
||||
margin: 1em 1em;
|
||||
border: 1px solid #CCC; }
|
||||
border: 1px solid #CCC;
|
||||
}
|
||||
|
||||
.extra-user-content table thead {
|
||||
background-color: #EEE; }
|
||||
#extra-user-content table thead {
|
||||
background-color: #EEE;
|
||||
}
|
||||
|
||||
.extra-user-content table thead td {
|
||||
color: #666; }
|
||||
#extra-user-content table thead td {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.extra-user-content table td {
|
||||
#extra-user-content table td {
|
||||
padding: 0.5em 1em;
|
||||
border: 1px solid #CCC; }
|
||||
border: 1px solid #CCC;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user