Discuss Scratch

#1June 8, 2021 23:37:02
sarcacocca
Scratcher
64 posts

Marking Scratch Messages as Read

Hello,

Whenever I get a message in my Scratch inbox, it would be nice if it you could press a button to mark the messages as read like so:

[Removed, please use an approved image host!]

I have some HTML source code for the button image…not the actual message thing Here it is:

<head>
<meta charset=“UTF-8”>

<meta http-equiv=“x-ua-compatible” content=“ie=edge”>
<meta name=“viewport” content=“width=device-width, initial-scale=1”>

<!– Prevent mobile Safari from making phone numbers –>
<meta name=“format-detection” content=“telephone=no”>


<title>Scratch - Messages</title>

<!– Search & Open Graph–>
<meta name=“description” content=“Scratch is a free programming language and online community where you can create your own interactive stories, games, and animations.”>
<meta name=“google-site-verification” content=“m_3TAXDreGTFyoYnEmU9mcKB4Xtw5mw6yRkuJtXRKxM”>

<meta property=“og:url” content="https://scratch.mit.edu/“>
<meta property=”og:type“ content=”website“>
<meta property=”og:title“ content=”Scratch - Messages“>
<meta property=”og:description“ content=”Scratch is a free programming language and online community where you can create your own interactive stories, games, and animations.“>
<meta property=”og:image“ content=”https://scratch.mit.edu/images/scratch-og.png“>
<meta property=”og:image:type“ content=”image/png“>
<meta property=”og:image:width“ content=”986“>
<meta property=”og:image:height“ content=”860“>


<!– Favicon & CSS normalize –>
<link rel=”shortcut icon“ href=”/favicon.ico“>
<link rel=”stylesheet“ href=”/css/lib/normalize.min.css“>

<!– Polyfills –>
<script src=”/js/polyfill.min.js"></script>

<!– Analytics (GA) –>
<script>
/* eslint-disable */
(function(i,s,o,g,r,a,m){i=r;i=i||function(){
(i.q=i.q||).push(arguments)},i.l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o);a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', ‘UA-30688952-1’, {
‘sampleRate’: 10
});
ga('send', ‘pageview’);
window.GA_ID = ‘UA-30688952-1’;
/* eslint-enable */
</script>
<style type=“text/css”>/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
button {
display: inline-block;
margin: .5em 0;
border: 0;
border-radius: .5rem;
background-color: blue;
cursor: pointer;
padding: 1em 1.25em;
color: white;
font-size: .8rem;
font-weight: bold;
box-shadow: 3px 3px 3px #777;
}
.button {
display: inline-block;
margin: .5em 0;
border: 0;
border-radius: .5rem;
background-color: #4d97ff;
cursor: pointer;
padding: 1em 1.25em;
color: white;
font-size: .8rem;
font-weight: bold;
/* USER BUTTON STATES */
/* DATA BUTTON STATES */ }
.button:focus {
outline: none; }
.button.white {
background-color: white;
color: #4d97ff; }
.button.pass {
background-color: #0fbd8c; }
.button.fail {
background-color: #ffab1a; }
.button:disabled {
box-shadow: none; }
.button.large {
border-radius: .25rem;
font-size: 1rem;
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
padding: .75rem 1.25rem .8125rem; }
.button.icon-right img {
height: 1.25rem;
margin-bottom: -.25rem;
margin-left: .5rem;
margin-right: -.25rem; }

.forms-close-button {
padding: 0;
position: absolute;
top: 0.5rem;
right: 0.5rem;
border-radius: 1rem;
background-color: rgba(0, 0, 0, 0.1);
cursor: pointer;
width: 2rem;
height: 2rem;
text-align: center;
line-height: 2rem; }

.forms-close-button img {
padding-top: 0.5rem; }
</style><style type=“text/css”>/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
Frameless <http://framelessgrid.com/>
by Joni Korpi <http://jonikorpi.com/>
licensed under CC0 <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* … small | medium | intermediate | big …
* … medium-and-smaller |
* … intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 480px; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 768px; } }

@media only screen and (min-width: 942px) {
.inner {
margin: 0 auto;
width: 942px; } }

.row label {
font-weight: 500; }

.input {
transition: all .5s ease;
margin-bottom: .75rem;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 5px;
background-color: #fafafa;
padding: 0 1rem;
height: 3rem;
color: #575e75;
font-size: .875rem;
/* IE10/11-specific style resets */ }
.input:focus {
transition: all .5s ease;
outline: none;
border: 1px solid #4d97ff; }
.input.fail {
border: 1px solid #ffab1a; }
.input.pass {
border: 1px solid #0fbd8c; }
.input::-ms-reveal, .input::-ms-clear {
display: none; }
</style><style type=“text/css”>/*
* Styles for the Row component used by formsy-react-components
* Should be imported for each component that extends one of
* the formsy-react-components
*/
.row .required-symbol {
display: none; }

.row label {
display: inline-block;
margin-bottom: .75rem; }

.row.no-label label {
display: none; }

/* allow elements such as validation errors to position relative to this row */
.row-with-tooltip {
position: relative; }

.row-label {
margin-bottom: .75rem;
line-height: 1.7rem; }

.row-inline {
display: -webkit-flex;
display: -ms-flexbox;
display: flex; }

/* override margin-bottom so placing a label next to a radio button does not
mess up vertical alignment */
.row-inline label {
margin-bottom: 0; }
</style><style type=“text/css”>/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
Frameless <http://framelessgrid.com/>
by Joni Korpi <http://jonikorpi.com/>
licensed under CC0 <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* … small | medium | intermediate | big …
* … medium-and-smaller |
* … intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 480px; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 768px; } }

@media only screen and (min-width: 942px) {
.inner {
margin: 0 auto;
width: 942px; } }

.dropdown {
display: none;
position: absolute;
right: 0;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 0 0 5px 5px;
background-color: #4d97ff;
padding: 10px;
min-width: 9rem;
max-width: 16.25rem;
overflow: visible;
color: white;
font-size: .8125rem;
font-weight: normal; }
.dropdown.staging {
background-color: #ffab1a; }
.dropdown.open {
display: block; }
.dropdown a:link, .dropdown a:visited, .dropdown a:active {
background-color: transparent;
color: white; }
.dropdown input {
margin-bottom: 12px;
width: calc(100% - 30px); }
.dropdown label {
display: block;
margin-bottom: 5px; }
.dropdown > li {
display: block;
line-height: 30px; }
.dropdown > li.divider {
margin-top: 10px;
border-top: 1px solid rgba(0, 0, 0, 0.1); }
.dropdown > li a {
display: block;
padding: 0 10px; }
.dropdown > li a:hover {
background-color: rgba(0, 0, 0, 0.1);
text-decoration: none; }
.dropdown.with-arrow {
margin-top: 14px;
border-radius: 5px;
overflow: visible; }
.dropdown.with-arrow:before {
display: block;
position: absolute;
top: -7px;
right: 10%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-left: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 5px;
background-color: #4d97ff;
width: 14px;
height: 14px;
content: “”; }
</style><style type=“text/css”>.studio-status-icon-spinner {
/* This class can be used on an icon that should spin.
It first plays the intro animation, then spins forever. */
-webkit-animation-name: intro, spin;
animation-name: intro, spin;
-webkit-animation-duration: .25s, 1s;
animation-duration: .25s, 1s;
-webkit-animation-timing-function: cubic-bezier(0.3, -3, 0.6, 3), cubic-bezier(0.4, 0.1, 0.4, 1);
animation-timing-function: cubic-bezier(0.3, -3, 0.6, 3), cubic-bezier(0.4, 0.1, 0.4, 1);
-webkit-animation-delay: 0s, .25s;
animation-delay: 0s, .25s;
-webkit-animation-iteration-count: 1, infinite;
animation-iteration-count: 1, infinite;
-webkit-animation-direction: normal;
animation-direction: normal;
width: 1.4rem;
/* standard is 1.4 rem but can be overwritten by parent */
height: 1.4rem;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center; }

@-webkit-keyframes intro {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0; }
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1; } }

@keyframes intro {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0; }
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1; } }

@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0);
transform: rotate(0); }
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg); } }

@keyframes spin {
0% {
-webkit-transform: rotate(0);
transform: rotate(0); }
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg); } }
</style><style type=“text/css”>/*
Frameless <http://framelessgrid.com/>
by Joni Korpi <http://jonikorpi.com/>
licensed under CC0 <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* … small | medium | intermediate | big …
* … medium-and-smaller |
* … intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 480px; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 768px; } }

@media only screen and (min-width: 942px) {
.inner {
margin: 0 auto;
width: 942px; } }

.flex-row {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; }
.flex-row.column {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center; }
.flex-row.uneven {
-webkit-align-items: flex-start;
-ms-flex-align: start;
-ms-grid-row-align: flex-start;
align-items: flex-start; }
.flex-row.uneven .short {
width: 13.75em; }
.flex-row.uneven .long {
width: 38.75em;
text-align: left; }
@media only screen and (max-width: 767px) {
.flex-row {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; }
.flex-row.uneven .short,
.flex-row.uneven .long {
margin: auto;
width: 90%; } }
</style><style type=“text/css”>/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
.login {
padding: 10px;
width: 200px;
line-height: 1.5rem;
white-space: normal;
color: white;
font-size: .8125rem; }
.login .button {
padding: .75em; }
.login .row {
margin-bottom: 1.25rem; }
.login .input {
margin-bottom: 12px;
width: calc(100% - 30px);
height: 2.25rem; }
.login label {
padding-top: 5px;
font-weight: bold; }
.login .spinner {
margin: 0 .8rem;
width: 1rem;
vertical-align: middle; }
.login .submit-row {
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row; }
.login .submit-button {
margin-top: 5px; }
.login a {
margin: auto 0;
color: white; }
.login a:link, .login a:visited, .login a:active {
color: white; }
.login a:hover {
background-color: transparent; }
.login .error {
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 5px;
background-color: #ffab1a;
padding: .75em 1em; }
</style><style type=“text/css”></style><style type=“text/css”>/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
Frameless <http://framelessgrid.com/>
by Joni Korpi <http://jonikorpi.com/>
licensed under CC0 <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* … small | medium | intermediate | big …
* … medium-and-smaller |
* … intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 480px; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 768px; } }

@media only screen and (min-width: 942px) {
.inner {
margin: 0 auto;
width: 942px; } }

.overflow-hidden {
/* to avoid double scroll bars this
gets added to body while modal is open */
overflow: hidden; }

.modal-content {
position: relative;
margin: 3.75rem auto;
border-radius: 1rem;
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15);
background-color: white;
padding: 0;
width: 48.75rem; }
.modal-content:focus {
outline: none; }
@media only screen and (max-width: 941px) {
.modal-content {
margin-top: 0;
width: 100%;
overflow: auto; } }
@media only screen and (max-width: 479px), only screen and (max-height: 479px) {
.modal-content {
border-radius: 0;
box-shadow: none;
height: 100%; } }

.modal-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 510;
background-color: rgba(77, 151, 255, 0.7); }

.modal-content-close {
position: absolute;
top: 0.5rem;
right: 0.5rem;
border-radius: 1rem;
background-color: rgba(0, 0, 0, 0.2);
cursor: pointer;
width: 2rem;
height: 2rem;
text-align: center;
line-height: 2rem; }

.modal-content-close-img {
padding-top: 0.5rem; }

/* Close button, Submit button, etc. */
.action-buttons {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin: 1.125rem .8275rem .9375rem .8275rem;
line-height: 1.5rem;
-webkit-justify-content: flex-end !important;
-ms-flex-pack: end !important;
justify-content: flex-end !important;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap; }
@media only screen and (max-width: 941px) {
.action-buttons {
-webkit-justify-content: center !important;
-ms-flex-pack: center !important;
justify-content: center !important;
-webkit-flex-direction: row !important;
-ms-flex-direction: row !important;
flex-direction: row !important; } }

/* setting overall modal to contain overflow looks good, but isn't
compatible with elements (like validation popups) that need to bleed
past modal boundary. This class can be used to force modal button
row to appear to contain overflow. */
.action-buttons-overflow-fix {
margin-bottom: .9375rem; }

/* For action button row where left/right margin is handled by parent element */
.action-buttons.action-buttons-no-inset {
margin-left: 0;
margin-right: 0; }

.action-button {
margin: 0 0 0 .54625rem;
border-radius: .25rem;
padding: 6px 1.25rem 14px 1.25rem;
height: 36px; }

.action-button.close-button {
border: 1px solid rgba(0, 0, 0, 0.1); }

.action-button-text {
display: -webkit-flex;
display: -ms-flexbox;
display: flex; }

.action-button.disabled {
background-color: rgba(0, 0, 0, 0.2); }

.error-text {
display: block;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 5px;
background-color: #ffab1a;
padding: 1rem;
min-height: 1rem;
overflow: visible;
color: white; }

.modal-sizes * {
box-sizing: border-box; }

.modal-sizes {
margin: 100px auto;
outline: none;
padding: 0;
max-width: 36.25rem;
/* 580px; */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
@media only screen and (min-width: 480px) and (max-width: 767px), only screen and (min-height: 480px) and (max-height: 767px) {
.modal-sizes {
margin: 40px auto; } }
@media only screen and (max-width: 479px), only screen and (max-height: 479px) {
.modal-sizes {
margin: 0 auto;
width: auto; } }
.modal-sizes .modal-header {
padding-top: .75rem;
width: 100%;
height: 3rem; }
@media only screen and (max-width: 479px), only screen and (max-height: 479px) {
.modal-sizes .modal-header {
border-radius: 0; } }
.modal-sizes .modal-content {
font-size: .875rem; }
</style><style type=“text/css”>/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
#navigation {
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 10;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
background-color: #4d97ff;
width: 100%;
/* NOTE: Height should match offset settings in main.scss file */
height: 50px; }
#navigation.staging {
background-color: #ffab1a; }
.ie9 #navigation {
display: table;
table-layout: fixed; }
#navigation .inner > ul {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin: 0;
padding: 0;
height: 50px;
list-style: none;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start; }
.ie9 #navigation .inner > ul {
display: table-row; }
#navigation .inner > ul > li {
display: inline-block;
position: relative;
float: left;
margin: 0;
height: 100%;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start; }
#navigation .inner > ul > li.right {
float: right;
margin-left: auto;
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end; }
.ie9 #navigation .inner > ul > li.right {
float: none; }
#navigation .inner > ul > li.right a:hover {
background-color: rgba(0, 0, 0, 0.1); }
.ie9 #navigation .inner > ul > li {
display: table-cell;
float: none;
height: 50px;
vertical-align: bottom; }
#navigation .link > a {
display: block;
padding: 13px 15px 4px 15px;
height: 33px;
text-decoration: none;
white-space: nowrap;
color: white;
font-size: .85rem;
font-weight: bold; }
#navigation .link > a:hover {
background-color: rgba(0, 0, 0, 0.1); }
</style><style type=“text/css”>/*
Frameless <http://framelessgrid.com/>
by Joni Korpi <http://jonikorpi.com/>
licensed under CC0 <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* … small | medium | intermediate | big …
* … medium-and-smaller |
* … intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 480px; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 768px; } }

@media only screen and (min-width: 942px) {
.inner {
margin: 0 auto;
width: 942px; } }

.modal-content-iframe {
border: 0; }
</style><style type=“text/css”>/*
Frameless <http://framelessgrid.com/>
by Joni Korpi <http://jonikorpi.com/>
licensed under CC0 <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* … small | medium | intermediate | big …
* … medium-and-smaller |
* … intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 480px; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 768px; } }

@media only screen and (min-width: 942px) {
.inner {
margin: 0 auto;
width: 942px; } }

.modal-content.mod-registration {
width: 38.125rem;
overflow: hidden; }

.modal-content-iframe.mod-registration {
width: 38.125rem;
min-height: 27.375rem; }

.modal-content.recaptcha-open {
min-height: 500px; }

.modal-content-iframe.recaptcha-open {
min-height: 500px; }

@media only screen and (max-width: 941px) {
.modal-content.mod-registration {
width: 100%;
overflow: scroll; }
.modal-content-iframe.mod-registration {
height: 27.375rem; } }
</style><style type=“text/css”>/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
Frameless <http://framelessgrid.com/>
by Joni Korpi <http://jonikorpi.com/>
licensed under CC0 <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* … small | medium | intermediate | big …
* … medium-and-smaller |
* … intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 480px; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 768px; } }

@media only screen and (min-width: 942px) {
.inner {
margin: 0 auto;
width: 942px; } }

.account-nav .user-info {
display: inline-block;
padding: 14px 15px 4px 15px;
max-width: 260px;
height: 33px;
overflow: hidden;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
color: white;
font-size: .8125rem;
font-weight: normal; }
.account-nav .user-info .avatar {
margin-right: 10px;
border-radius: 3px;
width: 24px;
height: 24px;
vertical-align: middle; }
.account-nav .user-info:hover {
background-color: rgba(0, 0, 0, 0.1); }
.account-nav .user-info.open {
background-color: rgba(0, 0, 0, 0.1); }
.account-nav .user-info:after {
display: inline-block;
margin-left: 8px;
background-image: url(“/images/dropdown.png”);
background-repeat: no-repeat;
background-position: center center;
background-size: 50%;
width: 20px;
height: 20px;
vertical-align: middle;
content: “ ”; }

.account-nav .dropdown {
top: 50px;
padding: 0;
padding-top: 5px;
width: 100%;
box-sizing: border-box; }

@media only screen and (max-width: 479px) {
.account-nav {
margin-left: 0; }
.account-nav .user-info .avatar {
margin-right: 0; }
.account-nav .user-info:after {
display: none; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
.account-nav {
margin-left: 0; }
.account-nav .user-info .avatar {
margin-right: 0; }
.account-nav .user-info:after {
display: none; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
.account-nav {
margin-left: 0; } }
</style><style type=“text/css”>/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
Frameless <http://framelessgrid.com/>
by Joni Korpi <http://jonikorpi.com/>
licensed under CC0 <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* … small | medium | intermediate | big …
* … medium-and-smaller |
* … intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 480px; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 768px; } }

@media only screen and (min-width: 942px) {
.inner {
margin: 0 auto;
width: 942px; } }

#navigation.staging .messages .message-count {
display: none; }
#navigation.staging .messages .message-count.show {
background-color: #4d97ff; }

#navigation .logo {
margin-right: 10px; }
#navigation .logo a {
display: block;
transition: .15s ease all;
margin: 0 6px 0 0;
border: 0;
background-image: url(“/images/logo_sm.png”);
background-repeat: no-repeat;
background-position: center center;
background-size: 95%;
width: 81px;
height: 50px; }
#navigation .logo a:hover {
transition: .15s ease all;
background-size: 100%; }

#navigation .inner > ul > li.search {
margin: 0 20px;
border-right: 0;
color: white;
-webkit-flex-grow: 3;
-ms-flex-positive: 3;
flex-grow: 3; }
.ie9 #navigation .inner > ul > li.search {
width: 100%; }
#navigation .inner > ul > li.search .form {
margin: 0; }
#navigation .inner > ul > li.search .row .help-block {
display: none; }
#navigation .inner > ul > li.search .input,
#navigation .inner > ul > li.search .button {
display: inline-block;
margin-top: 5px;
outline: none;
border: 0;
background-color: rgba(0, 0, 0, 0.1);
height: 14px; }
#navigation .inner > ul > li.search .input,
#navigation .inner > ul > li.search .button {
transition: .15s ease background-color;
padding: 0;
padding-right: 10px;
padding-left: 40px;
width: calc(100% - 50px);
height: 40px;
color: white;
font-size: .85em; }
#navigation .inner > ul > li.search .input::-webkit-input-placeholder,
#navigation .inner > ul > li.search .button::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.75); }
#navigation .inner > ul > li.search .input:-ms-input-placeholder,
#navigation .inner > ul > li.search .button:-ms-input-placeholder {
color: rgba(255, 255, 255, 0.75); }
#navigation .inner > ul > li.search .input::placeholder,
#navigation .inner > ul > li.search .button::placeholder {
color: rgba(255, 255, 255, 0.75); }
#navigation .inner > ul > li.search .input:focus,
#navigation .inner > ul > li.search .button:focus {
transition: .15s ease background-color;
background-color: rgba(0, 0, 0, 0.2); }
.ie9 #navigation .inner > ul > li.search .input, .ie9
#navigation .inner > ul > li.search .button {
width: 70px; }
#navigation .inner > ul > li.search .btn-search {
position: absolute;
box-shadow: none;
background-color: transparent;
background-image: url(“/images/nav-search-glass.png”);
background-repeat: no-repeat;
background-position: center center;
background-size: 14px 14px;
width: 40px;
height: 40px; }
#navigation .inner > ul > li.search .btn-search:hover {
box-shadow: none; }

#navigation .messages > a,
#navigation .mystuff > a {
background-repeat: no-repeat;
background-position: center center;
background-size: 45%;
padding-right: 10px;
padding-left: 10px;
width: 30px;
overflow: hidden;
text-indent: 50px;
white-space: nowrap; }
#navigation .messages > a:hover,
#navigation .mystuff > a:hover {
background-size: 50%; }

#navigation .messages > a {
background-image: url(“/images/nav-notifications.png”); }

#navigation .messages .message-count {
display: none; }
#navigation .messages .message-count.show {
display: block;
position: absolute;
top: .5rem;
right: .25rem;
border-radius: 1rem;
background-color: #ffab1a;
padding: 0 .25rem;
text-indent: 0;
line-height: 1rem;
color: white;
font-size: .7rem;
font-weight: bold; }

#navigation .mystuff > a {
background-image: url(“/images/mystuff.png”); }

@media only screen and (max-width: 479px) {
#navigation .inner {
width: 18.75em; }
#navigation .inner > ul > li.login-item {
margin-left: 0; }
#navigation .inner .create,
#navigation .inner .discuss,
#navigation .inner .explore,
#navigation .inner .search,
#navigation .inner .help,
#navigation .inner .mystuff,
#navigation .inner .profile-name {
display: none; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
#navigation .inner {
width: 28.75em; }
#navigation .inner > ul > li.login-item {
margin-left: 0; }
#navigation .inner .discuss,
#navigation .inner .explore,
#navigation .inner .search,
#navigation .inner .mystuff,
#navigation .inner .profile-name {
display: none; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
#navigation .inner {
width: 38.75em; }
#navigation .inner > ul > li.login-item {
margin-left: 0; }
#navigation .inner .explore,
#navigation .inner .search,
#navigation .inner .mystuff {
display: none; } }
</style><style type=“text/css”>/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
#footer {
display: block;
background-color: #f2f2f2;
padding: 10px 0;
color: #575e75;
font-size: .85rem; }
</style><style type=“text/css”>/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
Frameless <http://framelessgrid.com/>
by Joni Korpi <http://jonikorpi.com/>
licensed under CC0 <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* … small | medium | intermediate | big …
* … medium-and-smaller |
* … intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 480px; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 768px; } }

@media only screen and (min-width: 942px) {
.inner {
margin: 0 auto;
width: 942px; } }

.select label {
font-weight: 500; }

.select select {
transition: border .5s ease;
margin-bottom: .75rem;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 5px;
background: #fafafa url(data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9IkxheWVyIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjY0Ij48cGF0aCBkPSJNMjQgMzcuNDNhMS44OCAxLjg4IDAgMCAxLTEuMzMtLjU1bC01LjExLTUuMTFhMS44NyAxLjg3IDAgMCAxIDAtMi42NGMuNzMtLjczIDEyLjE0LS43MyAxMi44NyAwYTEuODcgMS44NyAwIDAgMSAwIDIuNjRsLTUuMTEgNS4xMWExLjg2IDEuODYgMCAwIDEtMS4zMi41NXoiIGZpbGw9IiNiM2IzYjMiLz48cGF0aCBzdHlsZT0iaXNvbGF0aW9uOmlzb2xhdGUiIGZpbGw9IiMyMzFmMjAiIG9wYWNpdHk9Ii4xIiBkPSJNLjAxIDBoMXY2NGgtMXoiLz48L3N2Zz4 no-repeat right center;
padding-right: 4rem;
padding-left: 1rem;
width: 100%;
height: 3rem;
color: #575e75;
font-size: .875rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; }
.select select::-ms-expand {
display: none; }
.select select::-ms-value {
background-color: inherit;
padding-left: 1rem;
color: inherit; }
.select select:focus {
outline: none;
border: 1px solid #4d97ff; }
.select select:-moz-focusring {
text-shadow: 0 0 0 #575e75;
color: transparent; }
.select select:focus, .select select:hover {
background: #fafafa url(data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9IkxheWVyIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjY0Ij48cGF0aCBzdHlsZT0iaXNvbGF0aW9uOmlzb2xhdGUiIGZpbGw9IiMyMzFmMjAiIG9wYWNpdHk9Ii4xIiBkPSJNLjAxIDBoNDh2NjRoLTQ4eiIvPjxwYXRoIGQ9Ik0yNCAzNy41OGExLjg4IDEuODggMCAwIDEtMS4zMy0uNThsLTUuMTEtNS4xMWExLjg5IDEuODkgMCAwIDEgMC0yLjY1Yy43My0uNzMgMTIuMTQtLjczIDEyLjg3IDBhMS44NyAxLjg3IDAgMCAxIDAgMi42NEwyNS4zMiAzN2ExLjg2IDEuODYgMCAwIDEtMS4zMi41OHoiIGZpbGw9IiNiM2IzYjMiLz48L3N2Zz4 no-repeat right center; }
.select select > option {
background-color: white;
width: 100%; }
</style><style type=“text/css”>/*
Frameless <http://framelessgrid.com/>
by Joni Korpi <http://jonikorpi.com/>
licensed under CC0 <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* … small | medium | intermediate | big …
* … medium-and-smaller |
* … intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 480px; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 768px; } }

@media only screen and (min-width: 942px) {
.inner {
margin: 0 auto;
width: 942px; } }

.language-chooser .select select {
width: 13.75rem;
/* 3 columns */ }
</style><style type=“text/css”>/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
Frameless <http://framelessgrid.com/>
by Joni Korpi <http://jonikorpi.com/>
licensed under CC0 <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* … small | medium | intermediate | big …
* … medium-and-smaller |
* … intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 480px; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 768px; } }

@media only screen and (min-width: 942px) {
.inner {
margin: 0 auto;
width: 942px; } }

#footer .lists {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
text-align: center;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between; }
#footer .lists dl {
display: inline-block;
vertical-align: top;
text-align: left;
font-size: .8rem; }
#footer .lists dt {
display: block;
margin-bottom: 8px; }
#footer .lists dd {
display: block;
margin: 5px 0;
line-height: 1.2rem; }
#footer .lists dd a {
font-weight: 400; }

#footer .copyright {
display: block;
width: 100%;
text-align: center; }
#footer .copyright p {
font-size: .7rem; }

#footer .language-chooser {
text-align: center; }
</style><style type=“text/css”>/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
Frameless <http://framelessgrid.com/>
by Joni Korpi <http://jonikorpi.com/>
licensed under CC0 <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* … small | medium | intermediate | big …
* … medium-and-smaller |
* … intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 480px; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 768px; } }

@media only screen and (min-width: 942px) {
.inner {
margin: 0 auto;
width: 942px; } }

#donor {
color: #575e75;
font-size: .875rem;
line-height: 1.5em;
background-color: #f2f2f2;
padding-bottom: 2.5rem;
padding-top: 1rem; }
#donor #donor-text {
text-align: center;
width: 58.75em;
margin: 0 auto; }

@media only screen and (min-width: 768px) and (max-width: 942px) {
#donor #donor-text {
width: 53.75em; } }

@media only screen and (min-width: 480px) and (max-width: 768px) {
#donor #donor-text {
width: 28.75em; } }

@media only screen and (max-width: 480px) {
#donor #donor-text {
width: 18.75em; } }
</style><style type=“text/css”>.crash-container {
/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
Frameless <http://framelessgrid.com/>
by Joni Korpi <http://jonikorpi.com/>
licensed under CC0 <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* … small | medium | intermediate | big …
* … medium-and-smaller |
* … intermediate-and-smaller |
*/
/* Height */
margin: 3rem auto;
border: 1px solid #d9d9d9;
border-radius: 10px;
background-color: #fcfcfc;
width: 60%;
overflow: hidden;
text-align: center; }
@media only screen and (max-width: 479px) {
.crash-container #view {
text-align: center; }
.crash-container .inner {
margin: 0 auto;
width: 100%; } }
@media only screen and (min-width: 480px) and (max-width: 767px) {
.crash-container #view {
text-align: center; }
.crash-container .inner {
margin: 0 auto;
width: 480px; } }
@media only screen and (min-width: 768px) and (max-width: 941px) {
.crash-container #view {
text-align: center; }
.crash-container .inner {
margin: 0 auto;
width: 768px; } }
@media only screen and (min-width: 942px) {
.crash-container .inner {
margin: 0 auto;
width: 942px; } }
.crash-container img {
width: 100%; }
.crash-container .crash-message {
margin: 2rem; }
</style><style type=“text/css”>/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
Frameless <http://framelessgrid.com/>
by Joni Korpi <http://jonikorpi.com/>
licensed under CC0 <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* … small | medium | intermediate | big …
* … medium-and-smaller |
* … intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 480px; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 768px; } }

@media only screen and (min-width: 942px) {
.inner {
margin: 0 auto;
width: 942px; } }

.title-banner {
transition: background-image .5s ease, background-color .5s ease;
margin-bottom: 40px;
background-color: #0fbd8c;
background-position: center;
background-size: cover;
padding: 20px 0;
width: 100%; }

.title-banner-h1,
.title-banner-p {
margin: 0 auto;
padding: 5px 0;
text-align: center;
color: white; }

.title-banner-p {
max-width: 500px; }

.title-banner-strong {
font-weight: 700; }

.title-banner.mod-blue-bg {
background-color: #4d97ff; }
.title-banner.mod-blue-bg a {
color: white; }
.title-banner.mod-blue-bg a.mod-underline {
text-decoration: underline; }
</style><style type=“text/css”>/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
.warning-banner {
background-color: #ff661a;
margin-bottom: 0; }
.warning-banner .warning-banner-container {
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center; }
</style><style type=“text/css”>/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
Frameless <http://framelessgrid.com/>
by Joni Korpi <http://jonikorpi.com/>
licensed under CC0 <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* … small | medium | intermediate | big …
* … medium-and-smaller |
* … intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 480px; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 768px; } }

@media only screen and (min-width: 942px) {
.inner {
margin: 0 auto;
width: 942px; } }

/* Tags */
html,
body {
display: block;
margin: 0;
background-color: #4280d7;
padding: 0;
color: #575e75;
font-family: “Helvetica Neue”, “Helvetica”, Arial, sans-serif; }

/* Typography */
h1,
h2,
h3,
h4 {
margin: 0;
border: 0;
padding: 0;
color: #575e75;
font-weight: bold; }

h1 {
font-size: 2.5rem;
font-weight: bold; }

h2 {
font-size: 2rem;
font-weight: bold; }

h3 {
font-size: 1.4rem;
font-weight: bold; }

h4 {
font-size: 1rem;
font-weight: bold; }

h5 {
text-transform: uppercase;
letter-spacing: 2px;
font-size: .85rem;
font-weight: bold; }

p.legal {
font-size: .8rem; }

p.intro {
font-size: 1.1rem; }

p.callout {
margin: 1.5em 0;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: .5rem;
background-color: rgba(77, 151, 255, 0.1);
padding: 1.25em; }
p.callout.orange {
background-color: rgba(244, 157, 37, 0.1); }

p a {
white-space: nowrap; }

b,
strong {
font-weight: bold; }

/* Links */
a {
cursor: pointer;
color: #4d97ff;
font-weight: bold; }
a:link, a:visited, a:active {
text-decoration: none;
color: #4d97ff; }
a:hover {
text-decoration: none;
color: #4280d7; }

/* Classes */
.empty {
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 5px;
background-color: rgba(77, 151, 255, 0.1);
padding: 10px;
text-align: center;
line-height: 2rem;
color: #575e75; }
.empty h4 {
color: #575e75; }

h1,
h2,
h3,
h4,
h5,
p {
line-height: 1.7em;
color: #575e75; }

p {
font-size: 1rem;
font-weight: normal; }

::selection {
background-color: rgba(77, 151, 255, 0.25); }

ol,
ul {
padding-left: 20px;
line-height: 1.5em;
font-size: 1rem;
font-weight: normal; }
ol li,
ul li {
margin: .75em 0; }

dl {
line-height: 1.5rem;
font-size: 1rem;
font-weight: normal; }
dl dt {
font-weight: bold; }
dl dd {
margin: 0; }

#view {
display: inline-block;
/* NOTE: Margin should match height in navigation.scss */
margin-top: 50px;
background-color: #fcfcfc;
padding: 20px 0;
min-width: 100%;
min-height: 680px; }
</style><style type=“text/css”>/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
Frameless <http://framelessgrid.com/>
by Joni Korpi <http://jonikorpi.com/>
licensed under CC0 <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* … small | medium | intermediate | big …
* … medium-and-smaller |
* … intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 480px; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 768px; } }

@media only screen and (min-width: 942px) {
.inner {
margin: 0 auto;
width: 942px; } }

.social-message {
margin: 0;
border-bottom: 1px solid #d9d9d9;
padding: 1rem;
list-style-type: none; }

.social-message-icon {
opacity: .25; }

.social-message.mod-unread {
background-color: rgba(77, 151, 255, 0.1); }

.social-message.mod-unread .social-message-icon {
opacity: 1; }

.flex-row.mod-social-message {
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-items: flex-start;
-ms-flex-align: start;
-ms-grid-row-align: flex-start;
align-items: flex-start; }

.social-message-content {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
max-width: 38.75rem;
text-align: left;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start; }

.social-message-icon {
margin: .2rem 1rem 0 0;
min-width: 1.25rem; }

a.social-messages-profile-link {
color: #575e75; }
a.social-messages-profile-link:hover {
color: #4d97ff; }

.flex-row.mod-comment-message {
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start; }

.comment-text {
margin-left: 1.5rem; }

@media only screen and (max-width: 479px) {
.social-message {
text-align: left; }
.social-message-date {
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end; }
.social-message-content {
max-width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
.social-message {
text-align: left; }
.social-message-date {
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end; }
.social-message-content {
max-width: 100%; } }
</style><style type=“text/css”>.emoji {
max-width: 24px;
vertical-align: middle; }
</style><style type=“text/css”>/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
.comment-text {
position: relative;
border: 1px solid #d9d9d9;
border-radius: 0 5px 5px 5px;
padding: 1rem; }

.comment-text:before {
display: block;
position: absolute;
top: -1px;
left: -13px;
border-bottom: 12px solid #d9d9d9;
border-left: 13px solid #d9d9d9;
border-radius: 0 0 0 13px;
width: 0;
content: “”; }

.comment-text:after {
display: block;
position: absolute;
top: 0;
left: -12px;
border-bottom: 10px solid white;
border-left: 12px solid white;
border-radius: 0 0 0 12px;
width: 0;
content: “”; }

.emoji-text.mod-comment {
margin: 0;
overflow: hidden; }

.comment-text-timestamp {
margin: 1rem 0 0;
color: #b3b3b3;
font-size: .8rem; }
</style><style type=“text/css”>/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
Frameless <http://framelessgrid.com/>
by Joni Korpi <http://jonikorpi.com/>
licensed under CC0 <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* … small | medium | intermediate | big …
* … medium-and-smaller |
* … intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 480px; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
#view {
text-align: center; }
.inner {
margin: 0 auto;
width: 768px; } }

@media only screen and (min-width: 942px) {
.inner {
margin: 0 auto;
width: 942px; } }

#view {
background-color: #fafafa;
padding: 0; }

.title-banner.mod-messages {
background-color: #4d97ff;
color: white; }

.flex-row.mod-messages-title {
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between; }

.title-banner-h1.mod-messages {
margin: 0;
text-align: left; }

.form-control {
color: #575e75; }

.help-block {
display: none; }

.messages-admin,
.messages-social {
margin-bottom: 3rem; }

.messages-social {
overflow-anchor: none; }

.messages-admin-list,
.messages-social-list {
padding: 0;
list-style-type: none; }

.messages-header {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; }

.messages-header-unread {
margin-left: 1rem;
border-radius: 1rem;
background-color: #ffab1a;
padding: .25rem .5rem;
line-height: 1rem;
color: white; }

.admin-message {
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 5px;
background-color: rgba(77, 151, 255, 0.25);
padding: 1rem; }

.admin-message-header {
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-items: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center; }

.admin-message-icon {
vertical-align: middle; }

.admin-message-content {
margin: 0; }

.admin-message-date {
font-size: .8rem; }

.button.mod-scratcher-invite-dismiss,
.button.mod-admin-message-dismiss {
box-shadow: none;
padding: .25rem;
line-height: .8rem; }
.button.mod-scratcher-invite-dismiss:hover,
.button.mod-admin-message-dismiss:hover {
box-shadow: none; }

.messages-social-list {
border: 1px solid #d9d9d9;
border-bottom-width: 0;
border-radius: 5px;
background-color: white; }

.comment-message-info {
margin-top: 0;
line-height: 1.5rem; }

.comment-text {
background-color: white;
max-width: 30.25rem; }

.flex-row.mod-comment-message {
margin-bottom: .25rem;
-webkit-align-items: flex-start;
-ms-flex-align: start;
-ms-grid-row-align: flex-start;
align-items: flex-start; }

.comment-message-info {
text-align: left; }

.comment-message-info-img {
width: 40px;
height: 40px; }

.messages-social-loadmore {
display: block;
margin: 1rem auto;
width: 58.75rem; }

.emoji-text.mod-comment {
word-wrap: break-word; }

@media only screen and (max-width: 479px) {
.flex-row.admin-message-header,
.flex-row.mod-comment-message {
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row; }
.comment-text {
max-width: 9.75rem; }
.messages-social-loadmore {
width: 18.75em; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
.flex-row.admin-message-header,
.flex-row.mod-comment-message {
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row; }
.comment-text {
max-width: 19.5rem; }
.messages-social-loadmore {
width: 28.75em; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
.comment-text {
max-width: 23.75rem; }
.messages-social-loadmore {
width: 38.75em; } }
</style><style type=“text/css”></style></head>






This is the code I borrowed from the original inbox page, with the button image as well. Thanks!

Last edited by Harakou (Jan. 24, 2022 07:30:36)

Here are some links:

My Scratch
My Test account
My Discord


I reeeeally like Appel


#2June 9, 2021 01:48:28
Sheep_maker
Scratcher
1000+ posts

Marking Scratch Messages as Read

You should put the HTML code inside [code][/code] tags, like

[code=html]
<!doctype html>
<html>
<head>
    <title>Example Domain</title>
    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style type="text/css">
    body {
        background-color: #f0f0f2;
        margin: 0;
        padding: 0;
        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        
    }
    div {
        width: 600px;
        margin: 5em auto;
        padding: 2em;
        background-color: #fdfdff;
        border-radius: 0.5em;
        box-shadow: 2px 3px 7px 2px rgba(0,0,0,0.02);
    }
    a:link, a:visited {
        color: #38488f;
        text-decoration: none;
    }
    @media (max-width: 700px) {
        div {
            margin: 0 auto;
            width: auto;
        }
    }
    </style>    
</head>
<body>
<div>
    <h1>Example Domain</h1>
    <p>This domain is for use in illustrative examples in documents. You may use this
    domain in literature without prior coordination or asking for permission.</p>
    <p><a href="https/www.iana.org/domains/example">More information...</a></p>
</div>
</body>
</html>
[/code]
produces
<!doctype html>
<html>
<head>
    <title>Example Domain</title>
    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style type="text/css">
    body {
        background-color: #f0f0f2;
        margin: 0;
        padding: 0;
        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        
    }
    div {
        width: 600px;
        margin: 5em auto;
        padding: 2em;
        background-color: #fdfdff;
        border-radius: 0.5em;
        box-shadow: 2px 3px 7px 2px rgba(0,0,0,0.02);
    }
    a:link, a:visited {
        color: #38488f;
        text-decoration: none;
    }
    @media (max-width: 700px) {
        div {
            margin: 0 auto;
            width: auto;
        }
    }
    </style>    
</head>
<body>
<div>
    <h1>Example Domain</h1>
    <p>This domain is for use in illustrative examples in documents. You may use this
    domain in literature without prior coordination or asking for permission.</p>
    <p><a href="https://www.iana.org/domains/example">More information...</a></p>
</div>
</body>
</html>
- Sheep_maker This is a kumquat-free signature. :P
This is my signature. It appears below all my posts. Discuss it on my profile, not the forums. Here's how to make your own.
.postsignature { overflow: auto; } .scratchblocks { overflow-x: auto; overflow-y: hidden; }
#3June 9, 2021 01:55:39
sarcacocca
Scratcher
64 posts

Marking Scratch Messages as Read

@Sheep_maker
Ohh, didn't know you could do that. I'll remember for next time!
Here are some links:

My Scratch
My Test account
My Discord


I reeeeally like Appel


#4June 9, 2021 01:58:58
gosoccerboy5
Scratcher
1000+ posts

Marking Scratch Messages as Read

sarcacocca wrote:

@Sheep_maker
Ohh, didn't know you could do that. I'll remember for next time!
you can edit your post too.
#5Jan. 23, 2022 03:27:36
Toronto-Life
Scratcher
8 posts

Marking Scratch Messages as Read

umm good code

Powered by DjangoBB