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


/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *
 *= require c3
 *= require patternfly-bootstrap-treeview/dist/bootstrap-treeview.min.css
 *= require main
 *= require jquery.jqplot
 *= require automate_import_export
 *= require dialog_fields
 *= require angular
 *= require miq_timeline
 *= require notifications
 *= require angular-patternfly-sass/dist/styles/angular-patternfly
 *= require schedule_editor
 *= require miq_tree
 *= require codemirror
 *= require codemirror/theme/eclipse
 *= require jqplot
 *= require kubernetes-topology-graph/dist/topology-graph
 *= require jquery-ui-miq-theme/jquery-ui-1.9.2.custom
 *= require container_providers_dashboard
 *= require wizard
 *= require template
 *= require topology
 *= require container_topology
 *= require middleware_topology
 *= require service_dialogs
 *= require xml_display
 *= require patternfly-timeline/dist/timeline
*/

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *
 *= require c3
 *= require patternfly-bootstrap-treeview/dist/bootstrap-treeview.min.css
 *= require main
 *= require jquery.jqplot
 *= require automate_import_export
 *= require dialog_fields
 *= require angular
 *= require miq_timeline
 *= require notifications
 *= require angular-patternfly-sass/dist/styles/angular-patternfly
 *= require schedule_editor
 *= require miq_tree
 *= require codemirror
 *= require codemirror/theme/eclipse
 *= require jqplot
 *= require kubernetes-topology-graph/dist/topology-graph
 *= require jquery-ui-miq-theme/jquery-ui-1.9.2.custom
 *= require container_providers_dashboard
 *= require wizard
 *= require template
 *= require timeline
 *= require topology
 *= require container_topology
 *= require middleware_topology
 *= require service_dialogs
 *= require xml_display
 *= require patternfly-timeline/dist/timeline
*/

Fix for https://bugzilla.redhat.com/show_bug.cgi?id=1382648 - missing require statement for timeline css caused layout issue for timeline (transferred from ManageIQ/manageiq@3efdf665679210c38a382204f6881072bfab9b05)


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


body {
    margin-top: 5rem;
    background: url('../images/background.png');
    background-size: 400px 347px;
}

.page {
    background: white;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 0 1rem rgb(200, 200, 200);
}

.jumbotron {
    background: rgb(248, 248, 248);
    border-radius: 0.5rem;
    box-shadow: 0 0 1rem rgb(200, 200, 200);
}

.gantt-chart td {
    width: 2rem;
    max-width: 2rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.gantt-chart th a {
    color: black;
    padding-right: 1rem;
}

.gantt-chart td a {
    color: white;
}

.star {
    color: rgb(255, 204, 0);
}

.star:hover {
    color: rgb(191, 158, 25);
}

.orycion {
    margin: 1rem 0;
}

.card.project .text-muted a {
    color: rgb(95, 104, 111);
}

/*.btn-primary {
    color:
}*/

body {
    margin-top: 5rem;
    background: url('../images/background.png');
    background-size: 400px 347px;
}

.page {
    background: white;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 0 1rem rgb(200, 200, 200);
}

.jumbotron {
    background: rgb(248, 248, 248);
    border-radius: 0.5rem;
    box-shadow: 0 0 1rem rgb(200, 200, 200);
}

.gantt-chart td {
    width: 2rem;
    max-width: 2rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.gantt-chart th a {
    color: black;
    padding-right: 1rem;
}

.gantt-chart td a {
    color: white;
}

.star {
    color: rgb(255, 204, 0);
}

.star:hover {
    color: rgb(191, 158, 25);
}

.orycion {
    margin: 1rem 0;
}

.card.project .text-muted a {
    color: rgb(95, 104, 111);
}

/* Primary Accent Colour: rgb(255, 228, 124) */

Add a comment about the primary accent colour


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

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

.hfill {
  width: 100%;
}

input {
  box-sizing: border-box;
}

#url-description {
  margin: 12px 3px 0 3px;
}

.action-area {
  -webkit-box-align: center;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: end;
  display: -webkit-box;
  padding: 12px;
  text-align: end;
}

.button-strip {
  -webkit-box-orient: horizontal;
  display: -webkit-box;
}

.button-strip > button {
  -webkit-margin-start: 10px;
  display: block;
  white-space: nowrap;
}

.valid {
  background-image: url("chrome://theme/IDR_INPUT_GOOD");
  height: 21px;
  width: 22px;
}

.invalid {
  background-image: url("chrome://theme/IDR_INPUT_ALERT");
  height: 21px;
  width: 22px;
}
}

Fix benign typo in edit search engine dialog css

There was an extra } at the end of the file.  CSS ignores it.  It was harmless.  But, it should be removed.

BUG=None
TEST=None

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

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


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

.jp-DebuggerEditor-highlight {
  text-shadow: 0 0 1px var(--jp-layout-color0);
  outline: 1px solid;
}

body[data-jp-theme-light='false'] .jp-DebuggerEditor-highlight {
  background-color: var(--md-brown-800);
  outline-color: var(--md-brown-600);
}

body[data-jp-theme-light='true'] .jp-DebuggerEditor-highlight {
  background-color: var(--md-brown-100);
  outline-color: var(--md-brown-300);
}

.jp-DebuggerEditor-marker {
  position: absolute;
  left: -34px;
  top: -1px;
  color: var(--jp-error-color1);
}

Make highlighted line in debugger readable


a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

code {
  background-color: #fff;
}

.navbar {
  border-bottom: 1px solid #eee;
  margin-bottom: 1em;
  padding-bottom: 1em;
  padding-top: 1em;
  width: 100%;
}

.navbar ul {
  list-style: none;
  margin-bottom: 0;
}

.navbar li {
  float: left;
  margin-bottom: 0;
  margin-right: 2em;
  position: relative;
}

.navbar a {
  color: #222;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2rem;
  text-transform: uppercase;
}

.navbar a:hover {
  color: rgb(30, 174, 219)
}

.sidebar li {
  line-height: 1.2em;
}

.sidebar ul {
  list-style: none;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

pre > code {
  white-space: pre-wrap;
}

code {
  background-color: #fff;
}

.navbar {
  border-bottom: 1px solid #eee;
  margin-bottom: 1em;
  padding-bottom: 1em;
  padding-top: 1em;
  width: 100%;
}

.navbar ul {
  list-style: none;
  margin-bottom: 0;
}

.navbar li {
  float: left;
  margin-bottom: 0;
  margin-right: 2em;
  position: relative;
}

.navbar a {
  color: #222;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2rem;
  text-transform: uppercase;
}

.navbar a:hover {
  color: rgb(30, 174, 219)
}

.sidebar li {
  line-height: 1.2em;
}

.sidebar ul {
  list-style: none;
}

Make relevance example word wrap

Make relevance example word wrap


.network-container {
  padding: 5px;
}
.svg-network {
  cursor: move;
}
.node {
  stroke: #fff;
  stroke-width: 1.5px;
  cursor: pointer;
}
.highlighting .nodecontainer {
  opacity: 0.2;
}
.highlighting .nodecontainer.highlighted {
  opacity: 1;
}
.node-label {
  font-family: sans-serif;

}
.subject {
  stroke-width: 4px;
  stroke-dasharray: 1,1;
  cursor: auto;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 2px;
  opacity: 0.7;
  stroke-linejoin: miter;
}
.highlighting .link {
  opacity: 0.2;
}
.highlighting .link.highlighted {
  opacity: 1;
}
.node-icon {
  pointer-events: none;
  font-family: 'Glyphicons Halflings';
  fill: none;
}

.subjectlink {
  stroke: #666;
  stroke-width: 1.5px;
  opacity: 0.8;
}
.tooltip {
  position: absolute;
  text-align: center;
  max-width: 300px;
  padding: 8px;
  font: 12px sans-serif;
  background: #fff;
  border: solid 1px #aaa;
  pointer-events: none;
}

.network-container {
  padding: 5px;
}
.svg-network {
  cursor: move;
}
.node {
  stroke: #fff;
  stroke-width: 1.5px;
  cursor: pointer;
}
.nodecontainer {
  transition: opacity 0.3s ease-in-out;
}
.highlighting .nodecontainer {
  opacity: 0.2;
}
.highlighting .nodecontainer.highlighted {
  opacity: 1;
}
.node-label {
  font-family: sans-serif;

}
.subject {
  stroke-width: 4px;
  stroke-dasharray: 1,1;
  cursor: auto;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 2px;
  opacity: 0.7;
  stroke-linejoin: miter;
  transition: opacity 0.5s ease-in-out;
}
.highlighting .link {
  opacity: 0.2;
}
.highlighting .link.highlighted {
  opacity: 1;
}
.node-icon {
  pointer-events: none;
  font-family: 'Glyphicons Halflings';
  fill: none;
}

.subjectlink {
  stroke: #666;
  stroke-width: 1.5px;
  opacity: 0.8;
}
.tooltip {
  position: absolute;
  text-align: center;
  max-width: 300px;
  padding: 8px;
  font: 12px sans-serif;
  background: #fff;
  border: solid 1px #aaa;
  pointer-events: none;
}

Add transition for opacity changes on nodes


.body_content {
margin-right: 1cm;
}
.body_content_box {
margin-left: 1cm;
float: left;
}
.body_content_process {
width: 100%;
}
.process_iframe {
width: 100%;
height: 20%;
}

.body_content {
margin-right: 1cm;
}
.body_content_box {
margin-left: 1cm;
float: left;
}
.body_content_process {
margin-left: 1cm;
margin-right: 1cm;
width: 100%;
}
.process_iframe {
width: 100%;
height: 20%;
}

Index process design trial II

Index process design trial II


    background:url('/bundles/cachingblog/images/bg3.jpg') repeat;
.fl { float:left; }
.fr { float:right; }
.clear { clear:both; }

.entry {
    margin-bottom:50px;
}

.entry p {
    width:390px;
    text-align:justify;
}

form .form-part {
    margin:10px 0;
}

form .input {
    margin-left:120px;
}

form textarea {
    height:90px;
}

.images {
}

}

    background:url('/bundles/cachingblog/images/bg3.jpg') repeat;
.fl { float:left; }
.fr { float:right; }
.clear { clear:both; }

.entry {
    margin-bottom:50px;
}

.entry p {
    width:390px;
    text-align:justify;
}

form .form-part {
    margin:10px 0;
}

form .input {
    margin-left:120px;
}

form textarea {
    height:90px;
}

.images {
}

/**** Fancybox overrides ****/
#fancybox-left,
#fancybox-right {
    width:25%;
}

Make prev/next areas smaller on the picture modals


.ve-ui-rowWidget {
	clear: left;
	float: left;
	margin-bottom: -1px;
	width: 100%;
}

.ve-ui-rowWidget-label {
	display: block;
	margin-right: 5%;
	padding-top: 0.5em;
	width: 35%;
}

.ve-ui-rowWidget > .ve-ui-rowWidget-label {
	float: left;
}

.ve-ui-rowWidget > .ve-ui-rowWidget-cells {
	float: left;
	margin-right: -1px;
}

.ve-ui-rowWidget > .ve-ui-rowWidget-cells > .oo-ui-inputWidget {
	float: left;
	margin-right: -1px;
	width: 8em;
}

.ve-ui-rowWidget > .ve-ui-rowWidget-delete-button > .oo-ui-buttonElement-button {
	margin: 0;
	padding-bottom: 2px;
}

.ve-ui-rowWidget.ve-ui-rowWidget-insertionRow {
	background-color: red;
}

.ve-ui-rowWidget {
	clear: left;
	float: left;
	margin-bottom: -1px;
	width: 100%;
}

.ve-ui-rowWidget-label {
	display: block;
	margin-right: 5%;
	padding-top: 0.5em;
	width: 35%;
}

.ve-ui-rowWidget > .ve-ui-rowWidget-label {
	float: left;
}

.ve-ui-rowWidget > .ve-ui-rowWidget-cells {
	float: left;
}

.ve-ui-rowWidget > .ve-ui-rowWidget-cells > .oo-ui-inputWidget {
	float: left;
	margin-right: -1px;
	width: 8em;
}

.ve-ui-rowWidget > .ve-ui-rowWidget-delete-button > .oo-ui-buttonElement-button {
	margin: 0;
}

.ve-ui-rowWidget.ve-ui-rowWidget-insertionRow {
	background-color: red;
}

Fix TableWidget row delete button styles

- Removed styles which caused delete row buttons to be misaligned
  with the associated inputs.

Bug: T116854
Change-Id: I93e7a1557faaa5460682a44e84dd870391131186


/*
list-filter-dropdown
*/

.admin-interface .list-filter-dropdown {
    margin-top: 0;
    margin-bottom: 20px;
}

.admin-interface .list-filter-dropdown h3 {
    margin-top: 0;
}

.admin-interface .list-filter-dropdown select {
    background-color: #FFFFFF;
    width: calc(100% - 30px);
    margin-right: 15px;
}

.admin-interface.list-filter-highlight .list-filter-dropdown h3.active + div select {
    font-weight: bold;
}

/*
list-filter-dropdown
*/

.admin-interface .list-filter-dropdown {
    margin-top: 10px;
    margin-bottom: 10px;
}

.admin-interface .list-filter-dropdown h3 {
    margin-top: 0;
}

.admin-interface .list-filter-dropdown select {
    background-color: #FFFFFF;
    width: calc(100% - 30px);
    margin-right: 15px;
}

.admin-interface.list-filter-highlight .list-filter-dropdown h3.active + div select {
    font-weight: bold;
}

[css] Fix list-filter dropdown vertical margins.


/* Hide "add element" in list of all stores in estimation report */
.editable_reports_tree .oe_form_field_one2many_list_row_add {
    display: none;
}

/* Hide the delete icon */
.editable_reports_tree .oe_list_record_delete {
    display: none;
}

Remove ability to remove stores in estimation reports


.Colors {
  display: flex;
}
@media (min-width: 768px) {
  .Colors {
    width: 70%;
    margin-bottom: 5px;
    margin-left: auto;
  }
}
.Colors div {
  flex: 1;
  text-align: center;
}

.Colors--standsTaken {
  color: lightgreen;
}

.Colors--idle {
  color: lightgrey;
}

.Colors--away {
  color: salmon;
}

.Colors {
  display: flex;
}
@media (min-width: 768px) {
  .Details-item--large .Colors {
    width: 70%;
    margin-bottom: 5px;
    margin-left: auto;
  }
}
.Colors div {
  flex: 1;
  text-align: center;
}

.Colors--standsTaken {
  color: lightgreen;
}

.Colors--idle {
  color: lightgrey;
}

.Colors--away {
  color: salmon;
}

Fix chart color legend affecting the wrong chart.


.mattermostView {
  text-align: center;
}

.mattermostView .ErrorView {
  text-align: left;
}

.mattermostView webview, .mattermostView .mattermostView-loadingScreen {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.mattermostView-with-tab webview, .mattermostView-with-tab .mattermostView-loadingScreen {
  top: 31px;
}

.mattermostView-hidden webview {
  flex: 0 1;
  width: 0px;
  height: 0px;
}

.mattermostView-loadingScreen {
  vertical-align: middle;
  background: white;
}

.mattermostView-loadingImage {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.mattermostView {
  text-align: center;
}

.mattermostView .ErrorView {
  text-align: left;
}

.mattermostView webview, .mattermostView .mattermostView-loadingScreen {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.mattermostView-with-tab webview, .mattermostView-with-tab .mattermostView-loadingScreen {
  top: 31px;
}

.mattermostView-hidden webview {
  flex: 0 1;
  width: 0px;
  height: 0px;
}

.mattermostView-loadingScreen {
  vertical-align: middle;
  background: white;
}

.mattermostView-loadingImage {
  opacity: 0.5;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

Set opacity to the icon

Set opacity to the icon


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

.root {
  -webkit-font-smoothing: antialiased;
  appearance: none;
  outline: none;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  padding: 0;
  margin: 0 auto;
  display: block;
  border-radius: 4px;

  @nest &:focus {
    background-color: color(var(--brand-primary) a(20%));
  }
}

.inner {
  /* padding: 3px; */
  position: relative;
  outline: none;
  display: flex;
  align-items: center;
}

.avatarContainer {
  margin: -1px;
}

.iconContainer {
  @nest & > svg {
    display: block;
    font-size: 17px;
  }
}

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

.root {
  -webkit-font-smoothing: antialiased;
  appearance: none;
  outline: none;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  padding: 0;
  margin: 0 auto;
  display: block;
  border-radius: 4px;

  @nest &:focus {
    box-shadow: var(--input-box-shadow--focus);
  }
}

.inner {
  /* padding: 3px; */
  position: relative;
  outline: none;
  display: flex;
  align-items: center;
}

.avatarContainer {
  margin: -1px;
}

.iconContainer {
  @nest & > svg {
    display: block;
    font-size: 17px;
  }
}

[default-layout] Change focus state of user menu drawer in Navbar


.position-test {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 100px;
  height: 100px;
}

@import url(/base/test/fixtures/renderer-css-test.css);

.position-test {
  left: 10px;
  top: 10px;
}

Reduce duplication of CSS test files

Reduce duplication of CSS test files


.MuiAppBar-colorPrimary.header {
  background: #fff;
  color: #5f6368;
}

.header-title {
  font-size: 24px;
  font-weight: 300;
  margin: 0px 16px 0px 36px;
}

.header-search {
  background: #f1f3f4;
  border-radius: 5px;
  display: flex;
  margin: 8px 0px;
  padding: 10px;
  width: 100%;
}

.header-search.hidden {
  visibility: hidden;
}

div.header-search-root {
  padding-left: 6px;
  width: 100%;
}

.MuiInputBase-input.header-search-input {
  font-size: 18px;
  color: #80868b;
  font-weight: 500;
  padding: 2px 4px;
}

.MuiInputBase-input.header-search-input::placeholder {
  opacity: 0.75;
}

svg.header-search-icon {
  font-size: 26px;
  color: #5f6368;
  cursor: pointer;
}

svg.header-search-icon:hover {
  opacity: 0.8;
}

.auth-button.MuiButton-root {
  margin-left: 16px;
  min-width: 96px;
}

.MuiAppBar-colorPrimary.header {
  background: #fff;
  color: #5f6368;
}

.MuiToolbar-root {
  justify-content: space-between;
}

.header-title {
  font-size: 24px;
  font-weight: 300;
  margin: 0px 16px 0px 36px;
}

.header-search {
  background: #f1f3f4;
  border-radius: 5px;
  display: flex;
  margin: 8px 0px;
  max-width: 640px;
  padding: 10px;
  width: 100%;
}

.header-search.hidden {
  visibility: hidden;
}

div.header-search-root {
  padding-left: 6px;
  width: 100%;
}

.MuiInputBase-input.header-search-input {
  font-size: 18px;
  color: #80868b;
  font-weight: 500;
  padding: 2px 4px;
}

.MuiInputBase-input.header-search-input::placeholder {
  opacity: 0.75;
}

svg.header-search-icon {
  font-size: 26px;
  color: #5f6368;
  cursor: pointer;
}

svg.header-search-icon:hover {
  opacity: 0.8;
}

.auth-button.MuiButton-root {
  margin-left: 16px;
  min-width: 96px;
}

Set max-width on the search input

Set max-width on the search input


/* Base styles */

body {
  background-color: #FFF;
  color: #222;
  padding-top: 50px;
}

#map {
  height: 300px;
  margin-bottom: 20px;
}

.measurement div .description {
    margin-top: 10px;
    font-size: 1.8em;
}

.measurement div .value {
    padding-top: 10px;
    font-size: 3em;
    font-weight: bold;
}

.measurement {
    margin-bottom: 20px;
}

#chart {
    height: 300px;
}

Make chart a little narrower to fit on 1 screen.


.root {
    user-select: none;
}

.radio {
    margin-right: 4px;
    margin-bottom: 3px;
    vertical-align: middle;
}

.root:focus {
    outline: $focus-outline;
}

.root[disabled] {
    color: $brand-disabled;
    cursor: $cursor-not-allowed;
}

.root {
    user-select: none;
}

.radio {
    margin-right: 4px;
    margin-bottom: 3px;
    vertical-align: middle;
}

.root:focus {
    outline: $focus-outline;
}

.root[disabled] {
    color: #999;
    cursor: $cursor-not-allowed;
}

Update disabled color of <u-radio>

:lipstick: Update disabled color of <u-radio>


body {
  background: #181818;
  font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
  color: white;
  margin: 3em;
  padding: 0;
}

.line {
	margin-top: 0.7em;
}

#input:focus {
	outline: none;
}

i {
  padding-left: 1.5em;
}

.green {
	color: #2ECC71;
}

.yellow {
	color: #FFDE00;
}

.orange {
	color: #FFA500;
}

body {
  background: #181818;
  font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
  color: white;
  margin: 3em;
  padding: 0;
}

.line {
	margin-top: 0.7em;
}

#input:focus {
	outline: none;
}

i {
  padding-left: 1.5em;
  cursor: pointer;
}

.green {
	color: #2ECC71;
}

.yellow {
	color: #FFDE00;
}

.orange {
	color: #FFA500;
}

Change cursor to pointer when hovering over upvote and downvote buttons


.wrapper {
  width: 45%;
  padding: 3%;
}

.arrow {
  font-weight: bolder;
  font-size: 150%;
  margin: 3%;
}

.calculation {
  font-size: 130%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper {
  width: 45%;
  padding: 3%;
}

.arrow {
  font-weight: bolder;
  font-size: 3vw;
  margin: 3%;
}

.calculation {
  font-size: 2vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

Use vw font-sizes for calculation lists

Use vw font-sizes for calculation lists


      @font-face {
    font-family: "Computer Modern";
    src: url('computer-modern.otf');
  }

*
 {
	font-family: "Computer Modern";
 }

select, option, input
 {
	font-family: sans-serif !important;
 }

#menu
	{
		display: inline-block;
		list-style-type: none;
		width: 100%;
	}

#menu li
 {
  display: inline;
  margin: 1%;
 }

#menu li h1
	{
		margin-left: -4%;
		color: white;
		display: inline;
	}

#menu li a
	{
	font-size: 150%;
	color: white;
	text-decoration: none;
	}

#content
 {
  margin: auto;
  width: 75%;
  text-align: center;
 }

#feature
  {
   font-size: 300%;
  }

#solution
 {
  font-size: 200%;
 }

#top
 {
  background-color: darkgreen;
  margin-bottom: 10%;
 }

body
 {
  margin: 0;
 }

.todo
 {
  opacity: 0.4;
 }

.failed
 {
  color: red;
 }

      @font-face {
    font-family: "Computer Modern";
    src: url('computer-modern.otf');
  }

*
 {
	font-family: "Computer Modern";
 }

select, option, input
 {
	font-family: sans-serif !important;
 }

#menu
	{
		display: inline-block;
		list-style-type: none;
		width: 60%;
	}

#menu li
 {
  display: inline;
  margin: 1%;
 }

#menu li h1
	{
		margin-left: -6%;
		color: white;
		display: inline;
	}

#menu li a
	{
	font-size: 150%;
	color: white;
	text-decoration: none;
	}

#content
 {
  margin: auto;
  width: 75%;
  text-align: center;
 }

#feature
  {
   font-size: 300%;
  }

#solution
 {
  font-size: 200%;
 }

#top
 {
  background-color: darkgreen;
  margin-bottom: 10%;
 }

body
 {
  margin: 0;
 }

.todo
 {
  opacity: 0.4;
 }

.failed
 {
  color: red;
 }

Stop the menu from running over two lines


* {
  color: #919292;
  text-align: left;
}

.image {
  display: block;
  background: transparent;
  width: 30em;
  height: 12em;
  text-align: center;
}

.subhead {
  font-size: 1.25em;
}

article > section {
  margin-top: 5%;
}

* {
  color: #919292;
  text-align: left;
}

.image {
  display: block;
  background: transparent;
  width: 30em;
  height: 12em;
  text-align: center;
  page-break-before: always;
  page-break-after: always;
}

.subhead {
  font-size: 1.25em;
}

article > section {
  margin-top: 5%;
}

Edit subtitle and page spacing

Edit subtitle and page spacing


.navbar-header .logo {
	width: 121px;
}

.banner img {
	padding: 15px 0;
}

#appstore, #googleplay, #desktopclient {
	text-align: center;
	display: block;
}

div.footer-text {
	color: #AAAAAA;
	text-align: center;
	margin-bottom: 40px;
}

.banner ul#menu-header.nav>li.menu-get-owncloud {
	padding: 0 0 0 15px;
	margin-top: 7px;
	margin-left: 10px;
	background-color: #428BCA;
	border-radius: 6px;
	border-color: #357EBD}

.banner ul#menu-header.nav>li.menu-get-owncloud a{
	padding: 7px 16px 7px 0;
	line-height: 1.25;
	border-bottom: 0
}

Add styling of get owncloud button in top nav


.aui-diagram-builder-base-tabs-container .aui-diagram-builder-base-tab-add .aui-tab-label {
	background: url(add.png) no-repeat 0px -1px;
}

.aui-diagram-builder-base-tabs-container .aui-diagram-builder-base-tab-settings .aui-tab-label {
	background: url(configuration.png) no-repeat 0px -1px;
}

.aui-diagram-builder-base-tabs-container .aui-tab-label {
    padding-bottom: 5px;
    padding-left: 22px;
}

.aui-diagram-builder-base .aui-diagram-builder-base-field {
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

Remove icons from TabView due to the new TabView theme


.header {
  font-size: 60px;
  font-family: Monospace;
  background-color: black;
  color: white;
  border: 5px solid blue;
  padding: 5px;
  margin: 60px 60px 30px 60px;
}
.title {
  color: Cornflowerblue;
  font-size: 80px;
  font-family: cursive Monospace;
  font-weight: bolder;
}
.img {
    display: block;
    margin: auto;
    border: 3px solid green;
    padding: 10px;
    width: 30%;
}
body {
  background-color: silver;
  text-align: center;
}
ul {
  font-size: 17px;
  text-align: left;
  margin-left: 150px;
  margin-right: 150px;
}

.header {
  font-size: 60px;
  font-family: Monospace;
  background-color: black;
  color: white;
  border: 5px solid blue;
  padding: 5px;
  margin: 60px 60px 30px 60px;
}
.title {
  color: Cornflowerblue;
  font-size: 80px;
  font-family: cursive Monospace;
  font-weight: bolder;
}
.img {
    display: block;
    margin: auto;
    border: 3px solid green;
    padding: 10px;
    width: 30%;
}
body {
  background-color: silver;
  text-align: center;
}
ul {
  font-size: 17px;
  text-align: left;
  list-style-image:
  url('https://github.com/chrisjim316/freeCodeCamp-/blob/master/Assets/Images/TributePage/ComputerIconExtraSmall.png?raw=true');
  margin-left: 150px;
  margin-right: 150px;
}

Replace bullet points with computer icons


.calendar .symbol {
  padding-left: 0;
  padding-right: 10px;
  font-size: 80%;
  vertical-align: top;
}

.calendar .symbol span {
  display: inline-block;
  -ms-transform: translate(0, 2px); /* IE 9 */
  -webkit-transform: translate(0, 2px); /* Safari */
  transform: translate(0, 2px);
}

.calendar .title {
  padding-left: 0;
  padding-right: 0;
}

.calendar .time {
  padding-left: 30px;
  text-align: right;
}

.calendar .symbol {
  padding-left: 0;
  padding-right: 10px;
  font-size: 80%;
  vertical-align: top;
}

.calendar .symbol span {
  display: inline-block;
  -ms-transform: translate(0, 2px); /* IE 9 */
  -webkit-transform: translate(0, 2px); /* Safari */
  transform: translate(0, 2px);
}

.calendar .title {
  padding-left: 0;
  padding-right: 0;
}

.calendar .time {
  padding-left: 30px;
  text-align: right;
  vertical-align: top;
}

Make times align to the top of the cell

Make times align to the top of the cell


.sidebar {
  border-right: 1px solid #e0e0e0;
  height: 100%;
  position: fixed;
  -webkit-transition: opacity .1s ease-in-out;
  transition: opacity .1s ease-in-out;
  width: 279px;
}

.sidebar.disabled {
  opacity: .6;
  pointer-events: none;
}

.sidebar-header {
  background-color: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
  padding: 9px;
}

.sidebar-content {
  background-color: #fafafa;
  height: calc(100% - 49px);
  overflow: hidden;
  position: relative;
}

.sidebar {
  border-right: 1px solid #e0e0e0;
  height: 100%;
  position: fixed;
  -webkit-transition: opacity .1s ease-in-out;
  transition: opacity .1s ease-in-out;
  width: 279px;
}

.sidebar.disabled {
  opacity: .6;
  pointer-events: none;
}

.sidebar-header {
  background-color: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
  padding: 9px;
}

.sidebar-content {
  background-color: #fafafa;
  height: calc(100% - 49px);
  overflow: hidden;
  position: relative;
  touch-action: none;
}

Disable touch-action to scroll a list in Chrome for Android


body {
    background-color: black;
    color: white;
    font-family: Courier New;
}

div.chat-window {
    position: absolute;
    width: 95%;
    height: 85%;
}

h1.headline {

}

div.private-message {
    color: red;
}

iframe.chat-frame{
    border: 0px;
    overflow:scroll;
    width: 95%;
    height: 80%;
    margin-top: 30px;
}

form.message-form {
    top: 100px;
}

a {
    color: #0099FF;
}

div.footer {
    position: fixed;
    bottom:10px;
}

body {
    background-color: black;
    color: white;
    font-family: Courier New;
}

div.chat-window {
    position: absolute;
    width: 95%;
    height: 85%;
}

h1.headline {

}

div.private-message {
    color: #FF3333;
}

iframe.chat-frame{
    border: 0px;
    overflow:scroll;
    width: 95%;
    height: 80%;
    margin-top: 30px;
}

form.message-form {
    top: 100px;
}

a {
    color: #0099FF;
}

div.footer {
    position: fixed;
    bottom:10px;
}

Make red for private messages a little lighter


html, body {
  height: 100%;
}

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

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

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

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

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

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

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

html, body {
  height: 100%;
}

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

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

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

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

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

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

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

Order css based on DOM order

Order css based on DOM order


div.sticky-table{
  	overflow:auto;
  	width:300px;
  	height:80vh;
}
.sticky-table td,
.sticky-table th {
  background: #fff;
  width: 100px;

}

.sticky-table table {
  table-layout: fixed;
  width:100%;
}
.sticky-table td:first-child, .sticky-table th:first-child {
  position:sticky;
  left:0;
  z-index:1;

}

.sticky-table thead tr th {
  position:sticky;
  border:1px solid #ddd;
  top:-1px;
}
.sticky-table th:first-child,.sticky-table  th:last-child {z-index:2;}

div.sticky-table{
  	overflow:auto;
  	width:300px;
  	height:80vh;
}
.sticky-table td,
.sticky-table th {
  background: #fff;
  width: 100px;
  width:70px;
  vertical-align: middle;
}
.sticky-table th>div.pull-right{
  position:absolute;
  right:0;bottom:0;
}

.sticky-table table {
  table-layout: fixed;
  width:100%;
}
.sticky-table td:first-child, .sticky-table th:first-child {
  position:sticky;
  left:0;
  z-index:1;
  width:200px;

}

.sticky-table thead tr th {
  position:sticky;
  border:1px solid #ddd;
  top:-1px;
  vertical-align: middle;
  text-align: center;
}
.sticky-table th:first-child,.sticky-table  th:last-child {z-index:2;}

Update sticky-table headers and columns css


@import '../../../css/colors.css';

.wrapper {
  composes: wrapper from "./shared/full_height_stage.css";

  .groups-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;

    @media(min-width: 1040px) {
      display: block;
    }

    overflow: auto;
  }

  .flex-container-for-groups-and-optionally-action-items {
    flex: 1;
    display: flex;
    overflow: hidden;

    :global(.action-item) {
      flex-grow: 0;
      flex-basis: auto;
      width: 50%;

      @media (min-width: 1040px) {
        width: 25%;
      }
      padding: 0 0.75rem;
      border-left: 1px solid var(--semantic-light-grey);
    }
  }
}

@import '../../../css/colors.css';

.wrapper {
  composes: wrapper from "./shared/full_height_stage.css";

  .groups-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;

    @media(min-width: 1040px) {
      display: block;
    }

    overflow: auto;
  }

  .flex-container-for-groups-and-optionally-action-items {
    flex: 1;
    display: flex;
    overflow: hidden;

    :global(.action-item) {
      flex-grow: 0;
      flex-basis: auto;
      width: 50%;

      @media (min-width: 1040px) {
        width: 25%;
      }
      padding: 0 0.75rem;
      border-left: 1px solid var(--semantic-light-grey);
    }
  }
}

Add position: relative to groups container for react-flip-move


.swat-radio-note-book td {
	vertical-align: top;
}

.swat-radio-note-book-page-container {
	overflow: hidden;
}

Remove default overflow hidden. The JS takes care of it for us.

svn commit r73361


body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.fa-quora-square:before {
  content: '\f059'
}

.fa-google-scholar-square:before {
  content: '\f14c'
}

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.fa-quora-square:before {
  content: '\f059'
}

.fa-google-scholar-square:before {
  content: '\f1a0'
}

Change icon for Google Scholar

Change icon for Google Scholar