/* Flex Box Styles */
.overlay {
    /* Position absolute and box models do not work under gecko */
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.overlay-box {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;

    width: 100%;
    height: 100%;
}
.overlay-header {
    /* These values are defaults per the specification. Including for demonstrational purposes */
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
}
.overlay-content {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    overflow: auto;

    /* This is a hack to force gecko to implement the desired behavior */
    min-height: 1px;
}

/* General UI Styling */
.frame {
    position: relative;
    width: 500px;
    margin-left: 262px;
    overflow: hidden;
}
.overlay {
    background-image: url(../images/translucent-background.png);
}
.overlay-header {
    background-color: green;
}
.content-image {
    /* This is specific to the image in use to maintain the proper aspect ratio */
    width: 100%;
    height: auto;
}

/* Flex Box Styles */
.overlay {
    /* Position absolute and box models do not work under gecko */
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.overlay-box {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;

    width: 100%;
    height: 100%;
}
.overlay-header {
    /* These values are defaults per the specification. Including for demonstrational purposes */
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
}
.overlay-content {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    overflow: auto;

    /* This is a hack to force gecko to implement the desired behavior */
    min-height: 1px;
}

/* General UI Styling */
.frame {
    position: relative;
    width: 500px;
    margin: 25px 0px 25px 262px;
    overflow: hidden;
}
.overlay {
    background-image: url(../images/translucent-background.png);
}
.overlay-header {
    background-color: #83ADC8;
    color: black;
}
.content-image {
    /* This is specific to the image in use to maintain the proper aspect ratio */
    width: 100%;
    height: auto;
}

Make the styles a little easier on the eyes


/**
 * Basic typography style for copy text
 */
body {
  color: $text-color;
  font-family: $text-font-stack;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures, contextual;
  font-feature-settings: "kern", "liga", "clig", "calt";
}

p {
  font-family: Georgia, sans-serif;
  line-height: 1.5em;
}

ul {
  padding-left: 1.75em;
}

a {
  text-decoration: none;
  color: $dark-brand-color;
}

a:hover {
  color: $brand-color;
}

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

Add stlying for inline code blocks

Add stlying for inline code blocks


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

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

.subtitle {
  font-weight: 300;
}

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

input {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.5s;
  width: 75px;
}
input.ng-valid {
  border-color: #3d9970;
}
input.ng-invalid {
  border-color: #ff4136;
}

.flow-icon, .card {
  transition: opacity 0.5s;
}

.flow-icon {
  color: #000;
}

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

.dimmed {
  opacity: 0.5;
}

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

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

.subtitle {
  font-weight: 300;
}

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

input {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.5s;
  width: 75px;
}
input.ng-valid {
  border-color: #3d9970;
}
input.ng-invalid {
  border-color: #ff4136;
}

.flow-icon, .card {
  transition: opacity 0.5s;
}

.flow-icon {
  color: #000;
}

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

.dimmed {
  opacity: 0.5;
}

Fix a CSS ordering issue

Fix a CSS ordering issue


.fromjs-value span:hover {
    color: lime
}
.fromjs-value {
    padding: 10px;
}

#fromjs * {
    box-sizing: border-box;
}

.fromjs-highlighted-character {
    color: #0088ff;
    font-weight: bold;
    border-bottom: 2px solid #0088ff;
}

#fromjs {
    position: fixed;
    font-family: "Arial";
    font-size: 16;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100vh;
    width: 40vw;
    background: white;
    overflow: auto;
    border-top: 1px solid black;
}

body {
    padding-right: 40vw;
}

.fromjs-stack__line-number {
    border-right: 1px solid #ddd;
    padding-right: 5px;
    margin-right: 5px;
    text-align: right;
    min-width: 30px;
    display: inline-block;
}

.fromjs-horizontal-scroll-container {
    overflow-x: auto;
    white-space: nowrap;
}
.fromjs-horizontal-scroll-container > div {
    display: inline-block;
    min-width: 100%;
}

.fromjs-btn-link{
    color: green;
    cursor: pointer;
}
.fromjs-btn-link:hover {
    text-decoration: underline;
}

.fromjs-value span:hover {
    color: red;
    border-bottom: 2px solid red;
}
.fromjs-value {
    padding: 10px;
}
.fromjs-value span {
    cursor: pointer;
}

#fromjs * {
    box-sizing: border-box;
}

.fromjs-highlighted-character {
    color: #0088ff;
    font-weight: bold;
    border-bottom: 2px solid #0088ff;
}

#fromjs {
    position: fixed;
    font-family: "Arial";
    font-size: 16;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100vh;
    width: 40vw;
    background: white;
    overflow: auto;
    border-top: 1px solid black;
}

body {
    padding-right: 40vw;
}

.fromjs-stack__line-number {
    border-right: 1px solid #ddd;
    padding-right: 5px;
    margin-right: 5px;
    text-align: right;
    min-width: 30px;
    display: inline-block;
}

.fromjs-horizontal-scroll-container {
    overflow-x: auto;
    white-space: nowrap;
}
.fromjs-horizontal-scroll-container > div {
    display: inline-block;
    min-width: 100%;
}

.fromjs-btn-link{
    color: green;
    cursor: pointer;
}
.fromjs-btn-link:hover {
    text-decoration: underline;
}

Tweak char hover highlight styles.

Tweak char hover highlight styles.


.trend {
  width: 10px;
  height: 10px;
}
.trend.up {
  background: url("img/up.png");
}
.trend.down {
  background: url("img/down.png");
}

.trend {
  width: 10px;
  height: 10px;
  display: inline-block;
  margin-left: 5px;
}
.trend.up {
  background: url("img/up.png");
}
.trend.down {
  background: url("img/down.png");
}

Fix some layout issues with trend coltype


.snippets-container {
    margin-bottom: 20px;
}

.rst-content .section .snippets-container li, .rst-content .section .snippets-container ul {
    list-style: none;
    margin-left: 0;
    margin-bottom: 0;
}

.headings li {
    display: inline-block;
    font-size: 16px;
    background: white;
    border-right: 1px solid #e1e4e5;
    border-left: 1px solid #e1e4e5;
    border-top: 1px solid #e1e4e5;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.headings .heading {
    display: block;
    color: #666;
    padding: 8px 20px;
}

.headings .heading:visited {
    color: #666;
}

.headings .heading.active-heading {
    font-family: "GothamHTF-Book", Calibri, sans-serif;
    color: #343131
}

div[class^='highlight'] {
    margin-bottom: 0;
}

div[class^='highlight'] pre {
    padding: 20px;
}

.hidden-snippet {
    display: none;
}

.active-snippet {
    display: block;
}

.snippets-container {
    margin-bottom: 20px;
}

.rst-content .section .snippets-container li, .rst-content .section .snippets-container ul {
    list-style: none;
    margin-left: 0;
    margin-bottom: 0 !important;
}

.headings li {
    display: inline-block;
    font-size: 16px;
    background: white;
    border-right: 1px solid #e1e4e5;
    border-left: 1px solid #e1e4e5;
    border-top: 1px solid #e1e4e5;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.headings .heading {
    display: block;
    color: #666;
    padding: 8px 20px;
}

.headings .heading:visited {
    color: #666;
}

.headings .heading.active-heading {
    font-family: "GothamHTF-Book", Calibri, sans-serif;
    color: #343131
}

div[class^='highlight'] pre {
    padding: 20px;
}

.hidden-snippet {
    display: none;
}

.active-snippet {
    display: block;
}

Fix spacing around snippets and fixedwidth boxes


.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
  padding: unset;
  flex-grow: 1;
}

.plot-widget {
  min-width: 500px;
}
.ant-card-body a{
  color: #1890ff;
}

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
  padding: unset;
  flex-grow: 1;
}

.plot-widget {
  min-width: 450px;
}
.ant-card-body a{
  color: #1890ff;
}

Decrease min width of plot widgets

Decrease min width of plot widgets


:root {
  --passed: #4fdc7f;
  --failed: #DC4F4F;
}

.build-snapshot {
  border-radius: 1rem;
  flex: 1;
}

.passed {
  background-color: var(--passed);
}

.failed {
  background-color: var(--failed);
}

Add pass/fail colours, set sizing for build-snapshot


MStatusBarStyle
{
    minimum-size: 100% $HEIGHT_STATUSBAR_WITH_REACTIVE_MARGIN;
    preferred-size: 100% $HEIGHT_STATUSBAR_WITH_REACTIVE_MARGIN;
    maximum-size: 100% $HEIGHT_STATUSBAR_WITH_REACTIVE_MARGIN;
    background-color: ;
    use-swipe-gesture: true;
    swipe-threshold: 30;
    press-feedback : press;
}

MStatusBarStyle
{
    minimum-size: 100% $HEIGHT_STATUSBAR_WITH_REACTIVE_MARGIN;
    preferred-size: 100% $HEIGHT_STATUSBAR_WITH_REACTIVE_MARGIN;
    maximum-size: 100% $HEIGHT_STATUSBAR_WITH_REACTIVE_MARGIN;
    background-color: ;
    use-swipe-gesture: true;
    swipe-threshold: 30;
    press-feedback : press;
    press-dim-factor: 0.6;
}

Changes: Add press dimming factor to MStatusBarStyle


body { background-color:#f1f1f1;font-family: 'Alegreya Sans', sans-serif;}
h3 { color:#f1f1f1;}
.circle { height:20px; width:40px;margin:0px;padding:0px;border-radius:0 0 90px 90px;-moz-border-radius: 0 0 90px 90px;-webkit-border-radius:0 0 90px 90px ;background:#7cc7ff;border-color:#7cc7ff;}
.container { padding:100px 20px 40px;background-color:#f1f1f1;}
.hiddenTab { padding:40px;background-color:#7cc7ff;color:#ffffff;display:none}
.hiddingTabButton { background-color:#ffffff; color:#7cc7ff; margin-top:20px;-webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.1);-moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.1);box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.1);font-weight: bold;}
.visableTab { padding:0px 40px 40px;margin-top:20px;background-color:#5aaafa;margin:0px;border:0px;border-radius: 0px 0px 3px 3px;}
.visableTabButton { padding:5px 40px;background-color:#ffffff; color:#5aaafa; margin-top:20px;-webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.15);-moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.15);box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.15); border-bottom:#eaeaea solid 2.5px; }
.noSpace { margin:0px;padding:0px;}
#box { margin-top:20px;}
#box1 { margin-top:20px;}
#box2 { margin-top:20px;}

Add proper external styling sheet

Add proper external styling sheet


html {
    background: #fff;
    color: #333;
}

body, input {
    font: 14px/1.4 Helvetica, sans-serif;
}

a {
    color: blue;
    text-decoration: none;
}

a:hover { text-decoration: underline; }

.centered { text-align: center; }

.puppy-image {
    min-height: 600px;
}

.license {
    color: #afafaf;
    font-size: 12px;
}

.license a {
    color: inherit;
    font-weight: bold;
}

.permalink { margin: 2em 0; }

#permalink-input {
    color: #888;
    font-size: 12px;
    width: 25em;
    text-align: center;
}

html {
    background: #fff;
    color: #333;
}

body, input {
    font: 14px/1.4 Helvetica, sans-serif;
}

a {
    color: blue;
    text-decoration: none;
}

a:hover { text-decoration: underline; }

.centered { text-align: center; }

.puppy-image {
    min-height: 600px;
    max-height: 90vh;
}

.license {
    color: #afafaf;
    font-size: 12px;
}

.license a {
    color: inherit;
    font-weight: bold;
}

.permalink { margin: 2em 0; }

#permalink-input {
    color: #888;
    font-size: 12px;
    width: 25em;
    text-align: center;
}

Enforce max width to fit on screen

Enforce max width to fit on screen


html {
}

body {
  font: lighter 13pt 'Open Sans', 'Helvetica', sans-serif;
}

.sidebar {
  margin: 20px 0;
}

.sidebar li {
  margin: 0 0 7px;
}

.sidebar a {
  font-size: 120%;
}

html {
}

body {
  font: lighter 13pt 'Open Sans', 'Helvetica', sans-serif;
}

@media screen and (max-width: 768px) {
  body {
    font-size: 12pt;
  }
}

.sidebar {
  margin: 20px 0;
}

.sidebar li {
  margin: 0 0 7px;
}

.sidebar a {
  font-size: 120%;
}

Make the default font size a bit smaller on mobiles


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

.tab-bar {
  line-height: 10px;
  background: #3a5795;
  border: 1px solid #999;
  font-size: 12px;
}

.tab-bar > * {
  display: inline-block;
}

.tab {
  padding: 4px 8px;
  font-weight: bold;
  margin: 2px;
  margin-left: 8px;
  margin-bottom: 0px;
  min-width: 80px;
  cursor: pointer;
  position: relative;
  top: 1px;
  border: 1px solid transparent;
  text-align: center;
  color: #fff;
}

.tab.selected {
  color: #000;
  background: #fff;
  border: 1px solid #999;
  border-top-right-radius: 2px;
  border-top-left-radius: 2px;
  border-bottom: 1px solid white;
}

.tab-content {
}

.dual-mode .left-side {
  width: 50%;
  display: inline-block;
  float: left;
}

.dual-mode .right-side {
  width: 50%;
  display: inline-block;
  float: right;
}

@import url(http://fonts.googleapis.com/css?family=Kalam:400,700);

.tab-bar {
  line-height: 10px;
  background: #3a5795;
  border: 1px solid #999;
  font-size: 12px;
}

.tab-bar > * {
  display: inline-block;
}

.tab {
  padding: 4px 8px;
  font-weight: bold;
  margin: 2px;
  margin-left: 8px;
  margin-bottom: 0px;
  min-width: 80px;
  cursor: pointer;
  position: relative;
  top: 1px;
  border: 1px solid transparent;
  text-align: center;
  color: #fff;
}

.tab.selected {
  color: #000;
  background: #fff;
  border: 1px solid #999;
  border-top-right-radius: 2px;
  border-top-left-radius: 2px;
  border-bottom: 1px solid white;
}

.tab-content {
  font-family: 'Kalam', cursive;
}

.dual-mode .left-side {
  width: 50%;
  display: inline-block;
  float: left;
}

.dual-mode .right-side {
  width: 50%;
  display: inline-block;
  float: right;
}

Use handwriting-style font for cards

Use handwriting-style font for cards


div.main {
    padding:0px;
}

div.receipt {
    margin-top:20px;
    padding:20px;
    display:none;
    border:1px solid #DDD;
}

div.receipt th.total,
div.receipt td.total {
    text-align:right;
}

div.receipt table td:first-child{
    width:80%;
}

div.ordertime {
    font-weight:normal;
    font-size:8pt;
    float:right;
    padding-top:4px;
}

div.main {
    padding:0px;
}

div.receipt {
    margin: 20px 0;
    padding:20px;
    display:none;
    border:1px solid #DDD;
}

div.receipt th.total,
div.receipt td.total {
    text-align:right;
}

div.receipt table td:first-child{
    width:80%;
}

div.ordertime {
    font-weight:normal;
    font-size:8pt;
    float:right;
    padding-top:4px;
}

Set better offset for button

Set better offset for button


.navbar-brand {
  font-family: 'Montserrat', sans-serif;
  font-size: x-large;
}

.shopping-cart {
  fill: currentColor;
  height: 24px;
  width: 24px;
}

.shopping-cart-badge {
  margin: 0 0 0 -10px;
  position: absolute;
}

.cat-logo {
  fill: currentColor;
  height: 36px;
  margin-right: 1rem;
  width: 36px;
}

h1,
h2 {
  font-family: 'Montserrat', sans-serif;
}

.btn-link {
  color: #212529;
}

.btn-link:hover {
  color: #6c757d;
}

.header-with-modal {
  display: table;
}

.header-with-modal .btn {
  display: table-cell;
  vertical-align: middle;
}

.header-with-modal h1,
.header-with-modal h2 {
  display: inline-table;
  margin: 0;
  vertical-align: middle;
}

.navbar-brand {
  font-family: 'Montserrat', sans-serif;
  font-size: x-large;
}

.shopping-cart {
  fill: currentColor;
  height: 24px;
  width: 24px;
}

.shopping-cart-badge {
  margin: 0 0 0 -10px;
  position: absolute;
}

.cat-logo {
  fill: currentColor;
  height: 36px;
  margin-right: 1rem;
  width: 36px;
}

h1,
h2 {
  font-family: 'Montserrat', sans-serif;
}

.btn-link {
  color: #212529;
}

.btn-link:hover {
  color: #6c757d;
}

.header-with-modal .btn {
  display: table-cell;
  vertical-align: middle;
}

.header-with-modal h1,
.header-with-modal h2,
.header-with-modal h3,
.header-with-modal p {
  display: inline-table;
  margin: 0;
  vertical-align: middle;
}

Fix header with modal css class

Fix header with modal css class


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

body, html{
  height: 100%;
  width: 100%;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

#nav{
  display: flex;
  align-self: flex-start;
  margin-left: auto;
  justify-content: space-around;
  width: 30%;
}

.form{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 50%;
}

.page-header{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 25%;
  background-color: gray;
}

Add CSS for .page-header that essentially places it under layout links above all items, and centers text


/**
 * Shame.css
 *
 * The idea of shame.css is that you have a totally new stylesheet reserved just for your hacky code. Code you have to write to get the release out on time, but code that makes you ashamed.
 *
 * Hacks are inevitable, we want to make sure everyone is aware of them so it's easy to find and fix things.
 * The goal is to try and keep good code nice and clean - Broken Windows Theory
 *
 */

/**
 * The Example Page was done within the timespan of X with the following process - Human Name YYYY-MM-DD
 * 1) Due to time constraints only the ....
 * 2) Changes were made half way while being built which differed from original design/planning
 * 3) Still wasn't sent to be QA tested...
 * 4) This Is Fine.
 *
 */

@media only screen and (max-width: 79.9375em) {
    ._ExampleScrollArea{ overflow:overlay; overflow:auto; }
    ._ExampleVisibleArea{ width:1195px; }
}

/**
 * Shame.css
 *
 * The idea of shame.css is that you have a totally new stylesheet reserved just for your hacky code. Code you have to write to get the release out on time, but code that makes you ashamed.
 *
 * Hacks are inevitable, we want to make sure everyone is aware of them so it's easy to find and fix things.
 * The goal is to try and keep good code nice and clean - Broken Windows Theory
 *
 */

/**
 * The Example Page was done within the timespan of X with the following process - Human Name YYYY-MM-DD
 * 1) Due to time constraints only the ....
 * 2) Changes were made half way while being built which differed from original design/planning
 * 3) Still wasn't sent to be QA tested...
 * 4) This Is Fine.
 *
 */

@media only screen and (max-width: 79.9375em) {
    ._Example__ScrollArea{ overflow:overlay; overflow:auto; }
    ._Example__VisibleArea{ width:1195px; }
}

Update hack example to be more bem like

Update hack example to be more bem like


.left {
	float: left;
	width: 400px;
}

.right {
	float: right;
	width: 502px;
}

#Form_ProfileForm h3 {
	font-size: 12px;
	font-weight: normal;
	height: 30px;
}

#Form_ProfileForm #Email input {
	width: 224px;
}

#Form_ProfileForm #Company input {
	width: 323px;
}

#Form_ProfileForm .Actions {
	border-top: solid 1px #CCCCCC;
	padding-top: 30px;
	margin-top: 10px;
}

#Form_ProfileForm .Actions input {
	margin-right: 27px;
}

ADD - css file for profile page styling

ADD - css file for profile page styling


/* Basscss UI Utility Groups */

.x-group-item { margin-left: -var(--border-width) }
.x-group-item:first-of-type { margin-left: 0 }

.y-group-item { margin-top: -var(--border-width) }
.y-group-item:first-of-type { margin-top: 0 }

.x-group-item:focus,
.y-group-item:focus {
  position: relative;
  z-index: 1;
}

Add back basscss v7 ui-utility-groups

Add back basscss v7 ui-utility-groups


/*
 *= require spree/frontend
*/

/* Sidebar - .list-group-item styles */
.pages-list.list-group > li:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.pages-list.list-group > li {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #FFF;
  border: 1px solid #DDD;
}

Remove the "require spree/frontend" directive from the main css. This will allow Spree applications that use different front end stylesheet to install the extension


ul#bottomnavigation {
    position: fixed;
    bottom: 0;
    left: 0;
    height: auto;
    width: 100%;
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.3);
    z-index: 1;
    display: none;
    transition: transform .2s cubic-bezier(.4,0,.2,1);
}

ul#bottomnavigation ~ main {
    transition: height .2s cubic-bezier(.4,0,.2,1);
}

@media screen and (max-width: 1024px) {
    ul#bottomnavigation {
        display: flex;
    }

    ul#bottomnavigation ~ main {
        height: calc(100% - 7rem);
    }

    nav.active + ul#bottomnavigation,
    ul#bottomnavigation.hidden {
        transform: translateY(100%);
    }

    nav.active ~ ul#bottomnavigation ~ main,
    ul#bottomnavigation.hidden ~ main {
        height: 100%;
    }
}

ul#bottomnavigation {
    position: fixed;
    bottom: 0;
    left: 0;
    height: auto;
    width: 100%;
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.3);
    z-index: 1;
    display: none;
    /*transition: transform .2s cubic-bezier(.4,0,.2,1);*/
}

ul#bottomnavigation ~ main {
    /*transition: height .2s cubic-bezier(.4,0,.2,1);*/
}

@media screen and (max-width: 1024px) {
    ul#bottomnavigation {
        display: flex;
    }

    ul#bottomnavigation ~ main {
        height: calc(100% - 7rem);
    }

    nav.active + ul#bottomnavigation,
    ul#bottomnavigation.hidden {
        transform: translateY(100%);
    }

    nav.active ~ ul#bottomnavigation ~ main,
    ul#bottomnavigation.hidden ~ main {
        height: 100%;
    }
}

Remove animations on mobile (for now), performances are not so great


.page-header {
  font-size: 48px;
  color: white;
  text-align: center;
}

.user-form {
  margin: 0 auto;
  text-align: center;
  color: white;
  width: 60%;
}

.user-form input {
  display: inline-block;
  width: 60%;
  font-size: 24px;
  padding: 1%;
  border-radius: 5%;
  margin-bottom: 2%;
}

.user-form input[type=submit] {
  background-color: #006bb7;
  color: white;
}

Complete initial registration form styling


.cropArea {
    page-break-inside: avoid;
    /* A4 portrait */
    width: 210mm;
    height: 296.5mm; /* XXX: should be 297mm, but Firefox leaves then empty pages in between */
    /* enable the children to fill all space */
    display: flex;
    /* add print preview markers */
    outline: 1px solid lightgray;
    margin-bottom: 8px;
}

@media print {
    .cropArea {
        /* remove print preview markers */
        outline: none;
        margin: 0;
    }
}

.cropArea {
    page-break-inside: avoid;
    /* A4 portrait */
    width: 210mm;
    height: 297mm;
    /* enable the children to fill all space */
    display: flex;
    /* add print preview markers */
    outline: 1px solid lightgray;
    margin-bottom: 8px;
}

@media print {
    .cropArea {
        /* remove print preview markers */
        outline: none;
        margin: 0;
    }
}

Print size works now in Firefox

Print size works now in Firefox


.navbar-static-top {
  margin-bottom: 0;
}

.page-container {
  margin-top: 21px;
}

.small-code-section {
  height: 200pt;
  overflow-y: auto;
}

h1, .h1, h2, .h2, h3, .h3 {
  margin-top: 0;
  padding-top: 21px;
}

nav.affix[data-toggle='toc'] {
  margin-top: -60px;
}

#toc {
  width: 160px;
}

@media (max-width: 767px) {
  #toc {
    display: none;
  }
}

a.anchorjs-link:active, a.anchorjs-link:hover {
  text-decoration: none;
}

Drop underline from heading links.

Drop underline from heading links.


body {
    margin-top: 3rem;
}

.navbar-light {
    background-color: rgba(0, 128, 128, 0.2);
}

body {
    margin-top: 3.5rem;
}

.navbar-light {
    background-color: rgba(0, 128, 128, 0.2);
}

Increase body padding-top to avoid nav overlap


html {
  height: 100%;
  color: white;
  font-family: Open Sans, sans-serif;
}
body {
  height: 100%;
  display: flex;
  flex-flow: column;
}
main {
  flex: 1;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(0,0,0,0.8);
}
h1 {
  text-align: center;
}
footer {
  background-color: rgba(0,0,0,0.9);
  text-align: right;
  padding: 8px 16px;
  font-size: 20px;
}
a, a:link, a:visited {
  color: white;
}
.brandlink {
  font-weight: bold;
  text-decoration: none;
  margin-left: 6px;
  padding-right: 38px;
  background-image: url("/parkedproject-logo.svg");
  background-position: right;
  background-size: 27px;
  background-repeat: no-repeat;
}

html {
  height: 100%;
  color: white;
  font-family: Open Sans, sans-serif;
}
body {
  height: 100%;
  display: flex;
  flex-flow: column;
}
main {
  flex: 1;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(0,0,0,0.8);
}
h1 {
  text-align: center;
}
footer {
  background-color: rgba(0,0,0,0.9);
  text-align: right;
  padding: 8px 16px;
  font-size: 20px;
}
a, a:link, a:visited {
  color: white;
}
.brandlink {
  font-weight: bold;
  text-decoration: none;
  margin-left: 0.25em;
  padding-right: 2em;
  background-image: url("/parkedproject-logo.svg");
  background-position: right;
  background-size: auto 100%;
  background-repeat: no-repeat;
}

Make brandlink logo less hard-coded

Make brandlink logo less hard-coded


.center {
  text-align: center;
}

.upcase {
  text-transform: uppercase;
}

.downcase {
  text-transform: uppercase;
}

.invert {
  color: var(--bg-color);
  background-color: var(--text-color);
  padding-right: calc(var(--gutter) / 5);
  padding-left:  calc(var(--gutter) / 5);
}

.center {
  text-align: center;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.invert {
  color: var(--bg-color);
  background-color: var(--text-color);
  padding-right: calc(var(--gutter) / 5);
  padding-left:  calc(var(--gutter) / 5);
}

Rename upcase class to uppercase; rename downcase class to lowercase


html, body {
  height: 100%;
}

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

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

input {
  height: 30px;
  width: 100%;
  padding: 0 8px;
}

button {
  width: 60px;
  height: 30px;
  position: absolute;
  right: 0;
  top: 0;
  border: none;
  border-left: 1px solid #333333;
  color: #333333;
  background-image: none;
  background-color: inherit;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid #333333;
  border-bottom: none;
}

ul li {
  padding: 8px;
  border-bottom: 1px solid #333333;
}

#main {
  width: 360px;
  margin: 20px auto;
  position: relative;
}

html, body {
  height: 100%;
}

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

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

#search-input {
  height: 30px;
  width: 100%;
  padding: 0 8px;
}

#add-button {
  width: 60px;
  height: 30px;
  position: absolute;
  right: 0;
  top: 0;
  border: none;
  border-left: 1px solid #333333;
  color: #333333;
  background-image: none;
  background-color: inherit;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}

#search-results {
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid #333333;
  border-bottom: none;
}

#search-results > li {
  padding: 8px;
  border-bottom: 1px solid #333333;
}

#main {
  width: 360px;
  margin: 20px auto;
  position: relative;
}

Use element ids instead of types for styles


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

}

#second_4 {
display: block;
position: relative;
top: 820px;
left: 100px;

}

#second_3 {
display: block;
position: relative;
top: 780px;
left: 100px;

}

#second_4 {
display: block;
position: relative;
top: 820px;
left: 100px;

}

Add second_3 to week stylesheet

Add second_3 to week stylesheet


#nimble-bar {
  background-color: #ddd;
  border: 2px solid #666;
  border-radius: 4px;
  -webkit-box-shadow: 0px 0px 60px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 60px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 60px 0px rgba(0,0,0,0.75);
  display: none;
  height: 64px;
  left: 50%;
  margin-left: -256px;
  margin-top: -32px;
  position: fixed;
  top: 50%;
  width: 512px;
}

#nimble-bar.visible {
  display: inherit;
}

#nimble-bar .nimble-input {
  background-color: transparent;
  border: none;
  font-size: 36px;
  height: 100%;
  padding: 15px;
  width: 85%;
}

#nimble-bar {
  background-color: #ddd;
  border: 2px solid #666;
  border-radius: 4px;
  -webkit-box-shadow: 0px 0px 60px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 60px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 60px 0px rgba(0,0,0,0.75);
  display: none;
  height: 64px;
  left: 50%;
  margin-left: -256px;
  margin-top: -32px;
  position: fixed;
  top: 50%;
  width: 512px;
  z-index: 10000;
}

#nimble-bar.visible {
  display: inherit;
}

#nimble-bar .nimble-input {
  background-color: transparent;
  border: none;
  font-size: 36px;
  height: 100%;
  padding: 15px;
  width: 85%;
}

Make nimble bar at the top

Make nimble bar at the top


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

html, body, iframe {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  background-image: url('../images/loading.gif');
  background-size: 24px 19px;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

.dragbar {
  -webkit-app-region: drag;
  position: absolute;
  width: 100%;
  height: 50px;
  background-color: rgba(0, 0, 0, 0);
  top: 0;
  margin-right: 148px;
  left: 40px;
}

iframe {
  display: none;
}

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

html, body, iframe {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  background-image: url('../images/loading.gif');
  background-size: 24px 19px;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

.dragbar {
  -webkit-app-region: drag;
  position: absolute;
  width: 100%;
  height: 50px;
  background-color: rgba(0, 0, 0, 0);
  top: 0;
  width: calc(100% - 148px - 40px);
  left: 40px;
  z-index: -1000;
}

iframe {
  display: none;
}

Make drag zone not cover right buttons. TODO: figure out how to make it not cover compose button (complicated because sidebar auto-hides)


.normal {
  padding: 2px;
}

.highlighted {
    animation-name: anim-info-updated;
    animation-duration: 2s;
    box-sizing: border-box;
    padding: 0;
}

@keyframes anim-info-updated {
    0% {
      border: 2px solid red;
      color: rgb(128, 0, 0);
    }
    100% {
      border: 2px solid transparent;
      color: rgb(0, 0, 0);
    }
}

.highlighted {
    animation-name: anim-info-updated;
    animation-duration: 4s;
    box-sizing: border-box;
}

@keyframes anim-info-updated {
    0% {
      background-color: red;
      color: rgb(128, 0, 0);
    }
    100% {
      background-color: white;
      color: rgb(0, 0, 0);
    }
}

Modify update animation and fix padding bug


body {
  margin: 0;
}

#background-canvas {
  position: fixed;
  width: 100%;
  height: 100%;
}

#logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 75%;
  max-height: 60%;
}

#logo circle {
  fill: #fff;
}

#logo text {
  fill: #cd123d;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: bold;
  font-size: 2.5em;
  text-anchor: middle;
  dominant-baseline: central;
}

body {
  margin: 0;
}

#background-canvas {
  position: fixed;
  width: 100%;
  height: 100%;
}

#logo {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 75%;
  max-height: 60%;
  cursor: default;
  user-select: none;
}

#logo circle {
  fill: #fff;
}

#logo text {
  fill: #cd123d;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: bold;
  font-size: 2.5em;
  text-anchor: middle;
  dominant-baseline: central;
}

Make logo fixed and unselectable

Make logo fixed and unselectable


/* Copyright 2011 Google Inc.
 * see Purple/license.txt for BSD license
 * johnjbarton@google.com
 */

.partLink:hover {
  cursor: pointer;
  text-decoration: underline;
}

.partLink {
  font-weight: bold;
  color: blue;
}

.console-error {
  color: red;
}

.console-warn {
  color: yellow;
}

.console-log {
  color: gray;
}

.hasMore * {
 display: none;
}

.hasMore:before {
  content: url("../ui/icons/from-firebug/twistyClosed.png");
}

.hadMore:before {
  content: url("../ui/icons/from-firebug/twistyOpen.png");
}

.callStack {
  padding-left: 1em;
}

.callStackFrame {
  color: green;
  padding-left: 25px;
}

.callStackFrame .partLink {
  text-align: right;
}

/* Copyright 2011 Google Inc.
 * see Purple/license.txt for BSD license
 * johnjbarton@google.com
 */

.partLink:hover {
  cursor: pointer;
  text-decoration: underline;
}

.partLink {
  font-weight: bold;
  color: blue;
}

.console-error {
  color: red;
}

.console-warn {
  color: yellow;
}

.console-log {
  color: gray;
}
.consoleCleared {
  color: white;
  background-color: black;
  text-align: center;
}

.hasMore * {
 display: none;
}

.hasMore:before {
  content: url("../ui/icons/from-firebug/twistyClosed.png");
}

.hadMore:before {
  content: url("../ui/icons/from-firebug/twistyOpen.png");
}

.callStack {
  padding-left: 1em;
}

.callStackFrame {
  color: green;
  padding-left: 25px;
}

.callStackFrame .partLink {
  text-align: right;
}

Make the console clear event stand out

Make the console clear event stand out


.textview {
	background-color: white;
	padding: 1px 2px;
}

.textviewContainer {
	background-color: #eeeeee;
	font-family: "Monaco","Ubuntu Mono","Courier new";
	font-size: 9pt;
}
::-webkit-scrollbar-corner {
	background-color: #eeeeee;
}

.textviewContent {
}

.textview {
	background-color: white;
	padding: 1px 2px;
}

.textviewContainer {
	background-color: #eeeeee;
	font-family: Monaco,"Ubuntu Mono", monospace;
	font-size: 9pt;
}
::-webkit-scrollbar-corner {
	background-color: #eeeeee;
}

.textviewContent {
}

Repair editor textfont for unix.

Repair editor textfont for unix.


.error {
  display: flex;
  background: #ca3939;
  padding: 0.5rem 1rem;
  color: #fee;
  justify-content: space-between;
}

.message {
  padding: 1rem 0;
}

.corner {
  padding: 0;
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
}

.corner:hover {
  transform: scale(1.1);
}

.corner:focus {
  outline: 0;
}

.close {
  composes: icon close from 'css/flaticon.css';
}

.error {
  margin-bottom: 2rem;
  display: flex;
  background: #ca3939;
  padding: 0.5rem 1rem;
  color: #fee;
  justify-content: space-between;
}

.message {
  padding: 1rem 0;
}

.corner {
  padding: 0;
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
}

.corner:hover {
  transform: scale(1.1);
}

.corner:focus {
  outline: 0;
}

.close {
  composes: icon close from 'css/flaticon.css';
}

Add missing margin on errors

Add missing margin on errors


/* CURSORS */

*,
::before,
::after {
  cursor: inherit;
}

pre,
code,
kbd,
samp,
var {
  cursor: text;
}

abbr[title],
dfn[title] {
  cursor: help;
}

textarea,
input[type='email'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='url'],
input[type='number'],
input[type='datetime'] {
  cursor: text;
}

select,
[role="listbox"] {
  cursor: context-menu;
}

input[type='range'] {
  cursor: col-resize;
}

[disabled],
[aria-disabled="true"] {
  cursor: not-allowed !important;
}

[aria-busy="true"] {
  cursor: progress;
}

a,
button,
summary,
input[type='submit'],
input[type='button'],
input[type='reset'],
[role='button'],
[role='link'] {
  cursor: pointer;
}

/* CURSORS */

*,
::before,
::after {
  cursor: inherit;
}

pre,
code,
kbd,
samp,
var {
  cursor: text;
}

abbr[title],
dfn[title] {
  cursor: help;
}

textarea,
input[type='email'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='url'],
input[type='number'],
input[type='datetime'] {
  cursor: text;
}

select,
[role="listbox"] {
  cursor: context-menu;
}

input[type='range'] {
  cursor: col-resize;
}

[disabled],
[aria-disabled="true"] {
  cursor: not-allowed !important;
}

[aria-busy="true"] {
  cursor: progress;
}

a,
button,
summary,
input[type='submit'],
input[type='button'],
input[type='reset'],
label[for],
[role='button'],
[role='link'] {
  cursor: pointer;
}

Add cursor pointer for label tag with for attribute


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

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

.content{
	min-height: 400px;
	background: #c5c5d1;
	width: 75%;
	float: left;
}

.sidebar{
	width: 200px;
	float: right;
	min-height: 400 px;
}

.footer{
	clear: both;
	height: 40px;
	text-align: center;
	padding: 10px;
}

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

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

.content{
	min-height: 400px;
	background: #c5c5d1;
	width: 75%;
	float: left;
}

.sidebar{
	width: 200px;
	float: right;
	min-height: 400 px;
}

.footer{
	clear: both;
	height: 40px;
	text-align: center;
	padding: 10px;
}

Make text gold in header

Make text gold in header

Aggie Pride


/* override table width restrictions */
.wy-table-responsive table td, .wy-table-responsive table th {
    /* !important prevents the common CSS stylesheets from
       overriding this as on RTD they are loaded after this stylesheet */
    white-space: normal !important;
}

.wy-table-responsive {
    overflow: visible !important;
}

/* style headlink for code block captions like other headlinks */
.code-block-caption .headerlink {
    display: none;
    visibility: hidden;
    font-size: 14px;
    font-family: inherit;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.code-block-caption:hover .headerlink {
    display: inline-block;
}

.code-block-caption .headerlink:after {
    visibility: visible;
    content: "\f0c1";
    font-family: FontAwesome;
    display: inline-block;
}

/* make whitespace visualization in code listings not appear on same vertical position as dashes */
.highlight .w {
    vertical-align: 10%;
}

Move whitespace visualization up a bit

[doc] Move whitespace visualization up a bit

As suggested by @Mikk36


html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    border: 0;
    overflow: hidden; /*  Disable scrollbars */
    display: block;  /* No floating content on sides */
}

#canvas {
    /*width: 800px;
    height: 600px;*/
    margin-left:auto;
    margin-right:auto;
    display:block;

}

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    border: 0;
    overflow: hidden; /*  Disable scrollbars */
    display: block;  /* No floating content on sides */
}

#canvas {
    /*width: 800px;
    height: 600px;*/
    padding-top: 50px;
    margin-left:auto;
    margin-right:auto;
    display:block;

}

Add padding at the top

Add padding at the top


.jscode {
  width: 100%;
  height: 20em; /* default height */
  border: none;
  background-color: lightgrey;
  vertical-align: baseline;
  /* cannot set the representation inside an iframe like this
     TODO try to use Jekyll and Pygments
  text-align: left;
  font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
  font-weight: normal;
  font-style: normal;
  font-size: 14px;
  line-height: 20px;
  color: #593249;
  */
}

.jscode {
  width: 100%;
  height: 30em; /* default height */
  border: none;
  background-color: lightgrey;
  vertical-align: baseline;
  /* cannot set the representation inside an iframe like this
     TODO try to use Jekyll and Pygments
  text-align: left;
  font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
  font-weight: normal;
  font-style: normal;
  font-size: 14px;
  line-height: 20px;
  color: #593249;
  */
}

Enlarge default height for code iframe

Enlarge default height for code iframe


/*
 * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
 * https://medium.com/@elad/supporting-css-grid-in-internet-explorer-b38669e75d66
 * https://www.codementor.io/karaluton/a-beginner-s-guide-to-css-grid-j27g9uqys?utm_swu=7100
*/

body {

  display: grid;
  grid-template-columns: 70% 30%;

  grid-template-areas: "header header"
                       "main aside"
                       "footer footer"
}

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

/*
@media ( orientation : landscape ) {

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

    grid-template-columns: 1fr  20vw;
    grid-template-rows:    10vh 1fr  10vh
  }
}
*/

/*
 * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
 * https://medium.com/@elad/supporting-css-grid-in-internet-explorer-b38669e75d66
 * https://www.codementor.io/karaluton/a-beginner-s-guide-to-css-grid-j27g9uqys?utm_swu=7100
*/

body {

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

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

/*
@media ( orientation : landscape ) {

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

    grid-template-columns: 1fr  20vw;
    grid-template-rows:    10vh 1fr  10vh
  }
}
*/

Fix grid template for mobile

Fix grid template for mobile


/* Common SC.TextFieldView styles - needed to work properly */

.sc-view .sc-text-field-view {
	overflow: visible;
	z-index:100;
}

.sc-view .sc-text-field-view .sc-text-field-accessory-view {
	z-index:2;
}

.sc-text-field-view input {
	position:  absolute;
	top: -2px;
	left: -2px;
	width: 100%;
	height: 100%;
  padding: 1px;
}

.sc-text-field-view textarea {
	position:  absolute;
	top: -2px;
	left: -2px;
  width: 100%;
	height: 100%;
  padding: 1px;
  overflow: auto;
  font-family: "Lucida Grande","Lucida Sans",Verdana,Arial,sans-serif;
}

.sc-text-field-view .sc-hint {
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 3px;
	color: #aaa ;
	font-size: 12px;

}

.sc-text-field-view.focus .sc-hint,
.sc-text-field-view.not-empty .sc-hint {
  display: none ;
}

/* Common SC.TextFieldView styles - needed to work properly */

.sc-view .sc-text-field-view {
	overflow: visible;
	z-index:100;
}

.sc-view .sc-text-field-view .sc-text-field-accessory-view {
	z-index:2;
}

.sc-text-field-view input {
	position:  absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
}

.sc-text-field-view textarea {
	position: absolute;
	top: 0px;
	left: 0px;
  bottom: 0px;
	right: 0px;
	overflow: auto;
  font-family: "Lucida Grande","Lucida Sans",Verdana,Arial,sans-serif;
}

.sc-text-field-view .sc-hint {
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 3px;
	color: #aaa ;
	font-size: 12px;

}

.sc-text-field-view.focus .sc-hint,
.sc-text-field-view.not-empty .sc-hint {
  display: none ;
}

Fix for textfield layout to add padding

Fix for textfield layout to add padding


.galua_section_label {
  font-style: italic;
  float: right;
  color: #999;
}

.galua_section_container {
  padding: 1em;
}

.galua_function_chip {
  display: inline-block;
  font-size: small;
  width: 3em;
  text-align: center;
  font-weight: 500;
  color: rgba(0,0,0,0.6);
  padding: 0 6px;
  border-radius: 8px;
  background-color: #e4e4e4;
  margin-bottom: 5px;
  margin-right: 5px;
}

Make function chip smaller in font and padding


html {
  background-color: lightgrey;
  background: linear-gradient(grey, lightgrey);
  padding-bottom: 5%;
}

h1 {
	text-align: center;
	margin-bottom: 0;
}

canvas {
	position: absolute;
	top: 0px;
	left: 200px;
	width: 1100px;
	height: 900px;
	margin: 8px;
	display: inline;
	right: 0px;
}

#slider-tool-bar {
	width: 200px;
	float:left;
}

Deploy new veresion of Dynamic Tree with style sheet.


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

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

.headerContainer {
  z-index: var(--zindex-pane);
  position: relative;
  background: var(--component-bg);

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

  @media (--max-screen-medium) {
    position: sticky;
    top: 0;
  }
}

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

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

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

.portal {
  pointer-events: none;
  z-index: calc(var(--zindex-pane) - 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  @nest & > * {
    pointer-events: all;
  }
}

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

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

.headerContainer {
  z-index: var(--zindex-pane);
  position: relative;
  background: var(--component-bg);

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

  @media (--max-screen-medium) {
    position: sticky;
    top: 0;
  }
}

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

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

.documentScroller {
  height: 100%;

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

.portal {
  pointer-events: none;
  z-index: calc(var(--zindex-pane) - 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  @nest & > * {
    pointer-events: all;
  }
}

[desk-tool] Fix document pane scroller height on narrow devices


html, body {
  margin: 20px;
}

.list-group-item {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}

.list-group {
  max-width: 400px;
}

ul[aria-hidden=true] {
  display: none;
}

li[aria-expanded=true] > .badge {
  display: none;
}

html, body {
  margin: 20px;
}

.list-group-item {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
  background-color: rgba(0,150,0,0.1);
}

.list-group {
  max-width: 400px;
}

ul[aria-hidden=true] {
  display: none;
}

li[aria-expanded=true] > .badge {
  display: none;
}

Add background color and opacity.

Add background color and opacity.
[ci skip]


#project1, #project2 {
  display: none;
}

.wrap {
    margin: auto;
    width: 50%;
    border: 3px solid #73AD21;
    padding: 70px;
}

img {
    display: block;
    margin: auto;
    width: 80%;
}

#project1, #project2 {
  display: none;
}

.wrap {
    margin: auto;
    width: 50%;
    border: 3px solid #73AD21;
    padding: 70px;
}

img {
    display: block;
    margin: auto;
    width: 140%;
}

Change width css for images

Change width css for images


.tile--google_plus .tile__media {
    height: 10em;
}

.tile--google_plus  .tile__media__img {
    margin-top: 20px;
    border-radius: 100%;
}

.tile--google_plus  .tile__title {
    text-align: center;
    vertical-align: middle;
    font-weight: 400;
    display: table-cell;
    width: 150px;
}

.tile--google_plus .tile__body {
    padding-bottom: 20px;
}

.tile--google_plus .tile__media {
    height: 10em;
}

.tile--google_plus  .tile__media__img {
    margin-top: 20px;
    border-radius: 100%;
}

.tile--google_plus  .tile__title {
    text-align: center;
    vertical-align: middle;
    font-weight: 400;
}

.tile--google_plus .tile__body {
    padding-bottom: 20px;
}

Fix varying heights for Google+ Results

Fix varying heights for Google+ Results

Changed the CSS for the Google+ results to fix issues where the spice tiles would vary in height depending on length of text.


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

.content {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1184px;
  margin-right: auto;
  margin-left: auto;
}

.logo {
  height: 20px;
  font-size: 16px;
}

.link {
  color: #402f4c;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  font-family: colfax-web, sans-serif;
  text-decoration: none;
}

.links {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.link-item:not(:last-child) {
  margin-right: 28px;
}

@media (min-width: 321px) {
  .logo {
    max-height: 28px;
  }
}

@media (width >= 1024px) {
  .root {
    padding: 56px 28px 112px;
  }

  .logo {
    height: 28px;
    font-size: 20px;
  }

  .link {
    font-size: 20px;
    line-height: 28px;
  }
}

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

.content {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1184px;
  margin-right: auto;
  margin-left: auto;
}

.logo {
  height: 20px;
  font-size: 16px;
}

.link {
  color: #402f4c;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  font-family: colfax-web, sans-serif;
  text-decoration: none;
}

.links {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.link-item:not(:last-child) {
  margin-right: 28px;
}

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

  .logo {
    max-height: 28px;
    font-size: 20px;
  }

  .link {
    font-size: 20px;
    line-height: 28px;
  }
}

Fix margin in hero navbar

Fix margin in hero navbar


/*
 * Follow css style guides as shown in the OSF developer documentation
 * http://cosdev.readthedocs.org/en/latest/style_guides/html_css.html
 */

/* Section to replicate osf style, ignore until end of this section */
#navbarScope {
    position: fixed;
    width: 100%;
    border-radius: 0;
}
/* End */

.prereg-container ol, .prereg-container p,  .prereg-button {
	font-size: 16px;
}

.prereg-button {
	height: 76px;
	cursor: pointer;
	text-align: center;
}

div[class^='col']:first-of-type .prereg-button {
	line-height: 48px;
}

.prereg-button:hover {
	background-color: #E0EBF3;
}

.prereg-button.active {
	background-color: #204762;
	color: white;
}

/*
 * Follow css style guides as shown in the OSF developer documentation
 * http://cosdev.readthedocs.org/en/latest/style_guides/html_css.html
 */

/* Section to replicate osf style, ignore until end of this section */
#navbarScope {
    position: fixed;
    width: 100%;
    border-radius: 0;
}
/* End */

.prereg-container ol, .prereg-container p,  .prereg-button {
	font-size: 16px;
}

.prereg-button {
	height: 76px;
	cursor: pointer;
	text-align: center;
	font-weight: 500;
}

.prereg-button:hover {
	background-color: #E0EBF3;
}

.prereg-button.active {
	background-color: #204762;
	color: white;
}

@media (max-width: 767px) {
	.prereg-button {
		line-height: 48px;
	}
}

@media (min-width: 992px) {
	div[class^='col']:first-of-type .prereg-button {
		line-height: 48px;
	}
}

Correct line height for buttons

Correct line height for buttons


/* Add space for traffic lights */
#gb {
  padding-left: 60px;
}

/* Add space for traffic lights in PDF viewer */
.aLF-aPX-aPU-J6 {
  margin-left: 75px;
}

/* Pad emails in new windows to match the main window padding
   between the traffic lights and hamburger menu */
body.xE .G-atb {
  padding-left: 84px;
}

/* Add space for traffic lights */

/* Main window */
#gb {
  padding-left: 60px;
}

/* Email viewer */
body.xE .G-atb,
/* Compose window */
.Io {
  padding-left: 85px !important;
}

/* PDF viewier */
.aLF-aPX-aPU-J6 {
  margin-left: 75px;
}

Update styles for traffic lights

Update styles for traffic lights


body {
	background-color: #222222;
}
.bg-primary {
	background-color: #375a7f !important;
}
.card {
	background-color: #303030;
	border: 1px solid transparent;
	color: #fff;
}
.card-success {
    background-color: #5cb85c;
    border-color: #5cb85c;
}
.card-danger{
    background-color: #d9534f;
    border-color: #d9534f;
}
.panel-body {
	background-color: #303030 !important;
}
textarea, .cke {
	color: #000 !important;
}

Fix AdminCP night mode editor text colour


Fix <button> higlight in webkit browser

Fix <button> higlight in webkit browser


.project {
	border-top: 1px solid #000;
	clear: left;
}
	.status {
		display: inline-block;
		float: right;
		font-weight: bold;
		font-size: .7em;
		color: white;
		padding: 5px 10px;
	}
		.status.planning {
			background-color: gray;
		}
		.status.alpha {
			background-color: lightblue;
		}
		.status.beta {
			background-color: blue;
		}
		.status.shipped {
			background-color: green;
		}
.project > div:nth-of-type(2) {
	float: left;
	width: 48.82117%;
	margin-right: 2.35765%;
}
.project > div:nth-of-type(3) {
	float: left;
	width: 48.82117%;
}

.project {
	border-top: 1px solid #000;
	clear: left;
}
	.status {
		display: inline-block;
		float: right;
		font-weight: bold;
		font-size: .5em;
		color: white;
		padding: 0 5px;
		margin-top: -11.466px;
	}
		.status.planning {
			background-color: gray;
		}
		.status.alpha {
			background-color: lightblue;
		}
		.status.beta {
			background-color: blue;
		}
		.status.shipped {
			background-color: green;
		}
.project > div:nth-of-type(2) {
	float: left;
	width: 48.82117%;
	margin-right: 2.35765%;
}
.project > div:nth-of-type(3) {
	float: left;
	width: 48.82117%;
}

Improve layout of status label

Improve layout of status label


.cell {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 33.334%;
  height: 216px;
  overflow: hidden;
  padding: 0;
  text-indent: -100%;
  white-space: nowrap;
  width: 33.334%;
}

.cell:nth-child(even) {
  border-left: 2px solid #D0D2D6;
  border-right: 2px solid #D0D2D6;
}

/* Cell Pieces */

.cell.x { background-image: url('/assets/images/cross.svg'); }
.cell.o { background-image: url('/assets/images/naught.svg'); }

/* Unoccupied Cells */

.cell:not(.occupied) { cursor: pointer; }

.cell:not(.occupied):hover {
  background-image: url('/assets/images/naught.svg');
  background-size: 33.334%;
  opacity: 0.5;
}

.cell {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 33.334%;
  height: 216px;
  overflow: hidden;
  padding: 0;
  text-indent: -100%;
  white-space: nowrap;
  width: 33.334%;
}

.cell:nth-child(even) {
  border-left: 2px solid #D0D2D6;
  border-right: 2px solid #D0D2D6;
}

/* Cell Pieces */

.cell.x { background-image: url('../images/cross.svg'); }
.cell.o { background-image: url('../images/naught.svg'); }

/* Unoccupied Cells */

.cell:not(.occupied) { cursor: pointer; }

.cell:not(.occupied):hover {
  background-image: url('../images/naught.svg');
  background-size: 33.334%;
  opacity: 0.5;
}

Fix image urls in CSS

Fix image urls in CSS


/**
 * @file
 * This file contains the basic style for any page.
 */

html {
    /*
     * Always show page scroll-bar to prevent side-movement when hovering over items that are extending their height and
     * suddenly the content doesn't fit above the fold.
     */
    overflow-y: scroll;
}

.mainHeader.with-navbar-default .navbar-default {
    /**
     * The mainHeader navbar should not have rounded borders when it is not fixed.
     *
     * @see: Navbar.Position.DEFAULT
     * @see: bootstrap::navbar.less
     */
    border-radius: 0;
}

.mainHeader.with-navbar-fixed-top {
    /**
     * The mainHeader doesn't have any height when the navbar is fixed, and other elements are behind it.
     *
     * HACK: The default bootstrap navbar is 50px height and has a bottom margin of 20px for the default font size.
     *
     * TODO: Convert to LESS and use Bootstrap variables.
     * @see: Navbar.Position.TOP
     * @see: bootstrap::navbar.less
     */
    min-height: 50px;
    margin-bottom: 20px;
}

.mainContainer {
    /**
     * The main page content should have some height.
     */
    min-height: 20em;
}

/**
 * @file
 * This file contains the basic style for any page.
 */

html {
    /*
     * Always show page scroll-bar to prevent side-movement when hovering over items that are extending their height and
     * suddenly the content doesn't fit above the fold.
     */
    overflow-y: scroll;
}

.mainHeader.with-navbar-default .navbar-default {
    /*
     * The mainHeader navbar should not have rounded borders when it is not fixed.
     *
     * @see: Navbar.Position.DEFAULT
     * @see: bootstrap::navbar.less
     */
    border-radius: 0;
}

.mainHeader.with-navbar-fixed-top {
    /*
     * The mainHeader doesn't have any height when the navbar is fixed, and other elements are behind it.
     *
     * HACK: The default bootstrap navbar is 50px height and has a bottom margin of 20px for the default font size.
     *
     * TODO: Convert to LESS and use Bootstrap variables.
     * @see: Navbar.Position.TOP
     * @see: bootstrap::navbar.less
     */
    min-height: 50px;
    margin-bottom: 20px;
}

.mainContainer {
    /*
     * The main page content should have some height.
     */
    min-height: 20em;
}

.mainFooter {
    /*
     * Add some spacing around the footer.
     */
    margin-top: 2em;
    margin-bottom: 2em;
}

Add some spacing around mainFooter.

Add some spacing around mainFooter.


DIV.title
{ color: #000;
  vertical-align: bottom;
  padding-top: 8px;
  padding-left: 1em;
  padding: 5px;
  background-color: #fff;
  border-bottom: 1px solid #555; }

DIV.title SPAN
{ float: left;
  line-height: 14px;
  text-align: right;
  width: 120px; }

DIV.title SPAN.value
{ float: none;
  margin-left: 1em;
  font-size: 14px;
  font-weight: bold; }

DIV.title LABEL
{ display: block;
  clear: both; }

DIV.calendarUserRights,
DIV.basicUserRights
{ margin: 1em;}

DIV.calendarUserRights SPAN
{ float: left;
  clear: right;
  line-height: 2em;
  margin-right: 1em;
  text-align: right;
  width: 220px; }

DIV.buttons
{ text-align: right;
  margin: 1em;
  margin-top: 0px; }

DIV.dialog.none
{ position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  margin: 25px auto; }

DIV.title
{ color: #000;
  vertical-align: bottom;
  padding-top: 8px;
  padding-left: 1em;
  padding: 5px;
  background-color: #fff;
  border-bottom: 1px solid #555; }

DIV.title SPAN
{ float: left;
  line-height: 14px;
  text-align: right;
  width: 120px; }

DIV.title SPAN.value
{ float: none;
  margin-left: 1em;
  font-size: 14px;
  font-weight: bold; }

DIV.title LABEL
{ display: block;
  clear: both; }

DIV.calendarUserRights,
DIV.basicUserRights
{ margin: 1em;}

DIV.calendarUserRights SPAN
{ float: left;
  clear: right;
  line-height: 2em;
  margin-right: 1em;
  text-align: right;
  width: 120px; }

DIV.buttons
{ text-align: right;
  margin: 1em;
  margin-top: 0px; }

DIV.dialog.none
{ position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  margin: 25px auto; }

Improve user rights editor in calendar module


[data-role=header] {
/*  cursor: context-menu; */
}
[data-role=header] .header-title {
}

.status-message {
  margin-bottom: -1em !important;
  font-weight: lighter !important;
/*  text-align: center !important; */
}
.error-status-message {
  color: firebrick !important;
}
.result-status-message {
  color: darkgreen !important;
}

.crushed-vertical {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}
.compact-vertical {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.subdued {
  color: gray;
}

.multiple-listviews .ui-content .ui-listview {
  /* Independently derived workaround for multiple-listviews spacing problem:
     https://github.com/jquery/jquery-mobile/issues/1204 */
  margin: -1px -15px -1px -15px !important;
}
/* I couldn't get .multiple-listviews right on the items, so I use this to
   compensate in the login form.  Argh. */
.compact-paragraph {
  margin: 10px; }

.empty-sign {
  color: gray !important;
}

Add some eventually useful stubs.

Add some eventually useful stubs.


/* Comfortable layout for Kindle content manager */
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix("https://www.amazon.co.jp/mn/dcw/myx.html") {
  /* Add more height to "List of collection" box in "Add to collection" screen */
  .bulkAddToCollectionDialog_myx .myx-lgtbox-collection-vertical-scroll.recentCollection_myx {
    height: 30vh !important;
  }

  /* Enlarge the count of contents */
  .contentCount_myx {
    font: 1rem/2 sans-serif !important;
  }
  .contentCount_myx b {
    padding-right: 0.2em !important;
  }

  /* Avoid text wrap on table header */
  div[list-view-header-dmyx] .myx-column {
    white-space: nowrap !important;
    font-size: 12px !important;
  }
}

/* Comfortable layout for Kindle content manager */
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix("https://www.amazon.co.jp/mn/dcw/myx.html") {
  /* Add more height to "List of collection" box in "Add to collection" screen */
  .bulkAddToCollectionDialog_myx .myx-lgtbox-collection-vertical-scroll.recentCollection_myx {
    height: 35vh !important;
  }

  /* Enlarge the count of contents */
  .contentCount_myx {
    font: 1rem/2 sans-serif !important;
  }
  .contentCount_myx b {
    padding-right: 0.2em !important;
  }

  /* Avoid text wrap on table header */
  div[list-view-header-dmyx] .myx-column {
    white-space: nowrap !important;
    font-size: 12px !important;
  }
}

Adjust the height to be able to show more candidates


@import 'css/theme.css';

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

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

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

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

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

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

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

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

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

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

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

@import 'css/theme.css';

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

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

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

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

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

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

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

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

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

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

.rst-versions {
    border-top: none;
    background-color: #556270;
}

.rst-versions .rst-current-version {
    background: transparent;
}

Make rst versions bar slate.

Make rst versions bar slate.


.node path.success {
  fill: #729FCF;
}

.node path.unstable {
  fill: #FCE94F;
}

.node path.failure {
  fill: #EF2929;
}

.node path.aborted {
  fill: #ABABAB;
}

.node path.pending {
  fill: #ABABAB;
}

.node text.better {
  fill: #29EF29;
}

.node text.worse {
  fill: #EF2929;
}

.node circle {
  fill: white;
}

.node {
  font: 15px sans-serif;
}

@-webkit-keyframes blink {
    from { opacity: 1.0 }
    to { opacity: 0.0 }
 }

.node path.pending {
    -webkit-animation-name: blink;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5;
}

.node path.success {
  fill: #729FCF;
}

.node path.unstable {
  fill: #FCE94F;
}

.node path.failure {
  fill: #EF2929;
}

.node path.aborted {
  fill: #ABABAB;
}

.node path.pending {
  fill: #ABABAB;
}

.node text.better {
  fill: #29EF29;
}

.node text.worse {
  fill: #EF2929;
}

.node circle {
  fill: white;
}

.node {
  font: 15px sans-serif;
}

@-webkit-keyframes blink {
    from { opacity: 1.0 }
    to { opacity: 0.0 }
}

@-moz-keyframes blink {
    from { opacity: 1.0 }
    to { opacity: 0.0 }
}

@keyframes blink {
    from { opacity: 1.0 }
    to { opacity: 0.0 }
}

.node path.pending {
    -webkit-animation-name: blink;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -moz-animation-name: blink;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    animation-name: blink;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5;
}

Add support for Firefox Animations

Add support for Firefox Animations


.disks-ul {
    list-style-type: none;
    display: inline;
}

.smaller {
    font-size: 75%;
}

.disks-ul {
    list-style-type: none;
    display: inline;
    padding: 0;
}

.smaller {
    font-size: 75%;
}

Remove padding in disks list in VmDetail


.hide {
  display: none;
}

#content {
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: grid;
  grid: [row1-start] "header header" 1fr [row1-end]
        [row2-start] "menu   result" 10fr [row2-end]
        [row3-start] "footer footer" 1fr [row3-end]
        / 1fr 2fr;
}

#header {
  grid-area: header;
  place-self: center center;
}

#menu {
  grid-area: menu;
  border-right: 1px solid black;
  margin: auto 0;
  display: grid;
  grid: [row1-start] "keywords" 1fr [row1-end]
        [row2-start] "news    " 1fr [row2-end]
        [row3-start] "actions " 1fr [row3-end]
        / 1fr;
  place-items: center end;
  padding: 4vh 4vw;
}

.menu-label {
  padding: 1.5vh 0;
}

.menu-label:hover,
#menu > input:checked + label {
  font-weight: bold;
}

#keywords {
  grid-area: keywords;
}

#new {
  grid-area: news;
}

#actions {
  grid-area: actions;
}

#selected-option {
  overflow: hidden;
  grid-area: result;
  margin: 4vh 4vw;
}
#selected-option:hover {
  overflow:auto;
}

#slogan {
  width: 100%;
  height: 100%;
  display: flex;
}

#slogan > p {
  margin: auto;
}

#footer {
  grid-area: footer;
  place-self: center center;
}

Add design to main page

Add design to main page


/* https://material.google.com/layout/responsive-ui.html#responsive-ui-breakpoints */
@custom-media --sm-viewport (min-width: 600px);
@custom-media --md-viewport (min-width: 960px);
@custom-media --lg-viewport (min-width: 1280px);

/* https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints */
@custom-media --sm-viewport (min-width: 600px);
@custom-media --md-viewport (min-width: 960px);
@custom-media --lg-viewport (min-width: 1280px);

Update link to breakpoints guide

Update link to breakpoints guide


/*
===============================================================================
 This file contain extra CSS rules to customize the YunoHost user portal and
 can be used to customize app tiles, buttons, etc...
===============================================================================
*/

/* Make page texts black */
.user-container h2,
.user-container small,
.user-container .user-mail,
.user-container .user-mail,
.content .footer a,
a.app-tile,
#ynh-logout {
  color: black !important;
}

.content {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.ynh-user-portal {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
}

/* Apps colors */
.app-tile {
  background-color: rgba(255, 255, 255, 0.5) !important;
}

.app-tile:hover:after,
.app-tile:focus:after,
.app-tile:hover:before,
.app-tile:focus:before {
    background: rgba(255, 255, 255, 0.5) !important;
}

/* Use a custom logo image */
#ynh-logo {
  z-index: 10;
  background-image: url("./cloud.png");
}

/*
===============================================================================
 This file contain extra CSS rules to customize the YunoHost user portal and
 can be used to customize app tiles, buttons, etc...
===============================================================================
*/

/* Make page texts black */
.user-container h2,
.user-container small,
.user-container .user-mail,
.user-container .user-mail,
.content .footer a,
a.app-tile,
#ynh-logout {
  color: black !important;
}

.ynh-user-portal {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
}

/* Apps colors */
.app-tile {
  background-color: rgba(255, 255, 255, 0.5) !important;
}

.app-tile:hover:after,
.app-tile:focus:after,
.app-tile:hover:before,
.app-tile:focus:before {
    background: rgba(255, 255, 255, 0.5) !important;
}

/* Use a custom logo image */
#ynh-logo {
  z-index: 10;
  background-image: url("./cloud.png");
}

Revert "corrected background scrolling for clouds theme"

This reverts commit 4b97eb7c6605612e1a43a09094082e43bf46f71f.


.border-darken-1 { border-color: var(--darken-1) }
.border-darken-2 { border-color: var(--darken-2) }
.border-darken-3 { border-color: var(--darken-3) }
.border-darken-4 { border-color: var(--darken-4) }

.border-lighten-1 { border-color: var(--lighten-1) }
.border-lighten-2 { border-color: var(--lighten-2) }
.border-lighten-3 { border-color: var(--lighten-3) }
.border-lighten-4 { border-color: var(--lighten-4) }

Add back border-darken and -lighten from v7 basscss


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

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

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

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

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

/* Our main app */
.ClocketteApp {

}

Add default style for html, body

Add default style for html, body


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

.jp-Terminal {
  min-width: 240px;
  min-height: 120px;
}

.jp-Terminal-body {
  padding: 8px;
}

[data-jp-theme-light='true'] .xterm .xterm-screen canvas {
  border: 1px solid white;
}

[data-jp-theme-light='false'] .xterm .xterm-screen canvas {
  border: 1px solid black;
}

Remove visible 1px border for terminal

Remove visible 1px border for terminal

As discussed in #9529, the border is unnecessary and can be distracting depending on the combination of colors/background of the theme and terminal.

As per @jasongrout's suggestion, removing the border rules altogether rather than trying to fiddle with matching its color to the theme/terminal.

Closes #9529.


.test {
    background-color: blueviolet;
}

#map-component {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 0;
    background-color: royalblue;
}

#finalized-component {
    width: 300px;
    background-color: red;
    height: 100%;
    overflow-y: auto;
}

#unfinalized-component {
    width: 300px;
    background-color: red;
    height: 100%;
    overflow-y: auto;
}

#trip {
    height: 100vmin;
    position: relative;
}

.foreground {
    width: 100%;
    height: 100vmin;
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

#add-button-component {
    z-index: 5;
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 30px;
}

#add-form-container {
    height: 500px;
    width: 600px;;
}

.test {
    background-color: blueviolet;
}

#map-component {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 0;
    background-color: royalblue;
}

#finalized-component {
    width: 300px;
    background-color: red;
    height: 100%;
    overflow-y: auto;
    pointer-events: auto;
}

#unfinalized-component {
    width: 300px;
    background-color: red;
    height: 100%;
    overflow-y: auto;
    pointer-events: auto;
}

#trip {
    height: 100vmin;
    position: relative;
}

.foreground {
    width: 100%;
    height: 100vmin;
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

#add-button-component {
    z-index: 5;
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 30px;
}

#add-form-container {
    height: 500px;
    width: 600px;;
}

Fix dragging map when clicking in left/right columns


.length-break {
	word-break: break-all !important;
}

#tbl_domain_list td {
	font-family:'Roboto Mono' !important;
}

#tbl_record_manage td {
	font-family:'Roboto Mono' !important;
}

.length-break {
	word-break: break-all !important;
}

table td {
	font-family:'Roboto Mono' !important;
}

Change default font to Roboto Mono for all table data.


.row {
  vertical-align: top;
}

  @media (--w-l-800) {
    .row + .row {
      margin-top: var(--gutter);
    }
  }

  @media (--w-800) {
    .row {
      /* WARNING | fixed for two langs; needs to be smarter */
      width: 50%;
      display: inline-block;
      padding-right: var(--gutter);
    }

    .row + .row {
      padding-right: 0;
      padding-left:  var(--gutter);
    }
  }

/*.row {
  background: #eee;
}

.row + .row {
  background: #ddd;
}*/

@media (--w-l-800) {
  .hide-l-800 {
    display: none;
  }
}

@media (--w-800) {
  .hide-800 {
    display: none;
  }
}

.row {
  vertical-align: top;
}

  @media (--w-l-800) {
    .row + .row {
      margin-top: var(--gutter);
    }
  }

  @media (--w-800) {
    .row {
      /* WARNING | fixed for two langs; needs to be smarter */
      width: 50%;
      display: inline-block;
      /*padding-right: var(--gutter);*/
    }

    /*.row + .row {
      padding-right: 0;
      padding-left:  var(--gutter);
    }*/
  }

/*.row {
  background: #eee;
}

.row + .row {
  background: #ddd;
}*/

@media (--w-l-800) {
  .hide-l-800 {
    display: none;
  }
}

@media (--w-800) {
  .hide-800 {
    display: none;
  }
}

Comment middle gutter styling for two-col layout


.qk_image_upload_frame {
    position: fixed;
    top: 5%;
    left: 5%;
    border-style: none;
    border-width: 1px;
    border-radius: 0px 0px 5px 5px;
    padding: 2px;
    z-index: 250;
    width: 90%;
    max-width: 600px;
    height: 90%;
    max-height: 430px;
    -webkit-box-shadow: 3px 3px 4px #555;
    box-shadow: 3px 3px 4px #555;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

.qk_image_upload_frame {
    position: fixed;
    top: 5%;
    left: 5%;
    border-style: none;
    border-width: 1px;
    border-radius: 0px 0px 5px 5px;
    padding: 2px;
    z-index: 250;
    width: 90%;
    max-width: 600px;
    height: 90%;
    max-height: 600px;
    -webkit-box-shadow: 3px 3px 4px #555;
    box-shadow: 3px 3px 4px #555;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

Make box higher so portrait images don't automatically cause a scroll


body {
	font-family: 'Lato', sans-serif;
	font-size: 1em;
	color: #4C4951;
}
h1 {
	color: black;
}
table, td, th {
  color: #4C4951;
  font-size: 1.25em;
  background-color: #90EE90;
  border-radius: 10px;
}

td {
  height: 60px;
	width: 60px;
	text-align: center;
}

td:hover {
   background-color: #EEE;
}

p {
	font-size: 1.25em;
}

button {
	height: 45px;
	width: 100px;
	font-size: 1.125em;
	color: #4C4951;;
	border-radius: 7px;
	background-color: #E0E0D1;
}

button:hover {
	background-color: #CCCCB2;
}

.button {
	margin-top: 20px;
}

.updates {
	max-width: 300px;
}

body {
	font-family: 'Lato', sans-serif;
	font-size: 1em;
	color: #4C4951;
}
h1 {
	color: black;
}
table, td, th {
  color: #4C4951;
  font-size: 1.25em;
  background-color: #90EE90;
  border-radius: 10px;
}

td {
  height: 60px;
	width: 60px;
	text-align: center;
}

td:hover {
   background-color: #EEE;
}

p {
	font-size: 1.25em;
}

button {
	height: 45px;
	width: 100px;
	font-size: 1.125em;
	color: #4C4951;;
	border-radius: 7px;
	background-color: #E0E0D1;
}

button:hover {
	background-color: #CCCCB2;
}

.button {
	margin-top: 20px;
}

.updates {
	width: 250px;
	float: left;
	margin: 10px;
}

#board {
	float: left;
}

.game-container {
	width: 600px;
	margin: auto;
}

Add game container with side by side board and updates


/* https://bitsofco.de/holy-grail-layout-css-grid */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout */

:root {
  --lighter:  #ccc;
  --lightest: #fff;
  --darker:   #999;
  --darkest:  #444;
  --background: pink;
}

header, footer
  { background: var(--darker) }

aside
  { background: var(--background) }

/* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout */

Migrate link to CSS grid layout

Migrate link to CSS grid layout


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

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

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

body {
    font-family: serif;
    font-size: 14pt;
    padding: 0.5em;
}

h1, h2, h3, h4, h5, h6, p {
    margin-top: 0.75em;
}

h1 {
    font-size: x-large;
    font-weight: bold;
}

h2 {
    font-size: large;
    font-weight: bold;
}

h3 {
    font-weight: bold;
}

b, strong {
    font-weight: bolder;
}

i, em {
	font-style: italic;
}

ol {
    list-style-type: decimal;
    padding-left: 40px;
    margin-top: 0.25em;
}

ul {
    list-style-type: disc;
    padding-left: 40px;
    margin-top: 0.25em;
}

a {
    color: blue;
    text-decoration: underline
}

code, tt, pre, kbd {
	font-family: monospace;
}

th {
    font-weight: bold;
}

td, th {
    padding: 1px 2px;
}

small {
    font-size: smaller;
}

big {
    font-size: larger;
}

center {
    text-align: center;
}

Patch for HARMONY-4572 "[classlib][swing][html] Tag <center> doesn't work"

svn path=/harmony/; revision=563455


.back {
    box-shadow: none !important;
    color: transparent;
    font-size: 0;
    height: 1.5rem;
    margin: 2rem 0 0 1rem;
    overflow: hidden;
    position: absolute;
    top: 0;
    user-select: none;
    width: 1.5rem;
    z-index: 1;
}

.back::before,
.back::after {
    background-color: rgb(77, 77, 77);
    border-radius: 1px;
    content: '';
    display: block;
    height: 2px;
    margin-top: -1px;
    position: absolute;
    top: 50%;
    width: 100%;
    z-index: -1;
    transition: transform 125ms ease;
}

.back::before {
    transform: rotate(45deg);
}

.back::after {
    transform: rotate(-45deg);
}

.back:hover::before {
    transform: rotate(45deg) scale(1.2);
}

.back:hover::after {
    transform: rotate(-45deg) scale(1.2);
}

.back:active::before {
    transform: rotate(45deg) scale(1);
}

.back:active::after {
    transform: rotate(-45deg) scale(1);
}

@media print {
    .back {
        display: none;
    }
}

Hide Back button when printing

Hide Back button when printing


/* Google web search tweak */
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("https://www.google.com/search"),
               url-prefix("https://www.google.co.jp/search"),
               url-prefix("https://www.google.com/#q="),
               url-prefix("https://www.google.co.jp/#q=") {
  /* Result */
  .mw .s { line-height: 1.5 !important; }

  /* ADs */
  .mw :-moz-any(#tads, #bottomads) { background: #ffd !important; }

  /* ChillingEffects */
  .mw .mfr   { font: x-small/1.4 sans-serif !important; opacity: 0.6 !important; }
  .mw .mfr i { font-style: normal !important; }

  /* Missing words and/or Recently visited page*/
  .mw ._Tib   { font: bold large/2 sans-serif !important; }
  .mw ._Tib s { text-decoration: none !important; }

  /* Google promotion */
  .mw #wmxmsg { opacity: 0.3 !important; }
}

/* Google web search tweak */
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("https://www.google.com/search"),
               url-prefix("https://www.google.co.jp/search"),
               url-prefix("https://www.google.com/#q="),
               url-prefix("https://www.google.co.jp/#q=") {
  /* Result */
  .mw .s { line-height: 1.5 !important; }

  /* ADs */
  .mw :-moz-any(#tads, #bottomads) { background: #ffd !important; }

  /* ChillingEffects */
  .mw .mfr   { font: x-small/1.4 sans-serif !important; opacity: 0.6 !important; }
  .mw .mfr i { font-style: normal !important; }

  /* Missing words and/or Recently visited page*/
  .mw ._Tib   { font: bold large/2 sans-serif !important; }
  .mw ._Tib s { text-decoration: none !important; }

  /* Hacked / Compromised */
  .mw .slp a.fl:-moz-any([href^="/url"], [href^="/support"]):only-child { color: #d00 !important; font-weight: bold !important; }

  /* Google promotion */
  .mw #wmxmsg { opacity: 0.3 !important; }
}

Emphasize warnings on hacked pages

Emphasize warnings on hacked pages

The false positives could be eliminated.
See commit 920125a803a5f892b7a5f5d5935c894633edd05f for previous commit.


@charset "UTF-8";

.center {
	margin: auto;
	padding: 30px;
  	display: inline-block;
  	align-items: center;
}

.banner {
	width: auto;
	background-color: #fce0b3;
}

#nav-ul > li {
	padding: 0, 7px, 0, 10px;
	font-size: 20px;
}

#sidenav-ul > li {
	height: 35px;
	margin: 3px;
	font-size: 18px;
}
#sidenav-ul .a-hovered {
	color: #ffffff;
}
#sidenav-ul a {
	color: #001155;
}
#sidenav-ul-pressed > li {
	background-color: #ffffff;
}

#brand {
	font-size: 32px;
	color: #99ffff;
}

#sidenav {
	background-color: #b2e692;
	width: 18%;
	height: 100%;
	float: left;
}

@charset "UTF-8";

.center {
	margin: auto;
	padding: 30px;
  	display: inline-block;
  	align-items: center;
}

.banner {
	width: auto;
	background-color: #fce0b3;
}

#nav-ul > li {
	padding: 0, 7px, 0, 10px;
	font-size: 20px;
}

#sidenav-ul > li {
	height: 35px;
	margin: 3px;
	font-size: 18px;
}
#sidenav-ul .a-hovered {
	color: #ffffff;
}
#sidenav-ul a {
	color: #001155;
}
#sidenav-ul-pressed > li {
	background-color: #ffffff;
}

#brand {
	font-size: 32px;
	color: #99ffff;
}

#sidenav {
	background-color: #b2e692;
	width: 18%;
	height: 100vh;
	float: left;
}

Make sidenav div 100% of the window size.


.schedule {
    border-collapse: collapse;
}

.schedule__zone {
    font-weight: normal;
    text-align: left;
    font-size: 14px;
    line-height: 20px;

    color: #262626;

    padding-left: 8px;
    padding-bottom: 12px;
}

.schedule__time {
    vertical-align: top;
    font-size: 14px;
    line-height: 20px;

    padding: 28px 16px 28px 12px;

    color: #262626;
}

.schedule__row:hover {
    background: linear-gradient(93.71deg, rgba(176, 126, 197, 0.1) 0%, rgba(87, 227, 201, 0.1) 100%);
}

.schedule__activity-cell {
    padding: 12px 12px 12px 0;
    vertical-align: top;
}

.schedule__activity {
    display: inline-block;
    background: #ffffff;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06), 0 2px 2px rgba(0, 0, 0, 0.12);
    border-radius: 2px;
    padding: 16px;

    font-weight: 500;
    font-size: 14px;
    line-height: 20px;

    color: #262626;
}

.schedule {
    border-collapse: collapse;
}

.schedule__zone {
    font-weight: normal;
    text-align: left;
    font-size: 14px;
    line-height: 20px;

    color: #262626;
}

.schedule__time {
    vertical-align: top;
    font-size: 14px;
    line-height: 20px;

    color: #262626;

    padding-top: 40px;
    padding-right: 16px;
}

.schedule__activity-cell {
    vertical-align: top;
    padding-top: 24px;
    padding-right: 24px;
}

.schedule__activity-cell:last-child {
    padding-right: 0;
}

.schedule__activity {
    display: inline-block;
    background: #ffffff;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06), 0 2px 2px rgba(0, 0, 0, 0.12);
    border-radius: 2px;
    padding: 16px;

    font-weight: 500;
    font-size: 14px;
    line-height: 20px;

    color: #262626;
}

Remove hover for rows of schedule

Remove hover for rows of schedule


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

.label {
  border-style: solid;
  border-width: 1px;
  composes: reset-font-smoothing;
  display: inline-block;
  font-family: var(--font-family-medium);
  vertical-align: middle;
}

.neutral {
  background-color: color(var(--color-neutral) a(48%));
  border-color: color(var(--color-neutral-dark) a(48%));
  color: var(--color-teal-darkest);
}

@each $color in (mint, violet, ruby, gold, aqua) {
  .$(color) {
    background-color: color(var(--color-$(color)-light) a(48%));
    border-color: color(var(--color-$(color)-light) a(48%));
    color: var(--color-$(color)-darkest);
  }
}

.medium {
  font-size: calc(1.4 * var(--unit));
  line-height: calc(1.8 * var(--unit));
  border-radius: 14px;
  padding: 3px 12px;
}

.small {
  font-size: calc(1.2 * var(--unit));
  line-height: calc(1.4 * var(--unit));
  border-radius: 11px;
  padding: 2px 12px;
}

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

.label {
  border-style: solid;
  border-width: 1px;
  composes: reset-font-smoothing;
  display: inline-block;
  font-family: var(--font-family-medium);
  text-transform: none;
  vertical-align: middle;
}

.neutral {
  background-color: color(var(--color-neutral) a(48%));
  border-color: color(var(--color-neutral-dark) a(48%));
  color: var(--color-teal-darkest);
}

@each $color in (mint, violet, ruby, gold, aqua) {
  .$(color) {
    background-color: color(var(--color-$(color)-light) a(48%));
    border-color: color(var(--color-$(color)-light) a(48%));
    color: var(--color-$(color)-darkest);
  }
}

.medium {
  font-size: calc(1.4 * var(--unit));
  line-height: calc(1.8 * var(--unit));
  border-radius: 14px;
  padding: 3px 12px;
}

.small {
  font-size: calc(1.2 * var(--unit));
  line-height: calc(1.4 * var(--unit));
  border-radius: 11px;
  padding: 2px 12px;
}

h1,
h2,
h3,
h4,
p {
  .label {
    margin-left: 6px;
  }
}

Add styles to ensure consistency when status label is placed inline of Text


/*
Theme Name:         Utah Beer Finder
Description:        Find the best beer available in Utah
Version:            0.1
Author:             Jeff Stieler
Author URI:         http://jeffstieler.com/
Template:           storefront
License:            MIT License
License URI:        http://www.opensource.org/licenses/mit-license.php
*/

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

  Unfortunately WordPress will require a style.css file
  located in the theme's root folder for stuff to work.

  However, we will not be using vanilla CSS. We're using Sass.

  Sass is a superset of CSS that adds in amazing features
  such as variables, nested selectors and loops. It's also
  the easiest way to customize Foundation.

  All Sass files are located in the /scss folder.

  Please read the README.md file before getting started. More info on how
  to use Sass with Foundation can be found here:
  http://foundation.zurb.com/docs/sass.html

  If you for some reason would like to write plain css instead of using Sass,
  you could just enqueue this file (style.css) to the header and add your styles in this file

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

/*
Theme Name:         Utah Beer Finder
Description:        Find the best beer available in Utah
Version:            0.1
Author:             Jeff Stieler
Author URI:         http://jeffstieler.com/
Template:           flatsome
License:            MIT License
License URI:        http://www.opensource.org/licenses/mit-license.php
*/

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

  Unfortunately WordPress will require a style.css file
  located in the theme's root folder for stuff to work.

  However, we will not be using vanilla CSS. We're using Sass.

  Sass is a superset of CSS that adds in amazing features
  such as variables, nested selectors and loops. It's also
  the easiest way to customize Foundation.

  All Sass files are located in the /scss folder.

  Please read the README.md file before getting started. More info on how
  to use Sass with Foundation can be found here:
  http://foundation.zurb.com/docs/sass.html

  If you for some reason would like to write plain css instead of using Sass,
  you could just enqueue this file (style.css) to the header and add your styles in this file

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

Use “Flatsome” theme as parent.

Use “Flatsome” theme as parent.


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-size: 12px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.5em;
    background: #fafbfc;
    color: #111;
}

main {
    display: block;
    width: 100%;
    max-width: 950px;
    margin: 0 auto;
    padding: 1.5em 0;
}

Add missing file to git index

fix: Add missing file to git index


.overlayRoot {
    position: fixed;
    z-index: 1500;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: white;
    overflow-y: scroll;
}

.overlayFixed {
    background-color: white;
    position: fixed;
    width: 100%;
    z-index: 1600;
}

.overlayBlock {
    position: fixed;
    z-index: 1400;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.overlayContent {
    padding: 20px 10px;
    position: relative;
    z-index: 1500;
}

.overlayRoot {
    position: fixed;
    z-index: 1500;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: white;
    overflow-y: scroll;
}

.overlayFixed {
    background-color: white;
    position: fixed;
    width: 100%;
    z-index: 1600;
}

.overlayBlock {
    position: fixed;
    z-index: 1400;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.overlayContent {
    position: relative;
    z-index: 1500;
}

Fix padding on overlay content

Fix padding on overlay content


body {
  background: black;
  margin: 0px;
}

.header {
  background: #fffffd;
  padding: 5px;
  font-family: ‘Lucida Console’, Monaco, monospace;
}

.title {
  font-size: 2em;
}

.bold {
  font-weight: bold;
}

.online {
  float: right;
}

.terminal {
  font-family: 'Inconsolata', sans-serif;
  font-size: 14px;
  padding-left: 3px;
  padding-right: 3px;
  overflow: hidden;
}

.reverse-video {
  color: #000000;
  background: #ccc;
}

body {
  background: black;
  margin: 0px;
}

.header {
  background: #fffffd;
  padding: 5px;
  font-family: ‘Lucida Console’, Monaco, monospace;
}

.title {
  font-size: 2em;
}

.bold {
  font-weight: bold;
}

.online {
  float: right;
}

.terminal {
  font-family: 'Inconsolata', monospace;
  font-size: 12px;
  padding: 5px;
  overflow: hidden;
}

.reverse-video {
  color: #000000;
  background: #ccc;
}

Fix font to default to monospace, and reduce its size.


table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode, table.sourceCode pre
   { margin: 0; padding: 0; border: 0; vertical-align: baseline; border: none; }
td.lineNumbers { border-right: 1px solid #AAAAAA; text-align: right; color: #AAAAAA; padding-right: 5px; padding-left: 5px; }
td.sourceCode { padding-left: 5px; }
code.sourceCode span.kw { color: #007020; font-weight: bold; }
code.sourceCode span.dt { color: #902000; }
code.sourceCode span.dv { color: #40a070; }
code.sourceCode span.bn { color: #40a070; }
code.sourceCode span.fl { color: #40a070; }
code.sourceCode span.ch { color: #4070a0; }
code.sourceCode span.st { color: #4070a0; }
code.sourceCode span.co { color: #60a0b0; font-style: italic; }
code.sourceCode span.ot { color: #007020; }
code.sourceCode span.al { color: red; font-weight: bold; }
code.sourceCode span.fu { color: #06287e; }
code.sourceCode span.re { }
code.sourceCode span.er { color: red; font-weight: bold; }

Add styles directly from pandoc

Add styles directly from pandoc


body {
  height: 100vh;
  width: 100vw;
  background-image: url("../img/space.jpg");
  background-size: cover;
  color: #fff;
  font-family: sans-serif;
}
#board {
  height: 400px;
  width: 800px;
  background-color: #3399ff;
  padding: 5px;
}

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

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

body {
  height: 100vh;
  width: 100vw;
  background-image: url("../img/space.jpg");
  background-size: cover;
  color: #fff;
  font-family: sans-serif;
}
#board {
  height: 400px;
  width: 800px;
  background-color: #3399ff;
  padding: 5px;
}

.cell {
  min-height: 25%;
  min-width: 20%;
  background-color: rgba(255,255,255,0.25);
  display: inline-block;
  margin: 0.25%;
}

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

Change cell dimensions to percentage of board container, transparent white background, and 0.25% margin


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

body {
  color: #333;
  margin: 14px 17px;
}

section + section::before {
  background-color: #eee;
  content: ' ';
  display: block;
  height: 1px;
  position: relative;
  top: 0;
}

h2 {
  margin-bottom: 0.65em;
}

fieldset#audit-rules {
  border: 0 none;
  padding-top: 0;
}

.checkbox label  {
  display: -webkit-inline-box;
  padding-bottom: 6px;
  padding-top: 6px;
}

label input[type=checkbox] ~ span {
  -webkit-margin-start: 0.6em;
  display: block;
}

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

body {
  color: rgb(48, 57, 66);
  margin: 14px 17px;
}

section + section::before {
  background-color: #eee;
  content: ' ';
  display: block;
  height: 1px;
  position: relative;
  top: 0;
}

h2, h3 {
  margin-bottom: 0.8em;
}

fieldset#audit-rules {
  border: 0 none;
  padding-top: 0;
}

.checkbox label  {
  display: -webkit-inline-box;
  padding-bottom: 6px;
  padding-top: 6px;
}

label input[type=checkbox] ~ span {
  -webkit-margin-start: 0.6em;
  display: block;
}

Change h2, h3 margin-bottom to 0.8em

Change h2, h3 margin-bottom to 0.8em


 .nav-pills .nav-icon.terraform {
 	background-image: url(terraform/img/terraform.png);
 	height: 16px;
    display: inline-block;
    background-repeat: no-repeat;
 }
 .nav-pills li:hover i.terraform, .nav-pills li.active .nav-icon.terraform {
 	background-image: url(terraform/img/terraformw.png);
 }
 .prov-location-api {
  white-space: nowrap;
  float: right;
}

.select2-chosen .prov-location-api,
.select2-result .prov-location-api {
  float: right;
  font-size: x-small;
  position: absolute;
  margin-top: -10px;
  margin-right: 2px;
  right: 0;
}

Fix region code name dispay

Fix region code name dispay


label {
  margin-top: 8px;
  margin-bottom: 3px;
}

.btn-custom,
.btn-custom:hover {
    background-color: #1b307b;
}

Change button background color to mach

Change button background color to mach