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

body {
  background-color: #333;
}

div, body {
  margin: 0;
  padding: 0;
}

td {
  margin: 0;
  padding: 0;
}

#log {
  width: 60%;
  float: left;
  padding: 0 10px;
  background-color: #fff;
  font: 10px Tahoma,Verdana,sans-serif;
}

#meta {
  float: left;
  color: #fff;
  background-color: #333;
  padding: 10px;
}

table.chat {
  width: 100%;
  margin: 0;
  padding: 0;
}

td.n {
  margin: 0;
  font-weight: bold;
  text-align: right;
  padding: .1em 5px .1em 10px;
}

td.c {
  margin: 0;
  padding: .1em 10px .1em 5px;
}

/* TODO: Use relative units. */

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

body {
  background-color: #333;
}

div, body {
  margin: 0;
  padding: 0;
}

td {
  margin: 0;
  padding: 0;
}

#log {
  width: 60%;
  float: left;
  padding: 0 10px;
  background-color: #fff;
  font: 11px Tahoma,Verdana,sans-serif;
}

#meta {
  float: left;
  color: #fff;
  background-color: #333;
  padding: 10px;
}

table.chat {
  width: 100%;
  margin: 0;
  padding: 0;
}

td.n {
  margin: 0;
  font-weight: bold;
  text-align: right;
  padding: .1em 5px .1em 10px;
}

td.c {
  margin: 0;
  padding: .1em 10px .1em 5px;
}

Increase default font size a little.

Increase default font size a little.


.blog p {
  text-align: left;
  font-size: 1em;
}
#line_break {
  border: 1px solid grey;
  width: 98%;
  margin: auto;
}
.blog #title_font {}

.blog #date_font {}

h4 {
  font-weight: bold;
}

a:link {
  text-decoration: none;
  color: #CBFCC5;
}

a:hover {
  text-decoration: none;
  color: #3F8EAB;

}

.blog h1 {
  font-family: Muli;
}

Add new font-family to blog stylesheet.

Add new font-family to blog stylesheet.


html, body {
  padding: 0;
  margin: 0;
  text-align: center;
}

canvas {
  border: 1px solid black;
  height: 98vh;
  width: 98vh;
}

html, body {
  padding: 0;
  margin: 0;
  text-align: center;
}

canvas {
  border: 1px solid black;
  height: 98vmin;
  width: 98vmin;
}

Update to vmin for all form factors

Update to vmin for all form factors


@import "./ViewTemplate.css";
@import "./VideoDisabledMessage.css";

.MainView {
  height: 100%;
  position: relative;
}

.MainView-appBar {
  z-index: 5;
}

.MainView-title {
  flex-grow: 1;
}

.MainView-content {
  height: calc(100% - 56px);
}

@import "./ViewTemplate.css";
@import "./VideoDisabledMessage.css";

.MainView {
  height: 100%;
  position: relative;
}

.MainView-appBar {
  z-index: 5;
}

.MainView-title {
  overflow: hidden;
  flex-grow: 1;
}

.MainView-content {
  height: calc(100% - 56px);
}

Fix long title overflow in AppBar.

Fix long title overflow in AppBar.


/* header styling */
.header {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 20px 10px;
}

.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

.header a.title {
  font-size: 25px;
  font-weight: bold;
}

.header a.title:hover {
  font-size: 25px;
  font-weight: bold;
  color: #f2f2f2;
  text-decoration: none;
}

body {
  font-family: Arial;
  font-size: 17px;
  margin: 0;
  background-color: white;
}

/* header styling */
.header {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 20px 10px;
}

.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

.header a.title {
  font-size: 25px;
  font-weight: bold;
}

body {
  font-family: Arial;
  font-size: 17px;
  margin: 0;
}

h3.center{
    text-align: center;
}

div.center {
    text-align: center;
}

div.select {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    padding: 30px;
}

div.bar-chart {
    margin-left: auto;
    margin-right: auto;
    width: 75%;
}

div.table {
    padding-top: 75px;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

.pagination {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    text-align: center;
}

.pagination input {
    color: black;
    /*float: left;*/
    padding: 8px 16px;
    text-decoration: none;
}

.pagination input:hover{background-color: rgb(50, 144, 182);}

Add stylings for bar chart similar to compare and for pagination


.ripple {
    animation-fill-mode: both;
    animation-duration: 1s;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeUp {
    animation-name: fadeUp;
}

@keyframes doTheWave {
    to {
      transform: translateY(100px);
    }
}

.doTheWave {
    animation-name: doTheWave;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

Add two animations including the default fadeUp


.navbar {
	margin-top: 30px;
}

.cover-art, .artist-image {
  max-height: 16em;
  text-align: center;
}
/* line 55, ../sass/app.scss */
.cover-art img, .artist-image img {
  max-height: inherit;
}

/* line 61, ../sass/app.scss */
.release-group-tile .cover-art, .release-tile .cover-art {
  height: 8em;
  max-height: 8em;
}
h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child {
  margin-top: 0;
}

.release-group-tile, .release-tile {
  margin-bottom: 20px;
}

.release-tiles > :nth-child(2n+1), .release-group-tiles > :nth-child(2n+1) { clear: both; }

.tile-labels { float: right; }

.navbar {
	margin-top: 30px;
}

.cover-art, .artist-image {
  max-height: 16em;
  text-align: center;
}
/* line 55, ../sass/app.scss */
.cover-art img, .artist-image img {
  max-height: inherit;
}

/* line 61, ../sass/app.scss */
.release-group-tile .cover-art, .release-tile .cover-art {
  height: 8em;
  max-height: 8em;
}
.release-group-tile h3, .release-tile h3 {
  margin-top: 0;
}

.release-group-tile, .release-tile {
  margin-bottom: 20px;
}

.release-tiles > :nth-child(2n+1), .release-group-tiles > :nth-child(2n+1) { clear: both; }

.tile-labels { float: right; }

Remove padding on tile headers more directly.


.root {
  padding: var(--padding);
  max-height: 18rem;
  overflow: auto;
  box-sizing: border-box;
  width: 20rem;
  max-width: 100%;
  line-height: var(--lineHeight);
}

.header {
  border-bottom: var(--borderBottom);
  text-align: end;
  margin-bottom: 0.25rem;
}

.list {
  list-style-type: none;
  color: var(--color);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.item {
  margin: 0;
  padding: 0;

  &:not(:last-of-type) {
    margin-bottom: var(--itemMargin);
  }

  &:not(:first-of-type) {
    border-top: var(--borderWidth) var(--borderStyle) var(--borderColor);
    padding-top: var(--itemPadding);
  }
}

.loading {
  text-align: center;
}

.root {
  padding: var(--padding);
  max-height: 18rem;
  overflow: auto;
  box-sizing: border-box;
  width: 20rem;
  max-width: 100%;
  line-height: var(--lineHeight);
}

.header {
  border-bottom: var(--borderBottom);
  text-align: end;
  text-align: right;
  margin-bottom: 0.25rem;
}

.list {
  list-style-type: none;
  color: var(--color);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.item {
  margin: 0;
  padding: 0;

  &:not(:last-of-type) {
    margin-bottom: var(--itemMargin);
  }

  &:not(:first-of-type) {
    border-top: var(--borderWidth) var(--borderStyle) var(--borderColor);
    padding-top: var(--itemPadding);
  }
}

.loading {
  text-align: center;
}

Fix IE x wrong spot issue

Fix IE x wrong spot issue

closes FALCOR-392

Test Plan
* Check that opportuniteis styling is not messed up in all browsers

Change-Id: Ibcc2b2b48b6ca44bf1c73b3487b3f9baab1eb9bd
Reviewed-on: https://gerrit.instructure.com/117361
Reviewed-by: Dan Minkevitch <2591e5f46f28d303f9dc027d475a5c60d8dea17a@instructure.com>
Tested-by: Jenkins
QA-Review: Dan Sasaki <ae19fabf7fe19dff310008c9b6a4d2ec84d311d8@instructure.com>
Product-Review: Aaron Kc Hsu <089edc94045de3d9f5f372fb17706d21afcc259f@instructure.com>


#pulsarapp {
  width: 800px;
  margin: auto;
}

button {
  margin: 10px;
}

.job {
  padding: 20px;
}

.console {
  border-radius: 4px;
  font-family: Courier;
  color: #CCCCCC;
  background: #000000;
  min-height: 20px;
  margin-bottom: 20px;
  font-size: 12px;
  padding: 10px;
}

#websocket-feedback {
  display: none;
}

.mt10 {
  margin-top: 10px;
}

.mt20 {
  margin-top: 20px;
}

.mt30 {
  margin-top: 30px;
}

.mb10 {
  margin-bottom: 10px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

#pulsarapp {
  width: 800px;
  margin: auto;
}

button {
  margin: 10px;
}

.job {
  padding: 20px;
}

.console {
  overflow: auto;
  border-radius: 4px;
  font-family: Courier;
  color: #CCCCCC;
  background: #000000;
  min-height: 20px;
  margin-bottom: 20px;
  font-size: 12px;
  padding: 10px;
}

#websocket-feedback {
  display: none;
}

.mt10 {
  margin-top: 10px;
}

.mt20 {
  margin-top: 20px;
}

.mt30 {
  margin-top: 30px;
}

.mb10 {
  margin-bottom: 10px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

Set overflow of console output in Web client.


body {
    font-family: monospace;
    background-color: #444;
}

.window {
    background-color: #444;
    font-size: 12px;
}

.window .window-content, .window.private-1on1 .window-content {
    background-color: black;
}

.window .timestamp {
    margin-right: 8px;
}

.window .window-messages {
    color: #A5A5A5;
}

.window .line.day-divider .body {
    background-color: #1D2F1E;
    color: #AFAFAF;
}

.window .window-toolbar .form-control {
    background-color: black;
}

.window .window-add-text-container textarea:focus {
    background-color: #222;
}

.window .window-toolbar {
    border-top: 1px solid #A5A5A5;
}

.window .window-toolbar .btn, .window .window-buttons.flex-row {
    background-color: #222;
}

.window .window-members .gravatar {
    opacity: 0.3;
}

Add hacker theme css file

Add hacker theme css file


/*
https://coolors.co/087e8b-ff5a5f-33312e-f5f5f5-ff9042
metallic seaweed: rgba(8, 126, 139, 1);
pastel red: rgba(255, 90, 95, 1);
jet: rgba(51, 49, 46, 1);
white smoke: rgba(245, 245, 245, 1);
mango tango: rgba(255, 144, 66, 1);*/

.page {
	background-image: url('./custom/background.jpg');
	background-size: cover;
}

.main-content {
	background-color: #33312e;
	margin-top: 250px;
	height: 200px;
}

.avatar {
	border: 1px solid black;
	width: 150px;
	height: 150px;
}

/*
https://coolors.co/087e8b-ff5a5f-33312e-f5f5f5-ff9042
metallic seaweed: rgba(8, 126, 139, 1);
pastel red: rgba(255, 90, 95, 1);
jet: rgba(51, 49, 46, 1);
white smoke: rgba(245, 245, 245, 1);
mango tango: rgba(255, 144, 66, 1);*/

.container {
	background-image: url('./custom/background.jpg');
	background-size: cover;
}

.main-content {
	background-color: #33312e;
	margin-top: 250px;
	height: 200px;
}

.avatar {
	border: 1px solid black;
	width: 150px;
	height: 150px;
}

Put background image on container.

Put background image on container.


div.figure p.caption {
    position: relative;
}

article.center-title > h2 {
    position: relative;
    align: center;
    text-align: center;
}

table.citation {
    font-size: 0.6em;
    margin-top: 30px;
}

img.align-right {
    margin-top: 1em;
}

Add some space above right aligned images


body {
  font: 14px "Helvetica Neue Light", "Lucida Grande", "Calibri", "Arial", sans-serif;
  padding-left: 40px;
}

h1 {
  padding-top: 20px;
  font-weight: bold;
  font: 24px; /* "Helvetica Neue Light", "Lucida Grande", "Calibri", "Arial", sans-serif; */
}

p {
	margin-top: 5px;
	padding-left: 20px;
}

.fail {
	background: url( ../images/fail-16.png ) no-repeat;
  padding-left: 20px;
	color: red;
}

.fail_in_summary {
  color: red;
}

.spec {
  margin: 5px;
}

.passed {
  background-color: lightgreen;
}

.failed {
  background-color: pink;
}

.resultMessage {
  white-space: pre;
}

.stackTrace {
  white-space: pre;
  font-size: .8em;
  margin-left: 10px;
}

body {
  font: 14px "Helvetica Neue Light", "Lucida Grande", "Calibri", "Arial", sans-serif;
  padding-left: 40px;
}

h1 {
  padding-top: 20px;
  font-weight: bold;
  font: 24px; /* "Helvetica Neue Light", "Lucida Grande", "Calibri", "Arial", sans-serif; */
}

p {
	margin-top: 5px;
	padding-left: 20px;
}

.fail {
	background: url( ../images/fail-16.png ) no-repeat;
  padding-left: 20px;
	color: red;
}

.fail_in_summary {
  color: red;
}

.spec {
  margin: 5px;
}

.passed {
  background-color: lightgreen;
}

.failed {
  background-color: pink;
}

.resultMessage {
  white-space: pre;
}

.stackTrace {
  white-space: pre;
  font-size: .8em;
  margin-left: 10px;
  height: 5em;
  overflow: auto;
  border-left: 1px solid red;
  padding-left: 5em;
}

Add table rounder javascript class

Add table rounder javascript class


body {
  background-color: #03041c;
  color: #c6c6c9;
  font-family: pt-sans, sans-serif;
}

.footer a {
  color: #c6c6c9;
  font-family: pt-sans, sans-serif;
  font-size: 20px;
  text-decoration: none;
  text-align: center;
  width: 200px;
  bottom: 10px;
}

body {
  background-color: #03041c;
  color: #c6c6c9;
  font-family: pt-sans, sans-serif;
}

main{
  line-height: 1.5em;
  margin: 10%;
}
.footer a {
  color: #c6c6c9;
  font-family: pt-sans, sans-serif;
  font-size: 20px;
  text-decoration: none;
  text-align: center;
  width: 200px;
  bottom: 10px;
}

Add styling to main tag

Add styling to main tag

I added a line-height and margins to improve readability.

Have multiple stylesheets can get cumbersome, one gets more attention than the other. I paired my stylesheets down to one to reduce confusion.


.flag_and_country {
	float: right;
}

.country {
	float: right;
}

.flag {
	float: right;
}

.tip {
	float: right;
}

th.header {
    background-image: url(../img/small.gif);
    cursor: pointer;
    font-weight: bold;
    background-repeat: no-repeat;
    background-position: right top;
    padding-left: 20px;
    border-right: 1px solid #dad9c7;
    margin-left: -1px;
}

th.headerSortDown {
    background-image: url(../img/small_desc.gif);
    background-color: #9d9d9d;
}

th.headerSortUp {
    background-image: url(../img/small_asc.gif);
    background-color: #9d9d9d;
}

.flag_and_country {
	float: right;
}

.country {
	float: right;
	position: absolute;
}

.flag {
	float: right;
	position: absolute;
}

.tip {
	float: right;
}

th.header {
    background-image: url(../img/small.gif);
    cursor: pointer;
    font-weight: bold;
    background-repeat: no-repeat;
    background-position: right top;
    padding-left: 20px;
    border-right: 1px solid #dad9c7;
    margin-left: -1px;
}

th.headerSortDown {
    background-image: url(../img/small_desc.gif);
    background-color: #9d9d9d;
}

th.headerSortUp {
    background-image: url(../img/small_asc.gif);
    background-color: #9d9d9d;
}

Add absolute position to tips

Add absolute position to tips


body {
    height: 100%;
}

iframe {
    border: 0;
}

.fill-height {
    height: 100%;
}

.menu-item {
    display: block;
    max-height: 40px;
    line-height: 40px;
    padding: 0px 28px;
}

.menu-parent-item {
    color: #888;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.menu-sub-item {
    text-transform: none;
    color: #333;
}

.md-tab.md-active {
    color: #000000 !important;
}

body {
    height: 100%;
}

iframe {
    border: 0;
}

md-tabs-content-wrapper, md-tab-content, md-tab-content > div, .fill-height {
    height: 100%;
}

.menu-item {
    display: block;
    max-height: 40px;
    line-height: 40px;
    padding: 0px 28px;
}

.menu-parent-item {
    color: #888;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.menu-sub-item {
    text-transform: none;
    color: #333;
}

.md-tab.md-active {
    color: #000000 !important;
}

Fix height of preview tab

Fix height of preview tab

The preview iframe should always use the full height of the tab.


/* custom properties */

/* custom selectors */

/* usage */h1,h2,h3,h4,h5,h6{color:#000;color:rgba(0,0,0,.9)}.highlight,pre{background:#212121;color:#f5f5f5}.highlight .string,pre .string{color:#ffeb3b}.highlight .comment,pre .comment{color:#727272}.highlight .keyword,pre .keyword{color:#ff4081}.highlight .built_in,pre .built_in{color:#00bcd4}

Remove comments in CSS files

Remove comments in CSS files

Built from e5ed98f41bc19b03fd90e22ed2b882385dfaa1d4.


.modalContent {
  padding: 0;
  position: relative;
  min-height: 500px;
}

.modalFooter {
  width: 100%;
  display: flex;
  justify-content: space-between
}

.searchField {
  margin-bottom: calc(var(--control-margin-bottom) / 2);
}

.resetButtonWrap {
  &.resetButton {
     border-color: rgba(0, 0, 0, 0.62);
     color: rgba(0, 0, 0, 0.62);
   }
}

.searchGroupWrap {
  margin-bottom: .5rem;
}

.cancelButton {
  margin-right: auto;
}

.modalContent {
  padding: 0;
  position: relative;
  min-height: 50vh;
}

.modalFooter {
  width: 100%;
  display: flex;
  justify-content: space-between
}

.searchField {
  margin-bottom: calc(var(--control-margin-bottom) / 2);
}

.resetButtonWrap {
  &.resetButton {
     border-color: rgba(0, 0, 0, 0.62);
     color: rgba(0, 0, 0, 0.62);
   }
}

.searchGroupWrap {
  margin-bottom: .5rem;
}

.cancelButton {
  margin-right: auto;
}

@media (min-height: 5700px) {
  .modalContent {
    min-height: 70vh;
  }
}

Fix styles for permission modal.

UIU-1326: Fix styles for permission modal.


@font-face {
  font-family: 'Montserrat-Black';
  src: url('Montserrat-Black.eot?#iefix') format('embedded-opentype'),  url('Montserrat-Black.otf')  format('opentype'),
	     url('Montserrat-Black.woff') format('woff'), url('Montserrat-Black.ttf')  format('truetype'), url('Montserrat-Black.svg#Montserrat-Black') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat-Bold';
  src: url('Montserrat-Bold.eot?#iefix') format('embedded-opentype'),  url('Montserrat-Bold.otf')  format('opentype'),
	     url('Montserrat-Bold.woff') format('woff'), url('Montserrat-Bold.ttf')  format('truetype'), url('Montserrat-Bold.svg#Montserrat-Bold') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat-Black';
  src: font-url('Montserrat-Black.eot?#iefix') format('embedded-opentype'),  font-url('Montserrat-Black.otf')  format('opentype'),
	     font-url('Montserrat-Black.woff') format('woff'), font-url('Montserrat-Black.ttf')  format('truetype'), font-url('Montserrat-Black.svg#Montserrat-Black') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat-Bold';
  src: font-url('Montserrat-Bold.eot?#iefix') format('embedded-opentype'),  font-url('Montserrat-Bold.otf')  format('opentype'),
	     font-url('Montserrat-Bold.woff') format('woff'), font-url('Montserrat-Bold.ttf')  format('truetype'), font-url('Montserrat-Bold.svg#Montserrat-Bold') format('svg');
  font-weight: normal;
  font-style: normal;
}

Use font-url instead of url

Use font-url instead of url


.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.modal-content {
  font-size: 140%;
}

main {
  flex: 1;
}

footer {
  padding: 1em;
}

.center {
  margin-left: auto;
  margin-right: auto;
}

.light {
  color: #ddd;
}
.dark {
  color: #666;
}

/* from http://www.mademyday.de/css-height-equals-width-with-pure-css.html */
.ratio-1by1 {
  position: relative;
}
.ratio-1by1:before {
  content: '';
  display: block;
  padding-top: 100%;
}
.ratio-1by1>* {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.modal-content {
  font-size: 140%;
}

main {
  flex: 1 0 auto;
}

footer {
  padding: 1em;
}

.center {
  margin-left: auto;
  margin-right: auto;
}

.light {
  color: #ddd;
}
.dark {
  color: #666;
}

/* from http://www.mademyday.de/css-height-equals-width-with-pure-css.html */
.ratio-1by1 {
  position: relative;
}
.ratio-1by1:before {
  content: '';
  display: block;
  padding-top: 100%;
}
.ratio-1by1>* {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

Fix an IE related bug

Fix an IE related bug

Now the footer is always on the bottom of the page


.position-relative {
    position: relative;
}

.center-text {
    text-align: center;
}

.space_top {
    margin-top: 30px;
}

.hidden {
    display: none;
}

.same-line {
    white-space: nowrap;
}

.blue-section {
    background-color: #004897;
    color: white;
}

.field-boolean input[type="checkbox"] {
    margin-top: 20px;
    width: initial;
    height: initial;
}

.donation_success h1 {
    font-size: 50px;
    line-height: 50px;
}

.donation_success .thank_you_container {
    margin-bottom: 20px;
    color: black;
}

/* Problems displaying image fields in forms */
.form-field input[type=file].form-control {
    height: initial !important;
}

.quote {
    font-size: 20px !important;
}

.position-relative {
    position: relative;
}

.center-text {
    text-align: center;
}

.space_top {
    margin-top: 30px;
}

.hidden {
    display: none;
}

.same-line {
    white-space: nowrap;
}

.blue-section {
    background-color: #004897;
    color: white;
}

.field-boolean input[type="checkbox"] {
    margin-top: 20px;
    width: initial;
    height: initial;
}

.donation_success {
    margin-bottom: 20px;
}

.donation_success h1 {
    font-size: 50px;
    line-height: 50px;
}

.donation_success .thank_you_container {
    margin-bottom: 20px;
    color: black;
}

/* Problems displaying image fields in forms */
.form-field input[type=file].form-control {
    height: initial !important;
}

.quote {
    font-size: 20px !important;
}

Add margin-bottom on confirmation page

Add margin-bottom on confirmation page


/*
 * Mirrormanager2 specific CSS
 */

/* Stealed this from flask-admin */
form.icon button {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: medium none;
    line-height: normal;
    padding: 0;
    text-decoration: none;
}

/* Stealed this from bootstrap */
label, select, button,
input[type="button"],
input[type="reset"],
input[type="submit"],
input[type="radio"],
input[type="checkbox"] {
    cursor: pointer;
}

.blue {
    color:#0066CC;
}

Add some MirrorManager specific CSS

Add some MirrorManager specific CSS

Signed-off-by: Pierre-Yves Chibon <0e23e1aa25183634677db757f9f5e912e5bb8b8c@pingoured.fr>


body {
  background-color: var(--base-color);
  font-family: var(--font-family);
  font-size: 14px;
  word-break: break-word;
  -webkit-text-size-adjust: 100%;
}

a {
  color: var(--link-color);
  text-decoration: none;
}

img {
  max-width: 100%;
}

table {
  display: block;
  width: 100%;
  overflow: auto;
  border-spacing: 0;
  border-collapse: collapse;
}

tr:nth-child(2n) {
  background-color: #f8f8f8;
}

th, td {
  padding: 6px 13px;
  border: 1px solid var(--weak-color);
}

Set style to table element

Set style to table element


.wrapper {
  --height: 95.5vh;
  display: flex;
  /* height declaration, seemingly redundant, is neededto ensure IE 10 & 11 render columns with
  *  proper height. Otherwise they're collapsed in IE. */
  height: var(--height);
  min-height: var(--height);
  flex-direction: column;
  animation: allowLowerThirdAppearanceToCompleteWithoutIntroducingTemporaryScrollbar 0.7s;
}

@keyframes allowLowerThirdAppearanceToCompleteWithoutIntroducingTemporaryScrollbar {
  0%   { overflow: hidden; }
  99%  { overflow: hidden; }
  100% { overflow: auto; }
}

.wrapper {
  --height: 95.5vh;
  display: flex;
  /* height declaration, seemingly redundant, is neededto ensure IE 10 & 11 render columns with
  *  proper height. Otherwise they're collapsed in IE. */
  height: var(--height);
  min-height: var(--height);
  flex-direction: column;
}

Remove animation that changes overflow declaration; intermittently causes scroll bar to appear on stage load


.Legend {
	margin-top: 20px;
	padding: 4px 10px 0;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14);
	overflow: hidden;
	text-align: center;
}

.wrapper {
	display: inline-block;
	vertical-align: top;
	width: 100%;
}

.footnotes {
	font-size: 80%;
}

.container {
	max-width: 180px;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}

.left {
	float: left;
	margin-right: 4px;
}

.right {
	float: right;
	margin-left: 4px;
}

.center {
	overflow: hidden;
}

.center canvas {
	width: 100%;
}

.Legend {
	margin-top: 20px;
	padding: 4px 10px 0;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14);
	overflow: hidden;
	text-align: center;
}

.wrapper {
	display: inline-block;
	vertical-align: top;
	width: 100%;
}

.footnotes {
	font-size: 12px;
}

.container {
	max-width: 180px;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}

.left {
	float: left;
	margin-right: 4px;
}

.right {
	float: right;
	margin-left: 4px;
}

.center {
	overflow: hidden;
}

.center canvas {
	width: 100%;
}

Set unit font size to an even 12px.

Set unit font size to an even 12px.


#dwls-results {
	position: absolute;
	z-index: 9999;
	list-style: none;
	margin: 0;
	padding: 0;
	background-color: #204a87;
	color: #fff;
	width: 13em;
}

#dwls-results .dwls_thumbnail_wrapper {
	float: left;
	width: 50px;
	height: 50px;
	background-color: #000;
	background-size: contain;
	margin: 5px;
}

.dwls_meta {
	font-size: .8em;
}

.dwls_excerpt {
	clear: left;
}

Clear the excerpt in CSS

Clear the excerpt in CSS


/* Common Styling */

body{
    background: #fff;
    color:#222;
    font-family: 'Roboto',Verdana,Helevetica;
    font-size: 18px;
    font-weight: 300;
}

/* Layout */

main{
    max-width: 500px;
    margin: 6em auto 0.8em;
    padding: 1em;
}

ul{
    padding: 0;
}

li{
    display: inline-block;
    margin: 0 auto;
    text-align: center;
}

/* Styling */

li a{
    border-bottom: 0;
}

a{
    font-weight: 300;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid ;
}

a:hover{
    opacity: 0.6;
}

h2{
    font-weight: 300;
    margin-bottom: 0;
}

/* Media Queries*/
media screen and (min-width: 600px) {
  main {
    padding-top: 140px;
  }

  section  {
    margin-bottom: 80px;
  }
}

/* Common Styling */

body{
    background: #fff;
    color:#222;
    font-family: 'Roboto',Verdana,Helevetica,sans-serif;
    font-size: 18px;
    font-weight: 300;
}

/* Layout */

main{
    max-width: 500px;
    margin: 6em auto 0.8em;
    padding: 1em;
}

ul{
    padding: 0;
}

li{
    display: inline-block;
    margin: 0 auto;
    text-align: center;
}

/* Styling */

li a{
    border-bottom: 0;
}

a{
    font-weight: 300;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid ;
}

a:hover{
    opacity: 0.6;
}

h2{
    font-weight: 300;
    margin-bottom: 0;
}

/* Media Queries*/
media screen and (min-width: 600px) {
  main {
    padding-top: 140px;
  }

  section  {
    margin-bottom: 80px;
  }
}

Add sans-serif for fallback rendering

Add sans-serif for fallback rendering


/* =Reveal.js
-------------------------------------------------------------- */
body.reveal {
    text-align: center;
}

.reveal h1, .branding h1 {
    font-size: 2em;
    padding-bottom: .5em;
    line-height: 1em;
}

.reveal h2 {
    line-height: 1.5em;
}

.reveal ul li {
    padding: 2px;
    line-height: 1.5em;
}

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

/* =Misc
-------------------------------------------------------------- */
.alignleft {
    display: inline !important;
    float: left !important;
    margin-right: 1.5em !important;
}

.alignright {
    display: inline !important;
    float: right !important;
    margin-left: 1.5em !important;
}

.aligncenter {
    clear: both !important;
    display: block !important;
    margin: 0 auto !important;
}

body.admin-bar .reveal {
    top: -28px;
}

body.mceContentBody.reveal {
    margin: 50px auto;
    width: 960px;
    zoom: 0.6;
}

/* =Reveal.js
-------------------------------------------------------------- */
body.reveal {
    text-align: center;
}

.reveal h1, .branding h1 {
    font-size: 2em;
    padding-bottom: .5em;
    line-height: 1em;
}

.reveal h2 {
    line-height: 1.5em;
}

.reveal ul li {
    padding: 2px;
    line-height: 1.5em;
}

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

.reveal section img {
	box-shadow: 0 !important;
}

/* =Misc
-------------------------------------------------------------- */
.alignleft {
    display: inline !important;
    float: left !important;
    margin-right: 1.5em !important;
}

.alignright {
    display: inline !important;
    float: right !important;
    margin-left: 1.5em !important;
}

.aligncenter {
    clear: both !important;
    display: block !important;
    margin: 0 auto !important;
}

body.admin-bar .reveal {
    top: -28px;
}

body.mceContentBody.reveal {
    margin: 50px auto;
    width: 960px;
    zoom: 0.6;
}

Remove box shadow from images

Remove box shadow from images


body {
    background: #fefefe;

    font-family: Sans-Serif;

    line-height: 1.5;
}

header {
    padding: 1em;
    padding-bottom: 4em;

    text-align: center;

    color: #333;
    border-bottom: 0.1em solid #bbb;

    background-image: url(../images/bgnoise_lg.png);
}

header .description {
    color: #888;
}

article {
    margin-left: auto;
    margin-right: auto;

    max-width: 768px;
}

article section {
    margin-bottom: 2em;
}

article h2 {
    margin-top: 2em;
}

textarea {
    width: 100%;
}

pre {
    background: #fafefe;
    padding: 0.5em;
}

article .description {
    margin: 1em;
    padding: 1em;

    max-width: 60em;

    background: #fafafa;

    border: 0.1em solid #eee;
}

article .description h2 {
    margin: 0.83em 0;
}

table {
    width: 100%;
}

.demonstration tfoot {
    background: #fafafa;
}

.controls {
    overflow: auto;
}
.per-page-container {
    margin: 1em;

    float: left;
}
.search-container {
    margin: 1em;

    float: right;
}

body {
    background: #fefefe;

    font-family: Sans-Serif;

    line-height: 1.5;
}

header {
    padding: 1em;
    padding-bottom: 4em;

    text-align: center;

    color: #333;
    border-bottom: 0.1em solid #bbb;

    background-image: url(../images/bgnoise_lg.png);
}

header .description {
    color: #888;
}

article {
    display: block !important;

    margin-left: auto;
    margin-right: auto;

    max-width: 768px;
}

article section {
    margin-bottom: 2em;
}

article h2 {
    margin-top: 2em;
}

textarea {
    width: 100%;
}

pre {
    background: #fafefe;
    padding: 0.5em;
}

article .description {
    margin: 1em;
    padding: 1em;

    max-width: 60em;

    background: #fafafa;

    border: 0.1em solid #eee;
}

article .description h2 {
    margin: 0.83em 0;
}

table {
    width: 100%;
}

.demonstration tfoot {
    background: #fafafa;
}

.controls {
    overflow: auto;
}
.per-page-container {
    margin: 1em;

    float: left;
}
.search-container {
    margin: 1em;

    float: right;
}

Fix centering in demo at Firefox

Fix centering in demo at Firefox


.reveal blockquote {
  width: 85%;
}
.reveal a {
  color: orange;
}
.highlight {
  color: lightblue;
}
cite {
  color: lightgrey;
}

.reveal blockquote {
  width: 85%;
}
.deemphasized-title {
  color: rgba(220, 163, 163, 0.8);
  font-size: 0.75em;
}
.reveal a {
  color: orange;
}
.highlight {
  color: lightblue;
}
cite {
  color: lightgrey;
}

Add a title to help people keep track of where they are the in presentation


.reveal blockquote {
  width: 85%;
}
.deemphasized-title {
  color: rgba(220, 163, 163, 0.8);
  font-size: 0.75em;
}
.reveal p {
  color: #ddd;
}
.reveal a {
  color: orange;
}
.highlight {
  color: lightblue;
}
cite {
  color: rgba(190, 228, 253, 0.67)
}

.reveal blockquote {
  width: 85%;
}
.deemphasized-title {
  color: rgba(220, 163, 163, 0.8);
  font-size: 0.75em;
}
.dim {
    opacity: 0.2;
}
.reveal p {
  color: #ddd;
}
.reveal a {
  color: orange;
}
.highlight {
  color: lightblue;
}
cite {
  color: rgba(190, 228, 253, 0.67)
}

Add a dimmer class to de-emphasize text

Add a dimmer class to de-emphasize text


.root {
    display: block;
    position: absolute;
    z-index: 9000;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 100%;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -50px;
    transform: scale(0);
    cursor: pointer;
}

.root[color="light"] {
    background-color: rgba(255, 255, 255, 0.2);
}

.root[animated] {
    transition: transform 1s, background-color 1s;
    transform: scale(12);
    background-color: transparent;
}

.reference {
    position: relative !important;
    overflow: hidden !important;
}

.root {
    display: block;
    position: absolute;
    z-index: 9000;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 100%;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -50px;
    transform: scale(0);
    cursor: pointer;
    pointer-events: none;
}

.root[color="light"] {
    background-color: rgba(255, 255, 255, 0.2);
}

.root[animated] {
    transition: transform 1s, background-color 1s;
    transform: scale(12);
    background-color: transparent;
}

.reference {
    position: relative !important;
    overflow: hidden !important;
}

Fix e-ripple.vue cover child element

:bug: Fix e-ripple.vue cover child element


.quote-author:before {
    content: "-";
}

.tag_list {
  font-size: 10px;
  float: left;
  position: inherit;
  width: auto;
  padding: 0;
  list-style: none;
}

.avatar {
  margin-right: 10px;
}

.display_none {
  display: none;
}

footer.inner {
  margin-left: auto;
  margin-right: auto;
}
hr {
  border-top: 1px solid #E3E3E3;
}

nav {
  float: right;
  margin-top: -50px;
}

.post-content {
  width: 90% !important;
}

.clickable {
  cursor: pointer;
}

.quote-author:before {
    content: "-";
}

.tag_list {
  font-size: 10px;
  float: left;
  position: inherit;
  width: auto;
  padding: 0;
  list-style: none;
}

.avatar {
  margin-right: 10px;
}

.display_none {
  display: none;
}

footer.inner {
  margin-left: auto;
  margin-right: auto;
}

hr {
  border-top: 1px solid #E3E3E3 !important;
}

nav {
  float: right;
  margin-top: -50px;
}

.post-content {
  width: 90% !important;
}

.clickable {
  cursor: pointer;
}

Make our custom colour take precedence over Bootstrap's :D


.about{
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
}

.about__text-container__text{
	font-size: 1.1rem;
	margin-top: 1rem;
}

.about{
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
}

.about__text-container__text{
	font-size: 1.1rem;
	margin-top: 1rem;
	line-height: 1.6rem;
}

Set line-height on about texts

Set line-height on about texts


.select { margin: 0px; }

body {
bgcolor : #999999;
background= 'images/backstripes.gif';
padding-top : 0;
padding-right : 0;
padding-bottom : 0;
padding-left : 0;
border-top-width : 0;
border-right-width : 0;
border-bottom-width : 0px;
border-left-width : 0;
margin : 0;
}

#queries a{
	color: inherit;
}

a.navigation
{
    color:#999; font-weight:bold; text-decoration:none;
}
a.navigation:hover
{
    color:#333; font-weight:bold; text-decoration:none;
}

#query_results_content_table {
    background-color: #DFF0FF
}

.coverage_map_header{
    padding-left: 12px;
 }

Fix alignment on coverage map headers

Fix alignment on coverage map headers


body.error .inner .icon {
    color: #08C;
    width: auto;
    font-size: 100px;
    position: absolute;
    left: -38px;
}

body.error .inner section {
    margin-left:60px;
    height:400px;
}

body.error .inner section h2  {
    margin-bottom:30px;
}

body.error .inner section h2 em {
    font-style: normal;
    opacity: 0.7;
}

body.error .inner section p {
    line-height: 40px;
    font-size:30px;
}

body.error #start-new-test-form .icon-play-circle {
    display:none;
}

body.error #test-options .test-options-set {
    border-radius: 5px;
    padding: 10px;
    display:inline-block;
    width:24%;
}

body.error #test-options .test-options-set input {
    width:auto;
}

body.error #test-options .test-options-set:hover {
    background-color:#e5e5e5;
}

Fix error page new test form layout

Fix error page new test form layout


#katas-navigation {
  width: 100%;
  color: var(--navigation-foreground-color);
  background-color: var(--navigation-background-color);
}
#katas-navigation .headline,
#katas-navigation a {
  padding: 0.5em;
}

#katas-navigation a {
  background-color: var(--navigation-hover-color);
  color: var(--navigation-foreground-color);
  margin-right: 1px;
  text-decoration: none;
}
#katas-navigation a.selected:hover,
#katas-navigation a:hover {
  color: var(--navigation-hover-color);
  background-color: var(--navigation-hover-background-color);
}
#katas-navigation a.selected {
  background-color: color(var(--navigation-hover-background-color) blackness(50%));
}
#katas-navigation .scrollable {
  overflow: auto;
  width: 40%;
  display: flex;
}

#katas-navigation {
  width: 100%;
  color: var(--navigation-foreground-color);
  background-color: var(--navigation-background-color);
}
#katas-navigation .headline,
#katas-navigation a {
  padding: 0.5em;
  white-space: nowrap;
}

#katas-navigation a {
  background-color: var(--navigation-hover-color);
  color: var(--navigation-foreground-color);
  margin-right: 1px;
  text-decoration: none;
}
#katas-navigation a.selected:hover,
#katas-navigation a:hover {
  color: var(--navigation-hover-color);
  background-color: var(--navigation-hover-background-color);
}
#katas-navigation a.selected {
  background-color: color(var(--navigation-hover-background-color) blackness(50%));
}
#katas-navigation .scrollable {
  overflow: auto;
  display: flex;
}

Make the kata navigation full width.

Make the kata navigation full width.


.container {
  position: relative;
  margin: 0 12px 16px;
  font-size: 18px;

  & > * {
    display: block;
    padding: 0;
    margin: auto;
  }

  & > img {
    width: 96px;
    height: 96px;
    border: 2px solid #f09442;
    border-radius: 50%;
  }

  & > p {
    color: #fff;
    background: #f09442;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    position: absolute;
    transform: translate(48px, -12px) translateX(-50%);
  }

  @media (hover: hover) {
    & > .tooltip {
      visibility: hidden;
      transition: opacity 200ms ease;
      opacity: 0;
    }

    &:hover > .tooltip,
    &:focus > .tooltip {
      visibility: visible;
      opacity: 1;
    }
  }
}

.container {
  position: relative;
  margin: 0 12px 16px;
  font-size: 18px;

  & > * {
    display: block;
    padding: 0;
    margin: auto;
  }

  & > img {
    width: 96px;
    height: 96px;
    border: 2px solid #f09442;
    border-radius: 50%;
  }

  & > p {
    color: #fff;
    background: #f09442;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    position: absolute;
    transform: translate(48px, -12px) translateX(-50%);
  }

  & > .tooltip {
    visibility: hidden;
    transition: opacity 200ms ease;
    opacity: 0;
  }

  @media (hover: hover) {
    &:hover > .tooltip,
    &:focus > .tooltip {
      visibility: visible;
      opacity: 1;
    }
  }
}

Revert "fix user nickname display on firefox and mobile devices"

This reverts commit fad80669a66a627d1ae51c0e817226c8c3dc9bd7.


body {
  font-family: Arial;
}
h1 {
  color: blue;
}
.headline {
  font-size: 24px;
}

td {
  padding: 5px;
}

Add fixture for remote testing.

Add fixture for remote testing.


@import 'css/theme.css';

.wy-nav-side {
    background: rgb(240, 240, 240);
}

.wy-side-nav-search {
    background: #556270;
}

.wy-side-nav-search input[type=text] {
    border-radius: 0;
}

.wy-nav-content-wrap {
    position: relative;
}

.wy-nav-content {
    background: #FCFCFC;
    max-width: 900px;
}

.wy-menu-vertical a:hover {
    background-color: #fcfcfc;
    color: #404040;
}

.wy-menu-vertical a {
    color: #909090;
}

.wy-menu-vertical li.current > a {
    border: none;
}

.wy-menu-vertical li.current a {
    border: none;
}

.wy-menu-vertical li code {
    font-size: 100%;
}

.rst-versions {
    border-top: none;
}

Hide default border on top of RST versions.


#canvasloader-container {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    margin-left: -25px;
    padding: 4px 0px;
    text-align: center;
    z-index: 2000;
    background-color: #333;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
}

*[data-toggle="ajax"] {
    pointer-events: none;
}

#canvasloader-container--overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 100;
}

#canvasloader-container {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    margin-left: -25px;
    padding: 4px 0px;
    text-align: center;
    z-index: 2000;
    background-color: #333;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
}

*[data-toggle="ajax"] {
    pointer-events: none;
}
/* Hinclude workaround because it does not trigger ajaxComplete event */
[class^='include_'] *[data-toggle="ajax"] {
    pointer-events: auto;
}

#canvasloader-container--overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 100;
}

Disable pointer-events restriction for hinclude


/* navbar link color: #59445C */
/* navbar bg color: #EEE */

.html {
	font-size: 14px;
}

.main {
  width: 80%;
  height: 90%;
  margin: .5rem auto;
}

.navbar {
	width: 100%;
	height: 3rem;
	padding: 1.75rem;
	background-color: #EEE;
}

.navbar__list {
	list-style: none;
}

.navbar__item {
	padding-right: 3rem;
	float: left;
}

.navbar__item--session {
	float: right;
}

.navbar__link {
	color: #59445C;
	font-size: 1.2rem;
	letter-spacing: .1rem;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: 600;
}

.logo {
	z-index: 10;
	margin-top: -3rem;
	height: 15rem;
}

/* navbar link color: #59445C */
/* navbar bg color: #EEE */

.html {
	font-size: 14px;
}

.main {
  width: 80%;
  height: 90%;
  margin: .5rem auto;
}

.navbar {
	width: 100%;
	height: 3rem;
	padding: 1.75rem;
	background-color: #EEE;
}

.navbar__list {
	list-style: none;
}

.navbar__item {
	padding-right: 3rem;
	float: left;
}

.navbar__item--session {
	float: right;
	margin-top: -.3rem;
}

.navbar__link {
	color: #59445C;
	font-size: 1.2rem;
	letter-spacing: .1rem;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: 600;
}

.logo {
	z-index: 10;
	margin-top: -3rem;
	width: 100%;
}

Make logo responsive, tweak nav bar alignment


@font-face {
    font-family: "oswald";
    src: url("../res/fonts/oswald.ttf") format("opentype");
}

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

.splash {
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 999;
}

.splash-text {
  color: #000;
  text-align: center;
  top: 50%;
  position: fixed;
  left: 50%;
  font-family: "oswald";
  font-size: 55px;
  line-height: 1;
  transform: translate(-50%, -50%);
}

@font-face {
    font-family: "oswald";
    src: url("../res/fonts/oswald.ttf") format("opentype");
}

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

.center {
  text-align: center;
}

.splash {
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 999;
}

.splash-text {
  color: #000;
  text-align: center;
  top: 50%;
  position: fixed;
  left: 50%;
  font-family: "oswald";
  font-size: 55px;
  line-height: 1;
  transform: translate(-50%, -50%);
}

Add style to center text

Add style to center text


table {
    width: 100%;
    border-collapse: collapse;
}

th {
    background: #333;
    color: white;
    font-weight: bold;
}

td, th {
    padding: 6px;
    border: 1px solid #ccc;
    text-align: left;
}

.SafeCall {
    background: #bfb;
}

.BlockedCall {
    background: #fbb;
}

.NeutralCall {
    background: #eee;
}

.NavButton {
    font-size: x-large;
    font-family: sans-serif;
    color: blue;
}

.NavSection {
    border-style: solid;
    border-width: 20px;
    border-color: transparent;
}

.TargetTable {
    font-size: x-large;
    font-family: monospace;
}

.CurrentDateTime {
    font-size: large;
    color: blue;
    text-align: center;
    font-family: monospace;
}

.EditBox {
    font-size: 18px;
}

.IconColumn {
    width: 24px;
    height: 38px;
    background: white;
    border: 0;
    padding: 0;
    text-align: center;
    vertical-align: middle;
}

.WhenCell {
    white-space: nowrap;
}

.CallerColumn {
    width: 100%;
}

.CallCountColumn {
    text-align: right;
}

.HistoryColumn {
    text-align: center;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    background: #333;
    color: white;
    font-weight: bold;
}

td, th {
    padding: 6px;
    border: 1px solid #ccc;
    text-align: left;
}

.SafeCall {
    background: #bfb;
}

.BlockedCall {
    background: #fbb;
}

.NeutralCall {
    background: #eee;
}

.NavButton {
    font-size: x-large;
    font-family: sans-serif;
    color: blue;
}

.NavSection {
    border-style: solid;
    border-width: 10px;
    border-color: transparent;
}

.TargetTable {
    font-size: x-large;
    font-family: monospace;
}

.CurrentDateTime {
    font-size: large;
    color: blue;
    text-align: center;
    font-family: monospace;
}

.EditBox {
    font-size: 18px;
}

.IconColumn {
    width: 24px;
    height: 38px;
    background: white;
    border: 0;
    padding: 0;
    text-align: center;
    vertical-align: middle;
}

.WhenCell {
    white-space: nowrap;
}

.CallerColumn {
    width: 100%;
}

.CallCountColumn {
    text-align: right;
}

.HistoryColumn {
    text-align: center;
}

Make space between nav sections smaller.


body {
  -webkit-app-region: drag;
}

code {
  font-family: inherit;
}

.wrapper {
  display: flex;
  flex: 1;
}

.wrapper_vertical {
  flex-direction: column;
}

.content {
  flex: 1;
}

Make the main window draggable

Make the main window draggable


/* browse baseline/plant experiments */
.species-nav .species_item {min-height: 340px; text-align: center;}
.species-nav .species_item h4 {text-align: center;}
.species-nav .species_item ul li {text-align: center;font-size: 94%;}
.species-nav .species_item span {font-size: 700%;/*fallback*/font-size: 5.1vw}
.species-nav .species_item span.red:before {color:#d9534f;} /*animal*/
.species-nav .species_item span.green:before {color:#5cb85c;}/*plants*/
.species-nav .species_item span.blue:before {color:#5bc0de;}/*other*/
.show_more_buttons {text-align: center; margin-top:9px;}

@media (max-width: 768px){
    /*min size for title and icon*/
    .species-nav .species_item span {font-size: 300%;}/*min-size for icons*/
    /* to implement once the min-width is removed
    #species-nav .species_item {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    } */
}

/* browse baseline/plant experiments */
.species-nav .species_item {min-height: 300px; text-align: center;}
.species-nav .species_item h4 {text-align: center;}
.species-nav .species_item ul li {text-align: center;font-size: 94%;}
.species-nav .species_item span {font-size: 700%;/*fallback*/font-size: 5.1vw}
.species-nav .species_item span.red:before {color:#d9534f;} /*animal*/
.species-nav .species_item span.green:before {color:#5cb85c;}/*plants*/
.species-nav .species_item span.blue:before {color:#5bc0de;}/*other*/
.show_more_buttons {text-align: center; margin-top:9px;}

@media (max-width: 768px){
    /*min size for title and icon*/
    .species-nav .species_item span {font-size: 300%;}/*min-size for icons*/
    /* to implement once the min-width is removed
    #species-nav .species_item {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    } */
}

Reduce vertical minimum height of each spcies sction in baseline experiments landing page


/* CSS declarations go here */

/* ###### loginButtons ##### */

.navbar-inverse .form-control .dropdown-menu
{
	color: #208FEA;
}

/* ######  ##### */

/* CSS declarations go here */

/* ###### loginButtons ##### */

#login-email
{
	color: #208FEA;
}

#login-password
{
	color: #208FEA;
}

/* ######  ##### */

Fix white on white => loginButtons

Fix white on white => loginButtons


/*
Additional styling applied to the RTD theme.
*/

/* Better distinction of blockquotes against normal paragraphs. */
.rst-content blockquote {
    margin-left: 0;
    padding: 0 1em;
    border-left: 0.25em solid #ddd;
    color: #777;
}

/* Wrapping the text in AMA */
.hljs.nimrod {
    white-space: pre-wrap
}

Add wrapping for AMA text.

Add wrapping for AMA text.


/*
 * Module: Box Image
 */

:root{
    --box-background-color: var(--color-white);
    --box-border-radius: 4px;
    --box-content-opacity: 25%;
    --box-min-height: 300px;
    --box-padding: 20px;
    --box-paragraph-spacing-top: 15px;
    --box-shadow: 2px 5px 15px 0 rgba(0,0,0, .15);
}

.duotone-filters{
    display: none;
}

.box-image-duotone{
    position: relative;
    width: 100%;
    box-shadow: var(--box-shadow);
    &__image{
        position: relative;
        background-repeat: no-repeat;
        background-size: cover;
        min-height: var(--box-min-height);
        border-radius: var(--box-border-radius);
    }
}

/*
 * Module: Box Image
 */

:root{
    --box-background-color: var(--color-white);
    --box-border-radius: 4px;
    --box-content-opacity: 25%;
    --box-min-height: 300px;
    --box-padding: 20px;
    --box-paragraph-spacing-top: 15px;
    --box-shadow: 2px 5px 15px 0 rgba(0,0,0, .15);
}

.duotone-filters{
    visibility: hidden;
    height: 0;
    display: block;
}

.box-image-duotone{
    position: relative;
    width: 100%;
    box-shadow: var(--box-shadow);
    &__image{
        position: relative;
        background-repeat: no-repeat;
        background-size: cover;
        min-height: var(--box-min-height);
        border-radius: var(--box-border-radius);
    }
}

Fix filter not showing in Firefox.

Fix filter not showing in Firefox.


.textSection {
  margin: 3em auto;
}

.textSection:first-child {
  margin-top: 0;
}

.centered {
  text-align: center;
}

p,
label {
  font-family: Georgia, Times, 'Times New Roman', serif;
  line-height: 1.5em;
}

.link {
  text-decoration: none;
}

.code {
  font-size: 0.75em;
  background-color: $very-light-grey;
  padding: 0.125em 0.5em;
  border-radius: 1px;
}

.usernameForm {
  margin-bottom: 1em;
}

.input {
  outline: none;
  border-bottom: 1px dotted #999;
}

.atPrefix {
  color: black;
  margin-left: 0.4em;
}

.textSection {
  margin: 3em auto;
}

.textSection:first-child {
  margin-top: 0;
}

.centered {
  text-align: center;
}

p,
label {
  font-family: Georgia, Times, 'Times New Roman', serif;
  line-height: 1.5em;
}

.link {
  text-decoration: none;
}

.usernameForm {
  margin-bottom: 1em;
}

.input {
  outline: none;
  border-bottom: 1px dotted #999;
}

.atPrefix {
  color: black;
  margin-left: 0.4em;
}

Remove css block that is not being used

Remove css block that is not being used


#single-script-page #run-script-btn {
    float: right;
}
#single-script-page .ui-collapsible {
    clear: both;
}
#single-script-page .dual-action-footer {
    display: block;
}
#single-script-page ul {
    margin-top: 1em;
}
#single-script-page ul li {
    padding: 0;
}

#single-script-page ul li a {
    margin: 0;
}

#single-script-page #run-script-btn {
    float: right;
}
#single-script-page .ui-collapsible {
    clear: both;
}
#single-script-page .dual-action-footer {
    display: block;
}
#single-script-page .log-list ul {
    margin-top: 1em;
}
#single-script-page .log-list ul li {
    padding: 0;
}

#single-script-page .log-list ul li a {
    margin: 0;
}

Make more specific css rules

Make more specific css rules


.command-panel {
  background: #515151;
  padding: 3px;
}

.command-panel .preview-list {
  max-height: 300px;
  overflow: auto;
  margin-bottom: 3px;
  position: relative;
  background: #161616;
}

.command-panel .preview-list {
  cursor: default;
}

.command-panel .preview-list li.selected {
  background: #444;
}

.command-panel .preview-list:focus li.selected {
  background: #223555;
}

.command-panel .preview-list .path {
  padding-left: 3px;
  color: #f9ee98;
  margin-right: 1ex;
}

.command-panel .preview-list .preview {
  color: #f6f3e8;
}

.command-panel .preview-list .preview .match {
  background-color: rgba(255,255,255,.25);
  padding: 1px;
}

.command-panel .prompt-and-editor {
  display: -webkit-box;
}

.command-panel .prompt {
  color: white;
  font-weight: bold;
  padding: .2em;
}

.command-panel {
  background: #515151;
  padding: 3px;
}

.command-panel .preview-list {
  max-height: 300px;
  overflow: auto;
  margin-bottom: 3px;
  position: relative;
  background: #161616;
}

.command-panel .preview-list {
  cursor: default;
}

.command-panel .preview-list li.selected, .command-panel .preview-list li:hover {
  background: #444;
}

.command-panel .preview-list:focus li.selected {
  background: #223555;
}

.command-panel .preview-list .path {
  padding-left: 3px;
  color: #f9ee98;
  margin-right: 1ex;
}

.command-panel .preview-list .preview {
  color: #f6f3e8;
}

.command-panel .preview-list .preview .match {
  background-color: rgba(255,255,255,.25);
  padding: 1px;
}

.command-panel .prompt-and-editor {
  display: -webkit-box;
}

.command-panel .prompt {
  color: white;
  font-weight: bold;
  padding: .2em;
}

Add hover color that is the same as the selected color


form {
	margin-left: 1%;
}

input[type=text], input[type=password], input[type=email] {
    width: 50%;
    padding: 5px 20px;
    margin: 8px 0;
    display: block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

button {
    background-color: #1bc0bd;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 50%;
	display: block;
}

button:hover {
	opacity: 0.9;
}

Add css file for registration page

Add css file for registration page


#wrapper {
  height: 100%;
  z-index: 0;
}
.CodeMirror {
  font-family: 'Roboto Mono', Menlo, 'Lucida Console', Monaco, monospace;
  height: auto;
  /* CodeMirror has a default z-index of 4. Set to 0 to avoid collisions with fixed header. */
  z-index: 0;
}
.CodeMirror-linenumbers {
  background-color: #fafafa;
}
.CodeMirror-linenumber {
  color: #757575;
}
.CodeMirror-ruler {
  border-left: 1px solid #ddd;
}
.cm-tab:before {
  color: #757575;
  content: "\2192";
  position: absolute;
}
.cm-trailingspace {
  background-color: #ef9a9a;
  border: 1px solid #f44336;
  border-radius: 3px;
}

#wrapper {
  height: 100%;
  z-index: 0;
}
.CodeMirror {
  font-family: 'Roboto Mono', 'SF Mono', 'Lucida Console', Monaco, monospace;
  height: auto;
  /* CodeMirror has a default z-index of 4. Set to 0 to avoid collisions with fixed header. */
  z-index: 0;
}
.CodeMirror-linenumbers {
  background-color: #fafafa;
}
.CodeMirror-linenumber {
  color: #757575;
}
.CodeMirror-ruler {
  border-left: 1px solid #ddd;
}
.cm-tab:before {
  color: #757575;
  content: "\2192";
  position: absolute;
}
.cm-trailingspace {
  background-color: #ef9a9a;
  border: 1px solid #f44336;
  border-radius: 3px;
}

Replace 'Menlo' with 'SF Mono'

Replace 'Menlo' with 'SF Mono'

'Menlo' was replaced by 'SF Mono' from Mac OS 10.11,
And Menlo is not rendering symbols and characters correctly.

See also https://gerrit-review.googlesource.com/c/gerrit/+/246513

Change-Id: Iff8c94d5d77d7388f32bb62d67438e5e97f2ab80


graph {
	fill-color: white;
}

node {
	size-mode: fit;
	shape: rounded-box;
	fill-color: white;
	stroke-mode: none;
	/* stroke-color:  */
	padding: 3px, 2px, 5px, 5px;
	text-color: white;
	text-style: bold;
	text-background-mode: rounded-box;
	text-background-color: #009688;
	text-padding: 4px, 4px;
	text-offset: 0px, 2px;
}

node.plus {
	fill-color: red;
	text-background-color: #F33;
	text-color: #DDD;
	/* fill-mode: image-scaled; */
	/* fill-image: url('../images/ic_add_black_24dp_1x.png'); */
}

edge {
	arrow-shape: arrow;
	arrow-size: 8px, 8px, 50px;
	fill-color: blue;
}

node:clicked {
	fill-color: red;
	text-background-color: #F33;
	text-color: #DDD;
}

graph {
	fill-color: white;
}

node {
	size-mode: fit;
	shape: rounded-box;
	fill-color: white;
	stroke-mode: none;
	/* stroke-color:  */
	padding: 3px, 2px, 5px, 5px;
	text-color: white;
	text-style: bold;
	text-background-mode: rounded-box;
	text-background-color: #009688;
	text-padding: 4px, 4px;
	text-offset: 0px, 2px;
	text-size: 12gu;
}

node.plus {
	fill-color: red;
	text-background-color: #F33;
	text-color: #DDD;
	/* fill-mode: image-scaled; */
	/* fill-image: url('../images/ic_add_black_24dp_1x.png'); */
}

edge {
	arrow-shape: arrow;
	arrow-size: 8px, 8px, 50px;
	fill-color: blue;
	text-size: 10gu;
}

node:clicked {
	fill-color: red;
	text-background-color: #F33;
	text-color: #DDD;
}

Set text size for nodes and edges

Set text size for nodes and edges


/* You can add global styles to this file, and also import other style files */
html {
  height: 100%;
}

body {
  height: 100%;
}

Increase html and body height

Increase html and body height


body {
  font-family: sans-serif;
  font-size: 16px;
  margin: 50px;
}

body {
  font-family: sans-serif;
  font-size: 16px;
  margin: 50px;
  max-width: 800px;
}

Set max-width of the text in the examples


@import '@teamleader/ui-colors';
@import '@teamleader/ui-typography';
@import '@teamleader/ui-utilities';

.link {
  composes: reset-font-smoothing;
  cursor: pointer;
  background: transparent;
  border: 0;
  font-size: 100%;
  padding: 0;

  svg {
    transform: translate3d(0, -2px, 0);
  }

  * + svg,
  svg + * {
    margin-left: var(--spacer-smallest);
  }

  &:active {
    outline: 0;
  }

  &:not(.inherit) {
    color: var(--color-aqua-dark);
    font-family: var(--font-family-regular);
  }

  &.inherit {
    color: inherit;

    &:hover,
    &:active {
      color: inherit;
    }
  }

  &:not(.inherit),
  &.has-icon {
    text-decoration: none;

    &:hover,
    &:active {
      text-decoration: underline;
    }
  }

  &.inherit:not(.has-icon) {
    text-decoration: underline;

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

@import '@teamleader/ui-colors';
@import '@teamleader/ui-typography';
@import '@teamleader/ui-utilities';

.link {
  composes: reset-font-smoothing;
  cursor: pointer;
  background: transparent;
  border: 0;
  font-size: 100%;
  padding: 0;

  svg {
    transform: translate3d(0, -2px, 0);
  }

  * + svg,
  svg + * {
    margin-left: var(--spacer-smallest);
  }

  &.is-disabled {
    opacity: 0.36;
    pointer-events: none;
  }

  &:active {
    outline: 0;
  }

  &:not(.inherit) {
    color: var(--color-aqua-dark);
    font-family: var(--font-family-regular);
  }

  &.inherit {
    color: inherit;

    &:hover,
    &:active {
      color: inherit;
    }
  }

  &:not(.inherit),
  &.has-icon {
    text-decoration: none;

    &:hover,
    &:active {
      text-decoration: underline;
    }
  }

  &.inherit:not(.has-icon) {
    text-decoration: underline;

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

Add styles for the disabled link

Add styles for the disabled link


.on_android {
    display: inherit;
}

body > nav,
main > *,
body #chat_widget header {
    padding-top: 3rem;
}

body #chat_widget {
    padding-top: 0;
    height: 100%;
}

.drawer + .drawer_close.button.color {
    top: 3rem;
}

body .drawer {
    top: 10rem;
    height: calc(100% - 10rem);
}

body ul.context_menu {
    top: 3rem;
}

body #draw,
body #snap {
    height: calc(100% - 3rem);
    top: 3rem;
}

body #preview {
    height: calc(100% - 3rem);
    top: 3rem;
}

@media screen and (max-width: 1024px) {
    main.slide > div:first-child:nth-last-child(2),
    main.slide > div:first-child:nth-last-child(2) + div {
        height: calc(100% - 3rem);
    }

}

.on_android {
    display: inherit;
}

body > nav,
main > *,
body #chat_widget header,
body #visio header {
    padding-top: 3rem;
}

body #chat_widget {
    padding-top: 0;
    height: 100%;
}

.drawer + .drawer_close.button.color {
    top: 3rem;
}

body .drawer {
    top: 10rem;
    height: calc(100% - 10rem);
}

body ul.context_menu {
    top: 3rem;
}

body #draw,
body #snap {
    height: calc(100% - 3rem);
    top: 3rem;
}

body #preview {
    height: calc(100% - 3rem);
    top: 3rem;
}

@media screen and (max-width: 1024px) {
    main.slide > div:first-child:nth-last-child(2),
    main.slide > div:first-child:nth-last-child(2) + div {
        height: calc(100% - 3rem);
    }

}

Add top bar padding for Visio widget on Android


/* FxButton
 * id: {c6448328-31f7-4b12-a2e0-5c39d0290307}
 * URL: https://addons.mozilla.org/firefox/addon/fxbutton/ */

#fx-button, /* Fix for older (< 1.1) version */
#fxbutton {
  list-style-image: url(chrome://browser/skin/symbolic-icons/gear.svg) !important;
/*  list-style-image: url(chrome://browser/skin/symbolic-icons/firefox.svg) !important;*/
}

#TabsToolbar #appmenu-toolbar-button.fxbutton:not(:first-child) > .toolbarbutton-icon,
toolbar:not(#TabsToolbar) #appmenu-toolbar-button.fxbutton > .toolbarbutton-icon {
  list-style-image: url(chrome://browser/skin/symbolic-icons/gear.svg) !important;
/*  list-style-image: url(chrome://browser/skin/symbolic-icons/firefox.svg) !important;*/
}

/* FxButton
 * id: {c6448328-31f7-4b12-a2e0-5c39d0290307}
 * URL: https://addons.mozilla.org/firefox/addon/fxbutton/ */

#TabsToolbar #appmenu-toolbar-button.fxbutton:not(:first-child) > .toolbarbutton-icon,
toolbar:not(#TabsToolbar) #appmenu-toolbar-button.fxbutton > .toolbarbutton-icon {
  list-style-image: url(chrome://browser/skin/symbolic-icons/gear.svg) !important;
/*  list-style-image: url(chrome://browser/skin/symbolic-icons/firefox.svg) !important;*/
}

Drop support older FxButton versions

Drop support older FxButton versions


body {
  padding-top: 50px;
  padding-right: 200px;
  padding-bottom: 250px;
  padding-left: 200px;
  font-family: sans-serif;
  background-color: #F9F8EE;
}

body h1 {
  font-family: Arial;
  color: #000001;
}

body q {
  font-size: 15px;
}

body aside {
  background-color: #888;
}

body {
  padding-top: 50px;
  padding-right: 200px;
  padding-bottom: 250px;
  padding-left: 200px;
  font-family: sans-serif;
  background-color: #F9F8EE;
}

body h1 {
  font-family: Arial;
  color: #000001;
}

body q {
  font-size: 15px;
}

body aside {
  display:block;
  background-color: #888;
}

Add style to aside block

Add style to aside block


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

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

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

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

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

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

#first {
	text-align: left;
	margin: 0px 250px 0px 150px;
	border: 5px solid green;
	background-color: white;
}

#second {
	text-align: left;
	margin: 0px 250px 0px 150px;
	border: 5px solid green;
	background-color: white;
}

#third {
	text-align: left;
	margin: 0px 250px 0px 150px;
	border: 5px solid green;
	background-color: white;
}

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

Change Blog Margin and Text Align

Change Blog Margin and Text Align


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

.root {
  background: var(--component-bg);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.header {
  border-bottom: 1px solid var(--hairline-color);
}

.mainNav {
  display: flex;
}

.title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font: inherit;
  line-height: 17px;
  font-weight: 700;
  padding: 1em 1em 0.5em;
}

.closeButtonContainer {
  padding: 0.5em;
}

.versionSelectContainer {
  padding: 0.25em 0.5em;
  margin-top: calc(0 - var(--small-padding));
}

.body {
  flex: 1;
  min-height: 0;
  padding: 1em;
  overflow: auto;
}

.changeList {
  display: grid;
  grid-gap: 2.25em;
}

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

.root {
  background: var(--component-bg);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.header {
  border-bottom: 1px solid var(--hairline-color);
}

.mainNav {
  display: flex;
}

.title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font: inherit;
  line-height: 17px;
  font-weight: 700;
  padding: 1em 1em 0.5em;
}

.closeButtonContainer {
  padding: 0.5em;
}

.versionSelectContainer {
  padding: 0.25em 0.5em;
  margin-top: calc(0 - var(--small-padding));
}

.body {
  flex: 1;
  min-height: 0;
  padding: 1em;
  overflow: auto;
}

.changeList {
  display: grid;
  grid-gap: 1em;
}

Decrease spacing between changes items

[desk-tool] Decrease spacing between changes items


  to-do button, to-do footer > label { cursor: pointer }

  to-do form > fieldset {
    padding: 0;
    border: none;
    background: rgba(230,230,230,.5);
    line-height: 2em;
  }

  to-do form > fieldset label {
    width: 80%;
    display: inline-block;
    // Flexbox bug for fieldset - https://stackoverflow.com/questions/28078681/why-cant-fieldset-be-flex-containers
  }

  to-do footer  {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  to-do footer header button { display: block }

  to-do footer > label {
    flex: 1;
    margin: 0 2em;
    text-align: center;
    border-radius: 0.2em;
  }

  to-do input#all:checked
    ~ footer > label[for=all],

  to-do input#active:checked
    ~ footer > label[for=active],

  to-do input#completed:checked
    ~ footer > label[for=completed]
      { background: #ddd }

to-do button {
  font-size: 70%;
}

Decrease font size down to legible format


/*
## Donate

The donate button, for all campaigns, that takes you to the payment module in a modal window.
Is currently placed in top-right, and bottom of each project page.

- Create examples on different placing
- Make sure examples have spacing and are easy to evaluate

BLOCK f-button-donate

```
<div class="kalei-background-white"> <!-- only here for the style guide - should not be used on the website -->
<!-- this should be used on the website -->
	<button class="f-button-donate">SUPPORT</button>
	<button class="f-button-donate">DONATE</button>
	<button class="f-button-donate">SUPPORT NOW</button>
	<button class="f-button-donate">Support Now</button>
	<button class="f-button-donate">Support now</button>
<!-- this should be used on the website -->
</div>
```
*/

Create file and insertet all 'donate' from 8-button


#globi-panel-top-left {
    background: white;
}

#globi-panel-top-right {
    background: white;
}

#globi-panel-bottom-left {
    background: white;
}

#globi-panel-bottom-right {
    background: white;
}

table.interactions-result {
            margin-top: 10px;
            border-collapse: collapse;
            font-size: 11px;
        }

        table.interactions-result .odd {
            background-color: #e7e7e7;
        }

        table.interactions-result .odd {
            background-color: #d7d7d7;
        }

        table.interactions-result td {
            padding: 2px 5px;
        }

        .globi-taxon-info > .result-source {
            border-radius: 5px;
            text-align: left;
            margin-left: 19px;
            padding-left: 2px;
            background-color: #d7d7d7;
            opacity: 0.7;
            z-index: 4;
        }

        * {
            margin: 0;
            padding: 0;
        }

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

        body {
            overflow: hidden;
        }

Revert "attempt to change background color"

This reverts commit 61bb72e102b9247dc19fc46b1c7764eea5631178.


.background {
  fill: #eee;
}

line {
  stroke: #fff;
  stroke-opacity: 0.5;
  shape-rendering: crispEdges;
}

textarea {
  padding: 2px;
  width: 714px;
  height: 360px;
}

.axis path,
.axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
}

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

#cy {
  width: 100%;
  height: 100%;
  position: absolute;
}

Move css style into its own file

Move css style into its own file


#loginbox {
	border-style: double;
	border-width: 10px;
}
#loginform {
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
}
@media only screen and (max-width: 760px) {
	#touchcanvas {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}
}
body {
	text-align: center;
}
.hide {
	display: none;
}
.unsupported {
	color: red;
	border-color: red;
}

#loginbox {
	border-style: double;
	border-width: 10px;
}
#loginform {
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
}
@media only screen and (max-width: 760px) {
	#touchcanvas {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}
	input {
		position: absolute;
		right: 5px;
	}
	label {
		position: absolute;
		left: 5px;
	}
}
body {
	text-align: center;
}
.hide {
	display: none;
}
.unsupported {
	color: red;
	border-color: red;
}

Make login look slightly better on mobile devices


/*
 * The site CSS. Excuse all the !importants, materialize.css likes to define a lot of their
 * own odd rules, and sometimes overriring them is a bit tricky!
 */
.my-face {
    border-radius: 50%;
}

#about-me {
    margin-top: 60px;
}

.about-description {
    padding-right: 55px;
    padding-left:  55px;
}
.form-icon {
    color: #bdbdbd;
}

.resume:hover {
    color: #e65100 !important;
}
.work-btn {
    color: #FFFFFF !important;
}

.btn-right {
    margin-right: 0px   !important;
    float:        right !important;
}

.card-content-tech {
    margin-top: 6px !important;
}
.social-icon i {
    font-size: 2em !important;
}

.social-icon:hover {
    color: #e65100 !important;
}

.heart {
    color: pink;
}

.transition {
    -o-transition:      .25s;
    -ms-transition:     .25s;
    -moz-transition:    .25s;
    -webkit-transition: .25s;
    transition:         .25s;
}

/*
 * The site CSS. Excuse all the !importants, materialize.css likes to define a lot of their
 * own odd rules, and sometimes overriring them is a bit tricky!
 */
.my-face {
    border-radius: 50%;
}

#about-me {
    margin-top: 60px;
}

.about-description {
    padding-right: 55px;
    padding-left:  55px;
}

@media screen and (max-width: 768px) {
    .about-description {
        padding-right: 0px;
        padding-left:  0px;
    }
}

.form-icon {
    color: #bdbdbd;
}

.resume:hover {
    color: #e65100 !important;
}
.work-btn {
    color: #FFFFFF !important;
}

.btn-right {
    margin-right: 0px   !important;
    float:        right !important;
}

.card-content-tech {
    margin-top: 6px !important;
}
.social-icon i {
    font-size: 2em !important;
}

.social-icon:hover {
    color: #e65100 !important;
}

.heart {
    color: pink;
}

.transition {
    -o-transition:      .25s;
    -ms-transition:     .25s;
    -moz-transition:    .25s;
    -webkit-transition: .25s;
    transition:         .25s;
}

Add media query to remove about me padding on small screens


/*PAGE LAYOUT*/

html, body {
    height:100%;
    text-align:center;
}

.wrap {
    min-height: 100%;
    height: auto;
    /* Negative indent footer by its height */
    margin: 0 auto -190px;
    /* Pad bottom by footer height */
    padding: 0 0 190px;
}

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

/*columns*/

.columns {
    margin:7% auto;
    width:60%;
}

.col1, .col2 {
    background-color:#81DAF5;
    height:240px;
    padding-top:3%;
    padding-left:3%;
    border-radius: 6px 6px 6px 6px;
}

.col-md-6 {
    font-family:"Courier New", Courier, monospace;
    font-weight:bold;
    font-size:1.2em;
}

.col-md-12 {
    height: 190px;
    border-color:#848484;
    background-color:black;
    color:#D8D8D8;
}

/*PAGE LAYOUT*/

html, body {
    height:100%;
    text-align:center;
}

.wrap {
    min-height: 100%;
    height: auto;
    /* Negative indent footer by its height */
    margin: 0 auto -190px;
    /* Pad bottom by footer height */
    padding: 0 0 190px;
}

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

/*columns*/

.columns {
    margin:7% auto;
    width:60%;
}

.col1, .col2 {
    background-color:#81DAF5;
    height:240px;
    padding-top:3%;
    padding-left:3%;
    border-radius: 6px 6px 6px 6px;
}

.col-md-6 {
    font-family:"Courier New", Courier, monospace;
    font-weight:bold;
    font-size:1.2em;
}

.col-md-12 {
    height: 190px;
    border-color:#848484;
    background-color:black;
    color:#D8D8D8;
    padding-top: 1%;
}

Fix home page footer padding

Fix home page footer padding


body {
    margin: 0px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    background-color: #A0CAED;
}

div#header {
    margin: 0;
    padding-left: 50px;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #650dff;
}

div#header h1 {
    margin: 0;
    color: #f9f9f9;
}

div#body {
    width: 600px;
    margin: 20px 40px;
    padding: 20px;
    background-color: #f9f9f9;
}

p {
    line-height: 1.5em;
    color: #222;
}

h1 {
    line-height: 1.1em;
}

ul {
    line-height: 1.5em;
}

a, a:visited {
    color: #ff0000;
}

body {
    margin: 0px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    background-color: #A0C6ED;
}

div#header {
    margin: 0;
    padding-left: 50px;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #650dff;
}

div#header h1 {
    margin: 0;
    color: #f9f9f9;
}

div#body {
    width: 600px;
    margin: 20px 40px;
    padding: 20px;
    background-color: #f9f9f9;
}

p {
    line-height: 1.5em;
    color: #222;
}

h1 {
    line-height: 1.1em;
}

ul {
    line-height: 1.5em;
}

a, a:visited {
    color: #ff0000;
}

Tweak background color again. Definitely a productive use of time.


.avatar-box {
//	background-color: red;
}

.avatar-icon {
    width: 48px;
    height: 48px;
}

.title-box {
//	background-color: pink;
	width:100%;
}

.title-name {
	margin-left: 10px;
	font-weight: bold;
	font-size: large;
	color: rgb(42, 90, 138);
}

.title-user {
	margin-left: 12px;
	margin-top: 10px;
	font-size: small;
	color: rgb(119, 119, 119);
}

.date-box {
	text-align: right;
	font-weight: bold;
	font-size: small;
	color: rgba(0, 39, 59, 0.34902);
}

.content-box {
    white-space: normal;
}

.title-table {
	width:100%;
    border-collapse: collapse;
}

.title-table td {
    padding: 0;
}

.avatar-box {
//	background-color: red;
}

.avatar-icon {
    width: 48px;
    height: 48px;
}

.title-box {
//	background-color: pink;
	width:100%;
}

.title-name {
	margin-left: 10px;
	font-weight: bold;
	font-size: large;
	color: rgb(42, 90, 138);
}

.title-user {
	margin-left: 12px;
	margin-top: 10px;
	font-size: small;
	color: rgb(119, 119, 119);
}

.date-box {
	text-align: right;
	font-weight: bold;
	font-size: small;
	color: rgba(0, 39, 59, 0.34902);
}

.content-box {
    white-space: normal;
}

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

.title-table {
	width:100%;
    border-collapse: collapse;
}

.title-table td {
    padding: 0;
}

Fix image size in RSS feed

Fix image size in RSS feed


* {
  box-sizing: border-box;
  font-family: monospace;
  font-size: 16px;
}

.app-watcher {
  width: 300px;
}

.app-watcher__db {
  padding: 6px 9px;
  border-radius: 3px;
  border: solid 1px #c7c7c7;
  width: 100%;
}

.app-watcher__submit-btn {
  width: 100%;
  border-radius: 3px;
  border: none;
  background-color: #7f99d2;
  padding: 6px 9px;
  color: #fff;
  font-weight: bold;
}

.app-watcher__table {
  width: 100%;
}

.app-watcher__announce {
  color: #fff;
  padding: 6px 9px;
  border-radius: 3px;
}

.app-watcher__announce--error {
  background-color: #d6a1a1;
}

.app-watcher__announce--info {
  background-color: #89c785;
}

.app-watcher--space {
  margin-bottom: 1em;
}

.app-watcher--hide {
  display: none;
}

* {
  box-sizing: border-box;
  font-family: monospace;
  font-size: 16px;
}

.app-watcher {
  min-width: 300px;
}

.app-watcher__db {
  padding: 6px 9px;
  border-radius: 3px;
  border: solid 1px #c7c7c7;
  width: 100%;
}

.app-watcher__submit-btn {
  width: 100%;
  border-radius: 3px;
  border: none;
  background-color: #7f99d2;
  padding: 6px 9px;
  color: #fff;
  font-weight: bold;
}

.app-watcher__table {
  width: 100%;
}

.app-watcher__announce {
  color: #fff;
  padding: 6px 9px;
  border-radius: 3px;
}

.app-watcher__announce--error {
  background-color: #d6a1a1;
}

.app-watcher__announce--info {
  background-color: #89c785;
}

.app-watcher--space {
  margin-bottom: 1em;
}

.app-watcher--hide {
  display: none;
}

Change static width to min-width

Change static width to min-width


/* TODO: use variables! */
.sc-container-editor > .sc-text-node:only-child > .sc-text-property.sm-empty:before,
.sc-text-input .sc-text-property.sm-empty:before {
  content: attr(data-placeholder);
  position: absolute;
  color: var(--t-placeholder-text-color);
  font-weight: var(--t-normal-font-weight);
}

.sc-container-editor > .sc-text-node:only-child > .sc-text-property.sm-empty:before,
.sc-text-input .sc-text-property.sm-empty:before,
.sc-text-property-editor .sc-text-property.sm-empty:before {
  content: attr(data-placeholder);
  position: absolute;
  color: var(--t-placeholder-text-color);
  font-weight: var(--t-normal-font-weight);
}

Apply placeholder styles to TextPropertyEditors


@font-face {
    font-family: 'l-lt';
    src: url('fonts/l-lt.eot');
    src: url('fonts/l-lt.eot?#iefix') format('embedded-opentype'),
         url('fonts/l-lt.woff') format('woff'),
         url('fonts/l-lt.ttf') format('truetype'),
         url('fonts/l-lt.svg#l-lt') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'l-lt', arial, sans;
    color: #8B8B8B;
    padding-top: 50px;
}

span.asteriskField {
    color: red;
    font-size: 15px;
}

Add custom CSS for the portal

Add custom CSS for the portal


#note {
    position: absolute;
    z-index: 999999;
    top: 0;
    left: 0;
    right: 0;
    background: #fde073;
    text-align: center;
    line-height: 2.5;
    overflow: hidden;
    -webkit-box-shadow: 0 0 5px black;
    -moz-box-shadow:    0 0 5px black;
    box-shadow:         0 0 5px black;
}

#note {
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    right: 0;
    background: #fde073;
    text-align: center;
    line-height: 2.5;
    overflow: hidden;
    -webkit-box-shadow: 0 0 5px black;
    -moz-box-shadow:    0 0 5px black;
    box-shadow:         0 0 5px black;
}

Make the "warning" more visible

Make the "warning" more visible


.FindingOptions > .RouteSummary > .segments {
  padding: 0;
  display: block;
  text-align: center;
}

.FindingOptions > .RouteSummary > .segments > .segment {
  display: inline;
}

.FindingOptions > .RouteSummary > .segments > .segment > .shield {
  margin: 6px 6px -4px 0;
  height: 22px;
}

.FindingOptions > .RouteSummary > .segments > .segment .fa-caret-down {
  display: none;
}

.FindingOptions > .RouteSummary > .segments > .segment .fa-caret-right {
  display: inline-block;
}

.FindingOptions > .RouteSummary > .segments > .segment:last-of-type .fa-caret-right {
  display: none;
}

.FindingOptions > .RouteSummary > .benefits-badge,
.FindingOptions > .RouteSummary > .minutes-column {
  display: none;
}

.FindingOptions .RouteComparisonTable .heading {

}

.FindingOptions .RouteComparisonTable > div {
  padding: 8px 0;
}

.FindingOptions .RouteSummary {
  margin: 15px 0;
}

.FindingOptions .RouteSummary > .segments {
  padding: 0;
  display: block;
  text-align: center;
}

.FindingOptions .RouteSummary > .segments > .segment {
  display: inline;
}

.FindingOptions .RouteSummary > .segments > .segment > .shield {
  margin: 6px 6px -4px 0;
  height: 22px;
}

.FindingOptions .RouteSummary > .segments > .segment .fa-caret-down {
  display: none;
}

.FindingOptions .RouteSummary > .segments > .segment .fa-caret-right {
  display: inline-block;
}

.FindingOptions .RouteSummary > .segments > .segment:last-of-type .fa-caret-right {
  display: none;
}

.FindingOptions .RouteSummary > .benefits-badge,
.FindingOptions .RouteSummary > .minutes-column {
  display: none;
}

.FindingOptions .RouteComparisonTable > div {
  padding: 8px 0;
}

Fix CSS selectors in FindingOptions

Fix CSS selectors in FindingOptions


.server {
	overflow: hidden;
	border: 1px solid black;
}

.center {
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.window {
	position: absolute;
}

.region-demo canvas {
	border: 1px solid #777;
}

.debugCanvas {
	display: none;
}

.crtc.debug .debugCanvas {
	display: block;
}

.crtc canvas {
	position: absolute;
	top: 0px;
	left: 0px;
}

.server {
	overflow: hidden;
	border: 1px solid black;
}

.center {
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.window {
	position: absolute;
}

.region-demo canvas {
	border: 1px solid #777;
}

.debugCanvas {
	display: none;
        pointer-events: none;
}

.crtc.debug .debugCanvas {
	display: block;
}

.crtc canvas {
	position: absolute;
	top: 0px;
	left: 0px;
}

server: Set the debug canvas to not recieve pointer events


/*
  Low Literacy/Dyslexic Style

  Same layout, different typeface

*/

body {
  font-family: "Comic Sans MS", "MS Comic Sans", "Chalkboard", "Marker Felt", Verdana, sans-serif;
  font-size: 110%;
}

#wrapper hgroup h1 span,
article header h1 span,
aside .chapters-navigation li a .part-label {
  text-transform: none !important;
}

/*
  Low Literacy/Dyslexic Style

  Same layout, different typeface

*/

body {
  font-family: "Sassoon Sans W01", "Comic Sans MS", "MS Comic Sans", "Chalkboard", "Marker Felt", Verdana, sans-serif;
  font-size: 110%;
}

#wrapper hgroup h1 span,
article header h1 span,
aside .chapters-navigation li a .part-label {
  text-transform: none !important;
}

Add sassoon for hard-to-read styles

Add sassoon for hard-to-read styles


/*
 * Copyright 2019 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.
 */

.media-attributes-view {
  border-bottom: 1px solid var(--divider-color);
}

.media-property-renderer {
  line-height: 20px;
  height: 28px;
  padding: 4px 10px;
}

.media-property-renderer-hidden {
  display: none;
}

.media-property-renderer-title {
  font-size: 14px;
}

.media-property-renderer-contents {
  position: absolute;
  left: 200px;
  overflow: hidden;
  height: 20px;
}

.media-property-renderer:nth-child(even) {
  background: hsl(214deg 0% 97%);
}

.media-property-renderer:hover {
  background: hsl(214deg 70% 97%);
}

.-theme-with-dark-background .media-property-renderer:nth-child(even) {
  background: rgb(41 41 41);
}

.media-properties-frame {
  display: block;
}

/*
 * Copyright 2019 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.
 */

.media-attributes-view {
  border-bottom: 1px solid var(--divider-color);
}

.media-property-renderer {
  line-height: 20px;
  height: 28px;
  padding: 4px 10px;
}

.media-property-renderer-hidden {
  display: none;
}

.media-property-renderer-title {
  font-size: 14px;
}

.media-property-renderer-contents {
  position: absolute;
  left: 200px;
  overflow: hidden;
  height: 20px;
}

.media-property-renderer:nth-child(even) {
  background: hsl(214deg 0% 97%);
}

.media-property-renderer:hover {
  background: hsl(214deg 70% 97%);
}

.-theme-with-dark-background .media-property-renderer:nth-child(even) {
  background: rgb(41 41 41);
}

.media-properties-frame {
  display: block;
  overflow: hidden;
}

Hide overflow caused by excessively long urls.

The long form URL can already be acquired by downloading the data from a
player, so hiding it isn't particularly an issue. The overflow was
causing a VBox to have children that are wider than it.

Bug: 1129296
Change-Id: I9f786d12f0080d4e621e3df80d2a08508aecc682
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2639291
Reviewed-by: Tim van der Lippe <dba8716ee7f8d16236046f74d2167cb94410f6ed@chromium.org>
Commit-Queue: Ted Meyer <49f16de1701e9d27e09eb331529eeca82ecbab45@chromium.org>


body {
    margin: 0;
}

.mainContainer {
    width: 100%;
    height: 100vh;
}

.joystick {
    text-align: center;
    position: relative;
}

.moveJoystick {
    background-color: lightblue;
}

.rotationJoystick {
    background-color: lightcoral;
}

@media screen and (orientation:landscape) {
    .moveJoystick {
        float: left;
        width: 35%;
        height: 100%;
    }

    .videoSegment {
        width: 30%;
        position: relative;
        width: auto;
    }

    .rotationJoystick {
        float: right;
        width: 35%;
        height: 100%;
    }
}

@media screen and (orientation:portrait) {
    .moveJoystick {
        width: 100%;
        height: 35%;
    }

    .videoSegment {
        width: 100%;
        position: relative;
        display: block;
        height: auto;
    }

    .rotationJoystick {
        width: 100%;
        height: 35%;
    }
}

body {
    margin: 0;
}

.mainContainer {
    width: 100%;
    height: 100vh;
}

.joystick {
    text-align: center;
    position: relative;
}

.moveJoystick {
    background-color: lightblue;
}

.rotationJoystick {
    background-color: lightcoral;
}

@media screen and (orientation:landscape) {
    .moveJoystick {
        float: left;
        width: 35%;
        height: 100%;
    }

    .videoSegment {
        width: 30%;
        position: relative;
        height: auto;
    }

    .rotationJoystick {
        float: right;
        width: 35%;
        height: 100%;
    }
}

@media screen and (orientation:portrait) {
    .moveJoystick {
        width: 100%;
        height: 35%;
    }

    .videoSegment {
        width: 100%;
        position: relative;
        display: block;
        height: auto;
    }

    .rotationJoystick {
        width: 100%;
        height: 35%;
    }
}

Fix video layout in landscape mode

Fix video layout in landscape mode


/* Custom Stylesheet */

/*
CU Colors
CU GOLD: #CFB87C
Black: #000000
CU Dark Gray: #565A5C
CU Light Gray: #A2A4A3

Black Alternative: #212121;
*/

.icon-block {
  padding: 0 15px;
}
.icon-block .material-icons {
	font-size: inherit;
}

nav {

  background-color: #212121;
}

nav ul li:hover {
   background-color: #CFB87C;
}

footer.page-footer {
  /*padding-top: 20px;*/
  background-color: #CFB87C;
}

footer.page-footer .footer-copyright {
/*  overflow: hidden;
  min-height: 50px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;*/
  padding: 0px 0px;

  /*Text Color*/
  /*color: white;*/

  background-color: #212121;
}

.z-depth-1 {
  display: inline-block;
  padding: 32px 48px 32px 48px;
  border: 1px solid #EEE;
}

.label-danger {
  color: red;
}

Add styling for the error messages on survey


#container
{
  width: 95%;
  margin: 0 auto;
}

body
{
  color: rgba(71, 66, 59, 1);
  background-color: rgba(242, 249, 248, 1);
}

h1
{
  color: rgba(17, 113, 134, 1);
}

h2
{
  color: rgba(133, 179, 194, 1);
}

a:visited
{
  color: rgba(119, 119, 119, 1);
}

a
{
  color: rgba(167, 183, 183, 1);
}

#avatar
{
    background: url('../img/avatar_v2_200.jpg') no-repeat;
    background-size: contain;
}

.circle-200
{
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  width: 200px;
  height: 200px;
  margin-right: 15px;
}

#container
{
  width: 95%;
  margin: 0 auto;
}

body
{
  color: rgba(71, 66, 59, 1);
  background-color: rgba(242, 249, 248, 1);
  font-size: large;
}

h1
{
  color: rgba(17, 113, 134, 1);
}

h2
{
  color: rgba(17, 113, 134, 1);
  /*color: rgba(133, 179, 194, 1);*/
}

a:visited
{
  color: rgba(119, 119, 119, 1);
}

a
{
  color: rgba(167, 183, 183, 1);
}

#avatar
{
    background: url('../img/avatar_v2_200.jpg') no-repeat;
    background-size: contain;
}

.circle-200
{
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  width: 200px;
  height: 200px;
  margin-right: 15px;
}

Make font size large. Use same color for h1 & h2s.


.temp {
	background-color: black;
	background: black;
	color: white;
	font-family: Arial;
}

.temp {
	background-color: black;
	background: black;
	color: yellow;
	font-family: Arial;
	font-size: 50px;
}

Increase text size and change colour

Increase text size and change colour


:host {
    position: absolute;
    z-index: 1;
    display: none;
    color: #555;
    margin: -21px 0px 0px 0px;
}
:host a {
    color: #555;
    text-decoration: none;
}
:host table {
    width: 300px;
}
:host .mdl-data-table tbody tr {
    height: 32px;
}
:host .mdl-data-table td {
    height: 32px;
    padding: 8px;
    text-align: left;
    border-top: none;
    border-bottom: none;
}
:host.active.valid {
    display: block;
}

.img-td{
    width: 30px;
}

.truncate{
    width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

:host {
    position: absolute;
    z-index: 5;
    display: none;
    color: #555;
    margin: -21px 0px 0px 0px;
}
:host a {
    color: #555;
    text-decoration: none;
}
:host table {
    width: 300px;
}
:host .mdl-data-table tbody tr {
    height: 32px;
}
:host .mdl-data-table td {
    height: 32px;
    padding: 8px;
    text-align: left;
    border-top: none;
    border-bottom: none;
}
:host.active.valid {
    display: block;
}

.img-td{
    width: 30px;
}

.truncate{
    width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media screen and (max-width: 400px) {
    :host {
        right: 0;
    }
    .truncate{
        width: 200px;
    }
}

Adjust position of live search drop-down for smaller screens

Refs #228


/* annotatedDiagram.html */

	#imageHolder, #canvas, #hsHolder {
		position:	absolute;
		margin:		0;
	}

	#pageContents .hotspot {
		position:	absolute;
		cursor:		pointer;
	}

	#pageContents .oval {
		-moz-border-radius:	50% 50%;
		border-radius:		50% 50%;
	}

	#hsHolder a.selected, #hsHolder .hsGroup.selected a {
		border:		2px solid;
	}

	#textContents {
		position: 	absolute;
		top:		0;
		left:		0;
	}

	#textContents div {
		padding:	10px;
	}

	.listItem {
		font-weight:	bold;
		display:		block;
		padding:		5px;
	}

/* annotatedDiagram.html */

	#imageHolder, #canvas, #hsHolder {
		position:	absolute;
		margin:		0;
	}

	#pageContents .hotspot {
		position:	absolute;
		cursor:		pointer;
	}

	#pageContents .oval {
		-moz-border-radius:	50% 50%;
		border-radius:		50% 50%;
	}

	#hsHolder .hotspot.selected, #hsHolder .hsGroup.selected .hotspot {
		border:		2px solid;
	}

	#textContents {
		position: 	absolute;
		top:		0;
		left:		0;
	}

	#textContents div {
		padding:	10px;
	}

	.listItem {
		font-weight:	bold;
		display:		block;
		padding:		5px;
	}

Fix Annotataed Diagram page which had stopped working if hightlight was set to oval or rectangle


body {
    color: #333;
}

input[type=search]::search-cancel-button,
input[type=search]::search-decoration {
    appearance: none;
}

.global-header {
    background: #003760;
}

.main {
    background: #fff;
}

.global-footer {
    background: #003760;
}

Fix newline character (CR+LF -> LF)

Fix newline character (CR+LF -> LF)


/* Firefox userContent.css */

/* -------------------------------------------------------------------------- */
/* Private Browsing Tab                                                       */
/* -------------------------------------------------------------------------- */

@-moz-document url("about:privatebrowsing") {
  /* Hide Firefox logo and wordmark. */
  .logo-and-wordmark {
    display: none !important;
  }

  /* Hide search box. */
  .search-inner-wrapper {
    display: none !important;
  }

  /* Hide Mozilla VPN promotional messages. */
  #private-browsing-vpn-text,
  #private-browsing-vpn-link {
    display: none !important;
  }
}

/* Firefox userContent.css */

/* -------------------------------------------------------------------------- */
/* Private Browsing Tab                                                       */
/* -------------------------------------------------------------------------- */

@-moz-document url("about:privatebrowsing") {
  /* Hide Firefox logo and wordmark. */
  .logo-and-wordmark {
    display: none !important;
  }

  /* Hide search box. */
  .search-inner-wrapper {
    display: none !important;
  }

  /* Hide private browsing myths link. */
  #private-browsing-myths {
    display: none !important;
  }
  .info p {
    margin-bottom: 0 !important;
  }

  /* Hide Mozilla VPN promotional messages. */
  #private-browsing-vpn-text,
  #private-browsing-vpn-link {
    display: none !important;
  }
}

Hide help link in Private Browsing tab

firefox: Hide help link in Private Browsing tab


.Button {
  transition: background-color 0.2s;
  display: inline-block;
  padding: 0.6em 1em;
  background: hsla(31, 15%, 50%, 0.15);
  color: inherit;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  font-size: 0.8125em;
  font-weight: 300;
  line-height: normal;
  text-decoration: none;
  white-space: nowrap;
}
.Button:focus {
  outline: thin dotted #666;
  text-decoration:none;
}
.Button:active,
.Button:focus
.Button:hover {
  border: 0;
  background: hsla(31, 15%, 50%, 0.25);
  text-decoration:none;
}

.Button--action {
  background-color: hsl(150, 45%, 50%);
  color: #fff;
}
.Button--action:active,
.Button--action:focus,
.Button--action:hover {
  background-color: hsl(150, 45%, 40%);
}

.Button--wide {
  padding-right: 1.5em;
  padding-left: 1.5em;
}

.Button {
  transition: background-color 0.2s;
  display: inline-block;
  padding: 0.6em 1em;
  background: hsla(31, 15%, 50%, 0.15);
  color: inherit;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  font-size: 0.8125em;
  font-weight: 300;
  line-height: normal;
  text-decoration: none;
  white-space: nowrap;
}
.Button:focus {
  outline: thin dotted #666;
  text-decoration:none;
}
.Button:active,
.Button:focus,
.Button:hover {
  border: 0;
  background: hsla(31, 15%, 50%, 0.25);
  text-decoration:none;
}

.Button--action {
  background-color: hsl(150, 45%, 50%);
  color: #fff;
}
.Button--action:active,
.Button--action:focus,
.Button--action:hover {
  background-color: hsl(150, 45%, 40%);
}

.Button--wide {
  padding-right: 1.5em;
  padding-left: 1.5em;
}

Add a missing comma to a selector.

Add a missing comma to a selector.


@value montserrat from './common/typography.css';

/*
 * Add any global styles here
 */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.app {
  composes: box from './common/layout.css';

  font-family: montserrat;
  font-weight: normal;
  font-smoothing: antialiased;
}

@value montserrat from './common/typography.css';

/*
 * Add any global styles here
 */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.app {
  composes: box from './common/layout.css';

  height: 100%;

  font-family: montserrat;
  font-weight: normal;
  font-smoothing: antialiased;
}

Add height to app for background videos

Add height to app for background videos


#app footer {
    background-color: #00d1b2;
    margin-top: 2em;
}

#app footer p, #app footer i, #app footer a {
    color: white;
}

#app footer a {
    font-weight: bold;
}

#app > section {
    padding-top: 2em;
    background-color: transparent;
}

body {
    background: url(/images/background.png);
    height: 100%;
    min-height: 100vh;
}

#websiteTitle {
    font-weight: 600;
    font-size: 1.5em;
}

#newModal p {
    margin-bottom: .5em;
}

#app footer {
    background-color: #00d1b2;
    margin-top: 2em;
}

#app footer p, #app footer i, #app footer a {
    color: white;
}

#app footer a {
    font-weight: bold;
}

#app > section {
    padding-top: 2em;
    background-color: transparent;
}

body {
    background: url(/images/background.png);
    height: 100%;
    min-height: 100vh;
    overflow-x: hidden;
}

#websiteTitle {
    font-weight: 600;
    font-size: 1.5em;
}

#newModal p {
    margin-bottom: .5em;
}

@media screen and (max-width: 680px) {
    #markdown {
        padding: 0!important;
    }

    #markdown svg {
        max-width: 100%;
    }
}

Fix display on mobile devices

Fix display on mobile devices


#form-data {
    /*display : block;*/
    display: none;
    font-family: monospace;
    white-space: pre;
    border: 2px solid black;
}

input:invalid {
  box-shadow: 0 0 5px 1px red;
}

input:focus:invalid {
  outline: none;
}

#form-data {
    /*display : block;*/
    display: none;
    font-family: monospace;
    white-space: pre;
    border: 2px solid black;
}

form :invalid {
  box-shadow: 0 0 5px 1px red;
}

form :focus:invalid {
  outline: none;
}

Make styling apply to invalid <select> elements

Previously, the CSS that highlighted invalid elements in the form did
not work on the drop-down selects because they were not <input>
elements; this commit makes the styling apply to all invalid elements
that are descendants of a form in the document, so the <select>
elements are properly highlighted.


.begin {
    background: #15848F;
}

.end {
    background: #DC143C;
}

.form button.begin, .form button.end {
    float: none;
    margin-left: 45%;
}

.begin {
    background: #15848F;
}

.end {
    background: #DC143C;
}

.form button:hover, .form button:focus {
    background: black;
}

.form button.begin, .form button.end {
    float: none;
    margin-left: 45%;
}

Set black button on hover and focus

Set black button on hover and focus


.anchor {
    text-decoration: none;
    font-size: medium;
    opacity: 0.20;
}

.anchor:hover {
    opacity: 1;
}

table {
    border-collapse: collapse;
}

table > thead > tr:last-child > th {
    vertical-align: bottom;
}

table > tbody > tr > th {
    position: relative;
}

table > tbody > tr > th > .anchor {
    position: absolute;
    top: 0.25em;
    left: 0.25em;
    font-size: large;
}

th {
    text-align: left;
    padding-left: 0.5em;
}

td, th {
    border: solid thin lightgray;
    padding: 1em 0.5em;
}

table tr > th:first-child {
    text-align: right;
}

li {
    margin-top: 1em;
}

li li {
    margin-top: 0.25em;
}

.anchor {
    text-decoration: none;
    font-size: medium;
    padding: 0.25em 0 0 0.25em;
    opacity: 0.20;
}

.anchor:hover {
    opacity: 1;
}

table {
    border-collapse: collapse;
}

table > thead > tr:last-child > th {
    vertical-align: bottom;
}

table > tbody > tr > th {
    position: relative;
}

table > tbody > tr > th > .anchor {
    position: absolute;
    top: 0;
    left: 0;
    font-size: large;
}

th {
    text-align: left;
    padding-left: 0.5em;
}

td, th {
    border: solid thin lightgray;
    padding: 1em 0.5em;
}

table tr > th:first-child {
    text-align: right;
}

li {
    margin-top: 1em;
}

li li {
    margin-top: 0.25em;
}

Add some padding to anchors in table for easier clickability.