body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
}

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

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.editContainer {
    display: flex;
    flex-direction: row;
    padding-left: 16px;
}

.controls {
    position: fixed;
    top: 5px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.share {
    display: flex;
    align-items: center;
}

.facebook-share-button {
    display: inline-block;
    padding-right: 4px;
    cursor: pointer;
}

.twitter-share-button {
    display: inline-block;
    padding-left: 4px;
    cursor: pointer;
}

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

.year {
    font-size: 22px;
}

.label {
    font-size: 16px;
}

.label.highlighted {
    font-weight: bold;
}

.position-label-left {
    font-size: 16px;
}

.position-label-right {
    font-size: 16px;
}

Remove unnecessary styles for chart

Remove unnecessary styles for chart


html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

ion-side-menu-content {
	background-color: #FFF;
}

video {
    width: 100%;
    max-width: 100%;
}

img {
    max-width: 100%;
}

.ng-text p,
.ionic-inappbrowser-button {
	padding: 0.5em 1em 0 1em;
	margin: 0;
}

.list {
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}

.card {
	padding-top: 1px;
}

Fix style conflict with editor.html

Fix style conflict with editor.html


.CodeMirror {
  /* https://codemirror.net/demo/resize.html */
  height: auto;
}

.CodeMirror-gutters {
  background: var(--silver);
}

.CodeMirror-linenumber {
  background: var(--silver);
}

.CodeMirror {
  /* https://codemirror.net/demo/resize.html */
  height: auto;
  min-height: 150px;
}

.CodeMirror-scroll {
  min-height: 150px;
}

.CodeMirror-gutters {
  background: var(--silver);
}

.CodeMirror-linenumber {
  background: var(--silver);
}

Increase CodeMirror min-height to 7 lines


body {
    background-color: wheat;
}

#canvasContainer {
    background-color: white;
    position:relative;
    overflow:auto;
}

#bases {
    font-family: monospace;

    width: min-content;
    height: fit-content;
    white-space: normal;
    overflow:auto;
}

.textInput {
    width: 250px;
}

body {
    background-color: wheat;
}

#canvasContainer {
    background-color: white;
    position:relative;
    overflow:auto;
}

#bases {
    font-family: monospace;

    width: min-content;
    height: fit-content;
    white-space: normal;
    overflow:auto;
}

#baseContainer {
    overflow:auto;
}

.textInput {
    width: 250px;
}

Add base container selector, set overflow attribute


body {
  font-family: 'Josefin Slab', serif;
  font-size: large;
  background-color: #020202;
  color: #fac93e;
}

a {
  color: #E88551;
  text-decoration: none;
}
.group a {
  display: block;
}
a:visited {
  color: #DAA91E;
}
a:hover {
  text-decoration: underline;
}

.group {
  float: left;
  margin: 0 1em 1em 1em;
  border: 1px solid grey;
  padding: 0 1em 1em 1em;
}

footer {
  color: white;
  position: fixed;
  bottom: 0;
  text-align: center;
  width: 100%;
  background-color: #111111;
  padding: 0.2em;
}

body {
  font-family: 'Josefin Slab', serif;
  font-size: large;
  background-color: #020202;
  color: #fac93e;
}

a {
  color: #E88551;
  text-decoration: none;
}
.group a {
  display: block;
}
a:visited {
  color: #DAA91E;
}
a:hover {
  text-decoration: underline;
}

.group {
  float: left;
  margin: 0 1em 1em 1em;
  border: 1px solid grey;
  padding: 0 1em 1em 1em;
}

footer {
  color: white;
  position: fixed;
  bottom: 0;
  text-align: center;
  width: 100%;
  background-color: #333;
  padding: 0.2em;
}

Make the footer better visible.

Make the footer better visible.


.rvc-ui {
	border: 1px solid #333;
	padding: 1em;
}

.rvc-progress {
	border: 1px solid #333;
	padding: 0.5em;
	padding-bottom: 0;
}

.rvc-progress > div {
	border: 1px solid #333;
	min-width: 0.5em;
	background: #FFF;
	display: inline-block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.rvc-progress div div {
	height: 1em;
}

.rvc-progress div.rvc-damaging-1,
.rvc-progress div.rvc-good-faith-0 {
	background: #C00;
}

.rvc-progress div.rvc-damaging-0,
.rvc-progress div.rvc-good-faith-1 {
	background: #27AA65;
}

.rvc-selected {
	background: #CFC;
}

.rvc-progress .rvc-selected {
	background: #FF0;
}

#rvc-ui {
	border: 1px solid #333;
	padding: 1em;
}

.rvc-progress {
	border: 1px solid #333;
	padding: 0.5em;
	padding-bottom: 0;
}

.rvc-progress > div {
	border: 1px solid #333;
	min-width: 0.5em;
	background: #FFF;
	display: inline-block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.rvc-progress div div {
	height: 1em;
}

.rvc-progress div.rvc-damaging-1,
.rvc-progress div.rvc-good-faith-0 {
	background: #C00;
}

.rvc-progress div.rvc-damaging-0,
.rvc-progress div.rvc-good-faith-1 {
	background: #27AA65;
}

.rvc-selected {
	background: #CFC;
}

.rvc-progress .rvc-selected {
	background: #FF0;
}

Fix wrong CSS selector for ID

Fix wrong CSS selector for ID


#editor {
  position: relative;
  width: 500px;
  height: 400px;
}
.run-button {
  display: inline-block;
  background: #8f7a66;
  border-radius: 3px;
  padding: 0 20px;
  text-decoration: none;
  color: #f9f6f2;
  height: 40px;
  line-height: 42px;
  display: block;
  text-align: center;
  float: right; }

@media screen and (max-width: 520px) {
  #editor {
    width: 280px;
  }
  .run-button {
    width: 42%;
    padding: 0;
    display: block;
    box-sizing: border-box;
    margin-top: 2px; }
}

#editor {
  position: relative;
  width: 500px;
  height: 400px;
}
.run-button {
  margin-left: 5px;
  display: inline-block;
  background: #8f7a66;
  border-radius: 3px;
  padding: 0 20px;
  text-decoration: none;
  color: #f9f6f2;
  height: 40px;
  line-height: 42px;
  display: block;
  text-align: center;
  float: right; }

@media screen and (max-width: 520px) {
  #editor {
    width: 280px;
  }
  .run-button {
    width: 42%;
    padding: 0;
    display: block;
    box-sizing: border-box;
    margin-top: 2px; }
}

Add margin between editor buttons

Add margin between editor buttons


* {
  background-color: #a3a3c2;
}

h1, h2, h3 {
  font-weight: 400;
}

.App {
  text-align: center;
  background-color: #a3a3c2;
  color: #f2f2f2;
}

.App-header {
  background-color: transparent;
  height: 150px;
  padding: 10px;
  color: white;
  /*width: 100%;*/
}

.App-header h1 {
  font-size: 5em;
  font-family: 'Open Sans', sans-serif;
  font-weight: 100;
  color: #f2f2f2;
}

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

.body {
  display: inline-block;
  height:100vh;
  overflow: scroll;

}

.hidden {
  display: none;
}

.button {
  background: white;
  color: black;
}

.back {
  color: #ffe6cc;
}

.back:hover {
  color: black;
}

a {
  text-decoration: none;
  background-color: transparent;
  color: #ffe6cc;
}

a:hover {
  color: black;
  background-color: transparent;
}

* {
  background-color: #a3a3c2;
  border: 1px solid black;
}

h1, h2, h3 {
  font-weight: 400;
}

.App {
  text-align: center;
  background-color: #a3a3c2;
  color: #f2f2f2;
}

.App-header {
  background-color: transparent;
  height: 150px;
  padding: 10px;
  color: white;
  /*width: 100%;*/
}

.App-header h1 {
  font-size: 5em;
  font-family: 'Open Sans', sans-serif;
  font-weight: 100;
  color: #f2f2f2;
}

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

.body {
  display: inline-block;
  height:100vh;
  overflow: scroll;
  width: 100%;
}

.hidden {
  display: none;
}

.button {
  background: white;
  color: black;
}

.back {
  color: #ffe6cc;
}

.back:hover {
  color: black;
}

a {
  text-decoration: none;
  background-color: transparent;
  color: #ffe6cc;
}

a:hover {
  color: black;
  background-color: transparent;
}

Add width to containing div

Add width to containing div


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

#canvas
{
    background-color: #add8e6;
}

h3.private
{
    margin-top: 10px;
}

a:hover, a:focus
{
    text-decoration: none;
}

#overlays
{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

#menu, .menu-private
{
    width: 350px;
    background-color: #FFFFFF;
    margin: 100px auto;
    border-radius: 15px;
    padding: 5px 15px;
}

.btn-group.play
{
    width: 86%;
}

.btn-play
{
    width: 90%;
}

.dropdown-menu
{
    left: auto;
    right: 0;
    text-align: right;
}

.settings
{
    display: none;
    margin: 6px;
}

.menu-private
{
    display: none;
}

.btn-private
{
    margin-bottom: 15px;
}

#hud
{
    position: absolute;
    background-color: #FFFFFF;
    bottom: 0;
}

.hud
{
    position: absolute;
    border-radius: 3px;
    margin: 5px;
}

.hud:hover
{
    cursor: pointer;
}

Make the cursor a pointer when hovering over the HUD elements


.jvectormap-label {
    position: absolute;
    display: none;
    border: solid 1px #CDCDCD;
    -moz-border-radius: 3px;
    background: #292929;
    color: white;
    font-family: sans-serif, Verdana;
    font-size: smaller;
    padding: 3px;
}

.jvectormap-zoomin, .jvectormap-zoomout {
    position: absolute;
    -moz-border-radius: 3px;
    background: #292929;
    padding: 3px;
    color: white;
    width: 10px;
    height: 10px;
    cursor: pointer;
    line-height: 10px;
    text-align: center;
}

.jvectormap-zoomin {
    left: 10px;
    top: 10px;
}

.jvectormap-zoomout {
    left: 10px;
    top: 30px;
}

.jvectormap-label {
    position: absolute;
    display: none;
    border: solid 1px #CDCDCD;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: #292929;
    color: white;
    font-family: sans-serif, Verdana;
    font-size: smaller;
    padding: 3px;
}

.jvectormap-zoomin, .jvectormap-zoomout {
    position: absolute;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: #292929;
    padding: 3px;
    color: white;
    width: 10px;
    height: 10px;
    cursor: pointer;
    line-height: 10px;
    text-align: center;
}

.jvectormap-zoomin {
    left: 10px;
    top: 10px;
}

.jvectormap-zoomout {
    left: 10px;
    top: 30px;
}

Add Webkit and Regular border radius declarations


.songList {
  list-style-type: kannada;
}

.songList li {
  cursor: pointer;
}

.songList li:first-child {
  text-decoration: underline;
}

Add underline to first track.

Add underline to first track.


/*
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 6 by Zurb
Version:            2.6.1
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

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

/*
Theme Name:         Elixir
Theme URI:          http://www.efficiencyofmovement.com
Github Theme URI:   https://github.com/joshsmith01/theme-elixir
Description:        Elixir is a demonstration of the power of Zurb's Foundation 6, FoundationPress, and WordPress. FoundationPress is a WordPress starter theme based on Foundation 6 by Zurb
Version:            2.6.1
Author:             Josh Smith
Author URI:         http://www.efficiencyofmovement.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

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

Add project-specific information to the required CSS file.


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

a:link {
    color: white;
}

a:visited {
    color: lightgrey;
}

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

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

.active {
    background-color: grey;
}

img {
    text-align: center;
}

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

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

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

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

.navbar {
    padding: 18px;
}

.navbar a:link {
    color: black
}

.navbar a:visited {
    color: black
}

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

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

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

a:link {
    color: white;
}

a:visited {
    color: lightgrey;
}

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

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

.active {
    background-color: grey;
}

img {
    text-align: center;
}

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

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

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

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

.navbar {
    padding: 18px;
}

.navbar a:link {
    color: black
}

.navbar a:visited {
    color: black
}

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

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

Revert "Revert "Add 0 margin to body, html""

This reverts commit 6ead90bd68029eeef179579e8b01f5682c15cf22.


.segment-content {
    border-radius: 3px;
    padding: 15px;
    box-shadow: 2px 4px 5px rgba(0,0,0,0.2);
    background-color: hsl(0, 0%, 97%);
    transition: all 0.5s;
}
.segment-content:hover {
    box-shadow: 2px 4px 5px rgba(0,0,0,0.6);
    background-color: hsl(0, 0%, 100%);
}

.dash-segment-award > .segment-content {
    box-shadow: none;
    background-color: transparent;
}

a.friend_man {
    border-radius: 1px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
    transition: box-shadow 0.5s;
}

a.friend_man:hover {
    border-radius: 1px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}

.display_name, h2 {
    color: #36628B;
    text-transform: uppercase;
}

.dash-segment .segment-content {
    border-radius: 3px;
    padding: 15px;
    box-shadow: 2px 4px 5px rgba(0,0,0,0.2);
    background-color: hsl(0, 0%, 97%);
    transition: all 0.5s;
}
.dash-segment [class="segment-content"]:hover {
    box-shadow: 2px 4px 5px rgba(0,0,0,0.6);
    background-color: hsl(0, 0%, 100%);
}

.dash-segment-award .segment-content {
    box-shadow: none;
    background-color: transparent;
}

a.friend_man {
    border-radius: 1px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
    transition: box-shadow 0.5s;
}

a.friend_man:hover {
    border-radius: 1px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}

.display_name, h2 {
    color: #36628B;
    text-transform: uppercase;
}

Fix *content*:hover usage to bypass Plurk restriction


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

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

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

.img-wrap {
    margin: auto;
    align-self: center;
    display: block;
}

.design-wrap {
  margin: auto;
  display: block;
  width: 50%;
}

Add design-wrap css to size

Add design-wrap css to size


.editor-container {
  height: calc(100vh - 10rem);
}

.transcript-editor {
  overflow-y: scroll;
}

.timestamp {
  /*  */
}

.video-player-container {
  padding-left: 0%;
}
.ql-editor {
  color: rgba(0, 0, 0, 0.8);
  font-size: 12pt;
}

#content > .uk-grid {
  width: 95vw;
}

/* Force times to display.
   See: https://stackoverflow.com/questions/15324061/show-the-current-time-of-the-video-instead-of-the-remaining-time-on-videojs
*/

.vjs-time-control {
  display: block;
}

div.vjs-control-bar > div.vjs-current-time.vjs-time-control.vjs-control {
  display: inline;
}

div.vjs-control-bar > div.vjs-time-control.vjs-time-divider {
  display: none;
}

div.vjs-control-bar > div.vjs-duration.vjs-time-control.vjs-control {
  display: none;
}

Use CSS to control which player controls show up


.modal-budget-move-money .modal, .modal-budget-overspending .modal {
    width: 20em;
}

.ynab-select-options {
    height: 15em;
}

.modal-budget-move-money .modal, .modal-budget-overspending .modal {
    width: 20em;
    height: 15em;
}

.ynab-select-options {
    height: 15em;
    top: -86px;
}

Make the categories always fit on the page


/* Très petits écrans (smartphones, moins de 768px) */
/* Pas besoin de media-query, c'est le style par défaut */
address {
  background-color: blue;
  width: 100%;
  height: 100%;
}

map iframe {
  width: 100%;
}

.message {
  height: 35px;
}

/* Petits écrans (tablettes, 768px et plus) */
@media (min-width: 768px) {

 }

/* Ecrans moyens (desktops, 992px et plus) */
@media (min-width: 992px) {

 }

/* Très petits écrans (smartphones, moins de 768px) */
/* Pas besoin de media-query, c'est le style par défaut */
address {
  background-color: blue;
  width: 100%;
  height: 100%;
}

map iframe {
  width: 100%;
}

.message {
  height: 35px;
}

.NavPc {
  display: none;
}

/* Petits écrans (tablettes, 768px et plus) */
@media (min-width: 768px) {

 }

/* Ecrans moyens (desktops, 992px et plus) */
@media (min-width: 992px) {

 }

Add header to mobile in contact

Add header to mobile in contact


.option1-vote, .option2-vote {
  width: 100%;
  min-height: 800px;
  background-position: 50%;
  text-align: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.vote-button{
  margin: 25% auto;
}

#option1, #option2 {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 5px solid white;
}

#option1 {
  border: 5px solid black;
}

#option1>img, #option2>img {
  margin-top: 20%;
  border: 5px solid white;
}

#winner-photo, #loser-photo {
  width: 100px;
  height: 100px;
}

#winner-photo {
  border: solid #9FE695 5px;
}

#loser-photo {
  border: solid #E69595 5px;
}

.last-photo {
  margin-top: 5px;
  width: 90px;
  height: 90px;
}

.prev-winner, .prev-loser {
  text-align: center;
}

p {
  margin-top: calc(50px - 0.5em);
}

.option1-vote, .option2-vote {
  width: 100%;
  min-height: 800px;
  background-position: 50%;
  text-align: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.vote-button{
  margin: 25% auto;
}

#option1, #option2 {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 5px solid white;
}

#option1 {
  border: 5px solid black;
}

#option1>img, #option2>img {
  margin-top: 20%;
  border: 5px solid white;
}

#winner-photo, #loser-photo {
  width: 100px;
  height: 100px;
}

#winner-photo {
  border: solid #9FE695 5px;
}

#loser-photo {
  border: solid #E69595 5px;
  opacity: 0.5;
}

.last-photo {
  margin-top: 5px;
  width: 90px;
  height: 90px;
}

.prev-winner, .prev-loser {
  text-align: center;
}

p {
  margin-top: calc(50px - 0.5em);
}

Change opacity on tiny loser picture to 0.5


.related {
  border-bottom: none;
}

.like-on-twitter {
  text-align: center;
}

.like-on-twitter p {
  margin: 0;
  display: inline-block;
  padding: 10px;
  border-radius: 5px;
  border: 2px dashed #55acee;
  color: #55acee;
}

.like-on-twitter p a {
  color: #55acee !important;
  text-decoration: none;
}

.like-on-twitter p a:hover {
  border-bottom: 1px solid #55acee;
}

.related {
  border-top: none;
}

.like-on-twitter {
  text-align: center;
}

.like-on-twitter p {
  margin: 0;
  display: inline-block;
  padding: 10px;
  border-radius: 5px;
  border: 2px dashed #55acee;
  color: #55acee;
}

.like-on-twitter p a {
  color: #55acee !important;
  text-decoration: none;
}

.like-on-twitter p a:hover {
  border-bottom: 1px solid #55acee;
}

Change reset .related to border top

Change reset .related to border top


/* Create room for header */
body.page {
  padding-top: 70px;
}

/* Use our font for logotype */
.brand {
  font-family: 'Directa Serif', 'DirectaSerifHeavy';
  color: #cd6a21;
}
.navbar-brand a {
  font-family: 'Directa Serif', 'DirectaSerifHeavy';
  font-size: 1.2em;
  color: #cd6a21;
}

/* Place the corner banner */
#corner-banner {
  position: fixed;
  left: -65px;
  top: 25px;
  width: 200px;
  padding: 6px 0px;
  z-index: 1030;

  -webkit-transform: rotate(-45deg);  /* Saf3.1+, Chrome */
  transform: rotate(-45deg);  /* CSS3 (for when it gets supported) */

  box-shadow: rgba(0,0,0, 0.2) 0px 0px 6px;

  text-align: center;

  font-weight: bold;
  font-size: 18px;

  color: #fff;
  text-shadow: #000 2px 2px 2px;

  background: #b00;
}

/* Create room for header */
body.page {
  padding-top: 70px;
}

/* Use our font for logotype */
.brand {
  font-family: 'Directa Serif', 'DirectaSerifHeavy';
  color: #cd6a21;
}
.navbar-brand a {
  font-family: 'Directa Serif', 'DirectaSerifHeavy';
  font-size: 1.2em;
  color: #cd6a21;
}

footer {
  margin-top: 20px;
}

/* Place the corner banner */
#corner-banner {
  position: fixed;
  left: -65px;
  top: 25px;
  width: 200px;
  padding: 6px 0px;
  z-index: 1030;

  -webkit-transform: rotate(-45deg);  /* Saf3.1+, Chrome */
  transform: rotate(-45deg);  /* CSS3 (for when it gets supported) */

  box-shadow: rgba(0,0,0, 0.2) 0px 0px 6px;

  text-align: center;

  font-weight: bold;
  font-size: 18px;

  color: #fff;
  text-shadow: #000 2px 2px 2px;

  background: #b00;
}

Add a little margin before our footer to prevent crowding


.Idea {
  display: flex;
  flex-direction: row;
  align-items: center;
  transition: transform cubic-bezier(0.19, 1, 0.22, 1);
  min-height: 48px;
  padding-left: 16px;
  padding-right: 16px;
}
.Idea.will-be-deleted {
  transform: translate3d(105%, 0, 0);
  background-color: #B71C1C;
  transition-duration: 1s;
}
.Idea > * {
  flex-basis: 0;
}
.Idea p {
  flex-grow: 8;
  margin-top: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.Idea .Actions {
  flex-grow: 2;
  display: flex;
  flex-direction: row-reverse;
}
.Idea .Actions .IconButton {
  opacity: 0;
}
.Idea:hover .Actions .IconButton {
  opacity: 1;
}

.Idea {
  display: flex;
  flex-direction: row;
  align-items: center;
  transition: transform cubic-bezier(0.19, 1, 0.22, 1);
  min-height: 48px;
  padding-left: 16px;
  padding-right: 16px;
}
.Idea > * {
  flex-basis: 0;
}
.Idea p {
  flex-grow: 8;
  margin-top: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.Idea .Actions {
  flex-grow: 2;
  display: flex;
  flex-direction: row-reverse;
}
.Idea .Actions .IconButton {
  opacity: 0;
}
.Idea:hover .Actions .IconButton {
  opacity: 1;
}

Remove redundant idea old animation css class


/**
 * Legend Key Abstraction
 *
 * The Legend Key object is similar to the Navigation object, however it is meant for a legend and not links
 * 1. Micro clearfix (Grouped in Clearfix-styles), as per: css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
 * 2. Assigns a delimiter on the fly through a data attribute
 *
 */

.o-legend-key { list-style: none; }

    /* .o-legend-key:after { display: table; clear: both; content: ''; } */ /* 1 */

    .o-legend-key > dt,
    .o-legend-key > dd { display: inline-block; }

    .o-legend-key > dd { margin-left: 0; }

.o-legend-key dt[data-breadcrumb]:before { content: attr(data-breadcrumb) "\00A0" /* 2 */; }
.o-legend-key dd[data-breadcrumb]:before { content: attr(data-breadcrumb) "\00A0" /* 2 */; }

/* ----- (extends legend-key orientation) ----- */
.o-legend-key--stacked > dt, .o-legend-key--stacked > dd { display: list-item; }
.o-legend-key--stacked > dd { margin-left: 1em; }

.o-legend-key--narrow dt[data-breadcrumb]:before { margin-left: -0.1rem; }

Add narrow modifer to o-legend

Add narrow modifer to o-legend


@media (min-width: 768px)
.navbar-default {
    background-color: black;
}

.bg-primary.odd {
    background-color: white;
    color: black;
}

aside.bg-primary.odd {
    background-color: black;
    color: #a6228f;
}

p {
    font-weight: 200;
}

@media (min-width: 768px)
.navbar-default {
    background-color: black;
}

.bg-primary.odd {
    background-color: white;
    color: black;
}

.bg-primary.even {
    background-color: black;
    color: white;
}

aside.bg-primary.odd {
    background-color: black;
    color: #a6228f;
}

p {
    font-weight: 200;
}

Change success stories background colors

Signed-off-by: Ian Allison <7bc9988c769ce5090502b3c0632842024edf4f5c@pims.math.ca>


:host {
  @apply inline-block list-none h-full text-xs text-center pl-1 pr-4 py-2 leading-none flex-1 border;
  background: var(--color-neutral-300);
  color: var(--color-neutral-700);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--color-neutral-500);

  &:not(:last-of-type) {
    border-right-width: 1px;
    border-right-style: solid;
    border-color: var(--color-neutral-500);
  }

  &.isActive {
    border-bottom-color: var(--color-neutral-300);
    box-shadow: inset 0px 3px var(--color-brand);
  }

  & > * {
    @apply align-middle;
  }

  &:hover,
  &:focus {
    stencila-icon {
      @apply opacity-100;
    }
  }
}

li {
  @apply flex list-none align-middle flex-row flex-nowrap items-center;
}

stencila-icon {
  @apply opacity-0 rounded-sm;

  &:hover,
  &:active {
    color: var(--color-neutral-300);
    background: var(--color-neutral-700);
  }
}

a,
a:link,
a:visited {
  @apply block no-underline whitespace-nowrap leading-none text-current flex-grow cursor-default;
}

:host {
  @apply inline-block list-none h-full text-xs text-center pl-1 pr-4 py-2 leading-none flex-1 border;
  background: var(--color-neutral-300);
  color: var(--color-neutral-700);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--color-neutral-500);

  &:not(:last-of-type) {
    border-right-width: 1px;
    border-right-style: solid;
    border-color: var(--color-neutral-500);
  }

  &.isActive {
    background: var(--color-stock);
    border-bottom-color: var(--color-stock);
    box-shadow: inset 0px 3px var(--color-brand);
  }

  & > * {
    @apply align-middle;
  }

  &:hover,
  &:focus {
    stencila-icon {
      @apply opacity-100;
    }
  }
}

li {
  @apply flex list-none align-middle flex-row flex-nowrap items-center;
}

stencila-icon {
  @apply opacity-0 rounded-sm mr-1;

  &:hover,
  &:active {
    color: var(--color-neutral-300);
    background: var(--color-neutral-700);
  }
}

a,
a:link,
a:visited {
  @apply block no-underline whitespace-nowrap leading-none text-current flex-grow cursor-default pr-1;
}

fix(Tabs): Improve visibility of active document tab


.toggleDiv {
    position: relative;
}

.infoLink {
    background-image: url('/img/info_green.svg');
    background-repeat: no-repeat;
    background-size: 15px;
    display: inline-block;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 13px;
    left: 60%;
    cursor: pointer;
}

.toggleDiv {
    position: relative;
}

.infoLink {
    background-image: url('/img/info_green.svg');
    background-repeat: no-repeat;
    background-size: 15px;
    display: inline-block;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 13px;
    left: 61%;
    cursor: pointer;
}

Add space between info icon and text.

Add space between info icon and text.


html,
body,
#layout {
    width: 100%;
    height: 100%;
    margin: 0;
    background: #DDD;
}

#layout {
    display: flex;
    flex-direction: row;
}

.emoji {
    height: 1em;
    width: 1em;
    margin: 0 .05em 0 .1em;
    vertical-align: -0.1em;
}

/* Tweet Styling */
.tweet {
    display: flex;
    padding: 15px 0;
    border-bottom: 1px solid #333;
}

.tweet:first-child {
    padding-top: 0;
}

.tweet:last-child {
    border-bottom: none;
}

.tweet .icon {
    margin: 0 10px;
    width: 48px;
}

.tweet .icon img {
    border-radius: 5px;
    width: 48px;
    height: 48px;
}

.tweet .details {
    flex: 2;
    padding-left: 10px;
}

.tweet .name {
    font-weight: bold;
}

/* Main Content */
.content {
    flex: 4;
    overflow-y: auto;
    padding: 15px;
}

html,
body,
#layout {
    width: 100%;
    height: 100%;
    margin: 0;
    background: #DDD;
}

#layout {
    display: flex;
    flex-direction: row;
}

.emoji {
    height: 1em;
    width: 1em;
    margin: 0 .05em 0 .1em;
    vertical-align: -0.1em;
}

/* Tweet Styling */
.tweet {
    display: flex;
    padding: 15px 0;
    border-bottom: 1px solid #333;
}

.tweet:first-child {
    padding-top: 0;
}

.tweet:last-child {
    border-bottom: none;
}

.tweet .icon {
    margin: 0 10px;
    width: 48px;
}

.tweet .icon img {
    border-radius: 5px;
    width: 48px;
    height: 48px;
}

.tweet .details {
    flex: 2;
    padding-left: 10px;
}

.tweet .top .pure-u {
    margin-right: 10px;
}

.tweet .name {
    font-weight: bold;
}

/* Main Content */
.content {
    flex: 4;
    overflow-y: auto;
    padding: 15px;
}

Clean up tweet display a tiny bit

Clean up tweet display a tiny bit


.movable-left { /* general transition properties */
    transition: all 0.6s;
    transform-origin: 0 50%;
    transition-timing-function: ease-out;

    overflow: auto;
    height: calc(100vh - 49px);
}

.moved-left { /* altered state */
    transform: perspective(1000px) rotateY(50deg);
    overflow: hidden; /* scrolling disabled */
}

.card-pf-icon {
    overflow: hidden;
    display: block;
    height: 106px;
    margin: 0 auto;
}

.crop {
    overflow: hidden;
    text-overflow: ellipsis;
    width: inherit;
}

.scrollingWrapper {
    position: relative;
}

.overlay {
    transition: all 0.6s;
    z-index: 10;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    opacity: 0;
    background-color: lightgrey;
    display: none;
}

.moved-left .overlay {
    display: block;
    opacity: 0.4;
}

.vm-name {
    font-size: 0.8em;
    min-height: 2.5em;
}

.selectedVm {
    z-index: 20;
}

.movable-left { /* general transition properties */
    transition: all 0.6s;
    transform-origin: 0 50%;
    transition-timing-function: ease-out;

    overflow: auto;
    height: calc(100vh - 49px);
}

.moved-left { /* altered state */
    transform: perspective(1000px) rotateY(50deg);
    overflow: hidden; /* scrolling disabled */
}

.card-pf-icon {
    overflow: hidden;
    display: block;
    height: 106px;
    margin: 0 auto;
}

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

.scrollingWrapper {
    position: relative;
}

.overlay {
    transition: all 0.6s;
    z-index: 10;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    opacity: 0;
    background-color: lightgrey;
    display: none;
}

.moved-left .overlay {
    display: block;
    opacity: 0.4;
}

.vm-name {
    font-size: 0.8em;
    min-height: 2.5em;
}

.selectedVm {
    z-index: 20;
}

Fix wrapping of long VM descriptions

Fix wrapping of long VM descriptions


/**
 * medium.css
 * Contains default styles to inject into Medium publications.
 */
.postMeterBar {
	display: none;
}

/**
 * medium.css
 * Contains default styles to inject into Medium publications.
 */
.postMeterBar, .openInAppButton {
	display: none;
}

Hide "open in app" button

Hide "open in app" button

This closes #11


nav#top-nav .collapse.navbar-collapse {
    margin-right: 0;
    margin-left: 30px;
}
div.hover-content,
header #language-switcher {
    left: 0;
    right: auto;
}
#news-carousel a.left.carousel-control span.glyphicon {
    left: -1px;
}

Fix left arrow on carousel for RTL version


body {
  font-family: "Josefin Sans" sans-serif;
}

header {
   width: 100%;
   background-color: #FBCD35;
   padding: 2em;
}

.column-2, .column-1 {
    width: 50%;
    height: 1050px;
}

.column-1 {
    background-color: #61C7B2;
    float: left;
}

.column-2 {
    background-color: #88ADA6;
    float: right;
}

footer {
    clear: both;
    width: 100%;
    background-color: #A502AD;
    padding: 2em;
}

/*Overall, I felt pretty good about this challenge.  When I first glanced over it, and saw the finished product, I was like 'OMG this is going to take forever.'
Fortunately, we just had to do the basic layout, and that turned out to be a perfect opportunity to explore my understand of positioning and how that affects margins and padding.
I could not get the two columns to both float properly at 50% and take padding, and since they were floated elements, I couldn't use margins.  This finally led me to understand why a grid would be so useful.
Gutters allow you to float elements but still maintain a bit of space around them.  I also determined that I could hard-code values, but then I would have to put in media queries for it to be responsive.
You can do a lot with CSS but there are some tradeoffs.

Anyway, I'm feeling pretty good about CSS overall.  Even though I know I have a lot to learn still -especially troubleshooting positioning bugs, I'm not as intimidated as I used to be.  And overcoming that fear of
"screwing things up" allows me to more freely explore all my options.  Plus, using the Dev Tools saves a lot of time.  I just realized I need to work on a bigger monitor if I need all these windows open side by side.

Also, my guide showed me an awesome trick to toggle windows (Command tilda), which is going to save me SO MUCH TIME.

*/

Add CSS to my git recreation

Add CSS to my git recreation


body.front h3 {
 font-size: 1.6em;
}
#orglogo {
 overflow: hidden;
}
#banner_inner a#logo {
    top: 5px;
    text-decoration: none;
    color: #F3F3F3;
    font-style: italic;
}
#banner_inner a#logo img {
 display: block;
 cursor: hand;
 cursor: pointer;
}
#orglogo a {
color: #F0F0F0;
display: block;
position: absolute;
top: 2em;
right: 0;
clear: none;
height: 55px;
width: 265px;
background-repeat: no-repeat;
background-position: 125px 15px;
background-image: url(../images/mysoc-logo-header.png);
}

body.front h3 {
 font-size: 1.6em;
}
#orglogo {
 overflow: hidden;
}
#banner_inner a#logo {
    top: 5px;
    width: 215px;
    height: 41px;
    text-decoration: none;
    color: #F3F3F3;
    font-style: italic;
    overflow:hidden;
}

#banner_inner a#logo img {
 display: block;
 cursor: hand;
 cursor: pointer;
}
#orglogo a {
color: #F0F0F0;
display: block;
position: absolute;
top: 2em;
right: 0;
clear: none;
height: 55px;
width: 265px;
background-repeat: no-repeat;
background-position: 125px 15px;
background-image: url(../images/mysoc-logo-header.png);
}

Set the size of the log to the size of the image and set overflow to hidden in order that the text should never extend outside the logo space.


.portrait {
    width: 160px;
    height: 160px;
}

#kontakt_table {
    margin: 25px 0 50px 50px;
    border: #cccccc solid 1px;
}

#kontakt_table_heading {
    border: #0a0b43 solid 1px;
}

#kontakt_table th {
    background-color: #0a0b43;
    color: white;
}

#kontakt_table .portrait_role {
    text-align: center;
}

#kontakt_table tr.person {
    border-bottom: #ec3434 solid 2px;
}

#kontakt_table tr.person>td {
    padding-bottom: 1em;
}

#kontakt_table .name {
    background-color: #eeeeee;
    color: #0a0b43;
    height: 30px;
}

#kontakt_table .name,.role {
    text-align: center;
}

#kontakt_table tr.role>td {
    border-bottom: #ec3434 solid 2px;
    padding-bottom: 0.5em;
    padding-top: 0.5em;
}

.portrait {
    width: 160px;
    height: 160px;
}

#kontakt_table {
    margin: 25px 0 50px 50px;
    border: #cccccc solid 1px;
}

#kontakt_table_heading {
    border: #0a0b43 solid 1px;
}

#kontakt_table th {
    background-color: #0a0b43;
    color: white;
}

#kontakt_table .portrait_role {
    text-align: center;
}

#kontakt_table .name {
    background-color: #eeeeee;
    color: #0a0b43;
    height: 30px;
}

#kontakt_table .name,.role {
    text-align: center;
}

#kontakt_table tr.role>td {
    border-bottom: #ec3434 solid 2px;
    padding-bottom: 0.5em;
    padding-top: 0.5em;
}

Remove styles of old design

Remove styles of old design


/*
 *= require bootstrap_and_overrides
 *= require formtastic-bootstrap
 *= require bootstrap-datetimepicker.min
 *= require_tree .
 */

h1 span.shortname {
  font-family: monospace;
  font-size: 0.8em;
  color: #aaa;
}

h1 {
  line-height: 46px;
  margin: 22px 0;
}

Add additional padding around h1 elements


/**
 * React Starter Kit (https://www.reactstarterkit.com/)
 *
 * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE.txt file in the root directory of this source tree.
 */

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

.root {
  padding-left: 20px;
  padding-right: 20px;
}

.container {
  margin: 0 auto;
  padding: 0 0 40px;
  max-width: var(--max-content-width);
}

.news {
  padding: 0;
}

.newsItem {
  list-style-type: none;
  padding-bottom: 6px;
}

.newsTitle {
  font-size: 1.125em;
}

.newsTitle,
.newsDesc {
  display: block;
}

Add style css file for home page and controller.


div.video {
  clear: both;
  min-height: 7em;
  border-top: 1px solid rgba(0,0,0,0.12);
}
div.video:first-child {
  border-top: none;
}

div.poster {
  float: left;
}

div.poster.small {
  width: 5.5em;
  height: 8em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  text-align: center;
}
div.poster.small img {
  max-height: 100%;
  max-width: 100%;
  margin: 0 auto;
}

div.desc
{
  vertical-align: top;
  margin-left: 7em;
}

span.title {
  font-size: 1.4em;
  font-weight: bold;
  margin-right: 1em;
}

span.info {
  white-space: nowrap;
}
span.year, span.rated, span.duration {
  color: rgba(0,0,0,0.54);
  font-size: 0.9em;
  margin-right: 0.7em;
}

.summary {
  color: rgba(0,0,0,0.54);
}

div.video {
  clear: both;
  min-height: 7em;
  border-top: 1px solid rgba(0,0,0,0.12);
}
div.video:first-child {
  border-top: none;
  padding-top: 1em;
}

div.poster {
  float: left;
}

div.poster.small {
  width: 5.5em;
  height: 8em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  text-align: center;
}
div.poster.small img {
  max-height: 100%;
  max-width: 100%;
  margin: 0 auto;
}

div.desc
{
  vertical-align: top;
  margin-left: 7em;
}

span.title {
  font-size: 1.4em;
  font-weight: bold;
  margin-right: 1em;
}

span.info {
  white-space: nowrap;
}
span.year, span.rated, span.duration {
  color: rgba(0,0,0,0.54);
  font-size: 0.9em;
  margin-right: 0.7em;
}

.summary {
  color: rgba(0,0,0,0.54);
}

Fix position for first title

Fix position for first title


.app-code-input {
    resize: none;
    width: 100%;
    height: 100%;
}

.app-code-input {
    resize: none;
    width: 100%;
    height: 50vh;
}

Adjust height of code input

Adjust height of code input


html, body {
  background-color: #fafafa;
}

li {
  color: green
}

.address span{
  display: block;
}

html, body {
  background-color: #fafafa;
}

.address span{
  display: block;
}

.mdl-card__title {
  background-color: #c5cae9;
}

Make events easier to distinguish on small screens.


/*
 * Styles for CASGO
 *
 * UI colors (based off of http://flatuicolors.com/)
 * Emerald (green): #2ecc71
*/

body, html {
  width: 100%;
}

.topnav {
  background: #444;
  color: white;
  font-size: 20px;
}

.topnav-list {
  list-style: hidden;
  display: inline-block;
  line-height: 4em;
  margin-top: 0;
  margin-bottom: 0;
}

.topnav-brand {  margin-left: 1em; }

.topnav-list-item {
  margin-left: 1em;
  margin-right: 1em;
  display: inline-block;
}
.topnav-list-item.active { border-bottom: .3em solid #2ecc71; }

.topnav-list-item-link {
  text-decoration: none;
  color: inherit;
}

.topnav-list-item-link:hover {
  text-decoration: none;
  border-bottom: dashed white 2px;
  color: inherit;
}

.jumbotron { padding: 4em 1em 4em 1em; }

/* Utility classes */
.centered-text { text-align: center; }

.medium-font { font-size: medium; }

/*
 * Styles for CASGO
 *
 * UI colors (based off of http://flatuicolors.com/)
 * Emerald (green): #2ecc71
*/

body, html {
  width: 100%;
}

.topnav {
  background: #333;
  color: white;
  font-size: 20px;
  height: 4em;
}

.topnav-list {
  list-style: hidden;
  display: inline-block;
  line-height: 4em;
  margin-top: 0;
  margin-bottom: 0;
}

.topnav-brand {  margin-left: 1em; }

.topnav-list-item {
  padding-left: 1em;
  padding-right: 1em;
  display: inline-block;
  color: #BBB;
}
.topnav-list-item.active {
  color: white;
  background-color: #2ecc71;
}

.topnav-list-item-link {
  text-decoration: none;
  color: inherit;
}

.topnav-list-item-link:hover {
  text-decoration: none;
  color: white;
}

.jumbotron { padding: 4em 1em 4em 1em; }

/* Utility classes */
.centered-text { text-align: center; }

.medium-font { font-size: medium; }

Add more styling to top nav

Add more styling to top nav


.jumbotron {
  text-align: center;
}

.header {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
}

/*.sidebar {
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    display: block;
    background-color: #4ABDAC;
    text-align: center;
    height: 1000px;
}

.sidebar > a {
  color: white;
  font-size: 1.5em;
  text-decoration: none;
}*/

.event {
  text-align: center;
  margin: 5px;
  background-color: #d8d8d8;
  border-radius: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
}

@keyframes fadein {
  0% { opacity: 0; }
  25% { opacity: 0; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

.jumbotron {
  text-align: center;
}

.header {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
}

/*.sidebar {
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    display: block;
    background-color: #4ABDAC;
    text-align: center;
    height: 1000px;
}

.sidebar > a {
  color: white;
  font-size: 1.5em;
  text-decoration: none;
}*/

.event {
  text-align: center;
  margin: 15px;
  background-color: #d8d8d8;
  border-radius: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
  box-shadow: 5px 5px 2.5px #888888;
  animation: fadein 1s;
}

.event:hover {
  background-color: #acacac;
  box-shadow: 0px 0px 0px;
}

Add spacing between event objects

Add spacing between event objects


/*****************/
/* Documentation */
/*****************/

.documentation-title {
  background-color: rgb(225, 225, 225);
}
a.documentation-title:hover {
  background-color: rgb(245, 245, 245);
}

/***********/
/* General */
/***********/

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

/*************/
/* Jumbotron */
/*************/

.jumbotron .btn {
  margin-bottom: 5px;
}

/**************/
/* Pagination */
/**************/

.pagination .glyphicon-menu-left + .glyphicon-menu-left,
.pagination .glyphicon-menu-right + .glyphicon-menu-right {
  margin-left: -13px;
}

/**********/
/* Panels */
/**********/

/* By default, Bootstrap panel footers use 'background-color: #f5f5f5;' */
.panel-footer.panel-danger {
  background-color: #f2dede;
}
.panel-footer.panel-info {
  background-color: #d9edf7;
}
.panel-footer.panel-success {
  background-color: #dff0d8;
}

/*****************/
/* Documentation */
/*****************/

.documentation-title {
  background-color: rgb(225, 225, 225);
}
a.documentation-title:hover {
  background-color: rgb(245, 245, 245);
}

/***********/
/* General */
/***********/

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

/*************/
/* Jumbotron */
/*************/

.jumbotron .btn {
  margin-bottom: 5px;
}

/**************/
/* Pagination */
/**************/

.pagination .glyphicon-menu-left + .glyphicon-menu-left,
.pagination .glyphicon-menu-right + .glyphicon-menu-right {
  margin-left: -13px;
}

/**********/
/* Panels */
/**********/

/* Adjust vertical spacing around list groups within panels */
.panel-body h4:first-of-type {
  margin-top: 0;
}
.panel-body .list-group {
  margin-bottom: 15px;
}
.panel-body .list-group:last-of-type {
  margin-bottom: 0;
}

/* By default, Bootstrap panel footers use 'background-color: #f5f5f5;' */
.panel-footer.panel-danger {
  background-color: #f2dede;
}
.panel-footer.panel-info {
  background-color: #d9edf7;
}
.panel-footer.panel-success {
  background-color: #dff0d8;
}


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

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

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

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

.jp-Completer-item:nth-child(odd) {
  background: #FFFFFF;
}

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

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

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

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

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

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

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

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

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

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

Remove zebra striping of completer.

Remove zebra striping of completer.


.group-label-text {
  font-size: 1.25rem;

  /*
  forgive me for the !important below; we have to override a framework specificity
  that I simply can't bring myself to override.
  The selector would read like a novel.
  */
  text-align: center !important;
}

.group-label-text {
  &:global(.readonly-group-label) {
    line-height: unset;
    text-decoration: underline;
  }
}

Add underline to text in readonly group label


/*
 *= require bootstrap_and_overrides
 *= require formtastic-bootstrap
 *= require bootstrap-datetimepicker.min
 *= require_tree .
 */

.table-striped tbody tr td.in-sync, .table-striped tbody tr td.in-sync:hover {
  background-color: #468847;
}

.table-striped tbody tr td.not-in-sync, .table-striped tbody tr td.not-in-sync:hover {
  background-color: #b94a48;
}

.table-striped tbody tr td.in-sync,
.table-striped tbody tr td.not-in-sync {
  color: white;
}

.table-striped tbody tr td.deployed-recently {
  background-color: rgb(252, 252, 188);
}

table form.form-inline {
  margin: 0;
}

table#application-list .icon-edit {
  opacity: 0.7;
}

/*
 *= require bootstrap_and_overrides
 *= require formtastic-bootstrap
 *= require bootstrap-datetimepicker.min
 *= require_tree .
 */

table#application-list tbody tr td.in-sync, table#application-list tbody tr td.in-sync:hover {
  background-color: #468847;
}

table#application-list tbody tr td.not-in-sync, table#application-list tbody tr td.not-in-sync:hover {
  background-color: #b94a48;
}

table#application-list tbody tr td.in-sync,
table#application-list tbody tr td.not-in-sync {
  color: white;
}

table#application-list tbody tr td.deployed-recently {
  background-color: rgb(252, 252, 188);
}

table form.form-inline {
  margin: 0;
}

table#application-list .icon-edit {
  opacity: 0.7;
}

Make CSS selectors a bit more sane

Make CSS selectors a bit more sane


/* app css stylesheet */

.image-wrapper {
    overflow: hidden;
    max-height: 225px;
}

.truncate {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result {
  margin-bottom: 20px;
}

#artist-profile {
    margin-bottom: 15px;
}

/* app css stylesheet */

.image-wrapper {
    overflow: hidden;
    max-height: 225px;
}

.truncate {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25em;
}

.search-result {
  margin-bottom: 20px;
}

#artist-profile {
    margin-bottom: 15px;
}

Truncate class needed a little extra height


Revert "Revert "Revert "CSS Fix for Slider"""

This reverts commit 15b7f713c6552426a2b64907681fda5255425da7.


.component {
  display: flex;
  justify-content: flex-end;
}

.component > .toggleButtons {
  width: 20rem;
}

.toggleButtons {
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-end;
  width: 100%;
}

.component {
  display: flex;
  justify-content: flex-end;
}

.component > .toggleButtons {
  width: 18.25rem;
}

.toggleButtons {
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-end;
  width: 100%;
}

Adjust width to better match voteStatus component on bigger screen sizes


:global .video-js {
  font-family: inherit !important;
}

.inset :global .vjs-text-track-display {
  bottom: 20px;
}

:global .vjs-text-track-display div {
  font-family: inherit !important;
  font-size: 20px !important;
}

:global .vjs-text-track-display > div > div > div {
  padding: 0 4px 2px 4px;
}

:global .vjs-paused .vjs-text-track-display div {
  transition: opacity 0.2s, visibility 0.2s;
  opacity: 0;
  visibility: hidden !important;
}

Hide text tracks when media is paused

Hide text tracks when media is paused

REDMINE-17679


@import 'bootstrap.min.css';
.header-bg {
    background: #4ABDAC;
    color: white;
}

.left-side {
    background: #4ABDAC;
}

body {
    background: #4ABDAC;
    color: #DFDCE3;
}

@import 'bootstrap.min.css';
body {
    background: #000000;
    color: #FFf000;
}

.header-bg {
    background: #000000;
}

.left-side {
    background: #000000;
}

.btn-custom {
    background: #FFf000;
    color: #000000;
}

Change the color scheme for the file

Change the color scheme for the file


.fileBrowser {
    height: 500px;
    width: 100%;
}

.fb-breadcrumbs {
    background-color: #efefef;
    padding: 10px;
}

.fb-sidebar {
    width: 25%;
    display: block;
    height: 500px;
    float: left;
    background-color: aliceblue;
}

.fb-main {
    width: 55%;
    float: left;
    padding: 0;
}

.fb-infobar {
    background-color: coral;
    height: 500px;
    padding: 10px;
    float: left;
    width: 20%;
}

.fb-breadcrumbs ul, .fb-collections ul, .fb-filters ul {
    padding: 0;
    list-style: none;
}

.fb-breadcrumbs ul li {
    display: inline;
    padding: 0 3px;
}

.fb-breadcrumbs>ul>li>.fa {
    margin-left: 5px;
    color: #999999;
}

.fb-collections ul li , .fb-filters ul li {
    padding: 3px 0;
}

.fb-collections ul li.active, .fb-filters ul li.active {
    background-color: #ccc;
}

li {
}

li {}

.fb-collections ul>li {
    padding: 7px;
}

.fileBrowser {
    height: 500px;
    width: 100%;
}

.fb-breadcrumbs {
    background-color: #efefef;
    padding: 10px;
}

.fb-sidebar {
    width: 25%;
    display: block;
    height: 500px;
    float: left;
    background-color: aliceblue;
}

.fb-main {
    width: 55%;
    float: left;
    padding: 0 0 1px 0;
}

.fb-infobar {
    background-color: coral;
    height: 500px;
    padding: 10px;
    float: left;
    width: 20%;
}

.fb-breadcrumbs ul, .fb-collections ul, .fb-filters ul {
    padding: 0;
    list-style: none;
}

.fb-breadcrumbs ul li {
    display: inline;
    padding: 0 3px;
}

.fb-breadcrumbs>ul>li>.fa {
    margin-left: 5px;
    color: #999999;
}

.fb-collections ul li , .fb-filters ul li {
    padding: 3px 0;
}

.fb-collections ul li.active, .fb-filters ul li.active {
    background-color: #ccc;
}

li {
}

li {}

.fb-collections ul>li {
    padding: 7px;
}

Add minor padding to maintain width

Add minor padding to maintain width [skip ci]


/* setting full-screen responsive background image to page */
html {
    background-image: url('./images/drum-background.jpeg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

/* setting font of the whole body text */
body {
    font-family: Calibri, sans-serif;
}

/* defining style for a key container */
.key-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

/* defining style for a single key */
.key {
    border: 3px solid black;
    border-radius: 5px;
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.4);
    text-align: center;
    padding: 6px 12px;
    margin: 15px;
}

/* defining style for a single alphabetical letter inside the key */
kbd {
    font-size: 32px;
    display: block;
    color: rosybrown;
}

/* defining style for the sound word inside the key */
.sound {
    color: white;
    font-size: 16px;
}

/* setting full-screen responsive background image to page */
html {
    background-image: url('./images/drum-background.jpeg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

/* setting font of the whole body text */
body {
    font-family: Calibri, sans-serif;
}

/* defining style for a key container */
.key-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

/* defining style for a single key */
.key {
    border: 3px solid black;
    border-radius: 5px;
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.4);
    text-align: center;
    padding: 6px 12px;
    margin: 15px;
    box-shadow: 0 0 1px rosybrown;
}

/* defining style for a single alphabetical letter inside the key */
kbd {
    font-size: 32px;
    display: block;
    color: rosybrown;
}

/* defining style for the sound word inside the key */
.sound {
    color: white;
    font-size: 16px;
}

Add box shadow to key

Add box shadow to key


  to-do button, to-do footer > label { cursor: pointer }

  to-do form > fieldset {
    padding: 0;
    border: none;
    background: rgba(230,230,230,.5);
    line-height: 2em;
  }

  to-do form > fieldset label {
    width: 80%;
    display: inline-block;
    // Flexbox bug for fieldset - https://stackoverflow.com/questions/28078681/why-cant-fieldset-be-flex-containers
  }

  to-do footer  {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  to-do footer header button { display: block }

  to-do footer > label {
    flex: 1;
    margin: 0 2em;
    text-align: center;
    border-radius: 0.2em;
  }

  to-do input#all:checked
    ~ footer > label[for=all],

  to-do input#active:checked
    ~ footer > label[for=active],

  to-do input#completed:checked
    ~ footer > label[for=completed]
      { background: #ddd }

to-do button,
to-do form button[type=submit] {
  font-size: 70%;
}

Clean up formatting of whitespace

Clean up formatting of whitespace


html {
  font-family: arial;

}

body {
    background-color: lightyellow;
}

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

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

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

h4 {
    color: purple;
}

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

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

span {
    padding-left: 5px
}

html {
  font-family: arial;

}

body {
    background-color: lightyellow;
}

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

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

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

h4 {
    color: purple;
}

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

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

span {
    padding-left: 5px
}

Change font size of menu

Change font size of menu


div.ol-popup {
    background: #FFFFFF;
}

.popup-attribute-key {
    font-weight: bold;
    color: #000000;
}

.popup-attribute-value {
    color: #000000;
}

.ol-mouse-position {
    padding: 2px;
    background: #FFFFFF;
    color: #000000;
}

.ol-attribution {
    background: #FFFFFF !important;
}

.layer-switcher {
    background: #FFFFFF;
    color: #000000;
}

.ol-zoomslider {
    top: 110px;
}

Fix zoom slider CSS (it was overlapping the zoom extents button)


/* Stylesheet for presenting material on larger screens. */
#content { width: 60em; }
h1, h2, h3, div, p, ul, .MathJax_Display { width: 40rem; }
ol { width: 38.5rem; }
blockquote { width: 35rem; }
.heading > * { width: 38.5rem; }
.lcol { float: left; clear: left; text-align: right; }
.rcol { float: right; clear: right; text-align: left; }
.lcol, .rcol { margin-bottom: 1.5em; }
.lcol, .lcol > *, .rcol, .rcol > * { width: 8em; }
.col { float: right; text-align: right; width: auto; }

/* Display the previous and next buttons on either side of the page. */
.prev { position: fixed; top: 50%; left: 0; }
.next { position: fixed; top: 50%; right: 0%; }

/* Make comments appear smaller than the main text of the post. */
.comment { margin-bottom: 2rem; width: 35rem;  }
.comment p { font-size: 0.95em; line-height: 1.4em; width: inherit; }


.modal-dialog {
  height: 90%;
  margin: 30px auto;
  max-width: 500px;
  width: 90%;
}

.modal-content {
  height: 100%;
}

.modal-content > :first-child {
  height: 100%;
}

.modal-dialog {
  height: 90%;
  margin: auto;
  min-width: 500px;
  max-width: 95%;
}

.modal-content {
  height: 100%;
}

.modal-content > :first-child {
  height: 100%;
}

Adjust dialog size to accomodate chart editor dialog.


@import url(https://fonts.googleapis.com/css?family=Indie+Flower|Lato:400i,400,700,900);
@import url(https://fonts.googleapis.com/css?family=Rambla:400,700,700i);

* {
	-ms-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

body, html {
	margin: 0;
	padding: 0;
	font-family: 'Rambla', sans-serif ;
	font-size: 16px;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	/*height: 100%;*/
}

.ReactModal__Body--open {
  overflow: hidden;
}

body {
	width: 100%;
	background: white;
	margin: 0;
	padding: 0;
	position: static;
}

html {
	background: white;
	margin: 0;
	padding: 0;
	position: static;
}

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

a:visited {
	color: #7B3655;
}

@import url(https://fonts.googleapis.com/css?family=Indie+Flower|Lato:400i,400,700,900);
@import url(https://fonts.googleapis.com/css?family=Rambla:400,700,700i);

* {
	-ms-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

body, html {
	margin: 0;
	padding: 0;
	font-family: 'Rambla', sans-serif ;
	font-size: 16px;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	/*height: 100%;*/
}

.ReactModal__Body--open {
  overflow: hidden;
}

body {
	width: 100%;
	background: white;
	margin: 0;
	padding: 0;
	position: static;
}

html {
	background: white;
	margin: 0;
	padding: 0;
	position: static;
}

a {
	text-decoration: none;
	color: #E61C78;
	letter-spacing: 1px;
}

a:visited {
	color: #7B3655;
}

Increase letter spacing for links

Increase letter spacing for links


.startScreen {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  cursor: default;
}

.buttonWrapper {
  display: flex;
  flex-direction: column;
}

.buttonBase {
  padding: 10px;
  margin-bottom: .25em;
  border: 0;
  border-bottom: solid 5px;
  border-bottom-color: rgba(0, 0, 0, .2);

  color: #fff;

  font-family: 'Space Mono', monospace;
  font-size: 18px;
  letter-spacing: 5px;
  text-transform: uppercase;

  cursor: pointer;
  transition: .2s;
}

.buttonBase:active {
  transform: scale(1.1);
}

.buttonBase:focus {
  outline: 0; /* visual changes made in subclasses */
}

.openFile {
  composes: buttonBase;
  background-color: #BBBCC7;
}

.openFile:hover {
  background-color: #b3b4be;
}

.openFile:focus {
  background-color: #adaeb6;
}

.newFile {
  composes: buttonBase;
  background-color: #008cba;
}

.newFile:hover {
  background-color: #0a85ad;
}

.newFile:focus {
  background-color: #0881a8;
}

.startScreen {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  cursor: default;
}

.buttonWrapper {
  display: flex;
  flex-direction: column;
}

.buttonBase {
  padding: 10px;
  margin-bottom: .25em;
  border: 0;
  border-bottom: solid 5px;
  border-bottom-color: rgba(0, 0, 0, .2);

  color: #fff;

  font-family: 'Space Mono', monospace;
  font-size: 18px;
  letter-spacing: 5px;
  text-transform: uppercase;

  cursor: pointer;
  transition: .2s;
}

.buttonBase:active {
  transform: scale(.95);
}

.buttonBase:focus {
  outline: 0; /* visual changes made in subclasses */
}

.openFile {
  composes: buttonBase;
  background-color: #BBBCC7;
}

.openFile:hover {
  background-color: #b3b4be;
}

.openFile:focus {
  background-color: #adaeb6;
}

.newFile {
  composes: buttonBase;
  background-color: #008cba;
}

.newFile:hover {
  background-color: #0a85ad;
}

.newFile:focus {
  background-color: #0881a8;
}

Make startscreen buttons move to into the screen instead of outwards


/* For image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide for both screenreaders and browsers */
.hidden { display: none; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders */
.visuallyhidden { position:absolute; left:-9999em; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Give a strong clear visual idea as to what is currently in focus */
/*:focus,*/
a:focus {
  background-color: #fabb96;
  outline: 3px solid #fabb96;
}

input:focus,
textarea:focus,
select:focus,
#global-header input:focus {
  outline: 3px solid #fabb96;
}

#global-header a:focus {
  background-color: transparent;
  outline: none;
}

/* For image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide for both screenreaders and browsers */
.hidden { display: none; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders */
.visuallyhidden { position:absolute; left:-9999em; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Give a strong clear visual idea as to what is currently in focus */
/*:focus,*/
a:focus {
  background-color: #ffbf47;
  outline: 3px solid #ffbf47;
}

input:focus,
textarea:focus,
select:focus,
#global-header input:focus {
  outline: 3px solid #ffbf47;
}

#global-header a:focus {
  background-color: transparent;
  outline: none;
}

Change highlight colour back to yellow

Change highlight colour back to yellow


/* AutoPagerize page separator pretty print */
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("http://") {
.autopagerize_page_separator { border: none !important; }

.autopagerize_page_info {
color: #fff !important;
font: 14px/2.5 "Segoe UI",sans-serif !important;
text-align: center !important;
text-transform: capitalize !important;
letter-spacing: 0.2em !important;
margin: 2em !important;
padding: 0 2em !important;
background: #666 !important;
border-radius: 0.5em !important;
clear: both !important;
}
.autopagerize_page_info a {
color: #fff !important;
font-weight: bold !important;
text-decoration: none !important;
background: #666 !important;
}
}

/* AutoPagerize page separator pretty print */
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("http://") {
.autopagerize_page_separator { display: none !important; }

.autopagerize_page_info {
color: #fff !important;
font: 14px/2.5 "Segoe UI",sans-serif !important;
text-align: center !important;
text-transform: capitalize !important;
letter-spacing: 0.2em !important;
margin: 2em !important;
padding: 0 2em !important;
background: #666 !important;
border-radius: 0.5em !important;
clear: both !important;
}
.autopagerize_page_info a {
color: #fff !important;
font-weight: bold !important;
text-decoration: none !important;
background: #666 !important;
}
}

Hide the page separator from DOM

Hide the page separator from DOM


#leaflet-container, #osd-container, #uv-container {
  height: calc(100vh - 290px);
}

#mirador-container {
  height: calc(100vh - 110px);
  position: relative;
}

#mirador-container .mirador-osd-annotation-controls * {
  box-sizing: content-box;
}

#mirador-container .metadata-listing .metadata-item {
  padding-top: 5px;
}

#mirador-container .metadata-listing .metadata-label,
#mirador-container .metadata-listing .metadata-value {
  display: inline;
}

#mirador-container .metadata-listing .metadata-label {
  font-weight: bold;
  margin-right: 10px;
}

#mirador-container .metadata-listing img {
  display: block;
}

Add custom styling for the metadata overlay in Mirador


#zotero-modal .zotero-icon {
    height: 32px;
    width: 32px;
    color: transparent;  /* make text Z invisible */
    background-image: url('img/zotero_32x32.png');
    vertical-align: top;
    margin: 0;
}

#zotero-modal #zotero-lookup {
    width: 90%;
    height: 32px;
}

#zotero-modal .in-progress {
    position: absolute;
    top: 16px;
    right: 20px;
}

/* override close button so it is actually click-able */
#zotero-modal .close {
    position: absolute;
    top: 5px;
    right: 5px;
}

/* Zotero launcher button on meltdown control panel */
.meltdown_control-zotero > span  {
    /* zotero red */
    /*color: #990000 !important;
    font-weight: bold;*/
    color: transparent !important;  /* make text Z invisible */
    background-image: url('img/zotero_16x16.png');
    background-repeat: no-repeat;
    background-position: center;
    margin-top: -3px; /* bring closer in line to other controls */
}

.meltdown_control-zotero.zotero-disabled > span  {
    opacity: 0.6;
    background-color: #ddd;
}

#zotero-modal .zotero-icon {
    height: 32px;
    width: 32px;
    color: transparent;  /* make text Z invisible */
    background-image: url('img/zotero_32x32.png');
    vertical-align: top;
    margin: 0;
}

#zotero-modal #zotero-lookup {
    width: 90%;
    height: 32px;
}

#zotero-modal .in-progress {
    position: absolute;
    top: 16px;
    right: 8%;
}

/* override disabled message close button so it is actually click-able */
#zotero-modal .close {
    position: absolute;
    top: 5px;
    right: 5px;
}

/* Zotero launcher button on meltdown control panel */
.meltdown_control-zotero > span  {
    height: auto !important;  /* override default meltdown size */
    /* alternate non-image version using text & zotero red */
    /*color: #990000 !important;
    font-weight: bold;*/
    margin-left: 5px;  /* override default meltdown spacing */
    color: transparent !important;  /* make text Z invisible */
    background-image: url('img/zotero_16x16.png');
    background-repeat: no-repeat;
    background-position: center;
    margin-top: -3px; /* bring closer in line to other controls */
}

.meltdown_control-zotero.zotero-disabled > span  {
    opacity: 0.6;
    background-color: #ddd;
}

Tweak styles to be more general / look better when not running in readux


.links-sender {
  position: fixed !important;
  bottom: 0;
  width: 100%;
}

.links-sender .send-button {
  color: #75b0ba;
}

.links-sender .deactivate {
  color: lightgray;
  pointer-events: none;
}

.links-sender .error-msg {
  color: #cc0000;
}

.links-sender input[type="text"]:focus {
  border-color: #75b0ba;
}

.links-sender {
  position: fixed !important;
  bottom: 0;
  width: 100%;
}

.links-sender .send-button {
  color: #75b0ba;
}

.links-sender .error-msg {
  color: #cc0000;
}

.links-sender input[type="text"]:focus {
  border-color: #75b0ba;
}

Use disabled attribute instead of deactivate class


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

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

Change second block technical relative stylesheet


.button {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: rmeCalc(16);
  border-radius: 4px;
  box-shadow: remCalc(0 2 0 0) rgba(0,0,0,0.05);

  &.primary {
    background: #3B47CC;
    border: 1px solid #2532BB;
    color: #FFFFFF;
  }

  &.secondary {
    background: #FFFFFF;
    border: 1px solid #D8D8D8;
    color: #646464;
  }

  &.inactive {
    background: #F9F9F9;
    border: 1px solid #D8D8D8;
    color: #737373;
  }
}

.button {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: remCalc(16);
  border-radius: 4px;
  box-shadow: remCalc(0 2 0 0) rgba(0,0,0,0.05);

  &.primary {
    background: #3B47CC;
    border: 1px solid #2532BB;
    color: #FFFFFF;
  }

  &.secondary {
    background: #FFFFFF;
    border: 1px solid #D8D8D8;
    color: #646464;
  }

  &.inactive {
    background: #F9F9F9;
    border: 1px solid #D8D8D8;
    color: #737373;
  }
}

Fix - incorrect function spelling

Fix - incorrect function spelling


.show-grid {
    margin-bottom:10px;
}

.btn-primary {
    padding: 5px 10px 5px 10px;
}

img {
    width: 20px;
}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.btn .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 1s;
}

.btn .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.btn:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.btn{
    outline: none !important;
}

Remove outline of toolbar focus button

Remove outline of toolbar focus button


#scripts-files option.injected {
    color: rgb(70, 134, 240);
}

.data-grid table {
    line-height: 120%;
}

body.attached #toolbar {
    height: 34px;
    border-top: 1px solid rgb(100, 100, 100);
    cursor: default; /* overriden */
    padding-left: 0;
}

/* Chrome theme overrides */
#toolbar {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(242, 247, 253)), to(rgb(223, 234, 248)));
}

DevTools: Use Chrome's colors for DevTools toolbar.

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

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


/**
 * Below are the colors defined for both the wells and the "differences" section
 * of the charts. If you write a theme, please use (you might redefine them)
 * these variables instead of hardcoded colors in order to keep the link between
 * the wells and the "differences" charts.
 */
:root {
    --wells-balance-color: #00BFF3;
    --wells-received-color: #00A651;
    --wells-spent-color: #F26C4F;
    --wells-saved-color: #0072BC;
    --charts-lines-color: #008080;
    --charts-axis-color: #000000;
}

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

body {
    font-size: 14px;
}

html,
body,
#app {
    min-height: 100%;
}

#app {
    padding: 0;
    margin: 0;
    height: 100vh;
    overflow: hidden;
}

#app > div {
    height: 100%;
}

/**
 * Below are the colors defined for both the wells and the "differences" section
 * of the charts. If you write a theme, please use (you might redefine them)
 * these variables instead of hardcoded colors in order to keep the link between
 * the wells and the "differences" charts.
 */
:root {
    --wells-balance-color: #00BFF3;
    --wells-received-color: #00A651;
    --wells-spent-color: #F26C4F;
    --wells-saved-color: #0072BC;
    --charts-lines-color: #008080;
    --charts-axis-color: #000000;
}

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

html {
    font-size: 14px;
}

html,
body,
#app {
    min-height: 100%;
}

#app {
    padding: 0;
    margin: 0;
    height: 100vh;
    overflow: hidden;
}

#app > div {
    height: 100%;
}

Apply font-size to the root so that rem units can be used


.heading {
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  background: #f5f5f5;
}

.content {
  padding: 1rem;
  margin: 0 auto;
  max-width: 64rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}

.content a {
  text-decoration: none;
}

.content button {
  cursor: pointer;
  margin: 0;
}

.header {
  color: #63699d;
  font-size: 2rem;
  margin: 0;
}

.content a:hover .header {
  color: #8186b3;
}

.components {
  text-align: right;
  color: #555;
}

.components > .Button:last-child, .components > a:last-child {
  margin-right: -0.5rem;
}

.logout {
  background: #323a7f;
  color: #f7f7f7;
  padding: 1rem;
  text-decoration: none;
}

.logout:hover {
  background: #515ccc;
}

.heading {
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  background: #f5f5f5;
}

.content {
  padding: 1rem;
  margin: 0 auto;
  max-width: 64rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}

.content a {
  text-decoration: none;
}

.content button {
  cursor: pointer;
  margin: 0;
}

.header {
  color: #63699d;
  font-size: 2rem;
  margin: 0;
}

.content a:hover .header {
  color: #8186b3;
}

.components {
  text-align: right;
  color: #555;
}

.components > button:last-child, .components > a:last-child {
  margin-right: -0.5rem;
}

.logout {
  background: #323a7f;
  color: #f7f7f7;
  padding: 1rem;
  text-decoration: none;
}

.logout:hover {
  background: #515ccc;
}

Fix margin hack in header

Fix margin hack in header


body {
  margin-left: 21.5%;
  margin-right: auto;
}

h1 {
  margin-left: 33%;
  font-family: sans-serif;
}

#board {
  height: 400px;
  width: 800px;
  background-color: #3399ff;
  padding: 5px;
}

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

p {
  margin: 38px;
  text-align: center;
  font-size: 20px;
  font-family: sans-serif;
}

body {
  height: 100vh;
  width: 100vw;
}
h1 {
  margin-left: 33%;
  font-family: sans-serif;
}

#board {
  height: 400px;
  width: 800px;
  background-color: #3399ff;
  padding: 5px;
}

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

p {
  margin: 38px;
  text-align: center;
  font-size: 20px;
  font-family: sans-serif;
}

Remove margin left and right from body and give height and width 100% of the viewport


.profileCallTreeSettings {
  height: 25px;
  padding: 0;
  line-height: 25px;
  border-top: 1px solid #D6D6D6;
  background: #F9F9F9;
  display: flex;
  flex-flow: row nowrap;
}

.profileCallTreeSettingsList {
  display: block;
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}

.profileCallTreeSettingsListItem {
  display: inline-block;
  margin: 0 5px;
  padding: 0;
}

.profileCallTreeSettingsLabel {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.profileCallTreeSettingsSearchbar {
  padding: 0 10px;
}

.profileCallTreeSettingsSearchField {
  width: 250px;
}

.profileCallTreeSettings {
  height: 25px;
  padding: 0;
  line-height: 25px;
  border-top: 1px solid #D6D6D6;
  background: #F9F9F9;
  display: flex;
  flex-flow: row nowrap;
}

.profileCallTreeSettingsList {
  display: block;
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}

.profileCallTreeSettingsListItem {
  display: inline-block;
  margin: 0 5px;
  padding: 0;
}

.profileCallTreeSettingsLabel {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
}

.profileCallTreeSettingsCheckbox {
  margin: 0 5px;
}

.profileCallTreeSettingsSearchbar {
  padding: 0 10px;
}

.profileCallTreeSettingsSearchField {
  width: 250px;
}

Improve checkbox alignment on non-Mac platforms.


h1 {
	font-family: Roboto, Verdana, sans-serif;
	font-size: 2em;
	color: #FEFEFE;
	margin: 1% 1% -1% 1%;
	border: 2px solid black;
}

p {
	border: 2px solid black;
}

.list {
	font-family: Verdana, sans-serif;
	margin: 1%;
}

.list div {
	display: inline-block;
	border: 2px solid black;
	padding: 10px;
}

#leftside {
	position: absolute;
	top: 0;
}

#rightside {
	float: right;
	border: 1px solid black;
	width: 60%;
	height: 60%;

}

#skoga {
	/*float:right;*/
	background: contain;
	/*width: 50%;
	height: 50%;*/
}

.list ul li {
		list-style-type: none;
		line-height: 2em;
}

.list ul li a {
	text-decoration: none;
	color: black;
}

h1 {
	font-family: Roboto, Verdana, sans-serif;
	font-size: 2em;
	color: #FEFEFE;
	margin: 1% 1% -1% 1%;
	border: 2px solid black;
}

p {
	border: 2px solid black;
}

.list {
	border: 1px solid black;
	font-family: Verdana, sans-serif;
	margin: 1%;
}

.list div {
	vertical-align: top;
	display: inline-block;
	border: 2px solid black;
	padding: 10px;
}

.list #leftside {

}

#rightside {
	float: right;
	border: 1px solid black;
	width: 60%;
	height: 60%;

}

#skoga {
	background: contain;
}

.list ul li {
		list-style-type: none;
		line-height: 2em;
}

.list ul li a {
	text-decoration: none;
	color: black;
}

Fix vertical alignment of Archive List and picture


/*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. We want a simple website*/
a {
  border-bottom: none !important;
}

/*Make search go button on same line as search bar*/
.search {
  display: flex;
}

/*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;
}


 body {
  position: relative;
  padding-top: 45px;
}

.dataset {
	border: 1px solid #6998CB;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	/* padding: 7px 7px 0; */
	margin-bottom: 7px;
}

#drawableCanvas{
    width: 700px;
}

Remove the jutting out of the images and gene details boxes on the gene details page; add in the custom styles from drupal; resize the logo and position it more accurately; fix the navbar responsive layout


body, td, pre {color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; margin:8px;}
body {background:#FFF;}
body.mceForceColors {background:#FFF; color:#000;}
h1 {font-size: 2em}
h2 {font-size: 1.5em}
h3 {font-size: 1.17em}
h4 {font-size: 1em}
h5 {font-size: .83em}
h6 {font-size: .75em}
.mceItemTable, .mceItemTable td, .mceItemTable th, .mceItemTable caption, .mceItemVisualAid {border: 1px dashed #BBB;}
a.mceItemAnchor {display:inline-block; width:11px !important; height:11px  !important; background:url(img/items.gif) no-repeat 0 0;}
td.mceSelected, th.mceSelected {background-color:#3399ff !important}
img {border:0;}
table {cursor:default}
table td, table th {cursor:text}
ins {border-bottom:1px solid green; text-decoration: none; color:green}
del {color:red; text-decoration:line-through}
cite {border-bottom:1px dashed blue}
acronym {border-bottom:1px dotted #CCC; cursor:help}
abbr {border-bottom:1px dashed #CCC; cursor:help}

/* IE */
* html body {
scrollbar-3dlight-color:#F0F0EE;
scrollbar-arrow-color:#676662;
scrollbar-base-color:#F0F0EE;
scrollbar-darkshadow-color:#DDD;
scrollbar-face-color:#E0E0DD;
scrollbar-highlight-color:#F0F0EE;
scrollbar-shadow-color:#F0F0EE;
scrollbar-track-color:#F5F5F5;
}

img:-moz-broken {-moz-force-broken-image-icon:1; width:24px; height:24px}
font[face=mceinline] {font-family:inherit !important}

object {
	display: block; width: 400px;
	background: #cccccc url(../images/plugin.png) no-repeat center center;
}

Fix TinyMCE, but needs adding to theme.php


#boxes {
  display: table;
  width: 100%;
}

.box-1 {
  margin: 0 0 0 240px;
}

.box-1 .blocks {
  width: 100%;
  float: left;
}

.box-2 {
  position: relative;
  float: left;
  width: 190px;
}

.box-3 {
  position: relative;
  display: table-footer-group;
  width: 100%;
}

#profile-activity ul,
#profile-network ul,
#profile-wall ul {
  width: 460px;
}
#profile-activity ul.comment-replies,
#profile-network ul.comment-replies,
#profile-wall ul.comment-replies {
  width: auto;
}

#boxes {
  display: table;
  width: 100%;
}

.box-1 {
  margin: 0 0 0 240px;
}

.box-1 .blocks {
  width: 100%;
  float: left;
}

.box-2 {
  position: relative;
  float: left;
  width: 190px;
}

.box-3 {
  position: relative;
  display: table-header-group;
  width: 100%;
}

#profile-activity ul,
#profile-network ul,
#profile-wall ul {
  width: 460px;
}
#profile-activity ul.comment-replies,
#profile-network ul.comment-replies,
#profile-wall ul.comment-replies {
  width: auto;
}

Fix Top and Left Bar bug, the Top Bar was in below

Signed-off-by: Luciano Prestes <5ab21e9f45f33e070f4d05a411336dc02fb6fb84@gmail.com>


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

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

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

#fifth_from_top {
display: block;
position: relative;
top: 1200px;
left: 100px;
}

Add week 3 to blog index

Add week 3 to blog index


#editor {
	max-height: 250px;
	height: 250px;
	background-color: white;
	border-collapse: separate;
	border: 1px solid rgb(204, 204, 204);
	padding: 4px;
	box-sizing: content-box;
	-webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
	box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
	border-top-right-radius: 3px; border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px; border-top-left-radius: 3px;
	overflow:scroll;
}
#voiceBtn {
  width: 20px;
  color: transparent;
  background-color: transparent;
  transform: scale(2.0, 2.0);
  -webkit-transform: scale(2.0, 2.0);
  -moz-transform: scale(2.0, 2.0);
  border: transparent;
  cursor: pointer;
  box-shadow: none;
  -webkit-box-shadow: none;
}

#editor {
	max-height: 250px;
	height: 250px;
	background-color: white;
	border-collapse: separate;
	border: 1px solid rgb(204, 204, 204);
	padding: 4px;
	box-sizing: content-box;
	-webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
	box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
	border-top-right-radius: 3px; border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px; border-top-left-radius: 3px;
	overflow: scroll;
	outline: none;
}
#voiceBtn {
  width: 20px;
  color: transparent;
  background-color: transparent;
  transform: scale(2.0, 2.0);
  -webkit-transform: scale(2.0, 2.0);
  -moz-transform: scale(2.0, 2.0);
  border: transparent;
  cursor: pointer;
  box-shadow: none;
  -webkit-box-shadow: none;
}

Hide the editor box outline that browsers add.


body {
    font-family: sans-serif;
    color: #777;

}

.header {
     min-height: 80px;
     margin: 0;
     color:#fff;
     padding: 50px 20px 30px;
     text-align: center;
     border-bottom:1px solid #eee;
 }
    .header h1 {
        margin: 0.2em 0;
        font-size:3em;
    }
     .header h2 {
         font-weight:300;
         margin:0;
     }

h1,h2,h3,h4,h5,h6 {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
                 "Helvetica Neue", sans-serif;
    font-weight: 300;
}
.content {
    margin: 0 auto;
    width: 70%;
    margin-bottom:50px;
}
    .content p {
        line-height: 1.6em;
        font-size: 115%;
    }

    .content h1 {
        text-shadow: 0 1px 0 rgba(0,0,0,0.2);
    }
    .content h2 {
        color:rgb(75, 75, 75);
        margin:50px 0 20px 0;
        font-weight:bold;
    }
    .content code {
        /* even though we have nowrap, for long lines like gallery, it's better to wrap. especially on smaller screens. */
        white-space: normal;
        line-height:2em;
    }

/* NAVIGATION HEADER */
#headerMenu ul {
    background: #111;
    color: #fff;
}

    #headerMenu a:hover {
        background: #222;
        border-color: #222;
    }
    #headerMenu a {
        color: #fff;
        text-shadow: none;
    }

    #headerMenu .yui3-menu-active {
        background: #222;
    }

.gist {
    margin-top:25px;
}
.gist::before {
    content: "Code:";
    margin-bottom: 10px;
    display: block;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
                 "Helvetica Neue", sans-serif;
    font-weight: 300;
}

@media (max-width: 767px) {
    #headerMenu {
        position: relative;
    }
    #headerMenu ul {
        text-align: center;
    }
    #headerMenu a {
        font-size:80%;
    }

    .content {
        width: 95%;
    }
}

Add site syltes from Tilo's work

Add site syltes from Tilo's work


body {
    margin-top:60px;
}
#locationMap {
    min-width:300px;
    width:100%;
    height:400px;
}
.select-fg .form-control-feedback {
  padding-right: 20px;
}
.input-fg .form-control-feedback {
  padding-right: 50px;
}

body {
    margin-top:60px;
}
#locationMap {
    min-width:300px;
    width:100%;
    height:400px;
}
.select-fg .form-control-feedback {
  right: 45px !important;
}
.input-fg .form-control-feedback {
  right: 45px !important;
}

Improve alignment / spacing of form-control-feedback


/*

   BACKGROUND SIZE

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

*/

/*
  Often used in combination with background image set as an inline style
  on an html element.
*/

  .cover { background-size: cover; }
  .contain { background-size: contain; }

@media (--breakpoint-not-small) {
  .cover-ns { background-size: cover; }
  .contain-ns { background-size: contain; }
}

@media (--breakpoint-medium) {
  .cover-m { background-size: cover; }
  .contain-m { background-size: contain; }
}

@media (--breakpoint-large) {
  .cover-l { background-size: cover; }
  .contain-l { background-size: contain; }
}

/*

   BACKGROUND SIZE

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

*/

/*
  Often used in combination with background image set as an inline style
  on an html element.
*/

  .cover { background-size: cover!important; }
  .contain { background-size: contain!important; }

@media (--breakpoint-not-small) {
  .cover-ns { background-size: cover!important; }
  .contain-ns { background-size: contain!important; }
}

@media (--breakpoint-medium) {
  .cover-m { background-size: cover!important; }
  .contain-m { background-size: contain!important; }
}

@media (--breakpoint-large) {
  .cover-l { background-size: cover!important; }
  .contain-l { background-size: contain!important; }
}

Add !important to fix (what seems to be a bug)


:local(.component) {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  width: 100%;
  border-bottom: 1px solid #ccc;
}

:local(.days),
:local(.header) {
  display: flex;
  align-items: flex-start;
}

:local(.days) {
  border-top: 1px solid #ccc;
  overflow: auto;
}

:local(.header) {
  padding-left: 30px;
  flex-shrink: 0;
}

:local(.component) {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  width: 100%;
  border-bottom: 1px solid #ccc;
}

:local(.days),
:local(.header) {
  display: flex;
  align-items: flex-start;
}

:local(.days) {
  border-top: 1px solid #ccc;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

:local(.header) {
  padding-left: 30px;
  flex-shrink: 0;
}

Improve scrolling in ios safari

Improve scrolling in ios safari

This webkit specific property makes scrolling a lot smoother.


/*
Base CSS for Pyrc
*/

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

.channel {
    border-top-style: solid;
    border-top-width: 3px;
    border-top-color: gray;
}

.message {
    margin: 0;
    padding-top: 4px;
    padding-bottom: 5px;
    border-top: 1px solid gray;
}

.message:nth-child(odd) {
    background-color: white;
}

.message:nth-child(even) {
    background-color: gray;
}

.tabs {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    padding: 0;
    margin: 0 10px 0 0;
    padding: 50px 0 0 10px;
    width: 180px;
    overflow: hidden;
    background-color: gray;
}

.tabs li {
    margin: 5px 0;
    font-size: 22px;
}

.header {
    position: absolute;
    top: 0;
    left: 200px;
    right: 0;
    height: 50px;
}

.content {
    position: absolute;
    top: 50px;
    left: 200px;
    right: 0;
    bottom: 0;
}

/*
Base CSS for Pyrc
*/

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

.channel {
    border-top-style: solid;
    border-top-width: 3px;
    border-top-color: gray;
}

.message {
    margin: 0;
    padding-top: 4px;
    padding-bottom: 5px;
    border-top: 1px solid gray;
}

.message:nth-child(odd) {
    background-color: white;
}

.message:nth-child(even) {
    background-color: gray;
}

.tabs {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    padding: 0;
    margin: 0 10px 0 0;
    padding: 120px 0 0 10px;
    width: 180px;
    overflow: hidden;
    background-color: gray;
}

.tabs li {
    margin: 5px 0;
    font-size: 22px;
}

.header {
    position: absolute;
    top: 0;
    left: 200px;
    right: 0;
    height: 50px;
}

.content {
    position: absolute;
    top: 50px;
    left: 200px;
    right: 0;
    bottom: 0;
}

Move the channel list down.

Move the channel list down.


body {
  font-size: 125%;
}

h3 {
  font-weight: 500;
  text-align: center;
}

iframe {
  height: 1000px;
  margin-top: 20px;
  width: 100%;
}

.event-staff {
  list-style: none;
  padding: 0;
  text-align: center;
}

.event-staff img {
  border-radius: 50px;
  display: block;
  height: 100px;
  margin-bottom: 16px;
  width: 100px;
}

.event-staff li {
  display: inline-block;
  padding: 10px;
  text-align: center;
}

.event-staff strong {
  font-weight: 500;
}

.phone-number {
  font-size: 90%;
  text-align: center;
}

body {
  font-size: 125%;
}

h3 {
  font-weight: 500;
  text-align: center;
}

iframe {
  height: 1000px;
  margin-top: 20px;
  width: 100%;
}

.event-staff {
  list-style: none;
  padding: 0;
  text-align: center;
}

.event-staff img {
  border-radius: 50px;
  display: block;
  height: 100px;
  margin-bottom: 16px;
  width: 100px;
}

.event-staff li {
  display: inline-block;
  padding: 15px;
  text-align: center;
}

.event-staff strong {
  font-weight: 500;
}

.phone-number {
  font-size: 90%;
  text-align: center;
}

Add padding so Im less lonely

Add padding so Im less lonely


/**
 * Additional stylesheet for IE 8.
 * There is no LESS version of this. It's only function is to overwrite the normal styles.css with styles that make IE8 look not broken.
 * Images specially for this stylesheet will be placed in ./img/ie/
 */

/* Remove sprites and replace with un-sprited graphics */

header #nav-logo {
	background: transparent url('../img/ie/banner.png') center 0 no-repeat;
}

#vendor-info .vendor-title h1:before {
	background: transparent url('../img/ie/truck-icon.png') no-repeat;
}

#vendor-info .vendor-entries .vendor-entry .vendor-image {
	background: transparent url('../img/ie/vendor-icon.png') no-repeat;
}

/* Remove custom list icons from popup menus */

#vendors ul, #calendar ul {
	list-style: square;
	margin-left: 20px;
}

#vendors li, #calendar li {
	background-image: none !important;
	padding-left: 0;
}

/* Hide pi - svg is not supported, and neither is GitHub */
#pi {
	display: none;
}

/* Note: IE8 does not support media queries, so no need to fix responsive screen styles */

/**
 * Additional stylesheet for IE 8.
 * There is no LESS version of this. It's only function is to overwrite the normal styles.css with styles that make IE8 look not broken.
 * Images specially for this stylesheet will be placed in ./img/ie/
 */

/* Remove sprites and replace with un-sprited graphics */

header #nav-logo {
	background: transparent url('../img/ie/banner.png') center 0 no-repeat;
}

#vendor-info .vendor-title h1:before {
	background: transparent url('../img/ie/truck-icon.png') no-repeat;
}

#vendor-info .vendor-entries .vendor-entry .vendor-image {
	background: transparent url('../img/ie/vendor-icon.png') no-repeat;
}

/* Remove custom list icons from popup menus */

#vendors ul, #calendar ul {
	list-style: square;
	margin-left: 20px;
}

#vendors li, #calendar li {
	background-image: none !important;
	padding-left: 0;
}

/* Hide pi - svg is not supported, and neither is GitHub */
#pi {
	display: none;
}

/* Hide leaflet attribution - not an ideal solution, but there is a display bug because :last-of-type selector doesn't work  */
.leaflet-container .leaflet-control-attribution {
	display: none;
}

/* Note: IE8 does not support media queries, so no need to fix responsive screen styles */

Hide leaflet attribution on IE8 entirely because it can't only hide the last one (:last-of-type pseudoselector doesn't work)


html {
    height: 100%;
}

body {
    background-color: #eee;
    color: #333;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 1.5em;
    margin: 50px auto;
    min-height: 50%;
    padding: 0;
    position: relative;
    width: 400px;
}

header h1 {
    font-size: 32px;
}

label span {
    display: block;
    text-align: center;
}

label input {
    border: 2px solid #bdc7d8;
    display: block;
    font-size: 18px;
    margin: 0 auto;
    padding: 3px;
}

label #error {
    background-color: #ff9494;
    border: 2px solid #a63232;
    margin-top: 5px;
    padding: 3px 5px;
}

input[type="submit"] {
    font-size: 18px;
}

#output {
    margin-top: 10px;
}

#code {
    border: 1px solid #bdc7d8;
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
    font-size: 11px;
    padding: 3px;
    width: 392px;
}

#preview {
    margin-top: 10px;
    text-align: center;
}

html {
    height: 100%;
}

body {
    background-color: #eee;
    color: #333;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 1.5em;
    margin: 50px auto;
    min-height: 50%;
    padding: 0;
    width: 400px;
}

header h1 {
    font-size: 32px;
}

label span {
    display: block;
    text-align: center;
}

label input {
    border: 2px solid #bdc7d8;
    display: block;
    font-size: 18px;
    margin: 0 auto;
    padding: 3px;
}

label #error {
    background-color: #ff9494;
    border: 2px solid #a63232;
    margin-top: 5px;
    padding: 3px 5px;
}

input[type="submit"] {
    font-size: 18px;
}

#output {
    margin-top: 10px;
}

#code {
    border: 1px solid #bdc7d8;
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
    font-size: 11px;
    padding: 3px;
    width: 392px;
}

#preview {
    margin-top: 10px;
    text-align: center;
}

Remove relative position from body so github ribbon targets full window


body {
  width: 45em;
  margin: auto;
  text-align: center;
}

body {
  width: 45em;
  max-width: 100%;
  margin: auto;
  text-align: center;
}

fix(Style): Stop wide bodies from horizontally scrolling