/*
 * 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.
 *
 * Note that this uses jquery-ui/autocomplete (to do a polyfill for Safari).
 * There are reports that jquery-ui interferes with bootstrap; I hope those
 * have been resolved.
 *
 *= require_tree .
 *= require_self
 *= require font-awesome
 *= require jquery-ui/autocomplete
 *= require rails_bootstrap_forms
 *= require bootstrap-social
 */

/* Work around a bug in Bootstrap's navigation bar. When the display is narrow,
   the navigation bar gets longer, but the body padding doesn't adjust.
   The result is that the navigation bar overlaps the beginning of the
   body content below it.  This particular workaround is based on:
   http://stackoverflow.com/questions/10336194/
   twitter-bootstrap-top-nav-bar-blocking-top-content-of-the-page
   but note that for us the key breakpoint is width 767px, not 979px.  */

body {
  padding-top: 80px;
}
@media (max-width: 767px) {
  body {
    padding-top: 240px;
  }
}

Work around Bootstrap nav bar bug so narrow screens display ok

Signed-off-by: David A. Wheeler <9ae72d22d8b894b865a7a496af4fab6320e6abb2@dwheeler.com>


/* Website specific styles */

main {
    display: block;
    margin-bottom: 15px;
    min-height: 100vh;
}

/* Remove border added by code-prettify */

pre {
    border: 0 !important;
}

nav .github-icon {
    height: 24px;
    margin-right: 5px;
    vertical-align: middle;
}

.ion-hero .hero-btn {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

.heading-font-label {
    background-color: #eee;
    border-radius: 5px;
    display: inline-block;
    font-size: 12px;
    padding: 5px;
}

.block-margin {
    margin-bottom: 68px;
}

/* Website specific styles */

main {
    display: block;
    margin-bottom: 15px;
    min-height: 100vh;
}

/* Remove border added by code-prettify */

pre {
    border: 0 !important;
}

nav .github-icon {
    height: 24px;
    margin-right: 5px;
    vertical-align: middle;
}

.ion-hero .hero-btn {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

.heading-font-label {
    background-color: #eee;
    border-radius: 5px;
    display: inline-block;
    font-size: 12px;
    padding: 5px;
}

.block-margin {
    margin-bottom: 73px;
}

Fix block-margin not aligning properly

Fix block-margin not aligning properly


a {
	color: midnightblue; /* because there's lots of links, default blue is too aggressive */
}

a:visited {
	color: purple;
}

body {
	font: 18px/1.4 sans-serif;
	margin-left: 20px;
}

.selected {
	background: #ccf;
}

#divDebug {
	border: 1px solid grey;
	color: #333;
	font-size: 14px;
	padding: .5em;
}

#divDebug hr {
	margin: .2em 0;
}

#instantclick {
	_display: none;
}
#instantclick-bar {
	_display: none;
}
#instantclick-bar {
	_background: red;
}
/* Remove the underscore when you want to enable a declaration. */

a {
	color: midnightblue; /* because there's lots of links, default blue is too aggressive */
}

a:visited {
	color: purple;
}

body {
	font: 18px/1.4 sans-serif;
	margin-left: 20px;
}

.selected {
	background: #ccf;
}

#divDebug {
	border: 1px solid grey;
	color: #333;
	font-size: 14px;
	padding: .5em;
}

#divDebug hr {
	margin: .2em 0;
}

#instantclick {
	_display: none;
}
#instantclick-bar {
	_display: none;
}
#instantclick-bar {
	_background: red;
}
/* An underscore before a property name acts like a comment, remove it to enable a declaration. */

Clarify underscores as CSS comments

Clarify underscores as CSS comments


@media (max-width: 767px) {
  body .container {
    padding: 10px;
  }

  #info img {
    display: block;
    margin: auto;
    max-width: 180px;
  }

  #chart {
    height: 250px;
  }
}

@media (min-width: 768px) {
  html body {
    padding: 15px;
  }

  #info img {
    float: left;
    max-width: 160px;
    margin-left: 13px;
  }

  #chart {
    height: 350px;
  }
}

html body {
  background: #449944;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#info {
  padding: 15px;
  background-color: #dff5df;
  border-radius: 6px;
}

#stats {
  float: left;
  padding-left: 20px;
}

#chartContainer {
  padding: 15px 15px 0;
}

#chart {
  padding: 0;
}

#status {
  list-style-type: none;
  padding: 0px;
  font-size: 18px;
}

@media (max-width: 767px) {
  body .container {
    padding: 10px;
  }

  #info img {
    display: block;
    margin: auto;
    max-width: 180px;
  }

  #chart {
    height: 250px;
  }
}

@media (min-width: 768px) {
  html body {
    padding: 15px;
  }

  .container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  #info img {
    float: left;
    max-width: 160px;
    margin-left: 13px;
  }

  #chart {
    height: 350px;
  }
}

html body {
  background: #449944;
}

#info {
  padding: 15px;
  background-color: #dff5df;
  border-radius: 6px;
}

#stats {
  float: left;
  padding-left: 20px;
}

#chartContainer {
  padding: 15px 15px 0;
}

#chart {
  padding: 0;
}

#status {
  list-style-type: none;
  padding: 0px;
  font-size: 18px;
}

Fix alignment for mobile devices

Fix alignment for mobile devices


.selected-canvas-element {
  box-shadow: 0 0 16px black;
  background: rgba(255, 255, 255, 0.5);
}

.selected-canvas-element {
  /* TODO: Add a proper selected canvas element effect. */
}

Remove selected canvas element effect CSS.


.row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    padding: 20px;
    transition: background-color 300ms;

    &:hover {
        background-color: var(--grey200);
        transition: background-color 0ms;
    }
}

.num-link {
    &::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }
}

.date {
    composes: small from '../../styles/shared/typography.module.css';
    display: inline-block;
    margin-left: 20px;
}

.yanked {
    composes: yanked from '../../styles/shared/typography.module.css';
}

.yank-button {
    position: relative;
}

.row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    padding: 20px;
    transition: background-color 300ms;

    &:hover {
        background-color: var(--grey200);
        transition: background-color 0ms;
    }
}

.num-link {
    font-variant-numeric: tabular-nums;

    &::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }
}

.date {
    composes: small from '../../styles/shared/typography.module.css';
    display: inline-block;
    margin-left: 20px;
}

.yanked {
    composes: yanked from '../../styles/shared/typography.module.css';
}

.yank-button {
    position: relative;
}

VersionList::Row: Use `tabular-nums` styling for version numbers


/*^
  ===========================================================================
  Solvenius
  ===========================================================================
  Copyright (C) 2001-2017 Gianluca Costa
  ===========================================================================
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
  ===========================================================================
*/

@media (orientation: landscape)  {
  #appBox {
    position: absolute;
    left: 30%;
    width: 40%;

    top: 0;
    min-height: 100%;
  }
}

@media (orientation: portrait)  {
  body {
    font-size: 50px;
  }

  #appBox {
    position: absolute;
    left: 0;
    width: 100%;

    top: 0;
    min-height: 100%;
  }

  #titleStage h1 {
    font-size: 2.5em;
  }
}

/*^
  ===========================================================================
  Solvenius
  ===========================================================================
  Copyright (C) 2001-2017 Gianluca Costa
  ===========================================================================
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
  ===========================================================================
*/

@media (orientation: landscape)  {
  #appBox {
    position: absolute;
    left: 30%;
    width: 40%;

    top: 0;
    min-height: 100%;
  }
}

@media (orientation: portrait)  {
  body {
    font-size: 2em;
  }

  #appBox {
    position: absolute;
    left: 0;
    width: 100%;

    top: 0;
    min-height: 100%;
  }
}

Fix font size for portrait orientation

Fix font size for portrait orientation


/* Copyright (c) 2013 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */
.raster-task-slice-view {
  -webkit-flex-direction: column;
  display: -webkit-flex;
}

.raster-task-slice-view > object-snapshot-view {
  -webkit-flex: 1 1 auto;
}

/* Copyright (c) 2013 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */
.raster-task-slice-view {
  -webkit-flex-direction: column;
  -webkit-flex: 1 1 auto;
  display: -webkit-flex;
}

.raster-task-slice-view > object-snapshot-view {
  -webkit-flex: 1 1 auto;
}

Fix sizing of raster task slice view

Fix sizing of raster task slice view


* {
    font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
}

.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;
}

line.edge.active.selected {
	stroke-width: 4px;
}

* {
    font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
}

.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: black;
	opacity: .25;
	stroke-width: 2px;
	pointer-events: none;
}

line.edge.active {
	opacity: 1;
	pointer-events: auto;
}

line.edge.active.selected {
	stroke-width: 4px;
}

Use opacity rather than color to distinguish active/inactive edges

Fixes #3


html {
    height: 100%;
}

body {
    background-color: lightblue;
    height: 100%;
}

table {
    width: 100%;
    min-height: 100%;
    height: 100%;
    text-align: center;
}

td {
    width: 50%;
    padding: 10px;
}

.names {
    height: 15%;
    font-size: 320%;
    font-weight: bold;
}

.timer {
    height: 15%;
    font-size: 320%;
}

.scores {
    height: 70%;
    font-size: 6000%;
    font-weight: bold;
    line-height: 100%;
}

.counter {
    width: 100%;
    text-align: center;
}

.cell {
    height: 25px;
    width: 25px;
    background-color: #0A6C82;
    display: inline-block;
    border-radius: 50%;
}

.cell:not(:last-child) {
    margin-right: 10px;
}

html {
    height: 100%;
}

body {
    background-color: lightblue;
    height: 100%;
}

table {
    width: 100%;
    min-height: 100%;
    height: 100%;
    text-align: center;
}

td {
    width: 50%;
    padding: 10px;
}

.names {
    height: 15%;
    font-size: 320%;
    font-weight: bold;
}

.timer {
    height: 15%;
    font-size: 320%;
}

.scores {
    height: 70%;
    font-size: 3000%;
    font-weight: bold;
    line-height: 100%;
}

.counter {
    width: 100%;
    text-align: center;
}

.cell {
    height: 25px;
    width: 25px;
    background-color: #0A6C82;
    display: inline-block;
    border-radius: 50%;
}

.cell:not(:last-child) {
    margin-right: 10px;
}

Cut the score font size in half so two-digit scores don't require horizontal scrolling.


/*
body {
    background-color: #BCD2EE;
}

.container {
    width:1210px;
    height:700px;
    margin-right:auto;
    margin-left:auto;
    background-color:#ffffff;
}
*/
.viewer {
    width:100%;
    height:100%;
    overflow:hidden;
    float:left;
    z-index:20;
    position:relative;
}

.form {
    width:300px;
    height:100%;
    overflow-y:scroll;
    float:right;
    background-color:#0198e1;
}

td {
    background-color:white;
}

#annotbuttons {
    z-index:10;
    height:40px;
    top: 650px;
    left: 10px;
    position:absolute;
}

#zoombuttons {
    z-index:10;
    height:45px;
    top: 630px;
    left: 860px;
    position:absolute;
}

#rotatebuttons {
    z-index:10;
    height:45px;
    top: 645px;
    left: 430px;
    position:absolute;
}

/*
body {
    background-color: #BCD2EE;
}

.container {
    width:1210px;
    height:700px;
    margin-right:auto;
    margin-left:auto;
    background-color:#ffffff;
}
*/
.viewer {
    width:100%;
    height:100%;
    overflow:hidden;
    float:left;
    z-index:20;
    position:relative;
    -moz-user-select : none;
    -webkit-user-select : none;
}

.form {
    width:300px;
    height:100%;
    overflow-y:scroll;
    float:right;
    background-color:#0198e1;
}

td {
    background-color:white;
}

#annotbuttons {
    z-index:10;
    height:40px;
    top: 650px;
    left: 10px;
    position:absolute;
}

#zoombuttons {
    z-index:10;
    height:45px;
    top: 630px;
    left: 860px;
    position:absolute;
}

#rotatebuttons {
    z-index:10;
    height:45px;
    top: 645px;
    left: 430px;
    position:absolute;
}

Fix for unintended selection on the div

Fix for unintended selection on the div


.popup, .playlist .icon-type { display: none; }
.page-break { page-break-after: always; }

#print-options { display: none; }

.collage-content .paragraph-numbering {
  left: -35px;
}
.collage-content {
  padding-left: 35px;
}
.wrapper {
  margin-right: 35px;
}

.popup, .playlist .icon-type { display: none; }
.page-break { page-break-after: always; }

#print-options { display: none; }

.collage-content .paragraph-numbering {
  /* left: -35px; */
}
.collage-content {
  padding-left: 35px;
}
.wrapper {
  margin-right: 35px;
}

Fix bug that ignored paragraph numbers show/hide setting


/*
 * Author:        Pierre-Henry Soria <ph7software@gmail.com>
 * Copyright:     (c) 2012-2016, Pierre-Henry Soria. All Rights Reserved.
 * License:       GNU General Public License; See PH7.LICENSE.txt and PH7.COPYRIGHT.txt in the root directory.
 */

#make_money {
    background: url(../img/make-money.jpg);
    margin: 20px;
    width: 300px;
    height: 291px;
    margin: 2px 2px 2px 2px;border:1px solid #999;
    border-radius: 5px;
}
.aff_login {
    margin-top: 20px;
}

/*
 * Author:        Pierre-Henry Soria <ph7software@gmail.com>
 * Copyright:     (c) 2012-2016, Pierre-Henry Soria. All Rights Reserved.
 * License:       GNU General Public License; See PH7.LICENSE.txt and PH7.COPYRIGHT.txt in the root directory.
 */

#make_money {
    background: url(../img/make-money.jpg) no-repeat;
    margin: 20px;
    width: 300px;
    height: 291px;
    margin: 2px 2px 2px 2px;border:1px solid #999;
    border-radius: 5px;
}
.aff_login {
    margin-top: 20px;
}

Add no-repeat to background affiliate img


.container {
  display: flex;
  margin: 0 auto;
  width: 33%;
  background-color: #ff0;
  justify-content: center;

}

.inline-nav {
  display: inline;
}

.inline-nav a p {
	display: none;
}

.inline-nav a:hover p {
	display: block;
}

.page-header {
	display: flex;
	margin: 0 auto;
	width: 33%;
	background-color: #0abc4f;
	justify-content: center;
}

th {
	text-align: center;
}

body {
	padding-top: 25%;
	padding-bottom: 25%;
}

.container {
  display: inline-block;
  margin: 0 auto;
  width: 33%;
  background-color: #ff0;
  justify-content: center;

}

.inline-nav {
  display: inline;
}

.inline-nav a p {
	display: none;
}

.inline-nav a:link, .inline-nav a:visited {
	text-decoration: none;
}

.inline-nav a:hover, .inline-nav a:active {
	text-decoration: none;
}

.inline-nav a:hover p {
	display: block;
}

.page-header {
	display: flex;
	margin: 0 auto;
	width: 33%;
	background-color: #0abc4f;
	justify-content: center;
}

th {
	text-align: center;
}

body {
	padding-top: 25%;
	padding-bottom: 25%;
}

Format nav bar so things appear under nav


@import url(uno.css);
@import url(monokai.css);

/* Modifications */

pre.highlight,
.highlight pre {
  padding: 10px;
}

pre.highlight code,
.highlight pre code {
  white-space: pre-wrap;
}

.btn,
.navigation__item a {
  margin: 5px 0;
  white-space: nowrap;
}

.pagination__page-number {
  display: inline-block;
  padding: 10px;
}

.categories a,
.tags a {
  border: 1px solid #e25440;
  border-radius: 20px;
  color: #e25440;
  display: inline-block;
  font-size: 12px;
  margin: 5px 0;
  padding: 5px 10px;
  text-shadow: none;
  white-space: nowrap;
}

.post-meta__tags {
  font-size: 12px;
  padding: 0 5px;
}

.footer__copyright {
    margin: 0 20px 10px;
}

.user-image {
  margin-bottom: 1.2em;
  position: relative;
  width: 100px;
  height: 100px;
  border: 3px solid #fff;
  border-radius:100%;
}

@import url(uno.css);
@import url(monokai.css);

/* Custom CSS by elmundio87 */

code {
    color: #FFF;
}

.highlighter-rouge {
    background-color: rgba(100,100,100,0.25);
    color: #444;
}

/* Modifications */

pre.highlight,
.highlight pre {
  padding: 10px;
}

pre.highlight code,
.highlight pre code {
  white-space: pre-wrap;
}

.btn,
.navigation__item a {
  margin: 5px 0;
  white-space: nowrap;
}

.pagination__page-number {
  display: inline-block;
  padding: 10px;
}

.categories a,
.tags a {
  border: 1px solid #e25440;
  border-radius: 20px;
  color: #e25440;
  display: inline-block;
  font-size: 12px;
  margin: 5px 0;
  padding: 5px 10px;
  text-shadow: none;
  white-space: nowrap;
}

.post-meta__tags {
  font-size: 12px;
  padding: 0 5px;
}

.footer__copyright {
    margin: 0 20px 10px;
}

.user-image {
  margin-bottom: 1.2em;
  position: relative;
  width: 100px;
  height: 100px;
  border: 3px solid #fff;
  border-radius:100%;
}

Fix highlighting and the default code colour


html {
	min-height: 100%;
}

body {
	height: 100%;
}

.root {
	display: flex;

	width: 100%;
	height: 100%;
}

.game-canvas {
	/*
	width: 100%;
	height: auto;
	*/
}
.game-canvas:focus {
	border: inherit;
	outline: inherit;
}

Update css to remove default game canvas focus highlight


.clear-active-position {
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  height: 100%;
  color: rgba(0, 0, 0, 0.75);
  padding: 5px 10px;
  box-shadow: none;
}

.clear-active-position {
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  height: 100%;
  color: rgba(0, 0, 0, 0.75);
  padding: 5px 10px;
  box-shadow: none;
  cursor: pointer;
}

Update ClearActivePosition button style 'cursor: pointer'


:host { display: block; }

h2 {
    -webkit-user-select: none;
    cursor: default;
}

.commit-status {
    border: 1px solid #e5e5e5;
    margin: 1em 16px;
}

.issue-subject {
    padding: 0.5em 16px;
}

.issue-description {
    margin: 1em 16px;
}

.issue-content {
    flex: 1;
}

.issue-body {
    display: flex;
}

.issue-toolbar {
    border-bottom: 1px #e5e5e5 solid;
}

cr-issue-patchsets,
cr-issue-messages {
    padding: 0.5em 16px;
}

cr-issue-meta {
    flex-shrink: 0;
    width: 300px;
    padding: 1em 16px;
}

header {
    align-items: center;
    display: flex;
}

header .ui-actions {
    padding: 0.5em 16px;
    flex-shrink: 0;
}

header h2 {
    flex: 1;
}

.issue-toolbar .ui-actions {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

:host { display: block; }

h2 {
    -webkit-user-select: none;
    cursor: default;
}

.commit-status {
    border-bottom: 1px solid #e5e5e5;
    margin: 0.5em 16px;
}

.issue-subject {
    padding: 0.5em 16px;
}

.issue-description {
    margin: 1em 16px;
}

.issue-content {
    flex: 1;
}

.issue-body {
    display: flex;
}

.issue-toolbar {
    border-bottom: 1px #e5e5e5 solid;
}

cr-issue-patchsets,
cr-issue-messages {
    padding: 0.5em 16px;
}

cr-issue-meta {
    flex-shrink: 0;
    width: 300px;
    padding: 1em 16px;
}

header {
    align-items: center;
    display: flex;
}

header .ui-actions {
    padding: 0.5em 16px;
    flex-shrink: 0;
}

header h2 {
    flex: 1;
}

.issue-toolbar .ui-actions {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

Make the border more subtle around the commit status.


.arrow-up {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 15px 20px 15px;
  border-color: transparent transparent green transparent;
}

.arrow-down {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 15px 0 15px;
  border-color: red transparent transparent transparent;
}

Add style for the arrow indicating

Add style for the arrow indicating


BODY, TD, TR, P, UL, OL, LI, INPUT, SELECT, DL, DD, DT, FONT
{
    font-size: 12px;
}

CODE.code { color: #461b7e}
PRE.code {  color: #461b7e}
BLOCKQUOTE.code { color: #461b7e}
TD.sans { font-size: smaller; }
P.white { color: white; }
P.blackhead { color: black; font-weight: 900; }
P.whitehead { color: white; font-weight: 900; }
P.yellow { color: #FFCC33; }
A:hover { color: #666666; }
A.white { color: white; text-decoration: none; font-size: smaller; }
A.black { color: black; text-decoration: none; font-size: smaller; }
A.white:hover { text-decoration: underline; }

div.section {
	padding          : 0.25em;
	background-color : #FFCC33;
	border           : 2px outset #333;
	font-size        : 120%;
	font-weight      : bold;
	text-align       : left;
}

div.section .left {
	float : left;
}

blockquote {
	margin: 15px 30px 15px 10px;
	padding-left: 20px;
	border-left: 5px solid #ddd;
}

Add blockquote margin.
whitespace changes.
remove BLOCKQUOTE.code

git-svn-id: 3b6cb4556d214d66df54bca2662d7ef408f367bf@3302 46e82423-29d8-e211-989e-002590a4cdd4


@import "../../lib/styles/properties.css";

.AnnouncementNotification {
  position: relative;
  padding: 10px;
  margin-top: 1px;
  font-size: 14px;
  color: #fff;
  background-color: #000;
}

.AnnouncementNotification.hasAsset {
  min-height: 100px;
  padding-left: 90px;
}

.AnnouncementNotificationAsset {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 70px;
  overflow: hidden;
}

.AnnouncementNotificationTitle {
  @apply --sanserif-bold;
  max-width: calc(100% - 15px);
  margin-bottom: 15px;
  font-size: 16px;
}

.AnnouncementNotificationBody {
  margin-bottom: 15px;
}

.AnnouncementNotificationCTA {
  border-bottom: 1px solid;
}

.AnnouncementNotificationX {
  position: absolute;
  top: 10px;
  right: 10px;
}

@import "../../lib/styles/properties.css";

.AnnouncementNotification {
  position: relative;
  padding: 10px;
  margin-top: 1px;
  font-size: 14px;
  color: #fff;
  background-color: #000;
}

.AnnouncementNotification.hasAsset {
  min-height: 100px;
  padding-left: 90px;
}

.AnnouncementNotificationAsset {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 70px;
  overflow: hidden;
}

.AnnouncementNotificationTitle {
  @apply --sanserif-bold;
  max-width: calc(100% - 15px);
  margin-bottom: 15px;
  font-size: 16px;
}

.AnnouncementNotificationBody {
  margin-bottom: 15px;
}

.AnnouncementNotificationCTA {
  display: inline;
  border-bottom: 1px solid;
}

.AnnouncementNotificationX {
  position: absolute;
  top: 10px;
  right: 10px;
}

Fix the underline style for the CTA text

[Fixes: #137365999](https://www.pivotaltracker.com/story/show/137365999)


/* Create room for header */
body.page {
  padding-top: 70px;
}

.page-header, .page-header h1 {
  margin-top: 0px;
}

footer {
  margin-top: 20px;
}

/* Remove gradient on carousel (ugly when small) */
.carousel-control.left, .carousel-control.right {
  background: none !important;
  filter: progid: none !important;
  outline: 0;
 }
.carousel .carousel-control {
  visibility: hidden;
}
.carousel:hover .carousel-control {
  visibility: visible;
}

/* Higher contrast link color. */
a {
  color: #2C679B;
}
.h1 .small, .h1 small, .h2 .small, .h2 small, .h3 .small, .h3 small, .h4 .small, .h4 small, .h5 .small, .h5 small, .h6 .small, .h6 small, h1 .small, h1 small, h2 .small, h2 small, h3 .small, h3 small, h4 .small, h4 small, h5 .small, h5 small, h6 .small, h6 small {
  color: #707070;
}
.breadcrumb > .active {
  color: #707070;
}
.text-primary {
  color: #2C679B;
}

.navbar-default .navbar-nav > li > a {
    color: #666;
}

Tweak navbar text color to improve contrast


body {
      text-align: center;
      background: url("http://i.imgur.com/RIquUvj.jpg");
      background-size: cover;
      background-position: center;
      color: white;
      font-family: Monaco;
    }
p {
  font-family: Monaco;
  color: #33ccff;
  max-width: 500px;
  margin: 0 auto;
  font-size: 14px;
}
    img {
    margin-left: auto;
    margin-right: auto;
    border: 12px double;
    border-radius: 20px;
    border-color: purple;

    li {
      display: inline;
      padding: 10px 10px 10px 10px;
      color: #33ccff
    }
  h1 {
    font-family: Monaco;
    color: purple;
  }
  h2 {
    font-family: Monaco;
    color: light blue;
  }
  h4 {
    font-family: Monaco;
    color: magenta;
  }

body {
      text-align: center;
      background: url("http://i.imgur.com/RIquUvj.jpg");
      background-size: cover;
      background-position: center;
      color: white;
      font-family: Didot;
    }
p {
  font-family: Didot;
  color: #33ccff;
  text-align: left;
  max-width: 500px;
  margin: 0 auto;
  font-size: 14px;
}
    img {
    margin-left: auto;
    margin-right: auto;
    border: 12px double;
    border-radius: 20px;
    border-color: purple;

    li {
      display: inline;
      padding: 10px 10px 10px 10px;
      color: #33ccff
    }
  h1 {
    font-family: Didot;
    color: purple;
  }
  h2 {
    font-family: Didot;
    color: light blue;
  }
  h4 {
    font-family: Didot;
    color: magenta;
  }

Edit font and text align

Edit font and text align


/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

#things-view {
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
  padding: 7.6rem 0;
}

#things {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  max-height: 100%;
  text-align: center;
}

#add-button {
  bottom: 2rem;
  right: 2rem;
  background-image: url('../optimized-images/add.svg');
}

#add-thing-back-button {
  background-color: transparent;
}

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

#things-view {
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
  padding: 7.6rem 0;
}

#things {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  max-height: 100%;
  text-align: center;
  font-size: 1.6rem;
  color: #fff;
}

#add-button {
  bottom: 2rem;
  right: 2rem;
  background-image: url('../optimized-images/add.svg');
}

#add-thing-back-button {
  background-color: transparent;
}

Fix no devices message styles

Fix no devices message styles


#canvas_container,
#buttons_container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
#canvas_container *,
#buttons_container * {
    pointer-events: auto;
}
#canvas_container {
    background: url("img/bg.jpg");
}
#canvas_container.dragging {
    cursor: move;
}

.image_button {
    position: absolute;
    transform: translateX(-50%);
}

#info {
    position: fixed;
    bottom: 0;
    right: 0;
    color: #333;
    text-align: center;
}
#repo_link {
    color: #333;
    padding: 5px;
    position: relative;
}
#repo_link::before {
    content: '';
    position: absolute;
    background: url(https://assets-cdn.github.com/favicon.ico) no-repeat;
    left: 0;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateX(-100%) translateY(-50%);
    border-bottom: 1px solid #333;
}

/* Chrome button text on buttons selection fix */
body * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#canvas_container,
#buttons_container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
#canvas_container *,
#buttons_container * {
    pointer-events: auto;
}
#canvas_container {
    background: url("img/bg.jpg");
}
#canvas_container.dragging {
    cursor: move;
}

.image_button {
    position: absolute;
    transform: translateX(-50%);
}

#info {
    position: fixed;
    bottom: 0;
    right: 0;
    color: #333;
    text-align: center;
}
#repo_link {
    color: #333;
    padding: 5px;
    position: relative;
}
#repo_link::before {
    content: '';
    position: absolute;
    background: url(https://assets-cdn.github.com/favicon.ico) no-repeat;
    background-size: cover;
    left: 0;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateX(-100%) translateY(-50%);
}

/* Chrome button text on buttons selection fix */
body * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Fix github icon size in repo link

Fix github icon size in repo link


#project1, #project2, #project3 {
  display: none;
}

body {
  background: linear-gradient(black,white);
}

.wrap {
    margin: auto;
    width: 50%;
    border: 2px solid #eeecec;
    padding: 70px;
    margin-top: 50px;
}

a {
  color: #000080;
  font-family: sans-serif;
}

img {
    display: block;
    margin: auto;
    width: 80%;
    align-self: center;
}

.footer {
   display: table;
   text-align: center;
   font-family: sans-serif;
   margin-left: auto;
   margin-right: auto;
}

#project1, #project2, #project3 {
  display: none;
}

body {
  background: url("https://images.unsplash.com/photo-1483205464475-6204a96e1ef3?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=");
}

.wrap {
    margin: auto;
    width: 50%;
    border: 2px solid #eeecec;
    padding: 70px;
    margin-top: 50px;
}

a {
  color: #000080;
  font-family: sans-serif;
}

img {
    display: block;
    margin: auto;
    width: 80%;
    align-self: center;
}

.footer {
   display: table;
   text-align: center;
   font-family: sans-serif;
   margin-left: auto;
   margin-right: auto;
}

Add bg pic in the body

Add bg pic in the body


.editor,
.viewer {
    margin:0;
    padding:0;
    text-align:center;
}
#canvas-container {
    margin:0.5em;
}

.ui-content { margin:0; padding: 0; }
.ui-grid-a { margin:0; padding: 0; }
#session-editor { margin:0; padding: 0; }
#session-viewer { margin:0; padding: 0; }
#current_color {border:1px solid #ffffff; margin-right: 0.5em;}

.editor,
.viewer {
    margin:0;
    padding:0;
    text-align:center;
}
#canvas-container {
    margin:0.4em;
}

.ui-content { margin:0; padding: 0; }
.ui-grid-a { margin:0; padding: 0; }
#session-editor { margin:0; padding: 0; }
#session-viewer { margin:0; padding: 0; }
#current_color {border:1px solid #ffffff; margin-right: 0.5em;}

Reduce margin to avoid scroll.

Reduce margin to avoid scroll.


#container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.hashnav-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    text-align: left;
}

.hashnav-page.hashnav-left {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}

.hashnav-page.hashnav-center {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.hashnav-page.hashnav-right {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}

.hashnav-page.hashnav-transition {
    -webkit-transition-duration: .25s;
    transition-duration: .25s;
}

Remove css for obsolete class

Remove css for obsolete class


.Image {
  position: relative;
}

.Image {
  position: absolute;
  height: 400;
  width: 400;
}

.example-enter {
  opacity: 0.01;
  transition: opacity .5s ease-in;
}

.example-enter.example-enter-active {
  opacity: 1;
}

.example-leave {
  opacity: 1;
  transition: opacity .5s ease-in;
}

.example-leave.example-leave-active {
  opacity: 0.01;
}

.Image {
  position: relative;
}

.Image {
  position: absolute;
  height: 400px;
  width: 400px;
}

.example-enter {
  opacity: 0.01;
  transition: opacity .5s ease-in;
}

.example-enter.example-enter-active {
  opacity: 1;
}

.example-leave {
  opacity: 1;
  transition: opacity .5s ease-in;
}

.example-leave.example-leave-active {
  opacity: 0.01;
}

Add units to width/height declarations

Add units to width/height declarations


body {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

p {
  font-family: Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#navbar-state:checked ~ .collapse {
  display: block;
}

body {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

p {
  font-family: Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.navbar-toggler {
  cursor: pointer;
}

.navbar-toggler:hover {
  background-color: rgba(0,0,0,.05);
}

#navbar-state:checked ~ .collapse {
  display: block;
}

Set navbar hamburguer cursor and hover state

A pointer cursor is the same used for buttons and links, hinting that
the element is actionable.

Changing the background color on hover also matches with common button
and link behavior.


img.small-cover {
    max-width: 50px;
}

.clickable, a[data-ng-click] {
    cursor: pointer;
}

#container {
    position: relative;
}

#nav-menu {
    position: fixed;
    background-color: white;
}

#nav-menu + * {
    margin-top: 37px;
}

nav .nav-wrapper {
    display: inline-block;
}

nav .nav.nav-list {
    float: left;
    text-align: center;
}

.fullscreen {
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.videoPlayer {
    position: fixed;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
}

.videoPlayer video {
    max-height: 100%;
}

Fix too large video tag

Fix too large video tag


@import "monokai.css";

.spacer {
  height: 80px;
}

.post-preview {
  font-size: 1.5em;
  padding: 0;
  margin-bottom: 10px;
}

.tags {
  margin-bottom: 10px;
}

.article-footer {
  padding: 0px;
}

.posts {
  max-width: 85%;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .spacer {
    height: 50px;
  }

  .posts {
    max-width: 96%;
  }
}

@import "monokai.css";

.spacer {
  height: 80px;
}

.post-preview {
  font-size: 2.3437em;
  padding: 0;
  margin-bottom: 10px;
}

.tags {
  margin-bottom: 10px;
}

.article-footer {
  padding: 0px;
}

.posts {
  max-width: 85%;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .spacer {
    height: 50px;
  }

  .posts {
    max-width: 96%;
  }
}

.tags {
  font-size: 1.7577em;
}

Fix the font-size on the blog-index.html page.

The scale for the font size is based on the fact that Vitality uses a
font-size of 50px for an h2 element, and the ratios defined on page 275
of the HTML & CSS book.


.time-axis {
  border-bottom: 1px solid gray;
  border-top: 1px solid gray;
  height: 32px;
  overflow: hidden;
}

.time-axis pattern line {
  stroke: lightgray;
}

.time-axis .background {
  fill: url(#time-axis-pattern);
}

.time-axis .month line {
  stroke: lightgray;
  stroke-width: 2px;
}

.time-axis .month rect {
  fill: lightgray;
}

.time-axis .month text {
  cursor: default;
  fill: gray;
  font-size: 14px;
  text-anchor: middle;
}

.time-axis .today {
  fill: red;
  opacity: 0.6;
}

.time-axis {
  border-bottom: 1px solid gray;
  border-top: 1px solid gray;
  height: 32px;
  overflow: hidden;
}

.time-axis pattern line {
  stroke: lightgray;
}

.time-axis .background {
  fill: url(../#time-axis-pattern);
}

.time-axis .month line {
  stroke: lightgray;
  stroke-width: 2px;
}

.time-axis .month rect {
  fill: lightgray;
}

.time-axis .month text {
  cursor: default;
  fill: gray;
  font-size: 14px;
  text-anchor: middle;
}

.time-axis .today {
  fill: red;
  opacity: 0.6;
}

Fix url for time axis pattern

Fix url for time axis pattern


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

/* Add CSS variables to :root */
:root {
  --jp-icon-geojson: url('./geojson.svg');
}

/* Base styles */
.jp-RenderedGeoJSON {
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
}

/* Document styles */
.jp-MimeDocument .jp-RenderedGeoJSON {

}

/* Document styles */
.jp-OutputArea .jp-RenderedGeoJSON {
  height: 360px;
}

/* Document icon */
.jp-GeoJSONIcon {
  background-image: var(--jp-icon-geojson);
}

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

/* Add CSS variables to :root */
:root {
  --jp-icon-geojson: url('./geojson.svg');
}

/* Base styles */
.jp-RenderedGeoJSON {
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden !important;
}

/* Document styles */
.jp-MimeDocument .jp-RenderedGeoJSON {

}

/* Document styles */
.jp-OutputArea .jp-RenderedGeoJSON {
  height: 360px;
}

/* Document icon */
.jp-GeoJSONIcon {
  background-image: var(--jp-icon-geojson);
}

Hide horizontal scroll bar below Leaflet map

The `overflow: hidden;` directive was overridden by `.jp-OutputArea-output`'s `overflow-x: auto;`, resulting in an ugly horizontal scrollbar below the leaflet map that jumped around all the time when panning, as Leaflet loaded new tiles.


/*
 * Ensure CSS inclusion doesn't regress
 * https://github.com/facebook/create-react-app/issues/2677
 */
@import '~normalize.css/normalize.css';

#feature-css-inclusion {
  background: palevioletred;
  color: papayawhip;
}

/*
 * Ensure CSS inclusion doesn't regress
 * https://github.com/facebook/create-react-app/issues/2677
 */
/*@import '~normalize.css/normalize.css';*/

#feature-css-inclusion {
  background: palevioletred;
  color: papayawhip;
}

Comment out normalize css import because weve re-routed imports to align with V3 requirements but this breaks e2e


.todo-error input {
	background-color: #ff9696;
}

.todo-list {
	border: 1px solid #333;
}

.todo-list .oo-ui-optionWidget:not( :last-child ) {
	border-bottom: 1px solid #666;
}

/* TODO: Add the following rules to tutorial CSS */
.oo-ui-inputWidget {
	margin-bottom: 0.5em;
}

.todo-list .oo-ui-labelElement-label {
	margin-left: 0.25em;
}

.tutorials-embed-app .oo-ui-labelElement .oo-ui-optionWidget {
	padding: 0.25em;
}

.tutorials-basics2-button-rules .todo-itemWidget {
	display: inline-table;
}

.tutorials-basics2-button-rules .todo-itemWidget.oo-ui-optionWidget.oo-ui-labelElement > .oo-ui-labelElement-label {
	display: table-cell;
	width: 100%;
	padding: 0.5em;
}

.tutorials-basics2-button-rules .todo-itemWidget .oo-ui-buttonWidget {
	display: table-cell;
}

.todo-error .oo-ui-inputWidget-input {
	background-color: #ff9696;
}

.todo-list {
	border: 1px solid #333;
}

.todo-list .oo-ui-optionWidget:not( :last-child ) {
	border-bottom: 1px solid #666;
}

/* TODO: Add the following rules to tutorial CSS */
.oo-ui-inputWidget {
	margin-bottom: 0.5em;
}

.todo-list .oo-ui-labelElement-label {
	margin-left: 0.25em;
}

.tutorials-embed-app .oo-ui-labelElement .oo-ui-optionWidget {
	padding: 0.25em;
}

.tutorials-basics2-button-rules .todo-itemWidget {
	display: inline-table;
}

.tutorials-basics2-button-rules .todo-itemWidget.oo-ui-optionWidget.oo-ui-labelElement > .oo-ui-labelElement-label {
	display: table-cell;
	width: 100%;
	padding: 0.5em;
}

.tutorials-basics2-button-rules .todo-itemWidget .oo-ui-buttonWidget {
	display: table-cell;
}

Fix error CSS for demos

Fix error CSS for demos

Increase the specificity of the selector for the input field error
state, otherwise the error won't show.

Change-Id: Ic268d9f5c47b6744ef1cabe7c04cb9aab6105af7


.projects-details-info {
	background: #eee;
	padding: 1em;
	font-size: 0.8em;
}

.projects-details-info dl {
	margin: 0;
}

.projects-details-info dt {
	font-weight: bold;
}

.projects-details-info dd {
	margin: 0;
}

.projects-details-info dd:not(:last-child) {
	margin-bottom: 0.5em;
}

.projects-details-content img {
	max-width: 100%;
}

.projects-details-content blockquote {
	border-left: 4px solid #ddd;
	margin-left: 0;
	margin-right: 0;
	padding: 0 1em;
}

.projects-details-content table {
	border-collapse: collapse;
}

.projects-details-content tr:nth-child(2n) {
	background-color: #eee;
}

.projects-details-content td,
.projects-details-content th {
	border: 1px solid #ddd;
	padding: 0.4em 0.5em;
}

Add blockquote and table styles for projects


body a {
  color: #000;
  text-decoration-style: dotted;
}

body a:visited {
  color: #000;
}

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

.block-center {
  margin: 5px auto;
  min-width: 180px;
  padding: 0 15px;
  width: 30%;
}

.social-icon-group table {
  margin: 0 auto;
}

.social-icon-group table td {
  margin: 0 15px;
}

.social-icon-group i {
  color: #006064;
  margin: 0 15px;
  text-decoration: none;
}

.footer-text {
  text-align: center;
  font-size: .75rem;
  color: #808080;
}

#footer { /* Temporary positioning */
  position: absolute;
  width: 100%;
  bottom: 0;
}

Update css to force footer at bottom of page. will udpate later when more content is available.


.button svg {
  color: var(--theme-widget-primary-color);
}

/*
  Animation below depends on overflow being hidden in
  AppHeader.module.css to prevent horizontal overflow/scroll bars.
*/

.animate {
  position: relative;
}

.animate::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -5px -5px;
  z-index: -1;
  width: 10px;
  height: 10px;
  background-color: #ddd;
  border-radius: 5px;
  animation: pulse 0.5s ease 0.2s 1;
  animation-fill-mode: forwards;
  pointer-events: none;
}

@keyframes pulse {
  from {
    opacity: 0.8;
  }
  to {
    transform: scale(40);
    opacity: 0;
  }
}

.button {
  color: var(--theme-widget-primary-color);
}

/*
  Animation below depends on overflow being hidden in
  AppHeader.module.css to prevent horizontal overflow/scroll bars.
*/

.animate {
  position: relative;
}

.animate::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -5px -5px;
  z-index: -1;
  width: 10px;
  height: 10px;
  background-color: #ddd;
  border-radius: 5px;
  animation: pulse 0.5s ease 0.2s 1;
  animation-fill-mode: forwards;
  pointer-events: none;
}

@keyframes pulse {
  from {
    opacity: 0.8;
  }
  to {
    transform: scale(40);
    opacity: 0;
  }
}

Fix unmute icon color in Safari

Fix unmute icon color in Safari

`fill: currentColor` is set on the button. Safari evaluates
`currentColor` on the element itself. We thus need to also override
color there.


/* [XUL] Advanced locationbar tweak */
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
/* for the environment on which "Advanced locationbar" is installed */
.textbox-presentation-protocol,
/* .textbox-presentation-subdomain, */
/* .textbox-presentation-port, */
.textbox-presentation-domain,
.textbox-presentation-slash,
.textbox-presentation-segment-label,
.textbox-presentation-file,
.textbox-presentation-query,
.textbox-presentation-fragment {
  margin-right: 1px !important;
}
.textbox-presentation-port[value^=":"] {
  margin-left: -1px !important;
}

.textbox-presentation-protocol[value^="https:"] {
  color: #0a0 !important;
}
.textbox-presentation-domain {
  font-weight: bold !important;
  color: #000 !important;
}
.textbox-presentation-slash,
.textbox-presentation-query,
.textbox-presentation-fragment {
  color: #bbb !important;
}

.textbox-presentation-query[value="?"],
.textbox-presentation-fragment[value="#"] {
  visibility: collapse !important;
}

Hide empty query and/or fragment

Hide empty query and/or fragment


.zci--answer .zci--objects {
    margin-top: 5px;
}

.zci--answer .zci--objects .objects--objectImage {
    float:left;
    margin-right: 1.4em;
}

.zci--answer .zci--objects .objects--objectAttribute {
    font-size: 1.4em;
    font-weight: 700;
    line-height: 1.2;
    display:block;
}

.zci--answer .zci--objects .objects--objectName {
    font-size: 15px;
    display:inline-block;
    font-weight: 500;
}

.zci--answer .zci--objects .objects--info {
    display: flex;s
    justify-content: center;
    flex-direction: column;
    height: 50px;
}

Add top margin to center planet images

Planets: Add top margin to center planet images


hr
{
	page-break-after: always;
}

h2
{
	text-align: center;
}

Put the text of the chapiter header in the center


/* Our styles */

/* * { */
/* 		outline: 1px dotted red; */
/* } */

body {
		font-family: Optima, Helvetica Neue, sans-serif;
		margin: 0 auto;
		padding: 0 10px;
		max-width: 50em;
		color: #555;
}

body {
		color: #555;
}

h1,
h2,
strong {
  color: #333;
}

/* Our styles */

/* * { */
/* 		outline: 1px dotted red; */
/* } */

body {
		font-family: Optima, Helvetica Neue, sans-serif;
		margin: 0 auto;
		padding: 0 10px;
		max-width: 50em;
		color: #555;
}

body {
		line-height: 1.5;
		padding: 4em 1em;
}

h1,
h2,
strong {
  color: #333;
}

Add some spacing for legibility!

Add some spacing for legibility!


body,
html {
  font-family: "Public Sans", sans-serif;
  height: 100%;
  margin: 0;
}

h3 {
  text-align: center;
}

.col {
  margin: auto;
}

.inline {
  display: inline-block;
}

.prefilled-pick {
  margin-left: 10px;
}

.prefilled-pool {
  margin-top: 20px;
  height: 300px;
}

form {
  margin-left: 5rem;
  margin-right: 5rem;
}

#date {
  padding-left: 10px;
}

Fix styling for create event css

Fix styling for create event css


body {
    background-color: #fdf6e3;
    font-size: 13px;
    line-height: 160%;
    font-family: Verdana, sans-serif;
}

.posts-list-block {
    color: #657b83;
    width: 960px;
    margin: 0 auto;
}

.post-block {
}

.post-block h1 {
    border-bottom: 1px solid #657b83;
    color: #b58900;
    padding-bottom: 7px;
}

Add css stiles for blog output

Add css stiles for blog output


@media screen and (min-width: 768px) and (max-width: 1024px) {
  .recent-title{
    font-size:3.5em;
  }
}

@media screen and (max-width: 320px){
  .navbar-inverse .navbar-brand{
    font-size: 35px;
  }
  .navbar-inverse .navbar-sub-brand{
    font-size: 14px;
  }
}

@media screen and (min-width: 320px) and (max-width: 480px) {
  .main{
    height: 700px;
  }
  .recent-title{
    font-size:2.5em;
  }
  .heading span{
    font-size: 0.6em;
    top:-20px;
  }
  .heading{
    font-size: 8em;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .tagline{
    font-size:3.5em;
  }
}

@media screen and (max-width: 320px){
  .navbar-inverse .navbar-brand{
    font-size: 35px;
  }
  .navbar-inverse .navbar-sub-brand{
    font-size: 14px;
  }
}

@media screen and (min-width: 320px) and (max-width: 480px) {
  .main{
    height: 700px;
  }
  .tagline{
    font-size:2.5em;
  }
  .heading span{
    font-size: 0.6em;
    top:-20px;
  }
  .heading{
    font-size: 8em;
  }
}

Update recent-title to tagline because it was changed in the html


.listsWrapper {
    display: inline-flex;
    height: inherit;
    overflow-x: scroll;
    overflow-y: hidden;
    margin: 0;
}

.addListBlock {
    margin: 13px 10px 0 10px;
    padding-right: 50px;
}

.addListButton {
    opacity: 0.5;
    width: 300px;
}

.droppableLists {
    display: flex;
    height: 100%;
}

.listsWrapper {
    display: inline-flex;
    height: inherit;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0;
}

.addListBlock {
    margin: 13px 10px 0 10px;
    padding-right: 50px;
}

.addListButton {
    opacity: 0.5;
    width: 300px;
}

.droppableLists {
    display: flex;
    height: 100%;
}

FIX Remove white block (scroll) with empty boards


/* Copyright 2015 Mozilla Foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* Used in 'text' tests */

.textLayer {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  line-height: 1;
}
.textLayer span,
.textLayer br {
  position: absolute;
  white-space: pre;
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  -o-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  border: solid 1px rgba(255, 0, 0, 0.5);
  background-color: rgba(255, 255, 32, 0.1);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.textLayer .markedContent {
  border: none;
  background-color: transparent;
}

/* Copyright 2015 Mozilla Foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* Used in 'text' tests */

.textLayer {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  line-height: 1;
}
.textLayer span,
.textLayer br {
  position: absolute;
  white-space: pre;
  transform-origin: 0% 0%;
  border: solid 1px rgba(255, 0, 0, 0.5);
  background-color: rgba(255, 255, 32, 0.1);
  box-sizing: border-box;
}

.textLayer .markedContent {
  border: none;
  background-color: transparent;
}

Remove old prefixed CSS rules used with `text` tests

According to MDN, both the `transform-origin` and `box-sizing` CSS rules are supported in their *unprefixed* versions in modern browsers:

 - https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin#browser_compatibility
 - https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing#browser_compatibility


html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

#content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.row {
  flex: 1;
  display: flex;
  flex-direction: row;
  /* border: black solid 3px; */
}

.col {
  flex: 1;
  border: black solid 5px;
}

.link {
  color: #fff;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

#content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.row {
  flex: 1;
  display: flex;
  flex-direction: row;
}

.col {
  flex: 1;
  border: black solid 5px;
  background: black;
}

.link {
  color: #fff;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

Fix white stripes being white

Fix white stripes being white


.project {
	border-top: 1px solid #000;
}
	.status {
		display: inline-block;
		float: right;
		font-weight: bold;
		font-size: .7em;
		color: white;
		padding: 5px 10px;
	}
		status+planning {
			background-color: gray;
		}
		status+alpha {
			background-color: lightblue;
		}
		status+beta {
			background-color: blue;
		}
		status+shipped {
			background-color: green;
		}
.project > div:nth-of-type(2) {
	float: left;
	width: 48.82117%
	margin-right: 2.35765%
}
.project > div:nth-of-type(3) {
	float: left;
	width: 48.82117%
}

.project {
	border-top: 1px solid #000;
	clear: left;
}
	.status {
		display: inline-block;
		float: right;
		font-weight: bold;
		font-size: .7em;
		color: white;
		padding: 5px 10px;
	}
		status+planning {
			background-color: gray;
		}
		status+alpha {
			background-color: lightblue;
		}
		status+beta {
			background-color: blue;
		}
		status+shipped {
			background-color: green;
		}
.project > div:nth-of-type(2) {
	float: left;
	width: 48.82117%;
	margin-right: 2.35765%;
}
.project > div:nth-of-type(3) {
	float: left;
	width: 48.82117%;
}

Apply some Dashboard CSS fixes

Apply some Dashboard CSS fixes


:root {
  --default-accent-color: var(--accent-color, #1abe9e);

  --default-text-color: var(--text-color, #444);
  --default-bg-color: var(--bg-color, #fefefe);

  --default-row-max-width: var(--row-max-width, 70rem);
  --default-column-count: var(--column-count, 12);
  --default-column-gutter: var(--column-gutter, 1rem);

  --default-font-size: var(--font-size, 1rem);
  --default-font-family: var(--font-family, "Avenir Next", "Segoe UI", Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif);
  --default-divider-color: var(--divider-color, #ccc);

  --default-stripe-color: var(--stripe-color, #2c3e50);
  --default-stripe-pitch: var(--stripe-pitch, 30px);

  --default-global-nav-vertical-padding: var(--global-nav-vertical-padding, 1rem);
}

@custom-media --small;
@custom-media --medium (width >= 50rem);
@custom-media --large (width >= 70rem);

:root {
  --default-accent-color: var(--accent-color, #1abe9e);

  --default-text-color: var(--text-color, #444);
  --default-bg-color: var(--bg-color, #fefefe);

  --default-row-max-width: var(--row-max-width, 70rem);
  --default-column-count: var(--column-count, 12);
  --default-column-gutter: var(--column-gutter, 1rem);

  --default-font-size: var(--font-size, 1rem);
  --default-font-family: var(--font-family, "Avenir Next", "Segoe UI", Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif);
  --default-divider-color: var(--divider-color, #ccc);

  --default-stripe-color: var(--stripe-color, #2c3e50);
  --default-stripe-pitch: var(--stripe-pitch, 30px);

  --default-global-nav-vertical-padding: var(--global-nav-vertical-padding, 1rem);

  --default-side-nav-vertical-padding: var(--global-nav-vertical-padding, .2rem);
}

@custom-media --small;
@custom-media --medium (width >= 50rem);
@custom-media --large (width >= 70rem);

Add side nav vertical padding

Add side nav vertical padding


html,
body {
  height: 100%;
}

body {
  background: #fefefe url('../assets/background.jpg') center center no-repeat;
  background-size: cover;
  color: #9D9D9D;
  font-family: helvetica, arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;

  @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
    background-image: url('../assets/background@2x.jpg');

  }
}

/* Gatsby JS Hack due to a wrapper with an id of ___gatsby */
body > div {
  height: 100%;
}

a {
  color: #3AA842;
  text-decoration: none;
}

img {
  max-width: 100%;
}

.wrapper {
  padding: 16px;
  text-align: center;

  @media (min-width: 500px) {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    padding: 0;
  }
}

.home-content {
  max-width: 400px;
}

.contact-list ul {
  padding: 0
}

.contact-list li {
  display: inline-block;
}

.contact-list li + li {
  margin-left: 80px;
}

html,
body {
  height: 100%;
}

body {
  background: #fefefe url('../assets/background.jpg') center center no-repeat;
  background-size: cover;
  color: #9D9D9D;
  font-family: helvetica, arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;

  @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
    background-image: url('../assets/background@2x.jpg');

  }
}

/* Gatsby JS Hack due to a wrapper with an id of ___gatsby */
body > div {
  height: 100%;
}

a {
  color: #3AA842;
  text-decoration: none;
}

img {
  max-width: 100%;
}

.wrapper {
  padding: 16px;
  text-align: center;

  @media (min-width: 500px) {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    padding: 0;
  }
}

.home-content {
  max-width: 400px;
}

.contact-list {
  padding: 0;
}

.contact-list li {
  display: inline-block;
}

.contact-list li + li {
  margin-left: 80px;
}

Apply 0 Padding on Contact List To Prevent Offset

Apply a 0 padding on the contact-list class to ensure that any padding
is removed as padding should not be governed by this class.


html {
    font-family: sans-serif;
}
#saveCSVSubmit {
    width: 100%;
    display: block;
    margin-bottom: 10px;
}
#err {
    background: #f2dede;
    display: block;
    padding: 15px;
    margin-bottom: 10px;
    color: #333;
}

html {
    font-family: sans-serif;
}
input {
    margin-bottom: 0.6em;
}
#err {
    background: #f2dede;
    display: block;
    padding: 15px;
    margin-bottom: 10px;
    color: #333;
}

Remove submit key max-width CSS, add input CSS


.move-left-detail { /* VM detail on the right */
    position: fixed;
    top: 2.5em;
    height: 100%;
    display: block;
    left: 60%;
    width: 30%;
    opacity:1;
    transition:opacity 0.75s ease-in-out;
}

.move-left-detail-invisible {
    opacity: 0;
}

.move-left-close-detail {/* The Close Detail action */
    font-size: 1.1em;
    float: right;
}

.vm-properties {
    font-size: 16px;
}

dt {
    clear: left;
    float: left;
    width: 200px;
    min-height: 26px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #888;
    font-weight: normal;
    text-align: left;
}

dd {
    margin-left: 110px;
    min-height: 26px;
    max-width: 1000px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vm-detail-icon { /* small VM icon on detail page*/
}

.move-left-detail { /* VM detail on the right */
    position: fixed;
    top: 2.5em;
    height: 100%;
    display: block;
    left: 60%;
    width: 40%;
    opacity:1;
    transition:opacity 0.75s ease-in-out;
}

.move-left-detail-invisible {
    opacity: 0;
}

.move-left-close-detail {/* The Close Detail action */
    font-size: 1.1em;
    float: right;
}

.vm-properties {
    font-size: 16px;
}

dt {
    clear: left;
    float: left;
    width: 200px;
    min-height: 26px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #888;
    font-weight: normal;
    text-align: left;
}

dd {
    margin-left: 110px;
    min-height: 26px;
    max-width: 1000px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vm-detail-icon { /* small VM icon on detail page*/
}

Fix forgotten 'width' in CSS

Fix forgotten 'width' in CSS


@import './colors.css';
@import './z-index.css';
@import './typography.css';
@import './breakpoints.css';
@import './modifiers.css';
@import './animation-timing-functions.css'

@import './colors.css';
@import './constants.css';
@import './z-index.css';
@import './typography.css';
@import './breakpoints.css';
@import './modifiers.css';
@import './animation-timing-functions.css'

Include constants.css in global css

Include constants.css in global css


/* dark green: #277b3c */

body {
	background-color: #dddddd;
}

a {
	color: #277b3c;
}

div.related ul li a {
	color: #6dbe45;
}

h1 {
	color: #277b3c;
}

div.sphinxsidebar h3, div.sphinxsidebar h4 {
	background-color: #4B7455;
}

span.strikethrough { text-decoration: line-through; }

span.highlight { background-color: yellow; }

Fix CRLF and LF in same file.

Fix CRLF and LF in same file.


.edgeHighlight {
  stroke: blue;
  stroke-width: 2.0;
}

.jsavarraytree .jsavarraytreenode {
  border: none;
  background-color: transparent;
  box-shadow: none;
  border-radius: 8px;
}

.jsavarraytree .jsavnode.jsavtreenode {
  max-width: initial;
}

.jsavarraytree .jsavarraytreenode .jsavarray {
  margin: 0;
}

.jsavarraytree .jsavarraytreenode .jsavarray {
  min-height: 47px;
}

Add styling for array tree and edge higlighting


/* Don't let the search box cause a horizontal scroll */
body {
  overflow-x: hidden;
}

.form-search input {
  position: absolute;
  right: -450px;
  top: 3px;
  width: 400px;
}

.CodeMirror {
  border: 1px solid #dddddd;
  margin-bottom: 10px;
}

.CodeMirror-scroll {
  overflow-x: scroll;
  overflow-y: scroll;
}

.editor {
  margin-top: 12px;
}

.note-row:hover {
  cursor: pointer;
}

td.selector {
  border-left-width: 3px;
}

td.selector.selected {
  border-left-color: #4d90f0;
}

Remove horizontal scroll from the search input


body {
	background-color: #15ccfb;
	font-family: "Roboto";
}

#first {
	text-align: center;
	margin: 0px 250px 0px 250px;
	border: 5px solid green;
}

#second {
	text-align: center;
	margin: 0px 250px 0px 250px;
	border: 5px solid green;
}

#third {
	text-align: center;
	margin: 0px 250px 0px 250px;
	border: 5px solid green;
}

#link1 {
	position: fixed;
	top: 0px;
	left: 0px;
}

#link2 {
	position: fixed;
	top: 20px;
	left: 0px;
}

#link3 {
	position: fixed;
	top: 40px;
	left: 0px;
}

#link4 {
	position: fixed;
	top: 60px;
	left: 0px;
}

#link5 {
	position: fixed;
	top: 80px;
	left: 0px;
}

body {
	background-color: #15ccfb;
	font-family: "Roboto";
}

#first {
	text-align: center;
	margin: 0px 250px 0px 250px;
	border: 5px solid green;
}

#second {
	text-align: center;
	margin: 0px 250px 0px 250px;
	border: 5px solid green;
}

#third {
	text-align: center;
	margin: 0px 250px 0px 250px;
	border: 5px solid green;
}

#info {
	top: 20px;
	left: 0px;
}

Move Info To Top Left Corner

Move Info To Top Left Corner


.command-logger {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #1e1e1e;
  color: #eee;
  overflow: auto;
  z-index: 99;
  padding: 20px;
}

.command-logger .category-header {
  text-align: center;
  padding-bottom: 10px;
}

.command-logger .tree-map {
  margin: auto;
  position: relative;
  width: 960px;
  height: 700px;
  background-color: #efefef;
}

.command-logger .node text {
  font-size: 10px;
  fill: #111;
}

.command-logger {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #1e1e1e;
  color: #eee;
  overflow: auto;
  z-index: 99;
  padding: 20px;
}

.command-logger .category-header {
  text-align: center;
  padding-bottom: 10px;
}

.command-logger .tree-map {
  margin: auto;
  position: relative;
  width: 960px;
  height: 700px;
  background-color: #efefef;
  border: 1px solid #999;
}

.command-logger .node text {
  font-size: 10px;
  fill: #111;
}

Add border to tree map

Add border to tree map


pre {
    background: #0B1022;
    font-family: 'Monaco', courier, monospace;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    margin: 0px;
    padding: 0px;
    padding: 10px;
    color: #fff;
    font-size: 14px;
    margin-bottom: 20px;
}

code {
    font-family: 'Monaco', courier, monospace;
}

code .comment {
    color: #727272;
}

code .constant, code .integer {
    color: #D8FA3C;
}

code .storage {
    color: #FBDE2D;
}

code .string {
    color: #61CE3C;
}

code .keyword, code .selector, code.sql .constant {
    color: #FBDE2D;
}

code .keyword.regexp.php {
    color: #fff;
}

code .parent {
    font-style: italic;
}

code .entity {
    color: #FF6400;
}

code .support {
    color: #8DA6CE;
}

code .meta {
    color: #FF6400;
}

pre {
    background: #0B1022;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    margin: 0px;
    padding: 0px;
    padding: 10px;
    color: #fff;
    font-size: 14px;
    margin-bottom: 20px;
}

pre, code {
    font-family: 'Monaco', courier, monospace;
}

pre .comment {
    color: #727272;
}

pre .constant, pre .integer {
    color: #D8FA3C;
}

pre .storage {
    color: #FBDE2D;
}

pre .string {
    color: #61CE3C;
}

pre .keyword, pre .selector {
    color: #FBDE2D;
}

pre .parent {
    font-style: italic;
}

pre .entity {
    color: #FF6400;
}

pre .support {
    color: #8DA6CE;
}

pre .meta {
    color: #FF6400;
}

Update theme to use pre tag for targeting


body {
    background-color: #f9f9f9;
    overflow-x: hidden;
    margin-bottom: 100px;
}

h1 {
    white-space: nowrap;
    color: #444444;
    font-family: 'Montserrat', sans-serif;
    font-size: 50px;
    margin-left: 150px;
    margin-bottom: 20px;
}

a {
    color: #444444;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}

div.navbar {
    margin-left: 150px;
    margin-bottom: 0px;
}

div.navbar a {
    display: inline-block;
    margin-right: 10px;
}

div.entry {
    display: flex;
}

div.margin {
    width: 150px;
    height: 100%;
}

div.margin a {
    display: block;
    text-align: right;
    margin-right: 30px;
}

div.content > img {
    display: block;
    margin-bottom: 50px;
}

div.about {
    margin-top: 30px;
    margin-left: 150px;
}

body {
    background-color: #f9f9f9;
    margin-bottom: 100px;
}

h1 {
    white-space: nowrap;
    color: #444444;
    font-family: 'Montserrat', sans-serif;
    font-size: 50px;
    margin-left: 150px;
    margin-bottom: 20px;
}

a {
    color: #444444;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}

div.navbar {
    margin-left: 150px;
    margin-bottom: 0px;
}

div.navbar a {
    display: inline-block;
    margin-right: 10px;
}

div.entry {
    display: flex;
}

div.margin {
    width: 150px;
    min-width: 150px;
    height: 100%;
}

div.margin a {
    display: block;
    text-align: right;
    margin-right: 30px;
}

div.content {
    overflow: hidden;
}

div.content > img {
    display: block;
    margin-bottom: 50px;
}

div.about {
    margin-top: 30px;
    margin-left: 150px;
}

Fix left margin on low res

Fix left margin on low res

Fix left margin being compressed on low res screens


body {
    text-align:center;
    background:url(http://miriadna.com/desctopwalls/images/max/Walking-path.jpg); /*looks for images from the viewpoint of the css file*/
    background-size:cover;
}

.wrap {
    background-color: white;
    margin: 10% 30%;
    padding-top: 1%;
    border: groove orange;
    border-radius: 10%;
}

body {
    text-align:center;
    background:url(http://miriadna.com/desctopwalls/images/max/Walking-path.jpg); /*looks for images from the viewpoint of the css file*/
    background-size:cover;
}

.wrap {
    background-color: white;
    margin: 10% 30%;
    padding: 1% 1% 0%;
    border: groove orange;
    border-radius: 10%;
}

Fix site map div padding

Fix site map div padding


.game-card {
  color: #01b8f1;
  font-size: 0.9rem;
  width: 272px;
  margin: 0 5px 10px 5px;
}
.game-card .btn {
  font-size: 0.9rem;
}
.game-card .card-footer {
  padding: 0.5rem;
}
.time {
  margin-left: 5px;
}
.badge {
  font-size: 100%;
  font-weight: normal;
}
.badge-primary {
  background-color: #01b8f1;
  color: #ffffff;
}
.btn-outline-primary {
  color: #01b8f1;
  border-color: #01b8f1;
}
.btn-outline-primary:hover,
.btn-outline-primary.active {
  background-color: #01b8f1;
  border-color: #01b8f1;
  color: #ffffff;
}
.table-bordered {
  margin-bottom: 0;
  border-bottom: none;
}
.table-bordered td {
  border-bottom: none;
}
.score {
  color: #00364a;
  text-align: right;
  padding-left: 0.4rem;
}
.spread {
  margin-left: 5px;
}

.game-card {
  color: #01b8f1;
  font-size: 0.85rem;
  width: 272px;
  margin: 0 5px 10px 5px;
}
.game-card .btn {
  font-size: 0.9rem;
}
.game-card .card-footer {
  padding: 0.5rem;
}
.time {
  margin-left: 5px;
}
.badge {
  font-size: 100%;
  font-weight: normal;
}
.badge-primary {
  background-color: #01b8f1;
  color: #ffffff;
}
.btn-outline-primary {
  color: #01b8f1;
  border-color: #01b8f1;
}
.btn-outline-primary:hover,
.btn-outline-primary.active {
  background-color: #01b8f1;
  border-color: #01b8f1;
  color: #ffffff;
}
.table-bordered {
  margin-bottom: 0;
  border-bottom: none;
}
.table-bordered td {
  border-bottom: none;
}
.score {
  color: #00364a;
  text-align: right;
  padding-left: 0.4rem;
}
.spread {
  margin-left: 5px;
}

Decrease team font size for WFT

Decrease team font size for WFT


.user-submission-sworn-declaration {
	padding-bottom: 22px;
}

[type="submit"].user-submission-button {
	background-color: var(--normal-background);
	border-radius: 6px;
	border: 1px solid transparent;
	color: var(--white-text);
	cursor: pointer;
	font-size: 18px;
	font-weight: normal;
	line-height: 22px;
	margin-bottom: 0;
	padding: 10px 16px;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	display: block;
	width: 100%;
}

[type="submit"].user-submission-button:hover,
[type="submit"].user-submission-button:focus,
[type="submit"].user-submission-button:active {
	background-color: var(--normal-dark-background);
}

.user-submission-sworn-declaration {
	padding-bottom: 22px;
}

a.user-submission-button,
[type="submit"].user-submission-button {
	background-color: var(--normal-background);
	border-radius: 6px;
	border: 1px solid transparent;
	color: var(--white-text);
	cursor: pointer;
	font-size: 18px;
	font-weight: normal;
	line-height: 22px;
	margin-bottom: 0;
	padding: 10px 16px;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	display: block;
	width: 100%;
}

a.user-submission-button:hover,
a.user-submission-button:focus,
a.user-submission-button:active,
[type="submit"].user-submission-button:hover,
[type="submit"].user-submission-button:focus,
[type="submit"].user-submission-button:active {
	background-color: var(--normal-dark-background);
}

Support a[href] as submission button

Support a[href] as submission button


/** initial setup **/
::-webkit-scrollbar {
    -webkit-appearance: none;
}
.nano {
  position : relative;
  width    : 100%;
  height   : 100%;
  overflow : hidden;
}
.nano .content {
  position      : absolute;
  overflow      : scroll;
  overflow-x    : hidden;
  top           : 0;
  right         : 0;
  bottom        : 0;
  left          : 0;
}
.nano .pane {
  background: rgba(0,0,0,.25);
  position : absolute;
  width    : 10px;
  right    : 0;
  top      : 0;
  bottom   : 0;
}
.nano .pane .slider {
  background: rgba(0,0,0,.5);
  position              : relative;
  margin                : 0 1px 0 1px;
  -moz-border-radius    : 3px;
  -webkit-border-radius : 3px;
  border-radius         : 3px;
}
.nano:hover .pane, .pane.active {
  visibility: visible;
}
.nano .pane {
  -webkit-transition    : .2s;
  -moz-transition       : .2s;
  -o-transition         : .2s;
  transition            : .2s;
  -moz-border-radius    : 5px;
  -webkit-border-radius : 5px;
  border-radius         : 5px;
  opacity               : .01;
}
.nano:hover .pane, .pane.active {
  opacity : 1;
}

/** initial setup **/
.nano {
  position : relative;
  width    : 100%;
  height   : 100%;
  overflow : hidden;
}
.nano .content {
  position      : absolute;
  overflow      : scroll;
  overflow-x    : hidden;
  top           : 0;
  right         : 0;
  bottom        : 0;
  left          : 0;
}
.nano .content::-webkit-scrollbar {
  -webkit-appearance: none;
}
.nano .pane {
  background: rgba(0,0,0,.25);
  position : absolute;
  width    : 10px;
  right    : 0;
  top      : 0;
  bottom   : 0;
}
.nano .pane .slider {
  background: rgba(0,0,0,.5);
  position              : relative;
  margin                : 0 1px 0 1px;
  -moz-border-radius    : 3px;
  -webkit-border-radius : 3px;
  border-radius         : 3px;
}
.nano:hover .pane, .pane.active {
  visibility: visible;
}
.nano .pane {
  -webkit-transition    : .2s;
  -moz-transition       : .2s;
  -o-transition         : .2s;
  transition            : .2s;
  -moz-border-radius    : 5px;
  -webkit-border-radius : 5px;
  border-radius         : 5px;
  opacity               : .01;
}
.nano:hover .pane, .pane.active {
  opacity : 1;
}

Add namespacing to scrollbar fix

Add namespacing to scrollbar fix


/* Global Styles are in base.css */

html, body {
}

body {
    padding-top: 50px; /* body padding for fixed top nav */
    position: relative; /* for bootstrap affix */
}

.navbar-brand {
    margin-left: 0 !important;
    height: 42px !important;
    line-height: 27px;
    padding: 8px 0px 7px;
}

Add navbar-brand correction css back

Add navbar-brand correction css back


body {
  color: $primary;
}

.panel-step {

}

/* Generic styles */
body {
  color: $primary;
}

.btn:focus {
  outline: none !Important;
}

/* panel */
.panel-step {

}

Remove outline on button focus

Remove outline on button focus


#navigator-toolbox {
    -moz-appearance: none;
    border-top: none;
}

.browser-toolbar:not(.titlebar-color),
#tabbrowser-tabs:not([movingtab])
                    > .tabbrowser-arrowscrollbox
                    > .tabbrowser-tab
                    > .tab-stack
                    > .tab-background[multiselected='true']:-moz-lwtheme,
#tabbrowser-tabs:not([movingtab])
                    > .tabbrowser-arrowscrollbox
                    > .tabbrowser-tab
                    > .tab-stack
                    > .tab-background[selected='true']:-moz-lwtheme,
box {
    background-image: none !important;
}
* {
    --tab-min-width: 76px;
}

#urlbar:not(.megabar):not([focused='true']):-moz-lwtheme,
#urlbar.megabar:not([focused='true']):-moz-lwtheme > #urlbar-background,
#navigator-toolbox #searchbar:not(:focus-within):-moz-lwtheme,
#navigator-toolbox {
    border: none !important;
}

toolbox {
    z-index: 10;
    margin-top: 0px !important;
    margin-bottom: -30px !important;
    height: 0 !important;
}

#nav-bar {
    visibility: hidden;
    transition: visibility 1s !important;
}

#titlebar:hover + #nav-bar,
#nav-bar:focus-within {
    visibility: visible;
}

#navigator-toolbox {
    -moz-appearance: none;
    border-top: none;
}

.browser-toolbar:not(.titlebar-color),
#tabbrowser-tabs:not([movingtab])
                    > .tabbrowser-arrowscrollbox
                    > .tabbrowser-tab
                    > .tab-stack
                    > .tab-background[multiselected='true']:-moz-lwtheme,
#tabbrowser-tabs:not([movingtab])
                    > .tabbrowser-arrowscrollbox
                    > .tabbrowser-tab
                    > .tab-stack
                    > .tab-background[selected='true']:-moz-lwtheme,
box {
    background-image: none !important;
}
* {
    --tab-min-width: 76px;
}

#urlbar:not(.megabar):not([focused='true']):-moz-lwtheme,
#urlbar.megabar:not([focused='true']):-moz-lwtheme > #urlbar-background,
#navigator-toolbox #searchbar:not(:focus-within):-moz-lwtheme,
#navigator-toolbox {
    border: none !important;
}

toolbox {
    z-index: 10;
    margin-top: 0px !important;
    margin-bottom: -30px !important;
    height: 0 !important;
}

#nav-bar {
    visibility: hidden;
    transition: visibility 1s !important;
}

#titlebar:hover + #nav-bar,
#nav-bar:hover,
#nav-bar:focus-within
{
    visibility: visible;
}

Fix navbar flashing in firefox

Fix navbar flashing in firefox


/* Define the Bootstrap container so we don't need to pull in the whole
   grid system. */

.container {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}

@media (min-width: 768px) {
	.container {
		width: 750px;
	}
}
@media (min-width: 992px) {
	.container {
		width: 970px;
	}
}
@media (min-width: 1200px) {
	.container {
		width: 1170px;
	}
}

/* Define the Bootstrap container so we don't need to pull in the whole
   grid system. */

.container {
	padding-right: 5px;
	padding-left: 5px;
	margin-right: auto;
	margin-left: auto;
}

@media (min-width: 768px) {
	.container {
		padding-right: 15px;
		padding-left: 15px;
		width: 750px;
	}
}
@media (min-width: 992px) {
	.container {
		width: 970px;
	}
}
@media (min-width: 1200px) {
	.container {
		width: 1170px;
	}
}

Reduce navbar lateral padding on small screens

This prevents the about and settings buttons from overflowing into
another line.


md-sidenav  {
  width: 200px;
  height: 100%;
  padding: 20px;
  background-color: green;
}

md-content {
  background-color: gray;
  height: 100%;
  padding: 20px;
}

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

body {
  font-family: 'Open Sans', sans-serif;
  color: white;
}

h1 {
  text-transform: uppercase;
  letter-spacing: 4px;
}

md-sidenav  {
  width: 225px;
  height: 100%;
  padding: 20px;

  background: #3BBA4D; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#3BBA4D, #1C5C3D); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#3BBA4D, #1C5C3D); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#3BBA4D, #1C5C3D); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#3BBA4D, #1C5C3D); /* Standard syntax */
}

md-content {
  color: white;
  background-color: #222222;
  height: 100%;
  padding: 20px;
}

Add background and font styling

Add background and font styling


#top{
	background:data-url(/images/structure/top_back.png) repeat-x top left;
	height:45px;
	position:fixed;
	top:0px;
	right:0px;
	left:0px;
}

#toplinks {
	float:right;
	margin:5px 5px 0 0;
	color:rgba(255,255,255,0.7);
	margin-top:10px;
	font-size:0.9em;
}

#toplinks a{
	color:white;
}

#top #logo{
	float: left;
	margin:5px 20px 0px 5px;
	color: rgba(255,255,255,0.8);
	font-size:1.6em;
	font-weight:700;
}

#logo a{
	background: data-url(/images/logo/white_30.png) no-repeat center left;
	padding-left: 38px;
	text-decoration:none;
	color: rgba(255,255,255,0.5);
}

#logo a img{
	border:0;
	vertical-align: top;
	margin-right:10px;
}

#top .room_name{
	font-size: 1.3em;
}

#top{
	background:data-url(/images/structure/top_back.png) repeat-x top left;
	height:45px;
	position:fixed;
	top:0px;
	right:0px;
	left:0px;
	z-index:1;
}

#toplinks {
	float:right;
	margin:5px 5px 0 0;
	color:rgba(255,255,255,0.7);
	margin-top:10px;
	font-size:0.9em;
}

#toplinks a{
	color:white;
}

#top #logo{
	float: left;
	margin:5px 20px 0px 5px;
	color: rgba(255,255,255,0.8);
	font-size:1.6em;
	font-weight:700;
}

#logo a{
	background: data-url(/images/logo/white_30.png) no-repeat center left;
	padding-left: 38px;
	text-decoration:none;
	color: rgba(255,255,255,0.5);
}

#logo a img{
	border:0;
	vertical-align: top;
	margin-right:10px;
}

#top .room_name{
	font-size: 1.3em;
}

Make Header have a z-index above the rest of the doc.


.overflow {
    word-wrap: break-word;
    max-width: 100%;
}

span.edit-profile-settings {
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
}

div.profile-fullname{
    display: block;
    position: relative;
    bottom: 0;
}

span#profileFullname{
    position: absolute;
    bottom: 0;
    margin-bottom: 20px;
}

.pointer {cursor: pointer;}

table.table.table-plain th, table.table.table-plain td {
  text-align: left;
  border-top: 0px solid #ddd;
}

.page-header {
    overflow: hidden;
}

/* Profile gravatar
-------------------------------------------------- */
.profile-gravatar{
    width:70px;
    height:70px;
}
.component-overflow {
    word-wrap: break-word;
    max-width: 90%;
    display: inline-block;
}

Fix long name pushing plus button down

Fix long name pushing plus button down


/* page layout */

.container {
  max-width: 600px;
}

/* results */

.checklist {
  list-style: none;
  padding: 0;
}

.checklist li {
  margin: 10px 15px;
}

.icon-column {
  margin-right: 15px;
}

Set the container's max-width to 600px

Set the container's max-width to 600px


html, body {
    height: 100%;
    margin: 0;
}

.container {
    max-width: 700px;
    margin: 0 auto;
    padding: 50px 30px 50px 30px;
    position: relative;
}

.form, #newsBox {
    margin-top: 30px;
}

/* semantic ui overrides */
.ui.toggle.checkbox label::before {
    background: #E0E1E2 !important;
}
.ui.toggle.checkbox label:hover::before {
  background-color: #CACBCD !important;
}

#unknownNameErrorBox, #noImagesFoundWarningBox, #downloadingInfoBox, #processingInfoBox {
    display: none;
}

html, body {
    height: 100%;
    margin: 0;
}

.container {
    max-width: 700px;
    margin: 0 auto;
    padding: 50px 30px 50px 30px;
    position: relative;
}

.form, #newsBox {
    margin-top: 30px;
}

#subredditOrUserButtons {
    margin-bottom: 10px;
}

#downloadButton {
    margin-top: 40px;
}

/* semantic ui overrides */
.ui.toggle.checkbox label::before {
    background: #E0E1E2 !important;
}
.ui.toggle.checkbox label:hover::before {
  background-color: #CACBCD !important;
}

#unknownNameErrorBox, #noImagesFoundWarningBox, #downloadingInfoBox, #processingInfoBox {
    display: none;
}

Adjust margins for download button and subreddit/user buttons


.Floor {
    background: #44f;
}

.Wall {
    background: #006;
    box-shadow: inset 0 0 24px #003;
}

.FloorCorruption {
    background: #4a4;
}

.WallCorruption {
    background: #030;
}

.StairUp {
    background: #44f;
}

.StairUp:after {
    content: '<';
}

.StairDown {
    background: #44f;
}

.StairDown:after {
    content: '>';
}

.Floor {
    background: #44f;
}

.Wall {
    background: #006;
    box-shadow: inset 0 0 24px #003;
}

.FloorCorruption {
    background: #4a4;
}

.WallCorruption {
    background: #050;
    box-shadow: inset 0 0 24px #030;
}

.StairUp {
    background: #44f;
}

.StairUp:after {
    content: '<';
}

.StairDown {
    background: #44f;
}

.StairDown:after {
    content: '>';
}

Add similar shading to walls.

Add similar shading to walls.


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

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

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

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

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

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

Fix second from top in technical

Fix second from top in technical


body {
    padding-top: 54px;
}

.navbar {
    background: #2196F3;
}

.sidebar, .content {
    padding: 1.5rem;
}
    .sidebar {
        border-right: 1px solid #B6B6B6;
        bottom: 0px;
        left: 0px;
        position: fixed;
        top: 54px;
    }

.controls {
    margin-bottom: 1rem;
    text-align: right;
}
    .controls .material-icons {
        font-size: 16px;
        vertical-align: middle;
    }
    .controls .c-select {
        margin: 0 .5rem;
    }
    .controls .form-group {
        margin: 0 .5rem;
    }
    .controls .spinner-loader {
        float: left;
    }

.title {
    font-size: 1.5rem;
}

body {
    padding-top: 54px;
}

.navbar {
    background: #2196F3;
}

.sidebar, .content {
    padding: 1.5rem;
}
    .sidebar {
        border-right: 1px solid #B6B6B6;
        bottom: 0px;
        left: 0px;
        position: fixed;
        top: 54px;
    }

.controls {
    margin-bottom: 1rem;
    text-align: right;
}
    .material-icons {
        font-size: 16px;
        vertical-align: middle;
    }
    .controls .c-select {
        margin: 0 .5rem;
    }
    .controls .form-group {
        margin: 0 .5rem;
    }
    .controls .spinner-loader {
        float: left;
    }

.title {
    font-size: 1.5rem;
}

Update material icon font size

Update material icon font size


@import "../../css/colors.css";
@import "../../css/units.css";
@import "../../css/typography.css";

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background-color: hsla(215, 100%, 65%, .9);
}

.modal-content {
    margin: 100px auto;
    outline: none;
    border: .25rem solid hsla(0, 100%, 100%, .25);
    padding: 0;
    border-radius: $space;
    user-select: none;
    width: 500px;
    height: 450px;
    color: $text-primary;
    overflow: hidden;
}

.body {
    background: $ui-pane-gray;
}

@import "../../css/colors.css";
@import "../../css/units.css";
@import "../../css/typography.css";

$content-width: 500px;
$content-height: 450px;

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background-color: hsla(215, 100%, 65%, .9);
}

.modal-content {
    margin: 100px auto;
    outline: none;
    border: .25rem solid hsla(0, 100%, 100%, .25);
    padding: 0;
    border-radius: $space;
    user-select: none;
    width: $content-width;
    color: $text-primary;
    overflow: hidden;
}

.body {
    /* Need to repeat dimensions here to allow iframe scrolling for iOS */
    width: $content-width;
    height: $content-height;
    background: $ui-pane-gray;

    /* These properties needed to allow iframe scrolling for iOS */
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

Fix feedback iframe scrolling for iOS.

Fix feedback iframe scrolling for iOS.

This is a long standing issue with how iOS deals with scrollable
elements within a fixed area. This was a helpful resource
https://davidwalsh.name/scroll-iframes-ios


html {
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;

	-webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;

	color: #fff;
	overflow: hidden;
    position: relative;
}

canvas {
    display: block;
    background-image: url(../img/background.png);
    background-size: contain;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.title {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.title > span {
    color: white;
    font-size: 120px;
    font-weight: 700;
    letter-spacing: 10px;
    font-family: Orbitron, sans-serif;
}

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

html {
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;

	-webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;

	color: #fff;
	overflow: hidden;
    position: relative;
}

canvas {
    display: block;
    background-image: url(../img/background.png);
    background-size: contain;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.title {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.title > span {
    color: white;
    font-size: 120px;
    font-weight: 700;
    letter-spacing: 10px;
    font-family: Orbitron, sans-serif;
}

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

Make sure clicks actually get through to canvas.


body {
    font-family:Arial, Helvetica, sans-serif;
}

/********************************************
*
* Header
*
* *******************************************/
header {
    height:50px;
    line-height: 50px;
    box-shadow: inset 0 -1px 0 0 rgba(100,121,143,0.122);
}
.row {
    display: flex;
    justify-content: space-between;
}
.col {
    flex: 50%;
}
.brand {
    margin-left:20px;
}
#savebutton {
    background:#fff;
    border:0;
    cursor: pointer;
    color:rgb(68, 68, 68);
    font-size:20px;
}
#amp_status {
    float:right;
    padding:0 10px;
}
.pass {
    background:green;
    color:#fff;
}
.fail {
    background:red;
    color:#fff;
}

/********************************************
*
* Editor/Preview
*
* *******************************************/
.CodeMirror, #editor, #preview {
    width:50%;
    float:left;
    height:calc(100vh - 50px);
}
.CodeMirror, #preview {
    box-sizing: border-box;
}
#preview {
    border:none;
}

body {
    font-family:Arial, Helvetica, sans-serif;
}

/********************************************
*
* Header
*
* *******************************************/
header {
    height:50px;
    line-height: 50px;
    box-shadow: inset 0 -1px 0 0 rgba(100,121,143,0.122);
}
.row {
    display: flex;
    justify-content: space-between;
}
.col {
    flex: 50%;
}
.brand {
    margin-left:20px;
}
#savebutton {
    background:#fff;
    border:0;
    cursor: pointer;
    color:rgb(68, 68, 68);
    font-size:20px;
}
#savebutton:focus {
    outline:none;
}
#amp_status {
    float:right;
    padding:0 10px;
}
.pass {
    background:green;
    color:#fff;
}
.fail {
    background:red;
    color:#fff;
}

/********************************************
*
* Editor/Preview
*
* *******************************************/
.CodeMirror, #editor, #preview {
    width:50%;
    float:left;
    height:calc(100vh - 50px);
}
.CodeMirror, #preview {
    box-sizing: border-box;
}
#preview {
    border:none;
}

Remove outline on save icon

Remove outline on save icon


.member.leader.co_leader {
  display: block;
  text-align: center;
  margin: auto;
}

.member.leader img {
  border-color: #cca84c;
}

.member.co_leader img {
  border-color: #cd7f32;
}

.member {
  margin: 15px 10px;
  flex: 1;
  min-width: 120px;
  font-style: italic;
  line-height: 20px;
  flex-grow: 0;
  max-width: 100px;
}

.member img {
  width: 90px;
  display: block;
  border-radius: 50%;
  border: 4px solid #b8b8b8;
  margin: auto;
}

.testing.leader {
  max-width: 140px;
}

.title {
  font-size: 12px;
  font-style: normal;
  margin: 5px -3px 0;
  display: flex;
  justify-content: center;
}

.name {
  margin-top: 5px;
  display: flex;
  justify-content: center;
  text-align: center;
}

.member.leader.co_leader {
  display: block;
  text-align: center;
  margin: auto;
}

.member.leader img {
  border-color: #cca84c;
}

.member.co_leader img {
  border: 4px solid #b8b8b8;
}

.member {
  margin: 15px 10px;
  flex: 1;
  min-width: 120px;
  font-style: italic;
  line-height: 20px;
  flex-grow: 0;
  max-width: 100px;
}

.member img {
  width: 90px;
  display: block;
  border-radius: 50%;
  border: 4px solid #b8b8b8;
  margin: auto;
}

.testing.leader {
  max-width: 140px;
}

.title {
  font-size: 12px;
  font-style: normal;
  margin: 5px -3px 0;
  display: flex;
  justify-content: center;
}

.name {
  margin-top: 5px;
  display: flex;
  justify-content: center;
  text-align: center;
}

Change color of border for co-leader

Change color of border for co-leader


.upload-border {
    vertical-align: middle;
    color: #555;
    padding: 20px;
    display: inline-block;
    text-align: center;
    overflow-y: hidden;
}

.input-focus {
    color: #2196F3;
    border: 3px dashed #2196F3;
}

.upload-border {
    vertical-align: middle;
    color: #555;
    padding: 20px;
    text-align: center;
    overflow-y: hidden;
}

.input-focus {
    color: #2196F3;
    border: 3px dashed #2196F3;
}

Fix uploader drag area width for Firefox


html,
.account-masthead,
.masthead .navigation .nav-pills li a:hover,
.masthead .navigation .nav-pills li.active a,
.hero .tags {
    background-color: #0E2B56;
}

.masthead,
.hero .module-dark .module-content,
.site-footer {
    background-color: #1F52A3;
}

.additional-info {
  padding: 0 25px;
  margin: 20px 0;
}

.additional-info table td{
  border-top: none;
}

.control-label {
  word-wrap: normal;
}

.page-heading {
  word-wrap: break-word;
}

Break long resource names on resource page.


/* TODO: Add @stencila/components as a dependency and import from there */
@import 'https://unpkg.com/@stencila/components@0.2.0/dist/stencila-components-styles.css';
@import 'normalize.css';
@import 'prismjs/plugins/line-highlight/prism-line-highlight.css';
@import 'prismjs/plugins/line-numbers/prism-line-numbers.css';

@import './citations.css';

:--CodeChunk {
  pre,
  pre[class*='language-'] {
    background-color: transparent;
    height: 100%;
  }
}

html {
  font-size: 16px;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

@media screen and (max-width: 380px) {
  figure {
    max-height: 90vh;
  }
}

/* TODO: Add @stencila/components as a dependency and import from there */
@import 'https://unpkg.com/@stencila/components@0.2.0/dist/stencila-components-styles.css';
@import 'normalize.css';
@import 'prismjs/plugins/line-highlight/prism-line-highlight.css';
@import 'prismjs/plugins/line-numbers/prism-line-numbers.css';

@import './citations.css';

:--CodeChunk {
  pre,
  pre[class*='language-'] {
    background-color: transparent;
  }
}

html {
  font-size: 16px;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

@media screen and (max-width: 380px) {
  figure {
    max-height: 90vh;
  }
}

fix(Pre): Fix Safari bug with rendering Pre elements inside iFrames


/* ACCESSIBILITY */

/**
 * https://github.com/barcia/standarize/issues/7
 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none;
    transition: none;
  }
}

/* ACCESSIBILITY */

/**
 * https://github.com/barcia/standarize/issues/7
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Update styles for prefers-reduced-motion: reduce media

Close #24


@custom-media --sm-viewport (min-width:320px) and (max-width:640px);
@custom-media --md-viewport (min-width:640px) and (max-width:960px);
@custom-media --lg-viewport (min-width:960px);

@import "suitcss-components-test";
@import "./index.css";

@import "suitcss-components-test";
@import "./index.css";
@custom-media --sm-viewport (min-width:320px) and (max-width:640px);
@custom-media --md-viewport (min-width:640px) and (max-width:960px);
@custom-media --lg-viewport (min-width:960px);

Move imports above custom media

Move imports above custom media

* postcss-import requires this


html, body, .container {
  width: 100%;
  height: 100%;
}

.container {
  background: #ecf0f1;
  position: relative;
}

#logo_wrapper {
  width: 256px;
  height: 128px;
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate3d(-50%, -50%, 0);
}

#logo {
  width: 256px;
  height: 128px;
  position: absolute;
  transform-style: preserve-3d;
}

#logo_grey, #logo_white {
  position: absolute;
}

#logo_grey {
  background: url('../img/logo-main-grey.png') no-repeat;
  width: 256px;
  height: 128px;
  transform: scale(0.99);
}

#logo_white {
  background: url('../img/logo-main-white.png') no-repeat;
  width: 256px;
  height: 128px;
  transform: translateZ(10px);
}

html, body, .container {
  width: 100%;
  height: 100%;
}

.container {
  background: #ecf0f1;
  position: relative;
}

#logo_wrapper {
  width: 256px;
  height: 128px;
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate3d(-50%, -50%, 0);
}

#logo {
  width: 256px;
  height: 128px;
  position: absolute;
  transform-style: preserve-3d;
}

#logo_grey, #logo_white {
  position: absolute;
}

#logo_grey {
  background: url('../img/logo-main-grey.png') no-repeat;
  width: 256px;
  height: 128px;
  background-size: 256px 128px;
  transform: scale(0.99);
}

#logo_white {
  background: url('../img/logo-main-white.png') no-repeat;
  width: 256px;
  height: 128px;
  background-size: 256px 128px;
  transform: translateZ(10px);
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  #logo_grey {
    background-image: url('../img/logo-main-grey@2x.png');
  }

  #logo_white {
    background-image: url('../img/logo-main-white@2x.png');
  }
}

Make background-image work on Retina.

Make background-image work on Retina.


#masthead {
    background-size: cover;
}

#publications-list .icon {
    font-size: 3em;
}

#latest-experiments .media-object-section:first-child {
    padding-right: 0;
}

a.clear {
    border: none;
}

ul.clear {
    list-style: none;
    margin-left: unset;
}

.button.no-action {
    cursor: default;
}

.button.fixed-width-medium {
    width: 100px;
}

hr {
    border-bottom: 1px solid lightgrey;
}

#masthead {
    background-size: cover;
}

#publications-list .icon {
    font-size: 3em;
}

#latest-experiments .media-object-section:first-child {
    padding-right: 0;
}

a.clear {
    border: none;
}

ul.clear {
    list-style: none;
    margin-left: unset;
}

.button.no-action {
    cursor: default;
}

.button.fixed-width-medium {
    width: 120px;
}

hr {
    border-bottom: 1px solid lightgrey;
}

Fix width of assay grey box

Fix width of assay grey box