h2 {
  font-size: 2rem;
  margin-bottom: 1.25rem;
  margin-top: 1.25rem;
  scroll-margin-top: 0.5rem;

  padding-bottom: 0.3rem;
  border-bottom: 1px solid hsla(210,18%,87%,1);
}

h3 {
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  margin-top: 1.25rem;
  scroll-margin-top: 0.5rem;
}

h4 {
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
  scroll-margin-top: 0.5rem;
}

.sidebar-tree p.indented-block {
  padding: var(--sidebar-item-spacing-vertical) var(--sidebar-item-spacing-horizontal) 0 var(--sidebar-item-spacing-horizontal);
  margin-bottom: 0;
}

.sidebar-tree p.indented-block span.indent {
  margin-left: var(--sidebar-item-spacing-horizontal);
  display: block;
}

.sidebar-tree p.indented-block > :not(.project-name) {
  font-size: var(--toc-font-size);
}

.sidebar-tree p.indented-block .project-name {
  font-size: var(--sidebar-item-font-size);
  font-weight: bold;
  margin-right: calc(var(--sidebar-item-spacing-horizontal) / 2.5);
}

h2 {
  font-size: 2rem;
  margin-bottom: 1.25rem;
  margin-top: 1.25rem;
  scroll-margin-top: 0.5rem;
}

h3 {
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  margin-top: 1.25rem;
  scroll-margin-top: 0.5rem;
}

h4 {
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
  scroll-margin-top: 0.5rem;
}

.sidebar-tree p.indented-block {
  padding: var(--sidebar-item-spacing-vertical) var(--sidebar-item-spacing-horizontal) 0 var(--sidebar-item-spacing-horizontal);
  margin-bottom: 0;
}

.sidebar-tree p.indented-block span.indent {
  margin-left: var(--sidebar-item-spacing-horizontal);
  display: block;
}

.sidebar-tree p.indented-block > :not(.project-name) {
  font-size: var(--toc-font-size);
}

.sidebar-tree p.indented-block .project-name {
  font-size: var(--sidebar-item-font-size);
  font-weight: bold;
  margin-right: calc(var(--sidebar-item-spacing-horizontal) / 2.5);
}

Remove border line under headers

docs(style): Remove border line under headers


body {
    font-family: Arial;
    background-color:#dadada;
}

#drop {
    width:200px;
    height:100px;
    background-color:#aaaaaa;
    border-radius:10px;
    padding:10px;
}

Add missing styles to example

Add missing styles to example


html {
	background-color: honeydew;
	padding-left: 12px;
}

body {
	font-family: Arial;
	font-size: 15px;
}

header	{
	font-family: Papyrus, fantasy;
	font-size: 30px;
	padding-left: 10px;
	margin-top: -25px;
	margin-bottom: -40px;
	border: 1px blue;
}

section {
	display: block;
	border: 1px solid black;
}

h2	{
	font-family: Copperplate, fantasy;
	font-size: 25px;
}

fieldset {
	background-image: url(http://sr.photos2.fotosearch.com/bthumb/CSP/CSP990/k11061406.jpg);
}

footer {
	display: block;
	border: 1px solid pink;
	margin: auto;
	border-top: dashed thick green;
	text-align: center;
	/*MAKE THIS CENTERED*/
}

.unordered {
	list-style-type: circle;
}

#table_name {
	text-decoration: underline;
	width: 20px;
}

a:visited {
	color: lightseagreen;
}

html {
	background-color: honeydew;
	padding-left: 12px;
}

body {
	font-family: Arial;
	font-size: 15px;
}

header	{
	font-family: Papyrus, fantasy;
	font-size: 30px;
	padding-left: 10px;
	margin-top: -25px;
	margin-bottom: -40px;
}

section {
	display: block;
	border-top: solid gray 1px;
}

h2	{
	font-family: Copperplate, fantasy;
	font-size: 25px;
}

fieldset {
	background-image: url(http://sr.photos2.fotosearch.com/bthumb/CSP/CSP990/k11061406.jpg);
}

footer {
	display: block;
	margin: auto;
	border-top: dashed thick green;
	text-align: center;
}

.unordered {
	list-style-type: circle;
}

#table_name {
	text-decoration: underline;
	width: 20px;
}

a:visited {
	color: lightseagreen;
}

img {
	width: 100%;
}

table {
	margin-bottom: 15px;
}

Remove preview borders around all elements, add separating line between all sections, add margin to table


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

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

Fix css to signal that the componant can be removed from the DOM, removes warning


.explorer {
    margin-left: -15px;
    background-color: #fafafa;
    height: 100%;
}

.explorer {
    margin-left: -15px;
    background-color: #f8f8f8;
    height: 100%;
}

Update backgroud color to match navbar

Update backgroud color to match navbar


html, body {
  margin: 20px;
}

.well p {
    color: #555555;
}

Make p visible in .well

Make p visible in .well


/* Back to top button style*/

.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display:none;
}

/* Thumbnail with caption */

.thumbnail.with-caption {
    display: inline-block;
    background: #f5f5f5;
}

.thumbnail.with-caption p {
    margin: 0;
    padding-top: 0.5em;
}

/* SkCode TO.DO list */

.task_done {
    text-decoration: line-through;
    list-style-type: none;
}

.task_done p:before {
    font-family: FontAwesome;
    content:'\f046';
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
}

.task_pending {
    list-style-type: none;
}

.task_pending p:before {
    font-family: FontAwesome;
    content:'\f096';
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
}

Add CSS for todo list

Add CSS for todo list


@font-face {
    font-family: 'Sorts Mill Goudy';
    src: url('../../fonts/goudystm.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Sorts Mill Goudy';
    src: url('../../fonts/goudystm-italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

header {
    background: #fff;
    border-top: 16px solid #ff7300;
    margin-bottom: 8px;
}

#public-nav-main {
    margin: 0;
    min-height: 0;
}

#public-nav-main .navbar-brand,
#public-nav-main .nav {
    display: none;
}

#public-nav-main .navbar-toggle {
    margin: -80px 0 0 0;
}

#search-form-header {
    margin-top: 12px;
}

#search-bar-nav {
    margin-top: 0;
    padding-top: 0;
}

#content {
    min-height: calc(100vh - 190px);
}

@font-face {
    font-family: 'Sorts Mill Goudy';
    src: url('../../fonts/goudystm.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Sorts Mill Goudy';
    src: url('../../fonts/goudystm-italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

header {
    background: #fff;
    border-top: 16px solid #ff7300;
    margin-bottom: 8px;
}

#public-nav-main {
    margin: 0;
    min-height: 0;
}

#public-nav-main .navbar-brand,
#public-nav-main .nav {
    display: none;
}

#public-nav-main .navbar-toggle {
    margin: -80px 0 0 0;
}

#search-form-header {
    margin-top: 12px;
}

#search-bar-nav {
    margin-top: 0;
    padding-top: 0;
}

#content {
    min-height: calc(100vh - 221px);
}

Fix height of CAC theme pages.

Fix height of CAC theme pages.


/* dna.js Template Cloner ~~ dnajs.org/license.html */
.dna-template, .dna-panels >* {
   display: none;
   }
.dna-menu >* {
   cursor: pointer;
   }

/* dna.js Template Cloner ~~ dnajs.org/license.html */
.dna-template, .dna-panels >* {
   display: none;
   }
[data-click], .dna-menu >* {
   cursor: pointer;
   }

Set cursor for data-click attribute

Set cursor for data-click attribute


#version-warning-banner {
  margin: 10px 0;
  padding: 5px 10px;
  border-radius: 4px;

  letter-spacing: 1px;
  color: #fff;
  text-shadow: 0 0 2px #000;
  text-align: center;
  font-size: 0.9em;

  background: #004b6b repeating-linear-gradient(
    135deg,
    transparent,
    transparent 56px,
    rgba(255, 255, 255, 0.2) 56px,
    rgba(255, 255, 255, 0.2) 112px
  );
}

#version-warning-banner .admonition-title {
  font-size: inherit;
  font-weight: bold;
}

#version-warning-banner a {
  color: #fff;
  border-color: #fff;
}

#version-warning-banner p {
  display: inline;
}

div.warning {
  border: 0;
}

#version-warning-banner {
  margin: 10px 0;
  padding: 10px;
  border-radius: 4px;

  letter-spacing: 1px;
  color: #fff;
  text-shadow: 0 0 2px #000;
  text-align: center;
  font-size: 0.9em;

  background: #004b6b repeating-linear-gradient(
    135deg,
    transparent,
    transparent 20px,
    rgba(255, 255, 255, 0.1) 20px,
    rgba(255, 255, 255, 0.1) 40px
  );
}

#version-warning-banner .admonition-title {
  font-size: inherit;
  font-weight: bold;
}

#version-warning-banner a {
  color: #fff;
  border-color: #fff;
}

#version-warning-banner p {
  display: inline;
}

div.warning {
  border: 0;
}

Improve padding and background gradient color for better legibility

h/t @deckar01


nav, .navbar-brand {
    font-size: 22px;
}

nav a {
    color: #333;
    text-decoration: none;
}

nav .dropdown-toggle {
    padding: 14.5px
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    outline: 2px solid #85bffd;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    outline: 2px solid #85bffd;
}

Add missing legacy CSS file

Add missing legacy CSS file


body {
    width: 600px;
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 50px;
    background-color: white;
    line-height: 1.5;
    font-size: 100%;
}

h1{
    font-size: 180%;
    font-weight: bold;
    text-indent: 0px;
}

h2{
    font-size: 140%;
    color: CornflowerBlue;
    font-weight: bold;
    text-indent: 0px;
    line-height: 0;
}

h3{
    font-size: 120%;
    font-weight: bold;
    line-height: -10;
}

.top-buffer{
    margin-top: 0px;
}

.zero-top-buffer{
    margin-top: -5px;
}

hr{
    margin-top: 0px;
    margin-bottom: 0px;
}

p{
    margin-top: 0px;
}

p.subheading{
    line-height: 0;
    font-size: 125%;
}

p.title{
    margin-top: 10px;
    margin-bottom: 0px;
    font-size: 120%;
    font-weight: bold;
    text-indent: -15px;
    line-height: 0.5;
}

p.date{
    margin-top: 10px;
    margin-bottom: 0px;
    font-weight: bold;
    font-size: 100%;
    line-height: 0.5;
}

p.proj_cn{
    margin-bottom: 0px;
    margin-top: 5px;
    font-weight: bold;
    text-indent: -15px;
    line-height: 1;
}

p.occupation{
    margin-bottom: 0px;
    margin-top: 5px;
    font-size: 95%;
    font-weight: bold;
    font-style: italic;
    text-indent: -15px;
    line-height: 1;
}

ul{
    margin: 0;
    padding: 10px;
}

ul.sub_description{
    margin: 0;
    margin-top: -10px;
    margin-bottom: -10px;
}

@media print {
    .printEl {
        width: 8.5in;
        height: 11in;
    }
    h2{
        color: CornflowerBlue;
    }
    education, project{
      page-break-inside: avoid
    }
    footer{
      page-break-after: always
    }
    a[href]:after {
        content: none !important;
    }
    a[mailto]:after {
        content: none !important;
    }
}

Add css style for Chinese version

Add css style for Chinese version


body {
  padding-top: 51px;
}
.text-center {
  padding-top: 20px;
}
.col-xs-12 {
  /*background-color: #fff;*/
}
#sidebar {
  height: 100%;
  padding-right: 0;
}
#sidebar .nav {
  width: 95%;
}
#sidebar li {
  border:0 #f2f2f2 solid;
  border-bottom-width:1px;
}

/* collapsed sidebar styles */
@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
  }
  .row-offcanvas-right
  .sidebar-offcanvas {
    right: -41.6%;
  }

  .row-offcanvas-left
  .sidebar-offcanvas {
    left: -41.6%;
  }
  .row-offcanvas-right.active {
    right: 41.6%;
  }
  .row-offcanvas-left.active {
    left: 41.6%;
  }
  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 41.6%;
  }
  #sidebar {
    padding-top:0;
  }
}

input[type="text"][readonly] {
   background-color: white;
}

.closebox {
  position: absolute;
  right: 24px;
}

Fix X button position on boxes for admins


body {
    background: #FBFBFB;
    color: #333;
    font-family: Verdana, sans-serif;
}

#container {
	margin: auto;
	width: 7.5in;
	padding: .5in;
}

#contact {
    float: right;
    text-align: right;
    /*margin-top: -5px;*/
}

#contact p {
    margin: .5em;
}

/** {
	clear: both;
}*/
a {
	text-decoration: none;
	color: #333;
}

a:hover {
	text-decoration: underline;
}

h1 {
    margin-top: 0;
}

h2 {
	margin-top: 0;
}

li {
	margin-top: 0em;
}

ul li ul li {
    margin: .5em;
}

body {
    background: #FBFBFB;
    color: #333;
    font-family: Verdana, sans-serif;
}

#container {
	margin: auto;
	width: 7.5in;
	padding: .5in;
}

#contact {
    float: right;
    text-align: right;
    /*margin-top: -5px;*/
}

#contact p {
    margin: .5em;
}

/** {
	clear: both;
}*/
a {
	text-decoration: none;
	color: #333;
}

a:hover {
	text-decoration: underline;
}

h1 {
    margin-top: 0;
}

h2 {
	margin-top: 0;
}

ul {
    list-style-type: none;
}

ul li ul {
    list-style-type: disc;
    margin-bottom: 2em;
}

li {
	margin-top: 0em;
}

ul li ul li {
    margin: .5em;
}

Hide top level bullet points

Hide top level bullet points

And make second-level bullets solid.


/* Site nav (including tag buttons) */

#main-nav {
  left: 0;
  top: 0;
  right: 0;
  z-index: 99;
  opacity: 0.8;
  position: fixed;

  padding: 1rem 10% 1rem 10%;

  background-color: {{ .Get "alt_bg" }};
}

#main-nav .button {
  margin: 0;
}

  /* Site nav dropdown boxes align left */
#main-nav .is-dropdown-submenu .button {
  text-align: left;
}

#main-nav, #main-nav a {
  color: {{ .Get "color_textDefault" }};
}

#main-nav .button:hover a, #main-nav a:hover,
#main-nav .button.active a, #main-nav a.active {
  color: {{ .Get "textHeader" }};
}

#main-nav .is-dropdown-submenu {
   border-color: {{ .Get "accent" }};
}

#menu-toggle {
  padding-left: 10px;
  background-color: {{ .Get "alt_bg" }};
  color: {{ .Get "textAlt" }}
}

.nav-arrow {
  float: right;
}

/* Site nav (including tag buttons) */

#main-nav {
  left: 0;
  top: 0;
  right: 0;
  z-index: 99;
  opacity: 0.8;
  position: fixed;

  padding: 1rem 10% 1rem 10%;

  background-color: {{ .Get "alt_bg" }};
}

#main-nav .button {
  margin: 0;
}

  /* Site nav dropdown boxes align left */
#main-nav .is-dropdown-submenu .button {
  text-align: left;
}

#main-nav, #main-nav a {
  color: {{ .Get "textAlt" }};
}

#main-nav .button:hover a, #main-nav a:hover,
#main-nav .button.active a, #main-nav a.active {
  color: {{ .Get "textHeader" }};
}

#main-nav .is-dropdown-submenu {
   border-color: {{ .Get "accent" }};
}

#menu-toggle {
  padding-left: 10px;
  background-color: {{ .Get "alt_bg" }};
  color: {{ .Get "textAlt" }}
}

.nav-arrow {
  float: right;
}

Change default colour of main menu

Change default colour of main menu


/* This file is included into run_prettify.js file to make dark theme for the code preview */
pre code { font-weight: 500; }
pre.prettyprint { background-color: white; }
pre .nocode { background-color: none; color: #000 }
pre .str { color: #6a8759; } /* string */
pre .kwd { color: #cc7832; } /* keywords */
pre .com { color: #808080; font-weight: 400; } /* comment */
pre .typ { color: #a9b7c6; } /* type */
pre .lit { color: #bbb529; } /* literal */
pre .pun { color: #a9b7c6; } /* punctuation */
pre .pln { color: #a9b7c6; } /* plaintext */
pre .tag { color: #cc7832; } /* html/xml tag */
pre .atn { color: #6a8759; } /* attribute name */
pre .atv { color: #6a8759; } /* attribute value */
pre .dec { color: #6897bb; } /* decimal */

/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { }

@media print {
    pre.prettyprint { background-color: none }
    pre .str, code .str { color: #060 }
    pre .kwd, code .kwd { color: #006; font-weight: bold }
    pre .com, code .com { color: #808080; font-style: italic }
    pre .typ, code .typ { color: #404; font-weight: bold }
    pre .lit, code .lit { color: #044 }
    pre .pun, code .pun { color: #440 }
    pre .pln, code .pln { color: #000 }
    pre .tag, code .tag { color: #006; font-weight: bold }
    pre .atn, code .atn { color: #404 }
    pre .atv, code .atv { color: #060 }
}

Add a file with light theme

Add a file with light theme


@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 first for postcss-import

Move imports first for postcss-import


.editor-options { text-align: right }
.editor-options button { margin-left: 20px }
.title-buttons { margin-left: 20px }
.period-title { margin-bottom: 0 }

.editor-options { text-align: right }
.editor-options button { margin-left: 20px }
.title-buttons { margin-left: 20px }
.title-buttons a { margin-right: 10px; }
.period-title { margin-bottom: 0 }

Add margin-right to title buttons for spacing


.rotateCounterClock {
    -webkit-transform-origin: center bottom;
    -webkit-transform: rotate(-90deg) translateY(13%) translateX(5%);
    width: 424px;
}

.rotateCounterClock.up {
    -webkit-transform: rotate(90deg) translateY(85%) translateX(-5%);
}

.rotateCounterClock.down {
    -webkit-transform: rotate(-90deg) translateY(13%) translateX(5%);
}

.rotateCounterClock {
    -webkit-transform-origin: center bottom;
    -webkit-transform: rotate(-90deg) translateY(13%) translateX(5%);
    width: 424px;
}

.rotateCounterClock.up {
    -webkit-transform: rotate(90deg) translateY(85%) translateX(-5%);
}

.rotateCounterClock.down {
    -webkit-transform: rotate(-90deg) translateY(15%) translateX(5%);
}

Fix down rig orientation class

Fix down rig orientation class


.enrichment {
  overflow: hidden;
}

.enrichment-sources-popover {
  width: 100px;
  height: 66vh;
  max-height: 600px;
  overflow-y: scroll;
  text-align: center;
  padding: 0.5em 0.25em;
}

.enrichment-popover-link {
  cursor: pointer;
}

@media( --small-width-viewport ){
  .enrichment-sources-popover {
    font-size: 0.8em;
    height: 300px;
  }
}

.enrichment {
  overflow: hidden;
}

.enrichment-sources-popover {
  width: 100px;
  max-height: 66vh;
  overflow-y: scroll;
  text-align: left;
  padding: 0.5em 0.25em;
}

.enrichment-popover-link {
  cursor: pointer;
}

@media( --small-width-viewport ){
  .enrichment-sources-popover {
    font-size: 0.8em;
  }
}

Fix 'and more genes' popup

Fix 'and more genes' popup


body {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  color: #212121;
  cursor: default;
  font-family: Helvetica, Arial, sans-serif;
  margin: 0;
  overflow: hidden;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.sidebar {
  border-right: 1px solid #e0e0e0;
  height: 100%;
  position: fixed;
  width: 279px;
}

.sidebar.disabled {
  pointer-events: none;
}

.content {
  box-sizing: border-box;
  height: 100%;
  padding-left: 280px;
  pointer-events: none;
  position: fixed;
  -webkit-transition: padding-left 0.3s ease-in-out;
  transition: padding-left 0.3s ease-in-out;
  width: 100%;
}

.content.full-width {
  padding-left: 0;
}

.content > * {
  pointer-events: auto;
}

body {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  color: #212121;
  cursor: default;
  font-family: Helvetica, Arial, sans-serif;
  margin: 0;
  overflow: hidden;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.sidebar {
  border-right: 1px solid #e0e0e0;
  height: 100%;
  position: fixed;
  -webkit-transition: opacity 0.1s ease-in-out;
  transition: opacity 0.1s ease-in-out;
  width: 279px;
}

.sidebar.disabled {
  opacity: 0.6;
  pointer-events: none;
}

.content {
  box-sizing: border-box;
  height: 100%;
  padding-left: 280px;
  pointer-events: none;
  position: fixed;
  -webkit-transition: padding-left 0.3s ease-in-out;
  transition: padding-left 0.3s ease-in-out;
  width: 100%;
}

.content.full-width {
  padding-left: 0;
}

.content > * {
  pointer-events: auto;
}

Add effect for disabling sidebar

Add effect for disabling sidebar


.input {
  width:100%;
  display: block;
}

.error-container {
  color: red;
}

.output-container, .error-container {
  display: none;
}

body,html {
  height:100%;
}

body > div.container {
  min-height:100%;
}

footer {
  height:40px;
  margin-top: -40px;
}

.input {
  width:100%;
  display: block;
}

.error-container {
  color: red;
}

.output-container, .error-container {
  display: none;
}

body,html {
  height:100%;
}

body > div.container {
  min-height:100%;
  padding-bottom: 40px; /* Space for footer */
  box-sizing: border-box; /* Makes the padding not to overflow the window size when everything should fit nicely */
}

footer {
  margin-top: -40px;
}

Make footer positioning work better

Make footer positioning work better


.EmployeeList_List { width:100% }
.EmployeeList_ListItem { text-align: left; }
.EmployeeList_ListItemWrapper { display:table-row }
.EmployeeList_ListItem.NonPublished { /* opacity:0.33; */ background-color:#fcc; }
.EmployeeList_EditLink { margin-right:4px }
.EmployeeList_DetailsLink { display:table-cell; }
.EmployeeList_Photo { margin-right:8px; }
.EmployeeList_Info { display:table-cell;vertical-align:top;padding-bottom:8px }
.EmployeeList_FullName { font-style:italic; }
.EmployeeList_Positions { display:block; margin-top:8px }
.EmployeeList_Phones { display:block; margin-top:8px }
.EmployeeList_Email, .EmployeeList_WebSite, .EmployeeList_UserProfile
{
	display:inline-block;
	margin-top:8px;
	margin-right:8px
}

.EmployeeList_List { width:100% }
.EmployeeList_ListItem { text-align: left; }
.EmployeeList_ListItemWrapper { display:table-row }
.EmployeeList_ListItem.NonPublished { /* opacity:0.33; */ background-color:#ffc; }
.EmployeeList_EditLink { margin-right:4px }
.EmployeeList_DetailsLink { display:table-cell; }
.EmployeeList_Photo { margin-right:8px; }
.EmployeeList_Info { display:table-cell;vertical-align:top;padding-bottom:8px }
.EmployeeList_FullName { font-style:italic; }
.EmployeeList_Positions { display:block; margin-top:8px }
.EmployeeList_Phones { display:block; margin-top:8px }
.EmployeeList_Email, .EmployeeList_WebSite, .EmployeeList_UserProfile
{
	display:inline-block;
	margin-top:8px;
	margin-right:8px
}

Use yellow highlight for non-published employees


/* Left for CSS overrides we need to make in the future */

/* Fix badge on RTD Theme */

.rst-other-versions {
	text-align: left;
}

.rst-other-versions a {
	border: 0;
}

.rst-other-versions dl {
	margin: 0;
}

/* Fix Mkdocs sidebar */

nav.stickynav {
	position: absolute;
}

Fix mkdocs sidebar scrolling for now.

Fix mkdocs sidebar scrolling for now.


/* Used for temporary items that should never be visible */
.offscreen {
  position: absolute;
  top: -200%;
  right: -200%;
  visibility: hidden;
}

/* Make sure seams aren't visible */
.chrome, .viewer, .grid, .column {
  overflow: hidden;
}

body.treesaver {
  font-size: 14px;
  line-height: 20px;
  overflow: hidden;
}

article {
  line-height: 20px;
}

.chrome, .viewer {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  line-height: 20px;
}

.grid {
  position: absolute;
  width: 320px;
  line-height: 20px;
}

.column {
  position: absolute;
  width: 300px;
  top: 0;
  bottom: 0;
  left: 10px;
  line-height: 20px;
}

h1 {
  margin: 0 0 20px;
  line-height: 40px;
  font-size: 36px;
}

.loading, .error {
  position: absolute;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
}

/* Used for temporary items that should never be visible */
.offscreen {
  position: absolute;
  top: -200%;
  right: -200%;
  visibility: hidden;
}

/* Make sure seams aren't visible */
.chrome, .viewer, .grid, .column {
  overflow: hidden;
}

body.treesaver {
  font-size: 14px;
  line-height: 20px;
  overflow: hidden;
}

article {
  line-height: 20px;
}

.chrome, .viewer {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  line-height: 20px;
}

.grid {
  position: absolute;
  width: 220px;
  line-height: 20px;
}

.column {
  position: absolute;
  width: 200px;
  top: 0;
  bottom: 0;
  left: 10px;
  line-height: 20px;
}

h1 {
  margin: 0 0 20px;
  line-height: 40px;
  font-size: 36px;
}

.loading, .error {
  position: absolute;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
}

Make pages/columns smaller in barebones test so they show up in smaller screens


.monospace {
    font-family: monospace;
}

.source-code {
    height: 250px;
    overflow: scroll;
    white-space: pre;   /* keep this line to support earlier browsers */
    white-space: pre-wrap;
}

.monospace {
    font-family: monospace;
    white-space: pre;   /* keep this line to support earlier browsers */
    white-space: pre-wrap;
}

.source-code {
    height: 250px;
    overflow: scroll;
}

Move output CSS into monospace class.

Move output CSS into monospace class.


/*
 * 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 other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 *= require foundation_and_overrides

 */

/*
 * 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 other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require foundation_and_overrides
 *= require_tree .
 *= require_self

 */

#content {
    margin-top: 0.5rem;
}

Add small margin to content

chore(Style): Add small margin to content


body {
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #eee;
}

.form-signin {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .form-signin-heading{
  margin-bottom: 10px;
}

.form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="text"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  width: 100%;
}
.mainTitle{
  text-align: center;
}
.list-group-item{
  padding: 5px;
  font-size: 150%;
}
.list-group{
  list-style-type: circle;
}

Add a little css to the readers and authors list, since the list component is only in Bootstrap 3


.container {
  margin: 0 auto;
  overflow: hidden;
  padding: var(--container-padding);

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

.heading {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: var(--container-padding);
  color: hsl(var(--hue-blue), 10%, 60%);
}

.heading h1 {
  flex: 1;
  margin: 0 1em 0 0;
  font-size: 32px;
  font-family: var(--font-family-custom);
  white-space: nowrap;
  color: hsl(var(--hue-blue), 10%, 80%);
}

.logo {
  margin-bottom: 1.5rem;
  text-align: center;
  font-size: 28px;
}

.container {
  margin: 0 auto;
  overflow: hidden;
  padding: var(--container-padding);

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

.heading {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: var(--container-padding);
  color: hsl(var(--hue-blue), 10%, 60%);
}

.heading h1 {
  flex: 1;
  margin: 0 1em 0 0;
  font-size: 32px;
  font-family: var(--font-family-custom);
  white-space: nowrap;
  color: hsl(var(--hue-blue), 10%, 80%);
}

.logo {
  margin: 2rem 0;
  text-align: center;
  font-size: 30px;
}

@media (min-width: 42em) {
  .logo {
    margin: 3rem 0;
    font-size: 36px;
  }
}

Improve login form spacing on desktop

Improve login form spacing on desktop


.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  border-bottom: 3px solid #FFB700;
  padding: 1rem .75rem 1rem;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.header h1, .header a {
  font-size: 3rem;
  font-weight: normal;
  margin-bottom: .5rem;
  text-decoration: none;
}

.header p {
  font-size: 1rem;
  font-weight: normal;
  margin-bottom: 1rem;
}

.nav ul {
  padding: 0;
  margin: 0;
}

.nav li {
  display: inline;
  list-style: none;
  padding: 0 1rem 0 0;
}

@media screen and (min-width: 470px) {
  .container {
    align-items: center;
    padding: 1.5rem 2rem 1rem;
  }
  .header {
    align-items: center;
  }
  .nav li {
    padding: 0 1rem;
  }
}

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  border-bottom: 3px solid #FFB700;
  padding: 1rem .75rem 1rem;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.header h1, .header a {
  font-size: 3rem;
  font-weight: normal;
  margin-bottom: .5rem;
  text-decoration: none;
}

.header p {
  font-size: 1rem;
  font-weight: normal;
  margin-bottom: 1rem;
}

.nav ul {
  padding: 0;
  margin: 0;
}

.nav li {
  display: inline;
  list-style: none;
  padding: 0 1rem 0 0;
}

.nav a {
  text-decoration: none;
  border-bottom: 1px solid #4D4D4D;
}

@media screen and (min-width: 470px) {
  .container {
    align-items: center;
    padding: 1.5rem 2rem 1rem;
  }
  .header {
    align-items: center;
  }
  .nav li {
    padding: 0 1rem;
  }
}

Fix navigation link underline style

Fix navigation link underline style


/* Copyright (c) 2012 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.
 */

#statistics {
  background-color: white;
  bottom: 0;
  border-top: 1px solid black;
  height: 15px;
  margin: 0;
  opacity: 0.85;
  padding: 0;
  position: fixed;
  width: 100%;
  z-index: 100;
}

/* Copyright (c) 2012 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.
 */

#statistics {
  background-color: white;
  left: 0;
  bottom: 0;
  border-top: 1px solid black;
  height: 15px;
  margin: 0;
  opacity: 0.85;
  padding: 0;
  position: fixed;
  width: 100%;
  z-index: 100;
}

Fix left alignment of stats bar

[Chromoting] Fix left alignment of stats bar

The stats bar assumes that it is aligned to the left side. Recent changes to the UI added a 20px margin around the body area which resulted in the stats bar being offset rather than running across the entire bottom of the window.  This CL fixes that.

BUG=none
TEST=none

Review URL: http://codereview.chromium.org/9664030

git-svn-id: de016e52bd170d2d4f2344f9bf92d50478b649e0@126330 0039d316-1c4b-4281-b951-d872f2087c98


/* [XUL] Navigation bar tweak */
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#urlbar dropmarker, #urlbar-go-button, #urlbar-reload-button, #urlbar-stop-button,
.search-go-button, #new-tab-button, .tabs-newtab-button, #alltabs-button {
  visibility: collapse !important;
}

#nav-bar .toolbarbutton-1 {
  margin-top: -5px !important;
  margin-bottom: -5px !important;
}

/* [XUL] Navigation bar tweak */
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#urlbar dropmarker, #urlbar-go-button, #urlbar-reload-button, #urlbar-stop-button,
.search-go-button, #new-tab-button, .tabs-newtab-button, #alltabs-button {
  visibility: collapse !important;
}

#nav-bar .toolbarbutton-1:not(#forward-button) {
  margin-top: -5px !important;
  margin-bottom: -5px !important;
}

Fix appearance corruption on forward button


body {
	padding-top: 220px;
	padding-bottom: 30px;
}

pre {
	white-space: pre;
	float: left;
}

.navbar-header .breadcrumb {
	padding-bottom: 8px;
	margin-bottom: 0px;
	margin-top: 8px;
	background-color: #F8F8F8;
}

.navbar-header .breadcrumb li {
	margin-left: -10px;
}

.rounded-right {
	border-radius: 0 14px 14px 0;
}

.rounded-left {
	border-radius: 14px 0 0 14px;
}

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

.nofloat {
	float: none;
}

.dataTables_filter .form-control {
	width: 16em;
}

td {
	white-space: nowrap;
}

.command-fixed-top {
    position: fixed;
	top: 51px;
    padding-top: 20px;
	left: 0;
    right: 0;
    z-index: 1030;
    width: 100%;
    background-color: white;
}

.no-options {
	margin-top: -50px;
}

table {
	border-collapse: inherit;
}

Fix header bar width in datatables

Fix header bar width in datatables


body {
	font-family: sans-serif;
	margin: 0;
}

#recent {
	list-style: none;
	margin: 0;
	padding: 0;
}

.host {
	align-items: center;
	display: flex;
	justify-content: space-between;
	padding: 0.6em;
}

.host:nth-child(odd) {
	background-color: #f6f6f6;
}

.hostname {
	white-space: nowrap;
}

.actions {
	margin-left: 1em;
}

.actions input {
	vertical-align: text-top;
}

#empty {
	margin: 0.6em;
}

body {
	font-family: sans-serif;
	margin: 0;
	min-width: 430px;
}

#recent {
	list-style: none;
	margin: 0;
	padding: 0;
}

.host {
	align-items: center;
	display: flex;
	padding: 0.6em;
}

.host:nth-child(odd) {
	background-color: #f6f6f6;
}

.hostname {
	flex: 1;
	text-align: right;
	white-space: nowrap;
}

.actions {
	margin-left: 0.6em;
}

.actions input {
	vertical-align: text-top;
}

#empty {
	margin: 0.6em;
	text-align: center;
}

Set a minimum width to avoid visible reflow

… most of the time. Is this a Firefox bug?


html, body {
  height: 100%;
}
body {
  background-color: black;
  color: green;
  padding: 0 4rem;
  font-family: monospace;
}
body * {
  font-size: 1rem;
}
hr {
  border: none;
}
hr:before {
  content: '--'
}
a {
  text-decoration: none;
  color: lightgreen;
  font-weight: bold;
}
a:before {
  content: '[';
}
a:after {
  content: ']';
}
a:hover {
  text-decoration: underline;
}
h1 {
  color: lightgreen;
}
h2, h3, h4, h5, h6 {
  font-size: 1rem;
}
h2 {
  background-color: green;
  color: black;
  padding: 0 1rem;
  margin: 1rem 0;
}
h3 {
  color: lightgreen;
}
h3, p {
  margin: 0.5rem 0;
}
section {
  padding: 0 1rem;
}
code {
  font-style: italic;
  color: lightgreen;
}
blockquote {
  margin: 0;
  font-style: italic;
}

html, body {
  height: 100%;
}
body {
  background-color: black;
  color: green;
  padding: 0 4rem;
  font-family: monospace;
}
body * {
  font-size: 1rem;
}
hr {
  border: none;
}
hr:before {
  content: '--'
}
a {
  text-decoration: none;
  color: lightgreen;
  font-weight: bold;
}
a:before {
  content: '[';
}
a:after {
  content: ']';
}
a:hover {
  text-decoration: underline;
}
h1 {
  color: lightgreen;
}
h2, h3, h4, h5, h6 {
  font-size: 1rem;
}
h2 {
  background-color: green;
  color: black;
  padding: 0 1rem;
  margin: 1rem 0;
}
h3 {
  color: lightgreen;
}
h3, p {
  margin: 0.5rem 0;
}
section {
  padding: 0 1rem;
  margin-bottom: 3rem;
}
code {
  font-style: italic;
  color: lightgreen;
}
blockquote {
  margin: 0;
  font-style: italic;
}

Make the space between sections more clear


.slides .code-illustration {
	width: 700px;
	height: 480px;
	overflow: hidden;
	margin: 0 auto;
}

.slides .code-illustration img {
	max-width: none;
	max-height: none;
	position: absolute;
	left: 0px;
}

.slides .code-illustration {
	width: 700px;
	height: 480px;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
}

.slides .code-illustration img {
	max-width: none;
	max-height: none;
	position: absolute;
	left: 0px;
}

Fix for cropped code illustration bug

Fix for cropped code illustration bug


a:link, a:visited, a:hover, a:active {
    color: rgb(186, 186, 186);  /* 50% gray */
}

body {
    background-color: rgb(123, 123, 123);  /* 20% gray */
    color: rgb(255, 255, 255);
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Lucida Grande", Arial, sans-serif;
    line-height: 1.2;
}

#content { margin: 16px; }

input[type="number"] { width: 4em; }

input[type="radio"], input[type="text"] {
    margin-top: 4px;
    margin-bottom: 4px;
}

input[type="submit"] { padding: 3.5px 7px; }

table.result td { text-align: center; }

table.rjust td { text-align: right; }

td.demo {
    font-weight: 500;
    padding: 4px 24px;
}

textarea {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 80%;
    line-height: 1.4;
}

a:link, a:visited, a:hover, a:active {
    color: rgb(186, 186, 186);  /* 50% gray */
}

body {
    background-color: rgb(123, 123, 123);  /* 20% gray */
    color: rgb(255, 255, 255);
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Lucida Grande", Arial, sans-serif;
    line-height: 1.2;
}

#content { margin: 16px; }

input[type="number"] { width: 4em; }

input[type="radio"], input[type="text"] {
    margin-top: 4px;
    margin-bottom: 4px;
}

input[type="submit"] { padding: 3.5px 7px; }

table.result td { text-align: center; }

table.rjust td { text-align: right; }

td.demo {
    font-weight: 500;
    padding: 4px 24px;
}

textarea {
    font-family: Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.4;
}

Correct textarea font for production

Correct textarea font for production


#map {
  margin: 0;
}
#dropmap {
  height: 10rem;
}
.leaflet-popup-content {
  margin: 0;
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background-color: #888;
  line-height: normal;
}
.plug-popup {
  width: 180px;
  display: block;
  position: relative;
}
.popup-image {
  width: 180px;
}
.plug-cluster {
  background-image:url('happy-plug-icon.svg');
  background-repeat: no-repeat;
}
.plug-cluster .count {
  position: relative;
  top: 50%; left: 75%;
  border-radius: 1em;
  background-color: #999;
  color: white;
  font-size: .66rem;
  padding: .125em .75em;
  text-align: center;
}
.you-are-here-icon {
  font-size: 16px;
  color: red;
}
.venuename, .plugname {
  color: white;
  text-overflow: ellipsis;
  margin: 0;
  position: absolute;
}
.venuename {
  top: 4px;
  left: 4px;
}
.plugname {
  top: 20px;
  left: 4px;
}
a:link {
  color: inherit;
  text-decoration: none;
}

#map {
  margin: 0;
}
#dropmap {
  height: 10rem;
}
.leaflet-popup-content {
  margin: 0;
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background-color: #888;
  line-height: normal;
}
.plug-popup {
  width: 180px;
  display: block;
  position: relative;
}
.popup-image {
  width: 180px;
}
.plug-cluster {
  background-image:url('happy-plug-icon.svg');
  background-repeat: no-repeat;
}
.plug-cluster .count {
  position: relative;
  top: 50%; left: 75%;
  border-radius: 1em;
  background-color: #999;
  color: white;
  font-size: .66rem;
  padding: .125em .75em;
  text-align: center;
}
.you-are-here-icon {
  font-size: 16px;
  color: red;
}
.popup-venuename, .popup-plugname {
  color: white;
  text-overflow: ellipsis;
  margin: 0;
  position: absolute;
}
.popup-venuename {
  top: 4px;
  left: 4px;
}
.popup-plugname {
  top: 20px;
  left: 4px;
}
a:link {
  color: inherit;
  text-decoration: none;
}

Use new names for popup fields

Use new names for popup fields


.ERROR, .CRITICAL {
  color: red;
}

.WARNING {
  color: orange;
}

.SUCCESS {
  color: green;
}

.PROGRESS {
  color: teal;
}

.location {
  color: gray;
  font-size: small;
}

.line:hover .location {
  display: inline;
}

.ERROR, .CRITICAL {
  color: red;
}

.WARNING {
  color: darkorange;
}

.SUCCESS {
  color: green;
}

.PROGRESS {
  color: teal;
}

.location {
  color: gray;
  font-size: small;
}

.line:hover .location {
  display: inline;
}

Change WARNING to dark orange instead of orange (this one is for you, Sasha)


body {
  margin-left: 21.5%;
  margin-right: auto;
}

h1 {
  margin-left: 33%;
  font-family: sans-serif;
}

#board {
  height: 400px;
  width: 800px;
  background-color: #3399ff;
  padding: 5px;
}

.cell {
  height: 94px;
  width: 191px;
  background-color: #ffcc33;
  display: inline-block;
  margin: 3px;
}

p {
  margin: 38px;
  text-align: center;
  font-size: 20px;
  font-family: sans-serif;
}

body {
  height: 100vh;
  width: 100vw;
}
h1 {
  margin-left: 33%;
  font-family: sans-serif;
}

#board {
  height: 400px;
  width: 800px;
  background-color: #3399ff;
  padding: 5px;
}

.cell {
  height: 94px;
  width: 191px;
  background-color: #ffcc33;
  display: inline-block;
  margin: 3px;
}

p {
  margin: 38px;
  text-align: center;
  font-size: 20px;
  font-family: sans-serif;
}

Remove margin left and right from body and give height and width 100% of the viewport


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

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

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

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

#sixth_from_top {
display: block;
position: relative;
top: 1720px;
left: 100px;
}

#seventh_from_top {
display: block;
position: relative;
top: 1730px;
left: 100px;
}

#eighth_from_top {
display: block;
position: relative;
top: 1740px;
left: 100px;
}

#ninth_from_top {
display: block;
position: relative;
top: 1750px;
left: 100px;
}

main {
	display: block;
	height: 100%;
	padding-bottom: 1750px;
}

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

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

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

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

#sixth_from_top {
display: block;
position: relative;
top: 450px;
left: 100px;
}

#seventh_from_top {
display: block;
position: relative;
top: 460px;
left: 100px;
}

#eighth_from_top {
display: block;
position: relative;
top: 470px;
left: 100px;
}

#ninth_from_top {
display: block;
position: relative;
top: 480px;
left: 100px;
}

#tenth_from_top {
display: block;
position: relative;
top: 480px;
left: 100px;
}

main {
	display: block;
	height: 100%;
	padding-bottom: 1750px;
}

Add tenth to index stylesheet

Add tenth to index stylesheet


#blue {
  color: #27c2dc;
}

/*@media only screen and (max-width: 460px) {
  #resume-first-link {
    margin-bottom: 5%;
  }
}*/

/*[id*="project-"]:hover {
  background-color: red;
  background: url("http://imgur.com/xDQAOms");
}*/

/*#project-1:hover {
  background: url("http://i.imgur.com/xDQAOms.png");
}*/

#blue {
  color: #27c2dc;
}

@media only screen and (max-width: 460px) {
  #resume-first-link {
    margin-bottom: 5%;
  }
}

/*[id*="project-"]:hover {
  background-color: red;
  background: url("http://imgur.com/xDQAOms");
}*/

/*#project-1:hover {
  background: url("http://i.imgur.com/xDQAOms.png");
}*/

Revert "Comment out media query"

Revert "Comment out media query"


.picturefill img {
	max-width: 100%;
	height: auto;
}

/* Hide the controls for a carousel if it only has one item.
 */
.carousel.items-1 .carousel-control,
.carousel.items-1 .carousel-indicators {
	display: none;
}

.picturefill img,
.typography img {
	max-width: 100%;
	height: auto;
}

/* Hide the controls for a carousel if it only has one item.
 */
.carousel.items-1 .carousel-control,
.carousel.items-1 .carousel-indicators {
	display: none;
}

Apply max-width:100% to all images inside typography blocks.


body {
    background-color: wheat;
}

#canvasContainer {
    background-color: white;
    position:relative;
    overflow:auto;
}

#bases {
    font-family: monospace;

    width: min-content;
    height: fit-content;
    white-space: normal;
    overflow:auto;
}

#baseContainer {
    overflow:auto;
}

.textInput {
    width: 250px;
}

body {
    background-color: wheat;
}

#canvasContainer {
    background-color: white;
    position:relative;
    overflow:auto;
}

#bases {
    font-family: monospace;
    padding-right: 4px;
    width: min-content;
    height: fit-content;
    white-space: normal;
    overflow:auto;
}

#baseContainer {
    overflow:auto;
}

.textInput {
    width: 250px;
}

Add padding to p attribute for readability


/*
Theme Name: nadando
Theme URI: https://github.com/sparkartgroupinc/nadando
Author: sparkart
Author URI: http://developers.sparkart.com
Description: Makes everything disappear — it’s all about the JSON!
Version: 0.4.0
License: MIT
Tags: nothingness, json, api
Text Domain: nadando
*/

/*
Theme Name: wp-solidus
Theme URI: https://github.com/solidusjs/wp-solidus
Author: sparkart
Author URI: http://developers.sparkart.com
Description: Headless WordPress theme for use with the WordPress JSON API and Solidus
Version: 1.0.0
License: MIT
Tags: solidus, json, api
Text Domain: wp-solidus
*/

Rename and update version to 1.0.0

Rename and update version to 1.0.0


.EmployeeList_List {  }
.EmployeeList_ListItem { text-align: left; }
.EmployeeList_ListItemWrapper { display:table-row }
.EmployeeList_ListItem.NonPublished { /* opacity:0.33; */ background-color:#fcc; }
.EmployeeList_EditLink { margin-right:4px }
.EmployeeList_Photo { display:table-cell;margin-right:8px; }
.EmployeeList_Info { display:table-cell;vertical-align:top;padding-bottom:8px }
.EmployeeList_FullName { font-style:italic; }
.EmployeeList_Positions { display:block; margin-top:8px }
.EmployeeList_Phones { display:block; margin-top:8px }
.EmployeeList_Email, .EmployeeList_WebSite, .EmployeeList_UserProfile
{
	display:inline-block;
	margin-top:8px;
	margin-right:8px
}

.EmployeeList_List { width:100% }
.EmployeeList_ListItem { text-align: left; }
.EmployeeList_ListItemWrapper { display:table-row }
.EmployeeList_ListItem.NonPublished { /* opacity:0.33; */ background-color:#fcc; }
.EmployeeList_EditLink { margin-right:4px }
.EmployeeList_Photo { display:table-cell;margin-right:8px; }
.EmployeeList_Info { display:table-cell;vertical-align:top;padding-bottom:8px }
.EmployeeList_FullName { font-style:italic; }
.EmployeeList_Positions { display:block; margin-top:8px }
.EmployeeList_Phones { display:block; margin-top:8px }
.EmployeeList_Email, .EmployeeList_WebSite, .EmployeeList_UserProfile
{
	display:inline-block;
	margin-top:8px;
	margin-right:8px
}

Set employee list width to 100%

Set employee list width to 100%


/* Put your CSS here */
/* html, body { */
/*     margin: 20px; */
/* } */
/*  */
/* @keyframes domChanged { from { background: yellow; } } */
/* @-webkit-keyframes domChanged { from { background: yellow; } } */
/* .ember-view { animation: domChanged 1s; -webkit-animation: domChanged 1s; } */

.rated-user, .rated-user:link, .rated-user:visited, .rated-user:hover, .rated-user:active {
  text-decoration: none !important;
  font-weight: bold;
}

.user-red {
  color: red !important;
}

.user-orange {
  color: #FF8C00 !important;
}

.user-violet {
  color: #A0A !important;
}

.user-blue {
  color: blue !important;
}

.user-green {
  color: green !important;
}

.user-gray {
  color: gray !important;
}

Add styles for rated hackers

Add styles for rated hackers


.fileBrowser {
    height: 500px;
    width: 100%;
}

.fb-breadcrumbs {
    background-color: #efefef;
    padding: 10px;
}

.fb-sidebar {
    width: 25%;
    display: block;
    height: 500px;
    float: left;
    background-color: aliceblue;
}

.fb-main {
    width: 55%;
    float: left;
    padding: 0;
}

.fb-infobar {
    background-color: coral;
    height: 500px;
    padding: 10px;
    float: left;
    width: 20%;
}

.fb-breadcrumbs ul, .fb-collections ul {
    padding: 0;
    list-style: none;
}

.fb-breadcrumbs ul li {
    display: inline;
    padding: 0 3px;
}

.fb-breadcrumbs>ul>li>.fa {
    margin-left: 5px;
    color: #999999;
}

.fb-collections ul li {
    padding: 3px 0;
}

.fb-collections ul li.active {
    background-color: #ccc;
}

li {
}

li {}

.fb-collections ul>li {
    padding: 7px;
}

.fileBrowser {
    height: 500px;
    width: 100%;
}

.fb-breadcrumbs {
    background-color: #efefef;
    padding: 10px;
}

.fb-sidebar {
    width: 25%;
    display: block;
    height: 500px;
    float: left;
    background-color: aliceblue;
}

.fb-main {
    width: 55%;
    float: left;
    padding: 0;
}

.fb-infobar {
    background-color: coral;
    height: 500px;
    padding: 10px;
    float: left;
    width: 20%;
}

.fb-breadcrumbs ul, .fb-collections ul, .fb-filters ul {
    padding: 0;
    list-style: none;
}

.fb-breadcrumbs ul li {
    display: inline;
    padding: 0 3px;
}

.fb-breadcrumbs>ul>li>.fa {
    margin-left: 5px;
    color: #999999;
}

.fb-collections ul li , .fb-filters ul li {
    padding: 3px 0;
}

.fb-collections ul li.active, .fb-filters ul li.active {
    background-color: #ccc;
}

li {
}

li {}

.fb-collections ul>li {
    padding: 7px;
}

Add styles to filter items as well

Add styles to filter items as well


article > div:last-child > div > span {
  border-bottom: 1px solid black
}

body {
  padding-top: 70px;
}

footer {
  text-align: center;
  font-size: 50%;
}

#main-content {
  padding-bottom: 100px;
}

#id_nomina {
  width: 200px;
}

article > div:last-child > div > span {
  border-bottom: 1px solid black
}

body {
  padding-top: 70px;
}

footer {
  text-align: center;
  font-size: 50%;
}

#main-content {
  padding-bottom: 100px;
}

#nav_nomina {
  width: 200px;
}

Fix input length on nav

Fix input length on nav


:local(.component) {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  width: 100%;
  border-bottom: 1px solid #ccc;
}

:local(.days),
:local(.header) {
  display: flex;
  align-items: flex-start;
}

:local(.daysWrapper) {
  position: relative;
  border-top: 1px solid #ccc;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

:local(.header) {
  padding-left: 30px;
  flex-shrink: 0;
}

:local(.lines) {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

:local(.hour) {
  border-bottom: 1px solid #dadfea;
  pointer-events: none;
}

:local(.halfHour) {
  height: 50%;
  border-bottom: 1px dashed #dadfea;
  pointer-events: none;
}

:local(.component) {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  width: 100%;
  border-bottom: 1px solid #ccc;
}

:local(.days),
:local(.header) {
  display: flex;
  align-items: flex-start;
}

:local(.daysWrapper) {
  position: relative;
  border-top: 1px solid #ccc;
  overflow: auto;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
}

:local(.header) {
  padding-left: 30px;
  flex-shrink: 0;
}

:local(.lines) {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

:local(.hour) {
  border-bottom: 1px solid #dadfea;
  pointer-events: none;
}

:local(.halfHour) {
  height: 50%;
  border-bottom: 1px dashed #dadfea;
  pointer-events: none;
}

Fix scrolling of days in iOS Safari

Fix scrolling of days in iOS Safari

Scrolling of the main screen was broken in iOS Safari. Switching
approach to make use of flex-grow, shrink and flex-basis worked better.

http://stackoverflow.com/questions/39705876/css-scroll-issue-with-flexbox-and-max-height


nav.top-bar {
    background: #86A02D;
}

nav.top-bar h1 {
    background: #86A02D;
}

nav.top-bar h1 a{
    font-size: 1.5em;
}

.top-bar-section li a:not(.button) {
    background: #86A02D !important;
}

.top-bar-section li a:hover {
    background: #4d591a !important;
}

ul {
  list-style-type: none;
}

.container {
  width: 80%;
  padding-right: 5%;
  padding-left: 5%;
  padding-top: 2%;
  margin-left: auto;
  margin-right: auto;
  background-color: #dadada;
}

input.button {
  background-color: #86a02d;
}

nav.top-bar {
    background: #86A02D;
}

nav.top-bar h1 {
    background: #86A02D;
}

nav.top-bar h1 a{
    font-size: 1.5em;
}

.top-bar-section li a:not(.button) {
    background: #86A02D !important;
}

.top-bar-section li a:hover {
    background: #4d591a !important;
}

ul {
  list-style-type: none;
}

.container {
  width: 80%;
  padding-right: 5%;
  padding-left: 5%;
  padding-top: 2%;
  margin-left: auto;
  margin-right: auto;
  background-color: #dadada;
}

input.button, a.button {
  background-color: #86a02d;
}

Add a button bg color

Add a button bg color


.Practice {
  display: flex;
  flex-direction: row;
  padding: 80px 0 40px 0;
}

@media screen and (min-width: 320px) {
  .Practice>img {
    height: 60px;
    padding-right: 20px;
  }
}

@media screen and (min-width: 425px) {
  .Practice>img {
    height: 60px;
    padding-right: 20px;
  }
}

@media screen and (min-width: 768px) {
  .Practice>img {
    height: 60px;
    padding-right: 20px;
  }
}

@media screen and (min-width: 1024px) {
  .Practice>img {
    height: 64px;
    padding-right: 20px;
  }
}

@media screen and (min-width: 1440px) {
  .Practice>img {
    height: 78px;
    padding-right: 20px;
  }
}

@media screen and (min-width: 2560px) {
  .Practice>img {
    height: 88px;
    padding-right: 20px;
  }
}

.Practice {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 80px 0 40px 0;
}

@media screen and (min-width: 320px) {
  .Practice>img {
    height: 60px;
    padding-right: 20px;
  }
}

@media screen and (min-width: 425px) {
  .Practice>img {
    height: 60px;
    padding-right: 20px;
  }
}

@media screen and (min-width: 768px) {
  .Practice>img {
    height: 60px;
    padding-right: 20px;
  }
}

@media screen and (min-width: 1024px) {
  .Practice>img {
    height: 64px;
    padding-right: 20px;
  }
}

@media screen and (min-width: 1440px) {
  .Practice>img {
    height: 78px;
    padding-right: 20px;
  }
}

@media screen and (min-width: 2560px) {
  .Practice>img {
    height: 88px;
    padding-right: 20px;
  }
}

Fix center icon and text

Fix center icon and text


.author-photo {
    background-color: #222;
}

.post-list li  a {
    font-size: 1rem;
    text-decoration: underline;
    font-weight: normal;
}

.post-list li > a {
    font-size: 1.5rem;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
}

.post-list li {
    margin-bottom: 55px;
}

.post-title h1 {
    text-transform: uppercase;
}

Update style for post list page

Update style for post list page


td:nth-child(1){
	white-space: nowrap;
}

.md-typeset__table {
    min-width: 100%;
}

@media only screen and (min-width: 768px)
{
	td:nth-child(1){
		white-space: nowrap;
	}
}

Adjust size of tables and only adjust the first column on mobile


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

.jp-Completer {
  background: #EEEEEE;
  border: var(--jp-border-width) solid var(--jp-border-color1);
  list-style-type: none;
  overflow: auto;
  padding: 0;
  margin: 0;
  position: absolute;
  z-index: 10001;
}

.jp-Completer.jp-mod-outofview {
  display: none;
}

.jp-Completer-item {
  margin: 0;
  min-width: 150px;
  padding: 0 2px;
}

.jp-Completer-item:nth-child(odd) {
  background: #FFFFFF;
}

.jp-Completer-item.jp-mod-active {
  background: #BFBFBF;
}

.jp-Completer-item code {
  font-size: 14px;
  line-height: 25px;
}

.jp-Completer-item mark {
  font-weight: bold;
  text-decoration: underline;
  background: inherit;
  color: inherit;
}

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

.jp-Completer {
  background: #EEEEEE;
  border: var(--jp-border-width) solid var(--jp-border-color1);
  list-style-type: none;
  overflow: auto;
  padding: 0;
  margin: 0 0 0 -4px;
  position: absolute;
  z-index: 10001;
}

.jp-Completer.jp-mod-outofview {
  display: none;
}

.jp-Completer-item {
  margin: 0;
  min-width: 150px;
  padding: 0 2px;
}

.jp-Completer-item:nth-child(odd) {
  background: #FFFFFF;
}

.jp-Completer-item.jp-mod-active {
  background: #BFBFBF;
}

.jp-Completer-item code {
  font-size: 14px;
  line-height: 25px;
}

.jp-Completer-item mark {
  font-weight: bold;
  text-decoration: underline;
  background: inherit;
  color: inherit;
}

Align completer horizontally over the inputted text.


.video-container {
  /*width: 80%;*/
  max-width: 1200px;
  padding-top: 1em;
  padding-right: 0.5em;
  padding-left: 1em;
}

.editor-container {
  width: 100%%;
  padding-top: 1em;
  padding-left: 0.5em;
  padding-right: 1em;
}

.ql-editor {
  height: calc(100% - 80px);
  min-height: 10em;
}

.video-container {
  /*width: 80%;*/
  max-width: 1200px;
  padding-top: 1em;
  padding-right: 0.5em;
  padding-left: 1em;
}

.editor-container {
  padding-top: 1em;
  padding-left: 0.5em;
  padding-right: 1em;
}

.ql-editor {
  min-height: 10rem;
  max-height: 30rem;
  overflow: scroll;
}

Make the editor vertically scrollable

Make the editor vertically scrollable

by specifying min and max heights, plus what to do with overflow


/* Default entities style */
html, body {
  height: 100%;
  background: none;
  -webkit-tap-highlight-color: rgba(0,0,0, 0);
  -ms-user-select: none;
  padding: 0;
  margin: 0;
}

html {
  font-size: 62.5%;
  -webkit-perspective: 1000;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

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

body {
  color: #222;
  font-family: 'Roboto', sans-serif;
  font-size: 1.5rem !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased !important;
  overflow-x: hidden;

  -webkit-transition: background-color 1.2s ease-in-out;
  -moz-transition: background-color 1.2s ease-in-out;
  transition: background-color 1.2s ease-in-out;
}

/* Our main app */
.ClocketteApp {

}

/* Default entities style */
html, body {
  height: 100%;
  background: #433478;
  -webkit-tap-highlight-color: rgba(0,0,0, 0);
  -ms-user-select: none;
  padding: 0;
  margin: 0;
}

html {
  font-size: 62.5%;
  -webkit-perspective: 1000;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

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

body {
  color: white;
  font-family: 'Roboto', sans-serif;
  font-size: 1.5rem !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased !important;
  overflow-x: hidden;

  -webkit-transition: background-color 1.2s ease-in-out;
  -moz-transition: background-color 1.2s ease-in-out;
  transition: background-color 1.2s ease-in-out;
}

/* Our main app */
#ClocketteApp {
  padding: 20px;
}

.hr {
  height: 1px;
  background: none;
  border-bottom: solid 1px rgba(255,255,255, .3);
}

Set app background color ; Add shared .hr class


#content {
  border-top: solid 1px #8C001A;
}

#content div {
  margin-right: auto;
  margin-left: auto;
  max-width: 630px;
}

#container div {
  margin-right: auto;
  margin-left: auto;
  max-width: 630px;
}

#content {
  border-top: solid 1px #8C001A;
}

Make banner also max-width fixed

Make banner also max-width fixed


header {
    margin-left: 5px;
    margin-right: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #000080;
    color: #ffff00;
    border-radius: 10px;
    text-align: center;
    /* height:30px; */
}

footer {
    padding: 20px 0;
    text-align:center;
}

input[type='text'], input[type='password'] {
    border-width: 0 0 2px 0;
    border-color: #000080;
    border-style: dotted;
}

th {
    font-weight: bold;
    text-align: left;
}

th, td {
    padding-right: 20px;
}

.action-bar {
    margin: 10px;
    border-width: 1px 0 1px 0;
    border-color: #c0c0c0;
    border-style: solid;
    background-color: #f0f0f0;
}

.action-bar p {
    margin: 0;
}

Remove bottom margin in action bar.

Remove bottom margin in action bar.


.video-status, .video-status-keep-showing {
  position: absolute;
  left: 15px;
  top: 15px;
  color: rbga(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.6);
  padding: 10px 7px;
  border-radius: 10px;
  font-family: 'Open Sans';
  z-index: 100000;
  font-size: 18px;
  text-align: center;
  width: 80px;
  display: inline-block;
}

.video-status, .video-status-keep-showing {
  position: absolute;
  left: 15px;
  top: 15px;
  color: rgba(255, 255, 255, 1.0);
  background: rgba(0, 0, 0, 0.6);
  padding: 10px 7px;
  border-radius: 10px;
  font-family: 'Open Sans';
  z-index: 100000;
  font-size: 18px;
  text-align: center;
  width: 80px;
  display: inline-block;
}

:bangbang: Fix a mistype and adjust word transparency in the status box


body {
    background-color: #eaf1f1;
    font-family: 'Istok Web', sans-serif;
    line-height: 1.6;
    padding-top: 50px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Lora', serif;
    letter-spacing: 2px;
}

.card {
    min-height: 650px;
    margin-bottom: 100px;
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    border-radius: 5%;
}

.article-image {
    min-height: 300px;
    max-height: 350px;
    border-radius: 5%;
    margin-bottom: 20px;
}

.jumbotron {
    color: white;
    background-color: #141d27;
}

h1 {
    font-weight: bolder;
}

.navbar {
    letter-spacing: 1.5px;
    background-color: #141d27;
}

.navbar-toggler-icon {
    color: white;
}

body {
    background-color: #eaf1f1;
    font-family: 'Istok Web', sans-serif;
    line-height: 1.6;
    padding-top: 50px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Lora', serif;
    letter-spacing: 2px;
}

.card {
    min-height: 650px;
    margin-bottom: 100px;
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    border-radius: 5%;
    padding: 20px;
}

.article-image {
    min-height: 300px;
    max-height: 350px;
    border-radius: 5%;
    margin-bottom: 20px;
}

.jumbotron {
    color: white;
    background-color: #141d27;
}

h1 {
    font-weight: bolder;
}

.navbar {
    letter-spacing: 1.5px;
    background-color: #141d27;
}

.navbar-toggler-icon {
    color: white;
}

Add padding to article cards to increase readability.


#main {
	display: table;
	margin: 0px auto;
}

.nav-tabs {
	margin: 0;
}

.nav-tabs .active a, .nav-tabs .active a:hover {
	color: #000;
	background-color: #eee;
}

#options, #results {
	display: none;
}

#results {
	cursor: pointer;
}
#results #number {
	font-size: 36px;
}
#results #text {
	font-size: 20px;
}
#results #list {
	font-size: 16px;
}
#results ul {
	list-style-type: decimal;
	list-style-position: inside;
}

#options input {
	width: 40px;
}

#number_options #right {
	text-align: right;
}
#number_options #left {
	text-align: left;
}

#main {
	display: table;
	margin: 0px auto;
}

.nav-tabs {
	margin: 0;
}

.nav-tabs li:last-child a {
	margin-right: 0 !important;
}

.nav-tabs .active a, .nav-tabs .active a:hover {
	color: #000;
	background-color: #eee;
}

#options, #results {
	display: none;
}

#results {
	cursor: pointer;
}
#results #number {
	font-size: 36px;
}
#results #text {
	font-size: 20px;
}
#results #list {
	font-size: 16px;
}
#results ul {
	list-style-type: decimal;
	list-style-position: inside;
}

#options input {
	width: 40px;
}

#number_options #right {
	text-align: right;
}
#number_options #left {
	text-align: left;
}

Remove the right margin on the last tab

Remove the right margin on the last tab


div.item.status_broken {
    background-color: black;
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
}
div.item.status_usable {
    background-color: white;	filter:alpha(opacity=30);
	-moz-opacity:0.3;
	-khtml-opacity: 0.3;
	opacity: 0.3;
}

div.item.status_inuse {
    background-color: gray;		filter:alpha(opacity=90);
	-moz-opacity:0.9;
	-khtml-opacity: 0.9;
	opacity: 0.9;
}

#wrapper { padding-left: 15px; }

i/*div.item.status_broken {
   background-color: black;
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
}*/
div.item.status_usable {
    background-color: white;	filter:alpha(opacity=30);
	-moz-opacity:0.3;
	-khtml-opacity: 0.3;
	opacity: 0.3;
}

div.item.status_unusable {
    background-color: gray;		filter:alpha(opacity=60);
	-moz-opacity:0.6;
	-khtml-opacity: 0.6;
	opacity: 0.6;
}

#wrapper { padding-left: 15px; }

Apply new colors for machine states

Apply new colors for machine states


body {
	font: 75% georgia, sans-serif;
	line-height: 1.88889;
	color: #555753;
	margin: 0;
	padding: 0;
}

header {
  margin: 0;
	padding-top: 20px;
	height: 87px;
	color: #333;
	background-color: #eee;
	font: sans-serif;
}

header h1 {
		margin-top: 10px;
		display: block;
		width: 219px;
		height: 87px;
		float: left;

		text-indent: 100%;
}

header h2 {
	margin-top: 58px;
	margin-bottom: 40px;
	width: 200px;
	height: 18px;
	float: right;

	text-indent: 100%;
}

nav ul{
  margin: 0;
  display: inline;
}

nav ul li {
  background: #eee;
  color #333;
  display: inline-block;
  list-style-type: none;
}

nav ul li a {
  color: #333;
}

main p {
  color: #333;
}

main h3 {
  color: #333;
}

body {
	font: 75% georgia, sans-serif;
	line-height: 1.88889;
	color: #555753;
	margin: 0;
	padding: 0;
}

header {
  margin: 0;
	padding-top: 20px;
	height: 87px;
	color: #333;
	background-color: #eee;
	font: sans-serif;
}

header h1 {
		margin-top: 10px;
		display: block;
		width: 219px;
		height: 87px;
		float: left;
		background-color: #eee;
}

header h2 {
	margin-top: 58px;
	margin-bottom: 40px;
	width: 200px;
	height: 18px;
	float: left;
	background-color: #eee;
}

nav ul{
  margin: 0;
  display: inline;
}

nav ul li {
  background: #eee;
  color #333;
  display: inline-block;
  list-style-type: none;
}

nav ul li a {
  color: #333;
}

main p {
  color: #333;
}

main h3 {
  color: #333;
}

Bring headers back into view

Bring headers back into view


* {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #111;
}

#chart {
    width: 100%;
}

.morris-hover.morris-default-style {
    border-radius: none;
    background: none;
    border: none;
    text-shadow: none;
}

form {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-size: 0;
    padding: 10px;
    background-color: #111;
}
form input, form button[type=submit] {
    display: inline-block;
    text-align: center;
    border: none;
    height: 60px;
    font-size: 16px;
    border-radius: 0;
}
form input + input {
    margin-left: 10px;
}
form input {
    color: #111;
    width: 80px;
}
form button[type=submit] {
    margin-top: 10px;
    background-color: gray;
    color: white;
    font-weight: bold;
    width: 260px;
    height: 36px;
}
form button[type=submit]:action {
    background-color: darkgray;
}

/* GENERAL */
* {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #111;
}

/* CHART VIEW */
#chart {
    width: 100%;
}

.morris-hover.morris-default-style {
    border-radius: none;
    background: none;
    border: none;
    text-shadow: none;
}

/* LOG FORM AREA */
form {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-size: 0;
    padding: 10px;
    background-color: #111;
}
form input, form button[type=submit] {
    display: inline-block;
    text-align: center;
    border: none;
    height: 60px;
    font-size: 16px;
    border-radius: 0;
}
form input + input {
    margin-left: 10px;
}
form input {
    color: #111;
    width: 80px;
}
form button[type=submit] {
    margin-top: 10px;
    background-color: gray;
    color: white;
    font-weight: bold;
    width: 260px;
    height: 36px;
}
form button[type=submit]:action {
    background-color: darkgray;
}

Add section comments in CSS file

Add section comments in CSS file


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

.root {
  position: relative;
  display: flex;
  text-decoration: none;
  padding: 0.75em;
  white-space: nowrap;
  opacity: 0.6;

  @nest .default & {
    flex-direction: row;
    align-items: center;
  }
}

.horizontal {
  align-items: center;
}

.vertical {
  flex-direction: row;
  align-items: center;
  width: 100%;
}

.rootActive {
  composes: root;
  opacity: 1;
  background: rgba(255, 255, 255, 0.07);
}

.iconContainer {
  display: block;
  font-size: calc(25 / 16 * 1em);
  line-height: 1;

  @nest & > svg {
    display: block;
  }
}

.toolName {
  font-size: calc(14 / 16 * 1em);
  line-height: calc(17 / 14);
  padding: 0 0.25em;

  @nest .vertical & {
    padding-left: 0.5em;
  }
}

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

.root {
  position: relative;
  display: flex;
  text-decoration: none;
  padding: 0.75em;
  white-space: nowrap;
  opacity: 0.6;

  @nest .default & {
    flex-direction: row;
    align-items: center;
  }

  @nest &:hover {
    opacity: 1;
  }
}

.horizontal {
  align-items: center;
}

.vertical {
  flex-direction: row;
  align-items: center;
  width: 100%;
}

.rootActive {
  composes: root;
  opacity: 1;
  background: rgba(255, 255, 255, 0.07);
}

.iconContainer {
  display: block;
  font-size: calc(25 / 16 * 1em);
  line-height: 1;

  @nest & > svg {
    display: block;
  }
}

.toolName {
  font-size: calc(14 / 16 * 1em);
  line-height: calc(17 / 14);
  padding: 0 0.25em;

  @nest .vertical & {
    padding-left: 0.5em;
  }
}

Add tool switcher hover effect

[default-layout] Add tool switcher hover effect


.Home {
  text-align: center;
  margin-top: 15px;
}

.Home {
  text-align: center;
  margin: 15px auto;
  max-width: 800px;
}

Apply max width to the home screen

Apply max width to the home screen


div.col-xs-10 {
  border-radius: 15px;
}

div.panel {
  background-color: #b28dc7;
}

div.panel-heading {
  background-color: #6e2687;
  color: white;
  text-align: center;
}

div.panel-body {
background-color: #ccc47f;
}

div.sub-content h3 {
  background-color: #b28dc7;
  padding: 2px;
  border-radius: 2px;
}

.col-xs-1{
  min-width: 25px;
}

.column {
  border-style: none;
}

form {
  text-align: center;
}

.form-group {
  text-align: left;
}

li {
  list-style: none;
}

Fix bug with submitting experiment

Fix bug with submitting experiment


.sparklines-stats li:first-child {
  border-radius: 2px 0 0 2px;
  -webkit-border-radius: 2px 0 0 2px;
  -moz-border-radius: 2px 0 0 2px;
}
.sparklines-stats li.bg-default {
  background-color: #fafafa;
  border: 1px solid #e5e5e5;
}
ul.list-justified li {
  float: none;
  width: 1%;
  display: table-cell;
}
.sparklines-stats li {
  padding: 12px 18px;
  border-left: 1px solid #e5e5e5;
  display: inline-block;
}
.sparklines-stats {
  margin-left: 0;
  padding: 0;
  list-style: none;
  margin-bottom: 35px;
}
.chart {
  float: right;
  margin-top: 4px;
}
.sparklines-stats-showcase {
  float: left;
  margin-right: 18px;
}
.sparklines-stats-showcase span {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}
.sparklines-stats-showcase h2 {
  margin: 0;
  font-size: 20px;
  line-height: 20px;
}

.sparklines-stats li:first-child {
  border-radius: 2px 0 0 2px;
  -webkit-border-radius: 2px 0 0 2px;
  -moz-border-radius: 2px 0 0 2px;
}
.sparklines-stats li.bg-default {
  background-color: #fafafa;
  border: 1px solid #e5e5e5;
}
ul.list-justified li {
  float: none;
  width: 1%;
  display: table-cell;
}
.sparklines-stats li {
  padding: 12px 18px;
  border-left: 1px solid #e5e5e5;
  display: inline-block;
}
.sparklines-stats {
  margin-left: 0;
  padding: 0;
  list-style: none;
  margin-bottom: 20px;
}
.chart {
  float: right;
  margin-top: 4px;
}
.sparklines-stats-showcase {
  float: left;
  margin-right: 18px;
}
.sparklines-stats-showcase span {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}
.sparklines-stats-showcase h2 {
  margin: 0;
  font-size: 20px;
  line-height: 20px;
}

Merge conflict, proper CSS fix

[FIX] Merge conflict, proper CSS fix


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

body {
  background-color: #AD9393;
}

Add background color for website

Add background color for website


/* Global search */
.search-content {
  padding: 0;
  margin: var(--content-padding);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  background: none;
}

/* button */
.search button {
  background: none;
  fill: var(--icon-color);
  cursor: pointer;
  border: none;
  padding: 0;
}
.search button:hover {
  fill: var(--link-hover-fg);
}
.search button svg {
  width: 24px;
  height: 24px;
}

/* popup */
.popup-wrapper {
  box-shadow: 0 0 10px var(--border-light) !important;
  border: 2px solid var(--border-light) !important;
  font-family: var(--mono-font) !important;
  width: calc(100% - var(--side-width) - 84px);
  left: calc(var(--side-width) + 42px) !important;
}
.popup-wrapper .indented {
  text-indent: 1.5em !important;
}
.popup-wrapper .disabled {
  color: var(--inactive-fg) !important;
  font-weight: 500 !important;
}
.action_def:hover, .action_def:focus-within {
  color: var(--selected-fg);
  background: var(--selected-bg) !important;
  font-weight: 500;
}

/* Landscape phones, portait tablets */
@media(max-width: 768px) {
  .popup-wrapper {
    width: calc(100% - 48px);
    left: 24px !important;
  }
}

/* Portrait phones */
@media(max-width: 576px) {
  .search-content {
    margin: 0 !important;
    top: 9px !important;
    right: 12px !important;
  }
  .popup-wrapper {
    width: 100%;
    left: 0 !important;
    top: 36px !important;
  }
  /* Allow to scroll horizontally in the search results, which is useful on small screens */
  .popup-wrapper div.ReactVirtualized__Grid__innerScrollContainer {
    overflow: auto !important;
  }
  .popup-wrapper div.ReactVirtualized__Grid__innerScrollContainer > div {
    min-width: 100%;
    width: auto !important;
  }
}

Fix search popup on small screens

Fix search popup on small screens


/* app css stylesheet */
.hoverwell:hover {
  background-color: #485563;
  cursor: pointer;
}

.container {
  padding-top: 10px;
}

.pointable {
  cursor: pointer;
}

button {
  color: #555;
}

.toast-success {
  background-color: #51a351;
}
.toast-error {
  background-color: #bd362f;
}
.toast-info {
  background-color: #2f96b4;
}
.toast-warning {
  background-color: #f89406;
}

/* app css stylesheet */
.hoverwell:hover {
  background-color: #485563;
  cursor: pointer;
}

.container {
  padding-top: 10px;
}

.pointable {
  cursor: pointer;
}

button {
  color: #555;
}

[hidden] {
  display: none !important;
}

.toast-success {
  background-color: #51a351;
}
.toast-error {
  background-color: #bd362f;
}
.toast-info {
  background-color: #2f96b4;
}
.toast-warning {
  background-color: #f89406;
}

Add style to force [hidden] to work

Add style to force [hidden] to work


.openerp .mis_builder_ralign {
  text-align: right;
}

.openerp .mis_builder a {
  /* we don't want the link color, to respect user styles */
  color: inherit;
}

.openerp .mis_builder a:hover {
  /* underline links on hover to give a visual cue */
  text-decoration: underline;
}

.openerp .oe_mis_builder_buttons {
  padding-bottom: 10px;
}

[IMP][mis_builder] Add whitespace between buttons and table.


body {
    margin-top: 5rem;
    background: url('../images/background.png');
}

body > .container {
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 0 1rem rgb(200, 200, 200);
}

.gantt-chart td {
    width: 2rem;
    max-width: 2rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.star {

}

body {
    margin-top: 5rem;
    background: url('../images/background.png');
}

body > .container {
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 0 1rem rgb(200, 200, 200);
}

.gantt-chart td {
    width: 2rem;
    max-width: 2rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.star {
    color: rgb(255, 204, 0);
}

.star:hover {
    color: rgb(191, 158, 25);
}

Make stars a better colour

Make stars a better colour


.col-md-3 {
	text-align: center;
	/*border: 2px solid blue;*/
	height: 150px;
	/*background-color: red;*/
}

.wishlist-button {
	display: none;
}

.col-md-4 {

	/*text-align: center;*/
	/*border: 2px solid blue;*/
	/*height: 250px;*/
	/*background-color: red;*/
}

.wishlist-button {
	display: none;
}

Increase size of grid boxes

Increase size of grid boxes


/* Fixes issue here http://code.google.com/p/jcrop/issues/detail?id=1 */
.jcrop-holder { text-align: left; }

.jcrop-vline, .jcrop-hline
{
	font-size: 0;
	position: absolute;
	background: white url('../img/Jcrop.gif') top left repeat;
}
.jcrop-vline { height: 100%; width: 1px !important; }
.jcrop-hline { width: 100%; height: 1px !important; }
.jcrop-handle {
	font-size: 1px;
	width: 7px !important;
	height: 7px !important;
	border: 1px #eee solid;
	background-color: #333;
	width: 9px;
	height: 9px;
}

.jcrop-tracker { width: 100%; height: 100%; }

.custom .jcrop-vline,
.custom .jcrop-hline
{
	background: yellow;
}
.custom .jcrop-handle
{
	border-color: black;
	background-color: #C7BB00;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

/* Fixes issue here http://code.google.com/p/jcrop/issues/detail?id=1 */
.jcrop-holder { text-align: left; }

.jcrop-vline, .jcrop-hline
{
	font-size: 0;
	position: absolute;
	background: white url('../img/Jcrop.gif') top left repeat;
}
.jcrop-vline { height: 100%; width: 1px !important; }
.jcrop-hline { width: 100%; height: 1px !important; }
.jcrop-handle {
	font-size: 1px;
	width: 7px !important;
	height: 7px !important;
	border: 1px #eee solid;
	background-color: #333;
	width: 9px;
	height: 9px;
}

.jcrop-tracker { width: 100%; height: 100%; }

.custom .jcrop-vline,
.custom .jcrop-hline
{
	background: yellow;
}
.custom .jcrop-handle
{
	border-color: black;
	background-color: #C7BB00;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

Replace webkit border-radius property with HTML5 equivalent


body {background-color: #AACFD0;}

header {background-color: white;
text-align:center;
}

h2 {text-align: center;}
article {margin-left: 20px;
margin-right: 20px;
}

.column-1 {background-color: white;
    display: inline-block;
    float:left;
    width: 46%;
    margin-left: 2%;
    margin-bottom: 2%;
}

.column-2 {background-color: white;
    display: inline-block;
    float:right;
    width: 46%;
    margin-right: 2%;
    margin-bottom: 2%;
}

footer {background-color: white;
bottom: 0;
clear:both;
    text-align:center;
}

Add CSS to GPS 2.1 challenge

Add CSS to GPS 2.1 challenge


body {
    background: #fafafa;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #333;
    padding-top: 40px;
}

.hero-unit {
    margin: 50px auto 0 auto;
    width: 300px;
    font-size: 18px;
    font-weight: 200;
    line-height: 30px;
    background-color: #eee;
    border-radius: 6px;
    padding: 60px;
}

.hero-unit h1 {
    font-size: 60px;
    line-height: 1;
    letter-spacing: -1px;
}

.table tbody td.blue{
  background-color: #0000AA;
  color: white;
  opacity:0.7;
}

.table tbody td.red{
  background-color: #AA0000;
  color: white;
  opacity:0.7;
}

Tidy Up: Remove redundant style classes

Tidy Up: Remove redundant style classes


body { background-color: #000000; background: url(/images/background.jpg) top center no-repeat fixed; padding: 50px 0 100px 0; }

body { background: #000000 url(/images/background.jpg) top center no-repeat fixed; padding: 50px 0 100px 0; }

Fix background colour for reals

Fix background colour for reals


#cost {display:none;}
#waste {display:none;}
#mit {display:none;}
#doe {display:none;}

div.heading  {
  left:10%;  width:80%; height: 20%; position:absolute;
}
div.heading h1 { text-align:center;}

div.intro {
  width:50%;
  position:absolute;
}
div.logo {
  position:absolute;
  top:25%;
  left:50%;
  width:50%;
  text-align:center;
}

div.logo img { width:50% }

h3 { text-align:center;}

div.chart1 {
  top:25%;
  height:50%;
  width:33%;
  float:left;
 }
div.chart2 {
  top:25%;
  height:50%;
  width:33%;
  float:left;
}
div.chart3 {
  top:25%;
  height:50%;
  width:33%;
  float:left;
}

div.footer
{
position:absolute;
top: 80%;
width:100%;
height:15%;
text-align:center;
}

body {
  overflow-y:scroll;
}

text {
  font: 12px sans-serif;
}

#cost {display:none;}
#waste {display:none;}
#mit {display:none;}
#doe {display:none;}

div.heading  {
  left:10%;  width:80%; height: 20%; position:absolute;
}
div.heading h1 { text-align:center;}

div.intro {
  width:50%;
  position:absolute;
}
div.logo {
  position:absolute;
  top:25%;
  left:50%;
  width:50%;
  text-align:center;
}

div.logo img { width:50% }

h3 { text-align:center;}

div.chart1 {
  top:25%;
  width:33%;
  float:left;
 }
div.chart2 {
  top:25%;
  width:33%;
  float:left;
}
div.chart3 {
  top:25%;
  width:33%;
  float:left;
}

div.footer
{
position:absolute;
top: 80%;
width:100%;
height:15%;
text-align:center;
}

body {
  overflow-y:scroll;
}

text {
  font: 12px sans-serif;
}

Remove height from chart containers.

Remove height from chart containers.


/* Copyright (c) 2012 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.
 */

#statistics {
  background-color: white;
  bottom: 0;
  border-top: 1px solid black;
  height: 15px;
  margin: 0;
  opacity: 0.85;
  padding: 0;
  position: fixed;
  width: 100%;
  z-index: 100;
}

/* Copyright (c) 2012 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.
 */

#statistics {
  background-color: white;
  left: 0;
  bottom: 0;
  border-top: 1px solid black;
  height: 15px;
  margin: 0;
  opacity: 0.85;
  padding: 0;
  position: fixed;
  width: 100%;
  z-index: 100;
}

Fix left alignment of stats bar

[Chromoting] Fix left alignment of stats bar

The stats bar assumes that it is aligned to the left side. Recent changes to the UI added a 20px margin around the body area which resulted in the stats bar being offset rather than running across the entire bottom of the window.  This CL fixes that.

BUG=none
TEST=none

Review URL: http://codereview.chromium.org/9664030

git-svn-id: de016e52bd170d2d4f2344f9bf92d50478b649e0@126330 0039d316-1c4b-4281-b951-d872f2087c98


body {
    overflow-y: scroll;
}

#content {
    padding-bottom: 50px;
}

h2, h3 {
    float: left;
}

textarea {
    resize: vertical;
}

.page-header {
    margin: 20px 0px 20px 0px;
}

.clickToEdit {
    position: absolute;
    width: 100%;
    height: 0px;
    margin: 10px 0px 10px 0px;
    text-align: center;
}

.inlineEditTooltip {
    margin-left: 7px;
    padding: 2px 6px;
    font-size: 10px;
    color: #FFF;
    background: #005292;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

iframe {
    border: 1px solid #CCCCCC;
    border-radius: 4px 4px 4px 4px;
}

html {
    min-height: 100%;
    background-color: #EBF3F9;
}

body {
    overflow-y: scroll;
    background-color: transparent;
}

#content {
    padding-bottom: 50px;
}

h2, h3 {
    float: left;
}

textarea {
    resize: vertical;
}

.page-header {
    margin: 20px 0px 20px 0px;
}

.clickToEdit {
    position: absolute;
    width: 100%;
    height: 0px;
    margin: 10px 0px 10px 0px;
    text-align: center;
}

.inlineEditTooltip {
    margin-left: 7px;
    padding: 2px 6px;
    font-size: 10px;
    color: #FFF;
    background: #005292;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

iframe {
    border: 1px solid #CCCCCC;
    border-radius: 4px 4px 4px 4px;
}

Use the typical Fork style background color.


/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */

* {
  margin: 0;
  line-height: 1.2;
}

html {
  display: table;
  width: 100%;
  height: 100%;
  color: #888;
  text-align: center;
  font-family: sans-serif;
}

body {
  display: table-cell;
  margin: 2em auto;
  vertical-align: middle;
}

h1 {
  color: #555;
  font-weight: 400;
  font-size: 2em;
}

p {
  margin: 0 auto;
  width: 280px;
}

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

  body, p {
    width: 95%;
  }

  h1 {
    font-size: 1.5em;
    margin: 0 0 0.3em;

  }

}

/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */

html {
  display: table;
  width: 100%;
  height: 100%;
  color: #888;
  text-align: center;
  font-family: sans-serif;
}

body {
  display: table-cell;
  margin: 2em auto;
  vertical-align: middle;
}

h1 {
  color: #555;
  font-weight: 400;
  font-size: 2em;
}

p {
  margin: 0 auto;
  width: 280px;
}

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

  body, p {
    width: 95%;
  }

  h1 {
    font-size: 1.5em;
    margin: 0 0 0.3em;

  }

}

Fix css edited for topnav button

Fix css edited for topnav button


@import '@teamleader/ui-utilities';

:root {
  --button-border-radius: calc(0.4 * var(--unit));
  --button-margin: calc(0.6 * var(--unit));
}

.group {
  display: flex;
  align-items: center;

  > * {
    margin-left: var(--button-margin);
    margin-right: var(--button-margin);
  }

  > *:first-child {
    margin-left: 0;
  }

  > *:last-child {
    margin-right: 0;
  }
}

.segmented {
  > * {
    border-radius: 0;
    margin-left: -1px;
    margin-right: 0;
  }

  > *:first-child:not(:only-child) {
    border-radius: var(--button-border-radius) 0 0 var(--button-border-radius);
    margin-left: 0;
  }

  > *:last-child:not(:only-child) {
    border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;
  }

  > *:only-child {
    border-radius: var(--button-border-radius);
  }
}

@import '@teamleader/ui-utilities';

:root {
  --button-border-radius: calc(0.4 * var(--unit));
  --button-margin: calc(0.6 * var(--unit));
}

.group {
  display: flex;
  align-items: center;
  min-width: 0;

  > * {
    margin-left: var(--button-margin);
    margin-right: var(--button-margin);
  }

  > *:first-child {
    margin-left: 0;
  }

  > *:last-child {
    margin-right: 0;
  }
}

.segmented {
  > * {
    border-radius: 0;
    margin-left: -1px;
    margin-right: 0;
  }

  > *:first-child:not(:only-child) {
    border-radius: var(--button-border-radius) 0 0 var(--button-border-radius);
    margin-left: 0;
  }

  > *:last-child:not(:only-child) {
    border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;
  }

  > *:only-child {
    border-radius: var(--button-border-radius);
  }
}

Add min-width to fix text overflow ellipsis


html {
    margin:0;
    background: black;
    color: white;
}
body {
    margin:0;
}
a {
    color: #7070ff;
}
input[type=button], .igt-button {
    border: 2px solid #40ebcd;
    border-radius: 0;
    padding: 0.4em 1em;
    background: #105050;
    color: white;
    font-family: 'Arial';
    -webkit-appearance: none;
}

html {
    margin:0;
    background: black;
    color: white;
}
body {
    margin:0;
}
a {
    color: #7070ff;
}
input[type=button], .igt-button {
    border: 1px solid #40ebcd;
    border-radius: 0;
    padding: 0.4em 1em;
    background: #105050;
    color: white;
    font-family: 'Arial';
    -webkit-appearance: none;
}

table {
    border-collapse: collapse;
}
table, td, th {
    border: 1px #40c0c0 solid;
}

Change border width of table, button

Change border width of table, button


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

body {
  margin-top: 50px;
  margin-bottom: 60px;
}

.main {
  padding-top: 30px;
}

.st-sort-ascent:before{
  content: '\25B2';
}

.st-sort-descent:before{
  content: '\25BC';
}

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

.container .text-muted {
  margin: 20px 0;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

.no-top-margin {
  margin-top: 0;
}

.no-bottom-margin {
  margin-bottom: 0
}

[st-sort] {
  cursor: pointer;
}

Make cursor a hand on table columns

Make cursor a hand on table columns


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

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

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

code {
  font-size: 0.8rem;
}

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

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

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

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

footer {
  margin-bottom: 2rem;
}

Add a margin to the bottom of the footer


.header {
  height: 40px;
  line-height: 40px;
  padding-left: 16px;
}

.seeMore {
  margin-top: 12px;
  margin-bottom: 6px;
}

.descriptionContainer {
  flex-direction: column;
  display: flex;
  align-items: center;

  line-height: 1.4em;
  margin-bottom: 20px;

  text-align: justify;
}

.description {
  max-width: 400px;
}

p {
  margin: 12px 0px;
}

a {
  color: white;
}

.header {
  height: 40px;
  line-height: 40px;
  padding-left: 16px;
}

.seeMore {
  margin-top: 12px;
  margin-bottom: 6px;
}

.descriptionContainer {
  flex-direction: column;
  display: flex;
  align-items: center;

  line-height: 1.4em;
  margin-bottom: 20px;
  padding: 0 16px;

  text-align: justify;
}

.description {
  max-width: 400px;
}

p {
  margin: 12px 0px;
}

a {
  color: white;
}

Add some horizontal padding 📃

Add some horizontal padding 📃


html, body {
	height:100%;
}

.col {
	height:100%;
}

#top-empty {
	height: 15vh;
	border: 8px solid red;
}

#name {
	height: 20vh;
	border: 5px dashed green;
}

#name-heading {
	margin: 0;
	height: 100%;
	display: flex;
	align-items: center;
	text-align: center;
}

#name-heading > span {
	margin-left: auto;
	margin-right: auto;
	font-size: 5em;
}

/* Debuging */
.mark-blue {
	border: 5px solid blue;
}

html, body {
	height:100%;
	line-height:1;
}

.col {
	height:100%;
	padding-left: 0px;
	padding-right: 0px;
}

#top-empty {
	height: 12vh;
}

#bottom-empty {
	height: 5vh;
}

#name {
	height: 15vh;
}

#name-heading {
	margin: 0;
	height: 100%;
	display: flex;
	align-items: center;
	text-align: center;
}

#name-heading > span {
	margin-left: auto;
	margin-right: auto;
	font-size: 3em;
}

#buttons {
	height: 15vh;
}

#buttons > #button-box {
	background-color: #999;
}

#content {
	height: 53vh;
}

#content > #content-box {
	background-color: #999;
}

/* Debuging */
.mark-blue {
	border: 2px solid blue;
}

.mark-red {
	border: 2px solid red;
}

/* Bootstrap Override */
.col-xs-1 .col-xs-10 {
	padding-left: 0px;
	padding-right: 0px;
}

Set sizes of overall grid struct, added debug, and bootstrap overide


.wrapper{
	width: 80%;
	border: 1px solid black;
	margin: 0 auto 0 auto;
}

.heading{
	height: 100px;
	background: -webkit-linear-gradient(rgba(39,9,236,0.66) 0%, #ffffff 100%);
	padding: 20px;
	text-align: center;
}

Add .css definition of heading

Add .css definition of heading


html {
 font-size: 10px;
 background: url('images/arnold-terminator.jpg') bottom center;
 background-size: cover;
}

body,html {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.keys {
  display: flex;
  flex: 1;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.key {
  border: .4rem solid black;
  border-radius: .5rem;
  margin: 1rem;
  font-size: 5rem;
  padding: 1rem .5rem;
  width: 10rem;
  text-align: center;
  color: rgba(200,0,0,1);
  background: rgba(255,255,255,0.1);
  text-shadow: 0 0 .5rem white;
}

@font-face {
  font-family: Terminator;
  src: url('fonts/terminator.ttf');
}

html {
 font-size: 10px;
 background: url('images/arnold-terminator.jpg') bottom center;
 background-size: cover;
}

body,html {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

kbd {
  font-family: Terminator;
}

.keys {
  display: flex;
  flex: 1;
  min-height: 100vh;
  align-items: flex-end;
  justify-content: center;
}

.key {
  border: .4rem solid rgba(100,100,100,1);
  border-radius: 2rem;
  margin: 1rem;
  font-size: 5rem;
  padding: 1rem .5rem;
  width: 10rem;
  text-align: center;
  color: rgba(200,0,0,1);
  background: rgba(255,255,255,0.15);
  text-shadow: 0 0 1rem white;
}

Add terminator font-face to css

Add terminator font-face to css


.codeLine pre {
	margin: 0;
}

.operators {
  color: black;
}
.constants {
  color: black;
}

.string {
  color: red;
}

.keywords {
  color: blue;
}

.comments {
  color: gray;
}

.variable_name {
  color: black;

}

.other {
  color: black;
}

.whitespace {

}

.invalid {
  color: red;
}

.preprocessor {
  color: gray;
}

.codeLine pre {
	margin: 0;
  tab-size: 2;
}

.operators {
  color: black;
}
.constants {
  color: black;
}

.string {
  color: red;
}

.keywords {
  color: blue;
}

.comments {
  color: gray;
}

.variable_name {
  color: black;

}

.other {
  color: black;
}

.whitespace {

}

.invalid {
  color: red;
}

.preprocessor {
  color: gray;
}

Change display tab size to 2

Change display tab size to 2


html, body {
  height: 100%;
}

body {
  padding-top: 50px;
}

.navbar .white {
  color: #fff;
}

.content {
  height: 100%;
}

#map-container {
  height: 100%;
}

.new-record-modal .new-record-map-container {
  height: 200px;
}

html, body {
  height: 100%;
}

body {
  padding-top: 50px;
}

.navbar .white {
  color: #fff;
}

.content {
  height: 100%;
}

#map-container {
  height: 100%;
}

.new-record-modal .new-record-map-container {
  height: 150px;
}

Reduce map height in modal.

Reduce map height in modal.


@charset 'UTF-8';
/*
Optional styling for bbplayer elements.
*/
@import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700);

.bbplayer {
  font: 200 20px/1.5 Lato,"Helvetica Neue",Helvetica,Arial,sans-serif;
  color: #898989;
}

.bb-play {
  display: inline-block;
  vertical-align: middle;
  height: 32px;
  width:  32px;
  border: 6px solid #CFCFCF;
  border-radius: 50%;
  background: transparent;
  background-image: url('../images/play.png');
  background-repeat: no-repeat;
  background-position: 7px center;
  cursor: pointer;
}

.bb-playing {
  vertical-align: middle;
  background-image: url('../images/pause.png');
  background-position: center center;
}

.bb-forward {
  vertical-align: middle;
  display: inline-block;
  height: 32px;
  width:  32px;
  background: transparent;
  background-image: url('../images/forward.png');
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.bb-rewind {
  vertical-align: middle;
  display: inline-block;
  height: 32px;
  width:  32px;
  background: transparent;
  background-image: url('../images/rewind.png');
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.bb-trackTime {
  display: inline-block;
  vertical-align: middle;
  font-size: 18px;
  line-height: 30px;
}

.bb-trackLength {
  display: inline-block;
  vertical-align: middle;
  font-size: 18px;
  line-height: 30px;
}

.bb-trackTitle {
  display: inline-block;
  vertical-align: middle;
  font-weight: bold;
  width: 7em;
  overflow: hidden;
  padding-bottom: 3px;
  padding-left: 10px;
}

Add new stylesheet for simple bbplayer demo


    header {
           border: 1px solid white;
           position: relative;
           width: 97.5%;
           margin-top: 0px;
           height: 160px;
           margin-bottom: 10px;
           background-color: lightgray;
           background: url(../../banner.png);
          }
   header nav ul {
          margin-top: 122px;
          padding: 0px;
        }
   header nav li {
          display: inline;
          float: right;
        }
   header nav a {
          font-family: Verdana, sans-serif;
          display: block;
          width: 150px;
          font-weight: bold;
          background-color:#B9D7D9;
          text-align: center;
          padding: 10px;
          text-decoration: none;
          text-transform: uppercase;
          }
   header nav li a:hover {
        color: #000000;
          }
   header nav li a {color: red;
        }
   aside {
          background-color: #B9D7D9;
          border: 1px solid white;
          position: relative;
          float: left;
          margin-top: 10px;
          width: 20%;
          height: 400px;
          margin-bottom: 20px;
          }
    aside ul {
        list-style-type: none;
        position: relative;
        text-align: center;
        }
    aside ul li a {
        text-transform: uppercase;
        text-decoration: none;
        color: red;
        font-family: Verdana, sans-serif;
        font-weight: bold;
        padding: 5px;
        display: block;
      }
    aside ul li a:hover {
        color: #000000;
      }
    .contact p {
          text-align: center;
          position: relative;
          margin-top:100px;
          font-family: Verdana, sans-serif;
        }
    .content {
          border: 1px solid white;
          position: relative;
          float: right;
          margin-top: 10px;
          width: 79%;
          margin-bottom: 10px;
          font-family: Verdana, sans-serif;

          }

    footer {
          border: 1px solid white;
          position: relative;
          height: 50px;
          background-color: none;
          clear: both;
          font-family: Verdana, sans-serif;
          background-color: #F4EBC3;
          }

Add stylesheet for index page

Add stylesheet for index page