.u-posAbsolute {
  position: absolute !important;
}

/**
 * Pins to all corners by default. But when a width and/or height are
 * provided, the element will be centered in its nearest relatively-positioned
 * ancestor.
 */

.u-posAbsoluteCenter {
  bottom: 0 !important;
  left: 0 !important;
  margin: auto !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
}

/**
 * 1. Make sure fixed elements are promoted into a new layer, for performance
 *    reasons.
 */

.u-posFixed {
  position: fixed !important;
  backface-visibility: hidden; /* 1 */
}

.u-posRelative {
  position: relative !important;
}

.u-posStatic {
  position: static !important;
}

.u-posAbsolute {
  position: absolute !important;
}

/**
 * Pins to all corners by default. But when a width and/or height are
 * provided, the element will be centered in its nearest relatively-positioned
 * ancestor.
 */

.u-posAbsoluteCenter {
  bottom: 0 !important;
  left: 0 !important;
  margin: auto !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
}

/**
 * 1. Make sure fixed elements are promoted into a new layer, for performance
 *    reasons.
 */

.u-posFixed {
  backface-visibility: hidden; /* 1 */
  position: fixed !important;
}

.u-posRelative {
  position: relative !important;
}

.u-posStatic {
  position: static !important;
}

Fix property order for Stylelint conformance


#my_characters {
	margin-top: 10px;
}

#chars_container span.avatar {
	width: 25px;
	height: 25px;
	display: inline-block;
	text-align: center;
}

#chars_container span.avatar img {
	max-width: 100%;
	max-height: 100%;
	margin-bottom: -7px;
}

#chars_container li {
	margin-top: 7px;
}

#chars_container .switch {
	float: right;
}

/* And the profile menu can use some love */
#profile_menu_top img.avatar, #profile_menu img.avatar {
	display: none;
}

Fix indentation and don't bother showing user generic avatar in the profile popup since it won't ever be anything else.


.jumbotron {
    background: url("/images/croppedcat.jpg") center no-repeat;
    text-shadow: 0 0 1em black;
    color: white;
}

* {
   font-size: 16px;
   line-height: 2;
}

.popover_styles,
.popover_styles:hover,
.popover_styles:focus,
.popover_styles:visited {
    text-decoration: none;
    color: gray;
    position: relative;
    top: 8px;
}

.jumbotron {
    background: url("/images/croppedcat.jpg") center no-repeat;
    text-shadow: 0 0 1em black;
    color: white;
}

* {
   font-size: 16px;
   line-height: 2;
}

.popover_styles,
.popover_styles:hover,
.popover_styles:focus,
.popover_styles:visited {
    text-decoration: none;
    color: gray;
    position: relative;
    top: 8px !important;
}

Make top important as to remove hover pulldown

When hovering over a glyphicon question sign on the index page the onhover pulls down the glyphicon and pings back when not


@import '_global-variables.css';
@import '_navbar.css';
@import '_buttons.css';
@import '_text.css';
@import '_footer.css';
@import '_divs.css';
@import '_pages.css';
@import '_dropzone.css';

/* The blurred background image shown on every page */
#blurred-people-background {
  width: 100%;
  height: 100%;
  z-index: -1;
  position: absolute;
  background-size: cover;
  background-position: center;
  /* The actual image URL is specified in a template block */
}

/* TODO: Move somewhere appropriate */
.profile-image {
  width: 30%;
  margin-left: 2%;
  float: right;
  max-width: 250px;
}

/* Messages
-------------------------------------------------- */
.message {
  margin: 15px 0;
  padding: 15px;
  background-color: #ddf9ff;
  border-style: solid;
  border-color: $oh-indigo-muted;
  border-width: 2px;
  border-radius: 6px;

  &.error {
    background-color: #ffeeee;
    border-color: #cc0000;
    font-weight: 800;
  }

  &.success {
    background-color: #d9ffee;
    border-color: #00aa22;
  }
}

/* Site-wide modals
-------------------------------------------------- */
#signup-modal {
  overflow: scroll;
}

Fix scrolling on signup modal

Fix scrolling on signup modal


h1
{
	margin-top: 0;
}

p:first-child
{
	margin-top: 0;
}

p:last-child
{
	margin-bottom: 0;
}

h1, h2, h3
{
	padding: 1em;
	text-align: center;
	background-color: #cccccc;
	border: .25em solid black;
	border-radius: .5em;
}

table
{
	margin: 0 auto;
}

div.column
{
	column-count: 2;
	column-gap: 2em;
	column-fill: auto;
}

div.infobox
{
	margin: 1em;
	padding: 1em;
	background-color: #ffffcc;
	border: .25em solid #aaaa00;
	border-radius: .5em;
}

td
{
	margin: 0;
	vertical-align: top;
	padding: 0 1em;
}

table
{
	margin: 0 auto;
}

td.spacer
{
	width: 2em;
}

div.column
{
	background-color: #ffaa55;
	border: 1em solid #aa5500;
	border-radius: 4em;
	padding: 2em;
	margin: 2em;
}

h1
{
	margin-top: 0;
}

p, h1, h2, h3, div.infobox {
	margin: 12pt 0;
}

*:first-child, div.infobox:first-child
{
	margin-top: 0;
}

*:last-child
{
	margin-bottom: 0;
}

h1, h2, h3
{
	padding: 1em;
	text-align: center;
	background-color: #cccccc;
	border: .25em solid black;
	border-radius: .5em;
}

table
{
	margin: 0 auto;
}

div.column
{
	column-count: 3;
	column-gap: 2em;
	column-fill: auto;
}

div.infobox
{
	break-inside: avoid;
}

div.infopane
{
	margin: 1em;
	padding: 1em;
	background-color: #ffffcc;
	border: .25em solid #aaaa00;
	border-radius: .5em;
}

td
{
	margin: 0;
	vertical-align: top;
	padding: 0 1em;
}

table
{
	margin: 0 auto;
}

td.spacer
{
	width: 2em;
}

Clean up css and enhnace it some

Clean up css and enhnace it some


.slide {
    top: 0;
    height: 100%;
    width: 100%;
    display: none;
    background: none;
}

.current-slide {
    display: block;
}

.slide {
    width: 100%;
    background: none;
}

.current-slide {
    display: block;
}

@media screen {
    .slide {
        top: 0;
        height: 100%;
        display: none;
    }

    .current-slide {
        display: block;
    }
}

@media print {
    .slide {
        page-break-after: always;
    }
}

Handle print vs screen media.

Handle print vs screen media.


/*@media screen and (min-width: 800px) {
  body:before, body:after {
      content: "";
      position: fixed;
      background: #ac4142;
      left: 0;
      right: 0;
      height: 10px;
  }

  body:before {
      top: 0;
  }

  body:after {
      bottom: 0;
  }

  body {
      border-left: 10px solid #ac4142;
      border-right: 10px solid #ac4142;
  }
}*/

.post {
}

.storyImage {
  border: 1px solid #ac4142;
  height: 100%;
  position: relative;
}

.storyItem img {
  border: 1px solid rgba(172,65,66,.5);
}

.storyCaption {
  background-color: rgba(255,149,0,.1);
  border-left: 6px solid rgba(172,65,66,.5);
  padding-left: 6px;
  text-align: left;
}

.storyItem {
  margin-bottom: 50px;
}

.headerLinks {
  border: 0px;
  float: right;
  margin: 0px;
  opacity: 0.5;
  text-align: right;
}

/*@media screen and (min-width: 800px) {
  body:before, body:after {
      content: "";
      position: fixed;
      background: #ac4142;
      left: 0;
      right: 0;
      height: 10px;
  }

  body:before {
      top: 0;
  }

  body:after {
      bottom: 0;
  }

  body {
      border-left: 10px solid #ac4142;
      border-right: 10px solid #ac4142;
  }
}*/

.post {
}

.storyImage {
  border: 1px solid #ac4142;
  height: 100%;
  position: relative;
}

.storyItem img {
  border: 1px solid rgba(172,65,66,.5);
}

.storyCaption {
  background-color: rgba(255,149,0,.1);
  border-left: 6px solid rgba(172,65,66,.5);
  padding-left: 6px;
  text-align: left;
}

.storyItem {
  margin-bottom: 50px;
}

.headerLinks {
  border: 0px;
  float: right;
  margin: 0px;
  text-align: right;
}

.headerLinks a {
  opacity: 0.5;
}

.headerLinks a:hover {
  opacity: 1.0;
}

Increase opacity on hover for header elements


/*
 * styles for the share button
 */
.window-manifest-navigation > .mirador-btn.mirador-icon-canvas-cite-share {
  color: #929191;
  margin-right: 5px;
}

.window-manifest-navigation > .mirador-btn.mirador-icon-canvas-cite-share:hover {
  color: black;
}

/*
 * styles for the modal
 */
@media screen and (min-width: 800px) {
  #canvas-link-modal .modal-dialog {
    width: 700px;
  }
}

@media screen and (max-width: 799px) {
  #canvas-link-modal .modal-dialog {
    width: 90%;
  }
}

#canvas-link-modal #canvas-link {
  box-sizing: border-box;
  height: 33px;
  padding: 0 6px;
  width: calc(100% - 45px);
}

#canvas-link-modal #copy-to-clipboard {
  height: 34px;
  width: 40px;
}

/*
 * styles for the share button
 */
.window-manifest-navigation > .mirador-btn.mirador-icon-canvas-cite-share {
  color: #929191;
  margin-right: 5px;
}

.window-manifest-navigation > .mirador-btn.mirador-icon-canvas-cite-share:hover {
  color: black;
}

/*
 * styles for the modal
 */
@media screen and (min-width: 800px) {
  #canvas-link-modal .modal-dialog {
    width: 700px;
  }
}

@media screen and (max-width: 799px) {
  #canvas-link-modal .modal-dialog {
    margin: 10px auto;
    width: 90%;
  }
}

#canvas-link-modal #canvas-link {
  box-sizing: border-box;
  height: 33px;
  padding: 0 6px;
  width: calc(100% - 45px);
}

#canvas-link-modal #copy-to-clipboard {
  height: 34px;
  width: 40px;
}

Fix display on small devices

Fix display on small devices


:host {
  font-family: 'Roboto', 'Arial', 'Helvetica', sans-serif;
}

polyfill-next-selector { content: ':host > *'; }
::content > * {
  min-width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  padding: 0 8px;
  font-size: 14px;
  color: #999;
}

polyfill-next-selector { content: ':host > .core-selected'; }
::content > .core-selected {
  background: #5599FF;
  color: white;
}

:host {
  font-family: 'Roboto', 'Arial', 'Helvetica', sans-serif;
}

polyfill-next-selector { content: '*'; }
::content > * {
  min-width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  padding: 0 8px;
  font-size: 14px;
  color: #999;
}

polyfill-next-selector { content: '.core-selected'; }
::content > .core-selected {
  background: #5599FF;
  color: white;
}

Drop :host portion of selector to fix FF issues.


/* LeechBlock options CSS style */

html {
	overflow-y: scroll;
}

body {
	background-color: #fff;
	color: #000;
}

hr {
	background-color: #888;
	color: #888;
	border: none;
	height: 1px;
}

legend {
	font-weight: bold;
}

#form-container {
	display: flex;
	justify-content: center;
	align-items: center;
}

#tabs {
	display: inline-block;
}

#promptAccessCodeText {
	font: normal 14px monospace;
	user-select: none;
	-moz-user-select: none;
}

#promptAccessCodeInput {
	font: normal 14px monospace;
}

@media (max-width: 720px) {
	.ui-widget {
		font-size: 12px;
	}
}

/* LeechBlock options CSS style */

html {
	overflow-y: scroll;
}

body {
	background-color: #fff;
	color: #000;
}

hr {
	background-color: #888;
	color: #888;
	border: none;
	height: 1px;
}

legend {
	font-weight: bold;
}

#form-container {
	display: flex;
	justify-content: center;
	align-items: center;
}

#tabs {
	display: inline-block;
}

#promptAccessCodeText {
	font: normal 14px monospace;
	user-select: none;
	-moz-user-select: none;
}

#promptAccessCodeInput {
	font: normal 14px monospace;
}

@media (max-width: 800px) {
	.ui-widget {
		font-size: 12px;
	}
}

Change max-width for reduced font

Change max-width for reduced font


/*
  TODO: Provide different styles (analog to _button.css);
*/

.sc-input {
  max-width: 500px;

  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  background: #fff;
  border: none;
  padding: 0 10px;
}

.sc-input.sm-centered {
  text-align: center;
}

/*
  TODO: Provide different styles (analoge to _button.css);
*/

.sc-input {
  max-width: 500px;
  font-size: 12px;
  height: 30px;
  border-radius: 15px;
  background: #fff;
  border: none;
  padding: 0 10px;
}

.sc-input.sm-centered {
  text-align: center;
}

Improve style for input component.

Improve style for input component.


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

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

Revert "Revert "Remove selected canvas element effect CSS.""

This reverts commit 7acfdf20da5b037cb4c2f8a58b475b003bda7486.


.modal-footer { border-top: 0px; }

#login_modal {
	top:15%
}

th.dt-center, td.dt-center { text-align: center; }

.popover-title {
    background-color: #000000;
    color: #FFFFFF;
    font-size: 20px;
    text-align:center;
}

#average {
	font-size: xx-large;
	color: #FF1A00;
        font-weight: bold;
}

#seenmovies {
	font-size: xx-large;
	color: #D966FF;
        font-weight: bold;
}

#theaters {
	font-size: large;
	color: #C3D9FF;
        font-weight: bold;
}

#home {
	font-size: large;
	color: #FF0084;
        font-weight: bold;
}

#seenmovies_small {
	color: #D966FF;
        font-weight: bold;
}

#theaters_small {
	color: #C3D9FF;
        font-weight: bold;
}

#home_small {
	color: #FF0084;
        font-weight: bold;
}

#movies {
	font-size: xx-large;
	color: #4096EE;
        font-weight: bold;
}

/* Datatable style sheet in order to
have some spaces between the page status display
and the record display filter */
div.dataTables_length,
div.dataTables_filter {
    padding-top: 1.55em;
}

Optimize datatable style in order to improve table display

These CSS parameters add some space between the page number display and the record filter list.


body {
  background-color: #64ceaa;
  color: white;
  font-family: sans-serif;
}

kbd {
  border: 1px solid white;
  margin: 2px;
  padding: 2px;
}

.header, .app, #bpm {
  text-align: center;
}

.output {
  margin: 2em;
}

input#bpm {
  font-size: 1em;
  font-weight: bold;
  padding: .5em;
}

button#toggle {
  background-color: white;
  font-size: 1em;
  font-weight: bold;
  padding: .64em;
}

#flash {
  fill: white;
  stroke-width: 10;
}

#flash.active {
  stroke: white;
}

body {
  background-color: #64ceaa;
  color: white;
  font-family: sans-serif;
}

kbd {
  border: 1px solid white;
  margin: 2px;
  padding: 2px;
}

.header, .app, #bpm {
  text-align: center;
}

.header {
  margin-top: 4em;
}

.output {
  margin: 2em;
}

input#bpm {
  font-size: 1em;
  font-weight: bold;
  padding: .5em;
}

button#toggle {
  background-color: white;
  font-size: 1em;
  font-weight: bold;
  padding: .64em;
}

#flash {
  fill: white;
  stroke-width: 10;
}

#flash.active {
  stroke: white;
}

Fix GitHub Corner overlap iPhone 5

Fix GitHub Corner overlap iPhone 5


.graphDescription section {
    display: none;
    position: absolute;
    top: 18px;
    right: 0;

    background: #eee;
    color: black;
    padding: 5px 10px 15px;
    font-size: 80%;
    width: 30%;
    min-width: 300px;
    word-wrap: break-word;
    border-radius: 2px 0px 2px 2px;
}

.graphDescription section h4 {
    font-size: 100%;
    font-weight: normal;
    margin: 15px 0 0;
}

.graphDescription section p {
    margin: 5px 0 0;
}

.graphDescription:hover {
    cursor: default;
    background: #eee;
    border-radius: 2px 2px 0px 0px;
}
.graphDescription:hover section,
.graphDescription section:hover {
    display: block;
}

.graphDescription section {
    display: none;
    z-index: 1;
    position: absolute;
    top: 18px;
    right: 0;

    background: #eee;
    color: black;
    padding: 5px 10px 15px;
    font-size: 80%;
    width: 30%;
    min-width: 300px;
    word-wrap: break-word;
    border-radius: 2px 0px 2px 2px;
}

.graphDescription section h4 {
    font-size: 100%;
    font-weight: normal;
    margin: 15px 0 0;
}

.graphDescription section p {
    margin: 5px 0 0;
}

.graphDescription:hover {
    cursor: default;
    background: #eee;
    border-radius: 2px 2px 0px 0px;
}
.graphDescription:hover section,
.graphDescription section:hover {
    display: block;
}

Fix stacking of description layer

Fix stacking of description layer


/* main.css */

/*
.container {
  background: #eee;
  overflow: auto;
}

.container .col {
    width: 27%;
    padding: 30px 3.15% 0;
    float: left;
}

/* TODO 3 - style the page

@media screen and (max-width: 48rem) {
  .container .col {
    width: 95%;
  }
}
*/

.container {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  background: #eee;
  overflow: auto;
}

.container .col {
  flex: 1;
  padding: 1rem;
}

@media screen and (max-width: 48rem) {
  .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: column;
  }
}

/* main.css */

/* Add Pregressive Enhancement CSS if Flexbox not supported */
.no-flexbox .container {
  background: #eee;
  overflow: auto;
}

.no-flexbox .container .col {
    width: 27%;
    padding: 30px 3.15% 0;
    float: left;
}

@media screen and (max-width: 48rem) {
  .no-flexbox .container .col {
    width: 95%;
  }
}
/* Add Pregressive Enhancement CSS if Flexbox not supported */

.container {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  background: #eee;
  overflow: auto;
}

.container .col {
  flex: 1;
  padding: 1rem;
}

@media screen and (max-width: 48rem) {
  .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: column;
  }
}


@import url("./explorer-tree-indent-and-guide.css");

/*
Make bottom left panel element more readable
*/
.statusbar-item.left.statusbar-entry {
    font-size: 14px;
    padding-left: 16px;
    color: white;
}

vscode: Make bottom left panel element more readable


@import 'normalize.css';

body,
.cf {
  *zoom: 1;
}
body:before,
.cf:before,
body:after,
.cf:after {
  content: '';
  display: table;
}
body:after,
.cf:after {
  clear: both;
}
*,
*:before,
*:after,
*::before,
*::after {
  *behavior: url("js/vendor/boxsizing.htc");
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  overflow-y: scroll;
  overflow-x: hidden;
}
body {
  width: 100%;
}
img,
video,
audio,
embed,
object,
input,
iframe {
  max-width: 100%;
}
.browsehappy {
  width: 100%;
  padding: 15px;
  background: #333;
  color: #fff;
  font-size: 13px;
  line-height: 21px;
  cursor: pointer;
  text-align: center;
}
.browsehappy a {
  color: #fff;
  font-weight: bold;
}
.browsehappy a:hover {
  text-decoration: none;
}

@import 'normalize.css';

body,
.cf {
  *zoom: 1;
}
body:before,
.cf:before,
body:after,
.cf:after {
  content: '';
  display: table;
}
body:after,
.cf:after {
  clear: both;
}
*,
*:before,
*:after,
*::before,
*::after {
  *behavior: url("js/vendor/boxsizing.htc");
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  overflow-y: scroll;
  overflow-x: hidden;
}
body {
  width: 100%;
  overflow-x: hidden;
}
img,
video,
audio,
embed,
object,
input,
iframe {
  max-width: 100%;
}
.browsehappy {
  width: 100%;
  padding: 15px;
  background: #333;
  color: #fff;
  font-size: 13px;
  line-height: 21px;
  cursor: pointer;
  text-align: center;
}
.browsehappy a {
  color: #fff;
  font-weight: bold;
}
.browsehappy a:hover {
  text-decoration: none;
}

Hide overflow-x on small devices

Hide overflow-x on small devices

Fixes https://github.com/corysimmons/boy/issues/9


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

 */

#upvote {
  width: 25px;
  height: 25px;

}

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

 */

#upvote {
  width: 25px;
  height: 25px;

}

Move require_tree . to the bottom

Move require_tree . to the bottom


body {
    padding-top: 60px;
}

.nav a.disabled,
.nav a.disabled:hover {
    color: #666;
}

#cloud h3 {
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
    margin-top: 40px;
}
#cloud a {
    color: #404040;
}

#feedback textarea {
    width: 40em;
}

#status td,
#status_legend td {
    text-align: center;
}
#status .scheduled,
#status_legend .scheduled {
    background: #fcc;
}
#status .fetched,
#status_legend .fetched {
    background: #fff7cc;
}
#status .fetched.scheduled,
#status_legend .fetched.scheduled {
    background: #efc;
}
#status_legend {
    width: auto;
}

body {
    padding-top: 60px;
}

.nav a.disabled,
.nav a.disabled:hover {
    color: #666;
}

h3 a:hover {
    text-decoration: none;
}

#cloud h3 {
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
    margin-top: 40px;
}
#cloud a {
    color: #404040;
}

#feedback textarea {
    width: 40em;
}

#status td,
#status_legend td {
    text-align: center;
}
#status .scheduled,
#status_legend .scheduled {
    background: #fcc;
}
#status .fetched,
#status_legend .fetched {
    background: #fff7cc;
}
#status .fetched.scheduled,
#status_legend .fetched.scheduled {
    background: #efc;
}
#status_legend {
    width: auto;
}

Remove underline on header links

Remove underline on header links


/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self

 * http://rails-assets.org
 *= require bootstrap
 *= require font-awesome

 *= require blueprint
 *= require jquery.cookiebar
 *= require adsense
 *= require blueprint_grid_r
 *= require common
 *= require pagination
 */

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require bootstrap
 *= require font-awesome
 *= require blueprint
 *= require jquery.cookiebar
 *= require adsense
 *= require blueprint_grid_r
 *= require common
 *= require pagination
 */

[assets] Remove confusing empty lines and comments

Since the requires are similar to comments, it's easier to read to only
include those kind of statements.


#category-scripts > .category-icon,
.addon[type=user-script] .icon,
#detail-view[type=user-script] #detail-icon
{
  list-style-image: url(chrome://greasemonkey/skin/icon32.png);
}

.addon.addon-view[type="user-script"] .details.button-link {
  display: none !important;
}

#greasemonkey-sort-bar {
  display: none;
}

page.greasemonkey #greasemonkey-sort-bar {
  display: -moz-box;
}

page.greasemonkey #addon-list-empty,
#user-script-list-empty
{
  display: none;
}
page.greasemonkey #user-script-list-empty {
  display: -moz-box;
}

/* Hide the 'restart now' link for user scripts. */
.greasemonkey #addon-list button[command=cmd_restartApp] {
  display: none;
}

.addon.addon-view[type="user-script"] .details.button-link {
  display: none !important;
}

Hide the "More" link in user script list since it is pretty useless.


/*

   OUTLINES

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/

.outline { outline: 1px solid; }
.outline-transparent { outline: 1px solid transparent; }
.outline-0 { outline: 0; }

@media (--breakpoint-not-small) {
  .outline-ns { outline: 1px solid; }
  .outline-transparent-ns { outline: 1px solid transparent; }
  .outline-0-ns { outline: 0; }
}

@media (--breakpoint-medium) {
  .outline-m { outline: 1px solid; }
  .outline-transparent-m { outline: 1px solid transparent; }
  .outline-0-m { outline: 0; }
}

@media (--breakpoint-medium) {
  .outline-l { outline: 1px solid; }
  .outline-transparent-l { outline: 1px solid transparent; }
  .outline-0-l { outline: 0; }
}

/*

   OUTLINES

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/

.outline { outline: 1px solid; }
.outline-transparent { outline: 1px solid transparent; }
.outline-0 { outline: 0; }

@media (--breakpoint-not-small) {
  .outline-ns { outline: 1px solid; }
  .outline-transparent-ns { outline: 1px solid transparent; }
  .outline-0-ns { outline: 0; }
}

@media (--breakpoint-medium) {
  .outline-m { outline: 1px solid; }
  .outline-transparent-m { outline: 1px solid transparent; }
  .outline-0-m { outline: 0; }
}

@media (--breakpoint-large) {
  .outline-l { outline: 1px solid; }
  .outline-transparent-l { outline: 1px solid transparent; }
  .outline-0-l { outline: 0; }
}

Fix media query reference in outlines modules


body {
  background-color: #191818;
  color: #fff;
  font-family: "Montserrat", sans-serif;
}

.container {
    width: 1240px;
}

.fade {
  color: rgba(255, 255, 255, 0.7);
}

.updated-at {
  color: rgba(0, 0, 0, 0.3);
  font-size: 12px !important;
  margin: 0;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
}

[data-widget] {
    height: 300px !important;
    width: 100%;
}

[class*="col-"] {
    padding: 5px;
}

body {
  background-color: #191818;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  overflow-wrap: break-word;
}

.container {
    width: 1240px;
}

.fade {
  color: rgba(255, 255, 255, 0.7);
}

.updated-at {
  color: rgba(0, 0, 0, 0.3);
  font-size: 12px !important;
  margin: 0;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
}

[data-widget] {
    height: 300px !important;
    width: 100%;
}

[class*="col-"] {
    padding: 5px;
}

Break words when content overflows

Break words when content overflows


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

.hint-popup-wrapper {
  width: 400px;
  line-height: 1.1;
  font-size: 12px;
}

code {
  background-color: var(--color-background-elevation-1);
  padding: 0 2px;
}

.property {
  color: var(--color-syntax-1);
}

.hint-popup-possible-fix {
  margin-top: 8px;
}

.clickable {
  color: var(--color-link);
}

.underlined {
  text-decoration: underline;
}

.unbreakable-text {
  white-space: nowrap;
}

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

.hint-popup-wrapper {
  width: 400px;
  line-height: 1.1;
  font-size: 12px;
}

code {
  background-color: var(--color-background-elevation-1);
  padding: 0 2px;
  font-size: var(--source-code-font-size);
  font-family: var(--source-code-font-family);
}

.property {
  color: var(--color-syntax-1);
}

.hint-popup-possible-fix {
  margin-top: 8px;
}

.clickable {
  color: var(--color-link);
}

.underlined {
  text-decoration: underline;
}

.unbreakable-text {
  white-space: nowrap;
}

Fix monospace font in CSS hints

Fix monospace font in CSS hints

Bug: 1178508
Change-Id: Ie2598839f8aa25e6fb03aaecf6d5e7a52545614a
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3802973
Commit-Queue: Alex Rudenko <d8d88e7d7e77f69e23d1d1432231196fb8e02a62@chromium.org>
Commit-Queue: Saba Khukhunashvili <69ce4c8dc9a81088239f5b09d013087f388978a0@google.com>
Auto-Submit: Alex Rudenko <d8d88e7d7e77f69e23d1d1432231196fb8e02a62@chromium.org>
Reviewed-by: Saba Khukhunashvili <69ce4c8dc9a81088239f5b09d013087f388978a0@google.com>


:host {
    display: block;
    width: 100px;
    height: 100px;
    margin: 10px;
    text-align: center;
    position: relative;
    background: radial-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2));
    border-radius: 50%;
    font-size: 24px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.8);
    vertical-align: middle;
    color: #fff;
}

#reflection {
    width: 25%;
    height: 25%;
    background: url("reflection.svg") top left no-repeat;
    display: block;
    position: absolute;
    top: 14%;
    left: 15%;
    background-size: contain;
}

#content {
    max-width: 90%;
    overflow: hidden;
    display: inline-block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

svg {
    position: absolute;
    top: 0;
    left: 0;
}

#svgCircle {
    transition: stroke-dashoffset 200ms;
}

:host {
    display: block;
    width: 100px;
    height: 100px;
    margin: 10px;
    position: relative;
    background: radial-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2));
    border-radius: 50%;
    font-size: 24px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.8);
    color: #fff;
}

#reflection {
    width: 25%;
    height: 25%;
    background: url("reflection.svg") top left no-repeat;
    display: block;
    position: absolute;
    top: 14%;
    left: 15%;
    background-size: contain;
}

#content {
    width: 100%;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

svg {
    position: absolute;
    top: 0;
    left: 0;
}

#svgCircle {
    transition: stroke-dashoffset 200ms;
}

Use flexbox for centering the content

Use flexbox for centering the content


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

.jp-PDFContainer iframe {
  width: 100%;
  height: 100%;
}

.jp-OutputArea .jp-PDFContainer {
  min-height: 512px;
}

/*
When drag events occur, `p-mod-override-cursor` is added to the body.
This reuses the same CSS selector logic as jp-IFrame to prevent embedded
PDFs from swallowing cursor events.
*/
body.p-mod-override-cursor .jp-PDFContainer {
  position: relative;
}

body.p-mod-override-cursor .jp-PDFContainer:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
}

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

.jp-PDFContainer iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.jp-OutputArea .jp-PDFContainer {
  min-height: 512px;
}

/*
When drag events occur, `p-mod-override-cursor` is added to the body.
This reuses the same CSS selector logic as jp-IFrame to prevent embedded
PDFs from swallowing cursor events.
*/
body.p-mod-override-cursor .jp-PDFContainer {
  position: relative;
}

body.p-mod-override-cursor .jp-PDFContainer:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
}

Fix up CSS for PDF in notebook outputs.

Fix up CSS for PDF in notebook outputs.


.react-tagsinput {
  background-color: #fff;
  border: 1px solid #ccc;
  overflow: hidden;
  padding-left: 5px;
  padding-top: 5px;
}

.react-tagsinput-tag {
  background-color: #cde69c;
  border-radius: 2px;
  border: 1px solid #a5d24a;
  color: #638421;
  display: inline-block;
  font-family: sans-serif;
  font-size: 13px;
  font-weight: 400;
  margin-bottom: 5px;
  margin-right: 5px;
  padding: 5px;
}

.react-tagsinput-remove {
  cursor: pointer;
  font-weight: bold;
}

.react-tagsinput-tag a::before {
  content: " x";
}

.react-tagsinput-input {
  background: transparent;
  border: 0;
  color: #777;
  font-family: sans-serif;
  font-size: 13px;
  font-weight: 400;
  margin-bottom: 6px;
  margin-top: 1px;
  outline: none;
  padding: 5px;
  width: 80px;
}

.react-tagsinput {
  background-color: #fff;
  border: 1px solid #ccc;
  overflow: hidden;
  padding-left: 5px;
  padding-top: 5px;
}

.react-tagsinput-tag {
  background-color: #cde69c;
  border-radius: 2px;
  border: 1px solid #a5d24a;
  color: #638421;
  display: inline-block;
  font-family: sans-serif;
  font-size: 13px;
  font-weight: 400;
  margin-bottom: 5px;
  margin-right: 5px;
  padding: 5px;
}

.react-tagsinput-remove {
  cursor: pointer;
  font-weight: bold;
}

.react-tagsinput-tag a::before {
  content: " ×";
}

.react-tagsinput-input {
  background: transparent;
  border: 0;
  color: #777;
  font-family: sans-serif;
  font-size: 13px;
  font-weight: 400;
  margin-bottom: 6px;
  margin-top: 1px;
  outline: none;
  padding: 5px;
  width: 80px;
}

Use nicer × character for cross

Use nicer × character for cross


[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none;
}

.logo {
  height: 40px;
  width: 40px;
}

.nav-buttons {
  float: right;
}

a {
  text-decoration: none;
}

li {
  list-style-type: none;
}

.movie-container {
  width: 100%;
  float: left;
}

.movie-list li {
  float: left;
}

.poster-container {
  width: 193px;
  height: 280px;
  padding: 4px;
}

.poster-container img {
  margin: 0 auto;
  height: 100%;
  width: 100%;
}

Add positioning properties for elements on main page


body {
    font-family: 'Source Sans Pro', sans-serif;
    padding: 0px 20px;
}

.title {
    font-size: 20pt;
}

.sheet {
    display: block;
}

.snippet {
    display: inline-flex;
    flex-direction: column;
    margin: 1em 0 1em 0;
    padding: 0px 20px;
}

.snippet > h2 {
    background-color: cornflowerblue;
    color: white;
    font-size: 12pt;
    margin: 0;
    padding: 0.25em 1em 0.25em 1em;
}

.snippet .match {
    display: flex;
    align-items: stretch;
    background-color: #eee;
}

/* XXX */
.selector, .element {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.snippet table {
    background-color: #eee;
}

code {
    background-color: #eee;
    color: #222;
    display: block;
    font-family: 'Source Code Pro', monospace;
    font-size: 10pt;
    white-space: pre;
}

.codeblock.headers {
    padding: 0em 1em;
}

.codeblock {
    background-color: #eee;
    padding: 1em 1em;
}

body {
    font-family: 'Source Sans Pro', sans-serif;
    padding: 0px 20px;
}

.title {
    font-size: 20pt;
}

.sheet {
    display: block;
}

.snippet {
    display: inline-flex;
    flex-direction: column;
    margin: 1em 0 1em 0;
    padding: 0px 20px;
}

.snippet > h2 {
    background-color: cornflowerblue;
    color: white;
    font-size: 12pt;
    margin: 0;
    padding: 0.25em 1em 0.25em 1em;
}

.snippet .match {
    display: flex;
    align-items: stretch;
    background-color: #eee;
}

.selector, .element {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 1em;
}

.snippet table {
    background-color: #eee;
}

code {
    background-color: #eee;
    color: #222;
    display: block;
    font-family: 'Source Code Pro', monospace;
    font-size: 10pt;
    white-space: pre;
}

.codeblock.headers {
    padding: 0em 1em;
}

.codeblock {
    background-color: #eee;
    padding: 1em 1em;
}

Fix flex styling for match example

Fix flex styling for match example


* {
  font-family: sans-serif;
}

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

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

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

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

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

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

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

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

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

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

body {
  font-family: sans-serif;
}

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

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

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

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

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

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

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

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

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

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

Change default font element to body instead of *


.toggle-button a {
    font-family: steep-icons;
}

.toggle-button.active a {
    color: #FFF;
    background: #282828;
}

#top-pane {
    position: absolute;

    left: 0;
    width: 100%;

    top: 0;
    height: 100vh;
    transition: height 0.3s;
}

#top-pane.contracted {
    height: 70vh;
}

#bottom-pane {
    position: absolute;

    left: 0;
    width: 100%;

    bottom: -30vh;
    height: 30vh;
    transition: bottom 0.3s;
}

#bottom-pane.enabled {
    bottom: 0;
}

#top-left-pane {
    position: absolute;

    left: 0;
    width: 100%;
    transition: padding-right 0.3s;

    top: 0;
    height: 100%;
	box-sizing: border-box;
}

#top-left-pane.contracted {
    padding-right: 300px;
}

#top-right-pane {
    position: absolute;
    right: -300px;
    width: 300px;
    transition: right 0.3s;

    top: 0;
    height: 100%;
	box-shadow: 0 0 7px 0 rgba(0,0,0,0.6);
}

#top-right-pane.enabled {
    right: 0;
}

Use steep icons on toggle buttons

Use steep icons on toggle buttons


/* Card */

.card img.main {
    position: absolute;
    width: calc(100% + 2rem);
    height: calc(100% + 2rem);
    max-width: calc(100% + 2rem);
    object-fit: cover;
    left: -1rem;
    top: -1rem;
    opacity: 0.2;
    filter: blur(0.5rem);
}

.card img.main ~ div {
    z-index: 1;
}

.card > .block:not(.subheader):not(.simple) {
    animation: fadein 0.3s;
    border-radius: 0.65rem;
    border: 1px solid;
    overflow: hidden;
    margin-bottom: 1rem;
    box-sizing: border-box;
    padding-left: 1rem;
}

.card.noanim > .block:not(.subheader):not(.simple) {
    animation: none;
}

.card > form.block {
    padding: 2rem;
    padding-top: 0;
    box-sizing: border-box;
}

.card.shadow > .block:not(.subheader):not(.simple) {
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.24);
    border: none;
}

/* Card */

.card img.main {
    position: absolute;
    width: calc(100% + 2rem);
    height: calc(100% + 2rem);
    max-width: calc(100% + 2rem);
    object-fit: cover;
    left: -1rem;
    top: -1rem;
    opacity: 0.1;
}

.card img.main ~ div {
    z-index: 1;
}

.card > .block:not(.subheader):not(.simple) {
    animation: fadein 0.3s;
    border-radius: 0.65rem;
    border: 1px solid;
    overflow: hidden;
    margin-bottom: 1rem;
    box-sizing: border-box;
    padding-left: 1rem;
}

.card.noanim > .block:not(.subheader):not(.simple) {
    animation: none;
}

.card > form.block {
    padding: 2rem;
    padding-top: 0;
    box-sizing: border-box;
}

.card.shadow > .block:not(.subheader):not(.simple) {
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.24);
    border: none;
}

Remove the blur filter, as it is slow

Remove the blur filter, as it is slow


/* diascope */
.diascope__frame {
	/* Frame width can be anything. */
	width: 100%;

	/* Hide slides outside the frame. */
	overflow: hidden;
}

.diascope__reel {
	/* Display the slides in a row. */
	display: flex;
}

.diascope__slide {
    display: block;
    flex: 0 0 25%;
    height: 200px;

    padding: 20px;
    font-size: 100px;
    color: white;
    border: 2px solid #fff;
    background-color: #334daf;
}

.diascope__slide:focus,
.diascope__slide:hover {
    background-color: #ee0022;
}

/* diascope */
.diascope__frame {
	/* Frame width can be anything. */
	width: 100%;

	/* Hide slides outside the frame. */
	overflow: hidden;
}

.diascope__reel {
	/* Display the slides in a row. */
	display: flex;
}

.diascope__slide {
    display: block;
    flex: 0 0 25%;
    height: 200px;

    padding: 20px;
    font-size: 100px;
    color: white;
    border: 2px solid #fff;
    background-color: #334daf;
}

.diascope__slide:not(:last-child) {
    margin-right: 20px;
}

.diascope__slide:focus,
.diascope__slide:hover {
    background-color: #ee0022;
}

Add gaps to the slides

Add gaps to the slides


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

progressmeter{
	min-width:140px;
	min-height:13px;
	margin:2px;
	border-radius:5px;
	border:2px solid;
	-moz-border-top-colors:#B26F00 #893B00;
	-moz-border-left-colors:#B26F00 #893B00;
	-moz-border-right-colors:#EED4A2 #B26F00;
	-moz-border-bottom-colors:#EED4A2 #B26F00}
.progress-bar{
	min-width:0;
	border-radius:2px;
	background-image:url(chrome://global/skin/hout-active.png);
	color:white}
progressmeter[mode="undetermined"]{
	-moz-binding:url(chrome://global/content/bindings/progressmeter.xml#progressmeter-undetermined)}

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

progressmeter{
	min-width:140px;
	min-height:13px;
	margin:2px;
	border-radius:5px;
	border:2px solid;
	-moz-border-top-colors:#B26F00 #893B00;
	-moz-border-left-colors:#B26F00 #893B00;
	-moz-border-right-colors:#EED4A2 #B26F00;
	-moz-border-bottom-colors:#EED4A2 #B26F00;
	background-image:url(chrome://global/skin/hout.png)}
.progress-bar{
	min-width:0;
	border-radius:2px;
	background-image:url(chrome://global/skin/hout-active.png);
	color:white}
progressmeter[mode="undetermined"]{
	-moz-binding:url(chrome://global/content/bindings/progressmeter.xml#progressmeter-undetermined)}

Add background to progress bars

Add background to progress bars


html, body {
	height: 100%;
	min-height: 100%;
	margin: 0;
	text-align: center;
	position: relative;
}
.slide {
	min-height:100%;
	position:relative;
}
.slide a {
	position: absolute;
	top: 50%;
	height: 10em;
	margin-top: -5em;
}
#slide1 {
	background: peachpuff;
}
#slide2 {
	background: lightcoral;
}
#slide3 {
	background: lightgray;
}
#slide4 {
	background: lightgreen;
}

html, body {
	height: 100%;
	min-height: 100%;
	margin: 0;
	text-align: center;
	position: relative;
}
.slide {
	min-height:100%;
	position:relative;
}
.slide a {
	position: absolute;
	top: 50%;
	height: 10em;
	margin-top: -5em;
	margin-left: -3em;
}
#slide1 {
	background: peachpuff;
}
#slide2 {
	background: lightcoral;
}
#slide3 {
	background: lightgray;
}
#slide4 {
	background: lightgreen;
}

Update css for centering slide text horizontally


/* TreeJS styling */

.treeview, .treeview ul {
	list-style-type: none;
	overflow: scroll;
}

.treeview li {
	text-indent: 1%;
	margin-top:0.2em;
	padding:0.15em 0 0.5em 1.5em;
	line-height: 22px;
	background-repeat:no-repeat;
	background-size: 24px 24px;
}

.treeview li.contains-items {
	background-image: url('icons/arrow-left.png');
}

.treeview li.items-expanded {
	background-image: url('icons/arrow-down.png');
}

.treeview>li:hover {
	cursor: pointer;
}

.treeview span:hover{
	background-color: rgba(246, 246, 246, 0.7);
}

/* TreeJS styling */

.treeview, .treeview ul {
	list-style-type: none;
	overflow: hidden;
}

.treeview li {
	text-indent: 1%;
	margin-top:0.2em;
	padding:0.15em 0 0.5em 1.5em;
	line-height: 22px;
	background-repeat:no-repeat;
	background-size: 24px 24px;
}

.treeview li.contains-items {
	background-image: url('icons/arrow-left.png');
}

.treeview li.items-expanded {
	background-image: url('icons/arrow-down.png');
}

.treeview>li:hover {
	cursor: pointer;
}

.treeview span:hover{
	background-color: rgba(246, 246, 246, 0.7);
}

Fix scroll on small screens

Fix scroll on small screens


/* 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");

.contentPane {
  margin: 9px 8px 5px 8px;
}

.actionButtons {
  margin: 0px 3px 6px 3px !important;
}

treechildren::-moz-tree-image(siteCol) {
  list-style-image: url(chrome://mozapps/skin/places/defaultFavicon.png);
  width: 16px;
  height: 16px;
  -moz-margin-end: 5px;
}

@media (min-resolution: 1.1dppx) {
  treechildren::-moz-tree-image(siteCol) {
    list-style-image: url(chrome://mozapps/skin/places/defaultFavicon@2x.png);
  }
}

Fix favicon sizes in password manager

Fix favicon sizes in password manager


.body {
  color: black;
}

.ng-promise-pending {
  color: orange;
}

.ng-promise-resolved {
  color: green;
}

.ng-promise-resolved.ng-promise-settled {
  color: greenyellow;
}

.ng-promise-rejected {
  color: red;
}

.ng-promise-rejected.ng-promise-settled {
  color: palevioletred;
}

/* First */
.first.ng-promise-resolved {
  color: darkgreen;
}

/* Second */
.second.ng-promise-resolved {
  color: darkgreen;
}

/* Third */
.third.ng-promise-resolved {
  color: darkgreen;
}

/* Combined */
.ng-promise-resolved-first.ng-promise-resolved-second {
  background-color: darkseagreen;
}

.ng-promise-rejected-second.ng-promise-rejected-third {
  background-color: mediumvioletred;
}

.body {
  color: black;
}

.ng-promise-pending {
  color: orange;
}

.ng-promise-resolved {
  color: lawngreen;
}

.ng-promise-resolved.ng-promise-settled {
  color: lightgreen;
}

.ng-promise-rejected {
  color: red;
}

.ng-promise-rejected.ng-promise-settled {
  color: palevioletred;
}

/* First */
.first.ng-promise-resolved {
  color: darkgreen;
}

/* Second */
.second.ng-promise-resolved {
  color: darkgreen;
}

/* Third */
.third.ng-promise-resolved {
  color: darkgreen;
}

/* Combined */
.ng-promise-resolved-first.ng-promise-resolved-second {
  background-color: darkseagreen;
}

.ng-promise-rejected-second.ng-promise-rejected-third {
  background-color: mediumvioletred;
}

Make default resolved color lawngreen

Make default resolved color lawngreen


@import url(https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap);

/* Base Styling */

:root {
  --background: #0C0D25;
  --primary: white;
  font-size: 16px;
}

/* Document Body */

body {
  background: var(--background);
  color: var(--primary);
  display: flex;
  flex-direction: column;
  font: 1rem normal 'Roboto' sans-serif;
  margin: 0.5rem 3rem;
  overflow: hidden scroll;
}

@import url(https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap);

/* Base Styling */

:root {
  --background: #0c0d25;
  --primary: white;
  font-size: 16px;
}

/* Document Body */

body {
  background: var(--background);
  color: var(--primary);
  display: flex;
  flex-direction: column;
  font: 1rem normal 'Roboto' sans-serif;
  margin: 0.5rem 3rem;
  overflow: hidden scroll;
}

Change hex to lower case

Change hex to lower case


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

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

}

Change second block technical relative stylesheet


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

.header-row-overlap {
  background: var(--color-neutral-light);
  position: absolute;
  left: 48px;
  right: 0;
  height: 48px;
  z-index: 3;
}

.num-selected-rows-number {
  font-family: var(--font-family-medium);
}

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

.header-row-overlap {
  background: var(--color-neutral-light);
  position: absolute;
  left: 48px;
  right: 0;
  height: 48px;
  overflow-x: auto;
  z-index: 3;
}

.num-selected-rows-number {
  font-family: var(--font-family-medium);
}

Make sure overlay does not overflow DataGrid


#login-container {
  margin: 0 auto;
  width: 40%;
}

.right-inner-addon {
    position: relative;
}
.right-inner-addon input {
    padding-right: 30px;
}
.right-inner-addon i {
    position: absolute;
    right: 0px;
    padding: 10px 12px;
    pointer-events: none;
}

.search-container {
  margin: 0 auto;
  width: 60%;
}

.container-fluid {
  margin-top: 10%;
}

Move container-fluid down on page

Move container-fluid down on page


.main-profile-pic {
	border: solid orange 5px;
	border-radius: 50%;

}

.main-profile-pic:hover {
	transform: scale(-5.2) rotate(360deg);
}

.main-profile-pic {
	border: solid orange 5px;
	border-radius: 50%;

}

.main-profile-pic:hover {
	transform: scale(1.2) rotate(360deg);
}

Add CSS style to profile pic

Add CSS style to profile pic


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

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

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

.mainNav {
  display: flex;
}

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

.closeButtonContainer {
  padding: 0.5em;
}

.versionSelectContainer {
  padding: 0.25em 0.5em;
  margin-top: calc(0 - var(--small-padding));
  display: flex;
  align-items: end;
}

.changeAuthorsContainer {
}

.changeAuthorsAvatarStack {
  margin-left: auto;
}

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

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

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

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

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

.mainNav {
  display: flex;
}

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

.closeButtonContainer {
  padding: 0.5em;
}

.versionSelectContainer {
  padding: 0.25em 0.5em;
  margin-top: calc(0 - var(--small-padding));
  display: flex;
  align-items: end;
}

.changeAuthorsContainer {
  margin-left: auto;
}

.changeAuthorsAvatarStack {
}

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

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

[desk-tool] Fix position of the Review Changes avatars stack


body { display: grid; }
body > header { grid-area: header; }
body > main { grid-area: main; }
body > footer { grid-area: footer; }
body > nav { grid-area: nav; }

table { width: 100%; }

@media screen and (max-width: 900px) {
  body {
    grid-template-areas:
      'header'
      'nav'
      'main'
      'footer';
  }

  body > nav > ul {
    display: flex;
    justify-content: space-between;
  }
}

@media screen and (min-width: 901px) {
  body {
    grid-template-areas:
      'nav header'
      'nav main'
      'nav footer';
    column-gap: 2ch;
    margin: auto;
    max-width: 1000px;
    font-size: 1.5em;
  }

  header, main, footer {
    max-width: 800px;
  }
}

body { display: grid; }
body > header { grid-area: header; }
body > main { grid-area: main; }
body > footer { grid-area: footer; }
body > nav { grid-area: nav; }

table { width: 100%; }

@media screen and (max-width: 900px) {
  body {
    grid-template-areas:
      'header'
      'nav'
      'main'
      'footer';
  }

  body > nav > ul {
    display: flex;
    justify-content: space-between;
  }

  pre { overflow-x: scroll; }
}

@media screen and (min-width: 901px) {
  body {
    grid-template-areas:
      'nav header'
      'nav main'
      'nav footer';
    column-gap: 2ch;
    margin: auto;
    max-width: 1000px;
    font-size: 1.5em;
  }

  header, main, footer {
    max-width: 800px;
  }
}

Add horizontal scroll to code blocks

Add horizontal scroll to code blocks


body {
    background-color: #000;
    color: #fff;

    /* Allow mouse dragging. */
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    -webkit-user-select: none;
    user-select: none;

    /* disable touch panning/zooming */
    -ms-touch-action: none;
    touch-action: none;

    /*  Allow the event to go "through" the element and target whatever is "underneath" that element instead. */
    pointer-events: none;

    /* Allow canvas to hit the edges of the browser viewport. */
    margin: 0;
}

#screen canvas {
    margin: auto;

    /* Hide the gap for font descenders. */
    display: block;

    /* disable scaling interpolation */
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
}

body {
    background-color: #000;
    color: #fff;

    /* Allow mouse dragging. */
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    -webkit-user-select: none;
    user-select: none;

    /* disable touch panning/zooming */
    -ms-touch-action: none;
    touch-action: none;

    /* Allow canvas to hit the edges of the browser viewport. */
    margin: 0;
}

#screen canvas {
    margin: auto;

    /* Hide the gap for font descenders. */
    display: block;

    /* disable scaling interpolation */
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
}

Revert "Add a new default 'none' value for pointer-events to allow the event to go "through" the element and target whatever is "underneath" that element instead"

This reverts commit 6b0708dea30fdf15a1a68d8398aa3265feec652b.


.tabbable {
    position: relative;
}
.filterable {
    position: relative;
    padding-top: 3em;
}
.filter-table {
    position: absolute;
    top: 0;
    right: 0;
}

/* copy of col-sm-4, without float:left */
#nav-search {
    width: 33%;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

footer {
    border-top: 1px solid #e5e5e5;
    background-color: #f5f5f5;
    padding-top: .75em;
    height: 3em;
    text-align: center;
}

/* based on http://stackoverflow.com/a/9530687/16390 */
footer:after {
    background-color: #f5f5f5;
    content: "";
    padding-top: 0;
    /* margin-top: .75em; /* to offset for footer's padding and avoid overlap */
    width: 100%;
    height: 100%;
    position: fixed;
    display: block;
}

footer a {
    color: #33a0d6;
}

footer a:hover {
    color: #337799;
}

.tabbable {
    position: relative;
}
.filterable {
    position: relative;
    padding-top: 3em;
}
.filter-table {
    position: absolute;
    top: 0;
    right: 0;
}

/* copy of col-sm-4, without float:left */
#nav-search {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 768px) {
    #nav-search {
        width: 33.33333333333333%;
    }
}

footer {
    border-top: 1px solid #e5e5e5;
    background-color: #f5f5f5;
    padding-top: .75em;
    height: 3em;
    text-align: center;
}

/* based on http://stackoverflow.com/a/9530687/16390 */
footer:after {
    background-color: #f5f5f5;
    content: "";
    padding-top: 0;
    /* margin-top: .75em; /* to offset for footer's padding and avoid overlap */
    width: 100%;
    height: 100%;
    position: fixed;
    display: block;
}

footer a {
    color: #33a0d6;
}

footer a:hover {
    color: #337799;
}

Fix nav-search on narrow screen

Fix nav-search on narrow screen


.calendar {
  display: flex;
  flex-direction: column;
  margin: auto;
  background-color: #fff;
  padding: 20px;
  width: 80%;
  min-width: 250px;
  height: 80%;
  max-height: 600px;
  min-height: 500px;
  box-shadow: 0px 0px 20px #a9a9a9;

  --calendar-border-radius: 10px;
  border-radius: var(--calendar-border-radius);
}

.calendar .day-names {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar .grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  box-shadow: 0px 0px 2px #a9a9a9;
  border-radius: var(--calendar-border-radius);
}

.calendar .centered-loader {
  margin: auto;
}

.calendar {
  display: flex;
  flex-direction: column;
  margin: auto;
  background-color: #fff;
  padding: 20px;
  width: 80%;
  min-width: 250px;
  height: 80%;
  max-height: 600px;
  min-height: 500px;
  box-shadow: 0px 0px 20px #a9a9a9;

  --calendar-border-radius: 10px;
  border-radius: var(--calendar-border-radius);
}

.calendar .day-names {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar .grid {
  flex: 1;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  border-radius: var(--calendar-border-radius);
}

.calendar .grid > a {
  flex-basis: calc(100%/7 - 1px);
}

.calendar .centered-loader {
  margin: auto;
}

Use flow grid for calendar container

Use flow grid for calendar container


.amp-wp-unknown-size [src] {
	/** Worst case scenario when we can't figure out dimensions for an image. **/
	/** Force the image into a box of fixed dimensions and use object-fit to scale. **/
	object-fit: contain;
}

amp-fit-text blockquote,
amp-fit-text h1,
amp-fit-text h2,
amp-fit-text h3,
amp-fit-text h4,
amp-fit-text h5,
amp-fit-text h6 {
	font-size: inherit;
}

/**
 * Override a style rule in Twenty Sixteen and Twenty Seventeen.
 * It set display:none for audio elements.
 * This selector is the same, though it uses amp-audio instead of audio.
 */
amp-audio:not([controls]) {
	display: inline-block;
	height: auto;
}

Correct amp-audio styling on Twenty Sixteen and Twenty Seventeen.

Those have a style rule for audio:not([controls]).
But the <amp-audio> elements in Audio widgets
don't have controls.
And it seems that the style sanitizer converts
the rule from audio to amp-audio.
So as Weston suggested,
override the rules.
The selector is the exact same, other than amp-audio.


.x-theme-neptune .gx-tree-radio {
    background-image: url('http://cdn.sencha.com/ext/gpl/4.2.1/resources/ext-theme-neptune/images/form/radio.png');
}
.x-theme-classic .gx-tree-radio {
    background-image: url('http://cdn.sencha.com/ext/gpl/4.2.1/resources/ext-theme-classic/images/form/radio.gif');
}
.x-theme-access .gx-tree-radio {
    background-image: url('http://cdn.sencha.com/ext/gpl/4.2.1/resources/ext-theme-access/images/form/radio.gif');
}
.x-theme-gray .gx-tree-radio {
    background-image: url('http://cdn.sencha.com/ext/gpl/4.2.1/resources/ext-theme-gray/images/form/radio.gif');
}
.gx-tree-component {
}
.gx-tree-component-off {
    display: none;
}
.gx-tree-baselayer-icon {
    background-image: url('../../resources/images/default/map.png');
}

.x-theme-neptune .gx-tree-radio {
    background-image: url('http://cdn.sencha.com/ext/gpl/4.2.1/resources/ext-theme-neptune/images/form/radio.png');
}
.x-theme-classic .gx-tree-radio {
    background-image: url('http://cdn.sencha.com/ext/gpl/4.2.1/resources/ext-theme-classic/images/form/radio.gif');
}
.x-theme-access .gx-tree-radio {
    background-image: url('http://cdn.sencha.com/ext/gpl/4.2.1/resources/ext-theme-access/images/form/radio.gif');
}
.x-theme-gray .gx-tree-radio {
    background-image: url('http://cdn.sencha.com/ext/gpl/4.2.1/resources/ext-theme-gray/images/form/radio.gif');
}
.gx-tree-radio {
    background-image: url('http://cdn.sencha.com/ext/gpl/4.2.1/resources/ext-theme-classic/images/form/radio.gif');
}
.gx-tree-component {
}
.gx-tree-component-off {
    display: none;
}
.gx-tree-baselayer-icon {
    background-image: url('../../resources/images/default/map.png');
}

Add a fallback css class

Add a fallback css class


/* vim: set ts=2 sw=2: */

/* Normalize body/html to fill whole browser window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#the_longcat_container {
  /* Use flexbox to put the longcat to the bottom center. */
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

#the_longcat {
  width: 100px;
  height: 100px;

  background: black;
}

/* vim: set ts=2 sw=2: */

/* Normalize body/html to fill whole browser window. */
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#the_longcat_container {
  height: 100%;
  width: 100%;

  /* Use flexbox to put the longcat to the bottom center. */
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

#the_longcat {
  width: 100px;
  height: 100px;

  background: black;
}

Make the longcat container full-size

Make the longcat container full-size


body {
  height: 100vh;
  width: 100vw;
  background-image: url("../img/space.jpg");
  background-size: cover;
  color: #fff;
  font-family: sans-serif;
}

h1 {
  font-family: 'Audiowide', cursive;
  text-align: center;
  font-size: 4em;
}

#board {
  height: 60%;
  width: 40%;
  margin: 0 auto;
  border: 1px solid #707070;
  background-color: transparent;
  /*padding: 5px;*/
}

.cell {
  min-height: 25%;
  min-width: 20%;
  background-color: rgba(255,255,255,0.25);
  display: inline-block;
  margin: 0.25%;
.left, .middle-left {
  border-right: 10px solid #fff;
}

.right {
  border-left: 10px solid #fff;
}

p {
  text-align: center;
  font-size: 4em;
  padding-top: 10px;
  margin: 0 auto;
}

body {
  height: 100vh;
  width: 100vw;
  background-image: url("../img/space.jpg");
  background-size: cover;
  color: #fff;
  font-family: sans-serif;
}

h1 {
  font-family: 'Audiowide', cursive;
  text-align: center;
  font-size: 4em;
}

#board {
  height: 60%;
  width: 40%;
  margin: 0 auto;
  border: 1px solid #707070;
  background-color: transparent;
  /*padding: 5px;*/
}

.cell {
  min-height: 25%;
  min-width: 20%;
  background-color: rgba(255,255,255,0.25);
  display: inline-block;
  margin: 0.25%;
#first, #second, #third {
  border-bottom: 10px solid #fff;
}

.left, .middle-left {
  border-right: 10px solid #fff;
}

.right {
  border-left: 10px solid #fff;
}

p {
  text-align: center;
  font-size: 4em;
  padding-top: 10px;
  margin: 0 auto;
}

Add bottom border to first second and third divs


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

:root {
    box-sizing: border-box;
    font-size: 16px;
    font-family: Roboto, sans-serif;
    color: #212121;
    background: #f5f5f5;
}

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

a:not([type="button"]) {
    color: #222;
    border-bottom: 1px solid #222;
    text-decoration: none;

    &:hover,
    &:focus {
        color: #444;
        border-color: transparent;
        text-decoration: none;
        transition: all .2s ease;
    }
}

@import 'normalize.css';

:root {
    box-sizing: border-box;
    font-size: 16px;
    font-family: "Roboto", sans-serif;
    color: #212121;
    background: #f5f5f5;
}

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

a:not([type="button"]) {
    color: #222;
    border-bottom: 1px solid #222;
    text-decoration: none;

    &:hover,
    &:focus {
        color: #444;
        border-color: transparent;
        text-decoration: none;
        transition: all .2s ease;
    }
}

Remove Google Fonts import in favor of Font Magician PostCSS plugin


body {
    background-color: black;
}
div.editor textarea {
    background-color: #333;
    color: #ddd;
}
div.source textarea {
    background-color: #322;
    color: #aaf;
}
div.preview {
    background-color: #111;
    color: #3a3;
}
div.source {
    background-color: #322;
}
div.help {
    color: #666;
    border-left-color: #111;
}

/* Syntax character table */
table.symbols td {
    border-bottom-color: #666;
}
table.symbols tr:first-child > td {
    border-top-color: #666;
}
table.symbols td:first-child {
    border-right-color: #666;
}

/* Theme icons */
.theme-icons .icon {
    border-color: white;
}

body {
    background: url(http://subtlepatterns.com/patterns/zwartevilt.png) black;
}
div.editor textarea {
    background-color: #333;
    color: #ddd;
}
div.source textarea {
    background-color: #322;
    color: #aaf;
}
div.preview {
    background-color: #111;
    color: #3a3;
}
div.source {
    background-color: #322;
}
div.help {
    color: #666;
    border-left-color: #111;
}

/* Syntax character table */
table.symbols td {
    border-bottom-color: #666;
}
table.symbols tr:first-child > td {
    border-top-color: #666;
}
table.symbols td:first-child {
    border-right-color: #666;
}

/* Theme icons */
.theme-icons .icon {
    border-color: white;
}

Add nice backdrop from subtlepatterns.com


body {
  margin-top: 2em;
  margin-bottom: 2em;
}
.container-full {
  padding-top: 10%;
  background-color: transparent;
}

h1,
h2 {
  text-align: center;
}

Add Bootstrap and showing module info

Add Bootstrap and showing module info


body, html {
    background-image: url(images/arch-linux-minimalistic-rainbow.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    margin: 0;
}

a:link {
    color: white;
}

a:visited {
    color: lightgrey;
}

.element {
    text-decoration: none;
    color: black;
    background-color: lightgrey;
    padding: 10px
}

.element:hover {
    background-color: grey;
}

.active {
    background-color: grey;
}

img {
    text-align: center;
}

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

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

.icon-container a {
    text-decoration: none;
}

.icon-container img:hover {
    opacity: 0.5;
}

.navbar {
    padding: 18px;
}

.navbar a:link {
    color: black
}

.navbar a:visited {
    color: black
}

.content {
    padding: 10px 18px;
    color: white;
}

table, th, td {
    border: 1px solid white;
    text-align: center;
}

body, html {
    background-image: url(images/arch-linux-minimalistic-rainbow.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}

a:link {
    color: white;
}

a:visited {
    color: lightgrey;
}

.element {
    text-decoration: none;
    color: black;
    background-color: lightgrey;
    padding: 10px
}

.element:hover {
    background-color: grey;
}

.active {
    background-color: grey;
}

img {
    text-align: center;
}

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

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

.icon-container a {
    text-decoration: none;
}

.icon-container img:hover {
    opacity: 0.5;
}

.navbar {
    padding: 18px;
}

.navbar a:link {
    color: black
}

.navbar a:visited {
    color: black
}

.content {
    padding: 10px 18px;
    color: white;
}

table, th, td {
    border: 1px solid white;
    text-align: center;
}

Revert "Add 0 margin to body, html"

Revert "Add 0 margin to body, html"

This reverts commit d55cf639deb71fa095c1880d7ce0bc5dc62bc1ee.


@import url('https://fonts.googleapis.com/css?family=Cabin|Open+Sans:400,400i,700');

html {
    color: #c7c7c7;
    background: #323232;
    font-family: "Open Sans";
    font-size: 0.9em;
}

body {
}

p {
}

h1 {
    color: #dfeb29;
    font-family: Cabin;
    font-variant: small-caps;
}

h2 {
    color: #35a3d9;
    font-family: Cabin;
    font-variant: small-caps;
}

h3 {
    color: #35a3d9;
    font-family: Cabin;
    font-variant: small-caps;
}

.tc-site-title {
}

blockquote p {
    color: #f8d589;
}

blockquote {
    border: 1px solid #f8d589;
    border-left: none;
    border-right: none;
}

b, strong {
    color: white;
}

blockquote strong {
    color: #f8d589;
}

a.tc-tiddlylink-resolves {
    color: #dfeb29;
    text-decoration: none;
}

a.tc-tiddlylink-resolves:hover {
    text-decoration: underline;
}

a.tc-tiddlylink-missing {
    color: #f02311;
    text-decoration: none;
}

a.tc-tiddlylink-missing:hover {
    text-decoration: underline;
}

table {
    margin: auto;
    border: none;
    padding: 2px 12px;
    border-collapse: collapse;
}

table thead tr td, table th {
    background: black;
    font-variant: small-caps;
}

table tr {

}

table tr:nth-child(even) {
    //background: rgba(85, 53, 163, 0.8);
    background: rgba(255, 255, 255, 0.2);
}

table tr td {
    border: none;
    padding: 4px 12px;
}

div.tc-tiddler-frame.tc-tiddler-view-frame.tc-tiddler-exists {
    background: rgba(0, 0, 0, 0.8);
    box-shadow: 0px 0px 12px black;
}

body.tc-body {
    background: url(http://majorspoilers.com/wp-content/uploads/2017/06/StarfinderPoster.jpg) no-repeat top center;
    background-size: 100% auto;
}

Add style to the example

Add style to the example


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

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

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

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

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

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

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

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

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

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

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

Add bg in body tag

Add bg in body tag


div.s3contents {
    border: 1px dashed #ccc;
    padding: 4px;
}

div.s3crumbs {
    padding: 4px;
    background-color: #eee;
    border-bottom: 1px dashed black;
    margin-bottom: 8px;
}

div.s3crumbs > span {
    margin-right: 6px;
}

div.s3crumbs > button {
    margin-left: 6px;
}

div.s3entry {
    padding: 4px;
    background-color: #eee;
    margin-top: 2px;
    margin-bottom: 2px;
}

div.s3entry:hover {
    background-color: #ddd;
}

div.s3entry > span {
    margin-right: 6px;
}

div.s3entry > button {
    margin-left: 6px;
}

form.s3form {
    padding: 4px;
    background-color: #eee;
    border-top: 1px dashed black;
    margin-top: 8px;
}

form.s3form input[type=text] {
    padding: 2px 4px;
    line-height: 1.0;
    height: 22px;
}

div.s3contents {
    border: 1px dashed #ccc;
    padding: 4px;
}

div.s3crumbs {
    padding: 4px;
    background-color: #eee;
    border-bottom: 1px dashed black;
    margin-bottom: 8px;
    font-weight: bold;
}

div.s3crumbs > span {
    margin-right: 6px;
}

div.s3crumbs > button {
    margin-left: 6px;
}

div.s3entry {
    padding: 4px;
    background-color: #eee;
    margin-top: 2px;
    margin-bottom: 2px;
}

div.s3entry:hover {
    background-color: #ddd;
}

div.s3entry > span {
    margin-right: 6px;
}

div.s3entry > button {
    margin-left: 6px;
}

form.s3form {
    padding: 4px;
    background-color: #eee;
    border-top: 1px dashed black;
    margin-top: 8px;
}

form.s3form input[type=text] {
    padding: 2px 4px;
    line-height: 1.0;
    height: 22px;
}

Make the breadcrumbs bold for emphasis.

Make the breadcrumbs bold for emphasis.


/* This is the fullscreen template css */
html, body {
	height: 100%;
	margin: 0;
}

.region#top {
	position: absolute;
	z-index: 2000;
	background: url('top_bg.png') 0 100% repeat-x;
	width: 100%;
}

.region#content {
	height: 100%;
}

.olControlPanZoomBar {
    top: 40px!important
}

Move panzoombar down a bit

Move panzoombar down a bit


body {
    background: rgb(215, 215, 215);
}

#page {
    position: relative;
    width: 1050px;
    margin: 0pt auto;
    background: rgb(255, 255, 255)
}

#main h1 {
    border-top: 1px solid rgb(233, 233, 233);
    margin: 20px;
}

table {
    width: 80%;
    text-align: left;
    margin: 20px;
    margin-left: 40px;
}

tr.odd {
    background: rgb(232, 237, 255);
}

/*tr:hover {
    background: rgb(200, 200, 200);
}*/

Add a default and really simple css file


.webshell {
  height: 100vh;
  background-color: #000;
  color: #fff;
  font-family: monospace;
  font-size: 18px;
}

.prompt {
  position: relative;
  float: left;
  padding-right: 1em;
  margin-top: 1em;
}

.input {
  outline: none;
  clear: left;
}

.prompt:after {
  position: absolute;
  top: 0;
  right: 0.1em;
  content: '$';
  color: #777;
  color: #c0253e;
}

.response:empty {
  min-height: 0;
}

.list {
  column-width: 10em;
  column-gap: 3em;
}

.list-item {
  word-wrap: break-word;
}

.text { color: #fff }
.text-green { color: #65c858 }
.text-yellow { color: #cac43b }
.text-lightgray { color: #999 }

.webshell {
  height: 100vh;
  background-color: #000;
  color: #fff;
  font-family: monospace;
  font-size: 18px;
  line-height: 1.2;
}

.prompt {
  position: relative;
  float: left;
  padding-right: 1em;
  margin-top: 1em;
}

.input {
  outline: none;
  clear: left;
}

.prompt:after {
  position: absolute;
  top: 0;
  right: 0.1em;
  content: '$';
  color: #777;
  color: #c0253e;
}

.response:empty {
  min-height: 0;
}

.list {
  column-width: 10em;
  column-gap: 3em;
}

.list-item {
  word-wrap: break-word;
}

.text { color: #fff }
.text-green { color: #65c858 }
.text-yellow { color: #cac43b }
.text-lightgray { color: #999 }

@media (min-width: 30em) {
  .input {
    clear: none;
  }

  .input:empty {
    display: inline-block; /* firefox bug */
  }

  .prompt {
    margin-top: inherit;
    margin-right: 0.2em;
  }

  .response {
    min-height: inherit;
  }
}

Optimize layout for wide viewport

Optimize layout for wide viewport


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

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

.syntax-text-area {
    -fx-font: 16px 'Consolas';
}

.syntax-text-area .gutter .note {
    -fx-pref-width: 16px;
    -fx-cursor: HAND;
}

.syntax-text-area .gutter .error {
    -fx-graphic: url("errorLink.png");
}

.syntax-text-area .lineno .text {
    -fx-font-style: normal;
}

.syntax-text-area .context-menu .text {
    -fx-fill: #202020;
    -fx-font: 12px 'Consolas';
}

.styled-text-area .caret {
    -fx-stroke-width: 2px;
}

.code-area-popup {
    -fx-font: 14px 'Consolas';

    -fx-background-insets: 0;
    -fx-focus-color: -fx-control-inner-background;
    -fx-faint-focus-color: -fx-control-inner-background;
}

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

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

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

.syntax-text-area {
    -fx-font: 16px 'Consolas';
}

.syntax-text-area .gutter .note {
    -fx-pref-width: 16px;
    -fx-cursor: HAND;
}

.syntax-text-area .gutter .error {
    -fx-graphic: url("errorLink.png");
}

.syntax-text-area .lineno .text {
    -fx-font-style: normal;
}

.syntax-text-area .context-menu .text {
    -fx-fill: #202020;
    -fx-font: 12px 'Consolas';
}

.styled-text-area .caret {
    -fx-stroke-width: 2px;
}

.code-area-popup {
    -fx-font: 14px 'Consolas';

    -fx-background-insets: 0;
    -fx-focus-color: -fx-control-inner-background;
    -fx-faint-focus-color: -fx-control-inner-background;
}

Add italic font for code editor.

Add italic font for code editor.


body {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    background-color: #1E1E7F;
    color: #fff;
    line-height: 1.2;
    margin: 0;
}

html, body {
    height: 100%;
}

#header {
    background-color: #0E163D;
    padding: 1px 20px;
}

a:link, a:visited {
    color: #fff;
}

body {
    font-family: "Century Gothic", "Calibri", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    background-color: #1E1E7F;
    color: #fff;
    line-height: 1.2;
    margin: 0;
}

html, body {
    height: 100%;
}

#header {
    background-color: #0E163D;
    padding: 1px 20px;
}

a:link, a:visited {
    color: #fff;
}

Add Century Gothic and Calibri to top of font list


.content {
    padding: 1em;
}

p {
    font-family: serif;
    text-align: left;
}

.footer hr {
    margin: 0;
    padding: 0;
}

.footer .content{
    margin: 0;
    padding:  0.5em 1em 0 1em;
}

.social {
    display: inline;
    text-align: right;
}

a.btn {
    font-family: sans-serif;
}

.well {
    background-color: #333;
    background-image: none;
}

/*.post {
    padding: 2em;
}*/

/*.panel-heading {
    background-color: #666 !important;
    background-image: none;
}

a.panel-title {
    color: blue;
    text-decoration: none;
}

a.panel-title:hover {
    color: green;
    text-decoration: none;
}

a.panel-title:visited {
    color: purple;
    text-decoration: none;
}*/

.navbar-brand {
    /* override bootstrap padding: 15px 15px */
    padding: 0px 15px;
}

.navbar-brand img {
    max-height: 50px;
}

.content {
    padding: 1em;
}

p {
    font-family: serif;
    text-align: left;
    font-size: 13.5pt;
}

.footer hr {
    margin: 0;
    padding: 0;
}

.footer .content{
    margin: 0;
    padding:  0.5em 1em 0 1em;
}

.social {
    display: inline;
    text-align: right;
}

a.btn {
    font-family: sans-serif;
}

.well {
    background-color: #333;
    background-image: none;
}

/*.post {
    padding: 2em;
}*/

/*.panel-heading {
    background-color: #666 !important;
    background-image: none;
}

a.panel-title {
    color: blue;
    text-decoration: none;
}

a.panel-title:hover {
    color: green;
    text-decoration: none;
}

a.panel-title:visited {
    color: purple;
    text-decoration: none;
}*/

.navbar-brand {
    /* override bootstrap padding: 15px 15px */
    padding: 0px 15px;
}

.navbar-brand img {
    max-height: 50px;
}

Use larger font-size for paragraph text

Use larger font-size for paragraph text


.form-horizontal .control-label {
	width: 40px;
}

.form-horizontal .controls {
	margin-left: 60px;
}

.btn-toolbar {
	display: inline-block;
	margin: 0;
}

.form-horizontal .controls {
	margin-left: 0;
}

.btn-toolbar {
	display: inline-block;
	margin: 0;
}

Remove left margin on .controls

Remove left margin on .controls


@define-color boxes_bg_color shade (@theme_bg_color, 0.5);
@define-color boxes_sidebar_bg_color mix (@theme_bg_color, @boxes_bg_color, 0.5);
@define-color boxes_selected_color #5f8dd3;

#TopbarLabel {
    font-size: 14;
    font-weight: bold;
}

#CollectionLabel {
    font-size: 11;
    font-weight: bold;
    background-color: red;
}

.view {
    background-color: @theme_bg_color;
}

.boxes-bg {
    background-color: @boxes_bg_color;
}

.boxes-sidebar-bg {
    background-color: @boxes_sidebar_bg_color;
}

.boxes-step-label {
    color: gray;
    font-size: 11;
    font-weight: bold;
}

.boxes-source-label {
    font-size: 11;
    font-weight: bold;
}

.boxes-source-nb {
    border-radius: 15;
}

.boxes-selected {
    background-color: @boxes_selected_color;
}

.boxes-continue {
    background-image: -gtk-gradient (linear,
                                     left top, left bottom,
                                     from (@boxes_selected_color),
                                     to (darker (@boxes_selected_color)));
}
.boxes-continue:insensitive {
    background-image: none;
}

Fix Continue style when insensitive

Fix Continue style when insensitive


.MainFooter-footer {
  background-color: #222629;
  bottom: 0;
  color: white;
  font-weight: bold;
  padding: 10px;
  position: fixed;
  text-align: center;
  width: 100%;
}

.SectionBody {
  padding-bottom: 100px;
}

.MainFooter-footer-link a {
  color: white;
  text-transform: uppercase;
}

.MainFooter-footer-link::after {
  content: " . ";
}
.MainFooter-footer-link:last-of-type::after {
  content: "";
}

.MainFooter-footer {
  background-color: #222629;
  bottom: 0;
  color: white;
  font-weight: bold;
  padding: 10px;
  position: fixed;
  text-align: center;
  width: 100%;
}

.SectionBody {
  padding-bottom: 100px;
}

.MainFooter-footer-link a {
  color: white;
  text-transform: uppercase;
}

.MainFooter-footer-link::after {
  padding-right: 30px;
}
.MainFooter-footer-link:last-of-type::after {
  content: "";
}

Change footer separator to be spaces instead of periods


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

body {
    min-width: 850px;
    font-family: sans-serif;
    font-size: 80%;
    line-height: 170%;
}

h1 {
    padding: 10px 0;
}

#wrap {
    margin: 0 auto;
    width: 800px;
}

#header {
    height: 80px;
}

#header h1 {
    float: left;
    color: #c00;
    margin: 20px 10px;
    padding: 15px 5px;
}

#logo {
    text-align:center;
    float: right;
    width: 130px;
    margin: 10px;
    padding: 5px;
}

#main {
    clear: both;
    float: left;
    width: 530px;
    margin: 0 10px;
    padding: 5px;
}

#menu {
    float: right;
}

#footer {
    margin-top: 3em;
    text-align: center;
    color: #666;
    font-size: 80%;
    clear:both;
}

.hidden {
    visibility:none;
    display:none;
}

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

body {
    min-width: 850px;
    font-family: sans-serif;
    font-size: 80%;
    line-height: 170%;
}

h1 {
    padding: 10px 0;
}

#wrap {
    margin: 0 auto;
    width: 800px;
}

#header {
    height: 80px;
}

#header h1 {
    float: left;
    color: #c00;
    margin: 20px 10px;
    padding: 15px 5px;
}

#logo {
    text-align:center;
    float: right;
    width: 130px;
    margin: 10px;
    padding: 5px;
}

#main {
    clear: both;
    float: left;
    width: 530px;
    margin: 0 10px;
    padding: 5px;
}

#menu {
    float: right;
    padding-top: 8em;
}

#footer {
    margin-top: 3em;
    text-align: center;
    color: #666;
    font-size: 80%;
    clear:both;
}

.hidden {
    visibility:none;
    display:none;
}

Revert "jsdoc menu not css forced down; prettier in ringojs.org context"

This reverts commit 33ca9e40306a011cb16d9240478d60ab3b7980b8.


.ol-popup {
  position: absolute;
  background-color: white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -50px;
  min-width: 280px;
}
.ol-popup:after, .ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}
.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}
.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}
.ol-popup-closer:after {
  content: "✖";
}

.ol-popup {
  position: absolute;
  background-color: white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -50px;
  min-width: 280px;
}
.ol-popup:after, .ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}
.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}
.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}
.ol-popup-closer:after {
  content: "✖";
}

Use boxe-shadow css instead of filter

Use boxe-shadow css instead of filter


.root {
  align-items: center;
  background: #2b2723 url("./alchemy.jpg") no-repeat center bottom;
  background-size: cover;
  display: flex;
  flex-direction: column;
  height: 27.5rem;
}

.logo {
  margin-top: 5rem; /* Navigation/Social height */
}

.title {
  color: #fff;
  font-size: 36px;
}

.tagline {
  color: #fff;
  font-size: 32px;
  line-height: 28px;
  margin-top: 1rem;
  padding: 0 1rem;
  text-align: center;
}

.root {
  align-items: center;
  background: #2b2723 url("./alchemy.jpg") no-repeat 50% 75%;
  background-size: cover;
  display: flex;
  flex-direction: column;
  height: 24rem;
}

.logo {
  margin-top: 5rem; /* Navigation/Social height */
}

.title {
  color: #fff;
  font-family: sans-serif;
  font-size: 36px;
  font-weight: 500;
}

.tagline {
  color: color(#fff a(70%));
  font-family: sans-serif;
  font-size: 32px;
  font-weight: 300;
  line-height: 28px;
  margin-top: 1rem;
  padding: 0 1rem;
  text-align: center;
}

:global(.fira-sans-loaded) .title,
:global(.fira-sans-loaded) .tagline {
  font-family: "Fira Sans", sans-serif;
}

Use Fira Sans for Hero as well.

Use Fira Sans for Hero as well.


p {
    color: #111;
}

a {
    color: inherit;
}

#footer {
    text-align: right;
    font-size: 10px;
    color: grey;
    position:relative;
    bottom: -50px;
}

#header {
    margin-top: 3%;
}

#content {
    margin-top: 4%;
}

.inverted {
    filter: invert(100%);
}

/* Make it so columns inside the nine columns div have width relative to it */
#main-links {
    position: relative;
}

/* Put the headings a bit to the left of the links */
#main-links h4 {
    margin-left: -2%;
}

/* Make sure overflow doesn't obfuscate other text */
#main-links h5, #main-links p {
    overflow: hidden;
}

/* Override Skeleton's default of setting page width to 80%, wasting precious screen space on smaller devices */
div.container {
    width: 95%;
    margin: auto;
    padding: 0;
}

p {
    color: #111;
}

a {
    color: inherit;
}

#footer {
    text-align: right;
    font-size: 10px;
    color: grey;
    margin-top: 50px;
}

#header {
    margin-top: 3%;
}

#content {
    margin-top: 4%;
}

.inverted {
    filter: invert(100%);
}

/* Make it so columns inside the nine columns div have width relative to it */
#main-links {
    position: relative;
}

/* Put the headings a bit to the left of the links */
#main-links h4 {
    margin-left: -2%;
}

/* Make sure overflow doesn't obfuscate other text */
#main-links h5, #main-links p {
    overflow: hidden;
}

/* Override Skeleton's default of setting page width to 80%, wasting precious screen space on smaller devices */
div.container {
    width: 95%;
    margin: auto;
    padding: 0;
}

Simplify CSS rules for footer

Simplify CSS rules for footer


p {
    color: #111;
}

a {
    color: inherit;
}

#footer {
    text-align: right;
    font-size: 10px;
    color: grey;
    position:relative;
    bottom: -50px;
}

#header {
    margin-top: 5%;
}

#content {
    margin-top: 7%;
}

.inverted {
    filter: invert(100%);
}

/* Make it so columns inside the nine columns div have width relative to it */
#main-links {
    position: relative;
}

/* Put the headings a bit to the left of the links */
#main-links h4 {
    margin-left: -2%;
}

/* Make sure overflow doesn't obfuscate other text */
#main-links h5, #main-links p {
    overflow: hidden;
}

/* Override Skeleton's default of setting page width to 80%, wasting precious screen space on smaller devices */
div.container {
    width: 95%;
    margin: auto;
    padding: 0;
}

p {
    color: #111;
}

a {
    color: inherit;
}

#footer {
    text-align: right;
    font-size: 10px;
    color: grey;
    position:relative;
    bottom: -50px;
}

#header {
    margin-top: 3%;
}

#content {
    margin-top: 4%;
}

.inverted {
    filter: invert(100%);
}

/* Make it so columns inside the nine columns div have width relative to it */
#main-links {
    position: relative;
}

/* Put the headings a bit to the left of the links */
#main-links h4 {
    margin-left: -2%;
}

/* Make sure overflow doesn't obfuscate other text */
#main-links h5, #main-links p {
    overflow: hidden;
}

/* Override Skeleton's default of setting page width to 80%, wasting precious screen space on smaller devices */
div.container {
    width: 95%;
    margin: auto;
    padding: 0;
}

Use less vertical space for whitespace

Use less vertical space for whitespace

Done to reduce the amount of scrolling necessary.


/* override table width restrictions */
.wy-table-responsive table td, .wy-table-responsive table th {
    white-space: normal;
}

.wy-table-responsive {
    margin-bottom: 24px;
    max-width: 100%;
    overflow: visible;
}

.wy-plain-list-disc, .rst-content .section ul, .rst-content .toctree-wrapper ul, article ul {
    margin-bottom: 0px;
}

.wy-table, .rst-content table.docutils, .rst-content table.field-list {
    margin-bottom: 0px;
}

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

/* Make embedded Jupyter notebooks look better */
div#notebook-container.container {
    padding: 0px;
    width: auto;
    box-shadow: none;
}

Make Jupyter notebooks look better in documentation


/* Let <a> elements have a pointer independ of having href attribute or not */
.nav, .pagination, .carousel, .panel-title a {
    cursor: pointer;
}

/* Don't show error messages before the validation is done */
.form-group .help-block {
    display: none;
}
.form-group.has-error .help-block {
    display: block;
}

/* Let the header and the footer enough place */
body {
    margin-top: 50px;
    margin-bottom: 50px;
}

/* Make the footer sticky at the bottom of the page */
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}
footer .navbar {
    margin-bottom: 0px;
}

/*
 * AngularJS Bootstrap
 */

/* Let <a> elements have a pointer independ of having href attribute or not */
.nav, .pagination, .carousel, .panel-title a {
    cursor: pointer;
}

/*
 * AngularJS Bootstrap Show Errors
 */

/* Don't show error messages before the validation is done */
.form-group .help-block {
    display: none;
}
.form-group.has-error .help-block {
    display: block;
}

/*
 * Sticky Footer
 */

/* Let the header and the footer enough place */
body {
    margin-top: 50px;
    margin-bottom: 50px;
}

/* Make the footer sticky at the bottom of the page */
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}
footer .navbar {
    margin-bottom: 0px;
}

Add hints for the different CSS sections


/*
 * Global add-ons
 */

.sub-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

/*
 * Sidebar
 */

/* Hide for mobile, show later */
.sidebar {
  display: none;
}
@media (min-width: 768px) {
  .sidebar {
    position: fixed;
    top: 51px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
  }
}

/* Sidebar navigation */
.nav-sidebar {
  margin-right: -21px; /* 20px padding + 1px border */
  margin-bottom: 20px;
  margin-left: -20px;
}
.nav-sidebar > li > a {
  padding-right: 20px;
  padding-left: 20px;
}
.nav-sidebar > .active > a {
  color: #fff;
  background-color: #428bca;
}

/*
 * Main content
 */

.main {
  padding: 20px;
}
@media (min-width: 768px) {
  .main {
    padding-right: 40px;
    padding-left: 40px;
  }
}
.main .page-header {
  margin-top: 0;
}

Add main class to Admin CSS

Add main class to Admin CSS


Fix ladder button font color, optimize titles


* { margin: 0; padding: 0; font-family: "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-size: 100%; font-weight: normal; }
body { margin: 10px; background-color: #ffffff; color: #000000; letter-spacing: 0.08em; line-height: 1.4em; font-size: 90%; }

p { margin-bottom: 15px; }
a { color: #48ba32; }
h1 { font-size: 160%; }
h2 { margin: 15px 0; font-size: 150%; }
h2.breaker { padding-bottom: 15px; border-bottom: 1px dotted #a0a0a0; }
h3 { margin: 5px 0; font-size: 120%; }

pre { padding: 4px; border: 1px solid #808080; margin-bottom: 15px; }
pre, code { font-family: Monaco, "Courier New", sans-serif; background-color: #000000; color: #00ff00; font-size: 90%; }

ul { margin: 15px 30px; }
li { margin: 5px 0; }
* html ul { padding-left: 30px; }

b, strong { font-weight: bold; }

Fix bold in TinyMCE editor

Fix bold in TinyMCE editor


table.workflows {
  width: 100%;
}

text {
  font-weight: 300;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
  font-size: 14px;
}

.node {
  cursor: pointer;
}

.node rect {
  stroke-width: 1.5px;
  stroke: #333;
  fill: #fff;
}

.node.start rect {
  fill: #f77;
}

.node.failed rect {
  stroke: #f77;
}

.node.end rect {
  fill: #7f7;
}

.node.status-finished.status-failed rect {
  stroke: red;
  fill: red;
}

.node.status-finished.status-failed text {
  fill: white;
}

.node.status-finished rect {
  stroke: #7f7;
  fill: #7f7;
}

.node.status-running rect {
  stroke: yellow;
  fill: yellow;
}

.edgeLabel rect {
  fill: #fff;
}

.edgePath path {
  stroke: #333;
  stroke-width: 1.5px;
  fill: none;
}

ul.logs {
  border: 1px solid;
  height: 500px;
  overflow: scroll;
  list-style-type: none;
  background: black;
}

ul.logs li{
  color: wheat;
  font-family: monospace;
}

table.workflows {
  width: 100%;
}

text {
  font-weight: 300;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
  font-size: 14px;
}

.node {
  cursor: pointer;
}

.node rect {
  stroke-width: 1.5px;
  stroke: #333;
  fill: #fff;
}

.node.start rect {
  fill: #f77;
}

.node.failed rect {
  stroke: #f77;
}

.node.end rect {
  fill: #7f7;
}

.node.status-finished.status-failed rect {
  stroke: red;
  fill: red;
}

.node.status-finished.status-failed text {
  fill: white;
}

.node.status-finished rect {
  stroke: #7f7;
  fill: #7f7;
}

.node.status-running rect {
  stroke: yellow;
  fill: yellow;
}

.edgeLabel rect {
  fill: #fff;
}

.edgePath path {
  stroke: #333;
  stroke-width: 1.5px;
  fill: none;
}

ul.logs {
  border: 1px solid;
  height: 500px;
  overflow: scroll;
  list-style-type: none;
  background: black;
}

ul.logs li{
  color: wheat;
  font-family: monospace;
  white-space: pre-wrap;
}

Update whitespace handling in log view

Update whitespace handling in log view


.wy-nav-content {
  height: auto;
  min-height: 100%;
}

@media print {
  .wy-grid-for-nav {
    height: auto;
    position: static;
  }
}

Remove absolute position for print

Remove absolute position for print


* {
	font-family: sans-serif;
}
body {
	background-color: #ffffff;
	color: #000000;
}
a {
	text-decoration: none;
	color: #0000ff;
}
a:hover {
	text-decoration: underline;
}
a:visited {
	color: #800080;
}
.title {
	font-weight: bold;
}
.releasedate {
	font-style: italic;
}
.desc {
}
.techspec {
	font-style: italic;
}
.title, .desc, .techspec {
	margin: 0.5em;
}
h1 {
	font-size: 125%;
	font-weight: bold;
}
h2 {
	font-size: 100%;
	font-style: italic;
}
.cover {
	height: 20em;
	width: 20em;
	border-style: solid;
	border-width: 1px;
	border-color: #000000;
}
.thumb {
	width: 10em;
	max-width: 50%;
	vertical-align: middle;
}
.releaselistitem {
	display: inline-block;
	vertical-align: middle;
	width: 50%;
	margin-left: 1em;
}

* {
	font-family: sans-serif;
}
body {
	background-color: #ffffff;
	color: #000000;
}
a {
	text-decoration: none;
	color: #0000ff;
}
a:hover {
	text-decoration: underline;
}
a:visited {
	color: #800080;
}
.title {
	font-weight: bold;
}
.releasedate {
	font-style: italic;
}
.desc {
}
.techspec {
	font-style: italic;
}
.title, .desc, .techspec {
	margin: 0.5em;
}
h1 {
	font-size: 125%;
	font-weight: bold;
}
h2 {
	font-size: 100%;
	font-style: italic;
}
.cover {
	height: 20em;
	width: 20em;
	border-style: solid;
	border-width: 1px;
	border-color: #000000;
}
.thumb {
	width: 10em;
	max-width: 50%;
	vertical-align: middle;
}
.releaselistitem {
	display: inline-block;
	vertical-align: middle;
	width: 45%;
	margin-left: 5%;
}

Use all relative widths in release list

Use all relative widths in release list


/* Home Page */

#homebody {
  background: #D2E1DF;
}

#favtable {
  border: 3px solid #62808D;
  padding-left: 14px;
  width: 830px;
  padding-bottom: 12px;
}

#items {
  margin-top: 50px;
  margin-bottom: 50px;
  width: 30%;
}

footer {
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  width: 35%;
  font-size: 1em;
  font-family: Courier;
}

h1, h3 {
  font-family: Palatino;
}

.words {
  font-family: Verdana;
  font-size: .9em;
}

/* Suggestion Page */

#suggbody {
  background-image: url(images/PragueBridge.jpg);
}

/* General */

a.links:visited {
  color: #476DD5;
}

/* Home Page */

#homebody {
  background: #D2E1DF;
}

#favtable {
  border: 3px solid #62808D;
  padding-left: 14px;
  width: 830px;
  padding-bottom: 12px;
}

#items {
  margin-top: 50px;
  margin-bottom: 50px;
  width: 30%;
}

footer {
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  width: 35%;
  font-size: 1em;
  font-family: Courier;
}

h1, h3 {
  font-family: Palatino;
}

.words {
  font-family: Verdana;
  font-size: .9em;
}

/* Suggestion Page */

#suggbody {
  background-image: url(images/PragueBridge.jpg);
}

@media screen and (max-width: 859px){
  #favtable {
    width: 95%;
    padding-right: 5px;
  }
}

/* General */

a.links:visited {
  color: #476DD5;
}

Add media query to make table responsive to viewport size changes


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

.theme-dropdown .dropdown-menu {
  position: static;
  display: block;
  margin-bottom: 20px;
}

.theme-showcase > p > .btn {
  margin: 5px 0;
}

.theme-showcase .navbar .container {
  width: auto;
}

body {
  padding-top: 70px;
  padding-bottom: 0px;
}

.theme-dropdown .dropdown-menu {
  position: static;
  display: block;
  margin-bottom: 20px;
}

.theme-showcase > p > .btn {
  margin: 5px 0;
}

.theme-showcase .navbar .container {
  width: auto;
}

[css] Modify / Remove padding-bottom in body which doesn't look in need


#esri-map {
    width: 1176px;
    height: 800px;
    border-style: solid;
    border-width: 2px;
}

.row {
    padding-bottom: 4px;
}

#esri-map {
    width: 1058px;
    height: 720px;
    border-style: solid;
    border-width: 2px;
}

.row {
    padding-bottom: 4px;
}

Fix toolbar on the right

Fix toolbar on the right


div.t-datefield-popup {
    position: absolute;
    z-index: 1000;
    margin-top: 2px;
}

/* Applied to an input element to provide feedback that something is waiting on an Ajax request:
   examples include server-side validation, or autocompletion. An Ajax "throbber" is displayed
   on the right side of the field. */
input.ajax-wait {
    background-image: url(ajax-loader.gif);
    background-repeat: no-repeat;
    background-position: center right;
}

Add .ajax-wait rule for displaying a spin cursor for fields waiting Ajax updates