.ui-searchFilter { display: none; position: absolute; z-index: 770; overflow: visible;}
.ui-searchFilter table {position:relative; margin:0em; width:auto}
.ui-searchFilter table td {margin: 0em; padding: 1px;}
.ui-searchFilter table td input, .ui-searchFilter table td select {margin: 0.1em;}
.ui-searchFilter .ui-state-default { cursor: pointer; }
.ui-searchFilter .divider { height: 1px; }
.ui-searchFilter .divider div { background-color: black; height: 1px; }

Remove a special char at beginning of the file


body {
  background-color: #F9F5FC;
}

div {
  background-color: #F1EEFA;
  border: 0.25em outset #F1EEFA;
  border-radius: 20%;
  color: #F1EEFA;
  display: inline-block;
  font-size: 2em;
  font-family: monospace;
  margin: 0;
  min-height: 1em;
  min-width: 1em;
}

.container {
  background-color: #F1EEFA;
  border: 0.5em solid #AAF;
  box-shadow: 0.25em 0.25em 0.25em #333;
  margin: 0 auto;
  padding: 2em;
  text-align: center;
  width: 30em;
}

body {
  background-color: #F9F5FC;
}
canvas {
  border: 1px solid #444;
}

.container {
  background-color: #F1EEFA;
  border: 0.5em solid #AAF;
  box-shadow: 0.25em 0.25em 0.25em #444;
  margin: 0 auto;
  padding: 2em;
  text-align: center;
  width: 30em;
}

Update stylesheet to give canvas a border


body {
    font: 12px Arial;
}

text.shadow {
    stroke: #fff;
    stroke-width: 2.5px;
    opacity: 0.9;
}

path {
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}

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

.grid .tick {
    stroke: lightgrey;
    stroke-opacity: 0.7;
    shape-rendering: crispEdges;
}
.grid path {
    stroke-width: 0;
}

.area {
    fill: lightsteelblue;
    stroke-width: 0;
}

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

.focus circle {
    fill: none;
    stroke: steelblue;
}

Add CSS to new chart function, tooltip

Add CSS to new chart function, tooltip


.login__below-form-left{
    float: left;
    width: auto;
}
.login__below-form-right{
    width: auto;
    float: right;
}
.login__below-form-right p{
    margin: 0;
}
.normal__input{
    width: 248px;
    padding-left: 40px;
}

.input__label-icon{
    height: 56px;
    position: relative;
    width: 20px;
    margin-top: -51px;
    z-index: 1;
    margin-left: 10px;
}

.help-inline{
    margin-left: 25px;
}

Add left padding for login error messages on input field.


body {
    padding-top: 70px;
}

#elements .panel {
    /* http://stackoverflow.com/a/26854682 */
    page-break-inside: avoid; /* For Firefox. */
    -webkit-column-break-inside: avoid; /* For Chrome & friends. */
    break-inside: avoid; /* For standard browsers like IE. :-) */
}

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    #elements {
        -webkit-columns: 2;
        -moz-columns: 2;
        columns: 2;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {

}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    #elements {
        -webkit-columns: 3;
        -moz-columns: 3;
        columns: 3;
    }
}

#elements .list-group-item {
    overflow: hidden;
}

Fix button groups misaligning at specific window widths


// Keep #konacha div visible so we can test against element visibility
#konacha {
  position: relative;
  left: -9999px;
  height: 0;
}

/* Keep #konacha div visible so we can test against element visibility */
#konacha {
  height: 0 ! important;
  overflow: hidden ! important;
}

Fix CSS comment; change hiding technique

Forcing zero-height requires overflow: hidden to work. left: -9999px seems
unnecessary then.


/** {
  outline: 1px solid red !important;
}*/
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -box-sizing: border-box;
}

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

input {
  background: grey;
  font-size: 18px;
}

form {
  display: inline-block;
}

.centered {
  text-align: center;
}

#pizzaSize {
  font-weight: 800;
}

.mover {
  position: fixed;
  width: 256px;
  z-index: -1;
}

.randomPizzaContainer {
  float: left;
  display: flex;
}

.randomPizzaContainer:after {
  content: "";
  display: table;
  clear:both;
}

 .container {
  background-color: rgba(240, 60, 60, 0.8);
}

@media screen and (max-width: 750px) {
  .pizzaSlider {
    display: none;
  }
  .pizzaImage {
    display: none;
  }
}

#randomPizzas {
  display: flex;
  flex-wrap: wrap;
}

Fix: Add flexbox to randomPizzas, much better


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

/**
 * A thin layer on top of normalize.css that provides a starting point more
 * suitable for web applications. Removes the default spacing and border for
 * appropriate elements.
 */

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
p,
pre {
    margin: 0;
}

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

iframe {
    border: 0;
}

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

/**
 * Suppress the focus outline on links that cannot be accessed via keyboard.
 * This prevents an unwanted focus outline from appearing around elements that
 * might still respond to pointer events.
 */

[tabindex="-1"]:focus {
  outline: none;
}

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

/**
 * A thin layer on top of normalize.css that provides a starting point more
 * suitable for web applications. Removes the default spacing and border for
 * appropriate elements.
 */

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
p,
pre {
    margin: 0;
}

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

iframe {
    border: 0;
}

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

/**
 * Suppress the focus outline on links that cannot be accessed via keyboard.
 * This prevents an unwanted focus outline from appearing around elements that
 * might still respond to pointer events.
 */

[tabindex="-1"]:focus {
  outline: none !important;
}

Add `!important` to the tabindex rule

Add `!important` to the tabindex rule

This style should apply irrespective of the specificity of other rules,
e.g., `:focus` rules applied in SUIT components.


body {
  margin: 1% 25% 1% 25%;
  font-family: 'Share Tech Mono', monospace;
}

input {
  font-family: inherit;
}

::selection {
  color: black;
  background: yellow;
}

::-moz-selection {
  color: black;
  background: yellow;
}

a {
  color: #07e;
}

a:hover {
  color: #FF3333;
}

#errors {
  color: IndianRed;
}

body {
  margin: 1% 25% 1% 25%;
  font-family: 'Share Tech Mono', monospace;
}

input, select {
  font-family: inherit;
}

::selection {
  color: black;
  background: yellow;
}

::-moz-selection {
  color: black;
  background: yellow;
}

a {
  color: #07e;
}

a:hover {
  color: #FF3333;
}

#errors {
  color: IndianRed;
}

Make selection also inherit font

Make selection also inherit font


/*
Theme Name:         FoundationPress
Theme URI:          http://foundationpress.olefredrik.com
Github Theme URI:   https://github.com/olefredrik/FoundationPress
Description:        FoundationPress is a WordPress starter theme based on Foundation 5 by Zurb
Version:            1.5.0
Author:             Ole Fredrik Lie
Author URI:         http://olefredrik.com/

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:         FoundationPress
Theme URI:          http://foundationpress.olefredrik.com
Github Theme URI:   https://github.com/olefredrik/FoundationPress
Description:        FoundationPress is a WordPress starter theme based on Foundation 5 by Zurb
Version:            1.5.0
Author:             Ole Fredrik Lie
Author URI:         http://olefredrik.com/

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 /assets/scss folder.
  Please note that none of your scss files will be compiled to /stylesheets/foundation.css before you run
  'npm run watch' or 'npm run build'.

  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

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

Update path for scss files in documentation


@import "sass/screen.css";

/* moved css to screen.scss */

.person .actions { cursor: pointer; }

Set cursor to pointer for add and edit links

Fixes #124.


.welcome {
  background: #039BE5;
}

.splash {
  margin: -50px -20px -100px;
}

.splash > core-icon {
  height: 100%;
  width: 100%;
}

.headline {
  position: relative;
  padding: 0 40px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  font-size: 16px;
  color: white;
}

.headline.wide {
  width: 512px;
  margin: 0 auto;
}

paper-fab {
  position: absolute;
  bottom: 24px;
  right: 24px;
  background: #355089;
  z-index: 10000;
}

.welcome {
  background: #039BE5;
}

.splash {
  margin: -50px 0 -100px;
}

.splash > core-icon {
  height: 100%;
  width: 100%;
}

.headline {
  position: relative;
  padding: 0 40px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  font-size: 16px;
  color: white;
}

.headline.wide {
  width: 512px;
  margin: 0 auto;
}

paper-fab {
  position: absolute;
  bottom: 24px;
  right: 24px;
  background: #355089;
  z-index: 10000;
}

Remove side margin from splash screen.

Remove side margin from splash screen.


html {
  background-color: var(--middle-background);
}

.app {
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--text-grey);
  display: flex;
  flex-wrap: wrap;
}

.none,
.top {
  flex-direction: row;
  justify-content: space-between;
  border-bottom: solid 1px var(--text-teal);
  align-items: center;
}

.left,
.right {
  flex-direction: column;
  justify-content: space-between;
}

.right {
  border-left: solid 1px var(--text-teal);
}

.left {
  border-right: solid 1px var(--text-teal);
}

.drag-handle {
  -webkit-app-region: drag;
}

:root {
  --launcher-border: solid 2px var(--text-teal);
}

html {
  background-color: var(--middle-background);
}

.app {
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--text-grey);
  display: flex;
  flex-wrap: wrap;
}

.none,
.top {
  flex-direction: row;
  justify-content: space-between;
  border-bottom: var(--launcher-border);
  align-items: center;
}

.left,
.right {
  flex-direction: column;
  justify-content: space-between;
}

.right {
  border-left: var(--launcher-border);
}

.left {
  border-right: var(--launcher-border);
}

.drag-handle {
  -webkit-app-region: drag;
}

Add css root to launcher variables

Add css root to launcher variables


/* Smaller paragraph margins on bookmarks page */
.pelican-bookmarks article.full li p,
.pelican-bookmarks article.full li li {
  margin: 0;
}
.pelican-bookmarks article.full li > p + p {
  margin-top: 0.2em;
}
.pelican-bookmarks article.full li {
  margin: 1em 0;
}

/* Feed links in blogroll */
.pelican-blogroll a.feed {
  display: none;
}
.pelican-blogroll li:hover a.feed {
  display: inline;
}

/* Custom templates with Markdown + JSON/YAML data source */
article.full + article.full {
  padding-top: 0;
}

/* Smaller paragraph margins on bookmarks page */
.pelican-bookmarks article.full li p,
.pelican-bookmarks article.full li li {
  margin: 0;
}
.pelican-bookmarks article.full li > p + p {
  margin-top: 0.5em;
}
.pelican-bookmarks article.full li {
  margin: 1em 0;
}

/* Feed links in blogroll */
.pelican-blogroll a.feed {
  display: none;
}
.pelican-blogroll li:hover a.feed {
  display: inline;
}

/* Custom templates with Markdown + JSON/YAML data source */
article.full + article.full {
  padding-top: 0;
}

Increase spacing between paragraphs in bookmark description


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

#websocket-feedback {
  display: none;
}

#sidebar {
  position: fixed;
  padding-top: 20px;
  height: 100%;
  overflow-y: auto;
}

.pre-scrollable {
  overflow-x: scroll;
  word-wrap: normal;
}

#job-list a {
  color: inherit;
}

Fix job list item title font color.

Fix job list item title font color.


.container > h1 {
    margin-bottom: 1rem;
    font-size: 16pt;
    font-weight: bold;
}

.container {
    padding: 1.5rem;
    background-color: #ffffff;
    border: solid 1px #DDDBDA;
    box-shadow: 1px -5px 3px -3px #b0adab7a;
}

.container .resource-list .resource-item {
    padding: 1rem 0;
    border-top: solid 1px  #DDDBDA;
    display: flex;
    justify-content: space-between;
}

.container .resource-list .resource-item span {
    text-align: left;
}

.container .resource-list .resource-item a {
    text-align: right;
    font-weight: bold;
}

.container .link > a {
    color: #006DDC;
    font-size: 16pt;
    font-weight: 400;
}

.container .label > span {
    font-size: 16pt;
    font-weight: 400;
}

.container > h1 {
    margin-bottom: 1rem;
    font-size: 16pt;
    font-weight: bold;
}

.container {
    padding: 1.5rem;
    background-color: #ffffff;
    border: solid 1px #DDDBDA;
    box-shadow: 1px 5px 3px -3px #b0adab7a;
}

.container .resource-list .resource-item {
    padding: 1rem 0;
    border-top: solid 1px  #DDDBDA;
    display: flex;
    justify-content: space-between;
}

.container .resource-list .resource-item span {
    text-align: left;
}

.container .resource-list .resource-item a {
    text-align: right;
    font-weight: bold;
}

.container .link > a {
    color: #006DDC;
    font-size: 16pt;
    font-weight: 400;
}

.container .label > span {
    font-size: 16pt;
    font-weight: 400;
}

[GS] Change Shadow position in resource component


.content {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  background-color: #111;
  -webkit-transition-property: top, bottom;
          transition-property: top, bottom;
  -webkit-transition-duration: .2s, .2s;
          transition-duration: .2s, .2s;
  -webkit-transition-timing-function: linear, linear;
          transition-timing-function: linear, linear;
  -webkit-overflow-scrolling: touch;
}

.action-bar + .tab-fixed + .content {
  top: 96px;
}

.tab-fixed + .content,
.action-bar ~ .content {
  top: 48px;
}

.inset {
  padding: 10px;
}

.scroll {
  overflow: auto;
}

.content {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  background-color: #111;
  -webkit-transition-property: top, bottom;
          transition-property: top, bottom;
  -webkit-transition-duration: .2s, .2s;
          transition-duration: .2s, .2s;
  -webkit-transition-timing-function: linear, linear;
          transition-timing-function: linear, linear;
  -webkit-overflow-scrolling: touch;
}

.action-bar + .tab-fixed + .content {
  top: 96px;
}

.tab-fixed + .content,
.action-bar ~ .content {
  top: 48px;
}

.inset {
  padding: 20px;
}

.scroll {
  overflow: auto;
}

Change .inset padding to 20px

Change .inset padding to 20px


.out-of-place {
  display: inline-block;
  position: relative;
}

.one {
  color: magenta;
  top: 500px;
}

.two {
  color: blue;
  top: 65px;
}

.three {
  color: yellow;
  top: 205px;
}

.four {
  top: 430px;
  color: cyan;
}

.five {
  color: lime;
  top: 130px;
}

.out-of-place {
  display: inline-block;
  position: relative;
  -webkit-transform: rotate(45deg);
}

.one {
  color: magenta;
  top: 500px;
}

.two {
  color: blue;
  top: 165px;
}

.three {
  color: yellow;
  top: 205px;
}

.four {
  top: 430px;
  color: cyan;
}

.five {
  color: lime;
  top: 130px;
}

Put random letters at an angle

Put random letters at an angle


/* Copyright (c) 2014, Google Inc. Please see the AUTHORS file for details. */
/* All rights reserved.  Use of this source code is governed by a BSD-style */
/* license that can be found in the LICENSE file. */

@import url("../common/spark_widget.css");

:host {
  border: none;
  display: block;
  box-sizing: border-box;
  margin: 5px 0;
}

/*@polyfill spark-menu-item, spark-menu-separator */
::content spark-menu-item, ::content spark-menu-separator {
  display: block;
  min-width: 160px;
  cursor: default;
  box-sizing: border-box;
}

::content spark-menu-item {
  min-height: 30px;
  border: none;
}

::content spark-menu-item.selected {
  background-color: #1a64a3;
}

::content spark-menu-item.selected ^ * {
  color: white;
}

::content spark-menu-item.active {
  background-color: #3a84c3;
}

::content spark-menu-item.active ^ * {
  color: white;
}

/*@polyfill spark-menu-separator */
::content spark-menu-separator {
  height: 2px;
  margin: 2px 0px;
}

/* Copyright (c) 2014, Google Inc. Please see the AUTHORS file for details. */
/* All rights reserved.  Use of this source code is governed by a BSD-style */
/* license that can be found in the LICENSE file. */

@import url("../common/spark_widget.css");

:host {
  border: none;
  display: block;
  box-sizing: border-box;
  margin: 5px 0;
}

/*@polyfill spark-menu-item, spark-menu-separator */
::content spark-menu-item, ::content spark-menu-separator {
  display: block;
  min-width: 160px;
  cursor: default;
  box-sizing: border-box;
}

::content spark-menu-item {
  min-height: 30px;
  border: none;
}

::content spark-menu-item.selected {
  background-color: #1a64a3;
}

/* BUG #1569 */
::content spark-menu-item.selected ^ * {
  color: white;
}
::content spark-menu-item.selected /deep/ * {
  color: white;
}

::content spark-menu-item.active {
  background-color: #3a84c3;
}

/* BUG #1569 */
::content spark-menu-item.active ^ * {
  color: white;
}
::content spark-menu-item.active /deep/ * {
  color: white;
}

/*@polyfill spark-menu-separator */
::content spark-menu-separator {
  height: 2px;
  margin: 2px 0px;
}

Add new shadow DOM CSS selectors to restore menu items style in Chrome 36


@import 'app/styles/variables.css';

.notifications {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 400px;

  @media (--small-viewport) {
    width: 100%;

    &::before,
    &::after {
      display: none;
    }
  }
}

.notification {
  border-bottom: 1px solid lightgray;
  padding: 15px;
  display: flex;
  flex-direction: row;
  color: var(--lego-font-color);

  &:last-child {
    border-bottom: none;
  }

  &:hover {
    background-color: rgba(0, 0, 0, 0.04);
  }

  &:active {
    border: 2px solid var(--color-light-gray-1);
  }
}

.innerNotification {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-right: 15px;
}

.unRead {
  background-color: rgba(255, 143, 131, 0.29);
}

.icon {
  padding-right: 15px;
}

@import 'app/styles/variables.css';

.notifications {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 400px;

  @media (--small-viewport) {
    width: 100%;

    &::before,
    &::after {
      display: none;
    }
  }
}

.notification {
  border-bottom: 1px solid lightgray;
  padding: 15px;
  display: flex;
  flex-direction: row;
  color: var(--lego-font-color);

  &:last-child {
    border-bottom: none;
  }

  &:hover {
    background-color: rgba(0, 0, 0, 0.04);
  }

  &:active {
    border: 2px solid var(--color-light-gray-1);
  }
}

.innerNotification {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-right: 15px;
  word-break: break-word;
}

.unRead {
  background-color: rgba(255, 143, 131, 0.29);
}

.icon {
  padding-right: 15px;
}

Fix text overflow in notifications

Fix text overflow in notifications


@custom-media --sm-viewport (min-width:480px) and (max-width:640px);
@custom-media --md-viewport (min-width:640px) and (max-width:960px);
@custom-media --lg-viewport (min-width:960px);

@import "suitcss-components-test";
@import "suitcss-utils-size";
@import "../index.css";

@import "suitcss-components-test";
@import "suitcss-utils-size";
@import "../index.css";

@custom-media --sm-viewport (min-width:480px) and (max-width:640px);
@custom-media --md-viewport (min-width:640px) and (max-width:960px);
@custom-media --lg-viewport (min-width:960px);

Move custom media below imports to fix warning

* postcss-import now warns on any declarations above @import


body {
  padding-bottom: 20px;
}

.logo-main {
  margin-bottom: 30px;
  width: 260px;
  height: 80px;
}

.logo-navbar {
  margin-bottom: 0;
  width: 65px;
  height: 20px;
}

.search-navbar-holder {
  padding: 10px 15px;
}

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

.input-group-search-navbar {
  margin: 0 0;
}

.input-group .search-input {
  display: inline;
}

.search-results-li {
  list-style-type: none;
}

.search-results-li a {
  font-size: 16px;
}

.search-results-li p {
  font-size: small;
  color: #222222;
}

Add styles for search results

Add styles for search results


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

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

Remove bootstrap requirement - using max cdn stylesheet links instead


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

.link-block {
    background-color: aliceblue;
    margin-bottom: 1px;
    padding: 15px;
}
.link {
    margin: 0;
    font-size: 18px;
}
.link > a {
    color: black;
}
.link > a:visited {
    color: grey;
    text-decoration: none;
}
.tweet {
    margin: 5px 0 0 0;
    font-size: 12px;
}
.tweet > a {
    color: black;
}
.tweet .fa-retweet {
    color: silver;
}
.tweet > a:visited {
    color: grey;
}
.footer {
    color: black;
    text-align: center;
}
.footer a {
    text-decoration: none;
    color: aliceblue;
    font-weight: bold;
}
.header-image {
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 50%;
}

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

.link-block {
    background-color: aliceblue;
    margin-bottom: 1px;
    padding: 15px;
}
.link {
    margin: 0;
    font-size: 18px;
    text-overflow: ellipsis;
    overflow: hidden;
}
.link > a {
    color: black;
}
.link > a:visited {
    color: grey;
    text-decoration: none;
}
.tweet {
    margin: 5px 0 0 0;
    font-size: 12px;
}
.tweet > a {
    color: black;
}
.tweet .fa-retweet {
    color: silver;
}
.tweet > a:visited {
    color: grey;
}
.footer {
    color: black;
    text-align: center;
}
.footer a {
    text-decoration: none;
    color: aliceblue;
    font-weight: bold;
}
.header-image {
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 50%;
}

Add overflow properties to links

Add overflow properties to links


body {
  min-width: 1100px;
}

.top-navbar .navbar-brand {
  font-size: 2em;
  text-transform: none;
}

label {
  font-size: 1.3em;
}

.bootstrap-switch {
  float:right;
}

.container {
  margin-top: 22px;
}

#main-menu li {
  font-size: 1.2em;
}

.btn {
  margin: 18px 10px 0 0;
}

.active-menu {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#settingsSaved {
  margin: 15px 0 15px 0;
  text-align: center;
}

body {
  min-width: 1100px;
}

.top-navbar .navbar-brand {
  font-size: 2em;
  text-transform: none;
}

label {
  font-size: 1.3em;
}

.bootstrap-switch {
  float:right;
}

.container {
  margin-top: 22px;
}

#main-menu li {
  font-size: 1.2em;
}

.btn {
  margin: 18px 10px 0 0;
}

.active-menu {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#settingsSaved {
  position: fixed;
  text-align: center;
  z-index: 99;
  top: 0px;
  left: 0px;
  width: 100%;
}

Save notification now appears at the top of the screen

Sometimes, depending on where the page was when I tried to save
settings, the confirmation message would appear below the visible part
of the screen. Now it appears fixed to the top.


/* Scroll prevention */

.scroll-lock {
  height: 100%;
  overflow-y: hidden;
}

/* Position */

.pos-f { position: fixed; }
.pos-a { position: absolute; }
.pos-r { position: relative; }
.pos-s { position: static; }
.pos-i { position: initial; } /* default */

/* Border radius */

.rad {
  border-radius: var(--radius);
}

/* Floats */

.float-l { float: left; }
.float-r { float: right; }

@each $media, $ext in (var(--breakpoint-media)), (var(--breakpoints)) {
  @media ($media) {
    .pos-f-$(ext) { position: fixed; }
    .pos-a-$(ext) { position: absolute; }
    .pos-r-$(ext) { position: relative; }
    .pos-s-$(ext) { position: static; }
    .pos-i-$(ext) { position: initial; }

    .float-l-$(ext) { float: left; }
    .float-r-$(ext) { float: right; }
  }
}

/* Clearfix */

.clr {
  @mixin clearfix;
}

/* Box model */
.content-box { box-sizing: content-box; }
.border-box { box-sizing: border-box; }

/* Position */

.pos-f { position: fixed; }
.pos-a { position: absolute; }
.pos-r { position: relative; }
.pos-s { position: static; }
.pos-i { position: initial; } /* default */

/* Border radius */

.rad {
  border-radius: var(--radius);
}

/* Floats */

.float-l { float: left; }
.float-r { float: right; }

@each $media, $ext in (var(--breakpoint-media)), (var(--breakpoints)) {
  @media ($media) {
    .pos-f-$(ext) { position: fixed; }
    .pos-a-$(ext) { position: absolute; }
    .pos-r-$(ext) { position: relative; }
    .pos-s-$(ext) { position: static; }
    .pos-i-$(ext) { position: initial; }

    .float-l-$(ext) { float: left; }
    .float-r-$(ext) { float: right; }
  }
}

/* Visibility (for use with @wearegenki/vue-directive-view) */

.hide {
  pointer-events: none;
  opacity: 0;
}

/* Scroll prevention */

.scroll-lock {
  height: 100%;
  overflow-y: hidden;
}

/* Clearfix */

.clr {
  @mixin clearfix;
}

/* Box model */
.content-box { box-sizing: content-box; }
.border-box { box-sizing: border-box; }

Add new ,hide CSS class to go along with @wearegenki/vue-directive-view


Fix main.css extension not being loaded

Fix main.css extension not being loaded


body {
  background: #f3f3f3;
  font-family: Georgia, serif;
}

div.page {
  width: 600px;
  margin: 0 0 0 1em;
}

div#header {
  border-bottom: 1px dashed #40588f;
}

div#header h1 {
  font-weight: 300;
  display: inline;
  font-size: 2em;
}

div#header h2 {
  display: inline;
  font-weight: 300;
  font-size: 1.15em;
}

.italic {
  font-style: italic;
}

/* CL represents colour */
.CL-dark-blue {
  color: #40588f;
}

body {
  background: #f3f3f3;
  font-family: Georgia, serif;
}

div.page {
  width: 600px;
  margin: 0 0 0 1em;
}

div#header {
  border-bottom: 1px dashed #40588f;
}

div#header h1 {
  font-weight: 300;
  display: inline;
  font-size: 2em;
}

div#header h2 {
  display: inline;
  font-weight: 300;
  font-size: 1.15em;
}

div.log-entry {
  font-size: 1em;
  display: block;

  margin: 0.5em 0;
  padding: 0.5em;

  background-color: #c0e7ff;
}

div.log-entry p {
  margin: 0 0 0 2.7em;
}

div.log-entry span.log-time-stamp {
  float: left;
  font-size: 0.85em;
  color: #555555;
}

div#footer {
  margin-top: 0.5em;
  margin-bottom: 3em;
  border-top: 1px dashed #40588f;
}

div.log-form form {
  margin: 0 0 0 2.7em;
}

div.log-form textarea {
  width: 100%;
  border: none;
  font-family: inherit;
  background: rgba(255,255,255,0.4);
}

div.log-form input[type=submit],input[type=reset] {
  display: inline-block;
  margin-top: 0.25em;
  cursor: pointer;
}

.italic {
  font-style: italic;
}

/* CL represents colour */
.CL-dark-blue {
  color: #40588f;
}

Add styles for tasks etc,

Add styles for tasks etc,


.huge.header {
	font-size: 60px !important;
}

.floating-above {
	opacity: 0;
	z-index: -100;
	position: absolute !important;
	top: -10px;
	width: 100%;
	height: 85px;
	transition: opacity 0.4s !important;
}

body > .container {
	padding-top: 0px !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.huge.header {
	font-size: 60px !important;
}

.floating-above {
	opacity: 0;
	z-index: -100;
	position: absolute !important;
	top: -10px;
	width: 100%;
	height: 85px;
	transition: opacity 0.4s !important;
}

body > .container {
	padding-top: 0px !important;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}

Remove number spinner in Firefox

Remove number spinner in Firefox


html, body, #appContent {
  height: 100%;
}

@font-face {
  src: url(/static/theme/2018/fonts/neo-neon-webfont.woff2) format('woff2'),
    url(/static/theme/2018/fonts/neo-neon-webfont.woff) format('woff');
  font-family: 'NeoNeon';
}

body h1,
body h2,
body h3 {
  font-family: 'NeoNeon';
}

Use neon font for headings

Use neon font for headings


#game {
  width: 320px;
}

#grid {
  border-spacing: 0;
  border-collapse: collapse;
}

#grid td div, .tile {
  border-radius: 3px;
  border: 1px solid #c4c4c4;
  width: 30px;
  height: 30px;
}

.red {
  background: red;
}

.green {
  background: green;
}

.blue {
  background: blue;
}

.yellow {
  background: yellow;
}

.purple {
  background: purple;
}

.pink {
  background: pink;
}

.black {
  background: black;
}

#progress {
  border: 1px solid #ececec;
  width: 200px;
  height: 20px;
  float: left;
}

#progress div {
  height: 100%;
}

#lookahead {
  overflow: hidden;
}

#next {
  float: left;
}

#game {
  width: 320px;
}

#grid {
  border-spacing: 0;
  border-collapse: collapse;
}

#grid td div, .tile {
  border-radius: 3px;
  border: 1px solid #c4c4c4;
  width: 30px;
  height: 30px;
}

.red {
  background: red;
}

.green {
  background: green;
}

.blue {
  background: blue;
}

.yellow {
  background: yellow;
}

.purple {
  background: purple;
}

.pink {
  background: pink;
}

.black {
  background: black;
}

#progress {
  border: 1px solid #c4c4c4;
  width: 200px;
  height: 20px;
  float: left;
}

#progress div {
  height: 100%;
}

#lookahead {
  overflow: hidden;
}

#next {
  float: left;
}

Make border color more visible

Make border color more visible


Adjust foreground color of change headers in light theme.


body {  background-color: white; }
hr {  border-width: 0pt; }
:link {  color: #007d71; }

.sect1 .title {
  color: #990066;
  text-align: center;
}

.sect2 .title {
  color: #005A9C;
  text-align: left;
}

.foot {
  text-align: center;
  font-size: 80%;
}

.signature {
  text-align: right;
}

table {
  margin-right: auto;
  margin-left: auto;
  border: solid 1px;
  background: #E0FFE0;
}

body {  background-color: white; }
hr {  border-width: 0pt; }
:link {  color: #007d71; }

.sect1 .title {
  color: #990066;
  text-align: center;
}

.sect2 .title {
  color: #005A9C;
  text-align: left;
}

.foot {
  text-align: center;
  font-size: 80%;
  padding: 3ex;
}

.signature {
  text-align: right;
}

table {
  margin-right: auto;
  margin-left: auto;
  border: solid 1px;
  background: #E0FFE0;
}

Increase spacing around signature paragraph.

svn path=/www/trunk/; revision=7538


/*!
 * Copyright 2014 Apereo Foundation (AF) Licensed under the
 * Educational Community License, Version 2.0 (the "License"); you may
 * not use this file except in compliance with the License. You may
 * obtain a copy of the License at
 *
 *     http://opensource.org/licenses/ECL-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an "AS IS"
 * BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing
 * permissions and limitations under the License.
 */

#discussion-topic {
    margin: 20px 0;
    white-space: pre-wrap;
}

#discussion-topic table {
    border-bottom: 1px solid #999;
    margin: 20px 0;
}

#discussion-topic table th {
    background-color: #FFF;
    border-bottom: 1px solid #999;
    border-top: 1px solid #999;
    font-weight: 500;
    padding: 10px;
}

#discussion-topic table td {
    font-weight: normal;
    height: 22px;
    padding: 6px 10px;
}

#discussion-topic table tr:nth-child(even) {
    background-color: #FFF;
}

#discussion-topic table tr:nth-child(odd) {
    background-color: #ECECEC;
}

#discussion-topic ul {
    white-space: normal;
}

Add list styling here to avoid merge conflict


body {
	color: white;
}
.demo-layout-transparent {
  background: url('../img/material.jpg') center / cover;
}
.demo-layout-transparent .mdl-layout__header,
.demo-layout-transparent .mdl-layout__drawer-button {
  /* This background is dark, so we set text to white. Use 87% black instead if
     your background is light. */
  color: white;
}

Set body color as white

Set body color as white


@namespace xml3d "http://www.xml3d.org/2009/xml3d";

xml3d|float,
xml3d|float2,
xml3d|float3,
xml3d|float4,
xml3d|float4x4,
xml3d|int,
xml3d|int4,
xml3d|bool,
xml3d|string,
xml3d|script  {
   display: none;
}

.xml3d-canvas-style {
	cursor: default;
	display: block;
}

@namespace xml3d "http://www.xml3d.org/2009/xml3d";

xml3d|float,
xml3d|float2,
xml3d|float3,
xml3d|float4,
xml3d|float4x4,
xml3d|int,
xml3d|int4,
xml3d|bool,
xml3d|string,
xml3d|script  {
   display: none;
}

xml3d|mesh,
xml3d|group,
xml3d|model {
	position: relative;
}

.xml3d-canvas-style {
	cursor: default;
	display: block;
}

Add position:relative to scene elements for proper z-index computation


/*Remove time from date because it is irrelevant for us*/
.feed-date {
  display: inline-block;
  white-space: nowrap;
  max-width: 9ch;
  overflow: hidden;
  vertical-align: bottom;
}

/*Remove dotted line from links. We want a simple website*/
a {
  border-bottom: none !important;
}

Remove dotted line from links

Remove dotted line from links


@import url('https://fonts.googleapis.com/css?family=Creepster'); /* Imports a creepy webfont from google fonts*/

body {
  background-color: #f7a325;
}
.jumbotron {
	background-color: #f29810;
}
 .jumbotron p {
	margin-top: 20%;
	font-size: 12px;
}
 a {
	text-decoration: underline;
	color: black;
}

.konami {
	background: #000 url("https://i.ytimg.com/vi/v4zU8Is-lDY/maxresdefault.jpg");
	color: #ada48f;
}

#spooky{
	font-family: 'Creepster';
}

/* Costume picker styles */

#outerCostumeBox {
	margin-top: 50px;
	display: flex;
	flex-direction: column;
	width: 100%;
	align-items: center;
	font-size: 50px;
  }

  #costumeButton {
	background-color: transparent;
	border: none;
  }

  #costumeContent {
	text-align: center;
  }

	/* Adjust font size with screen size */
	@media (max-width: 768px) {
		#outerPumpkinBox {
			font-size: 25px;
		}
	}

@import url('https://fonts.googleapis.com/css?family=Creepster'); /* Imports a creepy webfont from google fonts*/

body {
  background-color: #f7a325;
}
.jumbotron {
	background-color: #f29810;
}
 .jumbotron p {
	margin-top: 20%;
	font-size: 12px;
}
 a {
	text-decoration: underline;
	color: black;
}

.konami {
	background: #000 url("https://i.ytimg.com/vi/v4zU8Is-lDY/maxresdefault.jpg");
	color: #ada48f;
}

#spooky{
	font-family: 'Creepster';
}

/* Costume picker styles */

#outerCostumeBox {
	margin-top: 50px;
	display: flex;
	flex-direction: column;
	width: 100%;
	align-items: center;
	font-size: 50px;
  }

  #costumeButton {
	background-color: transparent;
	border: none;
  }

  #costumeContent {
	text-align: center;
  }

	/* Adjust font size with screen size */
	@media screen and (max-width: 768px) {
		#outerCostumeBox {
			font-size: 25px;
		}
	}

Update renamed element id in media query


body {
    font-family: PT Serif, Helvetica, Arial, sans-serif;
    font-size: 17pt;
    padding: 1em;
    background: #FAFAFA;
    color: #111;
}

#content {
    max-width: 50em;
    margin: 0 auto;

}

a:link {
    color: #0074D9;
}

.post-date {
    text-align: right;
}

a:visited {
    color: #001f3f;
}

.header {
    padding-bottom: 1em;
    text-align: center;
}

h1 {
    padding-top: 1em;
}

h1, h2 {
    text-align: center;
}

pre.example, pre.src {
    font-family: Fira Code, Menlo, Monaco, monospace;
    font-size: 15pt;
}

body {
    font-family: PT Serif, Helvetica, Arial, serif;
    padding: 1em;
    background: #FAFAFA;
    color: #111;
}

@media screen and (min-width: 320px) {
    html {
        font-size: 30pt;
    }
}

@media screen and (min-width: 1024px) {
    html {
        font-size: 16pt;
    }
}

.example {
    overflow: scroll;
}

#content {
    max-width: 42em;
    margin: 0 auto;
}

a:link {
    color: #0074D9;
}

.post-date {
    text-align: right;
}

a:visited {
    color: #001f3f;
}

.header {
    padding-bottom: 1em;
    text-align: center;
}

h1 {
    padding-top: 1em;
}

h1, h2 {
    text-align: center;
}

pre.example, pre.src {
    font-family: Fira Code, Menlo, Monaco, monospace;
    font-size: .5em;
}

img {
    max-width: 100%;
}

Use different font-size for devices

Use different font-size for devices


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

notification {
	color: #ffffff;
	background-color: rgb(128,200,210);
	border-top: 0px solid transparent;
	border-bottom: 1px solid #CCCCCC;
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
}
notification[type="info"] {}
notification[type="critical"] {
	background-color: red;
}
.notification-inner {
	padding: 1px;
	border: none !important;
}
.messageImage {
	width: 16px;
	height: 16px;
	margin-top: 0px;
	margin-bottom: 0px;
	-moz-margin-start: 5px;
	-moz-margin-end: 1px;
}
.messageText {
	font-weight: bold;
	margin: 5px !important;
}
.messageButton {
	margin: 0px 5px;
}
.messageCloseButton {
	-moz-appearance: none;
	padding: 4px 2px;
	border: none !important;
}

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

notification {
	color: #ffffff;
	background-color: rgb(128,200,210);
	border-top: 0px solid transparent;
	border-bottom: 1px solid #CCCCCC;
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
}
notification[type="info"] {}
notification[type="critical"] {
	background-color: red;
}
.notification-inner {
	padding: 1px;
	border: none !important;
}
.messageText > .text-link {
  color: inherit !important;
  text-decoration: underline;
}
.messageImage {
	width: 16px;
	height: 16px;
	margin-top: 0px;
	margin-bottom: 0px;
	-moz-margin-start: 5px;
	-moz-margin-end: 1px;
}
.messageText {
	font-weight: bold;
	margin: 5px !important;
}
.messageButton {
	margin: 0px 5px;
}
.messageCloseButton {
	-moz-appearance: none;
	padding: 4px 2px;
	border: none !important;
}
.popup-notification-learnmore-link {
  margin-top: 1em !important;
}
.popup-notification-learnmore-link:not([href]) {
  display: none;
}

Fix learn more links on Mac

Fix learn more links on Mac


.themeEditorButton {
    position: absolute;
    top: 5px;
    right: 20px;
    background: #ddd;
    color: #333;
    padding: 2px 5px;
    font-family: sans-serif;
    font-size: 11px;
    cursor: pointer;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

.ThemeEditor {
    font-size: 11px;
    border: 2px solid #777;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    padding: 5px;
    background-color: #fff;
    overflow-y: auto;
    position: absolute;
    top: 22px;
    right: 25px;
}

.ThemeEditor .attribute .value:hover {
    background-color: #e6e6e6;
    cursor: pointer;
}

.themeEditorButton {
    position: absolute;
    top: 5px;
    right: 20px;
    background: #ddd;
    color: #333;
    padding: 2px 5px;
    font-family: sans-serif;
    font-size: 11px;
    cursor: pointer;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

.ThemeEditor {
    font-size: 11px;
    border: 2px solid #777;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    padding: 5px;
    background-color: #fff;
    overflow-y: auto;
    position: absolute;
    top: 22px;
    right: 25px;
	font-family: monospace;
}

.ThemeEditor .attribute .value:hover {
    background-color: #e6e6e6;
    cursor: pointer;
}

Make the theme editor attributes and values monospace


#contextMenu {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-flow: column;
    border-radius:5px;
    box-shadow:0 1px 11px 0px rgba(0,0,0,0.2), 0px 0px 0px 0.5px #AAAAAA inset;
    padding: 4.5px 0px;

    background: #f0f0f0;
    visibility: hidden;
}
#contextMenu span {
    padding: 0 15px 0px;
        cursor: pointer;
        font-size: 14.5px;
        line-height: 19px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        color: #3E3E3E;
        font-family: Helvetica,Arial,sans-serif;
        font-weight: 500;
}

#contextMenu span:hover {
    background: #689afb;
    color: white;
}

#contextMenu img {
    left: 0;
    margin-right: 10px;
    height:20px;
    width:20px;
}

#contextMenu {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-flow: column;
    border-radius:5px;
    box-shadow:0 1px 11px 0px rgba(0,0,0,0.2), 0px 0px 0px 0.5px #AAAAAA inset;
    padding: 4.5px 0px;

    background: #f0f0f0;
    visibility: hidden;
}
#contextMenu span {
    padding: 0 21px 0px;
        cursor: pointer;
        font-size: 14.5px;
        line-height: 19px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        color: #3E3E3E;
        font-family: Helvetica,Arial,sans-serif;
        font-weight: 500;
}

#contextMenu span:hover {
    background: #689afb;
    color: white;
}

#contextMenu img {
    left: 0;
    margin-right: 10px;
    height:20px;
    width:20px;
}

Improve styling of the context menu to match chrome's context menu. pt 2


.show .nl-copyright:not(.active) {
	color: #fff !important;
}
.callout a {
	color: #000;
	text-decoration: underline;
}
.callout a:hover {
	color: #000;
}
.thumbnails li img {
	width: 60px;
}
.dropdown-menu-lg {
	max-width: none;
}

Remove max width from StaffCP notices dropdown


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

.report-row {
  display: flex;
  align-items: center;
}

.clear-storage-button .report-row {
  margin: 0 0 0 17px;
  display: flex;
}

.link {
  margin-left: 10px;
  display: none;
}

.report-row:hover .link {
  display: inline;
}

.usage-breakdown-row {
  min-width: fit-content;
}

.clear-storage-container {
  overflow: auto;
}

.clear-storage-header {
  min-width: 400px;
}

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

.report-row {
  display: flex;
  align-items: center;
  white-space: normal;
}

.clear-storage-button .report-row {
  margin: 0 0 0 17px;
  display: flex;
}

.link {
  margin-left: 10px;
  display: none;
}

.report-row:hover .link {
  display: inline;
}

.usage-breakdown-row {
  min-width: fit-content;
}

.clear-storage-container {
  overflow: auto;
}

.clear-storage-header {
  min-width: 400px;
}

Fix double scrollbar when using huge fonts

When using huge fonts it was possible to see 2 horizontal scrollbars in
the application panel's 'clear storage' view (could reproduce on MacOS,
not on Linux). This is fixed by allowing line breaks.

Screenshots:
Before: https://i.imgur.com/FTdm6Qv.png
After: https://i.imgur.com/nV6D1xd.png

Fixed: chromium:1134041
Change-Id: Ie15a8121182e0d81e349fa6c647fa30e0c0ee4e0
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2443614
Reviewed-by: Simon Zünd <38944668e9e2ca98ccd0275b53370f90fa55c113@chromium.org>
Commit-Queue: Wolfgang Beyer <573aa99bb19da47d816981118f95c945310dd3f4@chromium.org>


.root {
  background-image: url("https://voornameninliedjes.nl/images/music.jpg");
}

h1 {
    color: white;
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 200;
    font-size: 300%;
  }

  .header {
    padding: 2.5em;
    overflow: auto;
    width: 100%;
    height: 10%;
  }

  .header img {
    display: inline;
  }

  .header h1 {
    display: inline;
  }

.root {
  background-image: url("https://voornameninliedjes.nl/images/music.jpg");
  background-attachment: fixed;
}

h1 {
    color: white;
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 200;
    font-size: 300%;
  }

  .header {
    padding: 2.5em;
    overflow: auto;
    width: 100%;
    height: 10%;
  }

  .header img {
    display: inline;
  }

  .header h1 {
    display: inline;
  }

Set background to non scrolling

Set background to non scrolling


.top-bar {
    background: #c85e00;
    height: 50px;
}

.title-area {
    background: #fff;
    height: 50px;
}

.title-area .name h1 a {
    color: #222;
    padding: 0 50px 0 10px;
    line-height: 50px;
}

.title-area .name h1 a:before {
    display: inline-block;
    content: url("../img/small-icon.png");
    float: left;
    z-index: 10000;
    padding: 5px 5px 0 10px;
}

.top-bar-section li.active:not(.has-form) a:not(.button) {
    line-height: 50px;
}

#map {
    width: 100%;
    height: 500px;
}

body > div.row {
    margin-top: 50px;
}

@media only screen and (max-width: 64.063em) {
    h1 small {
       display: block;
    }
}

.top-bar {
    background: #c85e00;
    height: 50px;
}

.title-area {
    background: #fff;
    height: 50px;
}

.title-area .name h1 a {
    color: #222;
    padding: 0 50px 0 10px;
    line-height: 50px;
}

.title-area .name h1 a:before {
    display: inline-block;
    content: url("../img/small-icon.png");
    float: left;
    z-index: 10000;
    padding: 5px 5px 0 10px;
}

.top-bar-section li.active:not(.has-form) a:not(.button) {
    line-height: 50px;
}

#map {
    width: 100%;
    height: 350px;
}

@media only screen and (min-width: 90.063em) {
    #map {
        height: 500px;
    }
}

body > div.row {
    margin-top: 50px;
}

@media only screen and (max-width: 64.063em) {
    h1 small {
       display: block;
    }
}

Use a smaller map on desktops with less resolution

Less screen resolution means the information below the map
disappears (is pushed below the fold) on screens with less
resolution. Default map should therefore be smaller and made
bigger with a media query.


/* Styles for the top bar */

/* The box that holds the button and input */
#formbox {
  padding: 0;
  display: block;
  overflow: hidden;

  /* Position */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 1;

  /* Appearance */
  box-shadow: 0 4px 4px -2px #ccc;
}

/* The buttons */
#formbox button {
  /* Color */
  background-color: rgba(255, 255, 255, 0.6);

  /* Border */
  outline: none;

  /* Other */
  padding: 5px 7px;
  margin: 0;
  font-size: 18px;
  float: right;
  height: 33px;
  min-width: 33px;
}

/* To create lines between elements, everything has a right border besides the last element */
#formbox > * {
  border: none;
  border-right: 1px solid #ccc;
}

#formbox > *:first-child { /* first-child is last because 'float:right;' changes order */
  border-right: none;
  padding: 5px 10px;
}

/* Styles for the top bar */

/* The box that holds the button and input */
#formbox {
  padding: 0;
  display: block;
  overflow: hidden;

  /* Position */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 1;

  /* Appearance */
  box-shadow: 0 4px 4px -2px #ccc;
}

/* The buttons */
#formbox button {
  /* Color */
  background-color: rgba(255, 255, 255, 0.6);

  /* Border */
  outline: none;

  /* Other */
  padding: 5px 7px;
  margin: 0;
  font-size: 18px;
  float: right;
  height: 33px;
  min-width: 33px;
}
i.icon.ion-refresh {
  display: block;
  transition: all 0.8s ease-in-out;
}
i.icon:hover.ion-refresh {
  transform: rotate(360deg);
}

/* To create lines between elements, everything has a right border besides the last element */
#formbox > * {
  border: none;
  border-right: 1px solid #ccc;
}

#formbox > *:first-child { /* first-child is last because 'float:right;' changes order */
  border-right: none;
  padding: 5px 10px;
}

Add rotation animation when hovering restart icon


html, body, input {
	margin: 0;
	padding: 0;
	font-family: Helvetica, Tahoma;
	color: #774422;
	font-size: 13px;
}
a {
	text-decoration: none;
	color: #333;
	outline: none;
}
a:hover {
	background-color: #eee;
}
#view-templates { display: none; }

.clear { clear: both; }

html, body, input {
	margin: 0;
	padding: 0;
	font-family: Helvetica, Tahoma;
	color: #774422;
	font-size: 13px;
	overflow: hidden;
}
a {
	text-decoration: none;
	color: #333;
	outline: none;
}
a:hover {
	background-color: #eee;
}
#view-templates { display: none; }

.clear { clear: both; }

Make overflow on the body hidden, so that scroll bars never show


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

/* Color reference:
background color: #E1E0DD
body background color: #F1F2F0
text color: #35342F
link color: #5D2C9E
---visited: #463E66
---hoverbg:

*/

html {
  background-color: #E1E0DD;
  margin-right: 20%;
  margin-left: 20%;
  font-family: Lora;
}

header, section, footer{
  text-align: center;
  width: 80%;
  background-color: #F1F2F0;
  color: #35342f;
}

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

a:visited {
  color: #463E66;
  text-decoration: line-through;
}

header {
  position: relative;
  display: block;
  float: left;

  height: 100%;
  padding: 25px 50px 10px 50px;
  border-top-left-radius: 50px;
  border-top-right-radius: 10px;
}

nav li {
  width: 15%;
  padding: 10px 5px 10px 5px;
  float: left;

  list-style-type: none;
  font-size: 13pt;
  color: #5ECCC2;
}

nav a:hover {
  padding: 7px;
  background-color: #37BBE4;
  color: #261033;
  border-radius: 10px;
}

nav a:active {
  color: #170621;
  font-weight: bold;
}

header>h3 {
  color: #293E45;
  text-align: right;
  font-size: 15pt;
  float: right;
  padding: 0px 5px 0px 40px;
}

section {
  display: inline-block;
  text-align: center;
  padding: 10px 50px 10px 50px;
}

section p {
  text-align: justify;
}

section ul {
  list-style: inside circle;
}

footer {
  display: inline-block;
  text-align: center;

  font-size: 10pt;
  padding: 25px 50px 50px 50px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 75px;
}

Add basic layout and colors

Add basic layout and colors


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

#third_from_top {
display: block;
position: relative;
left: 100px;
top: 835px;
}

#fourth_from_top {
display: block;
position: relative;
left: 100px;
top: 845px;

}

main {
	display: block;
	height: 100%;
	padding-bottom: 840px;

}

Add main selector to technical

Add main selector to technical


#content {
  margin-top: 70px;
}

#sp-footer {
    border-top: 1px solid #ddd;
    color: #666;
    margin-top: 100px;
    padding-bottom: 30px;
    padding-top: 40px;
}

#sp-footer p {
    margin-bottom: 0;
}

.valign-middle td {
    vertical-align: middle !important;
}

#id_models {
    list-style: none;
    padding: 0;
}

.podcast-info {
    margin-bottom: 20px;
}

.podcast-info .podcast-image {
    width: 100%;
    margin-top: 40px;
}

.podcast-info .podcast-buttons {
    margin-top: 20px;
}

.podcast-info .media-controller {
    margin-top: 5px;
}

.table a {
  text-decoration: none;
}

.table a:hover {
  text-decoration: underline;
}

Change links's text-decoration in tables


.character {
  margin-bottom: 25px;
}

.character .character-img {
  width: 400px;
  height: 350px;
}

.character .character-name {
  font-size: 20px;
  font-weight: bold;
}

Add a space between each item of the list


/**
* timeHover
*
* @author Ian Devlin <ian@iandevlin.com>
* http://twitter.com/iandevlin
* https://github.com/iandevlin/time-hover
*
* Version tag: v0.1.0
*/
time > span.datetime {
	display:none;
	position:absolute;
	opacity:.8;
	font-size:.6em;
	text-align:center;
	margin-top:-.5em;
	line-height:1em;
	background:#ccc;
}

/**
* timeHover
*
* @author Ian Devlin <ian@iandevlin.com>
* http://twitter.com/iandevlin
* https://github.com/iandevlin/time-hover
*
* Version tag: v0.1.0
*/
time > .datetime {
	display:none;
	position:absolute;
	opacity:.8;
	font-size:.6em;
	text-align:center;
	margin-top:-.5em;
	line-height:1em;
	background:#ccc;
}

Remove high specificity from CSS selector


* {
    font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
}

.blurb div {
	border-style: groove;
	background-color: yellow;
	overflow: scroll;
}

.vertex.tac text {
	text-anchor: end;
}

.vertex.asoiaf text {
	text-anchor: start;
}

.vertex.selected text {
	font-weight: bold;
}

line.edge {
	stroke: black;
	opacity: .25;
	stroke-width: 2px;
	pointer-events: none;
}

line.edge.active {
	opacity: 1;
	pointer-events: auto;
}

line.edge.active.selected {
	stroke-width: 4px;
}

* {
    font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
}

.blurb div {
	border-style: groove;
	background-color: yellow;
	overflow: scroll;
}

.vertex * {
	cursor: pointer;
}

.vertex.tac text {
	text-anchor: end;
}

.vertex.asoiaf text {
	text-anchor: start;
}

.vertex.selected text {
	font-weight: bold;
}

line.edge {
	stroke: black;
	opacity: .25;
	stroke-width: 2px;
	pointer-events: none;
}

line.edge.active {
	opacity: 1;
	pointer-events: auto;
}

line.edge.active.selected {
	stroke-width: 4px;
}

Change cursor to pointer when mousing over a vertex


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

:host {
  white-space: nowrap;
}

.color-swatch {
  position: relative;
  margin-left: 1px;
  margin-right: 2px;
  width: 10px;
  height: 10px;
  top: 1px;
  display: inline-block;
  user-select: none;
  background-image: url(Images/checker.png);
  line-height: 10px;
}

.color-swatch-inner {
  width: 100%;
  height: 100%;
  display: inline-block;
  border: 1px solid rgb(128 128 128 / 60%);
  box-sizing: border-box;
  cursor: default;
}

.color-swatch:not(.read-only) .color-swatch-inner:hover {
  border: 1px solid rgb(64 64 64 / 80%);
}

@media (forced-colors: active) {
  .color-swatch {
    forced-color-adjust: none;
  }
}

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

:host {
  white-space: nowrap;
}

.color-swatch {
  position: relative;
  margin-left: 1px;
  margin-right: 2px;
  width: 10px;
  height: 10px;
  top: 1px;
  display: inline-block;
  user-select: none;
  background-image: url(Images/checker.png);
  line-height: 10px;
}

.color-swatch-inner {
  width: 100%;
  height: 100%;
  display: inline-block;
  border: 1px solid rgb(128 128 128 / 60%);
  box-sizing: border-box;
  cursor: pointer;
}

.color-swatch:not(.read-only) .color-swatch-inner:hover {
  border: 1px solid rgb(64 64 64 / 80%);
}

@media (forced-colors: active) {
  .color-swatch {
    forced-color-adjust: none;
  }
}

Change cursor to pointer when hovering over color swatches

The next step would be to figure out what cursor we should use when
hovering over swatches holding `shift`.

Bug: chromium:1156835
Change-Id: I0dec0d1495f487cc16ae6ad584d1e89fa64f50b8
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2601713
Auto-Submit: Changhao Han <68542faf32f0a558a873c0f094ca9bedb2744bff@chromium.org>
Reviewed-by: Mathias Bynens <17a2cbc4e33156874a9862b0f530521117e66a3d@chromium.org>
Reviewed-by: Changhao Han <68542faf32f0a558a873c0f094ca9bedb2744bff@chromium.org>
Commit-Queue: Changhao Han <68542faf32f0a558a873c0f094ca9bedb2744bff@chromium.org>


body {
  background-color: #daad86;
  color: #312c32;
}

.deal {
  padding: 10px;
}

.deal-container {
  background-color: #feffff;
  border: 1px solid #312c32;
}

.deal-title {
  text-align: center;
  font-size: 1.0em;
}

.deal-image {
  padding: 10px;
  text-align: center;
}

.vendor-name {
  text-align: center;
  background-color: #98dafc;
  color: #feffff;
  font-size: 1.5em;
}

body {
  background-color: #daad86;
  color: #312c32;
}

.deal {
  padding: 10px;
}

.deal-container {
  background-color: #feffff;
  border: 1px solid #312c32;
}

.deal-title {
  text-align: center;
  font-size: 1.0em;
}

.deal-image {
  padding: 10px;
  text-align: center;
}

.deal-image img {
  -webkit-box-shadow: 0px 5px 5px 0px rgba(49,44,50,1);
  -moz-box-shadow: 0px 5px 5px 0px rgba(49,44,50,1);
box-shadow: 0px 5px 5px 0px rgba(49,44,50,1);}

.vendor-name {
  text-align: center;
  background-color: #98dafc;
  color: #feffff;
  font-size: 1.5em;
}

Add a drop shadow to the images

Add a drop shadow to the images


*{
  background-color: #FFFFE0;
}

.Heading{
  font-family: Arial, Verdana, sans-serif;
  position: relative;
  text-align: center;
}

p{
  width: 48%;
  margin: 5px;
  margin-top: 20px;
  float: left;
/*  padding: 10px 0px 5px 0px;*/
  background-color: #EFEFEF;
  text-align: left;
}

#Strings{
  height: 50px;
}

#Integers{
  height: 50px;
}

#Arrays{
  height: 100px;
}

#Hashes{
  height: 100px;
}

*{
  background-color: #FFFFE0;
}

.Heading{
  font-family: Arial, Verdana, sans-serif;
  position: relative;
  text-align: center;
}

p{
  width: 48%;
  margin: 5px;
  margin-top: 20px;
  float: left;
/*  padding: 10px 0px 5px 0px;*/
  background-color: #EFEFEF;
  text-align: left;
}

/*#Strings{
  height: 50px;
}

#Integers{
  height: 50px;
}

#Arrays{
  height: 100px;
}

#Hashes{
  height: 100px;
}*/

Edit css to swap class/id calls

Edit css to swap class/id calls


body {
  background: #F9F9F9;
  font-family: 'Roboto', sans-serif;
}

.heading {
  margin-top: 0;
  color: #5A5A5A;
}

.container {
  padding-top: 25px;
  padding-bottom: 25px;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
}

.profile-image {
  border-radius: 125px;
  border: 3px solid #545454;
  width: 250px;
  height: 250px;
  align-self: center;
  margin-bottom: 15px;
}

.link {
  display: block;
  font-size: 15pt;
  margin-bottom: 10px;
  color: #9F9F9F;
  text-decoration: none;
}

.link:hover, .link:focus {
  text-decoration: none;
}

html {
  height: 100%;
}

body {
  background: #F9F9F9;
  font-family: 'Roboto', sans-serif;
  height: 100%;
  display: flex;
}

.heading {
  margin-top: 0;
  color: #5A5A5A;
}

.container {
  padding-top: 25px;
  padding-bottom: 25px;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
}

.profile-image {
  border-radius: 125px;
  border: 3px solid #545454;
  width: 250px;
  height: 250px;
  align-self: center;
  margin-bottom: 15px;
}

.link {
  display: block;
  font-size: 15pt;
  margin-bottom: 10px;
  color: #9F9F9F;
  text-decoration: none;
}

.link:hover, .link:focus {
  text-decoration: none;
}

Align content to center of page

Align content to center of page


.title-slide .markdown ul {
  list-style: none;
  font-size: 70%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  max-width: inherit;
  text-align: inherit;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.title-slide .markdown ul > li {
  text-align: center;
  margin: 0.5em;
  margin-bottom: 0;
  text-indent: 0;
}

.title-slide .markdown ul {
  list-style: none;
  font-size: 70%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  max-width: inherit;
  text-align: inherit;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.title-slide .markdown ul > li {
  text-align: center;
  margin: 0.5em;
  margin-bottom: 0.1em;
  text-indent: 0;
}

Add bottom margin on default title slides


/**
 * Color palete:
 *  Dark Purple: #2C1E37
 *  Light purple: #7B14CC
 *  Atention Orange: #FF9F00
 *  Weird Green: #19FF74
 *  Neutral gray: #847151
 */

.app-body {
    padding: 2rem;
}

.top-bar {
    padding: 0.5rem;
    background-color: #2C1E37;
    color: white;
}

a {
    color: #7B14CC;
    text-decoration: none;
}

a:visited {
    color: #847151;
}

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

ul {
    list-style-type: none;
}

Tweak links and list style

Tweak links and list style


/* Special styling for type=range and type=color input */
input.form-control[type="range"],
input.form-control[type="color"] {
    height: 2.25rem;
}
input.form-control.form-control-sm[type="range"],
input.form-control.form-control-sm[type="color"] {
    height: 1.9375rem;
}
input.form-control.form-control-lg[type="range"],
input.form-control.form-control-lg[type="color"] {
    height: 3rem;
}

/* Less padding on type=color */
input.form-control[type="color"] {
    padding: 0.25rem 0.25rem;
}
input.form-control.form-control-sm[type="color"] {
    padding: 0.125rem 0.125rem;
}

/* Special styling for type=range and type=color input */
input.form-control[type="range"],
input.form-control[type="color"] {
    height: 2.25rem;
}
input.form-control.form-control-sm[type="range"],
input.form-control.form-control-sm[type="color"],
.input-group-sm input.form-control[type="range"],
.input-group-sm input.form-control[type="color"] {
    height: 1.9375rem;
}
input.form-control.form-control-lg[type="range"],
input.form-control.form-control-lg[type="color"],
.input-group-lg input.form-control[type="range"],
.input-group-lg input.form-control[type="color"] {
    height: 3rem;
}

/* Less padding on type=color */
input.form-control[type="color"] {
    padding: 0.25rem 0.25rem;
}
input.form-control.form-control-sm[type="color"]
.input-group-sm input.form-control[type="color"] {
    padding: 0.125rem 0.125rem;
}

fix(input-group): Fix size styling issues for input types range and color


body {
	background-color: lightgray;
}

ul.tabs  {
	display: inline;
}

ul.tabs > li {
	display: inline-block;
	padding: 10px 20px;
}

div.messagelist {
	background-color: white;
	overflow-y: scroll;
	max-height: 400px;
}

div.messagelist > span {
	display: block;
}

div.nicklist {
	background-color: white;
	text-align: right;
	overflow-y: scroll;
	max-height: 400px;
}

div.ircinput {
	position: absolute;
	bottom: 0;
	width: 100%;
}

body {
	background-color: lightgray;
}

ul.tabs  {
	display: inline;
}

ul.tabs > li {
	display: inline-block;
	padding: 10px 20px;
}

div.messagelist {
	background-color: white;
	overflow-y: auto;
	height: 90vh;
}

div.messagelist > span {
	display: block;
}

div.nicklist {
	background-color: white;
	text-align: left;
	overflow-y: auto;
	height: 90vh;
}

ul.col-xs-2 {
	list-style-type: none;
	padding: 20px;
	width: 100%;
}

div.ircinput {
	position: absolute;
	/*bottom: 0;*/
	width: 100%;
	padding: 5px 0;
}

Adjust CSS to provide a better layout

Adjust CSS to provide a better layout


.kg-gallery-card {
    --gap: 1.2rem;
}

.kg-image-card:not(.kg-card-hascaption) + .kg-image-card,
.kg-image-card:not(.kg-card-hascaption) + .kg-gallery-card,
.kg-gallery-card:not(.kg-card-hascaption) + .kg-image-card,
.kg-gallery-card:not(.kg-card-hascaption) + .kg-gallery-card {
    margin-top: var(--gap);
}

.kg-gallery-container {
    position: relative;
}

.kg-gallery-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.kg-gallery-image img {
    display: block;
    margin: 0;
    width: 100%;
    height: 100%;
}

.kg-gallery-row:not(:first-of-type) {
    margin: var(--gap) 0 0;
}

.kg-gallery-image:not(:first-of-type) {
    margin: 0 0 0 var(--gap);
}

@media (max-width: 600px) {
    .kg-gallery-card {
        --gap: 0.6rem;
    }
}

.kg-gallery-card,
.kg-image-card {
    --gap: 1.2rem;
}

.kg-image-card:not(.kg-card-hascaption) + .kg-image-card,
.kg-image-card:not(.kg-card-hascaption) + .kg-gallery-card,
.kg-gallery-card:not(.kg-card-hascaption) + .kg-image-card,
.kg-gallery-card:not(.kg-card-hascaption) + .kg-gallery-card {
    margin-top: var(--gap);
}

.kg-gallery-container {
    position: relative;
}

.kg-gallery-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.kg-gallery-image img {
    display: block;
    margin: 0;
    width: 100%;
    height: 100%;
}

.kg-gallery-row:not(:first-of-type) {
    margin: var(--gap) 0 0;
}

.kg-gallery-image:not(:first-of-type) {
    margin: 0 0 0 var(--gap);
}

@media (max-width: 600px) {
    .kg-gallery-card {
        --gap: 0.6rem;
    }
}

Add gap custom CSS property to image card

This adds margin to the image card next to a gallery card


/* CSS declarations go here */
.book-title {
  font-weight: 800;
}

img {
  width: 220px;
}

Adjust width img for mobile

Adjust width img for mobile


.heading {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 80%;
}

.headingLines:before,
.headingLines:after {
  flex-grow: 1;
  height: 3px;
  content: '\a0';
  background-color: rgb(65, 164, 192);
  align-self: center;
  margin: 0 10px 5px 10px;
}

.dark {
  color: rgb(74,74,74);
}

.white {
  color: #FFF;
}

@media screen and (max-width: 650px) {
  .heading {
    font-size: 1.8em;
  }
}

@media screen and (max-width: 500px) {
  .heading {
    font-size: 1.5em;
  }
}

Adjust header size at 500px breakpoint, committing scope creep sin


@import "../assets/index.css";

div.demo
{
	display: flex;
	flex-wrap: wrap;
}

div.demo > div.component
{
	width: 400px;
	height: 400px;
	padding: 50px;
}

div.demo > form
{
	width: 400px;
}

div.demo > form textarea
{
	display: block;

	height: 150px;
}

@import "../assets/index.css";

div.demo
{
	display: flex;
	flex-wrap: wrap;
}

div.demo > div.component
{
	width: 400px;
	height: 400px;
	padding: 50px;
}

div.demo > form
{
	width: 400px;
}

div.demo > form textarea
{
	display: block;

	height: 100px;
}

div.demo > form > ul
{
	padding: 0;

	list-style: none;
}

div.demo > form > ul > li
{
	display: block;

	margin: 0 0 1em;
}

div.demo > form label
{
	margin: 0 0.5em 0 0;
}

div.demo > form input + label
{
	padding: 0 0 0 0.5em;
	margin: 0;
}

div.demo > form input,
div.demo > form label
{
	vertical-align: middle;
}

Add some additional styles to demo

Add some additional styles to demo


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

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

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

This reverts commit c9d61e43ed70043b176875408b8dad9141e37602.


body {
    padding-top: 60px;
    padding-bottom: 40px;
}

.sidebar-nav {
    padding: 9px 0;
}

.sidebar_link {
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.sidebar_link .badge {
    padding: 0px 7px;
}

.brand img {
    margin: -10px 12px;
}
.badge {
    float: right;
}

.node_name, .node_ip,
.node_env {
    width: 17em;
}

p.notfound {
    padding: 3px 15px;
    font-size: 18px;
    font-weight: bold;
    line-height: 18px;
    color: #999;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
}

p.notfound img {
    margin-right: 1em;
}

table#nodes th { cursor: pointer; }

Adjust table header cursor style

Adjust table header cursor style


.wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  border-top: 1px solid #eee;
}

.resultsList {
  overflow-y: auto;
  width: 250px;
  min-width: 250px;
}

.preview {
  flex-grow: 2;
  padding: 10px;
  align-items: center;
  display: flex;
  max-height: 100%;
  position: relative;
  overflow: auto;
  /*
    Instead of using `justify-content: center` we have to use this hack.
    In this case child element that is bigger than `.preview ` will be placed on left border
    instead of moving outside of container
   */
  &::before, &::after {
    content: '';
    margin: auto;
  }
}

.wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  border-top: 1px solid #eee;
}

.resultsList {
  overflow-y: auto;
  width: 250px;
  min-width: 250px;
}

.preview {
  flex-grow: 2;
  padding: 10px 10px 20px 10px;
  align-items: center;
  display: flex;
  max-height: 100%;
  position: relative;
  overflow: auto;
  /*
    Instead of using `justify-content: center` we have to use this hack.
    In this case child element that is bigger than `.preview ` will be placed on left border
    instead of moving outside of container
   */
  &::before, &::after {
    content: '';
    margin: auto;
  }
}

Fix bottom padding for preview

Fix bottom padding for preview


/*
footerで利用しているWufooのフォームの成形用のcss
*/

.wufoo #header h2 {
    display: none;
}

.wufoo li span.req {
    display: none !important;
}

.wufoo input.btTxt.submit {
    display: inline-block;
    font-weight: 400;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem 2.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    background-color: #2274ca;
    border-radius: .25rem;
}

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

.wufoo li.section.scrollText{
  margin: 7px;
}

.wufoo li.section.scrollText{
  margin: 7px;
}

@media screen and (max-width: 480px){
  .wufoo li.section.scrollText{
    margin: 2px;
  }
}

.wufoo input.text, .wufoo textarea.textarea, .wufoo input.file {
    padding: .3rem;
    box-sizing: border-box;
}

Add padding to contact form

Add padding to contact form


#pnl_root{display:none;}
#pnl_body{margin-bottom:0px;}
#pnl_footer{ padding: 20px; font-size:12px;}
.navbar{ margin-bottom: 0px; }
.panel-default {padding: 20px;}
div.field{margin: 20px 0px; }
div.pnl-btns{ margin: 20px 10px; text-align: right; }
.wf_dropdown_lbl{ margin: 0px 20px; }
.required{color: blue;}
.error{color: red; font-weight:900;}
label[for]{cursor:pointer;}

/* Mobile Device */
@media screen and (max-device-width: 799px){
	.jumbotron .row form, .jumbotron from{ padding: 5px 30px; }
	.pnl-padding{ padding: 10px; }
	.desktop-only{ display: none; }
}

/* Desktop Device */
@media screen and (min-device-width: 800px){
	.pnl-padding{ padding: 20px; }
}

#pnl_root{display:none;}
#pnl_body{margin-bottom:0px;}
#pnl_footer{ padding: 20px; font-size:12px;}
.navbar{ margin-bottom: 0px; }
.panel-default {padding: 20px;}
div.field{margin: 20px 0px; }
div.pnl-btns{margin: 20px 10px; text-align:right;}
div.pnl-lbtns{margin: 20px 10px;}
div.pnl-rbtns{margin: 20px 10px; text-align:right;}
.wf_dropdown_lbl{ margin: 0px 20px; }
.required{color: blue;}
.error{color: red; font-weight:900;}
label[for]{cursor:pointer;}

/* Mobile Device */
@media screen and (max-device-width: 799px){
	.jumbotron .row form, .jumbotron from{ padding: 5px 30px; }
	.pnl-padding{ padding: 10px; }
	.desktop-only{ display: none; }
}

/* Desktop Device */
@media screen and (min-device-width: 800px){
	.pnl-padding{ padding: 20px; }
}

Add classes div.pnl-lbtns and div.pnl-rbtns


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

#certificateManagerPage {
  min-width: 700px;
}

.certificate-tree-table {
  width: 100%;
}

.certificate-tree {
  /* TODO(mattm): BLAH.  Make this not statically sized. */
  height: 300px;
}

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

#certificateManagerPage {
  min-width: 700px;
}

#certificateRestoreOverlay h1 {
  /* Leave enough space for the close-button. */
  /* TODO(KGR): make dialogs to use flex-boxes instead of relying on padding. */
  padding-right: 35px;
}

.certificate-tree-table {
  width: 100%;
}

.certificate-tree {
  /* TODO(mattm): BLAH.  Make this not statically sized. */
  height: 300px;
}

Fix for certificate password dialog spacing.

BUG=123828
TEST=see ticket

Review URL: http://codereview.chromium.org/10091047

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


@media screen {
    #printSection {
        display: none;
    }
}

@media print {
    body * {
        visibility:hidden;
    }

    #printSection, #printSection * {
        visibility:visible;
    }

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

@media screen {
    #printSection {
        display: none;
    }
}

@media print {
    body * {
        display:none;
    }

    #printSection, #printSection * {
        display: inline;
    }

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

Fix 2 page display for 1 page content.

Fix 2 page display for 1 page content.

visibility:hidden only hides the content, it still takes place on the page. In some cases, the displayed content might be only taking 1 page but the hidden content makes it take 2 pages.
So to solve this, we remove the content from the print media altogether by using display:none instead of visibility:hidden.


form {
	font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
	font-size: 14px;
}

label {
	display: block
}

label span {
	display: inline-block;
	width: 200px;
	vertical-align: top;
}

textarea {
	font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
	font-size: 14px;
	width: 300px;
	height: 200px;
}

button {
	border: 1px solid #c1c1c1;
	border-radius: 1px;
	padding: 10px 30px;
	font-size: 14px;
	float: right;
	background: #4c9ed9;
	color: white;
}

Make the save button visible

Make the save button visible


blockquote {
  overflow-x: auto;
}

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

pre {
  font-size: 1.2rem;
  margin: 1rem 0;
}

.navbar {
  padding: 0.5rem 0;
}

.category-list,
.tag-list,
.archive-list,
.post-list {
  list-style: none;
  padding: 0;
}

.category-list-count,
.tag-list-count,
.archive-list-count {
  margin-left: 0.3rem;
}

.category-list-count:before,
.tag-list-count:before,
.archive-list-count:before {
  content: "(";
}

.category-list-count:after,
.tag-list-count:after,
.archive-list-count:after {
  content: ")";
}

.scroll-to-top {
  position: fixed;
  bottom: 4.5rem;
  right: 0;
}

blockquote {
  overflow-x: auto;
}

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

pre {
  font-size: 1.2rem;
  margin: 1rem 0;
}

.navbar {
  padding: 0.5rem 0;
}

.category-list,
.tag-list,
.archive-list,
.post-list {
  list-style: none;
  padding: 0;
}

.category-list-count,
.tag-list-count,
.archive-list-count {
  margin-left: 0.3rem;
}

.category-list-count:before,
.tag-list-count:before,
.archive-list-count:before {
  content: "(";
}

.category-list-count:after,
.tag-list-count:after,
.archive-list-count:after {
  content: ")";
}

.scroll-to-top {
  position: fixed;
  bottom: 35%;
  right: 0;
}

Move scroll to top arrow up

Move scroll to top arrow up


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

 */

body { margin:0; padding:0; }

#loader {
    position:absolute; top:0; bottom:0; width:100%;
    background: #D1F0FF;
    opacity: 0.75;
    transition:background 1s ease-out;
    -webkit-transition:background 1s ease-out;
}
#loader.done {
    background:rgba(255, 255, 255, 0);
}
#loader.hide {
    display:none;
}
#loader img {
	position: absolute;
  top: 0; bottom:0; left: 0; right:0;
  margin: auto;
  width: 10em;
}

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

 */

body { margin:0; padding:0; }

#loader {
    position:absolute; top:0; bottom:0; width:100%;
    background: #8AB8E6;
    opacity: 0.95;
    transition:background 1s ease-out;
    -webkit-transition:background 1s ease-out;
}
#loader.done {
    background:rgba(255, 255, 255, 0);
}
#loader.hide {
    display:none;
}
#loader img {
	position: absolute;
  top: 0; bottom:0; left: 0; right:0;
  margin: auto;
  width: 7em;
}

Change background and opacity, change size of loading image


body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
main {
  flex: 1 0 auto;
  background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);
}

.card {
  margin: 4rem 0 4rem 0;
}

.input-field label {
  color: #000;
}

.tabs-fixed-width {
  overflow-x: hidden;
}

.range-field-wrapper .range-field {
  margin-top: 1rem !important;
  padding-top: 0;
}

.modal.bottom-sheet {
  max-height: 70%;
}

.field-title {
  font-size: 0.8rem;
}

#medication .col .card {
  margin-top: 0;
}

.radio-inline {
  display: inline;
  margin-right: 2rem;
}

.card-panel {
  padding: 8px 12px 12px 12px;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
main {
  flex: 1 0 auto;
  background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);
}

.card {
  margin: 4rem 0 4rem 0;
}

.input-field label {
  color: #000;
}

.range-field-wrapper .range-field {
  margin-top: 1rem !important;
  padding-top: 0;
}

.modal.bottom-sheet {
  max-height: 70%;
}

.field-title {
  font-size: 0.8rem;
}

#medication .col .card {
  margin-top: 0;
}

.radio-inline {
  display: inline;
  margin-right: 2rem;
}

.card-panel {
  padding: 8px 12px 12px 12px;
}

Revert "Fix scrollbar appearing on last tab bug" as it breaks on mobile

This reverts commit 6c1a1d77b8f68210f9a78f299507ba4ca2adf190.


.rank {  /* rank column */
    padding: 5px 10px 5px 0px;
    text-align: center;
}

.djicon {  /* djicon column */
    padding: 5px 10px 5px 10px;
    text-align: center;
}

.djname {  /* djname column */
    padding: 5px 20px 5px 10px;
    text-align: left;
}

.score {  /* score column */
    padding: 5px 0px 5px 20px;
    text-align: left;
}

.djs {  /* td cell containing the DJ scores table */
    padding: 0px 50px 0px 0px;
    vertical-align: top;
}

.rivals {  /* td cell containing the Rival scores table */
    padding: 0px 0px 0px 50px;
    vertical-align: top;
}

h3 img {  /* disc icons */
    width: 66px;
    height: 66px;
    vertical-align: middle;
}

table {
    table-layout: fixed;
}

.rank {  /* rank column */
    text-align: center;
    width: 50px;
}

.djicon {  /* djicon column */
    text-align: center;
    width: 75px;
}

.djname {  /* djname column */
    text-align: left;
    width: 125px;
}

.score {  /* score column */
    text-align: left;
    width: 100px;
}

.djs {  /* td cell containing the DJ scores table */
    vertical-align: top;
}

.rivals {  /* td cell containing the Rival scores table */
    vertical-align: top;
}

h3 img {  /* disc icons */
    width: 66px;
    height: 66px;
    vertical-align: middle;
}

Use width instead of padding and set table layout to fixed.


/***************/
/* page layout */
/***************/

[id=menu] {
	position:fixed;
}
[id=content] {
	/* *****  EDIT THIS VALUE IF CONTENT OVERLAPS MENU ***** */
	padding-left:40ex;
}

/**************/
/* menu style */
/**************/

#menu .submenu {
	padding-top:1em;
	display:block;
}

#menu label {
	display:block;
	font-weight: bold;
	text-align: center;
	background-color: rgb(192,192,192);
}
#menu a {
	padding:0 .2em;
	display:block;
	text-align: center;
	background-color: rgb(235,235,235);
}
#menu a:visited {
	color:rgb(100,50,100);
}

/***************/
/* page layout */
/***************/

[id=menu] {
	position:fixed;
}
[id=content] {
	/* *****  EDIT THIS VALUE IF CONTENT OVERLAPS MENU ***** */
	padding-left:40ex;
	padding-right:5ex;
}

/**************/
/* menu style */
/**************/

#menu .submenu {
	padding-top:1em;
	display:block;
}

#menu label {
	display:block;
	font-weight: bold;
	text-align: center;
	background-color: rgb(192,192,192);
}
#menu a {
	padding:0 .2em;
	display:block;
	text-align: center;
	background-color: rgb(235,235,235);
}
#menu a:visited {
	color:rgb(100,50,100);
}

Add some padding to the right of "content" to balance out.

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


#notifs_widget li:not(:first-child) {
    display: list-item;
}

#notifs_widget li img {
    max-height: 2em;
    float: left;
    margin-right: 0.5em;
    border-radius: 1em;
}

#notifs_widget.groupshown li:not(:first-child){
    display: none;
}

#notifs_widget.groupshown ul li:first-child:before {
    font-family: "Material Design Iconic Font";
    content: "\f2c2";
    display: inline-block;
}

#notifs_widget ul li:first-child:before {
    font-family: "Material Design Iconic Font";
    content: "\f2c0";
    display: inline-block;
}

#notifs_widget li:not(:first-child) {
    display: list-item;
}

#notifs_widget li img {
    max-height: 2em;
    float: left;
    margin-right: 0.5em;
    border-radius: 1em;
}
/*
#notifs_widget.groupshown li:not(:first-child){
    display: none;
}

#notifs_widget.groupshown ul li:first-child:before {
    font-family: "Material Design Iconic Font";
    content: "\f2c2";
    display: inline-block;
}

#notifs_widget ul li:first-child:before {
    font-family: "Material Design Iconic Font";
    content: "\f2c0";
    display: inline-block;
}
*/

Disable the folding incoming invitation list


* {
  font-family: 'Cutive mono', monospace;
}

main {
  margin-top: 5em;
  margin-bottom: 5em;
}

.blog-header {
  width: 50%;
  margin: 0 auto;
  text-align: center;
  line-height: 10px;
}

.blog-header h4 {
  font-style: italic;
}

.blog-post {
  width: 50%;
  margin: 0 auto;
  text-align: justify;
  font-size: 1.3em;
}

#edit {
  font-style: italic;
}

* {
  font-family: 'Cutive mono', monospace;
}

main {
  margin-top: 5em;
  margin-bottom: 5em;
}

.blog-header {
  width: 50%;
  text-align: center;
  line-height: 10px;
}

.blog-header h4 {
  font-style: italic;
}

.blog-post {
  width: 50%;
  text-align: justify;
  font-size: 1.3em;
}

#edit {
  font-style: italic;
}

Add margin to blog posts

Add margin to blog posts


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

.blog #date_font {}

h4 {
  font-weight: bold;
}

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

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

}

.blog h1 {
  font-family: Muli;
}

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

.blog #date_font {}

h4 {
  font-weight: bold;
}

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

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

}

.blog h1 {
  font-family: "Open Sans Condensed";
}

Add new font-family to blog stylesheet.

Add new font-family to blog stylesheet.


ul.pagehead-actions .npm-stats .btn svg {
  position: relative;
  top: 3px;
}

ul.pagehead-actions .npm-stats .select-menu-modal {
  width: 400px;
  left: -55px;
}

ul.pagehead-actions .npm-stats--inside .select-menu-modal {
  left: auto;
  right: 0;
  z-index: 1;
}

ul.pagehead-actions .npm-stats .select-menu-modal dl {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  height: 40px;
}

ul.pagehead-actions .npm-stats .select-menu-modal dl dt {
  font-weight: bold;
}

ul.pagehead-actions .npm-stats .btn svg {
  position: relative;
  top: 3px;
}

ul.pagehead-actions .npm-stats .select-menu-modal {
  width: 400px;
  left: -55px;
}

ul.pagehead-actions .npm-stats--inside .select-menu-modal {
  left: auto;
  right: 0;
}

ul.pagehead-actions .npm-stats .select-menu-modal dl {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  height: 40px;
}

ul.pagehead-actions .npm-stats .select-menu-modal dl dt {
  font-weight: bold;
}

Revert "add z-index to modal"

Revert "add z-index to modal"

This reverts commit ede10e0d9b1f66ad95a717a69c4c8a821fb2b26b.


header {
  position: relative;

  bottom: 80%;

  width: 100%;
  height: 20%;

  padding: 0%;
  margin: 0%;
}

header h1{
  position: relative;
  display: block;

  left: 35%;
  bottom: 87%;

  font-weight: bolder;
  font-size: 2em;
}

header h2 {
  position: relative;
  display: block;

  bottom: 82%;
  left: 40%;

  font-weight: bold;
  font-size: 1.5em;
}

time {
  position: relative;
  display: block;
  left: 25%;
}

h4 {
  font-weight: bold;
  font-size: 1.1em;
}

main {
  margin: 0% 5% 5% 25%;
}

code {
  word-wrap: normal;
}

Update word wrap on code tags

Update word wrap on code tags


body {
  font-family: "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

.body-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 24px;
}

.body-margin {
  width: 300px;
  flex-shrink: 2;
}

.page-container {
  width: 100%;
}

.page-container.logged-out {
  margin: 0;
}

.landing-page-img {
  width: 100%;
}

.MuiButton-containedPrimary:enabled, .MuiChip-colorPrimary {
  background-color: #61b985 !important;
}

.MuiButton-containedSecondary:enabled, .MuiChip-colorSecondary {
  background-color: #eda14f !important;
}

Make body font Roboto by default. Add Woolaroo colors to controls (button, chip).


Build for improving information on list views.


/***********************/
/* Scientist List View */
/***********************/

.gallery-heading {
  margin-bottom: 25px;
}
.thumbnail {
  max-width: 310px;
}
.thumbnail {
  margin-left: auto;
  margin-right: auto;
}
.thumbnail a:hover {
  text-decoration: none;
}
.thumbnail:hover {
  border-color: black;
}

/*************************/
/* Scientist Detail View */
/*************************/

.scientist-photo {
  max-width: 100%;
}

/***********************/
/* Scientist List View */
/***********************/

.gallery-heading {
  margin-bottom: 25px;
}
.thumbnail {
  max-width: 310px;
}
.thumbnail {
  margin-left: auto;
  margin-right: auto;
}
.thumbnail a:hover {
  text-decoration: none;
}
.thumbnail:hover {
  border-color: black;
}
/* Adjust the y-position when following link to Lab Alumni anchor */
#lab-alumni {
  padding-top: 135px;
  margin-top: -135px;
}

/*************************/
/* Scientist Detail View */
/*************************/

.scientist-photo {
  max-width: 100%;
}


li.social-link {
  display: inline-block;
}

a.social-link {
  margin: .5rem;
  padding: .5rem;
  width: 4em;
  height: 4em;
  display: inline-block;
}

.social-icon {
  height: 4em;
  position: absolute;
}

.social-icon.black {
  opacity: 1;
  transition: opacity 200ms ease;
}
.social-icon.black:hover {
  opacity: 0;
  transition: opacity 200ms ease;
}

.social-icon.color {
  opacity: 0;
  transition: opacity 200ms ease;
}
.social-icon.color:hover {
  opacity: 1;
  transition: opacity 200ms ease;
}

li.social-link {
  display: inline-block;
}

a.social-link {
  margin: .5rem;
  padding: .5rem;
  width: 4em;
  height: 4em;
  display: inline-block;
}

.social-icon {
  height: 4em;
  position: absolute;
}

.social-icon.black {
  opacity: 1;
  transition: all .2s ease;
}
a.social-link:hover .black {
  opacity: 0;
}

.social-icon.color {
  opacity: 0;
  transition: all .2s ease;
}
a.social-link:hover .color {
  opacity: 1;
}

:bug: Fix hover state for overlapping elements

Use the hover state of the parent instead.


h1 {
    white-space: normal;
    word-wrap: break-word;
}

.header .progress {
    margin: 8px 0 4px 0;
    height: 4px;
}

.subtle {
    opacity: 0.6;
}

.side-actions {
    text-align: right;
}

.task-queues .queue  {
    margin: 0 0 5px 0;
}

.task-queues .queue .name {
    padding-right: 5px;
    padding-left: 0;
}

.task-queues .queue .name .label {
    display:block;
    text-align: right;
}

.task-queues .queue .bar {
    padding-left: 0;
}

.task-queues .queue .bar .label {
    display: inline-block;
    text-align: left;
}

.task-queues .queue .bar .wrapper {
    display: block;
    background-color: #e6e6e6;
    border-radius: .25em;
}

.task-queues .label {
    padding-top: 3px;
}

#cancel-button {

}

h1 {
    white-space: normal;
    word-wrap: break-word;
}

.header .progress {
    margin: 8px 0 4px 0;
    height: 4px;
}

.subtle {
    opacity: 0.6;
}

.side-actions {
    text-align: right;
}

.side-actions .modal {
    text-align: left;
}

.task-queues .queue  {
    margin: 0 0 5px 0;
}

.task-queues .queue .name {
    padding-right: 5px;
    padding-left: 0;
}

.task-queues .queue .name .label {
    display:block;
    text-align: right;
}

.task-queues .queue .bar {
    padding-left: 0;
}

.task-queues .queue .bar .label {
    display: inline-block;
    text-align: left;
}

.task-queues .queue .bar .wrapper {
    display: block;
    background-color: #e6e6e6;
    border-radius: .25em;
}

.task-queues .label {
    padding-top: 3px;
}

@media (min-width: 1200px) {
    .side-actions {
        position: static;
    }

    .side-actions .test-options {
        position: absolute;
        bottom: 10px;
    }
}

Align side action test options

Align side action test options


body {
  background-image: url("blog-background-image.jpg");
}

.background {
  margin-top: 30px;
  margin-right: 85px;
  margin-left: 75px;
  position: fixed;
  height: 100%;
  background-color: white;
  border: 2px solid #d3d3d3;
  border-radius: 20px;
  border-bottom: -50px;
  padding-top: 20px;
  padding-left: 30px;
  padding-right: 10px;
}

.background:before {
   content: " ";
   border-radius: 20px;
   position: fixed;
   z-index: -1;
   top: 22px;
   left: 67px;
   right: 70px;
   height: 100%;
   border: 1px solid white;
   background-color: white;
}

#navigation_bar {
  height: 50px;
  margin-right: -30px;
  margin-left: -50px;
  border-top: 2px solid #d3d3d3;
  border-bottom: 2px solid #d3d3d3;
  display: block;
  background-color: #5d4a7d;
}

#navigation_bar:before {
   content: " ";
   z-index: -1;
   right: -30px;
   left: -50px;
   background-color: #5d4a7d;
   display: block;
}

body {
  background-image: url("blog-background-image.jpg");
}

.background {
  margin-top: 30px;
  margin-right: 85px;
  margin-left: 75px;
  position: fixed;
  height: 100%;
  background-color: white;
  border: 2px solid #d3d3d3;
  border-radius: 20px;
  border-bottom: -50px;
  padding-top: 20px;
  padding-left: 30px;
  padding-right: 10px;
}

.background:before {
   content: " ";
   border-radius: 20px;
   position: fixed;
   z-index: -1;
   top: 22px;
   left: 67px;
   right: 70px;
   height: 100%;
   border: 1px solid white;
   background-color: white;
}

#navigation_bar {
  height: 50px;
  margin-right: -30px;
  margin-left: -50px;
  border-top: 3px dashed #d3d3d3;
  border-bottom: 3px dashed #d3d3d3;
  display: block;
  background-color: #5d4a7d;
}

Add border to nav bar

Add border to nav bar


#floating_div {
    text-align: center;
    z-index: 100;
    position: relative;
    left: 30%;
    width: 200px;
    padding: 10px;
    background: #000;
    opacity: 0.8;
    color: #FFF;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.org_form {
    width: 95%;
    margin-bottom: 0 !important;
}
.org-info-msg-1 {
    color: rgba(0, 0, 0, 0.7);
    background-color: #E0FDEF;
    width:50%;
    border-radius:2em;
    text-align: center;
}

.borderless {
    border-top: none !important;
}

Add back accidentally deleted styling

Add back accidentally deleted styling


.latest-show {
  color: #ffffff;

  @media only screen and (min-width : 970px) {
    background-image: url(resources/images/confetti-dark.svg);
    background-repeat: no-repeat;
  }

  &__container {
    // max-width: 1000px;
    width: 90%;
    padding: 30px 0px;
    margin: 0 auto;
    @media only screen and (min-width : 970px) {
      padding-left: 270px;
    }
  }

  &__heading {
    text-transform: uppercase;
    color: #F5DD00;
    font-size: 1.3em;
    font-weight: bold;
    letter-spacing: 1.3px;
    margin-bottom: 15px;
  }

  &__link {
    color: #ffffff;
    font-size: 1.9em;
    font-weight: bold;
    line-height: 1.25em;
    margin-bottom: 15px;
    display: block;
  }

  &__date {
    text-transform: uppercase;
    color: #606060;
    font-weight: bold;
    letter-spacing: 1.3px;
    font-size: 1.1em;
  }

}

.latest-show {
  color: #ffffff;

  @media only screen and (min-width : 970px) {
    background-image: url(resources/images/confetti-dark.svg);
    background-repeat: no-repeat;
    background-position: -10px -15px;
  }

  &__container {
    // max-width: 1000px;
    width: 90%;
    padding: 30px 0px;
    margin: 0 auto;
    @media only screen and (min-width : 970px) {
      padding-left: 270px;
    }
  }

  &__heading {
    text-transform: uppercase;
    color: #F5DD00;
    font-size: 1.3em;
    font-weight: bold;
    letter-spacing: 1.3px;
    margin-bottom: 15px;
  }

  &__link {
    color: #ffffff;
    font-size: 1.9em;
    font-weight: bold;
    line-height: 1.25em;
    margin-bottom: 15px;
    display: block;
  }

  &__date {
    text-transform: uppercase;
    color: #606060;
    font-weight: bold;
    letter-spacing: 1.3px;
    font-size: 1.1em;
  }

}

Reposition "latest show" section confetti background

This new position better reflects the original design.


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

header {
  margin: 0;
	padding: 0;
	color: #333;
	background-color: #eee;
	font: sans-serif;
}

header h1 {
  display: inline;
  margin-right: 20px;
}

header h2 {
  margin: 0;
  display: inline;
}

nav ul{
  margin: 0;
  display: inline;
}

nav ul li {
  background: #eee;
  color #333;
  display: inline-block;
  list-style-type: none;
}

nav ul li a {
  color: #333;
}

main p {
  color: #333;
}

main h3 {
  color: #333;
}

html {
	margin: 0;
	padding: 0;
	}

body {
	font: 75% georgia, sans-serif;
	line-height: 1.88889;
	color: #555753;
	margin: 0;
	padding: 0;
}

header {
  margin: 0;
	padding-top: 20px;
	height: 87px;
	color: #333;
	background-color: #eee;
	font: sans-serif;
}

header h1 {
		margin-top: 10px;
		display: block;
		width: 219px;
		height: 87px;
		float: left;

		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
}

header h2 {
	margin-top: 58px;
	margin-bottom: 40px;
	width: 200px;
	height: 18px;
	float: right;

	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

nav ul{
  margin: 0;
  display: inline;
}

nav ul li {
  background: #eee;
  color #333;
  display: inline-block;
  list-style-type: none;
}

nav ul li a {
  color: #333;
}

main p {
  color: #333;
}

main h3 {
  color: #333;
}

Add body, header, h1, h2 from Garment to css


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

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

Fix active_admin css conflicting with Twitter Bootstrap