h1 {
	text-align: center;
}

h2 {
	text-align: center;
}

.row {
	display: flex;
}

.section {
	width: 200px;
}

#container {
	width: 100%;
	padding: 10% 0;
}

#links-div {
	width: 600px;
	margin: 0 auto;
	margin-top: 50px;
}

a {
	text-decoration: none;
	color: #000000;
}

a:hover {
	color: #FFFFFF;
}

body {
	background-color: #2c3e50;
}

h1 {
	text-align: center;
}

h2 {
	text-align: center;
	margin-bottom: 20px;
}

li {
	list-style-type: none;
	padding: 0 0;
}

li a {
	display: block;
	width: 100%;
	padding: 20px 0;
}

ul {
	padding: 0;
}

.row {
	display: flex;
}

.section {
	width: 250px;
	margin: 5px;
	padding: 5px;
}

#container {
	width: 100%;
	padding: 10% 0;
}

#links-div {
	width: 750px;
	margin: 0 auto;
	margin-top: 50px;
}

#reddit-div {
	background-color: #e74c3c;
}

#reddit-div a:hover {
	background-color: #c0392b;
}

#reddit-div li a {
	text-indent: 30px;
}

#videos-div {
	background-color: #2ecc71;
}

#videos-div a:hover{
	background-color: #27ae60;
}

#videos-div li a {
	text-indent: 64px;
}

#programming-div {
	background-color: #3498db;
}

#programming-div a:hover {
	background-color: #2980b9;
}

#programming-div li a {
	text-indent: 50px;
}

Add color and modify link handling

Add color and modify link handling

Add colors for the index page and also add some structure and highlighting to the links.


/* Notes hidden */
.bespoke-slide > aside {
	box-sizing: border-box;
	position: absolute;
	width: 100%;
	top: 0;
	left: 100%;
	padding-left: 40px;
}

/* Notes exposed */
body.notes .bespoke-slide {
	-webkit-transform: scale(.5) translateX(-50%);
	transform: scale(.5) translateX(-50%);
}

body.notes .bespoke-slide > aside { opacity: 1; }

/* Notes hidden */
.bespoke-slide > aside {
	box-sizing: border-box;
	position: absolute;
	width: 100%;
	top: 0;
	left: 100%;
	padding-left: 40px;
	font-size: 2em;
}

/* Notes exposed */
body.notes .bespoke-slide {
	-webkit-transform: scale(.5) translateX(-50%);
	transform: scale(.5) translateX(-50%);
}

body.notes .bespoke-slide > aside { opacity: 1; }

Make the font-size inside notes bigger

Make the font-size inside notes bigger


body {
  margin: 0;
  padding: 0;
  font-size: 15px;
  background-color: #241616;
  background-image:url(ggb-background.jpg);
  background-size: cover;
}

#name {
  color: #90342D;
  position: absolute;
  margin-left: 85%;
  font-size: 24px;
  line-height: 2em;
  margin-top: 0;
  padding: 0;
  font-weight: bold;
  font-family: Vivaldi, cursive;
}

#face-pic {
  position: absolute;
  margin-left: 90%;
  max-height: 20%;
}

nav {
  z-index: 3;
  background-color: #412E3D;
  margin: 0;
  overflow: hidden;
}

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

nav ul li {
  display: inline-block;
  list-style-type: none;
}

nav > ul > li > a {
  color: #51676E;
  background-color: #412E3D;
  display: block;
  line-height: 2em;
  padding: 0.5em 0.5em;
  text-decoration: none;
}

nav > ul >li > a:hover {
  background-color: #544250;
}

body {
  margin: 0;
  padding: 0;
  font-size: 15px;
  background-color: #241616;
  background-image:url(ggb-background.jpg);
  background-size: cover;
}

#name {
  color: #90342D;
  position: absolute;
  margin-left: 85%;
  font-size: 1.5em;
  line-height: 2em;
  margin-top: 0;
  padding: 0;
  font-weight: bold;
  font-family: Vivaldi, cursive;
}

#face-pic {
  position: absolute;
  margin-left: 90%;
  max-height: 20%;
}

nav {
  z-index: 3;
  background-color: #412E3D;
  margin: 0;
  overflow: hidden;
}

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

nav ul li {
  display: inline-block;
  list-style-type: none;
}

nav > ul > li > a {
  color: #51676E;
  background-color: #412E3D;
  display: block;
  line-height: 2em;
  padding: 0.5em 0.5em;
  text-decoration: none;
}

nav > ul >li > a:hover {
  background-color: #544250;
}

Add css for name correction

Add css for name correction


/* foo bar! */
.navbar-default {
    background-color: #545f66;
}
.navbar-default .navbar-brand {
    color: #ffffff;
}
.navbar-default .navbar-nav>li>a {
    color: #ffffff;
}
.alert-info {
    background-color: #b6dcfe;
}
.alert {
    color: #6b6b6b;
}
.alert a:not(.close) {
    color: #545f66;
}

Fix color of links in doc note boxes.

Fix color of links in doc note boxes.


#notifications-container
{
	position: absolute;
	top: 5px;
	right: 5px;
}

#notifications-container .simple-notification
{
	background-color: #FFF;
	width: 200px;
	height: 75px;
}

#notifications-container
{
	position: absolute;
	top: 5px;
	right: 5px;
    z-index: 1;
}

#notifications-container .simple-notification
{
	background-color: #FFF;
	width: 200px;
	height: 75px;
    padding: 0px 10px;
}

Make notifications actually visible, added padding


@font-face {
    font-family: Montserrat;
    src: url("../fonts/Montserrat-Regular.otf");
}

:focus {
    outline: 0px;
}

::selection {
  background-color: none;
  color: white;
}

::-webkit-scrollbar {
  width: .5em;
  height: .5em;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

::-webkit-scrollbar-thumb {
  border-radius: .25em;
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

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

body {
    font-family: Montserrat;
    font-size: 14px;
}

body > :not(#titleBar):not(.sweet-overlay) {
    margin-top: 30px;
}

body.no-transition {
    transition: none !important;
}

@font-face {
    font-family: Montserrat;
    src: url("../fonts/Montserrat-Regular.otf");
}

:focus {
    outline: 0px;
}

::selection {
  background-color: none;
  color: white;
}

::-webkit-scrollbar {
  width: .5em;
  height: .5em;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

::-webkit-scrollbar-thumb {
  border-radius: .25em;
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

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

body {
    width: 100%;
    height: calc(100vh - 30px);
    margin: 0px;
    font-family: Montserrat;
    font-size: 14px;
}

body > :not(#titleBar):not(.sweet-overlay) {
    margin-top: 30px;
}

body.no-transition {
    transition: none !important;
}

Set body 100% window size

Set body 100% window size


.well {
  background-color: white;
}

#my-footer {
  background: #222222;
  color: #eee;
  font-size: 11px;
  padding: 20px;
  margin-top: 10px;
}

.navbar-brand {
  padding-left: 70px;
}

.main {
  min-height: 555px;
  min-width: 400px;
}

body {
  min-width: 400px;
}

a.best:hover, a.best:active, a.best:link, a.best:visited{
  color: gold;
  text-decoration: none;
}

Add style to the partials html

Add style to the partials html


svg#graph
{
	background-color: #080022;
}

svg.argument
{
}

svg.argument rect
{
	stroke: none;
	fill: #ECE6FF;
	shape-rendering: crispEdges;
	stroke-width: 1;
}

svg.toolbar svg rect
{
	stroke: none;
	fill: #333;
}

svg.toolbar svg text
{
	fill: #DDD;
	font-size: 16px;
	text-anchor: middle;
	letter-spacing: 2;
}

div.summary
{
	padding: 15px;
}

p
{
	fill: #ECE6FF;
	font-family: Garamond, 'Times New Roman';
	font-size: 20;
	color: #080022;
	font-weight: bold;
}

path
{
	stroke-width: 5px;
	fill: none;
}

path.support
{
	stroke: green;

}

path.oppose
{
	stroke: red;
}

switch text
{
	font-size: 20px;
	fill: red;
}

img#spinner
{
	position: fixed;
	top: 5px;
	right: 5px;
	width: 75px;
	height: auto;
}

svg#graph
{
	background-color: #080022;
}

svg.argument
{
}

svg.argument rect
{
	stroke: none;
	fill: #ECE6FF;
	shape-rendering: crispEdges;
	stroke-width: 1;
}

svg.toolbar svg rect
{
	stroke: none;
	fill: #555;
}

svg.toolbar svg text
{
	fill: #DDD;
	font-size: 16px;
	text-anchor: middle;
	letter-spacing: 2;
}

div.summary
{
	padding: 15px;
}

p
{
	fill: #ECE6FF;
	font-family: Garamond, 'Times New Roman';
	font-size: 20;
	color: #080022;
	font-weight: bold;
}

path
{
	stroke-width: 5px;
	fill: none;
}

path.support
{
	stroke: green;

}

path.oppose
{
	stroke: red;
}

switch text
{
	font-size: 20px;
	fill: red;
}

img#spinner
{
	position: fixed;
	top: 5px;
	right: 5px;
	width: 75px;
	height: auto;
}

Make it easier on the eyes

Make it easier on the eyes


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

body {
  margin: 0px;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: #333333;
}

#firepad-container {
  height: 100%;
  width: 100%;
  flex: 1;
}

.column {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.tabs-container {
  float: left;
  overflow: scroll;
}

.tab {
  border: none;
  height: 30px;
  color: #b5b5b5;
  float: left;
  padding: 10px 8px;
  display: flex;
  align-items: center;

  border-right-style: solid;
  border-color: #1e1e1e;
  border-width: 1px;
}

.active-tab {
  background-color: #1e1e1e;
}

.inactive-tab {
  background-color: #333333;
}

.tab:hover {
  background-color: #555555;
}

.tab:focus {
  outline: none;
}

Remove outline from tabs after they are clicked


.bottom-horizontal-line{
	border-bottom: 1px solid #ccc;
	clear: both;
	display: block;
	margin-bottom: 10px;
	margin-top: 10px;
}

.input90{
	width : 90% !important;
}
.input95{
	width : 95% !important;
}
.input100{
	width : 100% !important;
}

.input30_1 select {
	width: 150px !important;
}

.ocps-editor {
	margin-bottom: 10px;
	height: 50px;
}

.cke_contents {
	height: 150px !important;
}

.opcps-rows {
	margin-bottom: 15px;
}

.txtarea-medium {
	width : 95% !important;
}

.opencps-icon{
	display: block;
	background-image: url("/sprite/html/themes/classic/images/common/_sprite.png");
	background-repeat: no-repeat;
	height: 16px;
    width: 16px
}
.opencps-icon.checked{
    background-position: 50% -336px;
}

.opencps-icon.removed{
    background-position: 50% -368px;
}

.opencps-icon.employees{
    background-position: 50% -1589px;
}

.opencps-icon.not-employee{
    background-position: 50% -769px;
}

Fix bug screen employee management not show status hasEmployee


.selected {
  text-decoration: underline;
}

.full-height {
  height: 100vh;
}

.row {
  max-width: 95vw;
}

#sidepanel {
  z-index: 1;
  position: relative;
}

#sidepanel-body {
  margin-left: 4px;
}

#sidepanel-resizer {
  position: absolute;
  width: 8px;
  border-left: 1px solid;
  border-color: #d8d8d8;
  cursor: e-resize;
}

.selected {
  text-decoration: underline;
}

.full-height {
  height: 100vh;
}

.row {
  max-width: 95vw;
}

.context-menu {
  position: absolute;
  z-index: 1;
}

#sidepanel {
  z-index: 1;
  position: relative;
}

#sidepanel-body {
  margin-left: 4px;
}

#sidepanel-resizer {
  position: absolute;
  width: 8px;
  border-left: 1px solid;
  border-color: #d8d8d8;
  cursor: e-resize;
}

Add css for context menus

Add css for context menus


.zci--dns .zci__table {
    width: 100%;
    margin-bottom: 2px;
}

.zci--dns .zci__table__tr {
    border-bottom: 1px solid #dedede;
}

.zci--dns .zci__table__tr:last-of-type {
    border-bottom: none;
}

.zci--dns .zci__table__tr th {
    padding-left: 3px;
}

.zci--dns .zci__table__tr td {
    padding: 2px 3px;
    max-width: 250px;
}

.zci--dns .zci__table {
    margin-bottom: 2px;
}

.zci--dns .zci__table__tr {
    border-bottom: 1px solid #dedede;
}

.zci--dns .zci__table__tr:last-of-type {
    border-bottom: none;
}

.zci--dns .zci__table__tr td {
    padding: 2px 0;
}

Remove more css, keep things simple

Remove more css, keep things simple


.main {
  height: 100%;
  width: 100%;
  display: flex;
}
.text-div {
  margin: auto;
  width: 400px;
  text-align: center;
  font-family: monospace;
  color: white;
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
}
.env {
  font-size: 3em;
  flex: 0 1 auto;
}
.links {
  font-size: 1.5em;
  display: flex;
  flex: 0 1 auto;
}
.link {
  margin: 5px;
  flex: 1 1 auto;
}
.link a {
  color: white;
}
.github-link {
  flex: 0 1 auto;
}
.github-link img {
  width: 100px;
}

.main {
  height: 100%;
  width: 100%;
  display: flex;
}
.text-div {
  margin: auto;
  width: 300px;
  text-align: center;
  font-family: monospace;
  color: white;
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
}
.env {
  font-size: 3em;
  flex: 0 1 auto;
}
.links {
  font-size: 1.2em;
  display: flex;
  flex: 0 1 auto;
}
.link {
  margin: 5px;
  flex: 1 1 auto;
}
.link a {
  color: white;
}
.github-link {
  flex: 0 1 auto;
}
.github-link img {
  width: 100px;
}

@media screen and (min-width: 400px) {
  .text-div {
    width: 400px;
  }
  .links {
    font-size: 1.5em;
    display: flex;
    flex: 0 1 auto;
  }
}

Add media queries to support mobile devices


/**
 * digimarks styling
 */

/** Navigation **/

nav .sidenav-trigger
{
    /* Fix for misalignment of hamburger icon */
    margin: 0;
}

nav .sidenav-trigger i
{
    /* Make the hamburger icon great again */
    font-size: 2.7rem;
}

/** Cards and tags **/

.card .card-content,
.card .card-reveal
{
    padding: 12px;
}

.card.tiny
{
    height: 140px;
    overflow: hidden;
}

.card.tiny .card-title
{
    font-size: 18px;
}

.card .card-reveal .digimark-card-header,
.card .digimark-card-header.activator,
.chip.clickable
{
    cursor: pointer;
    /*display: block;*/
}

.card .digimark-card-header-tags
{
    padding-top: 10px;
}

.card-image i,
.list-image i
{
    padding: 5px 0 0 15px;
}

.card.horizontal .card-image img.favicon,
.list-image img.favicon
{
    height: 60px;
    width: 60px;
}

/**
 * digimarks styling
 */

/** Navigation **/

nav .sidenav-trigger
{
    /* Fix for misalignment of hamburger icon */
    margin: 0;
}

nav .sidenav-trigger i
{
    /* Make the hamburger icon great again */
    font-size: 2.7rem;
}

/** Cards and tags **/

.card .card-content,
.card .card-reveal
{
    padding: 12px;
}

.card.tiny
{
    height: 140px;
    overflow: hidden;
}

.card.tiny .card-title
{
    font-size: 18px;
}

.card .card-reveal .digimark-card-header,
.card .digimark-card-header.activator,
.chip.clickable
{
    cursor: pointer;
    /*display: block;*/
}

.card .digimark-card-header-tags
{
    padding-top: 10px;
}

.card-image
{
    min-width: 60px;
}

.card-image i,
.list-image i
{
    padding: 5px 0 0 15px;
}

.card.horizontal .card-image img.favicon,
.list-image img.favicon
{
    height: 60px;
    width: 60px;
}

Fix for narrow favicons if title contains long words


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

div {
  line-height: 1.7em;
}

.arrow-icon-button {
  cursor: pointer;
  padding: 1px 0;
  border: none;
  background: none;
}

.arrow-icon {
  display: inline-block;
  -webkit-mask-image: var(--image-file-treeoutlineTriangles);
  -webkit-mask-size: 32px 24px;
  -webkit-mask-position: 0 0;
  background-color: var(--color-text-primary);
  margin-top: 2px;
  height: 12px;
  width: 13px;
}

.arrow-icon.expanded {
  -webkit-mask-position: -16px 0;
}

.expandable-list-container {
  display: flex;
  margin-top: 4px;
}

.expandable-list-items {
  overflow: hidden;
}

.link,
.devtools-link {
  color: var(--color-link);
  text-decoration: underline;
  cursor: pointer;
  padding: 2px 0; /* adjust focus ring size */
}

button.link {
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
}

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

:host {
  overflow: hidden;
}

div {
  line-height: 1.7em;
}

.arrow-icon-button {
  cursor: pointer;
  padding: 1px 0;
  border: none;
  background: none;
}

.arrow-icon {
  display: inline-block;
  -webkit-mask-image: var(--image-file-treeoutlineTriangles);
  -webkit-mask-size: 32px 24px;
  -webkit-mask-position: 0 0;
  background-color: var(--color-text-primary);
  margin-top: 2px;
  height: 12px;
  width: 13px;
}

.arrow-icon.expanded {
  -webkit-mask-position: -16px 0;
}

.expandable-list-container {
  display: flex;
  margin-top: 4px;
}

.expandable-list-items {
  overflow: hidden;
}

.link,
.devtools-link {
  color: var(--color-link);
  text-decoration: underline;
  cursor: pointer;
  padding: 2px 0; /* adjust focus ring size */
}

button.link {
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

ExpandableList: Allow `overflow: hidden` for long content

This allows the rows of and expandable list to not overflow and show
an ellipsis (...) instead.

This will be used in https://crrev.com/c/3474160.

Bug: 1288158
Change-Id: I53fe095f6a5d808073c7949769d70467601ad66c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3500428
Reviewed-by: Alex Rudenko <d8d88e7d7e77f69e23d1d1432231196fb8e02a62@chromium.org>
Commit-Queue: Wolfgang Beyer <573aa99bb19da47d816981118f95c945310dd3f4@chromium.org>


html, body {
    width: 90%;
    height: 90%;
    margin: 0 auto;
    margin-top: 0.5em;
    padding: 0.5;
    background-color: black;
    font-family: 'Cousine', monospace;
}
#container {
    width: 100%;
    height: 100%;
}
#main {
    position: absolute;
    height: auto;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    margin: 10px;
    background-color: green;
}
#entryInput {
    border: 0;
    background-color: black;
    color: white;
    /* height:200px; */
    font-size: 20pt;
    caret-color: #FF2E88;
    caret-width: 20px;
}
#entryInputContainer {
    margin-left: 20px;
    margin-top: 20px;
}
#cocoaLogo {
    width: 80px;
}
.listStyle {
    color: #FF2E88;
}
input:focus
{
    outline: none;
}

Fix chrome outline visual bug

Fix chrome outline visual bug


body
{
	margin: 0;
	padding: 0;
	border: 0;
}

div
{
	font-family: Lucida Grande;
	font-size: 11px;
	line-height: 14px;
}

div#icon
{
	position: absolute;
	top: 22px;

	width: 32px;
	height: 32px;
}

div#icon img
{
	width: 32px;
	height: 32px;
}

div#title
{
	color:					rgba(255, 255, 255, 1.0);
	text-shadow: 0 1px 2px	rgba(  0,   0,   0, 0.6);

	font-weight: bold;
	line-height: 19px;

	height: 16px;
	padding: 1px 10px 5px 10px;

	overflow: hidden;

//	background-color: #0096FF;
	background-image: url("images/row_background_noshadow.png");
	background-position: repeat-x top;
}

div#text
{
	padding: 3px 38px;

	overflow: hidden;

	background: url("images/row_shadow.png") repeat-x top;
}

div#spacer
{
	height: 32px;
}

body
{
	margin: 0;
	padding: 0;
	border: 0;
}

div
{
	font-family: Lucida Grande;
	font-size: 11px;
	line-height: 14px;
}

div#icon
{
	position: absolute;
	top: 22px;

	width: 32px;
	height: 32px;
}

div#icon img
{
	width: 32px;
	height: 32px;
}

div#title
{
	color:					rgba(255, 255, 255, 1.0);
	text-shadow: 0 1px 2px	rgba(  0,   0,   0, 0.6);

	font-weight: bold;
	line-height: 19px;

	height: 16px;
	padding: 1px 10px 5px 10px;

	overflow: hidden;

//	background-color: #0096FF;
	background-image: url("images/row_background_noshadow.png");
	background-position: repeat-x top;
}

div#text
{
	padding: 3px 38px;

	overflow: hidden;

	background: url("images/row_shadow.png") repeat-x top;

	position: relative;
}

div#spacer
{
	height: 32px;
}

Fix incompatibility with Safari 3 beta.

Fix incompatibility with Safari 3 beta.

--HG--
extra : convert_revision : svn%3A99687598-2e92-11dd-8019-fe7b9d601d1b/trunk%404229


@media screen { body { max-width: 70em; } }
body {
    font: 11pt/1.5 Arial, sans-serif;
}
table {
    width: 100%;
    border-collapse: collapse;
}
table thead {
    display: table-header-group;
}
table tfoot {
    font: 8pt/1.5 Arial, sans-serif;
    display: table-footer-group;
}
table td {
    vertical-align: top;
}
.align-right {
    text-align: right;
}
.totals-row td {
    font-weight: bold;
}
table thead th {
    border-bottom: thin solid black;
}
table tfoot tr:first-child td {
    border-top: thin solid grey;
}

@media screen { body { max-width: 70em; } }
body {
    font: 11pt/1.5 Arial, sans-serif;
}
table {
    width: 100%;
    border-collapse: collapse;
}
table thead {
    display: table-header-group;
}
table tfoot {
    font: 8pt/1.5 Arial, sans-serif;
    display: table-footer-group;
}
table td {
    vertical-align: top;
}
table th {
    text-align: left;
}
.align-right {
    text-align: right;
}
.totals-row td {
    font-weight: bold;
}
table thead th {
    border-bottom: thin solid black;
}
table tfoot tr:first-child td {
    border-top: thin solid grey;
}

Align table headers to left on printouts

No ref


div.rendered_html code {
    font-family: monospace, monospace;
    font-size: 11pt;
    padding-top: 3px;
    padding-left: 2px;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 2px;
}

div.rendered_html code {
    font-family: monospace, monospace;
    font-size: 90%;
    padding-top: 3px;
    padding-left: 2px;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 2px;
}

:art: Use relative scale for font-size at code block css


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

Make cite tag light grey to increase the emphasis on the quote


/*landing class with navbar and background img*/

.landing{
  background-image: url("../assets/backgrounds/Left_Right_Brain.jpg");
  background-size: 100% 100%;
  padding-bottom: 600px;
  margin-left: -9%;
  margin-right: -9%;
}

/*navbar start*/
#nav-bar{
  width: 80%;
  margin-left: 10%;
}

.col-xs-12{
  box-sizing: border-box;
  border: solid #d9d9d9 1px;
  padding: 0px;
  background-color: white;
}

.glyphicon{
  float: left;
  color: #4d4d4d;
  background-color: #d9d9d9;
  text-align: center;
  height: auto;
  width: 49px;
  padding: 10px;
  font-size: 20px;
}

.search-form .form-group {
  float: right;
  transition: all 0.35s, border-radius 0s;
  width: 40px;
  height: 40px;
  margin-bottom: 0;
  background-color: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  border-radius: 25px;
  border: 1px solid #ccc;
}
.search-form .form-group input.form-control {
  padding-right: 30px;
  border: 0 none;
  background: transparent;
  box-shadow: none;
  display:block;
}
.search-form .form-group input.form-control::-webkit-input-placeholder {
  display: none;
}
.search-form .form-group input.form-control:-moz-placeholder {
  /* Firefox 18- */
  display: none;
}
.search-form .form-group input.form-control::-moz-placeholder {
  /* Firefox 19+ */
  display: none;
}
.search-form .form-group input.form-control:-ms-input-placeholder {
  display: none;
}
.search-form .form-group:hover,
.search-form .form-group.hover {
  width: 50%;
  border-radius: 25px 25px 25px 25px;
}
.search-form .form-group span.form-control-feedback {
  position: absolute;
  background-color: transparent;
  top: -6px;
  right: -2px;
  z-index: 2;
  display: block;
  width: 42px;
  height: 42px;
  line-height: 34px;
  text-align: center;
  color: #3596e0;
  left: initial;
  font-size: 16px;
}
/*navbar end*/

Add styling for landing class 1. Add styling for navbar 2. Add styling for background image


/* @import url("//fonts.googleapis.com/css?family=Fira+Sans:400,700,400italic,700italic&subset=latin,latin-ext"); */
@import url("//code.cdn.mozilla.net/fonts/fira.css");
body {
  margin: 5px;
  font-size: 16px;
  line-height: 24px;
  color: #444;
  font-family: "Fira Sans", "Arial", sans-serif;
}

p, ul, ol, blockquote {
  margin-top: 0;
  margin-bottom: 12px;
}

@import url("//fonts.googleapis.com/css?family=Fira+Sans:400,700,400italic,700italic&subset=latin,latin-ext");
body {
  margin: 5px;
  font-size: 16px;
  line-height: 24px;
  color: #444;
  font-family: "Fira Sans", "Arial", sans-serif;
}

p, ul, ol, blockquote {
  margin-top: 0;
  margin-bottom: 12px;
}

Switch to Google Fonts for Fira Sans

Switch to Google Fonts for Fira Sans


img {
  width: 100%;
}

.my-flex-card > div > div.card {
  height: calc(100% - 15px);
  margin-bottom: 15px;
}

.row {
  margin-bottom: 50px;
}

h5 {
  color: green;
}

img {
  width: 100%;
}

.my-flex-card > div > div.card {
  height: calc(100% - 15px);
  margin-bottom: 15px;
}

.row {
  margin-bottom: 50px;
}

#changeWoman {
  color: #0f6256;
  font-family: fantasy;

}

.no-border {
    border: 0;
    box-shadow: none; /* You may want to include this as bootstrap applies these styles too */
}

Change color in title for add/edit woman.


#profile-avatar {
	position: relative;
}

#profile-avatar img {
	position: relative;
	margin-bottom: 10px;
}

#profile-avatar .popover {
	width: 20em;
}

#profile-avatar .popover-contents {
	display: none;
}

.wafer-visible {
}

.wafer-invisible {
	display: none;
}

[draggable] {
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	/* Required to make elements draggable in old WebKit */
	-khtml-user-drag: element;
	-webkit-user-drag: element;
}

.draggable {
	cursor: move;
    padding: 5px;
}

.droppable.over{
    border: 5px dashed #000;
}

/* Temporary workaronud for Bootstrap4 alpha 6
 * Fixed upstream in https://github.com/twbs/bootstrap/pull/21722
 */
@media (max-width: 767px) {
    nav .container {
        margin-left: 0;
        margin-right: 0;
    }
}

Revert "Temporarily workaround a bs4 alpha6 nav bug"

This reverts commit 7317de5b3b3f67e6b2f1b67c83f0305cf4333945.


* {
    padding: 0;
    margin: 0;
    border: 0;
}

html {
    height: 100%;
}
body {
    background-size: cover;
    min-height: 100%;
    color: white;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Lucida Grande", sans-serif;
    font-size: 2em;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body.shorts-weather {
    background: url('images/bg_shorts.jpg') no-repeat center;
}
body.cold-weather {
    background: url('images/bg_cold.jpg') no-repeat center;
}
body.rain-weather {
    background: url('images/bg_rain.jpg') no-repeat center;
}
body.snow-weather {
    background: url('images/bg_snow.jpg') no-repeat center;
    text-shadow: 0 0 5px #000;
}

* {
    padding: 0;
    margin: 0;
    border: 0;
}

html {
    height: 100%;
}
body {
    background: transparent no-repeat center;
    background-size: cover;
    min-height: 100%;
    color: white;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Lucida Grande", sans-serif;
    font-size: 2em;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body.shorts-weather {
    background-image: url('images/bg_shorts.jpg');
}
body.cold-weather {
    background-image: url('images/bg_cold.jpg');
}
body.rain-weather {
    background-image: url('images/bg_rain.jpg');
}
body.snow-weather {
    background-image: url('images/bg_snow.jpg');
    text-shadow: 0 0 5px #000;
}

Use background-size: cover for background images

The background image was previously cover-sized, but this is no longer
the case. cdccd78c650493c6f488217545933e03a2bb0235 introduced multiple
background images, and in the process removed `background-size: cover`.
This commit restores cover sizing.


button, .button {
  background: linear-gradient(to bottom,#eee,#ddd);
  border: 1px solid #999;
  border-radius: 2px;
  text-align: center;
  cursor: pointer;
}
#save {
  background: #dd8;
}
#another {
  background: #8e8;
}
.day-item {
  cursor: pointer;
}
.day-item.partial {
  background: #ee9;
}
.day-item.ready {
  background: #9f9;
}
#messages {
  background: #444;
}
.slack-message {
  background: #888;
}
.dingroll-message {
  background: #eee;
}
.new-dingroll-message {
  background: #ddd;
}
#global-stamp {
  background: #ddd;
}
:invalid {
  color: red;
}
.current {
  color: blue;
}

Make current day text blue in list

Make current day text blue in list


/* Copyright (c) 2012 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

#wallpaper-title {
  margin: 40px 34px;
}

#wallpaper-title h1 {
  margin: 0;
  padding: 0 0 10px 0;
}

#set-wallpaper-page .content-area {
  height: 400px;
}

#wallpaper-grid {
  margin: 0;
  width: 640px;
}

#wallpaper-grid img {
  height: 80px;
  width: 128px;
}

.bottom-bar {
  -webkit-box-orient: horizontal;
  display: -webkit-box;
}

.bottom-bar .spacer {
  -webkit-box-flex: 1;
}

.image-attr {
  line-height: 26px;
  padding: 14px 0 14px 34px;
}

#author-website {
  -webkit-padding-start: 5px;
}

/* Copyright (c) 2012 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

#wallpaper-title span {
  -webkit-padding-start: 17px;
  padding-top: 6px;
}

#set-wallpaper-page .content-area {
  height: 400px;
}

#wallpaper-grid {
  margin: 0;
  width: 640px;
}

#wallpaper-grid img {
  height: 80px;
  width: 128px;
}

.bottom-bar {
  -webkit-box-orient: horizontal;
  display: -webkit-box;
}

.bottom-bar .spacer {
  -webkit-box-flex: 1;
}

.image-attr {
  line-height: 26px;
  padding: 14px 0 14px 34px;
}

#author-website {
  -webkit-padding-start: 5px;
}

Make set wallpaper overlay consistent

Make set wallpaper overlay consistent

Make wallpaper overlay consistent with other overlays. Remove some CSS rules.

BUG=None
TEST=None

Review URL: https://chromiumcodereview.appspot.com/9837022

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


/* modal dialogs */
/* jqModal base Styling courtesy of;
  Brice Burgess <bhb@iceburg.net> */

/* The Window's CSS z-index value is respected (takes priority). If none is supplied,
  the Window's z-index value will be set to 3000 by default (in jqModal.js). You
  can change this value by either;
    a) supplying one via CSS
    b) passing the "zIndex" parameter. E.g.  (window).jqm({zIndex: 500}); */

.modal_dialog {
    display: none;
    position: fixed;
    top: 17%;
    left: 50%;
    margin-left: -300px;
    width: 600px;
    background-color: #EEE;
    color: #333;
    border: 1px solid black;
    padding: 12px;
}

.jqmOverlay { background-color: #000; }

/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html .modal_dialog {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}

/* modal dialogs */
/* jqModal base Styling courtesy of;
  Brice Burgess <bhb@iceburg.net> */

/* The Window's CSS z-index value is respected (takes priority). If none is supplied,
  the Window's z-index value will be set to 3000 by default (in jqModal.js). You
  can change this value by either;
    a) supplying one via CSS
    b) passing the "zIndex" parameter. E.g.  (window).jqm({zIndex: 500}); */

.modal_dialog {
    display: none;
    position: fixed;
    top: 17%;
    left: 50%;
    margin-left: -300px;
    width: 600px;
    background-color: #FFFFFF;
    color: #333;
    border: 1px solid black;
    padding: 12px;
}

.jqmOverlay { background-color: #000; }

/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html .modal_dialog {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}

Change color of modal dialogs to white.

Change color of modal dialogs to white.


/*nanny styles*/
.info{
    min-height: 20px;
    max-height: 150px;
    overflow-y: auto;
	padding: 19px;
	margin-bottom: 20px;
}
.children{
	padding-top: 20px;
}
.children h2{
	margin-top: 10px;
}
.children i{
	margin-top: 10%;
}
.container-completed{
	max-height: 360px;
	overflow-y: auto;
}
.relative{
	position: relative;
}
.children-actions {
	max-height: 660px;
	overflow-y: auto;
}
.notes-child{
	min-height: 85px;
}
.top-tabs {
    border: 1px solid #8dc63f;
    border-radius: 0 5px 5px 5px;
    padding: 15px;
    min-height: 190px;
 	overflow-y: auto;
}
/*end nanny styles*/

/*nanny styles*/
.info{
    min-height: 20px;
    max-height: 150px;
    overflow-y: auto;
	padding: 19px;
	margin-bottom: 20px;
}
.children{
	padding-top: 20px;
}
.children h2{
	margin-top: 10px;
}
.children i{
	margin-top: 10%;
}
.container-completed-action{
	max-height: 245px;
	overflow-y: auto;
	overflow-x: hidden;
}
.relative{
	position: relative;
}
.children-actions {
	max-height: 660px;
	overflow-y: auto;
}
.notes-child{
	min-height: 85px;
}
.top-tabs {
    border: 1px solid #8dc63f;
    border-radius: 0 5px 5px 5px;
    padding: 15px;
    min-height: 190px;
 	overflow-y: auto;
}
/*end nanny styles*/

Fix horizontal scrollbar and max-height

Fix horizontal scrollbar and max-height


bm-select, bm-selected, bm-options, bm-option {
    display: block;
    box-sizing: border-box;
}

bm-select {
    position: relative;
    border: 1px solid #000; /*Needs to be removed from default styles*/
}

bm-options {
    display: none;
    position: absolute;
    border: 1px solid #000; /*Needs to be removed from default styles*/
    left: 0;
    right: 0;
}

/*bm-select.is-open > bm-options {
    display: block;
}*/

bm-selected, bm-option {
    padding: 5px; /*Needs to be removed from default styles*/
}

bm-selected:after {
    content: "";
    border-top: 12px solid black;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    float: right;
    margin-top: 3px;
}

Remove after icon so that custom ones can be used


.xdocs-panel {
  border-spacing: 5px 5px;
  width: 100%;
}

.xdocs-panel iframe {
  width: 100%;
}

.xdocs-error {
  margin-top: 10px;
  color: red;
  font-weight: bold;
}

.xdocs-panel {
  border-spacing: 5px 5px;
  width: 100%;
}

.xdocs-panel iframe {
  width: 100%;
  border-width: 1px;
  border-style: solid;
}

.xdocs-error {
  margin-top: 10px;
  color: red;
  font-weight: bold;
}

Make border around iframe with HTML document smaller

Change-Id: I9162ffc4c7a4ecca6ff0a70ac0370c7eadcb4efb


/* ==========================================================================
   Base styles
   ========================================================================== */

html {
    color: #fff;
    font-family: 'Open sans', sans-serif;
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
}

body {
    background: #222;
}

a {
    color: #069;
    text-decoration: none;
}

a:hover,
a:focus,
a:active {
    text-decoration: underline;
}

/*
 * Remove text-shadow in selection highlight.
 * These selection declarations have to be separate.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/* Typography
   ========================================================================== */

h1 {
    margin: 0 0 0.75em;
    font-size: 3em;
    line-height: 1.2em;
}

h2 {
    margin: 1.5em 0 1em;
    font-size: 2em;
}

h3 {
    margin: 0 0 0.5em;
    color: #555;
    font-size: 1.25em;
}

p {
    margin: 0 0 2em;
}

/* ==========================================================================
   Base styles
   ========================================================================== */

html {
    color: #fff;
    font-family: 'Open sans', sans-serif;
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
}

body {
    background: #222;
}

a {
    color: #069;
    text-decoration: none;
}

a:hover,
a:focus,
a:active {
    text-decoration: underline;
}

/*
 * Remove text-shadow in selection highlight.
 * These selection declarations have to be separate.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/* Typography
   ========================================================================== */

h1 {
    margin: 0 0.5em 0.75em;
    font-size: 3em;
    line-height: 1.2em;
}

h2 {
    margin: 1.5em 0 1em;
    font-size: 2em;
}

h3 {
    margin: 0 0 0.5em;
    color: #555;
    font-size: 1.25em;
}

p {
    margin: 0 0 2em;
}

Adjust line-wrapping of promo heading

Adjust line-wrapping of promo heading


.reveal h1 { font-size: 3em; }

.slides section.has-light-background,
.slides section.has-light-background h1 {
    color: FireBrick;
}

.reveal h6 {
    text-align: center;
    font-style: italic;
    position: fixed;
    bottom: 1px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
    font-size: 50%;
}

.slides section.has-light-background h6 {
    color: chocolate;
    background: ivory;
}

.reveal pre {
    width: 100%;
    font-size: 0.8em;
}

.reveal h1 { font-size: 3em; }

.slides section.has-light-background,
.slides section.has-light-background h1,
.slides section.has-light-background h2 {
    color: FireBrick;
}

.reveal h6 {
    text-align: center;
    font-style: italic;
    position: fixed;
    bottom: 1px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
    font-size: 50%;
}

.slides section.has-light-background h6 {
    color: chocolate;
    background: ivory;
}

.reveal pre {
    width: 100%;
    font-size: 0.8em;
}

Change h2 colour on light-coloured slides


.docblock pre.rust { background: #eeeeff; }
pre.trait, pre.fn, pre.struct, pre.enum, pre.typedef { background: #fcfefc; }

/* Shift "where ..." part of FUNCTION definition down a line */
.content .fn .where { display: block; }
/* Bit of whitespace to indent it */
.content .fn .where::before { content: '  '; }

Apply nice css to function's where clauses too


.toolbar button {
    margin: 2px; padding: 0;
}

.ag-cell {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

label {
    font-weight: normal !important;
}

.ag-menu {
    z-index: 50;
}

.div-percent-bar {
    display: inline-block;
    height: 100%;
    position: relative;
    z-index: 0;
}

.div-percent-value {
    position: absolute;
    padding-left: 4px;
    font-weight: bold;
    font-size: 13px;
    z-index: 10;
}

.div-outer-div {
    display: inline-block;
    height: 100%;
    width: 100%;
}

.toolbar button {
    margin: 2px; padding: 0;
}

.ag-cell {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

label {
    font-weight: normal !important;
}

.ag-menu {
    z-index: 50 !important;
}

.div-percent-bar {
    display: inline-block;
    height: 100%;
    position: relative;
    z-index: 0;
}

.div-percent-value {
    position: absolute;
    padding-left: 4px;
    font-weight: bold;
    font-size: 13px;
    z-index: 10;
}

.div-outer-div {
    display: inline-block;
    height: 100%;
    width: 100%;
}

Fix menu overlap with spark lines

Fix menu overlap with spark lines


body {
	margin-top: 20px;
	margin-bottom: 64px;
	padding-left: 64px;
	padding-right: 64px;
	font-family: -apple-system;
	font-size: [[font-size]]px;
}

:root {
	--body-color: #444;
	--body-background-color: -apple-system-text-background;
	--accent-color: rgba(8, 106, 238, 1);
	--block-quote-border-color: rgba(8, 106, 238, .50);
}

@media(prefers-color-scheme: dark) {
	:root {
		--body-color: #d2d2d2;
		--body-background-color: #2d2d2d;
		--accent-color: rgba(94, 158, 244, 1);
		--block-quote-border-color: rgba(94, 158, 244, .50);
		--header-table-border-color: rgba(255, 255, 255, 0.1);
	}
}

body a, body a:visited {
	color: var(--accent-color);
}

pre {
	border: 1px solid var(--accent-color);
	padding: 10px;
}

.nnw-overflow table {
	border: 1px solid var(--accent-color);
}

body {
	margin-top: 20px;
	margin-bottom: 64px;
	padding-left: 48px;
	padding-right: 48px;
	font-family: -apple-system;
	font-size: [[font-size]]px;
}

:root {
	--body-color: #444;
	--body-background-color: -apple-system-text-background;
	--accent-color: rgba(8, 106, 238, 1);
	--block-quote-border-color: rgba(8, 106, 238, .50);
}

@media(prefers-color-scheme: dark) {
	:root {
		--body-color: #d2d2d2;
		--body-background-color: #2d2d2d;
		--accent-color: rgba(94, 158, 244, 1);
		--block-quote-border-color: rgba(94, 158, 244, .50);
		--header-table-border-color: rgba(255, 255, 255, 0.1);
	}
}

body a, body a:visited {
	color: var(--accent-color);
}

pre {
	border: 1px solid var(--accent-color);
	padding: 10px;
}

.nnw-overflow table {
	border: 1px solid var(--accent-color);
}

Reduce size of article left and right padding


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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

Use system fonts by default

Use system fonts by default

Like GitHub.com


/*
  Colour Palette
  - Peach: #FF655C - rgb(255,101,92)
  - Dark Red: #540D01 - rgb(84, 13, 1)
  - Burgendy: #4A0102 - rgb(74, 1, 2)
  - Dark Brown: #3D1302 - rgb(61, 19, 2)
 */

html {
  font: normal 100%/1.5 Helvetica,sans-serif; /* 16px/24px */
}

.yotta {

}

.zetta{

}

h1 .exa{

}

h2 .peta {

}

h3, .tera {

}

h4, .giga {

}

h5, .mega {

}

h6, .kilo {

}

/*
  Colour Palette
  - Peach: #FF655C - rgb(255,101,92)
  - Dark Red: #540D01 - rgb(84, 13, 1)
  - Burgendy: #4A0102 - rgb(74, 1, 2)
  - Dark Brown: #3D1302 - rgb(61, 19, 2)
 */

html {
  font: normal 100%/1.5 Helvetica,sans-serif; /* 16px/24px */
}

.yotta {
    font-size: 1.0000rem;
}

.zetta{
    font-size: 1.0000rem;
}

h1 .exa{
    font-size: 1.0000rem;
}

h2 .peta {
    font-size: 1.0000rem;
}

h3, .tera {
    font-size: 1.0000rem;
}

h4, .giga {
    font-size: 1.0000rem;
}

h5, .mega {
    font-size: 1.0000rem;
}

h6, .kilo {
    font-size: 1.0000rem;
}

small, .milli {

}

.micro {

}

Add font Size to classes

Add font Size to classes


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%;
        height: 100%;
        position: relative;
    }

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

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

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

    .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%;
        height: 100%;
        position: relative;
        display: block;
        width: auto;
    }

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

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

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

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

Set video to maintain screen ratio

Set video to maintain screen ratio


.flex {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
}

.content {
    flex-grow: 1;
    flex-basis: 569px;
}

.router-content {
    margin-top: 60px;
}

@media screen and (min-width: 769px) {
    .content {
        margin-left: 200px;
    }
    .project-header {
        width: calc(100% - 200px) !important;
    }
}

.project-header {
    position: fixed;
    padding: 0 20px;
    width: 100%;
    height: 60px !important;
    background-color: #1b314c;
    display: flex;
    justify-content: space-between;
    box-shadow: 0 1px 3px rgba(10, 10, 10, 0.25);
    z-index: 99;
}

.project-header .branding {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}

.project-header .info {
    display: flex;
    justify-content: center;
    align-items: center;
}

p {
    color: #F6F6F6;
}

p strong {
    font-weight: bold;
    color: #F6F6F6;
}

.flex {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
}

.content {
    flex-grow: 1;
    flex-basis: 569px;
}

.router-content {
    margin-top: 60px;
}

@media screen and (min-width: 769px) {
    .content {
        margin-left: 200px;
    }
    .project-header {
        width: calc(100% - 200px) !important;
    }
}

.project-header {
    position: fixed;
    padding: 0 20px;
    width: 100%;
    height: 60px !important;
    background-color: #1793D3;
    display: flex;
    justify-content: space-between;
    box-shadow: 0 1px 3px rgba(10, 10, 10, 0.25);
    z-index: 99;
}

.project-header .branding {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}

.project-header .info {
    display: flex;
    justify-content: center;
    align-items: center;
}

p {
    color: #F6F6F6;
}

p strong {
    font-weight: bold;
    color: #F6F6F6;
}

Change project header BG color

Change project header BG color


.layout_top {
	width: 100%;

	margin:0;
	padding:0;
}
.layout_left {
	position: fixed;
	top: 20px;
	bottom: 0px;
	left: 0px;
	width:320px;

	margin:0;
	padding;0;

	background-color:black;

	overflow-y: auto;
}

.layout_right {
	position: fixed;
	top: 20px;
	bottom: 0px;
	left: 320px;
	right: 0px;

	overflow-y: auto;
}

.layout_top {
	width: 100%;

	margin:0;
	padding:0;
}
.layout_left {
	position: fixed;
	top: 20px;
	bottom: 0px;
	left: 0px;
	width:320px;

	margin:0;
	padding:0;

	background-color:black;

	overflow-y: auto;
}

.layout_right {
	position: fixed;
	top: 20px;
	bottom: 0px;
	left: 320px;
	right: 0px;

	overflow-y: auto;

	padding: 5px;
}

Add some padding to the main contents.

Add some padding to the main contents.

Signed-off-by: Guillaume Clement <3b9efcf0dcc9fb33b0355f12fedfe498e1880012@baobob.org>


body {
  padding-top: 65px;
  background-image: url(http://www.lafeens.com/wp-content/uploads/2012/12/donuts_background-e1355174695278.jpg);
  background-size: cover;
  padding: 20px;
}

#footer {
  width: 100%;
  display: table;
  text-align: center;
  background-color: orange;
}

#copyright {
  padding: 15px;
}

.message {
  background-color: #FFEB99;
  border-right: 2px solid #eeeeee;
  border-bottom: 2px solid #eeeeee;
  margin-bottom: 15px;
  padding: 10px;
}

body {
  padding-top: 65px;
  background-image: url(http://www.lafeens.com/wp-content/uploads/2012/12/donuts_background-e1355174695278.jpg);
  background-size: cover;
  padding: 20px;
}

#header {
  margin-bottom: 50px;
}

#footer {
  width: 100%;
  display: table;
  text-align: center;
  background-color: orange;
}

#copyright {
  padding: 15px;
}

.message {
  background-color: #FFEB99;
  border-right: 2px solid #eeeeee;
  border-bottom: 2px solid #eeeeee;
  margin-bottom: 15px;
  padding: 10px;
}

Add margin to navbar because it's fixed header.


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

Revert "Remove default app css file"

Revert "Remove default app css file"

This reverts commit c3db297f3348c385e4d0764ed30419d90b8e44e2.


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

.status.new {
}
.status.in-progress {
    font-style: italic;
}
.status.done {
    text-decoration: line-through;
    color: #aaa;
}
.status.stalled {
    font-weight: bolder;
}

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

.status.new {
}
.status.in-progress {
    font-style: italic;
}
.status.done, .status.deleted {
    text-decoration: line-through;
    color: #aaa;
}
.status.stalled {
    font-weight: bolder;
}

Make deleted tasks show like done

Make deleted tasks show like done


body {
    color: #333333;
    background-color: #34495e;
    font: 100%/1.4em "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    text-align: center;
    -webkit-text-size-adjust: none;
}

h1 {
    color: #FFF;
    font-size: 4em;
    font-weight: normal;
    line-height: 1.2em;
    margin: 0 auto;
    padding: 10px 20px;
    position: relative;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
    width: 60%;
}

.heart {
    color: #c0392b;
    display: inline-block;
    font-style: normal;
    font-weight: 500;
    font-size: 476px;
    margin-top: .3em;
}

body {
    color: #333333;
    background-color: #34495e;
    font: 100%/1.4em "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    text-align: center;
    -webkit-text-size-adjust: none;
}

h1 {
    color: #FFF;
    font-size: 4em;
    font-weight: normal;
    line-height: 1.2em;
    margin: 50px auto 20px;
    padding: 10px 20px;
    position: relative;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
    width: 60%;
}

.heart {
    color: #c0392b;
    display: inline-block;
    font-style: normal;
    font-weight: 500;
    font-size: 476px;
    margin-top: .3em;
}

Update margin property on h1 tag.

Update margin property on h1 tag.


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

/*---------------------------------------------------------------------------*\
 |  index.css                                                                |
 |                                                                           |
 |  Copyright © 2017, Rajiv Bakulesh Shah, original author.                  |
 |                                                                           |
 |      This program is free software: you can redistribute it and/or modify |
 |      it under the terms of the GNU General Public License as published by |
 |      the Free Software Foundation, either version 3 of the License, or    |
 |      (at your option) any later version.                                  |
 |                                                                           |
 |      This program is distributed in the hope that it will be useful, but  |
 |      WITHOUT ANY WARRANTY; without even the implied warranty of           |
 |      MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU    |
 |      General Public License for more details.                             |
 |                                                                           |
 |      You should have received a copy of the GNU General Public License    |
 |      along with this program.  If not, see:                               |
 |          <http://www.gnu.org/licenses/>                                   |
\*---------------------------------------------------------------------------*/

/* Inline http://fonts.googleapis.com/css?family=Lato:300,400,700 */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 300;
  src: local("Lato Light"), local("Lato-Light"), url("https://themes.googleusercontent.com/static/fonts/lato/v7/nj47mAZe0mYUIySgfn0wpQ.ttf") format("truetype");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  src: local("Lato Regular"), local("Lato-Regular"), url("https://themes.googleusercontent.com/static/fonts/lato/v7/v0SdcGFAl2aezM9Vq_aFTQ.ttf") format("truetype");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  src: local("Lato Bold"), local("Lato-Bold"), url("https://themes.googleusercontent.com/static/fonts/lato/v7/DvlFBScY1r-FMtZSYIYoYw.ttf") format("truetype");
}

body {
  margin: 0;
  border: 0;
  padding: 0;
  background: black;
  color: white;
  font: 24px "Lato", sans-serif;
  text-transform: lowercase;
}

a {
  color: white;
}

em {
  font-style: normal;
  font-weight: 700;
}

Add styles common to all components

Add styles common to all components

I referred to my old styles:
https://github.com/brainix/cassette/blob/master/client/style.scss


body {
  padding-top: 20px;
  padding-bottom: 20px;
}

.run-button {
  margin-top: 20px;
  width: 100%;
}

.navbar {
  margin-bottom: 20px;
}

#programs-dropdown {
  width: 100%;
}

#rotation-buttons {
  width: 100%;
}

.slider {
  width: 100% !important;
}

.dropdown-menu {
  font-size: 18px;
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
  width: 75%;
}

body {
  padding-top: 20px;
  padding-bottom: 20px;
}

.run-button {
  margin-top: 20px;
  width: 100%;
}

.navbar {
  margin-bottom: 20px;
}

#programs-dropdown {
  width: 100%;
}

#rotation-buttons {
  width: 100%;
}

.slider {
  width: 100% !important;
}

.dropdown-menu {
  font-size: 18px;
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
  width: 75%;
  max-height: 300px;
  overflow-x: hidden;
}

Add scroll to program dropdown

Add scroll to program dropdown


.container {
  margin: 0 auto;
  max-width: 700px;
  background-color: #fff;
}

h1, h2, h3, h4, h5 {
  margin: 5px 0 0;
}

.flex {
  display: inline-block;
  vertical-align: top;
}

.flex.flex-44 {
  width: 44%;
  max-width: 44%;
}

.md-margin>div {
  margin: 10px;
}

@media (max-width: 700px;
) {
  .flex.flex-44 {
    width: 100%;
    max-width: 100%;
  }
}

Add custom styling for Demo

chore(Demo): Add custom styling for Demo


body {
  font-size: 1.2rem;
  font-family: Arial;
  background-color: #555;
  padding-top: 20px;
  position: relative;
}

#container {
  display: flex;
  justify-content: space-around;
}

.column {
  width: 45%;
  position: relative;
}

#sourceTA {
    width: 100%;
    font-size: 1.2rem;
    font-family: Arial;
    padding: 20px;
    height: 92vh;
    background-color: #EEE;
    box-sizing: border-box;
}

#targetDiv {
  border: 1px dashed #333333;
  height: 92vh;
  box-sizing: border-box;
  padding: 0 20px 20px;
  background-color: white;
}

.toggle {
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: .9rem;
  width: 10rem;
  padding: 8px;
  box-sizing: border-box;
}

body {
  font-size: 1.2rem;
  font-family: Arial;
  background-color: #555;
  padding-top: 20px;
  position: relative;
}

#container {
  display: flex;
  justify-content: space-around;
}

.column {
  width: 45%;
  position: relative;
}

#sourceTA {
    width: 100%;
    font-size: 1.2rem;
    font-family: Arial;
    padding: 20px;
    height: 92vh;
    background-color: #EEE;
    box-sizing: border-box;
}

#targetDiv {
  border: 1px dashed #333333;
  height: 92vh;
  overflow:scroll;
  box-sizing: border-box;
  padding: 0 20px 20px;
  background-color: white;
}

.toggle {
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: .9rem;
  width: 10rem;
  padding: 8px;
  box-sizing: border-box;
}

Add overflow scroll to display div

Add overflow scroll to display div


.imagare-image-upload-screen, .imagare-uploaded-images-panel {
  width: 100%;
  border-spacing: 0px 5px;
}

.imagare-uploaded-images-panel td {
  vertical-align: middle !important;
}

.imagare-image-upload-panel {
  width: 350px;
  border: 1px solid #B3B2B2;
  border-spacing: 5px 5px;
}

.imagare-image-upload-panel td {
  text-align: center;
  font-size: 18px;
  margin-bottom: 3px;
}

.imagare-uploaded-images-label {
  font-size: 20px;
}

.imagare-image-preview {
  max-width: 50px;
  max-height: 50px;
  margin: 5px;
}

.imagare-image-popup {
  max-width: 500px;
  max-height: 500px;
}

.imagare-image-upload-screen, .imagare-uploaded-images-panel {
  width: 100%;
  border-spacing: 0px 5px;
}

.imagare-uploaded-images-panel td {
  vertical-align: middle !important;
}

.imagare-image-upload-panel {
  width: 350px;
  border: 1px solid #B3B2B2;
  border-spacing: 5px 5px;
  background-color: #EEE;
}

.imagare-image-upload-panel td {
  text-align: center;
  font-size: 18px;
  margin-bottom: 3px;
}

.imagare-image-upload-panel div {
  color: #999;
}

.imagare-uploaded-images-label {
  font-size: 20px;
}

.imagare-image-preview {
  max-width: 50px;
  max-height: 50px;
  margin: 5px;
}

.imagare-image-popup {
  max-width: 500px;
  max-height: 500px;
}

Apply nicer style to image upload panel

Apply nicer style to image upload panel

Change-Id: I8d0723e413cb55921fce937c7202ad5a8059a90f
Signed-off-by: Edwin Kempin <b444e279ad95fdef4fbdd82c813b624595df204a@sap.com>


.well {
  background-color: white;
}

#my-footer {
  background: #03a451;
  color: #eee;
  font-size: 11px;
  padding: 20px;
  margin-top: 10px;
  overflow: hidden;
}

.main-container {
  min-height: 15%;
  min-width: 400px;
  overflow: hidden;
}

body {
  min-width: 400px;
}

.well {
  background-color: white;
}

#my-footer {
  background: #03a451;
  color: #eee;
  font-size: 11px;
  padding: 20px;
  margin-top: 20px;
  overflow: hidden;
}

.main-container {
  min-width: 400px;
  overflow: hidden;
}

body {
  min-width: 400px;
}

.results-content {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;

  /*-moz-column-width: 100px;
-webkit-column-width: 100px;
column-width: 100px;*/
}

.no-break {
  -webkit-column-break-inside: avoid; /* Chrome, Safari */
  page-break-inside: avoid; /* Theoretically FF 20+ */
  break-inside: avoid-column;
  display:table;

}

.home-tab {
  margin: 2%;
}

Add styling to view long lists of observations into two columns


/*
 * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
 * https://medium.com/@elad/supporting-css-grid-in-internet-explorer-b38669e75d66
*/

header { grid-area: header }
main   { grid-area: main   }
aside  { grid-area: aside  }
footer { grid-area: footer }

body {
  display: grid;
  grid-template-areas:
    "header" "main" "aside" "footer"
}

@media ( orientation : landscape ) {
  body {
    grid-template-areas:
      "header header" "main aside" "footer footer";

    grid-template-columns: 70% 30%;
    grid-template-rows: 15vh 70vh  15vh
  }
}

/*
 * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
 * https://medium.com/@elad/supporting-css-grid-in-internet-explorer-b38669e75d66
*/

header { grid-area: header }
main   { grid-area: main   }
aside  { grid-area: aside  }
footer { grid-area: footer }

body {
  display: grid;
  grid-template-areas:
    "header" "main" "aside" "footer";
  grid-template-rows: 15vh 55vh 20vh  10vh
}

@media ( orientation : landscape ) {
  body {
    grid-template-areas:
      "header header" "main aside" "footer footer";

    grid-template-columns: 70% 30%;
    grid-template-rows: 15vh 70vh  15vh
  }
}

Add grid template rows for mobile CSS layout


/*
	The default style.
*/

body {
	cursor: default !important;
	padding-top: 20px !important;
	font-size: 12px !important;
	font-family: sans-serif !important;
	background: url('/static/img/background.png') no-repeat top center #272B30;
	background-attachment: fixed;
	margin-top: 200px;
}

a {
	font-weight: bold;
	text-decoration: none !important;
}

a:hover {
	text-decoration: underline !important;
}

.right {
	text-align: right;
}

.middle {
	text-align: center;
}

.emblem {
	max-width: 128px;
	max-height: 128px;
}

.outfit {
	top: -16px;
	text-align: right;
	position: relative;
	z-index: 100;
}

.progress-bar-custom {
	background-color: #5E58AF;
}

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

Add a slight margin above tab content

Add a slight margin above tab content


body {
    background-color: lightblue;
}

h1 {
    color: navy;
    margin-left: 20px;
}

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

body {
  font-family: 'Varela Round', sans-serif;

}

Add Varela round to sharetribe

Add Varela round to sharetribe


body {
  font-family: sans-serif;
}

#drop-zone {
  text-align: center;
}

#drop-zone .help-label {
  visibility: hidden;
  display: inline-block;
  margin: 0 auto;
  color: #999;
  margin: 1em;
  font-weight: bold;
  text-shadow: 1px 1px 0 #fff;
}

#drop-zone.drop-target {
  border: 3px dashed silver;
  background: #ddd;
}

#drop-zone.drop-target .help-label {
  visibility: visible;
}

#drop-zone.dropping {
  background: white;
  border: 3px dashed red;
}

#drop-zone.dropping .help-label {
  visibility: hidden;
}

.file.invisible, .folder.invisible {
  background: #eee;
  /* display: none; */
}

.folder-children {
  padding-left: 1em;
}

.file > header, .folder > header {
  font-family: monospace;
}

.folder > summary {
  font-weight: bold;
}

.folder-children {
  display: none;
}

.open > .folder-children {
  display: block;
}

.folder > header::before {
  content: "\25B6";
}

.folder.open > header::before {
  content: "\25BC";
}

body {
  font-family: sans-serif;
}

#drop-zone {
  text-align: center;
}

#drop-zone .help-label {
  visibility: hidden;
  display: inline-block;
  margin: 0 auto;
  color: #999;
  margin: 1em;
  font-weight: bold;
  text-shadow: 1px 1px 0 #fff;
}

#drop-zone.drop-target {
  border: 3px dashed silver;
  background: #ddd;
}

#drop-zone.drop-target .help-label {
  visibility: visible;
}

#drop-zone.dropping {
  background: white;
  border: 3px dashed red;
}

#drop-zone.dropping .help-label {
  visibility: hidden;
}

.file.invisible, .folder.invisible {
  background: #eee;
  /* display: none; */
}

.folder-children {
  padding-left: 1em;
}

.file > header, .folder > header {
  font-family: monospace;
}

.folder > summary {
  font-weight: bold;
}

.folder-children {
  display: none;
}

.open > .folder-children {
  display: block;
}

.folder > header::before {
  content: "\25B6";
  display: inline-block;
  text-align: center;
  width: 1em;
}

.folder.open > header::before {
  content: "\25BC";
}

Set width on symbol prefix

Set width on symbol prefix


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

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

.headerContainer {
  position: relative;
  background: var(--component-bg);

  @nest .root:not(.isCollapsed) &::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    border-bottom: 1px solid var(--hairline-color);
  }

  @media (--max-screen-medium) {
    position: sticky;
    top: 0;
    z-index: var(--zindex-pane);
  }
}

.documentViewerContainer {
  flex: 1;
  min-height: 0;
  position: relative;

  @nest .isCollapsed & {
    display: none;
  }
}

.documentScroller {
  @media (--screen-medium) {
    height: 100%;
    overflow: auto;
  }
}

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

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

.headerContainer {
  position: relative;
  background: var(--component-bg);

  @nest .root:not(.isCollapsed) &::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    border-bottom: 1px solid var(--hairline-color);
    z-index: 1;
  }

  @media (--max-screen-medium) {
    position: sticky;
    top: 0;
    z-index: var(--zindex-pane);
  }
}

.documentViewerContainer {
  flex: 1;
  min-height: 0;
  position: relative;

  @nest .isCollapsed & {
    display: none;
  }
}

.documentScroller {
  @media (--screen-medium) {
    height: 100%;
    overflow: auto;
  }
}

Fix header's bottom border visibility

[desk-tool] Fix header's bottom border visibility


html {
    padding: 10px;
    font-family: Verdana, sans-serif;
}

.username {
  color: grey;
}

.input {
  margin-bottom: 5em;
  position: fixed;
}

.messages {
  width: 100%;
  height: 30em;
  overflow: auto;
  border: 1px black;
  background-color: white;
}

Add message area overflow css

Add message area overflow css


/*
   Licensed to the Apache Software Foundation (ASF) under one or more
   contributor license agreements.  See the NOTICE file distributed with
   this work for additional information regarding copyright ownership.
   The ASF licenses this file to You under the Apache License, Version 2.0
   (the "License"); you may not use this file except in compliance with
   the License.  You may obtain a copy of the License at

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

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

/*Shows the value of the name attribute when hovered*/
/* Disabled
a[name]:hover:after{
    content: " #" attr(name);
    font-size: 90%;
    text-decoration: none;
}
*/

/*
 * Hide class="sectionlink", except when an enclosing heading
 * has the :hover property.
 * Used to hide the ¶ marker for generating internal links
 */
.sectionlink {
  display: none;
}
:hover > .sectionlink {
  display: inline;
  /* Green so shows up on section headings too */
  color: rgb(0,255,0);
}

Fix test data files so EOL does not change across OSes

git-svn-id: https://svn.apache.org/repos/asf/jakarta/jmeter/trunk@1180018 13f79535-47bb-0310-9956-ffa450edef68

Former-commit-id: 37efe0082ed4408ed57d54155aa2a5f1f2bf755b


.post-link {
  color: #000;
}

.social-icons {
  margin: 16px;
  display: flex;
  justify-content: space-evenly;
}

a.social:link, a.social:visited {
  color: white;
  text-decoration: none;
  font-size: 32px;
  padding: 8px;
}

a.social :hover {
  opacity: 0.5;
}

figure {
  margin-left: 0px;
  margin-right: 0px;
}

pre {
  overflow-x: auto;
  white-space: pre;
}

Change the color of links to blog posts to black.


img {
  margin: auto;
  text-align: center;
  height: 30%;
  width: 30%;
}

pre {
  font-family: monospace;
  background-color: #FFEDEC;
  margin-left: 10%;
  margin-right: 10%;
}

h3 {
  text-align: left
}

img {
  margin: auto;
  text-align: center;
  height: 30%;
  width: 30%;
}

pre {
  font-family: monospace;
  background-color: #FFEDEC;
  margin-left: 10%;
  margin-right: 10%;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 2%;
  padding-bottom: 2%;
}

h3 {
  text-align: left
}

Fix padding on code blocks

Fix padding on code blocks


.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; }
.ui-timepicker-div dl dd { margin: -25px 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

Add style definitions for resetting grid label table


/****************
 GENERAL STYLES
****************/

body {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  padding-top: 80px;
}

main {
  padding-top: 2%;
}

.text-muted {
  color: #bcbbbb;
}

/****************
 NAVIGATON STYLES
****************/

.navbar {
  text-transform: uppercase;
  font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight: 700;
  color: black;
}

.navbar-fixed-top {
  padding: 20px 0;
}
.navbar-brand {
  font-size: 2em;
}

/**************
  FOOTER STYLES
***************/

footer {
  margin-top: 2%;
}

/****************
 GENERAL STYLES
****************/

body {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  padding-top: 80px;
}

main {
  padding-top: 2%;
}

.text-muted {
  color: #bcbbbb;
}

/****************
 NAVIGATON STYLES
****************/

.navbar {
  text-transform: uppercase;
  font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight: 700;
  color: black;
}

.navbar-fixed-top {
  padding: 20px 0;
}
.navbar-brand {
  font-size: 2em;
}

/**************
  FOOTER STYLES
***************/

footer {
  margin-top: 2%;
}

Fix unused css and html classes

Fix unused css and html classes


canvas {
	border: 2px solid black;
	background-color: black;
}
video {
	display: none;
}

Add missing newline at end of file

Add missing newline at end of file

Missing newline at end of `webgl.css` fixed.


/*
   Do not decorate list items in the post listings
*/
ul.post-list {
    list-style-type: none
}

.post-item {
    width: 6in;
    overflow: auto;
    margin: 20px 20px 50px 20px;
}

.about {
    width: 6in;
    margin: 20px 20px 50px 20px;
}

.post-date {
    font-style: italic
}

.post-tags {
    float: right
}

#disqus_thread {
    margin-left: 1in
}

#menu {
    position: fixed;
    right: 0;
}

#menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: right;
}

#menu li {
    padding-right: 1em;
}

#tag-list {
    float: right;
    width: 2in;
    position: fixed;
    right: 0;
    bottom: 0;
}

/*
   Do not decorate list items in the post listings
*/
ul.post-list {
    list-style-type: none
}

.post-item {
    max-width: 6in;
    overflow: auto;
    margin: 20px 20px 50px 20px;
}

.about {
    width: 6in;
    margin: 20px 20px 50px 20px;
}

.post-date {
    font-style: italic
}

.post-tags {
    float: right
}

#disqus_thread {
    margin-left: 1in;
    max-width: 6in;
}

#menu {
    position: fixed;
    right: 0;
}

#menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: right;
}

#menu li {
    padding-right: 1em;
}

#tag-list {
    float: right;
    width: 2in;
    position: fixed;
    right: 0;
    bottom: 0;
    padding-right: 1em;
    padding-bottom: 1em;
}

Put some padding around the tag list

Put some padding around the tag list


html {
  height: 100%;
}

body {
    min-height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 64px auto 64px;
    grid-template-areas:
        "header header header"
        ". main ."
        "footer footer footer";
    margin: 0;
    background-color: #ECEFF1;
}

header {
    grid-area: header;
    display: flex;
    justify-content: flex-center;
    background-color: #607D8B;
}

main {
    grid-area: main;
    justify-self: center;
}

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

article {
    background-color: #FFF;
    padding: 10px;
    border-width: 5px;
    border-style: solid;
    border-color: #DDD;
    margin: 10px;
}

article:hover {
    background-color: #DDD;
}

footer {
    grid-area: footer
}

Add some very basic styling

Add some very basic styling


/*
 * django-selectable UI widget CSS
 * Source: https://bitbucket.org/mlavin/django-selectable
 * Docs: http://django-selectable.readthedocs.org/
 *
 * Copyright 2010-2012, Mark Lavin
 * BSD License
 *
*/
ul.selectable-deck, ul.ui-autocomplete {
    list-style: none outside none;
}
ul.selectable-deck li.selectable-deck-item,
ul.ui-autocomplete li.ui-menu-item {
    margin: 0;
    list-style-type: none;
}
ul.selectable-deck li.selectable-deck-item .selectable-deck-remove {
    float: right;
}
ul.selectable-deck-bottom-inline,
ul.selectable-deck-top-inline {
    padding: 0;
}
ul.selectable-deck-bottom-inline li.selectable-deck-item,
ul.selectable-deck-top-inline li.selectable-deck-item {
    display: inline;
}
ul.selectable-deck-bottom-inline li.selectable-deck-item .selectable-deck-remove,
ul.selectable-deck-top-inline li.selectable-deck-item .selectable-deck-remove {
    margin-left: 0.4em;
    display: inline;
    float: none;
}
ul.ui-autocomplete li.ui-menu-item span.highlight {
    font-weight: bold;
}

/*
 * django-selectable UI widget CSS
 * Source: https://bitbucket.org/mlavin/django-selectable
 * Docs: http://django-selectable.readthedocs.org/
 *
 * Copyright 2010-2013, Mark Lavin
 * BSD License
 *
*/
ul.selectable-deck, ul.ui-autocomplete {
    list-style: none outside none;
}
ul.selectable-deck li.selectable-deck-item,
ul.ui-autocomplete li.ui-menu-item {
    margin: 0;
    list-style-type: none;
}
ul.selectable-deck li.selectable-deck-item .selectable-deck-remove {
    float: right;
}
ul.selectable-deck-bottom-inline,
ul.selectable-deck-top-inline {
    padding: 0;
}
ul.selectable-deck-bottom-inline li.selectable-deck-item,
ul.selectable-deck-top-inline li.selectable-deck-item {
    display: inline;
}
ul.selectable-deck-bottom-inline li.selectable-deck-item .selectable-deck-remove,
ul.selectable-deck-top-inline li.selectable-deck-item .selectable-deck-remove {
    margin-left: 0.4em;
    display: inline;
    float: none;
}
ul.ui-autocomplete li.ui-menu-item span.highlight {
    font-weight: bold;
}
input.ui-combo-input {
    margin-right: 0;
    line-height: 1.3;
}
a.ui-combo-button {
    margin-left: -1px;
}
a.ui-combo-button .ui-button-text {
    padding: 0;
}

Update combobox styles to position button correctly.

--HG--
branch : plugin-refactor


html {
  position: relative;
  min-height: 100%;
}
body {
  padding-top: 70px;
  margin-bottom: 60px;
}
.wrapper {
  min-height: 100%;
  height: auto !important;
  margin: 0 auto auto auto;
  padding-bottom: 30px;
}
.footer, .push {
  height: 60px; /* .push must be the same height as .footer */
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #f5f5f5;
  border-top: 1px solid #d0d0d0;
}
footer p {
  margin: 20px 0;
}
textarea {
  font-family: Consolas, Lucida Console, monospace;
}
table.attr-table td:nth-child(1) {
  width: 25%;
}
.table-headings th {
  background-color: #f5f5f5;
}
ul.nav-tabs, ul.nav-pills {
  margin-bottom: 20px;
}
.panel .list-group {
  max-height: 500px;
  overflow: auto;
}

Fix history panel max height.

Fix history panel max height.


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

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

Make IE8 hide its nano scrollbar the same way other browsers do


em, strong, code
{
	/* Override font-style, otherwise the default font-style will be used.
		For example, em will use italic font-style.*/
	font-style: normal;
}

sub
{
	/*subscript presentation*/
	font-size: 24px;
	background-color: black;
	color: white;
	vertical-align: baseline;
}

p
{
	line-height: 130%
}

hr, div
{
	page-break-after: always;
}

h2
{
	text-align: center;
}

em, strong, code
{
	/* Override font-style, otherwise the default font-style will be used.
		For example, em will use italic font-style.*/
	font-style: normal;
}

sub
{
	/*subscript presentation*/
	font-size: 24px;
	background-color: black;
	color: white;
	vertical-align: bottom;
	position: relative;
	bottom: 0.3em; }
}

p
{
	line-height: 130%
}

hr, div
{
	page-break-after: always;
}

h2
{
	text-align: center;
}

Use bottom style to prevent subscription from affecting line height


/* app css stylesheet */

.menu {
  list-style: none;
  border-bottom: 0.1em solid black;
  margin-bottom: 2em;
  padding: 0 0 0.5em;
}

.menu:before {
  content: "[";
}

.menu:after {
  content: "]";
}

.menu > li {
  display: inline;
}

.menu > li:before {
  content: "|";
  padding-right: 0.3em;
}

.menu > li:nth-child(1):before {
  content: "";
  padding: 0;
}

.top {
  position : absolute;
  top : 0px;
  left:0px;
  right:0px;
}

/* app css stylesheet */

.menu {
  list-style: none;
  border-bottom: 0.1em solid black;
  margin-bottom: 2em;
  padding: 0 0 0.5em;
}

.menu:before {
  content: "[";
}

.menu:after {
  content: "]";
}

.menu > li {
  display: inline;
}

.menu > li:before {
  content: "|";
  padding-right: 0.3em;
}

.menu > li:nth-child(1):before {
  content: "";
  padding: 0;
}

.top {
  position : absolute;
  left:0px;
  right:0px;
  top:0px;
  animation-duration: 0.5s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    top : -60px;
  }

  to {
    top : 0px;
  }
}

Add animation for top-notification directive


.jumbotronBackground {
  background-color: #FF6666;
}

#banner h1 {
  text-align: center;
}

body {
  background-color: #FF9A66;
}

.col-md-2 {
  background-color: #993367;
  min-width: 240px;
  min-height: 500px;
}

.col-md-9 {
  padding-left: 80px;
}

.jumbotronBackground {
  background-color: #FF6666;
}

#banner h1 {
  text-align: center;
  color: #330000;
}

body {
  background-color: #FF9A66;
}

.col-md-2 {
  background-color: #993367;
  min-width: 240px;
  min-height: 500px;
}

#sidebar h4 {
  color: #FF99CD;
}

#sidebar h3 {
  color: #660034;
}

#sidebar p {
  color: #d3d3d3;
}

.col-md-9 {
  padding-left: 80px;
}

#main h2, h4, p, ol {
  color: #330000;
}

Add text colors to sidebar, banner, and main page


.creativecommons{
	font-size: 0.7em;
}

table {
  border-collapse: collapse;
  margin-bottom: 1.52em;
}

table, td, th {
  border: 1px solid #171717;
  padding: 8px;
  text-align: center;
}

td:nth-child(1) {
  text-align: initial;
}

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

.custom-ul{
	margin: 0 1em 1.4em 2em;
}

/* Hide element*/
.hide{
	visibility: hidden;
}

.header {
  background: #f8f8f8;
  width: 100%;
  top: 0;
  z-index: 1;
}

/* Scrolled and resized Header*/
.smaller{
  position: fixed;
  background: #f8f8f8;
  margin: inherit;
  margin-bottom: inherit;
}

/* Scrolled and resized header Title*/
.smaller > .content-wrap > h1{
	text-align: left;
	font-size: 1.5em;
}

/* Scrolled and resized header Author*/
.smaller > .content-wrap > p{
	text-align: left;
	margin-bottom: inherit;
}

#content{
  /*margin-top: 11em;*/
}

.smaller-content{
  /*margin-top: 10em!important;*/
}

.smaller > .content-wrap > div{
	visibility: inherit;
}

/* Share icon header */
.share-icon{
	margin-right: 1em;
}

Add scrolled header and social icons

Add scrolled header and social icons


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

.app {
  padding: 20px;
  min-height: 5000px;
}

.section {
  padding-top: 30px;
}

.subCollapse {
  padding: 20px;
}

.text {
  margin: 0;
}

.text p {
  margin: 0;
  padding: 10px;
}

.config {
  padding-bottom: 20px;
}

.label {
  padding-right: 20px;
}

.input {
  margin-right: 10px;
  margin-left: 10px;
  vertical-align: middle;
}

.blob {
  border-radius: 50vh;
  background: rgba(96, 125, 139, 0.6);
}

.log {
  padding: 0.5em;
  font-size: 0.6em;
  font-family: Menlo, Consolas, Monospaced, monospace;
}

.ReactCollapse--collapse {
  max-width: 800px;
  border: 1px solid rgba(3, 169, 244, 0.3);
  border-radius: 10px;
  background-color: rgba(100, 255, 100, 0.1);
}

.ReactCollapse--content {
}

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

.app {
  padding: 20px;
  min-height: 5000px;
}

.section {
  padding-top: 30px;
}

.subCollapse {
  padding: 20px;
}

.text {
  margin: 0;
}

.text p {
  margin: 0;
  padding: 10px;
}

.config {
  padding-bottom: 20px;
}

.label {
  padding-right: 20px;
}

.input {
  margin-right: 10px;
  margin-left: 10px;
  vertical-align: middle;
}

.blob {
  border-radius: 50vh;
  background: rgba(96, 125, 139, 0.6);
}

.log {
  padding: 0.5em;
  font-size: 0.6em;
  font-family: Menlo, Consolas, Monospaced, monospace;
}

.ReactCollapse--collapse {
  max-width: 800px;
  border: 1px solid rgba(3, 169, 244, 0.3);
  border-radius: 10px;
  background-color: rgba(100, 255, 100, 0.1);
  transition: height 500ms;
}

.ReactCollapse--content {
}

Add transition to collapse elements

Add transition to collapse elements


/* TODO: add print queries */

@media print {

	*::after,
	*::before,
	footer,
	a {
		display: none;
		width: 0;
		height: 0;
	}

	body {
		padding: 5%;
	}

	header {
		display: flex;
		flex-wrap: wrap;
	}

	.col-md-6 {
		width: 50%;
	}

	/* Bug fix:
	Browser: Chrome
	Issue: Chrome used to render only first page,
	not the entire content
	in the print preview.

	Though it would render rest of the content on small screen size,
	probably because of some bootstrap grid restrictions for different column sizes*/
	.col-md-4 {
		width: 100%;
	}

}

/* TODO: add print queries */

@media print {

	*::after,
	*::before,
	footer,
	a {
		display: none;
		width: 0;
		height: 0;
	}

	body {
		padding: 5%;
	}

	header {
		display: flex;
		flex-wrap: wrap;
	}

	.col-md-6 {
		width: 50%;
	}

	img,
	.col-md-4 {
	    page-break-inside: avoid;
	}

	/* Bug fix:
	Browser: Chrome
	Issue: Chrome used to render only first page,
	not the entire content
	in the print preview.

	Though it would render rest of the content on small screen size,
	probably because of some bootstrap grid restrictions for different column sizes*/
	.col-md-4 {
		width: 100%;
	}

}

Fix page break inside image columns in Firefox


.CodeMirror {
    min-height: 10em;
    max-height: calc(100vh - 4em);
    height: auto;
    border: solid rgb(204, 204, 204) 1px;
}

.CodeMirror .cm-toolbar {
    border: solid rgb(204, 204, 204) 1px;
    background-color: rgb(204, 204, 204);
}

.CodeMirror {
    min-height: 10em;
    height: auto;
    border: solid rgb(204, 204, 204) 1px;
}

.CodeMirror .cm-toolbar {
    border: solid rgb(204, 204, 204) 1px;
    background-color: rgb(204, 204, 204);
}

Remove max-height from codemirror panels


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

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

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

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

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

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

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

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

:root {
  --jp-private-completer-code-font-size: 14px;
  --jp-private-completer-item-height: 24px;
}

.jp-Completer {
  background: white;
  border: var(--jp-border-width) solid var(--jp-border-color1);
  list-style-type: none;
  overflow: auto;
  padding: 0;
  margin: 4px 0 0 -4px;
  max-height: calc((10 * var(--jp-private-completer-item-height)) + (2 * var(--jp-border-width)));
  min-height: calc(var(--jp-private-completer-item-height) + (2 * var(--jp-border-width)));
  position: absolute;
  z-index: 10001;
}

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

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

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

.jp-Completer-item code {
  font-size: var(--jp-private-completer-code-font-size);
  height: var(--jp-private-completer-item-height);
  padding: 0;
  margin: 0;
}

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

Switch to using more CSS variables in completer.


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

.root {
  -webkit-font-smoothing: inherit;
  appearance: none;
  margin: 0;
  padding: var(--extra-small-padding);
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: var(--border-radius-large);
  display: flex;
  align-items: center;
  color: var(--text-muted);
  outline: none;

  @media (hover: hover) {
    @nest &:hover {
      color: var(--state-danger-color);
    }
  }

  @nest &:focus-visible {
    box-shadow: inset 0 0 0 2px var(--component-bg), inset 0 0 0 4px var(--focus-color);
  }
}

.iconContainer {
  display: block;

  @nest & > svg {
    display: block;
    font-size: 19px;
  }
}

.text {
  display: block;
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  margin: -2px 0 -1px;
  padding-right: 3px;

  @nest .iconContainer + & {
    margin-left: var(--extra-small-padding);
  }

  @media (hover: hover) {
    opacity: 0;
    transition: opacity 100ms;

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

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

.root {
  -webkit-font-smoothing: inherit;
  appearance: none;
  margin: 0;
  padding: var(--extra-small-padding);
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: var(--border-radius-large);
  display: flex;
  align-items: center;
  color: var(--text-muted);
  outline: none;

  @media (hover: hover) {
    @nest &:hover {
      color: var(--state-danger-color);
    }
  }

  @nest &:focus-visible {
    box-shadow: inset 0 0 0 2px var(--component-bg), inset 0 0 0 4px var(--focus-color);
  }
}

.iconContainer {
  display: block;

  @nest & > svg {
    display: block;
    font-size: 19px;
  }
}

.text {
  display: block;
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  margin: -2px 0 -1px;
  padding-right: 3px;

  @nest .iconContainer + & {
    margin-left: var(--extra-small-padding);
  }

  @media (hover: hover) {
    display: none;

    @nest .root:hover & {
      display: block;
    }
  }
}

[field] Hide revert changes button's text before hover


body {
  background-color: #336;
  text-align: center;
}
canvas {
  background-color: #000;
  border: 4px solid #FF4;
  border-radius: 12px;
  margin: 3em;
}

#debug {
  background-color: #000;
  color: #FFF;
  display: none;
  font-family: monospace;
  height: 180px;
  left: 0px;
  padding: 1em;
  position: absolute;
  text-align: left;
  top: 0px;
  width: 180px;
}

body {
  background-color: #336;
  position: relative;
  text-align: center;
}
canvas#board {
  background-color: #000;
  border: 4px solid #FF4;
  border-radius: 12px;
  margin: 3em;
}

#actors {
  position: absolute;
  z-index: 2;
}
#board {
  z-index: 0;
}
#pellets {
  position: absolute;
  z-index: 1;
}

#debug {
  background-color: #000;
  color: #FFF;
  display: none;
  font-family: monospace;
  height: 180px;
  left: 0px;
  padding: 1em;
  position: absolute;
  text-align: left;
  top: 0px;
  width: 180px;
}

Add styling for new boards to establish zindex


.u8y-agpl-footer > hr { margin-bottom:0;margin-top:0;width:33% }
.u8y-agpl-footer > a { font-size:xx-small;color:#ccc }

tr.u8y-not-published { background-color:#ffc }
tr.u8y-not-published:hover { background-color:#fefe97 }

.u8y-not-published-element { color:#ddd }
.u8y-not-published-element a { color:#ddd }

.u8y-agpl-footer > hr { margin-bottom:0;margin-top:0;width:33% }
.u8y-agpl-footer > a { font-size:xx-small;color:#ccc }

tr.u8y-not-published { background-color:#ffc }
tr.u8y-not-published:hover { background-color:#fefe97!important }

.u8y-not-published-element { color:#ddd }
.u8y-not-published-element a { color:#ddd }

Fix bg color not applied to table rows on hover for not published items


form {
  background: pink
}

fieldset {
  background: #222
}
fieldset legend {
  width: 100%;
  display: block;
  font-size: 1.8em;
  line-height: 2em;
  background: green;
  margin-bottom: 1.612em;
}

form {
  background: pink
}

fieldset {
  background: #222
}
fieldset legend {
  width: 100%;
  display: block;
  font-size: 1.8em;
  line-height: 2em;
  margin-bottom: .612em;
  background: rgba(0,0,0,0.5);
}

Fix margins and padding for legend

Fix margins and padding for legend


html, body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.board {
  width: 600px;
  height: 600px;
}

.board div {
  width: 100px;
  height: 100px;
  border: 1px #ccc dotted;
  margin: 5px;
  border-radius: 10%;
  background-color: #eee;
  display: inline-block;
}

.board div:hover {
  background-color: #ccc;
}

div.mine, div.mine:hover {
  background: no-repeat center/60% url("bomb.svg") crimson;
}

div.mine.hidden {
  background: #eee;
}

div.mine.hidden:hover {
  background: #ccc;
}

div.mark, div.mark:hover {
  background: no-repeat center/60% url("mark.svg") deepskyblue;
}

div.clear, div.clear:hover {
  background-color: white;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.board {
  width: 440px;
  height: 440px;
}

.board div {
  width: 75px;
  height: 75px;
  border: 1px #ccc dotted;
  margin: 2px;
  border-radius: 10%;
  background-color: white;
  display: inline-block;
}

.board div:hover {
  background-color: white;
}

div.mine, div.mine:hover {
  background: no-repeat center/60% url("bomb.svg") crimson;
}

div.hidden {
  background: #eee;
}

div.hidden:hover {
  background: #ccc;
}

div.marked, div.marked:hover {
  background: no-repeat center/60% url("mark.svg") deepskyblue;
}

Add css changes from solution

Add css changes from solution


.layout__horizontal-layout {
    width: 100%;
    height: 100%;
}

.layout__horizontal-layout-list {
    height: 100%;
    display: flex;
    flex-flow: row nowrap;
    margin: 0 -10px;
}

.layout__horizontal-layout-list-item {
    flex: 1;
    margin: 0 10px;
}

.layout__horizontal-layout-title {
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #384650;
    margin-bottom: 6px;
}

.layout__horizontal-layout {
    width: 100%;
    height: 100%;
}

.layout__horizontal-layout-list {
    height: 100%;
    display: flex;
    flex-flow: row nowrap;
    margin: 0 -10px;
}

.layout__horizontal-layout-list-item {
    flex: 1 0 auto;
    margin: 0 10px;
}

.layout__horizontal-layout-title {
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #384650;
    margin-bottom: 6px;
}

Fix horizontal layout in IE

Fix horizontal layout in IE


#password {
	padding: 10px;
	margin:	6px;
}

input[type='submit'] {
	width: 45px;
	height: 45px;
	margin:	6px;
}

fieldset > p {
	position: relative;
	display: flex;
	align-items: center;
}

#password {
	margin-right: 0 !important;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

input[type='submit'] {
	width: 45px;
	height: 45px;
	margin-left: 0 !important;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

fieldset > p {
	position: relative;
	display: flex;
	align-items: center;
}

Move link share password box and button together

Signed-off-by: Jan-Christoph Borchardt <7f550a9f4c44173a37664d938f1355f0f92a47a7@jancborchardt.net>


# JukeBot Styles

.listeners span + span:before {
  content: ', ';
}

.ui.items > .item {
  margin: 0;
  padding: .5em;
}

.items > .item:hover {
  background-color: #F0F0F0;
}

Add background color to hovered video item


table.list td, table.list th {
  line-height: 40px;
  vertical-align: middle;
}
td.name, td.username, td.firstname, td.lastname, td.email {
  text-align: center !important;
}

table.list td, table.list th {
  height: 40px;
  vertical-align: middle;
}
td.name, td.username, td.firstname, td.lastname, td.email {
  text-align: center !important;
}

Fix line-height in task list on multi-line titles


/* For testing of delite/theme! plugin */
.deliteBootstrapLayer {
	color: red;
	border: 1px solid black;
	background-image: url("../images/plus.gif");	/* for testing path correction */
}

/* For testing of delite/theme! plugin */
.deliteBootstrapLayer {
	color: red;
	border: 1px solid black;
}

Remove background-image CSS from test. It's unused and the path is invalid.


.move-handle {
	cursor: move;
}

.box-placeholder {
	border: 2px dotted black;
	background: #efefef;
}

.sorting {
	padding: 10px;
	border: 1px dashed #444;
	min-height: 100px !important;
}

.sorting > * {
	margin: 0px 0px 10px 0px;
}

.sorting > *:first-child {
	margin-top: 0;
}

.sorting > *:last-child {
	margin-bottom: 0;
}

.blogfeed h1 {
	font-size: 100%;
	line-height: 20px;
}

.blogfeed p.lead {
	font-size: 100%;
}

.move-handle {
	cursor: move;
}

.box-placeholder {
	border: 1px dotted black;
	background: #efefef;
}

.sorting {
	padding: 10px;
	border: 1px dotted #444;
	min-height: 100px !important;
}

.sorting > * {
	margin: 0px 0px 10px 0px;
}

.sorting > *:first-child {
	margin-top: 0;
}

.sorting > *:last-child {
	margin-bottom: 0;
}

.blogfeed h1 {
	font-size: 100%;
	line-height: 20px;
}

.blogfeed p.lead {
	font-size: 100%;
}

Dashboards: Make the border of placeholders looks a bit 'softer'


body {
    direction: rtl;
}

.google-drive-auth-failed {
    display: none;
}

.hide-everything {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(100, 60, 60, 60);
    background: rgba(100, 60, 60, 60);
}

.center {
    position: static;

    left: 50%;
    width: 280px;
    margin-left: -140px;

    top: 50%;
    height: 180px;
    margin-top: -90px;

    background: white;
    border: solid black;
    border-width: 1px 1px 2px 2px;
}

body {
    direction: rtl;
}

.google-drive-auth-failed {
    display: none;
}

.hide-everything {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(100, 60, 60, 60);
    background: rgba(100, 60, 60, 60);
}

.center {
    position: fixed;

    left: 50%;
    width: 280px;
    margin-left: -140px;

    top: 50%;
    height: 180px;
    margin-top: -90px;

    background: white;
    border: solid black;
    border-width: 1px 1px 2px 2px;
}

Use fixed css positioning instead of the errant 'static'.


html {
    background-image: url("../media/images/backgroundnoise.png");
}

body {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

h1 {
    font-family: "League Gothic", Times, Sans;
    font-size: 72px
}

hr {
    width: 80%;
}

input, select {
    margin: 10px;
}

.text-input {
    height: 300px;
    width: 450px;
    font-family: "Times New Roman", Times, Sans;
    font-size: 16px;
}

.text-readout {
    height: 300px;
    width: 450px;
    margin: 10px;
    font-family: "Times New Roman", Times, Sans;
    font-size: 16px;
}

html {
    background-image: url("http://i.imgur.com/lI0XMg4.png");
}

body {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

h1 {
    font-family: "League Gothic", Times, Sans;
    font-size: 72px
}

hr {
    width: 80%;
}

input, select {
    margin: 10px;
}

.text-input {
    height: 300px;
    width: 450px;
    font-family: "Times New Roman", Times, Sans;
    font-size: 16px;
}

.text-readout {
    height: 300px;
    width: 450px;
    margin: 10px;
    font-family: "Times New Roman", Times, Sans;
    font-size: 16px;
}

Use an externally hosted image, unable to figure out heroku's issue with the image


:host {
  width: 100%;
}

.sr-input {
  border: medium none;
  border-radius: 4px 0 0 4px;
  box-shadow: none;
  color: #8a8a8a;
  height: 40px;
  padding: 0 10px;
  border-bottom: 1px solid #b5b2b2;
}

.sr-btn {
  background: none;
  border: medium none;
  border-radius: 0 4px 4px 0;
  color: black;
  height: 40px;
  padding: 0 20px;
  border-bottom: 1px solid #b5b2b2;
}

:host {
  width: 100%;
  padding-left: 10px;
}

.sr-input {
  border: medium none;
  border-radius: 4px 0 0 4px;
  box-shadow: none;
  color: #8a8a8a;
  height: 40px;
  padding: 0 10px;
  border-bottom: 1px solid #b5b2b2;
}

.sr-btn {
  background: none;
  border: medium none;
  border-radius: 0 4px 4px 0;
  color: black;
  height: 40px;
  padding: 0 20px;
  border-bottom: 1px solid #b5b2b2;
}

Fix Search box padding left

Fix Search box padding left