html, body {
  font: 13px Helvetica Neue, Lucida Grande, sans-serif;
  height: 100%;
  margin: 0;
}

/* MARK: - Editor */

.editor {
  display: -webkit-flex;
  -webkit-flex-direction: row;
  height: 100%;
}

.layers-panel {
  width: 200px;
}
.canvas {
  -webkit-flex: 1;
}
.inspector-panel {
  width: 200px;
}

html, body {
  font: 13px Helvetica Neue, Lucida Grande, sans-serif;
  height: 100%;
  margin: 0;
  background: rgb(236, 236, 236);
}

/* MARK: - Editor */

.editor {
  display: -webkit-flex;
  -webkit-flex-direction: row;
  height: 100%;
}

.layers-panel {
  width: 200px;
}
.canvas {
  -webkit-flex: 1;
}
.inspector-panel {
  width: 200px;
}

Use OS X default background color

Use OS X default background color


html {
	height: 100%;
}
body {
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #333;
	color: #ccc;
}
A:link, A:visited, A:active {
	color: #ccc;
	text-decoration: none;
}
A:hover {
	color: #fff;
	text-decoration: underline;
}
img.arrow {
	border-width: 0px;
	vertical-align: text-top;
}
img {
	border: solid 2px #ccc;
}
img:hover {
	border: solid 8px #fff;
}
.selected {
	border: solid 8px #fff;
}
.thm {
	border-style: dotted;
}
.thm_selected {
	border-style: dotted;
	border-width: 8px;
}
.owner {
	font-size: 66%;
}
#title {
	text-align: center;
}
#content {
	text-align: center;
}

html {
	height: 100%;
}
body {
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #333;
	color: #ccc;
}
A:link, A:visited, A:active {
	color: #ccc;
	text-decoration: none;
}
A:hover {
	color: #fff;
	text-decoration: underline;
}
img {
	border: solid 2px #ccc;
}
img:hover {
	border: solid 8px #fff;
}
.selected {
	border: solid 8px #fff;
}
.arrow {
	border-width: 0px;
	vertical-align: text-top;
}
.arrow:hover {
	border-width: 0px;
	vertical-align: text-top;
}
.thm {
	border-style: dotted;
}
.thm_selected {
	border-style: dotted;
	border-width: 8px;
}
.owner {
	font-size: 66%;
}
#title {
	text-align: center;
}
#content {
	text-align: center;
}

Fix arrow hover border style.

Fix arrow hover border style.


/*
  HOVER EFFECTS

  Put the hide-child class on a parent element and any nested element with the
  child class will be hidden and displayed on hover or focus.

 Hidden until hover or focus

 Hidden until hover or focus

 Hidden until hover or focus

 Hidden until hover or focus

*/

.hide-child .child {
  display: none;
}

.hide-child:hover  .child,
.hide-child:focus  .child,
.hide-child:active .child {
  display: block;
}

/*
  HOVER EFFECTS

  Put the hide-child class on a parent element and any nested element with the
  child class will be hidden and displayed on hover or focus.

 Hidden until hover or focus

 Hidden until hover or focus

 Hidden until hover or focus

 Hidden until hover or focus

*/

.dim { opacity: 1; transition: opacity .15s ease-in; }
.dim:hover { opacity: .5; transition: opacity .15s ease-in; }
.dim:active,
.dim:focus { opacity: .8; transition: opacity .15s ease-out; }

.hide-child .child {
  display: none;
}

.hide-child:hover  .child,
.hide-child:focus  .child,
.hide-child:active .child {
  display: block;
}

Move dim from skins to hovers.

Move dim from skins to hovers.


body {
	padding-top: 70px;
}

.social-icons {
	width: 200px;
}

ul.social-slide a {
	background-image: url('/images/social-sprite.png');
	height: 62px;
	width: 64px;
	margin: 10px;
	display: block;
	transition: all ease 0.3s;
}

.facebook
{
	background-position: -10px -10px;
}

.facebook:hover
{
	background-position: -10px -94px;
}

.linkedin
{
	background-position: -346px -10px;
}

.linkedin:hover
{
	background-position: -346px -94px;
}

.google-plus
{
	background-position: -262px -10px;
}

.google-plus:hover
{
	background-position: -262px -94px;
}

.twitter
{
	background-position: -682px -10px;
}

.twitter:hover
{
	background-position: -682px -94px;
}

body {
	padding-top: 70px;
}

.social-icons {
	width: 220px;
}

ul.social-slide a {
	background-image: url('/images/social-sprite.png');
	height: 62px;
	width: 64px;
	margin: 10px;
	display: block;
	transition: all ease 0.3s;
}

.facebook
{
	background-position: -10px -10px;
}

.facebook:hover
{
	background-position: -10px -94px;
}

.linkedin
{
	background-position: -346px -10px;
}

.linkedin:hover
{
	background-position: -346px -94px;
}

.google-plus
{
	background-position: -262px -10px;
}

.google-plus:hover
{
	background-position: -262px -94px;
}

.twitter
{
	background-position: -682px -10px;
}

.twitter:hover
{
	background-position: -682px -94px;
}

STOP WRAPPING ON MOBILE IT DOESN'T MAKE ANY SENSE


.add-item {
    margin: 6px;
}

.item-cost {
    font-family: "Lucida Console", Monaco, monospace;
}

Use monospace font for cost

Use monospace font for cost


/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require_self
 */

@import 'bootstrap-sprockets';
@import 'bootstrap';

Add import bootstrap to assest pipeline

Add import bootstrap to assest pipeline


form.contact-form label {
  float: left;
  width: 150px;
  display: block;
  text-align: right;
  margin-right: 5px;
  margin-bottom: 3px;
}

form.contact-form input, form.contact-form select, form.contact-form textarea {
  float: left;
  margin-bottom: 3px;
  margin-right: 5px;
}

form.contact-form br {
  clear: left;
  margin-bottom: 3px;
}

form.contact-form div.form-field {
  float: left;
  margin-bottom: 3px;
  width: 300px;
}

form.contact-form div.form-field br {
  margin: 15px 0;
}

form.contact-form div.form-field input {
  float: none;
}

form.contact-form div.form-field-description {
  float: left;
  margin-bottom: 3px;
  width: 300px;
  clear: both;
  margin-left: 155px;
  font-size: 0.8em;
  line-height: 110%;
}

form.contact-formdiv.form-field label {
  float: none;
  width: auto;
  display: inline;
  text-align: left;
  margin-left: 5px;
}

form.contact-form div.captcha {
  margin: 7px 0;
}

form.contact-form input.button {
  cursor: pointer;
}

form.contact-form label {
  float: left;
  width: 150px;
  display: block;
  text-align: right;
  margin-right: 5px;
  margin-bottom: 3px;
}

form.contact-form input, form.contact-form select, form.contact-form textarea {
  float: left;
  margin-bottom: 3px;
  margin-right: 5px;
}

form.contact-form br {
  clear: left;
  margin-bottom: 3px;
}

form.contact-form div.form-field {
  float: left;
  margin-bottom: 3px;
  width: 300px;
}

form.contact-form div.form-field br {
  margin: 15px 0;
}

form.contact-form div.form-field input {
  float: none;
}

form.contact-form div.form-field-description {
  float: left;
  margin-bottom: 3px;
  width: 300px;
  clear: both;
  margin-left: 155px;
  font-size: 0.8em;
  line-height: 110%;
}

form.contact-form div.form-field label {
  float: none;
  width: auto;
  display: inline;
  text-align: left;
  margin-left: 5px;
}

form.contact-form div.captcha {
  margin: 7px 0;
}

form.contact-form input.button {
  cursor: pointer;
}

Fix bug causing funny formatting on contact form checkboxes.


.switcher {
    width: 100px;
    background-color: #282D31;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.switcher ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.switcher .switch-btn {
    height: 60px;
    width: 60px;
    margin: 20px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    font-weight: bold;
}

.switcher li {
    box-sizing: border-box;
    background-color: var(--lightgrey);
    opacity: .3;
}

.switcher li:hover {
    box-sizing: border-box;
    border: 4px solid var(--midgrey);
    background-color: var(--lightgrey);
}

.switcher li.isSelected {
    opacity: 1;
}

.switcher .add-blog-button {
    color: var(--lightgrey);
}

.switcher .add-blog-button:hover {
    background-color: #51575D;
}

.switcher {
    width: 60px;
    background-color: #282D31;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.switcher ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.switcher .switch-btn {
    height: 40px;
    width: 40px;
    margin: 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8em;
    font-weight: bold;
}

.switcher li {
    box-sizing: border-box;
    background-color: var(--lightgrey);
    opacity: .3;
    border-radius: 5px;
}

.switcher li:hover {
    box-sizing: border-box;
    border: 4px solid var(--midgrey);
    background-color: var(--lightgrey);
}

.switcher li.isSelected {
    opacity: 1;
}

.switcher .add-blog-button {
    color: var(--lightgrey);
}

.switcher .add-blog-button:hover {
    background-color: #51575D;
}

Improve Blog Switcher's Use of Space

:art: Improve Blog Switcher's Use of Space


.blurb div {
	border-style: groove;
	background-color: yellow;
	overflow: scroll;
}

.vertex.tac text {
	text-anchor: end;
}

.vertex.asoiaf text {
	text-anchor: start;
}

.vertex.selected text {
	font-weight: bold;
}

line.edge {
	visibility: hidden;
	stroke: blue;
	stroke-width: 2px;
}

line.edge.active {
	visibility: visible;
}

.blurb div {
	border-style: groove;
	background-color: yellow;
	overflow: scroll;
}

.vertex.tac text {
	text-anchor: end;
}

.vertex.asoiaf text {
	text-anchor: start;
}

.vertex.selected text {
	font-weight: bold;
}

line.edge {
	stroke: LightGray;
	stroke-width: 2px;
	pointer-events: none;
}

line.edge.active {
	stroke: black;
	pointer-events: auto;
}

Make inactive edges light gray instead of invisible


/* Custom style sheet */

.main {
  width: 320px;
  border: solid #ccc 1px;
  border-radius: 10px;
  box-shadow: 2px 4px 2px rgba(163,163,163, 0.7);
}

img {
  display: block;
  margin: auto;
  border-radius: 10px;
}

.main-content {
  width: 300px;
  border: solid #ccc 1px;
  border-radius: 10px;
  margin: 10px;
}

.animal-trivia {
  font-style: italic;
}

h3 {
  padding: 0 20px;
}

p {
  padding: 0 10px;
}

ul {
  list-style: none;
  padding: 0 10px;
}

li {
  font-style: italic;
}

span {
  font-style: normal;
  font-weight: bold;
}

Add styling to list items

Add styling to list items


form {
  text-align: center;
}
div.parameters, div.signature {
  text-align: left;
  display: inline-block;
  vertical-align: top;
  margin: 0 20px;
}
input[type=text] {
  width: 200px;
}
input.large {
  width: 500px;
}
input.small {
  width: 80px;
}
textarea.curl {
  font-family: monospace;
  width: 500px;
  height: 80px;
}
ul > li > label {
  display: block;
}
ul {
  list-style: none;
  padding-left: 0;
}
li {
  margin-bottom: 5pt;
  margin-top: 5pt;
}
.fields input[type=text] {
  width: 120px;
}
textarea.body {
  width: 500px;
  height: 120px;
}
textarea {
  width: 500px;
  height: 80px;
}
textarea.curl {
  width: 500px;
  height: 200px;
}
.title {
  margin-bottom: 0;
  margin-top: 0;
}

[JR] Remove margin from title to give more room on page


/* IE hacks
   ==================================== */

* html .active-scaffold-header,
.active-scaffold li.form-element,
.active-scaffold li.sub-section {
zoom: 1;
}

* html .active-scaffold td .messages-container {
border-top: solid 1px #DAFFCD;
}

.active-scaffold-header div.actions a.show_search {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/active_scaffold/default/magnifier.png', sizingMethod='crop');
}

.active-scaffold .sub-form .association-record a.destroy {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/active_scaffold/default/cross.png', sizingMethod='crop');
}

.active-scaffold-header div.actions a.disabled {
filter: alpha(opacity=50);
}

.active-scaffold .show-view dd,
.active-scaffold li.form-element dd {
float: none;
}

.active-scaffold li.form-element dt {
padding: 4px 0;
}

/* IE hacks
   ==================================== */

* html .active-scaffold-header,
.active-scaffold li.form-element,
.active-scaffold li.sub-section {
zoom: 1;
}

* html .active-scaffold td .messages-container {
border-top: solid 1px #DAFFCD;
}

* html .active-scaffold-header div.actions a.show_search {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../../images/active_scaffold/default/magnifier.png', sizingMethod='crop');
}

* html .active-scaffold .sub-form .association-record a.destroy {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../../images/active_scaffold/default/cross.png', sizingMethod='crop');
}

.active-scaffold-header div.actions a.disabled {
filter: alpha(opacity=50);
}

.active-scaffold .show-view dd,
.active-scaffold li.form-element dd {
float: none;
}

.active-scaffold li.form-element dt {
padding: 4px 0;
}

Fix icons set as background in IE

Fix icons set as background in IE


/*nanny styles*/
.content{
	background-color: #fff;
	padding: 1px 20px 0 20px;
}
.content h4{
	color: #8dc63f;
	font-weight: bold;
}
.info{
    min-height: 20px;
    max-height: 150px;
    overflow-y: auto;
	padding: 19px;
	margin-bottom: 20px;
}
.dotted-line{
	height: 15px;
	border-bottom-style: dotted;
	border-bottom-color: #8dc63f;
}
.children{
	padding-top: 20px;
}

.icon-cont{
	border-right: 1px solid #e3e3e3;
}
.container-completed{
	min-height: 400px;
	max-height: 700px
}

.relative{
	position: relative;
}
.right-hr{
	position: absolute;
	border-right: 1px solid #e3e3e3;
	height: 166px;
	top: -20px;
	left: 100px;
}
.children-actions {
	max-height: 700px;
	overflow-y: auto;
}
/*end nanny styles*/

/*nanny styles*/
.content{
	background-color: #fff;
	padding: 1px 20px 0 20px;
}
.content h4{
	color: #8dc63f;
	font-weight: bold;
}
.info{
    min-height: 20px;
    max-height: 150px;
    overflow-y: auto;
	padding: 19px;
	margin-bottom: 20px;
}
.dotted-line{
	height: 15px;
	border-bottom-style: dotted;
	border-bottom-color: #8dc63f;
}
.children{
	padding-top: 20px;
}

.icon-cont{
	border-right: 1px solid #e3e3e3;
}
.container-completed{
	min-height: 400px;
	max-height: 660px;
	overflow-y: auto;
}

.relative{
	position: relative;
}
.right-hr{
	position: absolute;
	border-right: 1px solid #e3e3e3;
	height: 166px;
	top: -20px;
	left: 100px;
}
.children-actions {
	max-height: 660px;
	overflow-y: auto;
}
/*end nanny styles*/

Fix max-height for children actions

Fix max-height for children actions


html {
  font-size: 62.5%;
}
.items {
  margin-top: 10px;
}
.item {
  padding-left: 10px;
}
.item:first-child {
  padding-left: 0px;
}

Add padding between each .item

Add padding between each .item


.footer-logos img {
    height: 50px;
    margin: 10px 5% 10px 0px;
    vertical-align: baseline;
}

aside.multi-line-header {
  padding-top: 1.2em;
}

.page-header h1 {
  text-align: center;
  margin-bottom: 1.5em;
  font-size: 24px;
}

h1.article-header {
  font-size: 2em;
}

#geography-select-wrapper .browse-only {
  width: 100%;
  margin: 1em auto;
}

#homepage .big-action h1 {
  width: 150px;
}

#homepage .input-wrapper {
  padding-left: 180px;
}

#homepage .content-container.callouts {
  padding-top: 0;
}

.footnote {
  font-size: 0.8em;
  margin: 1.5em 0;
}

.footer-logos img {
    height: 50px;
    margin: 10px 5% 10px 0px;
    vertical-align: baseline;
}

aside.multi-line-header {
  padding-top: 1.2em;
}

.page-header h1 {
  text-align: center;
  margin-bottom: 1.5em;
  font-size: 24px;
}

h1.article-header {
  font-size: 2em;
}

#geography-select-wrapper .browse-only {
  width: 100%;
  margin: 1em auto;
}

#homepage .content-container.callouts {
  padding-top: 0;
}

.footnote {
  font-size: 0.8em;
  margin: 1.5em 0;
}

Revert to previous layout for search bars


/*==================================================
 * Exhibit styles
 *
 * Note that almost all CSS code is in themes.
 *==================================================
 */
.exhibit-ui-protection div {
    margin:     0;
    padding:    0;
}
.exhibit-ui-protection table {
	font-size: 100%;
}
.exhibit-ui-protection tr {
	vertical-align: top;
}
a img {
    border: none;
}

Remove borders from images within links (those are ugly!)


header img {
  height: 100px;
  display: block;
  margin: 0 auto;
}
h2, h3 {
  color: #e33333;
}
img {
  max-width: 100%;
}

header img {
  height: 100px;
  display: block;
  margin: 0 auto;
}
h1, h2, h3 {
  color: #e33333;
  margin-top: 1.5rem;
}
img {
  max-width: 100%;
}

Add spacing (margin-top) above headings

Add spacing (margin-top) above headings


.card,.modal .overlay ~ *{box-shadow:0 0 .6em rgba(17,17,17,0.2);border-radius:.2em;border:0;overflow:hidden;margin:.3em;text-align:left;background:#fff;padding:.6em}.card>*,.modal .overlay ~ *>*{width:100%;display:block}.card h1,.card h2,.card h3,.card h4,.card h5,.card h6,.modal .overlay ~ * h1,.modal .overlay ~ * h2,.modal .overlay ~ * h3,.modal .overlay ~ * h4,.modal .overlay ~ * h5,.modal .overlay ~ * h6{padding:0;margin:.3em 0}.card header *:first-child,.modal .overlay ~ * header *:first-child{margin-top:0}.card footer *:last-child,.modal .overlay ~ * footer *:last-child{margin-bottom:0}.card p,.modal .overlay ~ * p{margin:.3em 0}.card footer,.modal .overlay ~ * footer{overflow:auto}.card footer .error,.modal .overlay ~ * footer .error{float:right}.modal{text-align:center}.modal>input{display:none}.modal>input ~ *{opacity:0;max-height:0;overflow:hidden}.modal .overlay{top:0;left:0;bottom:0;right:0;position:fixed;margin:0;border-radius:0;background:rgba(17,17,17,0.3);transition:all .2s ease;z-index:99}.modal .overlay ~ *{border:0;position:fixed;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%) scale(.2,.2);transform:translateX(-50%) translateY(-50%) scale(.2,.2);z-index:100;padding:.3em;transition:all .2s ease}.modal>input:checked ~ *{display:block;opacity:1;max-height:10000px;transition:all .2s ease}.modal>input:checked ~ .overlay ~ *{max-height:90%;overflow:auto;-webkit-transform:translateX(-50%) translateY(-50%) scale(1,1);transform:translateX(-50%) translateY(-50%) scale(1,1)}.modal header,.modal footer,.modal section{padding:.3em}.modal header{font-weight:bold;position:relative}.modal header h1,.modal header h2,.modal header h3,.modal header h4,.modal header h5,.modal header h6{display:inline-block;margin-right:2em}.modal .close{position:absolute;top:.2em;right:0;margin-right:.6em;cursor:pointer}.modal .close:hover{color:#ff4136}@media(max-width:60em){.modal .overlay ~ *{min-width:90%}}

Add nut file for Safari hack

Add nut file for Safari hack


body {
  background-color: #312164;
  color: #f6f4fc;
  font-family: Rokkitt, serif;
  text-align: center;
}

/* Normalizations */

input::-moz-focus-inner,
button::-moz-focus-inner /*Remove button padding in FF*/
{
  border: 0;
  padding: 0;
}

input /*Remove red shadow on invalid inputs*/
{
  box-shadow: none;
}

a {
  color: inherit;
}

p {
  font-size: 20px;
}

/* http://crbug.com/177627 and probably some other browsers */
[hidden] {
  display: none !important;
}

Make [hidden] display: none !important, because Chrome doesn't


/**
 * =============================================================================
 * This is the file where all your styling should go in.
 * Instead of modifying the styles found in the monogatari.css file or others,
 * you should overwrite those styles in this file.
 *
 * The CSS selectors shown are not an extensive list but they are the most
 * common you might want to change. To find what other elements are available,
 * you can take a look at the monogatari.css file or use your browser's dev
 * tools to inspect the elements.
 * =============================================================================
**/

/**
 * ===========================
 * General Styling
 * ===========================
**/

/* Simple Button styles*/
button {

}

/* Simple Button Style on Hover */
button:hover {

}

/* General Styling for Menu Screens */
[data-menu] {

}

/**
 * ===========================
 * Main Menu Styling
 * ===========================
**/

/* Main Menu Styling */
[data-menu="main"] {

}

/* Main Menu Buttons Styling */
[data-menu="main"] button {

}

/**
 * ===========================
 * Save and Load Menus Styling
 * ===========================
**/

/* Slots Style */
[data-ui="slots"] figure {

}

/* Slot's Image Style */
[data-ui="slots"] img {

}

/* Slots Title Style */
[data-ui="slots"] figcaption {

}

/**
 * ===========================
 * Game Elements Styling
 * ===========================
**/

/* Choice Buttons style */
[data-ui="choices"] button {

}

/* Choice Button Style on Hover */
[data-ui="choices"] button:hover {

}

/* Text Box styling */
[data-ui="text"] {

}

/* Character Name Style */
[data-ui="who"] {

}

/* Style for Centered Text */
[data-ui="centered"] {

}

/* Character Images Styles */
#game [data-character] {

}

/* Other Images Styles */
#game [data-image] {

}

/**
 * ===========================
 * Quick Menu Styling
 * ===========================
**/

/* Quick Meny Style */
[data-ui="quick-menu"] {

}

Add simple template with useful selectors


/*!
 * Start Bootstrap - Logo Nav HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
    padding-top: 70px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
    font-family: 'Roboto', sans-serif;
}

.color-white {
    color: white;
}

.navbar-nav > li > a {
    padding-top: 30px;
    height: 80px;
}

.navbar-fixed-top .nav {
	height: 80px;
    padding-top: 0px;
}

.navbar-brand {
    padding: 5px 15px;
}

.navbar-brand-text {
    display: inline-block;
    vertical-align: middle;
    padding-left: 10px;
    font-size: 36px;
    font-weight: 100;
    letter-spacing: -0.04em;
}

@media(min-width:768px) {
    body {
        padding-top: 100px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
    }

    .navbar-fixed-top .navbar-brand {
        padding: 17px 0;
    }
}

.panel-heading > a {
    color: white;
    font-size: x-large;
}

/*!
 * Start Bootstrap - Logo Nav HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
    padding-top: 70px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
    font-family: 'Roboto', sans-serif;
}

.color-white {
    color: white;
}

.navbar-nav > li > a {
    padding-top: 30px;
    height: 80px;
}

.navbar-fixed-top .nav {
	height: 80px;
    padding-top: 0px;
}

.navbar-brand {
    padding: 5px 15px;
}

.navbar-brand-text {
    display: inline-block;
    vertical-align: middle;
    padding-left: 10px;
    font-size: 36px;
    font-weight: 100;
    letter-spacing: -0.04em;
}

@media(min-width:768px) {
    body {
        padding-top: 100px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
    }

    .navbar-fixed-top .navbar-brand {
        padding: 17px 0;
    }
}

.panel-heading > a {
    color: white;
    font-size: large;
}

Reduce font size of review card titles

Reduce font size of review card titles


.reveal section img {
  border: 0;
  background: none;
}

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4 {
  text-transform: none;
}

.reveal .attribution {
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 2px 15px;
  display: inline-block;
  position: absolute;
  top: 5px 5px;
}

#attribution {
  position: absolute;
  top: 0;
  right: 0;
  z-index:500;
  padding: 0;
  display: none;
}

.show-header #attribution {
  display: block;
  margin-top: 5px;
  background: #000;
  opacity: 0.65;
  padding: 0.25em 0.5em;
  font-size: large;
}

h2.heading {
  background-color: rgba(0, 0, 0, 0.75);
  padding: 0.5em 2em;
  display: inline-block;
}

.reveal section img {
  border: 0;
  background: none;
}

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4 {
  text-transform: none;
}

.reveal .attribution {
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 2px 15px;
  display: inline-block;
  position: absolute;
  top: 5px 5px;
}

#attribution {
  position: absolute;
  top: 0;
  right: 0;
  z-index:500;
  padding: 0;
  display: none;
  text-align: right;
  line-height: 1.6em;
}

.show-header #attribution {
  display: block;
  margin-top: 5px;
  background: #000;
  opacity: 0.65;
  padding: 0.25em 0.5em;
  font-size: medium;
}

h2.heading {
  background-color: rgba(0, 0, 0, 0.75);
  padding: 0.5em 2em;
  display: inline-block;
}

Adjust attribution alignment and size.

Adjust attribution alignment and size.


.hx-tooltip {
    box-shadow: none;
    border: none;
    background-color: #686868;
    font-size: 12px;
    color: white;
    font-weight: 600;
    padding: 10px 15px;
    border-radius: 3px;
}

.hx-tooltip:before {

}

.hx-tooltip {
    box-shadow: none;
    margin-bottom: 7px;
    border: none;
    background-color: #686868;
    font-size: 12px;
    color: white;
    font-weight: 600;
    padding: 10px 15px;
    border-radius: 3px;
    overflow: visible;
}

.hx-tooltip:before {
    font-size: 0;
    content: ' ';
    position: absolute;
    top: 100%;
    left: 10px;
    border: 8px solid #686868;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

Add triangle to bottom left of tooltip

feat(tooltip): Add triangle to bottom left of tooltip


/* {
    font-size: 14px;
    box-sizing: border-box;
    position: absolute;
    right: 250px;
    top: 0px;
    border-radius: 5px;
    border: 0px;
    background-color: blue;
    text-align: center;
*/

nav a {
    display: inline-block;
    padding: 18px 30px;
    color: #fff !important;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none !important;
    right: 250px;
    line-height: 1;
    text-transform: uppercase;
    background-color: transparent;
    -webkit-transition: background-color 0.25s;
    -moz-transition: background-color 0.25s;
    transition: background-color 0.25s;
}

nav a:first-child {
    border-radius: 2px 0 0 2px;
}

nav a:last-child {
    border-radius: 0 2px 2px 0;
}

/*
.main-menu {}

.main-menu {}

.main-menu:hover {
    box-shadow: 0 3px #e2534b;
    transform: translateY(3px);
}

.main-menu:active {}

.main-menu:active {
    background: #e8645a;
    box-shadow: 0 4px #e2534b;
*/

.main-menu {
    display: inline-block;
    margin: 60px auto 45px;
    box-shadow: 0 1px 1px #ccc;
    font-family: 'Open Sans Semibold', sans-serif;
}

.main-menu a {
    display: inline-block;
    padding: 18px 30px;
    color: #fff !important;
    font-weight: bold;
    font-size: 13px;
    text-decoration: none !important;
    line-height: 1;
    text-transform: uppercase;
    background-color: transparent;
    -webkit-transition: background-color 0.25s;
    -moz-transition: background-color 0.25s;
    transition: background-color 0.25s;
}

.main-menu a:first-child {
    border-radius: 2px 0 0 2px;
}

.main-menu a:last-child {
    border-radius: 0 2px 2px 0;
}

.main-menu .menu-liste .menu-item {
    background-color: #e35885;
}

Connect the main menu, go through the links.


@import "./_icon-social.css";

.list-social {
    padding: 0;
    margin: 0;
    list-style-type: none;

    &__item {
        padding: 0;
        display: inline-block;
        font-size: 0;
        margin-left: 5px;
    }

    &__link {
        &:first-child {
            margin-left: 0;
        }
    }
}

@import "./_icon-social.css";

.list-social {
    padding: 0;
    margin: 0;
    list-style-type: none;

    &__item {
        padding: 0;
        display: inline-block;
        font-size: 0;
        margin-left: 5px;

        &:first-child {
            margin-left: 0;
        }
    }
}

Remove left margin on first item in list social


#ember-testing-container {
  position: relative;
  background: white;
  bottom: 0;
  right: 0;
  width: 640px;
  height: 384px;
  overflow: auto;
  z-index: 98;
  border: 1px solid #ccc;
  margin: 0 auto;

  /* Prevent leaking position fixed elements outside the testing container */
  transform: translateZ(0);
}

#ember-testing-container.full-screen {
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 98;
  border: none;
}

#ember-testing {
  width: 200%;
  height: 200%;
  transform: scale(0.5);
  transform-origin: top left;
}

.full-screen #ember-testing {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: scale(1);
}

#ember-testing-container {
  position: relative;

  background-color: #fff;
  background-image:
    linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee),
    linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;

  bottom: 0;
  right: 0;
  width: 640px;
  height: 384px;
  overflow: auto;
  z-index: 98;
  border: 1px solid #ccc;
  margin: 0 auto;

  /* Prevent leaking position fixed elements outside the testing container */
  transform: translateZ(0);
}

#ember-testing-container.full-screen {
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 98;
  border: none;
}

#ember-testing {
  width: 200%;
  height: 200%;
  transform: scale(0.5);
  transform-origin: top left;
}

.full-screen #ember-testing {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: scale(1);
}

Use checkerboard pattern for testing container background

This changes the default background of the `#ember-testing-container` from purely white to a slight checkerboard pattern to make it more obvious what rendered components have a transparent vs. a white background.


html {
  background: black;
}

#out {
  color: white;
}

html {
  background: #323232;
}

#out {
  color: #ffffff;
}

Update colors to hex codes

Update colors to hex codes


/* Remove radio buttons */
.starrating > input {
    display: none;
}

.starrating > label:before {
    content: "\f005"; /* Star */
    margin: 2px;
    font-size: 2.5rem;
    font-family: 'Font Awesome 5 Free';
    font-weight: 200;
    display: inline-block;
}

/* Set yellow color when star checked */
.starrating > input:checked ~ label:before {
    content: "\f005"; /* Star */
    color: #ffca08;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

/* Set yellow color when star hover */
.starrating > input:hover ~ label:before {
    content: "\f005"; /* Star */
    color: #ffca08;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

/* Remove radio buttons */
.starrating > input {
    display: none;
}

.starrating > label:before {
    content: "\f005"; /* Star */
    margin: 2px;
    font-size: 2.5rem;
    font-family: 'Font Awesome 5 Pro';
    font-weight: 200;
    display: inline-block;
}

/* Set yellow color when star checked */
.starrating > input:checked ~ label:before {
    content: "\f005"; /* Star */
    color: #ffca08;
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
}

/* Set yellow color when star hover */
.starrating > input:hover ~ label:before {
    content: "\f005"; /* Star */
    color: #ffca08;
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
}

Set font-family of FontAwesome to Pro version


.soundDisclaimer {
  text-align: center;
  border: 1px solid white;
  border-radius: 4px;
  cursor: pointer;
  font-size: inherit;
}

.soundDisclaimer:hover {
  background: rgba(255, 255, 255, 0.25);
}

.soundDisclaimer {
  text-align: center;
  border: 1px solid currentColor;
  border-radius: 4px;
  cursor: pointer;
  font-size: inherit;
}

.soundDisclaimer:hover {
  background: rgba(255, 255, 255, 0.25);
}

Make sound disclaimer border visible in inverted section


body { font: 13px sans-serif }
#chart > svg { width: 800px; height: 300px; font-size: 9px; background-image: -webkit-linear-gradient(top, rgb(255,255,255) 0, rgb(242,241,211) 75%) }
#chart > svg > rect { fill: #474739 }
#ping { font-size: 60px }

body { font: 13px sans-serif; color: #474739 }
#chart > svg { width: 800px; height: 300px; font-size: 9px;
    background-image: linear-gradient(#fff 0, #F2F1D3 100%);
    background-image: -webkit-linear-gradient(#fff 0, #F2F1D3 100%);
    background-image: -moz-linear-gradient(#fff 0, #F2F1D3 100%) }
#chart > svg > rect { fill: #474739 }
#ping { font-size: 60px }

Make gradient work on all browsers

Make gradient work on all browsers


h1 {
    color: #fff;
    text-shadow: 0 1px 0px #000;
    font-size: 42px;
}

.list {
    overflow: auto;
    height: 100vh;
}

.item-avatar {
    padding-left: 75px;
}

.card {
    margin: 0px;
    display: block;
}

.card .item {
    min-height: auto !important;
    padding: 16px;
}

.item.card-item {
    padding-left: 10px;
    padding-right: 10px;
}

h1 {
    color: #fff;
    text-shadow: 0 1px 0px #000;
    font-size: 42px;
}

.list {
    overflow: auto;
    height: 100vh;
    background-color: #ECEFF1;
}

.item-avatar {
    padding-left: 75px;
}

.card {
    margin: 0px;
    display: block;
}

.card .item {
    min-height: auto !important;
    padding: 16px;
}

.item.card-item {
    padding-left: 10px;
    padding-right: 10px;
}

Change ionic material background to match with native theme


@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700,100,300);

body {
  background-color: #D06D35;
  font-family: 'Roboto Slab', serif;
  color: #fff;
}

#intro {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%)
}

#name {
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%,-50%)
}

#links {
  position: absolute;
  left: 50%;
  top: 70%;
  transform: translate(-50%,-50%)

}

@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700,100,300);

body {
  background-color: #D06D35;
  font-family: 'Roboto Slab', serif;
  color: #fff;
}

#intro {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%)
}

#name {
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%,-50%)
}

#links li {
  list-style-type: none;
  position: absolute;
  left: 50%;
  top: 70%;
  transform: translate(-50%,-50%)

}

Add list to links div

Add list to links div


/**
 * DataTables
 */

.dataTables_wrapper {
    max-width: 100%;
    margin: 0.8em;
}

/**
 * D3js
 */

/* Circle Packing */

.node circle {
    fill: rgb(31, 119, 180);
    fill-opacity: .25;
    stroke: rgb(31, 119, 180);
    stroke-width: 1px;
}

.node.leaf circle {
    fill: #ff7f0e;
    fill-opacity: 1;
}

.node text {
    font: 10px sans-serif;
}

/**
 * DataTables
 */

.dataTables_wrapper {
    max-width: 100%;
    margin: 0.8em;
}

/**
 * D3js
 */

/* Circle Packing */

.node circle {
    fill: rgb(31, 119, 180);
    fill-opacity: .25;
    stroke: rgb(31, 119, 180);
    stroke-width: 1px;
}
.node.leaf circle {
    fill: #FDF59A;
    fill-opacity: 1;
}
.node text {
    font: 10px sans-serif;
}

Change color of circle packing layout so it's easier on the eyes.


.root {
  justify-content: center;
  padding: 1rem;
}

.title {
  color: #dd3a0a;
  font-size: 26px;
  font-weight: normal;
  line-height: 32px;
  text-align: center;
}

.items {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 1.5rem auto 0;
}

.item {
  align-items: center;
  display: flex;
  flex-basis: calc(50% - 2rem);
  justify-content: center;
  margin: 1rem;
}

.callToAction {
  color: #3f526b;
  font-size: 12px;
  font-style: italic;
  line-height: 20px;
  margin: 2rem auto 0;
  max-width: 34rem;
  text-align: center;
}

.letUsKnow {
  color: #3f526b;
  text-decoration: underline;

  &:hover {
    text-decoration: none;
  }
}

@media (width > 800px) {
  .item {
    flex-basis: 150px;
  }
}

.root {
  justify-content: center;
  padding: 1rem;
}

.title {
  color: #dd3a0a;
  font-size: 26px;
  font-weight: normal;
  line-height: 32px;
  text-align: center;
}

.items {
  margin: 1.5rem auto 0;
}

.item {
  display: block;
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 1rem;
}

.callToAction {
  color: #3f526b;
  font-size: 12px;
  font-style: italic;
  line-height: 20px;
  margin: 2rem auto 0;
  max-width: 34rem;
  text-align: center;
}

.letUsKnow {
  color: #3f526b;
  text-decoration: underline;

  &:hover {
    text-decoration: none;
  }
}

@media (width > 410px) {
  .items {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .item {
    flex-basis: calc(50% - 2rem);
  }
}

@media (width > 800px) {
  .item {
    flex-basis: 150px;
  }
}

Add extra breakpoint to Showcase

Add extra breakpoint to Showcase


html {
  position: relative;
  min-height: 100%;
}

/* Put your CSS here */
.ember-application {
    margin: 20px;
}

.glyphicon-refresh-animate {
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: calc(100% - 60px);
  height: 20px;
  line-height: 20px;
  background-color: #f5f5f5;
  text-align:center;
  vertical-align: medium;
  font-size: 61%;
  margin-right: 30px;
  margin-left: 30px;
  border-radius: 5px;
}

html {
  position: relative;
  min-height: 100%;
}

/* Put your CSS here */
.ember-application {
    margin: 20px;
}

.glyphicon-refresh-animate {
    -moz-animation: spin-moz .7s infinite linear;
    -webkit-animation: spin-webkit .7s infinite linear;
    animation: spin .7s infinite linear;
}

@-moz-keyframes spin-moz {
  from { -moz-transform: rotate(0deg);}
  to { -moz-transform: rotate(360deg);}
}

@-webkit-keyframes spin-webkit {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: calc(100% - 60px);
  height: 20px;
  line-height: 20px;
  background-color: #f5f5f5;
  text-align:center;
  vertical-align: medium;
  font-size: 61%;
  margin-right: 30px;
  margin-left: 30px;
  border-radius: 5px;
}

Fix icon animation for ff

Fix icon animation for ff


#logo {
    padding-left: 5%;
}

.message {
    font-family: myriad_appletext;
}

.font-big {
    font-size: 110%;
}

.font-large {
    font-size: 150%;
}

.font-larger {
    font-size: 6em;
}

html, body {
    overflow-x: hidden;
}

@font-face {
    font-family: 'myriad_appletext';
    src: url('myriadat-webfont.woff2') format('woff2'),
         url('myriadat-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

#logo {
    padding-left: 5%;
}

.message {
    font-family: myriad_appletext;
}

.font-big {
    font-size: 110%;
}

.font-large {
    font-size: 150%;
}

.font-larger {
    font-size: 6em;
}

html, body {
    overflow-x: hidden;
}

@media only screen and (max-width: 647px) {

   .font-larger{
       font-size: 5.5em;
   }

}

@media only screen and (max-width: 560px) {

   .font-larger{
       font-size: 5em;
   }

}

@media only screen and (max-width: 423px) {

   .font-larger{
       font-size: 4.5em;
   }

}

@media only screen and (max-width: 381px) {

   .font-larger{
       font-size: 4em;
   }

}

@font-face {
    font-family: 'myriad_appletext';
    src: url('myriadat-webfont.woff2') format('woff2'),
         url('myriadat-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

Make font sizes adapt to smaller screen sizes


html {
	background-color: #000000;
	color: #42f80a;
}
header {
	font-family: Orbitron;
}
h1 {
	font-family: Orbitron;
	color: #42f80a;
}
body {
	background-color: #000000;
	font-family: Monda;
}
a	{
	color: #42f80a;
}
a:hover {
	font-weight: bold;
	text-decoration: none;
	color: #ffffff;
}
.alpha {
	/*position: fixed;*/
	max-width: 50%;
	margin-left: 24%;
	margin-right: 24%;
}
nav {
	position: fixed;
	right: 0px;
	top: 0px;
	margin: 2em 10% 0 0;
}
img {
	max-width: 50%;
}

html {
	background-color: #000000;
	color: #42f80a;
}
header {
	font-family: Orbitron;
}
h1 {
	font-family: Orbitron;
	color: #42f80a;
}
body {
	background-color: #000000;
	font-family: Monda;
}
a	{
	color: #42f80a;
}
a:hover {
	font-weight: bold;
	text-decoration: none;
	color: #ffffff;
}
.alpha {
	/*position: fixed;*/
	max-width: 50%;
	margin-left: 24%;
	margin-right: 24%;
}
nav {
	position: fixed;
	right: 0px;
	top: 0px;
	margin: 2em 10% 0 0;
}
img {
	max-width: 100%;
}

Fix CSS whoopsie with img size

Fix CSS whoopsie with img size


html, body, #root {
    height: 100%;
}

#app-container {
    height: 100%;
}

#content-container {
    padding: 1em 2em;
    text-align: center;
}

html, body, #root {
    height: 100%;
}

#app-container {
    height: 100%;
}

#content-container {
    padding: 1em 0;
    text-align: center;
}

Remove padding on the side

Remove padding on the side


/* Sign in
/* ---------------------------------------------------------- */

.gh-signin {
    position: relative;
    margin: 30px auto;
    padding: 40px;
    max-width: 400px;
    width: 100%;
    border: #dae1e3 1px solid;
    background: #f8fbfd;
    border-radius: 5px;
    text-align: left;
}

.gh-signin .form-group {
    margin-bottom: 1.5rem;
}

.gh-signin .btn {
    margin: 0;
    padding: 12px;
}

.forgotten-wrap {
    position: relative;
}

.forgotten-wrap input {
    padding-right: 7rem;
}

.forgotten-wrap .forgotten-link {
    position: absolute;
    top: 10px;
    right: 1px;
    bottom: 10px;
    padding: 0 11px 0 12px;
    border-left: #dae1e3 1px solid;
    border-radius: 0;
    text-transform: none;
    letter-spacing: 0;
    font-size: 1.1rem;
    line-height: 1.2rem;
    /* Needs white BG to hide ugly lastpass icon */
}

.forgotten-link:hover {
    border-left: #dae1e3 1px solid;
    color: color(var(--blue) lightness(-20%));
    text-decoration: none;
}

/* Sign in
/* ---------------------------------------------------------- */

.gh-signin {
    position: relative;
    margin: 30px auto;
    padding: 40px;
    max-width: 400px;
    width: 100%;
    border: #dae1e3 1px solid;
    background: #f8fbfd;
    border-radius: 5px;
    text-align: left;
}

.gh-signin .form-group {
    margin-bottom: 1.5rem;
}

.gh-signin .btn {
    margin: 0;
    padding: 12px;
}

.forgotten-wrap {
    position: relative;
}

.forgotten-wrap input {
    padding-right: 7rem;
}

.forgotten-wrap .forgotten-link {
    position: absolute;
    top: 10px;
    right: 1px;
    bottom: 10px;
    padding: 0 11px 0 12px;
    border-left: #dae1e3 1px solid;
    border-radius: 0;
    text-transform: none;
    letter-spacing: 0;
    font-size: 1.1rem;
    line-height: 1.2rem;
}

.forgotten-link:hover {
    border-left: #dae1e3 1px solid;
    color: color(var(--blue) lightness(-20%));
    text-decoration: none;
}

.forgotten-link:active {
    box-shadow: none;
    text-decoration: underline;
}

Fix broken active state on password reset button


body {
    display: none;
    margin: 2.4em;
}

h1 {
    text-align: center;
    font-size: 1.5em;
    color: #1da1f2;
    text-shadow: 0 0 9px rgb(0 0 0 / 30%);
}

input[type="text"]
{
    width: 11em;
    height: 1.8em;
}

ul {
    padding-left: 0;
    list-style-type: none;
}

li {
    font-size: 1.1em;
}

li:before {
    content: "\00bb  ";
}

a.delete {
    text-decoration: none;
    color: #e72965;
}

a.delete:hover{
    color: #e0245e;
}

#add-form {
    margin-bottom: 15px;
}

#warning-text {
    color: #e0245e;
}

body {
    display: none;
    margin: 2.4em;
    background-color: #1c2938;
}

h1 {
    text-align: center;
    font-size: 1.5em;
    color: #1da1f2;
}

input[type="text"]
{
    width: 11em;
    height: 1.8em;
    background-color: #10171e;
    border: none;
    color: #fff;
}

input:focus{
    outline: #1a85c7;
}

ul {
    padding-left: 0;
    list-style-type: none;
}

li {
    font-size: 1em;
    color: #8899a6;
}

li:before {
    content: "\00bb  ";
}

a.delete {
    text-decoration: none;
    color: #e72965;
}

a.delete:hover{
    color: #e0245e;
}

#add-form {
    margin-bottom: 15px;
}

#warning-text {
    color: #e0245e;
}

Update styling to make it blend in

Update styling to make it blend in


body {
    line-height: 1.5;
    background: #fdfdfd;
    color: #222;
}

[data-icon]:before {
    font-family: 'Pictos Custom';
    content: attr(data-icon);
    -webkit-font-smoothing: antialiased;
}

.ann {
    font-family: "jubilat", serif;
    font-weight: 400;
    font-size: 1.25em;
    line-height: 1.25;
    margin-top: 0.5em;
}
.ann > * {
    display: block;
    text-align: center;
}
.ann-msg {
    line-height: 1.0;
}
.ann-name {
    font-family: "futura-pt", sans-serif;
    font-weight: 300;
    font-size: 2em;
}
.ann-sep {
    font-size: 2.5em;
    line-height: 1.0;
}
.ann-msg,
.ann-sep {
    color: #aaa;
}

@media screen and (min-width: 480px) {
    .ann {
        font-size: 1.5em;
    }
}

@media screen and (min-width: 568px) {
    .ann {
        font-size: 2em;
    }
}

body {
    line-height: 1.5;
    background: #fdfdfd;
    color: #222;
}

[data-icon]:before {
    font-family: 'Pictos Custom';
    content: attr(data-icon);
    -webkit-font-smoothing: antialiased;
}

.ann {
    font-family: "jubilat", serif;
    font-weight: 400;
    font-size: 1.25em;
    line-height: 1.25;
    margin-top: 1em;
}
.ann > * {
    display: block;
    text-align: center;
}
.ann-msg {
    line-height: 1.0;
}
.ann-name {
    font-family: "futura-pt", sans-serif;
    font-weight: 300;
    font-size: 2em;
}
.ann-sep {
    font-size: 2.5em;
    line-height: 1.0;
}
.ann-msg,
.ann-sep {
    color: #aaa;
}

@media screen and (min-width: 480px) {
    .ann {
        font-size: 1.5em;
    }
}

@media screen and (min-width: 568px) {
    .ann {
        font-size: 2em;
    }
}

Adjust top margin on announcement.

Adjust top margin on announcement.


.konsole-container {
  position: fixed;
  z-index: 1000;
  bottom: 0.5em;
  box-shadow: 0 0 1em gray;
  filter: opacity(90%);
  -webkit-filter: opacity(90%);
  padding: 0.2em;
  border: 1px solid gray;
  /*border-radius: 0.4em;*/
  background: whitesmoke;
  color: navy;
  font-size: 120%;
}

.konsole-control {
  margin: 0;
  padding: 0 0.4em 0 0.4em;
  color: blue;
}

.konsole-control:hover {
  cursor: pointer;
}

.konsole-title {
  color: navy;
  font-weight: bold;
}

.konsole-toggle {
  float: right;
}

.konsole-resize {
  float: right;
}

.konsole-clear {
  float: right;
}

.konsole-log {
  clear: both;
  overflow: scroll;
  margin: 0.2em;
  padding-top: 0.5em;
  border-top: 1px solid gray;
  background: white;
}

.konsole-container {
  position: fixed;
  z-index: 1000;
  bottom: 0.5em;
  box-shadow: 0 0 1em gray;
  opacity: 0.9;
  padding: 0.2em;
  border: 1px solid gray;
  background: whitesmoke;
  color: navy;
  font-size: 120%;
}

.konsole-control {
  margin: 0;
  padding: 0 0.4em 0 0.4em;
  color: blue;
}

.konsole-control:hover {
  cursor: pointer;
}

.konsole-title {
  color: navy;
  font-weight: bold;
}

.konsole-toggle {
  float: right;
}

.konsole-resize {
  float: right;
}

.konsole-clear {
  float: right;
}

.konsole-log {
  clear: both;
  overflow: scroll;
  margin: 0.2em;
  padding-top: 0.5em;
  border-top: 1px solid gray;
  background: white;
}

Fix opacity and remove commented-out css


.u-posAbsolute {
  position: absolute !important;
}

/**
 * Pins to all corners by default. But when a width and/or height are
 * provided, the element will be centered in its nearest relatively-positioned
 * ancestor.
 */

.u-posAbsoluteCenter {
  bottom: 0 !important;
  left: 0 !important;
  margin: auto !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
}

/**
 * 1. Make sure fixed elements are promoted into a new layer, for performance
 *    reasons.
 */

.u-posFixed {
  position: fixed !important;
  backface-visibility: hidden; /* 1 */
}

.u-posRelative {
  position: relative !important;
}

.u-posStatic {
  position: static !important;
}

.u-posAbsolute {
  position: absolute !important;
}

/**
 * Pins to all corners by default. But when a width and/or height are
 * provided, the element will be centered in its nearest relatively-positioned
 * ancestor.
 */

.u-posAbsoluteCenter {
  bottom: 0 !important;
  left: 0 !important;
  margin: auto !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
}

/**
 * 1. Make sure fixed elements are promoted into a new layer, for performance
 *    reasons.
 */

.u-posFixed {
  backface-visibility: hidden; /* 1 */
  position: fixed !important;
}

.u-posRelative {
  position: relative !important;
}

.u-posStatic {
  position: static !important;
}

Fix property order for Stylelint conformance


@media print {
  body,
  div,
  h1,
  h2,
  h3,
  ol,
  p,
  span,
  ul {
    display: block !important;
    width: auto !important;
    float: none !important;
    position: static !important;
    overflow: visible !important;
  }

  h1 {
    margin-top: 50%;
    text-align: center;
  }

  section h2 {
    page-break-before: always;
  }

  section.utility-information h2 {
    page-break-before: avoid;
  }

  section.energy-cost-usage .graph {
    max-width: 29%;
    width: 29%;
    margin: 2%;
  }

  .graph {
    display: inline-block;
    float: left;
    margin-top: 50px;
    max-width: 46%;
    margin: 2%;
    text-align: center;
    width: 46%;
  }

  .navbar {
    display: none !important;
  }

  .table-of-contents {
    display: none;
  }
}

@media print {
  body,
  div,
  h1,
  h2,
  h3,
  ol,
  p,
  span,
  ul {
    display: block !important;
    width: auto !important;
    float: none !important;
    position: static !important;
    overflow: visible !important;
  }

  h1 {
    margin-top: 50%;
    text-align: center;
  }

  section h2 {
    page-break-before: always;
  }

  section.utility-information h2 {
    page-break-before: avoid;
  }

  section.energy-cost-usage .graph {
    max-width: 29%;
    width: 29%;
    margin: 2%;
  }

  /* TODO: Uncomment if you do NOT want the "title page" on the print report */
  /*
  #banner {
    display: none !important;
  }
  */

  #imagemodal {
    display: none !important;
  }

  .graph {
    display: inline-block;
    float: left;
    margin-top: 50px;
    max-width: 46%;
    margin: 2%;
    text-align: center;
    width: 46%;
  }

  .navbar {
    display: none !important;
  }

  .table-of-contents {
    display: none;
  }
}

Print styles, hide modal, allow hiding of "cover sheet"


/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

.jp-ImageViewer {
  overflow: auto;
}

.jp-ImageViewer > img {
  box-sizing: border-box;
  transform-origin: top left;
}

.jp-ImageViewer::before {
    content: '';
    display: block;
    height: var(--jp-toolbar-micro-height);
    background: var(--jp-toolbar-background);
    border-bottom: 1px solid var(--jp-toolbar-border-color);
    box-shadow: var(--jp-toolbar-box-shadow);
    z-index: 10;
}

Remove image viewer toolbar-lookalike css.


html {
    height: 100%;
}

body {
    margin: auto;
    min-height: 100%;
}

.navbarLeft{
    width: 250px;
    height: 100%;
    background-color: #4285f4;
    position: absolute;
    top: 0;
    left: -250px;
    /*transform: translate(-250px, 0);*/
}

.navbarLeft ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.navbarLeft ul li{
    padding: 10px;
    margin: 0;
    color: #fff;
    border-bottom: 1px solid #dcdcdc;
}

.transition{
    -webkit-backface-visibility: hidden; /* prevent webkit transition flickering */
    /*transition: transform 0.3s ease-out;*/
}

.opened{
    -webkit-transition-property: -webkit-transform;
    -webkit-transform: translate(250px, 0);
    -webkit-transition-duration: 300ms;
    /*transform: translate(0,0);*/
}

.closed{
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 600ms;
    -webkit-transform: translate(-250px, 0);
    /*transform: translate(-250px,0);*/
}

.content{
    padding: 10px;
    text-align: right;
}

html {
    height: 100%;
}

body {
    margin: auto;
    min-height: 100%;
}

.navbarLeft{
    width: 250px;
    height: 100%;
    background-color: #4285f4;
    position: fixed;
    top: 0;
    left: -250px;
    /*transform: translate(-250px, 0);*/
}

.navbarLeft ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.navbarLeft ul li{
    padding: 10px;
    margin: 0;
    color: #fff;
    border-bottom: 1px solid #dcdcdc;
}

.transition{
    -webkit-backface-visibility: hidden; /* prevent webkit transition flickering */
    /*transition: transform 0.3s ease-out;*/
}

.opened{
    -webkit-transition-property: -webkit-transform;
    -webkit-transform: translate(250px, 0);
    -webkit-transition-duration: 300ms;
    /*transform: translate(0,0);*/
}

.closed{
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 600ms;
    -webkit-transform: translate(-250px, 0);
    /*transform: translate(-250px,0);*/
}

.content{
    padding: 10px;
    text-align: right;
}

Fix navbar left position fixed

Fix navbar left position fixed


@import 'part:@sanity/base/theme/variables-style';

.root {
  outline: none;

  @nest &:focus {
    outline: 2px solid var(--focus-color);
    outline-offset: -2px;
  }
}

@import 'part:@sanity/base/theme/variables-style';

.root {
  outline: none;

  /* TODO: find out if we should render some kind of focus indicator. */
  /* @nest &:focus {
    outline: 2px solid var(--focus-color);
    outline-offset: -2px;
  } */
}

Hide focus outline on tab panels

[components] Hide focus outline on tab panels


.speciesIcon {
  background-image: url(./speciesSprite.png);
  margin: 1.25rem auto 0 auto;
  width: 82px;
  height: 91px;
}

@media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
  .speciesIcon {
    background-image: url(./speciesSprite-2x.png);
    background-size: 82px 546px;
  }
}

.speciesIcon.FB {
  background-position: 0 0;
}

.speciesIcon.MGD {
  background-position: 0 -91px;
}

.speciesIcon.RGD {
  background-position: 0 -182px;
}

.speciesIcon.SGD {
  background-position: 0 -273px;
}

.speciesIcon.WB {
  background-position: 0 -364px;
}

.speciesIcon.ZFIN {
  background-position: 0 -455px;
}

.speciesIcon {
  background-image: url(./speciesSprite.png);
  margin: 1.25rem auto 0 auto;
  width: 82px;
  height: 91px;
}

@media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
  .speciesIcon {
    background-image: url(./speciesSprite-2x.png);
    background-size: 82px 546px;
  }
}

.speciesIcon.FB {
  background-position: 0 0;
}

.speciesIcon.MGI {
  background-position: 0 -91px;
}

.speciesIcon.RGD {
  background-position: 0 -182px;
}

.speciesIcon.SGD {
  background-position: 0 -273px;
}

.speciesIcon.WB {
  background-position: 0 -364px;
}

.speciesIcon.ZFIN {
  background-position: 0 -455px;
}

Fix typo in class name

Fix typo in class name


body {
  font-family: 'Inconsolata', monospace;
  font-size: 14px;
}

a {
  color: #337ab7;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.layout-container {
  max-width: 600px;
  margin: 0 auto;
}

@media (max-width: 700px) {
  .layout-container {
    padding-left: 50px;
    padding-right: 50px;
  }
}

.pager__item {
  display: inline;
}

.pager__item a {
  padding: 10px;
}

#block-sitebranding {
  text-align: center;
}

#block-sitebranding a {
  font-size: 2rem;
  font-weight: 700;
}

Add style for site branding

Add style for site branding


html {
    height: 100%;
}

body {
    background: #fafafa url("./livedoc-logo-round-gray.svg") no-repeat center;
}

h1 {
    margin-top: 1rem;
}

.nav-link.disabled:hover {
    cursor: default;
}

.nav-link {
    opacity: 0.7;
}

.nav-link:hover:not(.disabled) {
    opacity: 1;
}

.nav-link.active {
    font-weight: 500;
    opacity: 1;
}

html {
    height: 100%;
}

body {
    background: #fafafa url("./livedoc-logo-round-gray.svg") no-repeat center;
}

h1 {
    margin-top: 1rem;
}

.nav-link.disabled {
    cursor: default;
}

.nav-link {
    opacity: 0.7;
}

.nav-link:hover:not(.disabled) {
    opacity: 1;
}

.nav-link.active {
    font-weight: 500;
    opacity: 1;
}

Fix blinking hand cursor in disabled nav links


.container {
  background-color: var(--panel-bg-color);
  border-radius: var(--border-radius);
  margin: 10px 0;
  overflow: hidden;

  /* fixes panel disappearing in iOS 11 due to overflow: scroll on parent
  container and -webkit-overflow-scrolling: touch on parent */
  -webkit-transform: translate3d(0, 0, 0);
}

.title {
  margin: 0;
  font: var(--panel-title-font);
  padding: var(--panel-title-padding);
  background-color: var(--panel-title-bg-color);
}

.content {
  padding: var(--container-padding);
}

.content p {
  margin-top: 10px;
}

.signOut {
  margin-top: var(--input-margin);
}

.updateAccount {
  margin-top: var(--input-margin);
}

.container {
  background-color: var(--panel-bg-color);
  border-radius: var(--border-radius);
  margin: 10px 0;
  overflow: hidden;
}

.title {
  margin: 0;
  font: var(--panel-title-font);
  padding: var(--panel-title-padding);
  background-color: var(--panel-title-bg-color);
}

.content {
  padding: var(--container-padding);
}

.content p {
  margin-top: 10px;
}

.signOut {
  margin-top: var(--input-margin);
}

.updateAccount {
  margin-top: var(--input-margin);
}

chore: Remove iOS 11 workaround (hopefully no longer needed)


#contenant {
    font-family: Roboto Slab;
    padding: 0;
    margin: 0;
    color: white;
    position: center;
    background: url('../img/lion-image_01582298_22.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 120vh;
  }

Add position to background in pc

Add position to background in pc


body {
    background-color: #444;
}

.home-banner {
    padding-top: 3rem;
    padding-left: 3rem;
    margin: 0;
    width: 100%;
    height: 600px;
    background: url('../img/home_banner.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.inline {
    display: inline;
}

.clickable {
    cursor: pointer;
}

@media (min-width: 1024px) {
    #skin-blur-chrome {
        background: #575761; /* Old browsers */
        background: -moz-linear-gradient(top, #575761 0%, #080b14 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, #575761 0%,#080b14 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, #575761 0%,#080b14 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
}

.home-banner {
    padding-top: 3rem;
    padding-left: 3rem;
    margin: 0;
    width: 100%;
    height: 600px;
    background: url('../img/home_banner.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.inline {
    display: inline;
}

.clickable {
    cursor: pointer;
}

Replace background image with CSS gradient


fieldset{
  border: none;
}

fieldset#server_form, #user{
  display: none;
}

.glyph_table {
  border-collapse: collapse;
  line-height: 4px;
}

#glyph_div {
  border:1px solid #333;
  background:#daffff;
  padding:1px 1px;
  color:#333;
  font:14px Helvetica;
  width:34px;
}

label {
  display:inline;
  position:relative;
  margin-left: 0.2em;
  _top:0.2em;
}

input {
  display: inline;
  margin-left: 0.5em;
}

.whitelist_url{
  margin-left: 0;
  width: 270px;
  padding-left: 5px;
  margin-bottom: 6px;
  display: inline;
}

#add_more_urls{
  cursor: pointer;
}

#save{
  margin-left: 135px;
}

.remove_whitelist{
  cursor: pointer;
  -webkit-filter:invert(30%);
}

.remove_whitelist:hover{
  -webkit-filter:invert(0%);
}

li {
  line-height: 24px;
}

fieldset{
  border: none;
}

fieldset#server_form, #user{
  display: none;
}

#register_email {
  margin-bottom: 0.5em;
}

.glyph_table {
  border-collapse: collapse;
  line-height: 4px;
}

#glyph_div {
  border:1px solid #333;
  background:#daffff;
  padding:1px 1px;
  color:#333;
  font:14px Helvetica;
  width:34px;
}

label {
  display:inline;
  position:relative;
  margin-left: 0.2em;
  _top:0.2em;
}

input {
  display: inline;
  margin-left: 0.5em;
}

.whitelist_url{
  margin-left: 0;
  width: 270px;
  padding-left: 5px;
  margin-bottom: 6px;
  display: inline;
}

#add_more_urls{
  cursor: pointer;
}

#save{
  margin-left: 135px;
}

.remove_whitelist{
  cursor: pointer;
  -webkit-filter:invert(30%);
}

.remove_whitelist:hover{
  -webkit-filter:invert(0%);
}

li {
  line-height: 24px;
}

Add style changes for input form

Add style changes for input form


.row {
    background-color: #fff;
    display: block;
    position: relative;
    border: 1px solid #d5d3cb;
}

.label {
    padding: 20px 30px;
    width: 100%;
    display: block;
    text-align: left;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: color 200ms ease-in;
    overflow: hidden;

    &:after {
        width: 32px;
        height: 32px;
        content: '';
        border: 2px solid #d5d3cb;
        border-radius: 50%;
        z-index: 2;
        position: absolute;
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
    }
}

.label.checked {
    background-color: var(--main-bg-dark);

    &:after {
        background-color: #cfc487;
        border-color: #cfc487;
        background-image: url('/assets/check-mark.svg');
        background-repeat: no-repeat;
        background-position: 3px 4px;
    }
}

.input {
    width: 32px;
    height: 32px;
    order: 1;
    z-index: 2;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    visibility: hidden;
}

.row {
    display: block;
}

.label {
    background-color: #fff;
    border: 1px solid #d5d3cb;
    padding: 20px 30px;
    width: 100%;
    display: block;
    text-align: left;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: color 200ms ease-in;
    overflow: hidden;

    &:after {
        width: 32px;
        height: 32px;
        content: '';
        border: 2px solid #d5d3cb;
        border-radius: 50%;
        z-index: 2;
        position: absolute;
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
    }
}

.label.checked {
    background-color: var(--main-bg-dark);

    &:after {
        background-color: #cfc487;
        border-color: #cfc487;
        background-image: url('/assets/check-mark.svg');
        background-repeat: no-repeat;
        background-position: 3px 4px;
    }
}

.input {
    width: 32px;
    height: 32px;
    order: 1;
    z-index: 2;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    visibility: hidden;
}

OwnedCrateRow: Move background color and border to `.label` element


body {
  font-family: 'Pontano Sans', sans-serif;
}

.wrapper {
  height: 100vh;
}

#about {
  min-height: 100%;
  background-image: url("../img/endpos.jpg");
  background-size: cover;
}

#about p {
  position: absolute;
  bottom: 20%;
  color: white;
  font-size: 2em;
}

#footer {
  background-color: white;
  padding: 1.5%;
}

#footer h1 {
  line-height: 0.75%;
}

#footer h3 {
padding-left: 10%;
color: gray;
}

#footer div {
  padding-left: 10%;
}

.image {
  height: 350px;
  margin: 0.5%;
}

Add height and margin to class image divs


body
{
  font-family: Arial;
  font-size: 10pt;}

.pageHeader
{
  font-family: Arial;
  font-size: 16pt;
  font-weight: bold;
}

.pageFooter
{
  font-size: 8pt;
}

.selectAllOrNonePlaceholder
{
  display: block;
  width: 24px;
  height: 24px;
  background-color: #ff0000;
}

body
{
  font-family: Arial;
  font-size: 10pt;}

.pageHeader
{
  font-family: Arial;
  font-size: 16pt;
  font-weight: bold;
}

.pageFooter
{
  font-size: 8pt;
}

.selectAllOrNonePlaceholder
{
  display: block;
  width: 24px;
  height: 24px;
}

Revert "Background colour for debugging."

This reverts commit 2cabb26ad28e1f814f82105cc28fa685ce6575c6.


.pk-sidebar-tab {
  flex-shrink: 0;
  height: 44px;
  padding: 8px;
  padding-top: 11px;
  white-space: nowrap;
}

.pk-sidebar-tab:hover {
  cursor: pointer;
  padding: 8px;
  padding-top: 11px;
  white-space: nowrap;
}

.pk-sidebar-tab-icon {
  font-size: 20px;
  float: left;
  text-align: center;
  width: 24px;
}

.pk-sidebar-tab-label {
  padding-left: 32px;
  padding-top: 2px;
}

.pk-sidebar-tab.ng-hide:not(.ng-hide-animate) {
  /*
   * Ensure there's always enough room to fit the largest-used label,
   * currently this is "Data Results" which is longer than "Dashboard".
   * This avoids unsightly relayout when showing/hiding labels.
   *
   * The default ng-hide behavior uses "display: none !important" which
   * doesn't reserve space for elements. Use "visibility: hidden" instead
   * which does reserve space.
   */
  display: inline-block !important;
  visibility: hidden;
}

Fix unexpected resizing when selecting/deselecting widgets.

This is a regression as a side effect of the new lefthand navigation
which changed size depending on the currently displayed labels.


.preview-box {
  & .buttons {
    @mixin flex-row-center;
    margin-bottom: 0.5rem;
  }

  & .preview-box__container {
    @mixin flex-row-center;
    background-color: $color-back-frames;
    padding: 0.8em 0 0.8em 0;
    margin: 0.8em 0;
    align-items: center;
  }

  .play {
    @mixin button gray;
    @mixin icon play;
  }

  .pause {
    @mixin button brown;
    @mixin icon pause;
  }

  .screen-full {
    @mixin button gray;
    @mixin icon screen-full;
  }

  .screen-normal {
    @mixin button gray;
    @mixin icon screen-normal;
  }

  .frames {
    @mixin button gray;
    @mixin icon frames;
  }
}

.preview-box {
  & .buttons {
    @mixin flex-row-center;
    margin-bottom: 0.5rem;
    div {
      padding-left: 0.2em;
    }
  }

  & .preview-box__container {
    @mixin flex-row-center;
    background-color: $color-back-frames;
    padding: 0.8em 0 0.8em 0;
    margin: 0.8em 0;
    align-items: center;
  }

  .play {
    @mixin button gray;
    @mixin icon play;
  }

  .pause {
    @mixin button brown;
    @mixin icon pause;
  }

  .screen-full {
    @mixin button gray;
    @mixin icon screen-full;
  }

  .screen-normal {
    @mixin button gray;
    @mixin icon screen-normal;
  }

  .frames {
    @mixin button gray;
    @mixin icon frames;
  }
}

Add padding to preview buttons

Add padding to preview buttons


Make default be a darker theme

Make default be a darker theme

No real reason, just tired of video on white


/* add simple classes to buttons for green and grey */
body /deep/ paper-button {
  background: #009688;  /* teal 500 */
  color: white;
}

body /deep/ paper-button[disabled] {
  background: #4DB6AC;  /* teal 300 */
  color: white;
}

body /deep/ paper-button.grey {
  background: #DDDDDD;
  color: #707070;
}

/* all paper-progress places should be green */
body /deep/ paper-progress::shadow #activeProgress {
  background: #009688;
}

body /deep/ a {
  text-decoration: none;
  font-weight: 500;
  color: #009688;
}

html /deep/ [dir='rtl'] /deep/ [layout][horizontal] /deep/ core-icon[icon='arrow-back'] {
  transform: rotate(180deg);
}

body /deep/ paper-input-decorator /deep/ .underline div {
  background-color: #009688;
}

body /deep/ core-toolbar {
  background-color: #009688;
  color: white;
}

/* get around a bug in polymer styling */
body /deep/ paper-input-decorator input[is="core-input"] {
  padding: 0;
  margin: 0.5em 0 0.25em;
  width: 100%;
}

Fix a bug with core-input sizes

Fix a bug with core-input sizes

Due to a Chrome change, all core-input elements were force-styled to be
20em wide.  This looked incredibly strange when used with a
paper-input-decorator (as is all over in the code).  This changes the
styling for core-ipnut element below paper-input-decorators so that they
will have the correct size.

Fixes #1878


body {
    min-height: 100px;
    padding-top: 70px;
}

.footer {
    width: 100%;
    height: 60px;
    background-color: #f5f5f5;
}

.footer > .container {
  height: 60px;
  padding-top: 20px;
  padding-right: 15px;
  padding-left: 15px;
}

.warning {
  color: darkRed;
}

.center {
    text-align: center;
}

#q-doc-file-tree {
    word-wrap: break-word;
}

css: Add default center alignment and allow word wrap in file tree


html {
  font-size: 1em;
  font-family: Helvetica;
  background-image: url('small_steps.png');
}

.appContainer {
  position: relative;
  left: 25%;
  background-color: white;
  max-width: 500px;
  height: 95vh;
  text-align: left;
  padding: 10px;
}

.appContainer h1 {
    text-align: center;
}

.appContainer ul {
  list-style-type: none;
}

.searchContainer {
  text-align: center;
}

.searchContainer input {
  font-family: inherit;
  font-size: 125%;
}

.ingredientsContainer {
  padding-left: 20px;
}

.drinkContainer {
  padding-left: 20px;
}

.detailContainer {
  padding-left: 20px;
}

html {
  font-size: 1em;
  font-family: Helvetica;
  background-image: url('escheresque_ste.png');
}

.appContainer {
  position: relative;
  left: 25%;
  background-color: white;
  max-width: 500px;
  height: 95vh;
  text-align: left;
  padding: 10px;
  border-radius: 6px;
}

.appContainer h1 {
    color: black;
    text-align: center;
}

.appContainer ul {
  list-style-type: none;
}

.searchContainer {
  text-align: center;
}

.searchContainer input {
  text-align: center;
  font-family: inherit;
  font-size: 125%;
  border: none;
  outline: none;
}

.ingredientsContainer {
  padding-left: 20px;
}

.drinkContainer {
  padding-left: 20px;
}

.detailContainer {
  padding-left: 20px;
}

Change BG, add rounded corners

Change BG, add rounded corners


#vimderbar {
    padding: 1px;
    padding-left: 0.7em;
    background: #000;
    color: #fff;
}

#confirm {
  color: #d62d47;
}

#command {
    color: #fff;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    display: none;
}

#command:focus {
    border: none !important;
    /* doesn't work */
}

#command-info {
  font-size: 0.9em;
  color: #888;
}

#command-confirm {
  color: #d62d47;
}

.cm-searching {
    background: rgba(255, 255, 0, .4) !important;
    /* doesn't work */
}

#vimderbar {
    padding: 1px;
    padding-left: 0.7em;
    background: #000;
    color: #fff;
    display: block;
    width: 100%;
    overflow: hidden;
}

#confirm {
  color: #d62d47;
}

#command {
    color: #fff;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    margin-top: -3px;
    display: none;
}

#command-sign {

}

#command:focus {
    border: none;
    box-shadow: none;
}

#command-info {
  font-size: 0.9em;
  color: #888;
}

#command-confirm {
  color: #d62d47;
}

.cm-searching {
    background: rgba(255, 255, 0, .4) !important;
    /* doesn't work */
}

Remove box-shadow from input area. Unsuccessfully attempt to keep vim bar from being hidden by Quick Open.


@import 'perl.css';
/* We can't include the rules below inside perl.css, because it's used by other sites,
   and we can't specify more than one stylesheet to the podhtml.pl program. So... import
*/

html {
    padding-top: 100px;
}

html:before {
    content: "Note: these documents may be out of date. For Perl 6 documentation see docs.perl6.org; for specs, see the official test suite.";
    text-align: center;
    background: red;
    color: white;
    width: 100%;
    display: block;
    padding: 20px;
    font-size: 110%;
    position: absolute;
    top: 0;
    left: 0;
}

@import 'perl.css';
/* We can't include the rules below inside perl.css, because it's used by other sites,
   and we can't specify more than one stylesheet to the podhtml.pl program. So... import
*/

html {
    padding-top: 100px;
}

html:before {
    content: "Note: these documents may be out of date. For Perl 6 documentation see docs.perl6.org; for specs, see the official test suite.";
    text-align: center;
    background: #600;
    color: white;
    width: 100%;
    display: block;
    padding: 10px 20px;
    font-size: 110%;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
}

Use less of an eye-bleed color and better positioning for historical message

MadcapJake++


body {
    background-color: white;
    color: #212121;
    padding: 1rem 2rem;
}

body.night {
    background-color: #181818;
    color: white;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

body {
    background-color: white;
    color: #212121;
    padding: 1rem 2rem;
}

body.night {
    background-color: #181818;
    color: white;
}

body.night input {
  color: black;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

Change input color when in night mode

Change input color when in night mode


/* hides the native tabs */
#TabsToolbar {
    visibility: collapse;
}

#sidebar-header {
    visibility: collapse !important;
}

#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
  opacity: 0;
  pointer-events: none;
}
#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
    visibility: collapse !important;
}

Update userchrome for better tab behavior


#second_from_top {
display: block;
position: relative;
top: 500px;
left: 100px;

}

#second_from_top {
display: block;
position: relative;
top: 600px;
left: 100px;

}

Fix second from top in week3

Fix second from top in week3


#supportcontent {
	margin:5em auto;
	width:600px;
	padding:30px 50px 60px 50px;
	color:#444;
	background:white;
	box-shadow:rgba(0,0,0,0.5) 0 0 25px;
}

#supportcontent {
	margin:5em auto;
	width:600px;
	padding:30px 50px 60px 50px;
	color:#444;
	background:white;
	-vendor-box-shadow:rgba(0,0,0,0.5) 0 0 25px;
}

Make drop-shadow for support pages be browser-specific


@import '@teamleader/ui-colors';

.widget {
  background-color: var(--color-neutral-lightest);
  box-shadow: 0 0 0 1px var(--color-neutral);
  border-radius: 4px;

  > *:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }

  > *:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}

.widget-footer {
  border-top: 1px solid var(--color-neutral);
}

Add styling to the Widget

Add styling to the Widget


#ember-testing-container {
  position: relative;
  background: white;
  bottom: 0;
  right: 0;
  width: 640px;
  height: 384px;
  overflow: auto;
  z-index: 98;
  border: 1px solid #ccc;
  margin: 0 auto;
  transform: translateZ(0);
}

#ember-testing-container.full-screen {
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 98;
  border: none;
}

#ember-testing {
  width: 200%;
  height: 200%;
  transform: scale(0.5);
  transform-origin: top left;
}

.full-screen #ember-testing {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: scale(1);
}

#ember-testing-container {
  position: relative;
  background: white;
  bottom: 0;
  right: 0;
  width: 640px;
  height: 384px;
  overflow: auto;
  z-index: 98;
  border: 1px solid #ccc;
  margin: 0 auto;

  /* Prevent leaking position fixed elements outside the testing container */
  transform: translateZ(0);
}

#ember-testing-container.full-screen {
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 98;
  border: none;
}

#ember-testing {
  width: 200%;
  height: 200%;
  transform: scale(0.5);
  transform-origin: top left;
}

.full-screen #ember-testing {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: scale(1);
}

Add code comment explaining why the CSS transform is there


.post .content-subhead, .post h3 {
    margin-bottom: 0;
}
.post-meta {
    color: #999;
    font-size: 90%;
}

.post-list li {
    margin: 1em 0;
}

Move selector to its own line

Move selector to its own line


.wrap {
	width: 100%;

	& header {
		position: relative;;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 50px;
		z-index: 200;
		text-align: center;
		color: #e1e8ed;
		background: #292f33;
		width: 100%;

		& a {
			cursor: pointer;
		}
	}
}

.base {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
}

.content {
	overflow-y: auto;
	overflow-x: hidden;
	height: calc(100% - 50px);
}

.title {
	font-size: 1.5rem;
}

.loading {
	display: flex;
	justify-content: center;
	height: 100%;

	& svg {
		margin-top: 40%;
		width: 30px;
		height: 40px;
		& path, & rect {
			fill: #2c8a6b;
		}
	}
}

.wrap {
	width: 100%;

	& header {
		position: relative;;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 50px;
		z-index: 200;
		text-align: center;
		color: #e1e8ed;
		background: #292f33;
		width: 100%;

		& a {
			cursor: pointer;
		}
	}
}

.base {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
}

.content {
	overflow-y: auto;
	overflow-x: hidden;
	height: calc(100% - 50px);
}

.title {
	font-size: 1.2rem;
}

.loading {
	display: flex;
	justify-content: center;
	height: 100%;

	& svg {
		margin-top: 40%;
		width: 30px;
		height: 40px;
		& path, & rect {
			fill: #2c8a6b;
		}
	}
}

Change column header font size

Change column header font size


.CodeMirror
{
    height: 564px;
}

.code-mirrors-container div.form-control
{
    height: 580px;
}

.code-mirrors-container
{
    margin-top: 11px;
}

.alert
{
    margin-top: 4px;
    margin-bottom: 0;
    font-family: monospace;
    font-size: 15px;
    white-space: pre;
    overflow: hidden;
}

select.form-control
{
    height: 37px;
}

@media (min-width: 1366px) {
  .container {
    width: 1336px;
  }
}

@media (min-width: 1600px) {
  .container {
    width: 1570px;
  }
}

Add support for bigger resolutions

Add support for bigger resolutions


notification[value="plugin-hidden"] {
  display: none !important;
}

* {
  -moz-animation: none !important;
  animation: none !important;
  -moz-transition: none !important;
  transition: none !important;
}

Disable CSS animations and transitions

firefox: Disable CSS animations and transitions


p
{
	line-height: 130%
}

hr
{
	page-break-after: always;
}

h2
{
	text-align: center;
}

Increase the line spacing with a paragraph


#second_from_top {
display: block;
position: relative;
top: 790px;
left: 100px;
}

#third_from_top {
display: block;
position: relative;
top: 800px;
left: 100px;
}

#fourth_from_top {
display: block;
position: relative;
top: 900px;
left: 100px;
}

#fifth_from_top {
display: block;
position: relative;
top: 1200px;
left: 100px;
}

#second_from_top {
display: block;
position: relative;
top: 790px;
left: 100px;
}

#third_from_top {
display: block;
position: relative;
top: 800px;
left: 100px;
}

#fourth_from_top {
display: block;
position: relative;
top: 810px;
left: 100px;
}

#fifth_from_top {
display: block;
position: relative;
top: 820px;
left: 100px;
}

Change block positioning blog index

Change block positioning blog index


html {
  height: 100%;
  max-height: 100%;
  font-size: 25px;
}

body {
  /* to cover entire space, always */
  margin: 0;
  min-height: 100%;
  /* grid setup */
  display: grid;
  grid-template: auto / 1fr [content]minmax(600px,3fr) 1fr;
  grid-row-gap: 15px;
  align-content: space-between;
  /* colors, text, extra */
  background-color: #dedede;
}

/* meta class to format the content bubbles */
.content {
  /* grid */
  grid-column: content;
  /* color */
  background-color: #fff;
  box-shadow: 0 0 12px 1px rgba(42, 42, 42, 0.2);
  /* look */
  border-radius: 10px;
}

/* Header section: title, subtitle, navigation */
.header {
  /* ensure text is centered here */
  text-align: center;
}

/* To be replaced with text at a later time */
.footer {
  text-align: center;
}

/* Article contents */
.article {
}

/* Responsive design here, for mobile only */
@media (max-width: 600px) {
  body {
    grid-template: auto / [content]1fr;
  }
}

html {
  height: 100%;
  max-height: 100%;
  font-size: 25px;
}

body {
  /* to cover entire space, always */
  margin: 0;
  min-height: 100%;
  /* grid setup */
  display: grid;
  grid-template: auto / 1fr [content]minmax(600px,3fr) 1fr;
  grid-row-gap: 15px;
  align-content: space-between;
  /* colors, text, extra */
  background-color: #dedede;
}

/* meta class to format the content bubbles */
.content {
  /* grid */
  grid-column: content;
  /* color */
  background-color: #fff;
  box-shadow: 0 0 12px 1px rgba(42, 42, 42, 0.2);
  /* look */
  border-radius: 10px;
}

/* Header section: title, subtitle, navigation */
.header {
  /* ensure text is centered here */
  text-align: center;
}

/* To be replaced with text at a later time */
.footer {
  text-align: center;
}

/* Article contents */
.article {
}

/* Separate components of an article */
.section {
  border-bottom: #dedede inset;
}

/* Responsive design here, for mobile only */
@media (max-width: 600px) {
  body {
    grid-template: auto / [content]1fr;
  }
}

Add some marking between the divs.

Add some marking between the divs.


div.page
{
	display: table;
	clear: both;
}

div.mainpane
{
	float: left;
	width: 25%;
}

div.subpane
{
	float: right;
	width: 75%;
}

div.page
{
	display: table;
	clear: both;
}

div.mainpane
{
	float: left;
	width: 50%;
}

div.subpane
{
	float: right;
	width: 50%;
}

Set both panes to half width

Http: Set both panes to half width


:root {
    --title-color: #606E7B;
    --subtitle-color: #AAB7C3;
    --muted-color: #DEEAF1;
    --blue-color: #2D86D4;
    --icon-width: calc(48px + 1rem);
}

:local(.detail) {
    composes: flex align-center from "style";
    composes: relative from "style";
    margin-left: var(--icon-width);
}

:local(.detailBody) {
    composes: flex-full from "style";
    max-width: 550px;
    padding-top: 20px;
    padding-bottom: 20px;
}

:local(.detailTitle) {
    composes: text-bold inline-block from "style";
    color: var(--title-color);
    font-size: 18px;
}

:local(.detailSubtitle) {
    composes: text-dark mt2 from "style";
    font-size: 16px;
}

:local(.detailSubtitleLight) {
    composes: mt2 from "style";
    color: var(--subtitle-color);
    font-size: 16px;
}

:local(.detailTextArea) {
    composes: text-dark input p2 from "style";
    resize: none;
    font-size: 16px;
    width: 100%;
    min-height: 100px;
}

:root {
    --title-color: #606E7B;
    --subtitle-color: #AAB7C3;
    --muted-color: #DEEAF1;
    --blue-color: #2D86D4;
    --icon-width: calc(48px + 1rem);
}

:local(.detail) {
    composes: flex align-center from "style";
    composes: relative from "style";
    margin-left: var(--icon-width);
}

:local(.detailBody) {
    composes: flex-full from "style";
    max-width: 550px;
    padding-top: 20px;
    padding-bottom: 20px;
}

:local(.detailTitle) {
    composes: text-bold inline-block from "style";
    color: var(--title-color);
    font-size: 18px;
}

:local(.detailSubtitle) {
    composes: text-dark mt2 from "style";
    font-size: 16px;
    line-height: 24px;
}

:local(.detailSubtitleLight) {
    composes: mt2 from "style";
    color: var(--subtitle-color);
    font-size: 16px;
}

:local(.detailTextArea) {
    composes: text-dark input p2 from "style";
    resize: none;
    font-size: 16px;
    width: 100%;
    min-height: 100px;
}

Fix line-height in data ref paragraphs

Fix line-height in data ref paragraphs [ci skip]


/* - - - - - - - - - - - - - - - - - - - - -

 Title : Sample Wufoo Custom Theme
 Author : Myke Agonia
 URL : http://http://mykeagonia08.github.io/css/wufoo/custom.css

 Last Updated :

- - - - - - - - - - - - - - - - - - - - - */

/* - - - Default - - - */

/* Logo */
#logo a {background-image:url('http://wufoo.com/images/themes/logos/shark.png'); min-height:0; height:40px}
* html #logo a {/* IE6 png Support */
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://wufoo.com/images/themes/logos/shark.png", sizingMethod="crop");
}

/* Backgrounds */
html{background-image:none;background-color:#99cc00}
#logo{background-image:none;background-color:#669900}
#container{background:#FFFFFF}
.wufoo input.text, .wufoo textarea.textarea{background:#FFFFFF url(/images/fieldbg.gif) repeat-x top}
.wufoo .focused{background:#FFF7C0}
.wufoo .instruct{background-color:#F5F5F5}

/* Borders */
#container{border:0 solid #cccccc}
.wufoo .info{border-bottom:1px dotted #CCCCCC}
.wufoo .instruct{border:1px solid #e6e6e6}

/* Typography */
.wufoo .info h2{font-size:160%;font-family:inherit;color:#000000}
.wufoo .info div{font-size:95%;font-family:inherit;color:#444444}
.wufoo .section h3{font-size:110%;font-family:inherit;background:#FFFFFF;color:#000000}
.wufoo .section div{font-size:85%;font-family:inherit;color:#444444}
.wufoo label.desc, .wufoo legend.desc{font-size:95%;font-family:inherit;color:#444444}
.wufoo li div, .wufoo li div label, .wufoo li span label{font-family:inherit;color:#444444}
.wufoo input.text, .wufoo textarea.textarea, .wufoo select.select, .wufoo label.choice{font-size:100%;font-family:inherit;color:#333333}
.wufoo label.choice{color:#444444}
.wufoo .instruct{font-size:80%;font-family:inherit;color:#444444
}

Create Custom CSS for Wufoo form sample

Create Custom CSS for Wufoo form sample


/* Ideally use import as below, but currently encounters build issues, */
/* and inability to install as NPM package due to missing package version number. */
/* @import 'eLife-pattern-library/assets/sass/build.scss'; */
/* due to the above issues we import and inline the built CSS file from the web */
@import 'https://elifesciences.org/assets/patterns/css/all.0565330b.css';

/* Ensure fonts still resolve when not viewed on ELife website */
/* This could potentially be extracted into a separate file, for more granular imports */
@import '../../shared/fonts/notoSerif/notoSerif.css';
@import '../../shared/fonts/notoSans/notoSans.css';

main {
  @extend .wrapper;
}

:--Article {
  @extend .wrapper;
  @extend .content-container;
  @extend .grid__item;
  @extend .one-whole;
  @extend .large--eight-twelfths;
  @extend .x-large--seven-twelfths;
  @extend .grid-column;
}

:--Article :--authors {
  @extend .content-header__author_list;

  :--Person {
    @extend .content-header__author_list_item;
  }
}

/* Chain custom MicroData selectors for style adjustments as needed */
:--Article :--affiliations {
  display: inline;
  padding: 0;
  margin: 0;
}

/* Ideally use import as below, but currently encounters build issues, */
/* and inability to install as NPM package due to missing package version number. */
/* @import 'eLife-pattern-library/assets/sass/build.scss'; */
/* due to the above issues we import and inline the built CSS file from the web */
@import 'https://elifesciences.org/assets/patterns/css/all.d21534c9.css';

/* Ensure fonts still resolve when not viewed on ELife website */
/* This could potentially be extracted into a separate file, for more granular imports */
@import '../../shared/fonts/notoSerif/notoSerif.css';
@import '../../shared/fonts/notoSans/notoSans.css';

main {
  @extend .wrapper;
}

:--Article {
  @extend .wrapper;
  @extend .content-container;
  @extend .grid__item;
  @extend .one-whole;
  @extend .large--eight-twelfths;
  @extend .x-large--seven-twelfths;
  @extend .grid-column;
}

:--Article :--authors {
  @extend .content-header__author_list;

  :--Person {
    @extend .content-header__author_list_item;
  }
}

/* Chain custom MicroData selectors for style adjustments as needed */
:--Article :--affiliations {
  display: inline;
  padding: 0;
  margin: 0;
}

Update hotlink url to eLife css

chore(Deps): Update hotlink url to eLife css


html {
  font-family: "source-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@media (min-width: 38em) {
  html {
    font-size: 19px;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
}

code,
pre {
  font-family: "source-code-pro", Menlo, Monaco, "Courier New", monospace;
}

code {
  font-size: 0.8rem;
}

pre {
  font-size: 0.75rem;
  background-color: white;
  border-left: .25rem solid #e5e5e5;
}

a:hover,
a:focus {
  text-decoration: none;
}

.masthead-title {
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
}

.masthead-title img {
  display: inline;
  float: left;
  border-radius: 50%;
  margin-bottom: 0;
  margin-right: 1rem;
}

footer {
  margin-bottom: 2rem;
}

html {
  font-family: "source-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@media (min-width: 38em) {
  html {
    font-size: 19px;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

code,
pre {
  font-family: "source-code-pro", Menlo, Monaco, "Courier New", monospace;
}

code {
  font-size: 0.8rem;
}

pre {
  font-size: 0.75rem;
  background-color: white;
  border-left: .25rem solid #e5e5e5;
}

a:hover,
a:focus {
  text-decoration: none;
}

.masthead-title {
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
}

.masthead-title img {
  display: inline;
  float: left;
  border-radius: 50%;
  margin-bottom: 0;
  margin-right: 1rem;
}

footer {
  margin-bottom: 2rem;
}

Change header font to Proxima Nova

Change header font to Proxima Nova


/* Add your application specific styles here */

.bg-login-image {
	background-image: url('https://source.unsplash.com/4rDCa5hBlCs/600x800');
}

.bg-password-image {
	background-image: url('https://source.unsplash.com/4rDCa5hBlCs/600x800');
}

.bg-register-image {
	background-image: url('https://source.unsplash.com/4rDCa5hBlCs/600x800');
}

Update login / register / forgot images

chore: Update login / register / forgot images


/* Reset some styling */
.related {
  border-top: none;
}

.post {
  margin-bottom: 3em;
}

/* Follow on twitter button */
.like-on-twitter {
  text-align: center;
}

.like-on-twitter p {
  margin: 0;
}

.like-on-twitter p a {
  color: white !important;
  text-decoration: none;
}

.like-on-twitter p a:hover {
  border-bottom: 1px solid white;
  text-decoration: underline;
}

.subscribe-box {
  background-color: #75b5aa;
  padding: 2rem 1rem;
  text-align: center;
  color: white;
}

.subscribe-box p:last-of-type {
  margin: 0;
}

.subscribe-box a {
  color: white !important;
}

.subscribe-box a:hover {
  color: white;
  text-decoration: underline;
}

/* Reset some styling */
.related {
  border-top: none;
}

.post {
  margin-bottom: 3em;
}

/* Follow on twitter button */
.like-on-twitter {
  text-align: center;
}

.like-on-twitter p {
  margin: 0;
}

.like-on-twitter p a {
  color: white !important;
  text-decoration: none;
}

.like-on-twitter p a:hover {
  border-bottom: 1px solid white;
  text-decoration: underline;
}

.subscribe-box {
  background-color: #75b5aa;
  padding: 2rem 1rem;
  text-align: center;
  color: white;
}

.subscribe-box p:last-of-type {
  margin: 0.5rem 0 0 0;
}

.subscribe-box a {
  color: white !important;
}

.subscribe-box a:hover {
  color: white;
  text-decoration: underline;
}

Add more spacing last p

Add more spacing last p


/* New Start: A modern Arch workflow built with an emphasis on functionality.
 * Copyright (C) 2017-2018 Donovan Glover
 */

.termite {
    /* Same as URxvt.internalBorder */
    padding: 30px;
}

/* New Start: A modern Arch workflow built with an emphasis on functionality.
 * Copyright (C) 2017-2018 Donovan Glover
 */

VteTerminal, vte-terminal {
    /* Same as URxvt.internalBorder */
    padding: 30px;
}

Fix termite padding to support changing color schemes

The solution I used previously for padding in termite did not change the
padding color when other software such as pywal changed the color scheme.

This fixes that, so now it is possible to change color schemes
fully in termite without having to spawn a new terminal. This is
very nice, and also works well with termite's transparency feature.


html {
    --main-bg: papayawhip;
    --main-text: chocolate;
}
body {
    font: 400 18px/1.5 Helvetica,Arial,sans-serif;
    font-feature-settings: "kern" 1;
    font-kerning: normal;
    background-color: var(--main-bg);
    color: var(--main-text);
}

Add some color to our HTML

Add some color to our HTML


.hint {
    display: inline;
    text-decoration: none;
    border-bottom: 1px dotted;
}

.hint:hover:after {
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    transform: translateY(26px);
    color: #fff;
    content: attr(data-hint);
    padding: 9px 16px;
    position: absolute;
    z-index: 1000000;
    font-size: 14px;
    font-weight: normal;
}

.hint:hover:before {
    border: solid;
    border-color: #333 transparent;
    border-width: 0 6px 6px 6px;
    transform: translateY(20px) translateX(8px);
    content: "";
    position: absolute;
    z-index: 99;
}

@media screen and (max-width: 499px) {
    .hint:hover:after {
        transform: translateY(26px);
        left: 0px;
        width: auto;
    }
}

@media screen and (min-width: 500px) {
    .hint:hover:after {
        transform: translateY(26px);
        left: 0px;
        width: 220px;
    }
    .hint {
        position: relative;
    }
}

.hint {
    display: inline;
    text-decoration: none;
    border-bottom: 1px dotted;
}

.hint:hover:after {
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    transform: translateY(26px);
    color: #fff;
    content: attr(data-hint);
    padding: 9px 16px;
    position: absolute;
    z-index: 1000000;
    font-size: 14px;
    font-weight: normal;
    top: 0;
}

.hint:hover:before {
    border: solid;
    border-color: #333 transparent;
    border-width: 0 6px 6px 6px;
    transform: translateY(20px) translateX(8px);
    content: "";
    position: absolute;
    z-index: 99;
}

@media screen and (max-width: 499px) {
    .hint:hover:after {
        transform: translateY(26px);
        left: 0px;
        width: auto;
    }
}

@media screen and (min-width: 500px) {
    .hint:hover:after {
        transform: translateY(26px);
        left: 0px;
        width: 220px;
    }
    .hint {
        position: relative;
    }
}

Fix drifting tooltip box on an inline element

Add `top: 0` to make sure that `:after` starts at the same position as `:before`


input[type=text].readonly{
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    background-color: rgba(0, 0, 0, 0.070);
}

#id_receive_url{
    width: 435px
}

.djnjg-overlay {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 11;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
}

.djnjg-overlay .inner{
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 0;
}

.djnjg-overlay .close,
.djnjg-overlay .close:focus,
.djnjg-overlay .close:active{
    position: absolute;
    right: 10px;
    top: 10px;
    font-weight: bold;
    font-size: 15px;
    background-color: #772299;
    color: #fff;
    padding: 5px 8px;
    border-radius: 5px;
    text-decoration: none;
}

.djnjg-overlay .close:hover{
    background-color: #9e47c1;
}

.njg-overlay{
    top: auto;
    bottom: 50px;
}

input[type=text].readonly{
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    background-color: rgba(0, 0, 0, 0.070);
}

#id_receive_url{
    width: 435px
}

.djnjg-overlay {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 11;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
}

.djnjg-overlay .inner{
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 0;
}

.djnjg-overlay .close,
.djnjg-overlay .close:focus,
.djnjg-overlay .close:active{
    position: absolute;
    right: 10px;
    top: 10px;
    font-weight: bold;
    font-size: 15px;
    background-color: #772299;
    color: #fff;
    padding: 5px 8px;
    border-radius: 5px;
    text-decoration: none;
}

.djnjg-overlay .close:hover{
    background-color: #9e47c1;
}

.njg-overlay{
    top: auto;
    bottom: 5px;
    right: 5px;
}

[history] Move node overlay on bottom right corner

Covering the date overlay for simplicity (no space left)


/* JMA tweak */
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("www.jma.go.jp") {
  /* Common */
  #main, table.forecast { width: 50rem !important; }
  #others td:first-of-type { float: left !important; white-space: nowrap !important; }

  #yjsearch    { display: none !important; }
  #header_link { float: right !important; width: 28em !important; }

  /* Forecast */
  .info { width: 18em !important; }

  /* Weekly forecast */
  .for { width: 6.2em !important; }
}

/* JMA tweak */
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("www.jma.go.jp") {
  /* Common */
  #main, table.forecast { width: 850px !important; }
  #others td:first-of-type { float: left !important; white-space: nowrap !important; }

  #yjsearch    { display: none !important; }
  #header_link { float: right !important; width: 28em !important; }

  /* Forecast */
  .info { width: 18em !important; }

  /* Weekly forecast */
  .for { width: 100px !important; }
}

Use pixel instead of em/rem

Use pixel instead of em/rem

em/rem cause an unexpected error of display since its width may change by users' settings.


h1 {
  position: fixed;
  top: 0px;
  right: 0px;
  text-align: center;
  width: 100%;
  background-color: white;
  opacity: 1.0;
  border-bottom: 2px solid grey;
  padding: 10px;
}
.event-home {
  position: fixed;
  top: 0px;
  margin-left: 0;
  padding: 19px;
  z-index: 1;
  border-left: 3px solid grey;
  border-right: 3px solid grey;
}
.post-home {
  position: fixed;
  top: 0px;
  margin-left: 0;
  padding: 19px;
  z-index: 1;
  border-left: 3px solid grey;
  border-right: 3px solid grey;
}
.history-home {
  position: fixed;
  top: 0px;
  margin-left: 0;
  padding: 19px;
  z-index: 1;
  border-left: 3px solid grey;
  border-right: 3px solid grey;
}
a:hover {
  background-color: lightgrey;
  color: white;
}
a:link {
  color: black;
  text-decoration: none;
}
a:visited {
  color: none;
}
body {
  background: lightblue;
  margin-top: 100px;
}
fieldset {
  background: white;
  margin-right: 80px;
  margin-left: 80px;
}
p {
  margin-left: 20px;
  text-align: center;
  margin-bottom: 10px;
}

h3 {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 10px;
}
* {
  margin: 0;
  padding: 0;
}
form {
  text-align: center;
}
.label {
  font-weight: bold;
}

Add formatting to header and center form fields