.brainy__quote--container {
    overflow: hidden;
    margin-left: -2.8em;
}

.brainy__quote {
    quotes: "“" "”";
    font-size: 1.5em;
    font-weight: 300;
}

.zci--brainy_quote .zci__body {
    margin-left: -2em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 2.8em;
}

.brainy__quote:before {
    color: #D4D4D4;
    content: open-quote;
    float: left;
    font-size: 4em;
    margin-top: -0.25em;
    margin-right: 0.1em;
}

.brainy__attribution {
    color: #999;
    float: left;
    margin-top: 5px;
}

.zci--brainy_quote .zci__content.chomp {
    max-height: none;
    margin-bottom: 0;
}

.zci--brainy_quote .zci__body.zci__body--info {
    padding-left: 0.25em;
}

.is-mobile .brainy__quote:before {
    display: none;
}

.is-mobile .brainy__quote--container {
    margin-left: 0px;
    margin-bottom: 0.5em;
}

.brainy__quote--container {
    overflow: hidden;
    margin-left: -2.8em;
}

.brainy__quote {
    quotes: "“" "”";
    font-size: 1.5em;
    font-weight: 300;
}

.zci--brainy_quote .zci__body {
    margin-left: -2em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 2.8em;
}

.brainy__quote:before {
    color: #D4D4D4;
    content: open-quote;
    float: left;
    font-size: 4em;
    margin-top: -0.25em;
    margin-right: 0.1em;
}

.brainy__attribution {
    color: #999;
    float: left;
    margin-top: 5px;
}

.zci--brainy_quote .zci__content.chomp {
    max-height: none;
    margin-bottom: 0;
}

.zci--brainy_quote .zci__body.zci__body--info {
    padding-left: 0.25em;
}

.is-mobile .brainy__quote--container {
    margin-left: 0px;
    margin-bottom: 0.5em;
}

Bring the open quote back

Bring the open quote back


.CodeMirror {
    border: 1px solid #eee;
    height: auto;
}

.hiddenDiv {
    visibility: hidden;
}

.table tbody>tr>td.mid-align{
    vertical-align: middle;
}

.outline {
    padding-left: 20px;
    list-style-type: none;
}

.outline img {
    height: 16px;
    width: 16px;
    margin-right: 8px;
}

Set size of outliner icons hard to 16x16 and added a margin


/* Google web search tweak */
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("https://www.google.com/search") {
  .mw #center_col { width: 46em !important; }
  .mw .s { max-width: 45em !important; line-height: 1.5 !important;  }

  .mw #rhs { margin-left: 62em !important; }
  .mw #nyc { margin-left: 55em !important; }

  .mw .mfr { font: x-small/1.4 sans-serif !important; }
}

/* Google web search tweak */
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("https://www.google.com/search") {
  .mw #center_col { width: 46em !important; }
  .mw .s { max-width: 45em !important; line-height: 1.5 !important;  }

  .mw #rhs { margin-left: 62em !important; }
  .mw #nyc { margin-left: 55em !important; }

  .mw .mfr { font: x-small/1.4 sans-serif !important; }

  .mw ._Tib   { font: bold large/2 sans-serif !important; }
  .mw ._Tib s { text-decoration: none !important; }
}

Emphasize ignored keyword by Google

Emphasize ignored keyword by Google


.sc-custom-metadata-field {
  display: flex;
  margin: var(--t-half-spacing) 0;
}

.sc-custom-metadata-field > .sc-string {
  flex: 1;
}

.sc-custom-metadata-field > .se-field-name {
  font-weight: var(--t-bold-font-weight);
}

/* Placeholder for empty custom fields set in metadata mode */
.sc-figure-metadata.sm-empty {
  color: var(--t-placeholder-text-color);
}

.sc-custom-metadata-field {
  display: flex;
  margin: var(--t-half-spacing) 0;
  font-size: var(--t-small-font-size);
}

.sc-custom-metadata-field > .sc-string {
  flex: 1;
}

.sc-custom-metadata-field > .se-field-name {
  font-weight: var(--t-bold-font-weight);
}

/* Placeholder for empty custom fields set in metadata mode */
.sc-figure-metadata.sm-empty {
  color: var(--t-placeholder-text-color);
}

Reduce font size of custom fields in manuscript.


body {
  padding-top: 60px;
}

.content-box {
  padding-top: 60px !important;
}

.internet-connection {
  margin-top: 20px;
  font-size: 180%;
}

.indoor-quality {
  margin-top: 20px;
  font-size: 180%;
}
.server-power {
  margin-top: 20px;
  font-size: 180%;
}
.genelec-power {
  font-size: 180%;
}

Fix font-size for speaker control button


body.settings,body.missions .submodule.skinny { padding: 0 ! important; border: 0; background-color: transparent ! important; }
body.settings,body.missions .submodule.skinny .body { padding: 0 ! important; background-color: transparent ! important; }
body.settings,body.missions .submodule.skinny ul li { font-size: 11pt; }
body.settings,body.missions #main .submodule .body { background-color: #fff; padding: 3% 5%; }
.default {
    background: #292929;
    border: 1px solid #111;
    border-radius: 5px;
    overflow: hidden;
    width: 20%;
    box-shadow: 0 0 5px #333;
}
.default div {
    background-color: #FF6D3D;
    width: 0%
}

#notification {
	display: none;
}

.clearbutton {
	float: right;
	display: inline;
}

body.settings,body.missions .submodule.skinny { padding: 0 ! important; border: 0; background-color: transparent ! important; }
body.settings,body.missions .submodule.skinny .body { padding: 0 ! important; background-color: transparent ! important; }
body.settings,body.missions .submodule.skinny ul li { font-size: 11pt; }
body.settings,body.missions #main .submodule .body { background-color: #fff; padding: 3% 5%; }
.default {
    background: #292929;
    border: 1px solid #111;
    border-radius: 5px;
    overflow: hidden;
    width: 20%;
    box-shadow: 0 0 5px #333;
}
.default div {
    background-color: #FF6D3D;
    width: 0%
}

div.message {
    background-color: #000;
    width: 100%;
}

#notification {
	display: none;
}

.clearbutton {
	float: right;
	display: inline;
}

Fix jGrowl message wrapping inappropriately

The jGrowl popup which is created when clicking “What’s this?” next to
“bitesize” created a popup which was wrapping the message text after
every word. This was happening because the div message class was
inheriting “width: 0%” from .default div in settings.css.

This change fixes that by giving divs their own message class with
“width: 100%”.

The popup was also inheriting “background-color: #FF6D3D;” from the
.default div class, but you couldn’t see it (presumably) because width
was 0%.

This commit also fixes that and sets the background to the expected
#000 (black) color.


#slideshow #CaptainFalcon {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;

  height: 200px;
  padding: 0 5px;

  color: rgba(255,255,255, 0.8);
}

#CaptainFalcon img {
  max-width: 160px;
  flex-shrink: 0;
  -webkit-flex-shrink: 0;
}

#CaptainFalcon .slide-text {
  margin: 0; padding: 20px;
  max-width: 500px;
  text-align: center;
}

@media screen and (max-width: 410px) {
  #CaptainFalcon img {
    display: none;
  }
}

#slideshow #CaptainFalcon {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;

  height: 200px;
  padding: 0 5px;

  color: rgba(255,255,255, 0.8);
}

#CaptainFalcon img {
  max-width: 160px;
  flex-shrink: 0;
  -webkit-flex-shrink: 0;
}

#CaptainFalcon .slide-text {
  margin: 0; padding: 20px;
  max-width: 500px;
  text-align: center;
}

@media screen and (max-width: 500px) {
  #CaptainFalcon img {
    display: none;
  }
}

Update breakpoint for new goal

Update breakpoint for new goal


.exampleOutput {
  display: flex;
  border: 1px solid rgb(224, 224, 224);
  padding: 3rem;
}

.example-grid-content {
  background: rgb(224, 224, 224);
  display: flex;
}

.exampleOutput .btn + .btn {
  margin-left: 1rem;
}

.exampleOutput {
  display: flex;
  border: 1px solid rgb(224, 224, 224);
  padding: 3rem;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.codeBlock pre {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.example-grid-content {
  background: rgb(224, 224, 224);
  display: flex;
}

.exampleOutput .btn + .btn {
  margin-left: 1rem;
}

Add slight border-radius to code examples


#view{
	padding-bottom: 20px;
}
td{
	border: thin groove transparent;
	border-collapse: collapse;
//	border-collapse: separate;
//	border-radius: 4px 4px 4px 4px;
}
.glyphicon{
	font-size: 20px;
	color: #888888;
	margin-left:20px;
	margin-right: 20px;
}
.painting-image{
	width: 100%;
}
.painting-table{
	width: 90%;
}
.painting-description{
	margin-top: 15px;
}

#view{
	padding-bottom: 20px;
}
td{
	border: thin solid transparent;
	border-collapse: collapse;
//	border-collapse: separate;
//	border-radius: 4px 4px 4px 4px;
}
.glyphicon{
	font-size: 20px;
	color: #888888;
	margin-left:20px;
	margin-right: 20px;
}
.painting-image{
	width: 100%;
}
.painting-table{
	width: 90%;
}
.painting-description{
	margin-top: 15px;
}

Fix bug with border color in Chrome

Fix bug with border color in Chrome


html {
  font-family: arial;

}

body {
    background-color: lightyellow;
}

h1 {
  color: red;
  text-align: center;
  margin-right: -150px;
}

h2 {
    color: blue;
}

h3 {
    text-align: center;
    margin-right: -150px;
    color: orange;
    margin-top: -15px;
}

h4 {
    color: purple;
}

#menu {
  float: left;
  position: fixed;
  font-size: 11pt;
  margin-top: -130px;
  background-color: #d3d3d3;
  border: 2px dashed black
}

main {
    margin-left: 350px;
    background-color: lightblue;
}

span {
    padding-left: 5px
}

html {
  font-family: arial;

}

body {
    background-color: lightyellow;
}

h1 {
  color: red;
  text-align: center;
  margin-right: -150px;
}

h2 {
    color: blue;
    font-size: 12pt;
}

h3 {
    text-align: center;
    margin-right: -150px;
    color: orange;
    margin-top: -15px;
}

h4 {
    color: purple;
}

#menu {
  float: left;
  position: fixed;
  font-size: 11pt;
  margin-top: -120px;
  background-color: #d3d3d3;
  border: 2px dashed black
}

main {
    margin-left: 350px;
    position: absolute;
    background-color: lightblue;
}

span {
    padding-left: 5px
}

Change font size of menu

Change font size of menu


body {
    display: "abcd"
}
h1 {position: "d"}
h2 {position: "c"}
h3 {position: "b"}
h4 {position: "a"}

#parent {
    display:
        "ab" /250px
        "cd" /150px
        250px 150px;}
#child1 {position: d}
#child2 {position: c}
#child3 {position: b}
#child4 {position: a}

Add height and width values

Add height and width values


/* Moon theme CSS at the following location:
 * https://github.com/gitpitch/gitpitch/blob/master/public/libs/reveal.js/3.4.1/css/theme/moon.css
 */
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  text-transform: none;
}

.reveal h1 > strong {
  color: #EA3046;
}

.reveal h2 > strong {
  color: #EA3046;
}

.reveal section img {
  border: 0;
  box-shadow: none;
}

/* Moon theme CSS at the following location:
 * https://github.com/gitpitch/gitpitch/blob/master/public/libs/reveal.js/3.4.1/css/theme/moon.css
 */

/* Don't automatically upcase headings since I don't want that
 * to happen for headings which are blocks of code.
 */
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  text-transform: none;
}

/* Colour strong words the same as the Poster Deckset theme.  */
.reveal h1 > strong {
  color: #EA3046;
}
.reveal h2 > strong {
  color: #EA3046;
}

/* Don't put borders around images. This was needed due to the Prawn
 * emoji not displaying properly in full screen mode, so it had to
 * be replaced with an image of itself to display properly.
 */
.reveal section img {
  border: 0;
  box-shadow: none;
}

Add CSS notes to explain why some customisation on the theme was needed.


@import url(http://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic);

pre, tt {
    font-family:  monospace, sans-serif;
}

tt {
    font-size: 100%;
}

div.body h1, div.body h2, div.body h3, div.body h4, div.body h5, div.body h6 {
    border: 0;
    margin: 0;
    padding: 0.3em 0;
}

@import url(//fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic);

pre, tt {
    font-family:  monospace, sans-serif;
}

tt {
    font-size: 100%;
}

div.body h1, div.body h2, div.body h3, div.body h4, div.body h5, div.body h6 {
    border: 0;
    margin: 0;
    padding: 0.3em 0;
}

Use network-path reference when importing font


/* Code highlighting customizations */
.md-logo img {
    width: 64px;
    height: 64px;
    margin-top: -20px;
}
.codehilite .kn,
.codehilite .kd {
    color: #069;
}
.codehilite .nx {
    color: black;
}
.codehilite .s,
.codehilite .s1 {
    color: #c00;
}
.md-sidebar .md-nav__title,
.md-sidebar .md-nav__source,
.md-header {
    background: white!important;
    color: #546e7a!important;
}

/* Code highlighting customizations */
.md-logo {
    padding: 0!important;
}
.md-logo img {
    width: 64px!important;
    height: 64px!important;
}
.codehilite .kn,
.codehilite .kd {
    color: #069;
}
.codehilite .nx {
    color: black;
}
.codehilite .s,
.codehilite .s1 {
    color: #c00;
}
.md-sidebar .md-nav__title,
.md-sidebar .md-nav__source,
.md-header {
    background: white!important;
    color: #546e7a!important;
}

Fix logo size in docs

Fix logo size in docs


.ProseMirror {
  position: relative;
}

.ProseMirror {
  word-wrap: break-word;
  white-space: pre-wrap;
  -webkit-font-variant-ligatures: none;
  font-variant-ligatures: none;
}

.ProseMirror pre {
  white-space: pre-wrap;
}

.ProseMirror li {
  position: relative;
}

.ProseMirror-hideselection *::selection { background: transparent; }
.ProseMirror-hideselection *::-moz-selection { background: transparent; }
.ProseMirror-hideselection { caret-color: transparent; }

.ProseMirror-selectednode {
  outline: 2px solid #8cf;
}

/* Make sure li selections wrap around markers */

li.ProseMirror-selectednode {
  outline: none;
}

li.ProseMirror-selectednode:after {
  content: "";
  position: absolute;
  left: -32px;
  right: -2px; top: -2px; bottom: -2px;
  border: 2px solid #8cf;
  pointer-events: none;
}

.ProseMirror {
  position: relative;
}

.ProseMirror {
  word-wrap: break-word;
  white-space: pre-wrap;
  -webkit-font-variant-ligatures: none;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
}

.ProseMirror pre {
  white-space: pre-wrap;
}

.ProseMirror li {
  position: relative;
}

.ProseMirror-hideselection *::selection { background: transparent; }
.ProseMirror-hideselection *::-moz-selection { background: transparent; }
.ProseMirror-hideselection { caret-color: transparent; }

.ProseMirror-selectednode {
  outline: 2px solid #8cf;
}

/* Make sure li selections wrap around markers */

li.ProseMirror-selectednode {
  outline: none;
}

li.ProseMirror-selectednode:after {
  content: "";
  position: absolute;
  left: -32px;
  right: -2px; top: -2px; bottom: -2px;
  border: 2px solid #8cf;
  pointer-events: none;
}

Add another way to disable ligatures in Edge

FIX: The default prosemirror.css now also turns off ligatures in Edge.


.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.App-intro {
  font-size: large;
}

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

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px white inset;
}

Fix input highlighting issue for chrome.


body {
  font-family: "Trebuchet MS", sans-serif;
}

/** Style the tweets */
.twitters {
  border: 1px solid #e5e5e5;
  padding: 5px;
  overflow: auto;
  margin: 20px;
}

.twitters ul {
  list-style: none;
  padding: 0;
  white-space: nowrap;
}

.twitters span.prefix {
  font-weight: bold;
}

.twitters span.time {
  font-style: italic;
  color: #c5c5c5;
}

.twitters span.status {
  font-style: italic;
}

body {
  font-family: "Trebuchet MS", sans-serif;
}

/** Style the tweets */
.twitters {
  border: 1px solid #e5e5e5;
  padding: 5px;
  overflow: auto;
  margin: 20px;
}

.twitters ul {
  list-style: none;
  padding: 0;
  white-space: nowrap;
}

.twitters span.twitterPrefix {
  font-weight: bold;
}

.twitters span.twitterTime {
  font-style: italic;
  color: #c5c5c5;
}

.twitters span.twitterStatus {
  font-style: italic;
}

Fix CSS problems found upstream.

Fix CSS problems found upstream.

The upstream code did not use consistent class attributes between the HTML file and the CSS file.  This commit fixes the CSS file to match the HTML file.


.flash { height: 1.7em; }
.flash-enter { height: 0; }
.flash-enter.flash-enter-active { height: 1.7em; }
.flash-leave { height: 1.7em; }
.flash-leave.flash-leave-active { height: 0; }

.bottom-bar { top: 0; }
.bottom-bar-enter { top: 100px; }
.bottom-bar-enter.bottom-bar-enter-active { top: 0; }
.bottom-bar-leave { top: 0; }
.bottom-bar-leave.bottom-bar-leave-active { top: 100px; }

.flash { height: 1.7em; }
.flash-enter { height: 0; }
.flash-enter-active { height: 1.7em; }
.flash-leave { height: 1.7em; }
.flash-leave-active { height: 0; }

/*.bottom-bar { top: 0; }*/
.bottom-bar-enter { top: 100px; }
.bottom-bar-enter-active { top: 0; }
.bottom-bar-leave { top: 0; }
.bottom-bar-leave-active { top: 100px; }

Fix weird css transition bug

Fix weird css transition bug


/**
 * Repo route
 */

th[data-title] {
  text-align: center;
}

.griddle-column-number {
  width: 4em;
  text-align: left;
}

.griddle-column-voteCount {
  width: 5em;
  text-align: right;
}

/**
 * Issue route
 */

.ghir-issue-votes .ghir-issue-vote {
  padding: 2px;
}

.ghir-issue-vote-avatar {
  width: 32px;
  height: 32px;
  background: #ccc;
}

/**
 * Repo route
 */

th[data-title] {
  text-align: center;
}

.griddle-column-number {
  width: 4em;
  text-align: left;
}

.griddle-column-voteCount {
  width: 6em;
  text-align: right;
}

/**
 * Issue route
 */

.ghir-issue-votes .ghir-issue-vote {
  padding: 2px;
}

.ghir-issue-vote-avatar {
  width: 32px;
  height: 32px;
  background: #ccc;
}

Increase width of votes column for sorting.


.event form {
  display: inline-block;
}

.event input[type=submit] {
  position: absolute;
  left: -1000px;
  top: -1000px;
}

.event a:link, a:visited {
  color: black;
  text-decoration: none;
}

.event a:hover, a:active {
  color: white;
  background: black;
  text-decoration: none;
}

.event tbody tr:hover {
  background: #eee;
}

.event form {
  display: inline-block;
}

.event input[type=submit] {
  position: absolute;
  left: -1000px;
  top: -1000px;
}

.event a:link, .event a:visited {
  color: black;
  text-decoration: none;
}

.event a:hover, .event a:active {
  color: white;
  background: black;
  text-decoration: none;
}

.event tbody tr:hover {
  background: #eee;
}

Fix selector group error in css for links


.legend {
  width: 10em;
  border: 1px solid black;
}

.legend .title {
    margin-left: 0.5em;
    border-style: solid;
    border-width: 0 0 0 0.3em;
    padding: 0 0.3em;
}

.legend {
  width: 10em;
  border: 1px solid black;
}

.legend .title {
    display: block;
    margin: 0.5em;
    border-style: solid;
    border-width: 0 0 0 1em;
    padding: 0 0.3em;
}

Tweak CSS so it's closer to the original layout

In practice people can style it however they want of course.


body {
    margin: 0;
}
.title-box {
    text-align: center;
}
.gallery {
    width: 100%;
    padding: 0 5%;
    box-sizing: border-box;
}
.item {
    width: 30%;
    margin: 0 1.5% 3%;
    display: inline-block;
    position: relative;
    padding: 30% 0 0;
    height: 0;
    overflow: hidden;
    background-color: grey;
}
.item img {
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: 0;
    top: 0;
}
.gallery .item .info {
    display: none;
}
.item .chip-box {
    position: absolute;
    width: 100%;
    bottom: 0;
    line-height: 25px;
    padding: 0 5px;
    box-sizing: border-box;
}
.item .chip-box a {
    color: white;
    text-decoration: none;
    text-shadow: 1px 0px 0px black,
                -1px 0px 0px black,
                 0px 1px 0px black,
                 0px -1px 0px black;
}

@media (min-width: 3000px){
    .instagram-grid{
        margin: 0 auto;
    }
}

body {
    margin: 0;
}
.title-box {
    text-align: center;
}
.gallery {
    width: 100%;
    padding: 0 5%;
    box-sizing: border-box;
    font-size: 0;
}
.item {
    width: 30%;
    margin: 0 1.5% 3%;
    display: inline-block;
    position: relative;
    padding: 30% 0 0;
    height: 0;
    overflow: hidden;
    background-color: grey;
}
.item img {
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: 0;
    top: 0;
}
.gallery .item .info {
    display: none;
}
.item .chip-box {
    position: absolute;
    width: 100%;
    bottom: 0;
    line-height: 25px;
    padding: 0 5px;
    box-sizing: border-box;
}
.item .chip-box a {
    color: white;
    text-decoration: none;
    text-shadow: 1px 0px 0px black,
                -1px 0px 0px black,
                 0px 1px 0px black,
                 0px -1px 0px black;
}

@media (min-width: 3000px){
    .instagram-grid{
        margin: 0 auto;
    }
}

Improve responsive and Change alert messages


body {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    padding: 1em;
    color: #333333;
}

h1, h2, h3 {
    font-family: Helvetica;
}

a {
    text-decoration: none;
}

progress {
    color: rgb(39, 107, 174);
    background-color: #f3f3f3;
    height: 0.75em;
    border-radius: 2px;
    width: 8em;
}
progress::-moz-progress-bar {
    color: rgb(39, 107, 174);
    background-color: #f3f3f3;
    height: 0.75em;
    border-radius: 2px;
    width: 8em;
}
progress::-webkit-progress-value {
    background-color: rgb(39, 107, 174);
    border-radius: 2px;
}
progress::-webkit-progress-bar {
    background-color: #f3f3f3;
    height: 0.75em;
    border-radius: 2px;
    width: 8em;
}

ul {
    padding-left: 1em;
}

li .unassigned {
    color: rgb(175, 25, 0);
}

div.issue-type {
    display: inline;
    font-family: "Courier New", Courier, monospace;
    margin-right: 0.25em;
}

body {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    padding: 1em;
    color: #333333;
}

h1, h2, h3 {
    font-family: Helvetica;
}

a {
    text-decoration: none;
}

progress {
    color: rgb(39, 107, 174);
    background-color: #f3f3f3;
    height: 0.75em;
    border-radius: 2px;
    width: 8em;
}
progress::-moz-progress-bar {
    /* moz doesn't let us style the background of the bar */
    background-color: rgb(39, 107, 174);
}
progress::-webkit-progress-value {
    background-color: rgb(39, 107, 174);
    border-radius: 2px;
}
progress::-webkit-progress-bar {
    background-color: #f3f3f3;
    height: 0.75em;
    border-radius: 2px;
    width: 8em;
}

ul {
    padding-left: 1em;
}

li .unassigned {
    color: rgb(175, 25, 0);
}

div.issue-type {
    display: inline;
    font-family: "Courier New", Courier, monospace;
    margin-right: 0.25em;
}

Fix progress bar viewing on Firefox

Fix progress bar viewing on Firefox


/* Required CSS */

.scrollElement.rootWrap {

}

.scrollElement.contentWrap {
	position: relative;
}

.scrollElement.dragCon {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 20px;
}

.scrollElement.drag {
	position: absolute;
	top: 0px;
	right: 5px;
	width: 10px;
	background: #000;
}

/* Getting ready for horizontal support */

.scrollElement.yDragCon {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 20px;
}

.scrollElement.yDrag {
	position: absolute;
	top: 0;
	right: 5px;
	width: 10px;
	background: #000;
}

.scrollElement.xDragCon {
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	height: 10px;
}

.scrollElement.xDrag {
	position: absolute;
	left: 0;
	top: 5px;
	height: 10px;
	background: #000;
}

Make CSS ready for horizontal support

Make CSS ready for horizontal support


body {
  font-family: sans-serif;
  font-weight: 100;
  margin: 20px;
}
img {
  max-width: 600px;
  align: middle;
}

body {
  font-family: sans-serif;
  font-weight: 100;
  margin: 20px;
}
img {
  width: 300px;
  text-align: center;
}

Adjust photo size and center

Adjust photo size and center


/* major page sections */
body {
  font-family: "Roboto", sans-serif;
}

.main-column {
  max-width: 800px;
  margin: 0 auto;
}

footer {
  text-align: center;
  font-size: 12px;
  margin-bottom: 15px;
}

/* page content */
.email {
  display: none;
}

/* projects page */
a.well {
  color: #999;
  text-decoration: none;
  padding: 19px;
  display: block;
}

.well:hover {
  background-color: #283033;
}

.well .project-title {
  color: #33b5e5;
  font-size: 31.5px;
  line-height: 31.5px;
}

.sidebar a {
  background-color: #131517;
}

@media (min-width: 768px) {
  .sidebar {
    position: fixed;
    width: 115px;
  }
}

/* major page sections */
body {
  font-family: "Roboto", sans-serif;
}

.main-column {
  max-width: 800px;
  margin: 0 auto;
}

footer {
  text-align: center;
  font-size: 12px;
  margin-bottom: 15px;
}

/* page content */
.email {
  display: none;
}

/* projects page */
.sidebar a {
  background-color: #131517;
}

@media (min-width: 768px) {
  .sidebar {
    position: fixed;
    width: 115px;
  }
}

Remove old CSS for the projects page

Remove old CSS for the projects page


#dualView {
   position: relative;
   width: 100%;
}
#dualViewLeft {
   display: inline-block;
   width: 49%;
   padding-right: 4px;
}
#dualViewRight {
   display: inline-block;
   width: 49%;
   height: 100%;
   position: absolute;
   top: 0px;
   left: 50%;
   border-left: 1px solid black;
   padding-left: 4px;
   padding-top: 40px;
}
#dualViewLeftContent, #dualViewRightContent {
   margin-left: auto;
   margin-right: auto;
   width: 772px;
}

#dualView {
   position: relative;
   width: 100%;
}
#dualViewLeft {
   display: inline-block;
   vertical-align: top;
   width: 49%;
   padding-right: 4px;
}
#dualViewRight {
   display: inline-block;
   vertical-align: top;
   width: 49%;
   height: 100%;
   border-left: 1px solid black;
   padding-left: 4px;
   padding-top: 40px;
}
#dualViewLeftContent, #dualViewRightContent {
   margin-left: auto;
   margin-right: auto;
   width: 772px;
}
.blocklyWidgetDiv {
   position: fixed !important;
}

Fix task display issues with dualView

Fix task display issues with dualView


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

#game {
  background-color: #99ccff;
  margin: 0;
  width: 100%;
  height: 100%;
}

.upper-pipe {
  position: fixed;
  top: 0px;
}

.lower-pipe {
  position: fixed;
  bottom: 0px;
}

#clouds {
  width: 100%;
  height: 104px;
  position: fixed;
  top: 10px;
  background-image: url("/assets/clouds.png");
}

#fields {
  width: 100%;
  height: 208px;
  position: fixed;
  bottom: 0px;
  background-image: url("/assets/fields.png");
}

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

#game {
  background-color: #99ccff;
  margin: 0;
  width: 100%;
  height: 100%;
}

.upper-pipe {
  position: fixed;
  top: 0px;
}

.lower-pipe {
  position: fixed;
  bottom: 0px;
}

#clouds {
  width: 100%;
  height: 104px;
  position: fixed;
  top: 10px;
  background-image: url("../assets/clouds.png");
}

#fields {
  width: 100%;
  height: 208px;
  position: fixed;
  bottom: 0px;
  background-image: url("../assets/fields.png");
}

Fix image path issue on gh-pages branch

Fix image path issue on gh-pages branch


@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);

body {
	font-family: "Open Sans";
	font-size: 16px;
	margin: 0; padding: 0;
	background: -moz-linear-gradient(center top, #c9dbe9, #f8ffff 350px);
	background-color: #f8ffff;
	background-repeat: no-repeat;
}

#header h1 {
	margin: 0; padding: 0;
	display: block;

	position: absolute; z-index: 6;

	top: 30px; left: 15%;

	color: white;
	font-weight: 300; font-size: 60px;
	text-shadow: 0 0 25px rgba(0,0,0, 0.65);
}

#header h1 #first {
	color: black;
	font-weight: 400; font-style: italic;
	text-shadow: none;
}

#content {
	width: 900px; height: 400px;
	margin: auto;
}

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);

body {
	font-family: "Open Sans";
	font-size: 14px;
	margin: 0; padding: 0;
	background: -moz-linear-gradient(center top, #c9dbe9, #f8ffff 350px);
	background-color: #f8ffff;
	background-repeat: no-repeat;
}

#header h1 {
	margin: 0; padding: 0;
	display: block;

	position: absolute; z-index: 6;

	top: 30px; left: 15%;

	color: white;
	font-weight: 300; font-size: 60px;
	text-shadow: 0 0 25px rgba(0,0,0, 0.65);
}

#header h1 #first {
	color: black;
	font-weight: 400; font-style: italic;
	text-shadow: none;
}

#content {
	width: 900px; height: 400px;
	margin: auto;
}

Reduce font size to 14px

Reduce font size to 14px


footer {
  padding: 20px 0;
}

.navbar-header .navbar-brand .logo {
    height: 40px;
    width: 200px;
    background-image: url('../img/logo-white.png');
    background-size: auto 40px;
    background-repeat: no-repeat;
    display: block;

    -webkit-transition: all 0.35s;
    -moz-transition: all 0.35s;
    transition: all 0.35s;
}

.affix .navbar-header .navbar-brand .logo {
    background-image: url('../img/logo.png');
}

.navbar-header .navbar-brand {
    margin-top: -10px;
    margin-bottom: -10px;
}

footer {
  padding: 20px 0;
}

.navbar-header .navbar-brand .logo {
    height: 40px;
    width: 200px;
    background-image: url('../img/logo.png');
    background-size: auto 40px;
    background-repeat: no-repeat;
    display: block;

    -webkit-transition: all 0.35s;
    -moz-transition: all 0.35s;
    transition: all 0.35s;
}

@media (min-width: 768px) {
    .affix-top .navbar-header .navbar-brand .logo {
        background-image: url('../img/logo-white.png');
    }
}

.navbar-header .navbar-brand {
    margin-top: -10px;
    margin-bottom: -10px;
}

Fix the color of the logo on mobile devices


.header {
  background-color: #000000;
  width: 200px;
  height: 100px;
  position: center;
  margin: 60px;
}

h1 {
  color: #50575e;
  font-family: Courier;
  font-size: 50px;
}

h2 {
  color: #50575e;
  font-family: Verdana;
  font-size: 35px;
}

li {
  color: #000000;
  font-size: 18px;
  font-family: Tahoma;
}

body {
  background: url('https://unsplash.com/photos/eBDdgbM5dSo'), center, fixed;
}

h1 {
  color: #50575e;
  font-family: Courier;
  font-size: 50px;
}

h2 {
  color: #50575e;
  font-family: Verdana;
  font-size: 30px;
}

a {
  color: #000000;
  font-size: 18px;
  font-family: Tahoma;
}

body {
  background: url('https://unsplash.com/photos/eBDdgbM5dSo'), center, fixed;
}

Make edits to blog style

Make edits to blog style


#autosaveControl {
  font-size: 80%;
  font-weight: bold;
  margin: 2px 16px;
}
#autosaveControl input.autosave-frequency {
  border: 1px solid #FFF;
  overflow: visible;
  text-align: center;
}
#autosaveControl input.focused {
  border: 1px solid #DDD;
}
/** Override toucan styles */
#body #autosaveControl label {
  display: inline;
  text-transform: none;
}

#template('colorThemeInit.vm')
#autosaveControl {
  font-size: 80%;
  font-weight: bold;
  margin: 2px 16px;
}
#autosaveControl input.autosave-frequency {
  /* "Invisible" border. */
  border: 1px solid $theme.pageContentBackgroundColor;
  overflow: visible;
  text-align: center;
}
#autosaveControl input.focused {
  border: 1px solid $theme.borderColor;
}
/** Override toucan styles */
#body #autosaveControl label {
  display: inline;
  text-transform: none;
}

Use the color theme in the Autosave UI

[cleanup] Use the color theme in the Autosave UI

git-svn-id: 04343649e741710b2e0f622af6defd1ac33e5ca5@26004 f329d543-caf0-0310-9063-dda96c69346f


div.qne_warn {
    padding: 0.5em;
    color: #333;
    margin: 1em 0;
    border: 1px blue solid;
}

div.qne_warn {
    background: #de94d6;
}

div.qne_warn h4 {
    margin: 0;
    padding-left: 16px;
    background: url('http://fi.somethingawful.com/images/warning.gif') no-repeat left;
}

nav#page-nav {
    background: #006699;
    float: right;
    position: fixed;
    bottom: -50px;
    right: 10px;
    padding-bottom: 2px;
    padding-left: 4px;
    border-top-left-radius: 6px 6px;
    border-top-right-radius: 6px 6px;
    -webkit-box-shadow: #000000 -1px -1px 12px;
    -webkit-transition: -webkit-transform 0.25s ease-out;
}

nav.displayed {
    -webkit-transform: translateY(-50px);
}

img.nav-button {
    position: relative;
    top: 4px;
    cursor: pointer;
}

select#number-drop-down {
    position: relative;
    top: -2px;
}

div.qne_warn {
    padding: 0.5em;
    color: #333;
    margin: 1em 0;
    border: 1px blue solid;
}

div.qne_warn {
    background: #de94d6;
}

div.qne_warn h4 {
    margin: 0;
    padding-left: 16px;
    background: url('http://fi.somethingawful.com/images/warning.gif') no-repeat left;
}

nav#page-nav {
    background: #006699;
    float: right;
    position: fixed;
    bottom: -50px;
    right: 10px;
    padding-bottom: 2px;
    padding-left: 4px;
    border-top-left-radius: 6px 6px;
    border-top-right-radius: 6px 6px;
    -webkit-box-shadow: #000000 0px 0px 12px;
    -webkit-transition: -webkit-transform 0.25s ease-out;
}

nav.displayed {
    -webkit-transform: translateY(-50px);
}

img.nav-button {
    position: relative;
    top: 4px;
    cursor: pointer;
}

select#number-drop-down {
    position: relative;
    top: -2px;
}

Make page navigator drop shadow less annoying


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

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* Toolbar button */

#appmenu-toolbar-button.toolbarbutton-1 {
  list-style-image: url(chrome://branding/content/icon16.png);
}

#appmenu-toolbar-button.toolbarbutton-1 > .toolbarbutton-icon {
  display: none;
}

#appmenu-toolbar-button.toolbarbutton-1 > .toolbarbutton-icon {
  display: -moz-box;
  -moz-margin-end: 0;
}

#appmenu-toolbar-button.toolbarbutton-1 > .toolbarbutton-text,
#appmenu-toolbar-button.toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
  display: none;
}

/* */
#wrapper-appmenu-toolbar-button,
.appmenu-edit-button[disabled="true"] {
  opacity: 1 !important;
}

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

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* Toolbar button */

#appmenu-toolbar-button.toolbarbutton-1,
toolbar[customizing] #appmenu-toolbar-button {
  list-style-image: url(chrome://branding/content/icon16.png);
}

#appmenu-toolbar-button.toolbarbutton-1 > .toolbarbutton-icon {
  display: -moz-box;
  -moz-margin-end: 0;
}

#appmenu-toolbar-button.toolbarbutton-1 > .toolbarbutton-text,
toolbar[customizing] #appmenu-toolbar-button > .toolbarbutton-text,
#appmenu-toolbar-button.toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
toolbar[customizing] #appmenu-toolbar-button > .toolbarbutton-menu-dropmarker {
  display: none;
}

/* */
#wrapper-appmenu-toolbar-button,
.appmenu-edit-button[disabled="true"] {
  opacity: 1 !important;
}

Fix toolbarbutton look in customize mode


body {
    height: 100%;
}

iframe {
    border: 0;
}

.angular-icon {
    background-color: #03A9F4;
    padding: 5px;
}

.container {
    height: 100%;
}

.menu-item {
    width: 100%;
    display: block;
    max-height: 40px;
    line-height: 40px;
    padding: 0px 28px;
    color: #333;
}

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

body {
    height: 100%;
}

iframe {
    border: 0;
}

.angular-icon {
    background-color: #03A9F4;
    padding: 5px;
}

.fill-height {
    height: 100%;
}

.menu-item {
    width: 100%;
    display: block;
    max-height: 40px;
    line-height: 40px;
    padding: 0px 28px;
    color: #333;
}

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

Rename container css class to fill-height


.receipt_index {
    width:     2em;
    max-width: 2em;
}
.receipt_vendor_id {
    width:     5em;
    max-width: 5em;
}
.receipt_item {
    width: auto;
}
.receipt_code {
    width:     8em;
    max-width: 8em;
}
.receipt_price {
    width:     5em;
    max-width: 5em;
    white-space: nowrap;
}
#counter_receipt > tr:first-child td {
    font-size: larger;
    font-weight: bold;
}

@media print {

    @page
    {
        /* this affects the margin in the printer settings */
        margin: 1cm 1cm;
    }

    body
    {
        /* this affects the margin on the content before sending to printer */
        margin: 0px;
        padding: 0px;
    }

}

.receipt_index {
    width:     2em;
    max-width: 2em;
}
.receipt_vendor_id {
    width:     5em;
    max-width: 5em;
}
.receipt_item {
    width: auto;
}
.receipt_code {
    width:     8em;
    max-width: 8em;
    text-align: center;
}
td.receipt_code {
    font-family: monospace;
}
.receipt_price {
    width:     5em;
    max-width: 5em;
    white-space: nowrap;
}
.receipt_status {
    width: 0;
    white-space: nowrap;
}
#counter_receipt > tr:first-child td {
    font-size: larger;
    font-weight: bold;
}

@media print {

    @page
    {
        /* this affects the margin in the printer settings */
        margin: 1cm 1cm;
    }

    body
    {
        /* this affects the margin on the content before sending to printer */
        margin: 0px;
        padding: 0px;
    }

}

Tweak item code and state display styles.


@-moz-document url-prefix(https://github.com/explore) {
  #explore-featured {
    display: none;
  }

  .pagehead.explore-head {
    margin-bottom: 0;
  }
}

Add .css directory with a GitHub bit

Add .css directory with a GitHub bit


/* Resets usually supplied by Tailwind @base */
.vc-reset {
  &,
  & * {
    line-height: 1.5;
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: theme('borderColor.default', currentColor);
    &:focus {
      outline: none;
    }
  }
  & button,
  & [role='button'] {
    cursor: pointer;
  }
}

.vc-box-center-center {
  @apply vc-flex vc-justify-center vc-items-center;
}

@tailwind utilities;

/* Resets usually supplied by Tailwind @base */
.vc-reset {
  &,
  & * {
    line-height: 1.5;
    box-sizing: border-box;
    &:focus {
      outline: none;
    }
  }
  & button,
  & [role='button'] {
    cursor: pointer;
  }
}

.vc-box-center-center {
  @apply vc-flex vc-justify-center vc-items-center;
}

.vc-border,
.vc-border-2,
.vc-border-3 {
  border-style: solid;
}

@tailwind utilities;

Apply `border-style` to `vc-border` classes instead of `vc-reset`


/*To uniformize margins accross browsers*/
body {
    margin: 8px;
    padding: 0;
}

/*French text*/
[lang|=fr] {
    display: none;
}

/*Responsive Web Design (RWD)*/
    * {
        box-sizing: border-box;
    }

    /* For smartphones RWD: */
    [class*="col-"] {
        width: 100%;
    }

    @media only screen and (min-width: 601px) {
        /* For tablets RWD: */
        .col-m-1 {width: 8.33%;}
        .col-m-2 {width: 16.66%;}
        .col-m-3 {width: 25%;}
        .col-m-4 {width: 33.33%;}
        .col-m-5 {width: 41.66%;}
        .col-m-6 {width: 50%;}
        .col-m-7 {width: 58.33%;}
        .col-m-8 {width: 66.66%;}
        .col-m-9 {width: 75%;}
        .col-m-10 {width: 83.33%;}
        .col-m-11 {width: 91.66%;}
        .col-m-12 {width: 100%;}
    }

    @media only screen and (min-width: 993px) {
        /* For desktop RWD: */
        .col-1 {width: 8.33%;}
        .col-2 {width: 16.66%;}
        .col-3 {width: 25%;}
        .col-4 {width: 33.33%;}
        .col-5 {width: 41.66%;}
        .col-6 {width: 50%;}
        .col-7 {width: 58.33%;}
        .col-8 {width: 66.66%;}
        .col-9 {width: 75%;}
        .col-10 {width: 83.33%;}
        .col-11 {width: 91.66%;}
        .col-12 {width: 100%;}
    }

    /*All columns with float left, but rows won't get mingled*/
    [class*="col-"] {
        float: left;
        padding: 0.01em 16px;
    }.row::after {
        content: "";
        clear: both;
        display: block;
    }

/*Images*/
img {
    border: 0;
    max-width: 100%;
    height: auto;
}

/*Project page-specific css*/

Add basic css file with Responsive Web Design features


header {

    text-align: center;
}

h4, h5 {
    margin-top: 0%;
    margin-bottom: 0%;
}

a {
    color: #800080;
}

a:visited {
    color: #ff0000;
}

body {
    color: #000080;
    background-color: #ffffff;
}

table {
    margin-left: auto;
    margin-right: auto;
}

header b {
    font-size: 36px;
}

p {
    color: Navy;
    font-size: 10px;
    margin-top: 0%;
    margin-bottom: 0%;
}

#geico {
    margin-top: 1%;
    margin-bottom: 2%;
    text-align: center;
}

td {
    vertical-align: top;
}

.line {
    width: 100%;
    height: 0.5px;
    margin-top: 20px;
    margin-bottom: 20px;
    border: #9A9A9A 1px solid;
}

div + p {
    font-size: 12px;
}

a + p {
    margin-top: 20px;
    margin-bottom: 20px;
}

Add styling to Berkshire HTML and update HTML file.


body {
  font-family: "Roboto", sans-serif;
  font-size: 1em;
}

#start-panel {
  margin: 1em auto 0 auto;
  width: 22em;
}

#cells-in {
  height: 11em !important;
  overflow: auto !important;
}

#life-panel {
  display: none;
  margin: 1em auto 0 auto;
  width: 400px;
}

#grid {
  border: 1px solid #eee;
  box-shadow: 1px 1px 1px #aaa;
}

body {
  font-family: "Roboto", sans-serif;
  font-size: 1em;
}

#start-panel {
  margin: 1em auto 0 auto;
  width: 400px;
}

#cells-in {
  height: 11em !important;
  overflow: auto !important;
}

#life-panel {
  display: none;
  margin: 1em auto 0 auto;
  width: 400px;
}

#grid {
  border: 1px solid #eee;
  box-shadow: 1px 1px 1px #aaa;
}

Align setup and grid width

Align setup and grid width


* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Open Sans', sans-serif;
  color: #111;
  background-color: #eee;
}

h1 {
  margin: 1em 0;
  font-size: 200%;
}

p {
  text-align: center;
}

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

a:hover {
  color: #aaa;
}

.talk {
  width: 700px;
  margin: 0 auto;
  padding-bottom: 20px;
  text-align: center;
}

.slides {
  padding-top: 20px;
  margin: auto;
}

#avatar img{
  width: 60px;
  border-radius: 100px;
}

#social {
  margin: 60px 0 0 0;
  font-size: 60px;
}

#bio {
  font-size: 16px;
  line-height: 160%;
}

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Open Sans', sans-serif;
  color: #111;
  background-color: #eee;
}

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

p {
  text-align: center;
}

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

a:hover {
  color: #aaa;
}

.talk {
  width: 700px;
  margin: 0 auto;
  padding-bottom: 20px;
  text-align: center;
}

.slides {
  padding-top: 20px;
  margin: auto;
}

#avatar img{
  width: 60px;
  border-radius: 100px;
}

#social {
  margin: 60px 0 0 0;
  font-size: 60px;
}

#bio {
  font-size: 16px;
  line-height: 160%;
}

Use em instead of percentage

Use em instead of percentage


body {
  background: #eee;
  color: #444;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 1.5em;
  margin: 0 auto;
  padding: 20px;
  max-width: 600px;
  text-align: center;
}

.title {
  color: #000;
  font-weight: lighter;
  letter-spacing: 4px;
}

input, .result {
  color: #000;
  font-weight: bold;
  text-align: center;
}

input {
  background: transparent;
  border: none;
  border-bottom: 2px solid #0074d9;
  width: 75px;
}

.flow-icon {
  color: #000;
}

.card {
  background: white;
  border-radius: 3px;
  box-shadow: 0 1px 2px #aaa;
  margin: 1rem;
  padding: 1.5rem;
  text-align: left;
}

body {
  background: #eee;
  color: #444;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 1.5em;
  margin: 0 auto;
  padding: 20px;
  max-width: 600px;
  text-align: center;
}

.title {
  color: #000;
  font-weight: 100;
  letter-spacing: 4px;
}

input, .result {
  color: #000;
  font-weight: bold;
  text-align: center;
}

input {
  background: transparent;
  border: none;
  border-bottom: 2px solid #0074d9;
  width: 75px;
}

.flow-icon {
  color: #000;
}

.card {
  background: white;
  border-radius: 3px;
  box-shadow: 0 1px 2px #aaa;
  margin: 1rem;
  padding: 1.5rem;
  text-align: left;
}

Use a more consistent light font weight

Use a more consistent light font weight


.user-widget {
  background: #fff;
  padding: 5px;
}
.user-widget .user-avatar {
  margin-bottom: -4px;
}
.user-widget .user-info {
  display: inline-block;
  vertical-align: top;
  margin-left: 5px;
}
.user-widget .user-username {
  font: 16px Monda;
}
.user-widget .user-username a {
  color: #08f;
}
.user-widget .user-metadata {
}
.user-widget .user-repos {
}

.user-widget {
  background: #fff;
  margin: 10px 0;
  padding: 5px;
}
.user-widget .user-avatar {
  margin-bottom: -4px;
}
.user-widget .user-info {
  display: inline-block;
  vertical-align: top;
  margin-left: 5px;
}
.user-widget .user-username {
  font: 16px Monda;
}
.user-widget .user-username a {
  color: #08f;
}
.user-widget .user-metadata {
}
.user-widget .user-repos {
}

Add vertical margin for user widgets.

Add vertical margin for user widgets.


.aui-toolset {
	white-space: nowrap;
}

.aui-toolset-content {
	float: none;
	display: inline-block;
	vertical-align: top;
}

.aui-toolset-item {
	display: inline-block;
	vertical-align: top;
	margin-left: -1px;
}

.aui-toolset-item-content {
	margin: 0;
	float: none;
	display: block;
}

.aui-toolset-first {
	margin-left: 0;
}

.aui-toolset {
	white-space: nowrap;
}

.aui-toolset-content {
	float: none;
	display: inline-block;
	vertical-align: top;
}

.aui-toolset-item {
	display: inline-block;
	vertical-align: top;
}

.aui-toolset-item-content {
	margin: 0;
	float: none;
	display: block;
}

Rollback ToolSet css improvements; Conflicts with the state class (borders)

git-svn-id: eaac6977d0b6fa3343c402860739874625caf655@40720 05bdf26c-840f-0410-9ced-eb539d925f36


.dojoxGridxColumnSet {
	overflow: hidden;
	width: 100%;
	position: relative;
}
.dojoxGridxColumnSetScroller {
	position: absolute;
	bottom: 0px;
	overflow-x: auto;
	overflow-y: hidden;
	height: 17px;
}
.dojoxGridxColumnSetScrollerContent{
	position: relative;
	height: 1px;
}

.dojoxGridxColumnSet {
	overflow: hidden;
	width: 100%;
	position: relative;
}
.dojoxGridxColumnSetScroller {
	position: absolute;
	bottom: 0px;
	overflow-x: auto;
	overflow-y: hidden;
	height: 18px; /* must be one more than the scroll bar height for IE to listen to clicks, any more blocks clicks in the main area*/
}
.dojoxGridxColumnSetScrollerContent{
	position: relative;
	height: 1px;
}

Fix scrollbar for old IEs

Fix scrollbar for old IEs


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

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

@-moz-document url("chrome://browser/content/browser.xul") {

#TabsToolbar {
  -moz-box-ordinal-group: 200; /* default is 100 */
}

}

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

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

@-moz-document url("chrome://browser/content/browser.xul") {

#toolbar-menubar {
  -moz-box-ordinal-group: 5;
}

#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
  -moz-box-ordinal-group: 50;
}

#TabsToolbar {
  -moz-box-ordinal-group: 10;
}

#TabsToolbar[tabsontop="false"] {
  -moz-box-ordinal-group: 100;
}

}

Improve "tabs on bottom" tweak

Improve "tabs on bottom" tweak


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Fix image paths in IE stylesheet.

Fix image paths in IE stylesheet.


.anchor-fix {
	padding-top: calc(1rem + 60px);
	margin-top: calc(-1rem - 60px);
}

.bi {
	display: inline-block;
	vertical-align: bottom;
}

#main-grid {
	display: grid;
	grid-template-areas: "sidebar main";
	grid-template-columns: 20rem auto;
	grid-template-rows: 100vh;
}

#sidebar {
	grid-area: sidebar;
	position: relative;
	grid-template-rows: min-content auto;
}

#main {
	display: grid;
	grid-area: main / sidebar / sidebar / main;
	grid-template-rows: min-content auto;
}

@media (min-width: 768px) {
	#main {
		grid-area: main;
	}
}

#main-content {
	position: relative;
}

#main-content .card .table > tbody > :last-child > * {
	border-bottom-width: 0 !important;
}

.nav-pills > :hover > .nav-link {
	background-color: #ced4da; /* $gray-400 */
	color: #000;
}

.nav-pills > :hover > .nav-link.active {
	background-color: #0a58ca; /* $blue-600 */
	color: #fff;
}

.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
	color: #fff;
}

Add hover states to sidebar

Add hover states to sidebar


.counties {
  fill: none;
  pointer-events: none;
}

.states {
  fill: none;
  stroke: none;
  pointer-events: all;
}

.states.active {
  fill: #c37500;
  fill-opacity: 0.4;
}

.state-borders {
  fill: none;
  stroke: #000;
  stroke-width: 0.5px;
  stroke-linejoin: round;
}

.background {
  pointer-events: all;
  fill: none;
}

.colorlegend-title {
  font-size: 1.5em;
}

Increase font size for legend title.

Increase font size for legend title.


/*
 * $Id: iphone.css,v 1.9 2008/11/11 22:29:14 marcm Exp $
 */

body {
	width: 370px;
}

#top_banner {
	background: white;
	padding: 0 5px;
	-webkit-border-radius: 5px;
}

div#content {
	font-size: 12pt;
	margin: 10px;
}

span.additional {
 	display: none;
}

#mediainfo {
	margin: 10px;;
}

.incidents > li {
	padding-bottom: 10px;
	border-bottom: 1px solid #165279;
}

.incidents li button {
	display: inline;
}

.incidents li.last {
	border-bottom: 0;
	padding-bottom: 0;
}

#incidents_above {
	border-bottom: 1px solid #165279;
}

#incidents_below {
	border-top: 1px solid #165279;
}

#rightcol {
	display: none;
}

#leftcol {
	height: auto
}

/*
 * $Id: iphone.css,v 1.9 2008/11/11 22:29:14 marcm Exp $
 */

body {
	width: 370px;
}

#top_banner {
	background: white;
	padding: 0 5px;
	-webkit-border-radius: 5px;
}

div#content {
	font-size: 12pt;
	margin: 10px;
}

span.additional {
 	display: none;
}

#mediainfo {
	margin: 10px;;
}

.incidents li button {
	display: inline;
}

#incidents_above {
	border-bottom: 1px solid #165279;
}

#incidents_below {
	border-top: 1px solid #165279;
}

#rightcol {
	display: none;
}

#leftcol {
	height: auto
}

Bring the iPhone styles inline with the main site changes.


body {
    background: black;
    color: #bbbbbb;
}

pre {
    font-family: DejaVu Sans Mono, Menlo, monospace;
}

Define font-family for pre to aid OS's in selecting good monospace fonts


body {
    background: white;
}

.vscode-body {
    box-sizing: border-box;
    min-width: 200px;
    max-width: 980px;
    margin: 0 auto;
    padding: 45px;
}

.vscode-body blockquote {
    background-color: initial;
}

.vscode-body pre {
    color: initial;
    background: #f7f7f7 !important;
}

.vscode-body code {
    color: initial;
}

.vscode-body pre code {
    color: initial;
}

.vscode-body code > div {
    background: none
}

.vscode-body table th,
.vscode-body table td {
    border: 1px solid #ddd !important;
}

.vscode-body.showEditorSelection .code-active-line:before {
	border-left: 3px solid rgba(0, 0, 0, 0.15);
}

.vscode-body.showEditorSelection .code-line:hover:before {
	border-left: 3px solid rgba(0, 0, 0, 0.40);
}

.vscode-body.showEditorSelection .code-line .code-line:hover:before {
	border-left: none;
}

body {
    background: white;
}

.vscode-body {
    box-sizing: border-box;
    min-width: 200px;
    max-width: 980px;
    margin: 0 auto;
    padding: 45px;
}

.vscode-body blockquote {
    background-color: initial;
}

.vscode-body pre {
    color: initial;
    background: #f7f7f7 !important;
}

.vscode-body code {
    color: inherit;
}

.vscode-body pre code {
    color: initial;
}

.vscode-body code > div {
    background: none
}

.vscode-body table th,
.vscode-body table td {
    border: 1px solid #ddd !important;
}

.vscode-body.showEditorSelection .code-active-line:before {
	border-left: 3px solid rgba(0, 0, 0, 0.15);
}

.vscode-body.showEditorSelection .code-line:hover:before {
	border-left: 3px solid rgba(0, 0, 0, 0.40);
}

.vscode-body.showEditorSelection .code-line .code-line:hover:before {
	border-left: none;
}

Allow `code` to be linkable

Allow `code` to be linkable

`code` tags in `a`s now appear as links (like on GitHub).


.server {
	width: 800px;
	height: 600px;
	overflow: hidden;

	position: absolute;
	left: 50%;
	top: 50%;
	-moz-transform: translate(-50%, -50%);
	border: 1px solid black;
}

.window {
	position: absolute;
}

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

.server {
	width: 800px;
	height: 600px;
	overflow: hidden;

	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border: 1px solid black;
}

.window {
	position: absolute;
}

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

Add support for WebKit/Opera/MS/unprefixed transforms


.root {
  position: relative;

  height: 100%;

  overflow: hidden;
}

.placeholder {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background-color: #045cfc;

  transition: transform 0.5s ease-in-out;

  transform: translateY(0%) translateZ(0);

  z-index: 1;
}

.placeholder.loaded {
  transform: translateX(-100%);
}

.placeholder.dark {
  background-color: #403f4c;
}

.root {
  position: relative;

  height: 100%;

  overflow: hidden;
}

.placeholder {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background-color: #045cfc;

  transition: transform 0.5s cubic-bezier(0.7, 0.05, 0, 1);

  transform: translateY(0%) translateZ(0);

  z-index: 1;
}

.placeholder.loaded {
  transform: translateX(-100%);
}

.placeholder.dark {
  background-color: #403f4c;
}

Change image loading animation easing curve


/*
Colors used in icon:
#1977BA
#6FCBD4
#FCC1B6
*/

body {
    width:450px;
    text-align: left;
    background-color: lightblue;
}

h1 {
    text-align: center;
}

ol {
    font-size: 14px;
}

ul {
    font-size: 14px;
}

p {
    font-size: 20px;
}

.button {
    width: 150px;
    text-align: center;
    font-size: 16px;
}

Add comment with colors used in icon to CSS


@import url(print.css) print,projection;

html, body {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

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

.wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 5rem;
}
.wrapper .profile {
  background-color: whitesmoke;
  padding: 0 1rem 1rem 1rem;
  margin: 1rem;
  border-radius: 0.5rem;
}
.wrapper .profile .name {
  font-size: 0.8rem;
  padding: 1rem;
  text-align: center;
}

html, body {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

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

.wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 5rem;
}
.wrapper .profile {
  background-color: whitesmoke;
  padding: 0 1rem 1rem 1rem;
  margin: 1rem;
  border-radius: 0.5rem;
}
.wrapper .profile .name {
  font-size: 0.8rem;
  padding: 1rem;
  text-align: center;
}

@media print {
  html, body {
    font-family: monospace;
  }
}

Add media query for print

Add media query for print


@import '../layout.css';
@import '../variables.css';

.card {
  margin-bottom: 16px;
  padding: 16px;
  color: var(--outer-space);
  background-color: var(--white);
  border: 1px solid var(--mystic);
  border-radius: var(--border-radius);
  transition: box-shadow var(--transition-animation-time) var(--transition-animation-type);
}

.card:hover{
  box-shadow: var(--box-shadow-level-1);
}

.card a {
  color: var(--curious-blue);
}

.card a:hover {
  color: var(--denim);
}

.card a:active {
  color: var(--tory-blue);
}

.card ul {
  margin-top: 16px;
}

.card ul:nth-child(1) {
  margin-top: 0;
}

.card ul li h4 {
  margin-bottom: 0;
}

.card ul li.last {
  margin-bottom: 0;
}

.double-padding {
  padding: 40px;
}

.empty {
  border-color: var(--geyser);
  border-style: dashed;
}

.empty:hover {
  border-color: transparent;
}

.failed {
  border-color: var(--torch-red);
}

.no-border {
  border: 0;
}

.no-padding {
  padding: 0;
}

@import '../layout.css';
@import '../variables.css';

.card {
  margin-bottom: 20px;
  padding: 20px;
  color: var(--outer-space);
  background-color: var(--white);
  border: 1px solid var(--mystic);
  border-radius: var(--border-radius);
  transition: box-shadow var(--transition-animation-time) var(--transition-animation-type);
}

.card:hover{
  box-shadow: var(--box-shadow-level-1);
}

.card a {
  color: var(--curious-blue);
}

.card a:hover {
  color: var(--denim);
}

.card a:active {
  color: var(--tory-blue);
}

.card ul {
  margin-top: 20px;
}

.card ul:nth-child(1) {
  margin-top: 0;
}

.card ul li h4 {
  margin-bottom: 0;
}

.card ul li.last {
  margin-bottom: 0;
}

.double-padding {
  padding: 40px;
}

.empty {
  border-color: var(--geyser);
  border-style: dashed;
}

.empty:hover {
  border-color: transparent;
}

.failed {
  border-color: var(--torch-red);
}

.no-border {
  border: 0;
}

.no-padding {
  padding: 0;
}

Update 16px spacing to 20px

Update 16px spacing to 20px

This updates legacy spacing for this component.


body {
	font-family: Arial black, sans-serif;
	max-width: 100%
	border: auto;
	background-image: url("Pictures/background.jpg");
}

section {
	border: 5px double black;
	padding: 50px;
	margin: 20px;
	max-width: 80%;
	background-color: orange;
}

.sidebar {
	float: left;
	left: 0px;
	max-width: 20%
}

figure{
	width:700px;
	margin: 0 auto;
	text-align: center;
}

.attribute {
	float: left;
	max-width: 50%;
}

main{
	text-align: center;
}

h1 {
	text-align: center;
	font-size: 50px;
}

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

#form{
	position: fixed;
	bottom: 0;
}

body {
	font-family: Georgia, serif;
	max-width: 100%
	border: auto;
	background-image: url("Pictures/background.jpg");
}

section {
	border: 5px double black;
	padding: 50px;
	margin: 20px;
	max-width: 80%;
	background-color: orange;
	font-family: Arial, Helvetica, sans-serif;
}

.sidebar {
	float: left;
	left: 0px;
	max-width: 20%
}

figure{
	width:700px;
	margin: 0 auto;
	text-align: center;
}

.attribute {
	float: left;
	max-width: 50%;
}

main{
	text-align: center;
}

h1 {
	text-align: center;
	font-size: 50px;
}

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

#form{
	position: fixed;
	bottom: 0;
}

/*Pseudo-link*/
a:visited{
	color: #00802b;
}

a:hover{
	color: #00ff00;
}

Add link color and touch up on text

Add link color and touch up on text


/* make the canvases, children of the this container */
#container {
    position: relative;
}

#webglContainer {
    position: absolute;
    pointer-events: none;   /* this element will not catch any events */
    z-index: 8;    /* position this canvas at bottom of the other one */
}

#threeContainer {
    position: absolute;
    z-index: 10;      /* position this canvas on top of the other one */
}

body{
  margin: 0px;
  overflow: hidden;
}

/* make the canvases, children of the this container */
#container {
    position: relative;
    margin: 0px;
    padding: 0px;
}

#webglContainer {
    position: relative;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    pointer-events: none;   /* this element will not catch any events */
    z-index: 8;    /* position this canvas at bottom of the other one */
}

#threeContainer {
    position: relative;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    z-index: 10;      /* position this canvas on top of the other one */
}

Fix picking issue due to margins.

Fix picking issue due to margins.


Add Hide/Show team selector (Add CSS)

Add Hide/Show team selector (Add CSS)


body {
    margin: 0;
    padding: 0;
}

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

h2 {
    margin-top: 2px;
    margin-bottom: 2px;
}

.parameter-input {
    padding-top: 5px;
    padding-bottom: 5px;
}

.parameter-input-box {
    margin-top: 2px;
}

.overlay-panel {
    font-family: 'Roboto', sans-serif;
    color: #3F403F;
    background: #CED0CE;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0px 0px 20px 2px rgba(63,64,63,1);
}

#app-header {
    font-family: 'Source Code Pro', monospace;
    color: #E6E8E6;
    background-color: #475841;
}

#command-panel {
    padding-right: 12px;
}

#building-status-panel {
    text-align: center;
    margin-top: -40px;
    margin-left: -40px;
}

#input-box-sequence {
    font-family: 'Source Code Pro', monospace;
    resize: none;
}

body {
    margin: 0;
    padding: 0;
}

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

h2 {
    margin-top: 2px;
    margin-bottom: 2px;
}

.parameter-input {
    padding-top: 5px;
    padding-bottom: 5px;
}

.parameter-input-box {
    margin-top: 2px;
}

.overlay-panel {
    font-family: 'Roboto', sans-serif;
    color: white;
    background: #CED0CE;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0px 0px 20px 2px rgba(63,64,63,1);
}

#app-header {
    font-family: 'Source Code Pro', monospace;
    color: #E6E8E6;
    background-color: #475841;
}

#command-panel {
    padding-right: 12px;
}

#building-status-panel {
    text-align: center;
    margin-top: -40px;
    margin-left: -40px;
}

#input-box-sequence {
    font-family: 'Source Code Pro', monospace;
    resize: none;
}

Change header font colour to white.

Change header font colour to white.


/* Chrome file:// URLs set draggable=true for links to files (CSS selector .icon.file). This automatically
 * sets -webkit-user-select: none, which disables selecting the file names and so prevents Vimium's search
 * from working as expected. Here, we reset the value back to default. */
.icon.file {
  -webkit-user-select: auto !important;
}

Add a comment explaining the CSS for file:// URLs


@-moz-document url-prefix("https://app.ringcentral.com/") {
body {
    filter: invert(1) hue-rotate(180deg) !important;
}

[data-test-automation-id="imageCard"] {
    filter: invert(1) hue-rotate(160deg) !important;
}
}

/* ==UserStyle==
@name        Ringcentral Dark Theme
@namespace   mikemanger
@version     1.0.0
@homepageURL https://github.com/mikemanger/userscripts/
@updateURL   https://raw.githubusercontent.com/mikemanger/userscripts/master/ringcentral-dark.user.css
@license     CC-BY-4.0
==/UserStyle== */

@-moz-document url-prefix("https://app.ringcentral.com/") {
body {
    filter: invert(1) hue-rotate(160deg) !important;
}

[data-test-automation-id="imageCard"] {
    filter: invert(1) hue-rotate(160deg) !important;
}
}

Add meta to ringcentral theme

Add meta to ringcentral theme


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

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

nav .dropdown-toggle {
    padding: 14.5px
}

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

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

.navbar {
    margin-bottom: 0;
}

main.container-fluid {
    margin: 0 1em 1em;
}

Reduce whitespace in legacy menu

Reduce whitespace in legacy menu


  body {
    background: rgb(245, 250, 255);
    color: rgb(10, 15, 20);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

    max-width: 40em;
    margin-left: auto;
    margin-right: auto;

    margin-top: 3em;
    margin-bottom: 6em;
  }

  @keyframes tossing {
    0% {
      transform: rotate(-4deg);
    }
    50% {
      transform: rotate(4deg);
    }
    100% {
      transform: rotate(-4deg);
    }
  }

  #ship {
    animation-name: tossing;
    animation-duration: 2.5s;
    animation-iteration-count: infinite;
  }

  body {
    background: rgb(245, 250, 255);
    color: rgb(10, 15, 20);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

    max-width: 40em;
    margin-left: auto;
    margin-right: auto;

    margin-top: 3em;
    margin-bottom: 6em;
  }

  figure {
    margin-top: 2.4em;
    margin-bottom: 2.4em;
  }

  @keyframes tossing {
    0% {
      transform: rotate(-4deg);
    }
    50% {
      transform: rotate(4deg);
    }
    100% {
      transform: rotate(-4deg);
    }
  }

  #ship {
    margin-top: 2.4em;
    animation-name: tossing;
    animation-duration: 2.5s;
    animation-iteration-count: infinite;
  }

Add more space between elements

Add more space between elements


/*!
 * Copyright 2014 Apereo Foundation (AF) Licensed under the
 * Educational Community 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://opensource.org/licenses/ECL-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.
 */

/* Resource list */

#deleteresources-modal #deleteresources-overview-container ul {
    margin-bottom: 15px;
    max-height: 240px;
    overflow: auto;
}

/* Add an IE9 fallback for threedots */
.ie-lt10 #deleteresources-modal #deleteresources-overview-container ul .oae-listitem h3 {
    max-width: 300px;
}

/* Delete action buttons */

#deleteresources-modal #deleteresources-overview-container .well button {
    margin-bottom: 5px;
}

#deleteresources-modal .btn-primary i {
    color: #FFF;
}

/*!
 * Copyright 2014 Apereo Foundation (AF) Licensed under the
 * Educational Community 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://opensource.org/licenses/ECL-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.
 */

/* Resource list */

#deleteresources-modal #deleteresources-overview-container ul {
    margin-bottom: 15px;
    max-height: 240px;
    overflow: auto;
}

#deleteresources-modal #deleteresources-overview-container ul .oae-listitem h3 {
    -webkit-flex: initial;
       -moz-flex: initial;
        -ms-flex: initial;
            flex: initial;
}

/* Add an IE9 fallback for threedots */
.ie-lt10 #deleteresources-modal #deleteresources-overview-container ul .oae-listitem h3 {
    max-width: 300px;
}

/* Delete action buttons */

#deleteresources-modal #deleteresources-overview-container .well button {
    margin-bottom: 5px;
}

#deleteresources-modal .btn-primary i {
    color: #FFF;
}

Fix delete content titles taking up full space


@media (min-width: 768px) {
    body.chat div.admin-container {
        margin-right: 300px;
    }
}

body.chat #admin-chat {
    right: 0;
}

#admin-chat {
    z-index: 1100;
    position: fixed;
    right: -290px;
    width: 290px;
    top: 50px;
    bottom: 0;
    background-color: #dadada;
    border-left: 1px solid #ccc;

    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;

    transition-property: all;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
#chatpage-chat {
    flex-grow: 1;
}
#chatpage-top {
    flex-grow: 0;
    padding: 4px;
}
#chatpage-bottom {
    flex-grow: 0;
}
div.#chatpage-presence {
    padding: 0 10px 8px 10px
}
#admin-chat-toggle {
    top: 70px;
    width: 32px;
    margin-left: -32px;
    position: absolute;
    border: 1px solid #ccc;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

@media (min-width: 768px) {
    body.chat div.admin-container {
        margin-right: 300px;
    }
}

body.chat #admin-chat {
    right: 0;
}

#admin-chat {
    z-index: 1000;
    position: fixed;
    right: -290px;
    width: 290px;
    top: 50px;
    bottom: 0;
    background-color: #dadada;
    border-left: 1px solid #ccc;

    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;

    transition-property: all;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
#chatpage-chat {
    flex-grow: 1;
}
#chatpage-top {
    flex-grow: 0;
    padding: 4px;
}
#chatpage-bottom {
    flex-grow: 0;
}
div.#chatpage-presence {
    padding: 0 10px 8px 10px
}
#admin-chat-toggle {
    top: 70px;
    width: 32px;
    margin-left: -32px;
    position: absolute;
    border: 1px solid #ccc;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

Fix z-order of chat for menu dropdowns

Fix z-order of chat for menu dropdowns


#ddgcarousel li.ddgc_item span.news-time {
    font-size: 11px;
    color: #777;
    position: relative;
    left: 22px;
    bottom: 9px;
}

#ddgcarousel li.ddgc_item span.news-title {
    color: RGB(68,68,68);
    font-size: 14px;
    height: 45px;
    overflow: hidden;
    text-overflow: ellipsis;
}

#spice_news #ddgcarousel li.ddgc_item {
    text-align: left;
}

#spice_news #ddgcarousel .news-snippet {
    overflow: hidden;
    color: #777;
    height: 70px;
}

#spice_news #ddgcarousel .news-more-at {
    border-top: 1px dashed #777;
    margin-top: 10px;
    padding-top: 5px;
}

#spice_news #ddgcarousel img.favicon {
    display: inline;
    width: 16px;
    height: 16px;
}

#spice_news #ddgcarousel .news-more-at .news-domain {
    display: inline;
    margin-top: 0px;
    position: relative;
    top: -4px;
    left: 3px;
    color: #824C42;
}

#spice_news #ddgc_pagination a.zero_click_more_at_link {
    visibility: hidden;
}

#ddgcarousel li.ddgc_item span.news-time {
    font-size: 11px;
    color: #777;
    position: relative;
    left: 22px;
    bottom: 9px;
}

#ddgcarousel li.ddgc_item span.news-title {
    color: RGB(68,68,68);
    font-size: 14px;
    height: 45px;
    overflow: hidden;
    text-overflow: ellipsis;
}

#spice_news #ddgcarousel li.ddgc_item {
    text-align: left;
}

#spice_news #ddgcarousel .news-snippet {
    overflow: hidden;
    color: #777;
    height: 66px;
}

#spice_news #ddgcarousel .news-more-at {
    border-top: 1px dashed #777;
    margin-top: 10px;
    padding-top: 5px;
}

#spice_news #ddgcarousel img.favicon {
    display: inline;
    width: 16px;
    height: 16px;
}

#spice_news #ddgcarousel .news-more-at .news-domain {
    display: inline;
    margin-top: 0px;
    position: relative;
    top: -4px;
    left: 3px;
    color: #824C42;
}

#spice_news #ddgc_pagination a.zero_click_more_at_link {
    visibility: hidden;
}

Adjust the size of the snippet to 66px;

News: Adjust the size of the snippet to 66px;


html, body {
	padding:0px;
	color:#000000; background-color:#ffffff;
  font-family: Helvetica, sans-serif;
}

/* Slides */
IMG.img_slide {
    display: block;
    margin-left: auto;
    margin-right: auto
}

html, body {
	padding:0px;
	color:#000000; background-color:#ffffff;
  font-family: Arial, sans-serif;
}

/* Slides */
IMG.img_slide {
    display: block;
    margin-left: auto;
    margin-right: auto
}

Use Arial as default font.

Use Arial as default font.

git-svn-id: ffe668792ed300d6c2daa1f6eba2e0aa28d7ec6c@52197 91177308-0d34-0410-b5e6-96231b3b80d8


/* MListIndexStyle : MWidgetStyle */
MListIndexStyle {
    shortcut-object-name: "whiteFont";

    background-opacity: 0.5;
    background-image: meegotouch-fastscroll-background 12px 12px;
    preferred-size: 7mm  100%;

    margin-top: 0;
    margin-left: 0;
    margin-bottom: 0;
    margin-right: 0;
}

#whiteFont {
    color: $COLOR_INVERTED_FOREGROUND;
}

/* MListIndexStyle : MWidgetStyle */
MListIndexStyle {
    shortcut-object-name: "whiteFont";

    background-opacity: 0.5;
    background-image: meegotouch-fastscroll-background 12px 12px 12px 12px;
    preferred-size: 7mm  100%;

    margin-top: 0;
    margin-left: 0;
    margin-bottom: 0;
    margin-right: 0;
}

#whiteFont {
    color: $COLOR_INVERTED_FOREGROUND;
}

Changes: Fix bad background-image syntax for list index style.

RevBy: TrustMe

Details: The commit 57a6cb4162ef512b121931f13d3b85d2f60dcba2 caused the background-image property
to not be correctly parsed, and thus was causing a crash in grouped lists.


body {
  background-color: #edeff0;
  font-family: "Helvetica", Arial, sans-serif;
  padding: 40px;
  text-align: center;
  color: #333;
  font-size: 18px;
}

h1 {
  text-align: center;
  margin-top: 50px;
  font-family: serif;
  font-size: 42px;
  font-weight: bold;
}

a, input[type="submit"] {
  display: inline-block;
  background-color: #e15258;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 12px;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 100px;
  transition: background-color 200ms ease-in-out;
  letter-spacing: 0.05em;
  border: none;
}
a:hover,
a:focus,
a:active,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="submit"]:active {
  background-color: #c3222a;
}

div + a,
div a {
  background-color: #aaa;
}
div + a:hover,
div a:hover {
  background-color: #888;
}
div a { margin-right: 10px; }
div a + form { display: inline-block; }

p + div {
  margin-top: 50px;
  text-align: center;
  background-color: transparent;
  border-bottom: none;
}

div {
  text-align: left;
  width: 50%;
  margin: 0 auto;
  background-color: #fff;
  padding: 50px;
  border-radius: 5px;
  border-bottom: solid 2px #ddd;
  margin-bottom: 30px;
}

fieldset {
  border: none;
  padding: 0;
  margin-bottom: 20px;
}
fieldset input,
fieldset textarea { width: 100%; }

label {
  display: block;
  font-size: 16px;
  color: #333;
  font-weight: bold;
  margin-bottom: 3px;
}

input[type="text"],
textarea {
  padding: 10px 0;
  text-indent: 10px;
  border: solid 2px #ddd;
  border-radius: 4px;
  font-size: 16px;
}

input[type="text"]:focus,
textarea:focus {
  outline: none;
  border-color: #0099ff;
}

Add css from team treehouse

Add css from team treehouse


@font-face {
    src: url("/fonts/DIN.ttf");
    font-family: "DIN";
    font-weight: 400;
}

@font-face {
    src: url("/fonts/DIN Medium.ttf");
    font-family: "DIN";
    font-weight: 500;
}

@font-face {
    src: url("/fonts/DIN Bold.ttf");
    font-family: "DIN";
    font-weight: 700;
}

@font-face {
    src: url("/fonts/DIN Black.ttf");
    font-family: "DIN";
    font-weight: 900;
}

@font-face {
    src: url("../fonts/DIN.ttf");
    font-family: "DIN";
    font-weight: 400;
}

@font-face {
    src: url("../fonts/DIN Medium.ttf");
    font-family: "DIN";
    font-weight: 500;
}

@font-face {
    src: url("../fonts/DIN Bold.ttf");
    font-family: "DIN";
    font-weight: 700;
}

@font-face {
    src: url("../fonts/DIN Black.ttf");
    font-family: "DIN";
    font-weight: 900;
}

Use relative font URL for testing

Use relative font URL for testing


@import url(http://fonts.googleapis.com/css?family=Oswald);
@import url(http://fonts.googleapis.com/css?family=Exo+2);

body {
    color: #333;
    background-color: #f9f9f9;
    font-family: 'Exo 2', sans-serif;
}
h1, h2, h3, h4, h5 {
    font-family: 'Oswald', sans-serif;
}

#todo-list {
  list-style: none;
  padding-left: 0;
}
#new-todo, #todo-list li {
  margin-bottom: 10px;
  line-height: 34px;
}

#todo-list .edit { display: none; }
#todo-list .editing .edit { display: inherit; }
#todo-list .view { display: inherit; }
#todo-list .editing .view { display: none; }

#todo-list .view label { display: inline; }
#todo-list .done .view label {
  color: #aaa;
  text-decoration: line-through;
}

.sortable-placeholder {
  border: 1px dashed #aaa;
  height: 34px;
}

#info {
    margin-top: 100px;
    color: #999;
    text-align: center;
    font-size: 0.7em;
}

Add footer style, add custom fonts

Add footer style, add custom fonts


/** {
  border: 1px solid red;
}*/
.ng-invalid.ng-dirty {
  border-color: red;
}

.ng-valid.ng-dirty {
  border-color: green;
}

Add styling to form validations

Add styling to form validations


html,
body {
  min-height: 600px;
  padding: 0;
  margin: 0;
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
  font-size: 14px;
}

#app-container {
  margin: auto;
  max-width: 1440px;
}

#popup {
  min-width: 800px;
}

html,
body {
  min-height: 600px;
  padding: 0;
  margin: 0;
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
  font-size: 14px;
}

#app-container {
  margin: auto;
  max-width: 1440px;
  min-width: 600px;
}

#popup {
  min-width: 800px;
}

Add min-width for the root view

Add min-width for the root view


.tsbar-popup {
    display:none;
}

.open .tsbar-popup {
    display:block;
    z-index: 1;
}

#tsbar {
    position:relative;
    height:50px;
    width:100%;
    border:solid black;
}

.tsbar-left {
    position:absolute;
    left:0px;
    top:0px;
}
.tsbar-middle  {
    position:absolute;
    left:50%;
    margin-left:-100px;
    top:0px;
}
.tsbar-right {
    position:absolute;
    right:0px;
    top:0px;
}

.tsbar-user-icon {
    width:48px;
    height:48px;
}

.tsbar-popup {
    display:none;
}

.open .tsbar-popup {
    display:block;
    z-index: 1;
}

#tsbar {
    position:relative;
    height:50px;
    width:100%;
    border:solid black;
}

.tsbar-left {
    position:absolute;
    left:0px;
    top:0px;
}
.tsbar-middle  {
    position:absolute;
    left:50%;
    margin-left:-100px;
    top:0px;
}
.tsbar-right {
    position:absolute;
    right:0px;
    top:0px;
}

.tsbar-user-icon, .tsbar-notification-icon {
    width:48px;
    height:48px;
}

Apply image sizing to activity feed site icons.


/*
  Custom Media Queries
  These custom media queries can be referenced like so:

  @media (--breakpoint-medium) {
    .bg-red { background-color: red; }
  }

*/

@custom-media --breakpoint-not-small screen and (min-width: 42em);
@custom-media --breakpoint-medium screen and (min-width: 42em) and (max-width: 64em);
@custom-media --breakpoint-large screen and (min-width: 64em);

/*
 *
  Custom Media Queries

  Media query values can be changed to fit your own content.
  There are no magic bullets when it comes to media query width values.
  They should be declared in em units - and they should be set to meet
  the needs of your content.

  These media queries can be referenced like so:

  @media (--breakpoint-not-small) {
    .medium-and-larger-specific-style {
      background-color: red;
    }
  }

  @media (--breakpoint-medium) {
    .medium-screen-specific-style {
      background-color: red;
    }
  }

  @media (--breakpoint-large) {
    .large-screen-specific-style {
      background-color: red;
    }
  }

  @media (--breakpoint-extra-large) {
    .extra-large-screen-specific-style {
      background-color: red;
    }
  }

*/

@custom-media --breakpoint-not-small screen and (min-width: 30em);
@custom-media --breakpoint-medium screen and (min-width: 30em) and (max-width: 60em);
@custom-media --breakpoint-large screen and (min-width: 60em);
@custom-media --breakpoint-extra-large screen and (min-width: 120em);

Update media queries with option for extra large media query.


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

/*
 * Statblock section.
 */
.statblock {
  font-family: "gandhi", arial, sans-serif;
  max-width: 1024px;
}

/*
 * Section headers in statblock.
 */
hr + b:nth-child(odd) {
  color: white;
  background-color: black;
  display: block;
  margin-bottom: -1em;
}

/*
 * Hide seperators.
 */
hr {
  visibility: hidden;
  display: none;
}

/*
 * Copyright footer.
 */

p:last-child {
  font-size: 75%;
}

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

/*
 * Statblock section.
 */
.statblock {
  font-family: "gandhi", arial, sans-serif;
  max-width: 1024px;
}

/*
 * Section headers in statblock.
 */
hr:nth-of-type(2n+1) + b {
  color: white;
  background-color: black;
  display: block;
  margin-bottom: -1em;
}

/*
 * Hide seperators.
 */
hr {
  visibility: hidden;
  display: none;
}

/*
 * Copyright footer.
 */

p:last-child {
  font-size: 75%;
}

Fix display of section headers

Fix display of section headers


.slider,
.slider > li {
  width: 100%;
}

.slider {

}

.slider > ul {
  list-style: none;
}

.slider,
.slider > li {
  width: 100%;
}

.slider > ul {
  list-style: none;
}

Remove .slider style. It's not used anyway


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

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

Fix scroll bars appearing. Last one

Fix scroll bars appearing. Last one


* {
    margin: 0;
    padding: 0;
}

.cell.severity > .label {
    width:100%;
    text-align:center;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

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

.cell.technician .styled_select {
    width:100%;
    margin:0;
}

#messageContainer{
    margin-top:36px;
    position:absolute;
}

.pagination {
    margin: 3px;
}

.row {
    cursor: pointer;
}

Set pointer cursor in table rows

Set pointer cursor in table rows


.table-list-builds li:hover {
  background-color: #f5f5f5 !important;
}

.subnav-builds {
  margin-bottom: 0px !important;
}

FIx margin for view all builds button

FIx margin for view all builds button


.root {
  padding: 56px 20px 168px;
}

.content {
  display: grid;
  grid-row-gap: 56px;
  max-width: 1184px;
  margin-right: auto;
  margin-left: auto;
}

.section {
  display: grid;
  grid-row-gap: 28px;
}

@media (min-width: 768px) {
  .root {
    padding: 112px 28px 224px;
  }

  .content {
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 28px;
    grid-row-gap: 112px;
  }

  .header,
  .lookingFor,
  .helpingWith,
  .footer {
    grid-column: 2 / span 1;
  }

  .section {
    grid-row-gap: 56px;
  }

  .universe {
    grid-column: 1 / span 1;
    grid-row: 1 / span 3;
  }

  .portfolio {
    grid-column: 1 / span 2;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 28px;
  }

  .portfolioHeader {
    grid-column: 2 / span 1;
  }

  .portfolioContent {
    grid-column: 1 / span 2;
  }
}

.root {
  padding: 56px 20px 168px;
}

.content {
  display: grid;
  grid-row-gap: 56px;
  max-width: 1184px;
  margin-right: auto;
  margin-left: auto;
}

.section {
  display: grid;
  grid-row-gap: 28px;
}

.footer {
  padding-top: 112px;
}

@media (min-width: 768px) {
  .root {
    padding: 112px 28px 224px;
  }

  .content {
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 28px;
    grid-row-gap: 112px;
  }

  .header,
  .lookingFor,
  .helpingWith,
  .footer {
    grid-column: 2 / span 1;
  }

  .section {
    grid-row-gap: 56px;
  }

  .universe {
    grid-column: 1 / span 1;
    grid-row: 1 / span 3;
  }

  .portfolio {
    grid-column: 1 / span 2;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 28px;
  }

  .portfolioHeader {
    grid-column: 2 / span 1;
  }

  .portfolioContent {
    grid-column: 1 / span 2;
  }
}

Fix ventures section footer top spacing

Fix ventures section footer top spacing


body {
    background: linear-gradient(to left, #101d23, #89b3c7, #101d23);
}

#timer {
    background: dimgrey;
    color: white;
}

#gitlog {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -128; /* heh heh heh */
    overflow: hidden;
    opacity: 0.2;
    color: #101d23;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    cursor: default;
}
#gitlog:before {
    content: attr(data-content);
}

.hero-unit {
    background: black;
    opacity: 0.5;
    color: white;
    padding: 10px;
}

body {
    background: linear-gradient(to left, #101d23, #89b3c7, #101d23);
}

#timer {
    background: dimgrey;
    color: white;
}

#gitlog {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -128; /* heh heh heh */
    overflow: hidden;
    opacity: 0.2;
    color: #101d23;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    cursor: default;
}
#gitlog:before {
    content: attr(data-content);
}

.hero-unit {
    background: black;
    opacity: 0.5;
    color: white;
    padding: 1%;
    margin: 5%;
}

Switch to relative padding, add margin (central content div)


.ynab-grid-cell-outflow .currency::before {
	content: "(";
}

.ynab-grid-cell-outflow .currency::after {
	content: ")";
}

.ynab-grid-cell-outflow .currency {
	color: #c00;
}

.ynab-grid-body-row.is-checked .ynab-grid-cell-outflow .currency {
	color: #ff4b2b;
	font-weight: bold;
}

Fix visibility of Emphasize Outflows when checked


/* cardano-sl explorer*/
@import "global.css";
@import "Explorer/View/common.css";
@import "Explorer/View/layout.css";
@import "Explorer/View/header.css";
@import "Explorer/View/footer.css";
@import "Explorer/View/dashboard.css";
@import "Explorer/View/address.css";
@import "Explorer/View/calculator.css";
@import "Explorer/View/transaction.css";
@import "Explorer/View/block.css";

/* normalize */
@reset-global pc;
@reset-global mobile;

/* cardano-sl explorer*/
@import "global.css";
@import "./Explorer/View/common.css";
@import "./Explorer/View/layout.css";
@import "./Explorer/View/header.css";
@import "./Explorer/View/footer.css";
@import "./Explorer/View/dashboard.css";
@import "./Explorer/View/address.css";
@import "./Explorer/View/calculator.css";
@import "./Explorer/View/transaction.css";
@import "./Explorer/View/block.css";

/* normalize */
@reset-global pc;
@reset-global mobile;

Update pathes of local @import

Update pathes of local @import


/* Readium CSS
   Scroll module

   A set of styles to scroll ePublications
   This module overrides pagination

   Repo: https://github.com/readium/readium-css */

:root {
  /* Reset html size so that the user can scroll */
  width: auto !important;
  height: auto !important;

  /* Reset columns, auto + auto = columns can’t be created */
  -webkit-columns: auto auto !important;
  -moz-columns: auto auto !important;
  columns: auto auto !important;

  --RS__currentColNumber: 0;

  /* Max-height for media in scroll mode
     This is currently a magic number, which:
     1. is bad;
     2. is not supported in Trident/EdgeHTML */
  --RS__maxMediaHeight: 100vmax;
}

/* TODO: Enforce max-width for body, no matter which media query overrides it in pagination */
body {
  max-width: var(--RS__maxLineLength) !important;
}

/* Try resetting image + figcaption */
div > img:only-of-type:not(:only-child),
p > img:only-of-type:not(:only-child),
figure img:only-of-type:not(:only-child) {
  min-height: 0;
  max-height: var(--RS__maxMediaHeight);
}

/* Scroll mode horizontal */

/* Vertical writing needs body height set */

/* Do we add a top/bottom margin for body in vertical scroll or not? */

/* Readium CSS
   Scroll module

   A set of styles to scroll ePublications
   This module overrides pagination

   Repo: https://github.com/readium/readium-css */

:root {
  /* Reset html size so that the user can scroll */
  width: auto !important;
  height: auto !important;

  /* Reset columns, auto + auto = columns can’t be created */
  -webkit-columns: auto auto !important;
  -moz-columns: auto auto !important;
  columns: auto auto !important;

  --RS__currentColNumber: 0;

  /* Max-height for media in scroll mode
     This is currently a magic number, which is bad.
     Should be the browser’s height, but based on iframe… */
  --RS__maxMediaHeight: 1500px;
}

/* TODO: Enforce max-width for body, no matter which media query overrides it in pagination */
body {
  max-width: var(--RS__maxLineLength) !important;
}

/* Try resetting image + figcaption */
div > img:only-of-type:not(:only-child),
p > img:only-of-type:not(:only-child),
figure img:only-of-type:not(:only-child) {
  min-height: 0;
  max-height: var(--RS__maxMediaHeight);
}

/* Scroll mode horizontal */

/* Vertical writing needs body height set */

/* Do we add a top/bottom margin for body in vertical scroll or not? */

Fix max-height fix in scroll

Fix max-height fix in scroll


h1 {
  font-family: Georgia;
  font-size: 48px;
}

body {
  font-size: 18px;
}

.post-title a{
  color: #000;
}

.post-title a:hover{
  color: #777;
}

.tag {
  padding: 2px;
  border-radius: 10%;
  border: 0.5px solid #333;
}

.tag a {
  color: #333;
}

.tag:hover {
  background-color: #eee;
}

Change tag color on hover

Change tag color on hover


.github-link img {
    width: 32px;
}

.npm-link img {
    height: 32px;
}

.navbar-nav > li.npm-link > a {
    padding: 0 0 0 14px;
}

.navbar-nav > li.github-link > a {
    padding: 0 0 10px 14px;
}

@media (min-width: 768px) {
    .navbar-nav > li.github-link > a {
        padding: 10px 0 5px 0;
        margin-right: 20px;
    }

    .navbar-nav > li.npm-link > a {
        padding: 11px 0 5px 0;
    }
}

.github-link img {
    width: 32px;
}

.npm-link img {
    height: 32px;
}

.navbar-nav > li.npm-link > a {
    padding: 0 0 0 14px;
}

.navbar-nav > li.github-link > a {
    padding: 0 0 10px 14px;
}

@media (min-width: 768px) {
    .navbar-nav > li.github-link > a {
        padding: 10px 0 5px 0;
        margin-right: 20px;
    }

    .navbar-nav > li.npm-link > a {
        padding: 11px 0 5px 0;
    }

    ul.navbar-right {
        margin-right: 0;
    }
}

Adjust GitHub and NPM link position

Adjust GitHub and NPM link position


.spinner svg {
	width: 40px;
	height: 40px;
}

.sp-container {
	background-color: #FFFFFF;
	border: none;
}

.sp-picker-container {
	width: 300px;
}

.item .item-content {
	background-color: transparent !important;
}

.list-inset {
  margin-top: 0px; !important;
}

.content-banner.error {
  opacity: 0.9 !important;
  background-color: red !important;
  font-weight: bold !important;
}

Improve the styling of the banner when there is an error.


.brainy__quote--container {
    overflow: hidden;
    margin-left: -2.8em;
}

.brainy__quote {
    quotes: "“" "”";
    font-size: 1.5em;
    font-weight: 300;
}

.zci--brainy_quote .zci__body {
    margin-left: -2em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 2.8em;
}

.brainy__quote:before {
    color: #D4D4D4;
    content: open-quote;
    float: left;
    font-size: 4em;
    margin-top: -0.25em;
    margin-right: 0.1em;
}

.brainy__attribution {
    color: #999;
    float: left;
    margin-top: 5px;
}

.zci--brainy_quote .zci__content.chomp {
    max-height: none;
    margin-bottom: 0;
}

.zci--brainy_quote .zci__body.zci__body--info {
    padding-left: 0.25em;
}

.is-mobile .brainy__quote--container {
    margin-left: 0px;
    margin-bottom: 0.5em;
}

.is-mobile .zci--brainy_quote .zci__more-at {
    margin-left: 40px;

}

.is-mobile .zci--brainy_quote .brainy__attribution {
    margin-left: 40px;
}

Indent quote, author and reference link to be the same vertical line.

REF: https://github.com/duckduckgo/zeroclickinfo-spice/pull/951#issuecomment-49912114


div.ticket-class1 { background-color: #fdc; border:1px; border-color: #e88; border-style: solid; color: #a22 }
div.ticket-class2 { background-color: #ffb; border:1px; border-color: #eea; border-style: solid; color: #880 }
div.ticket-class3 { background-color: #fbfbfb; border:1px; border-color: #ddd; border-style: solid; color: #444 }
div.ticket-class4 { background-color: #e7ffff; border:1px; border-color: #cee; border-style: solid; color: #099 }
div.ticket-class5 { background-color: #e7eeff; border:1px; border-color: #cde; border-style: solid; color: #469 }
div.ticket-class6 { background-color: #f0f0f0; border:1px; border-color: #ddd; border-style: solid; color: #888 }

div.ticket-class1 {
  background-color: #fdc;
  border: 1px;
  border-color: #e88;
  border-style: solid;
  color: #a22;
}

div.ticket-class2 {
  background-color: #ffb;
  border:1px;
  border-color: #eea;
  border-style: solid;
  color: #880;
}

div.ticket-class3 {
  background-color: #fbfbfb;
  border:1px;
  border-color: #ddd;
  border-style: solid;
  color: #444;
}

div.ticket-class4 {
  background-color: #e7ffff;
  border:1px;
  border-color: #cee;
  border-style: solid;
  color: #099;
}

div.ticket-class5 {
  background-color: #e7eeff;
  border:1px;
  border-color: #cde;
  border-style: solid;
  color: #469;
}

div.ticket-class6 {
  background-color: #f0f0f0;
  border:1px;
  border-color: #ddd;
  border-style: solid;
  color: #888;
}

Reformat style sheet for clarity.

Reformat style sheet for clarity.

git-svn-id: 2159781fc7c14c6bdd1f7e265daf7a25099c31e7@9670 7322e99d-02ea-0310-aa39-e9a107903beb


/*!
 *  Kwicks: Sexy Sliding Panels for jQuery - v2.1.0
 *  http://devsmash.com/projects/kwicks
 *
 *  Copyright 2013 Jeremy Martin (jmar777)
 *  Contributors: Duke Speer (Duke3D), Guillermo Guerrero (gguerrero)
 *  Released under the MIT license
 *  http://www.opensource.org/licenses/mit-license.php
 */

/*
 *  This file contains styles that are common to all kwicks instances based on
 *  jquery_kwicks_rails helpers.
 *  Note that each kwicks instance requires additional styling.
 */
.kwicks {
	display: block;
	list-style-type: none;
	list-style: none;
	position: relative;
	margin: 0;
	padding: 0;
}
.kwicks > li.kwicks-panel {
	display: block;
	overflow: hidden;
	padding: 0;
	margin: 0;
}
.kwicks.kwicks-processed > li.kwicks-panel {
	margin: 0;
	position: absolute;
}
.kwicks-horizontal > li.kwicks-panel {
	float: left;
}
.kwicks-horizontal > li.kwicks-panel:first-child {
	margin-left: 0;
}
.kwicks-vertical > li.kwicks-panel:first-child {
	margin-top: 0;
}

/*!
 *  Kwicks: Sexy Sliding Panels for jQuery - v2.2.0
 *  http://devsmash.com/projects/kwicks
 *
 *  Copyright 2013 Jeremy Martin (jmar777)
 *  Contributors: Duke Speer (Duke3D), Guillermo Guerrero (gguerrero)
 *  Released under the MIT license
 *  http://www.opensource.org/licenses/mit-license.php
 */

/*
 *  This file contains styles that are common to all kwicks instances based on
 *  jquery_kwicks_rails helpers.
 *  Note that each kwicks instance requires additional styling.
 */
.kwicks {
	display: block;
	list-style-type: none;
	list-style: none;
	position: relative;
	margin: 0;
	padding: 0;
}
.kwicks > li.kwicks-panel {
	display: block;
	overflow: hidden;
	padding: 0;
	margin: 0;
}
.kwicks.kwicks-processed > li.kwicks-panel {
	margin: 0;
	position: absolute;
}
.kwicks-horizontal > li.kwicks-panel {
	float: left;
}
.kwicks-horizontal > li.kwicks-panel:first-child {
	margin-left: 0;
}
.kwicks-vertical > li.kwicks-panel:first-child {
	margin-top: 0;
}

Update CSS file version comment.

Update CSS file version comment.


body {
    font-family: sans;
}

a {
    cursor: pointer;
}

.exhausted {
    font-style: italic;
    color: grey;
}

.video {
    display: inline-block;
    width: 320px;
    height: 180px;
    background-image: url("http://placehold.it/320x180/C40022&text=No+Thumbnail");
    margin: 0.5em;
    border: thin solid grey;
}

.video .title {
    height: 20px;
    margin: 0;
    padding: 6px 0px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.6);
}

.video .title.swift {
    color: blue;
}

.video .title.zerovm {
    color: orange;
}

.pending {
    background-color: #efefef;
}

.updated {
    font-weight: bold;
}

body {
    font-family: sans;
}

a {
    cursor: pointer;
}

.exhausted {
    font-style: italic;
    color: grey;
}

.video {
    display: inline-block;
    width: 320px;
    height: 180px;
    background-image: url("http://placehold.it/320x180/C40022&text=No+Thumbnail");
    margin: 0.5em;
    border: thin solid grey;
}

.video .title {
    height: 20px;
    margin: 0;
    padding: 6px 0px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.6);
}

.video .title.swift {
    color: blue;
}

.video .title.zerovm {
    color: #ff3300;
}

.pending {
    background-color: #efefef;
}

.updated {
    font-weight: bold;
}

Use dark red for title text for better contrast